Pana acum am scris cateva reguli CSS si am vazut ca unele din ele primesc ca valoare o unitate de masura. In aceasta lectie vom vorbi mai mult despre ele.
De obicei, valorile acestor reguli nu sunt altceva decat un numar cu o unitate de masura la sfarsit.
De exemplu: 10px
Ceea ce este foarte important de stiut, este ca nu avem niciodata spatiu intre acel numar si unitatea de masura.
Cele mai folosite unitati sunt pixeli, em si procente.
Exista mai multe unitati de masura, dar aceastea sunt cele mai folosite. In cursul avansat de CSS vom discuta si despre celelalte, dar acestea sunt suficiente pentru aproape toate cazurile, asa ca ne vom axa momentan doar pe ele.
Pixeli
Pixeli am folosit pana acum cand am setat un padding sau un margin.
Ea se scrie precizand un numar si apoi prescurtarea px:
margin: 20px;
Desi noi precizam oarecum o valoare fixa, in CSS aceasta unitate de masura este vazuta drept dinamica. Si anume, daca o regula css foloseste o valoare in pixeli, ea poate sa difere de la un PC la altul. Nu va arata la fel peste tot.
De exemplu, pe un monitor cu rezolutia de 1024x768 marginea si paddingul vor aparea mai mari decat pe un monitor cu rezolutia 2048x1080. Pe primul monitor un pixel este mai mare decat pe al doilea, ocupa mai mult loc pe ecran, deci in consecinta marginea va parea mai mare.
Acesta nu este un lucru rau, ci doar trebuie sa il luam in calcul cand folosim pixeli drept unitate de masura.
Em
Cu unitatea em este putin mai complicat de lucrat dar rezultatul poate fi foarte bun.
Ea se scrie la fel ca si pixeli, un numar si apoi em la final:
font-size: 2em;
E putin mai complicat de lucrat cu ea in sensul ca valoarea finala va fi in functie de parintele ei. Mai exact in functie de marimea fontului pe elementul parinte.
Daca de exemplu, avem pentru body marimea textului de 14px, iar pentru h1 vom scrie regula pentru a face textul 2em, atunci marimea textului va fi 2*14 =28px.
De obicei aceasta unitate este folosita pentru stilizarea textului, mai exact pentru a seta marimea fontului. Daca o folosim pe o alta proprietate in afara de cea pentru text, comportamentul ei se schimba un pic.
Aceasta unitate de masura este utila, dar de obicei folosita de persoanele care au mai multa experienta cu CSS. Pentru inceput cred ca pixelii sunt arhisuficienti pentru a seta dimensiunile unui element.
Procentele
Cea dea treia unitate de masura care este la fel de folosita ca si pixeli sunt procentele.
Ele se folosesc in modul urmator:
width: 50%;
La fel ca si em, aceasta unitate isi calculeaza valoarea in functie de dimensiunea parintelui. Avantajul este ca e mult mai usor de lucrat cu ea. Un paragraf ce are regula de mai sus, intodeauna va fi 50% din parinte, indiferent de ce dimensiune sau marime a textului are acesta.
Un alt avantaj este ca folosind procente putem creea o pagina care este dinamica.
Indiferent de pe ce dispozitiv cineva ne va vizita pagina, ea isi va pastra proportiile, iar paragraful va avea intodeauna 50% din parinte.
Alte valori in CSS
Asadar procentele impreuna cu pixeli sunt cele mai folosite unitati de masura, atunci cand trebuie sa folosim una.
Dar nu toate regulile din CSS au nevoie de o unitate de masura, unele primesc pur si simplu o valoare text.
De exemplu color, prin care setam culoarea textului intr-un element, primeste numele unei culori.
Asa ca valorile regulilor CSS difera, dar cand vine vorba despre unitati de masura, intodeauna ne putem baza pe aceastea doua.