M5 | L2 – Introducere CSS IV

Astăzi vom afla despre:

  • Culori RGB, Variabile

Aplicațiile pe care le vom folosi sunt:

NotePAd++; codepen.io

PROIECTE:

Stil pentru site

  1. Pinguinul

Știați că există alte modalități de a reprezenta culorile în CSS? Unul dintre aceste moduri este numit cod hexadecimal sau hexcode.

De obicei folosim zecimale sau numere de bază 10, care folosesc simbolurile 0 până la 9 pentru fiecare cifră. Hexadecimalele (sau hex) sunt numere de bază 16. Aceasta înseamnă că folosește șaisprezece simboluri distincte. Ca și zecimale, simbolurile 0-9 reprezintă valorile de la zero la nouă. Atunci A, B, C, D, E, F reprezintă valorile de la zece la cincisprezece. În total, 0 până la F pot reprezenta o cifră în hexadecimal, oferindu-ne 16 valori totale posibile.

În CSS, putem folosi 6 cifre hexadecimale pentru a reprezenta culorile, două pentru componentele roșu (R), verde (G) și albastru (B). De exemplu, # 000000 este negru și este, de asemenea, cea mai mică valoare posibilă.

Din aceste trei culori pure (roșu, verde și albastru), putem varia cantitățile fiecăruia pentru a crea peste 16 milioane de culori! De exemplu, portocaliul este roșu pur, amestecat cu verde și fără albastru. În cod hex, acest lucru se traduce: #FFA500. Cifra 0 este cel mai mic număr din cod hex, și reprezintă o absență completă a culorii. Cifra F este cel mai mare număr din cod hexagonal și reprezintă luminozitatea maximă posibilă.

Creati un documenthtml nou cu codul:

<style>

  .red-text {

    color: black;

  }

  .green-text {

    color: black;

  }

  .dodger-blue-text {

    color: black;

  }

  .orange-text {

    color: black;

  }

</style>

<h1 class=”red-text”>I am red!</h1>

<h1 class=”green-text”>I am green!</h1>

<h1 class=”dodger-blue-text”>I am dodger blue!</h1>

<h1 class=”orange-text”>I am orange!</h1>

Challenge 1:

  • Înlocuiți cuvintele de culoare din elementul style  cu codurile lor hexa corecte.

Codul hexag roșu # FF0000 poate fi scurtat la # F00. Această formă scurtată oferă o cifră pentru roșu, o cifră pentru verde și o cifră pentru albastru. Acest lucru reduce numărul total de culori posibile la aproximativ 4.000. Dar browserele vor interpreta # FF0000 și # F00 ca exact aceeași culoare.

Un alt mod în care puteți reprezenta culorile în CSS este folosind valori RGB. Valoarea RGB pentru negru arată astfel:

  • rgb (0, 0, 0)

Valoarea RGB pentru alb arată astfel:

  • rgb (255, 255, 255)

În loc să folosești șase cifre hexadecimale, cu RGB specificați luminozitatea fiecărei culori cu un număr între 0 și 255.

Challenge 2:

  • Să înlocuim codul hex din culoarea de fundal a elementului body cu valoarea RGB pentru negru: rgb (0, 0, 0).

Challenge 3:

  • Înlocuiți cuvintele de culoare din elementul style  cu valori rgb.

Variabilele CSS sunt o modalitate puternică de a schimba multe proprietăți de stil CSS simultan, schimbând o singură valoare.

Challenge 4:

  • Deschideti fiserul penhuin01.html
  • În clasa .penguin, schimbați valoarea negru în gri, valoarea gri în alb, iar valoarea galbenă în portocaliu.

Pentru a crea o variabilă CSS, trebuie doar să îi dați un nume cu două cratime în fața ei și să îi atribuiți o valoare. Va fi creata o variabilă numită –penguin-skin cu valoarea de gri. Acum puteți utiliza acea variabilă în altă parte din CSS pentru a schimba valoarea altor elemente în gri.

Challenge 5:

  • Deschideti fiserul penguin02.html
  • În clasa .penguin, create a variable name –penguin-skin si datii valoarea gray.

După ce ați creat variabila, puteți atribui valoarea acesteia altor proprietăți CSS, făcând referire la numele pe care l-ați dat.

Challenge 6:

  • Deschideti fiserul penguin02.html
  • Aplicați variabila –penguin-skin pe proprietatea backround a claselor de penguin-top, penguin-bottom, right-hand si left-hand

Când utilizați variabila ca valoare a proprietății CSS, puteți atașa o valoare de recuperare la care browserul va reveni dacă variabila dată este nevalidă.

Challenge 7:

  • Deschideti fiserul penguin03.html
  • Se pare că există o problemă cu variabilele furnizate claselor .penguin-top și .penguin-bottom. În loc să remediați variabila gresita, adăugați o valoare de recuperare black la proprietatea de fundal a claselor .penguin-top și .penguin-bottom.

Când creați o variabilă, este disponibila în interiorul selectorului în care ați creat-o. De asemenea, este disponibila pentru oricare dintre descendenții acelui selector. Acest lucru se întâmplă deoarece variabilele CSS sunt moștenite, la fel ca proprietățile obișnuite.

Pentru a utiliza moștenirea, variabilele CSS sunt adesea definite în elementul :root.

: root este un pseudo-selector de clasă care se potrivește cu elementul rădăcină al documentului, de obicei elementul html. Prin crearea variabilelor în :root, acestea vor fi disponibile la nivel global și pot fi accesate de la orice alt selector din foaia style.

Challenge 8:

  • Deschideti fiserul penguin04.html
  • Definiți o variabilă numită –penguin-belly în :root și dați-i valoarea pink. Puteți vedea apoi că variabila este moștenită și că toate elementele copil care o folosesc obțin fundaluri roz

Când creați variabilele în :root, acestea vor seta valoarea acelei variabile pentru întreaga pagină. Puteți apoi să suprascrieti aceste variabile setându-le din nou într-un element specific.

Challenge 9:

  • Deschideti fiserul penguin05.html
  • Schimbati –penguin-belly în clasa .penguin cu valoarea white.