Curs Web Development
Curs HTML
Curs CSS
Curs Javascript
Curs PHP
Curs Phyton
Curs SQL
Curs SEO

Valori și unități în CSS

Există multe tipuri de valori ale proprietăților CSS: valori numerice, culori, funcții care efectuează o anumită acțiune și altele. Uneori, pentru a specifica valori exacte, trebuie să utilizăm diverse unități de măsură.

Vom explora valori precum lungimea, culoarea și funcțiile simple, dar și valori mai puțin obișnuite, precum gradele și chiar valori fără unități de măsură.

Valori numerice

Acestea sunt utilizate frecvent în CSS.

Lungime și dimensiune

Veți folosi unități de lungime și dimensiune în mod constant în CSS, pentru layout (machetare), tipografie și multe altele.

🔧 Exemplu lungime și dimensiune în CSS

În exemplul de mai sus am aplicat o margine top (sus) și bottom (jos) de 10px, iar pentru marginile stânga și dreapta am folosit valoarea auto, ceea ce a dus la centrarea paragrafelor pe orizontală. De asemenea, am aplicat 10px pentru padding (spațiul interior al paragrafelor) și 2px pentru border (chenar) utilizând scrierea prescurtată (shorthand). O singură valoare pentru proprietățile margin și padding înseamnă atribuirea aceleiași valori pe toate cele patru laturi.

Am setat width (lățimea) la dimensiuni din ce în ce mai mari, iar „cutiile” cu text cresc corespunzător. La fel, font-size (mărimea fontului) crește de sus în jos. Dimensiunea fontului se referă la înălțimea fiecărui glif.

Pixelii (px) sunt unități absolute, deoarece păstrează aceeași dimensiune indiferent de alte setări.

Alte unități absolute sunt: q (1/40 dintr-un cm), mm, cm, in (2,54 cm), pt (1/72 dintr-un inch), pc (12pt). Dintre acestea, px este cea mai folosită.

Există și unități de măsură relative la dimensiunea fontului sau la dimensiunea afișajului (viewport):

Observați cum crește dimensiunea fontului de la un paragraf la altul:

🔧 Exemplu setare mărime font cu ajutorul unității em

După cum vezi, valorile nu sunt mereu convenabile pentru calcule rapide. Din fericire, există un truc vechi folosit și pentru em: setarea fontului de bază la 62.5% - ceea ce face 1em sau 1rem să fie 10px.


body { font-size: 62.5%; } /* =10px */
h1   { font-size: 2.4em; } /* =24px */
p    { font-size: 1.4em; } /* =14px */
li   { font-size: 1.4em; } /* =14px */

Pentru rem varianta echivalentă este:


html { font-size: 62.5%; } /* =10px */
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

Pentru a acoperi browserele mai vechi care nu recunosc unitatea rem, putem folosi o scriere combinată: 


html {
  font-size: 62.5%;
}
body {
  font-size: 14px;    /* fallback */
  font-size: 1.4rem;  /* modern */
}
h1 {
  font-size: 24px;    /* fallback */
  font-size: 2.4rem;  /* modern */
}

Despre acest subiect există numeroase articole și discuții pro/contra pe internet.

Exemple ipotetice:

➤ Ecran: 1200px lățime × 1000px înălțime → 10vw = 120px, 10vh = 100px. Lățimea e mai mare → 10vmax = 120px, 10vmin = 100px.

➤ Rotire ecran: 1000px lățime × 1200px înălțime → 10vh = 120px, 10vw = 100px. 10vmax rămâne 120px (acum înălțimea dictează), 10vmin rămâne 100px.

➤ Redimensionare fereastră: 1000px lățime × 800px înălțime → 10vh = 80px, 10vw = 100px, 10vmax = 100px, 10vmin = 80px.

Unitățile viewport par similare cu procentele (pe care le vom discuta în continuare), dar sunt diferite: la procente, dimensiunea elementului copil se raportează la părintele său.

🔧 Exemplu viewport vs procente

Dupa ati putut vedea in exemplul de mai sus, latimea primului element copil este setata sa fie egala cu 80% din latimea parintelui sau. Cu toate acestea, cel de-al doilea element copil are o latime de 80vw, ceea ce il face mai lat decit parintele sau.

Intrucit aceste unitati se bazeaza pe dimensiunile de afisare, este foarte convenabila utilizarea lor atunci cind latimea, inaltimea sau dimensiunile elementelor trebuie sa fie setate in raport cu afisajul.

🔧 Exemplu viewport sectiuni fullscreen

  margin: 0;
  padding: 0;

Un alt exemplu implica inaltimea liniilor de text(line-height). Se pot utiliza unitati de masura pentru a seta o inaltime specifica a liniei de text, dar adesea este mai usor de utilizat o valoare fara unitate, care actioneaza ca un simplu factor de multiplicare:

🔧 Exemplificare line-height fara unitate de masura

In exemplul de mai sus, dimensiunea fontului este de 16px, iar inaltimea liniei de text va fi de 1.5 ori mai mare, adica 24px.(16*1.5).

🔧 Exemplu utilizare unitati procentuale.

Dupa cum ati putut observa containerul cu latimea definita in px, isi pastreaza dimensiunea chiar si atunci cind fereastra este redimensionata.

Aceste doua tipuri diferite de aspect(schema,layout) al containerelor, sunt adesea denumite, aspect lichid(liquid layout, se schimba odata cu modificarea viewport-ului) si aspect cu latime fixa(fixed width layout, care isi pastreaza dimensiunile). Acestea au utilizari diferite:

- aspectul fluid(lichid), poate fi utilizat pentru a va asigura ca un document se va potrivi intotdeauna pe afisaj(ecran) si va arata bine indiferent de marimea afisajului,

- aspectul cu latime fixa ar putea fi utilizat pentru a afisa o harta care are mereu aceeasi dimensiune, dar din care se vede doar o anumita portiune. Pentru a vedea o alta parte a hartii trebuie utilizate barele de scroll din fereastra browserului, iar portiunea vizibila va depinde de marimea afisajului dispozitivului utilizat pentru vizualizare.

🔧 Exemplu unitate de masura un numar simplu-numar intreg

In exemplul de mai sus sunt utilizate mai multe unitati de masura. Ne intereseaza proprietatea animation-iteration-count: 5;, pentru a evidentia utilizarea valorii 5, care este un numar intreg si presupune repetarea de 5 ori a animatiei.

Culori

Exista multe modalitati de a specifica culorile in CSS. Aceleasi valori pentru culoare pot fi utilizate oriunde in CSS, indiferent daca specificati culoarea textului, a fundalului sau orice altceva. Sistemul standard de culori disponibil in computerele moderne este de 24 de biti, ceea ce permite afisarea de aproximativ 16.7 milioane de culori distincte prin combinarea diferitelor canale de rosu, verde si albastru, cu 256 de valori pentru fiecare canal(256x256x256=16.777.216)

☞ Pentru a converti intre diferitele sisteme de culori pe care urmeaza sa le discutam, veti avea nevoie de un convertor de culori. Exista multe astfel de unelte online, dar la fel de bine poti utiliza convertorul de mai jos.

Convertor de culori

Specificarea culorii folosind numele acesteia

Cea mai simpla si mai veche metoda este aceea de a specifica o culoare folosind numele acesteia.


p {
  background-color: red;
}

Aceasta metoda este usor de inteles, dar ne limiteaza drastic posibilitatile, pentru ca exista doar aproximativ 165 de nume de culori disponibile in browserele moderne.

🔧 Lista completa de culori

Sistemul de culori hexazecimale

Urmatorul sistem de culori omniprezent este reprezentat de codurile hexazecimale(sau hexadecimale) si este ceva mai greu de inteles dar mult mai versatil, fiind utilizat foarte mult. Fiecare valoare consta intr-un simbol #, urmat de sase cifre, fiecare din ele putind lua o valoare intre 0 si f (0123456789abcdef).

Fiecare pereche de valori reprezinta unul dintre canale - rosu, verde si albastru - si permite specificarea oricarei valori dintre cele 256 de valori disponibile pentru fiecare(16 x 16 = 256).

🔧 Exemple sisteme numerice

☞ Sistemul hexazecimal, este sistemul de numeratie in baza 16, scris de obicei cu ajutorul simbolurilor 0-9 si A-F. Sistemul este intilnit mai des in domeniul informatic, unde este folosit intens deoarece un octet cuprinde exact doua cifre hexazecimale.

🔧 Exemplu simplu de utilizare a sistemului de culori hexazecimal

Sistemul de culori RGB

Acest sistem este foarte bine suportat de mai toate browserele si foarte mult utilizat in CSS. RGB este acronimul pentru Red, Green, Blue. Spre deosebire de sistemul hexazecimal, fiecare dintre aceste culori, poate lua orice valoare intre 0 si 255.

🔧 Exemplu simplu de utilizare a sistemului de culori RGB

Sistemul de culori HSL

HSL este acronimul pentru hue, saturation, and lightness - nuanta, saturatie si luminozitate si astfel se pot obtine reprezentari pentru peste 16 milioane de culori, dar intr-un mod diferit.

Dupa cum se poate observa sistemul HSL pare sa fie mult mai intuitiv decit alte sisteme si pentru ca acum este mult mai bine suportat de browsere decit era acum citiva ani, anticipez ca va deveni sistemul preferat al designerilor cit de curind.

🔧 Exemplu simplu de utilizare a sistemului de culori HSL

De exemplu, este simplu si usor sa identificam un set de nuante, care sa se imbine intr-o schema de culori monocroma.


  /* trei nuante diferite de rosu */
  background-color: hsl(0,100%,50%);
  background-color: hsl(0,100%,60%);
  background-color: hsl(0,100%,70%);

Spații de culoare moderne: CSS Color Module Level 4 și 5 introduc noi spații de culoare precum lab(), lch(), oklab() și oklch(), care oferă o reproducere mai precisă și mai uniformă a culorilor pe diferite dispozitive. Acestea sunt utile pentru designuri accesibile și pentru a păstra consistența culorilor în tipărire și pe ecrane.

Exemplu:


/* roșu în spațiul LCH */
background-color: lch(54.29 106.84 40.85);

/* violet în spațiul OKLCH */
background-color: oklch(62.2345% 0.2779 328.21);

De asemenea, funcția color-mix() permite amestecarea a două culori direct în CSS:


background-color: color-mix(in lch, red 40%, blue);
🔧 Exemple culori moderne CSS

RGBA si HSLA

A-ul din capatul RGB si HSL vine de la cel de-al patrulea canal, canalul alfa, responsabil de opacitatea culorii obiectului. Pentru canalul alfa putem specifica un numar intre 0(complet transparent) si 1(complet opac).

🔧 Exemplu rgba-hsla

Opacitatea

Exista un alt mod de a specifica transparenta in CSS - proprietatea "opacity". Prin utilizarea acestei proprietati, se poate modifica transparenta tuturor elementelor selectate dar si a copiilor acestora.

🔧 Exemplu utilizare opacitate

Transparentizarea culorilor: Proprietatea background-color acceptă acum notația cu canal alfa direct în hex (#RRGGBBAA), de exemplu #ff000080 pentru roșu cu 50% opacitate. Aceasta este mai scurtă și mai ușor de citit în anumite contexte.

Functiile

In programare, o functie este un fragment de cod reutilizabil, care poate fi rulat de mai multe ori, pentru a indeplini o sarcina repetitiva, cu efort minim, atit din partea autorului cit si a calculatorului.

Si in CSS exista functii, desi nu este un limbaj de programare. Am vazut deja diverse functii la lucru, in sectiunea in care am discutat despre culori - rgb(), hsla(), functii care calculeaza ce culori vor fi afisate in browser.

In principiu, ori de cite ori veti vedea o valoare urmata de paranteze, intre care se afla alte valori separate de virgule, aveti de-a face cu o functie.


  /* calculeaza pozitia unui element dupa ce a fost rotit cu 45 de grade */
  transform: rotate(45deg);
  
  /* calculeaza noua pozitie a unui element dupa deplasarea spre stinga cu 50px si in jos cu 60px */
  transform: translate(50px, 60px);
  
  /* stabileste valoarea calculata a 90% din latimea curenta minus 15px */
  width: calc(90% - 15px);
  
  /* gaseste si incarca o imagine de fundal in document */
  background-image: url('image.png'); 
  
  /* creaza un gradient de culoare pentru fundal */ 
  background-image: linear-gradient(to left, teal, aquamarine);

Funcții CSS noi (Level 4 și 5): Au fost adăugate funcții precum min(), max(), clamp() pentru a seta limite flexibile, round() și mod() pentru calcule matematice, funcții trigonometrice (sin(), cos(), tan()), hypot() pentru calculul ipotenuzei, precum și random() și random-item() (experimentale) pentru generarea de valori aleatorii. Funcția attr() poate fi folosită acum în orice proprietate CSS, cu tipuri de date și valori implicite.

🧠 Quiz - Valorile și Unitățile CSS

Cascada si mostenirea ➔

Top