1. Ce nseamn i la ce folosete limbajul CSS?

CSS este acronimul de la Cascading Style Sheets i reprezint un limbaj complex i

puternic; conceptele de baz ale lui au fost introduse n Lecia 1. Este folosit la adugarea
aspectului (stilurilor) pentru paginile HTML i permite refolosirea stilurilor de la un
element la altul i de la o pagin la alta. nainte de a descifra toate aceste caracteristici,
este necesar s nelegem bine anumite aspecte ale limbajului.
n primul rnd, este foarte important s cunoatem modul n care sunt afiate aspectele
(stilurile). ndeosebi trebuie s cunoatem modul n care funcioneaz diferitele tipuri de
selectori i modul n care ordinea acestor selectori poate influena modul de afiare a
stilurilor. Deasemenea este util descrierea valorile uzuale ale proprietilor care apar n
CSS, mai ales cele referitoare la culori i la mrime.
2. Ce nseamn actualizarea n cascad?
Vom ncepe prin a explica (folosind exemple) modul n care sunt afiate stilurile,
nelegnd ce nseamn cascading (n cascad). n CSS, toate stilurile se propag n
cascad din partea de sus a fiierului CSS (style sheet = foaie de stiluri) pn jos,
permind diferitelor stiluri s fie adugate sau suprascrise pe msura ce se avanseaz n
foaia de stiluri.
De exemplu, s spunem c dorim s selectm toate elementele paragraf corespondente
din fiierul HTML, selecia fiind n partea de sus a foii de stiluri i stabilind culoarea de
fundal n portocaliu (orange) i dimensiunea fontului la 24 pixeli. Apoi, ctre sfritul foii
de stiluri, selectm din nou elementele paragraf i modificm culoarea lor de fundal n
verde (green) dup cum se vede n continuare:
3. Cnd nu funcioneaz propagarea n cascad? (cnd apar conflicte de stiluri?)
Toate stilurile se vor propaga n cascad de la nceputul foii de stiluri i pn la sfritul
acesteia. Exist totui situaii cnd funcionarea n cascad poate crea probleme. Aceste
situaii se petrec atunci cnd sunt folosite diverse tipuri de selectori iar specificitatea
acestor selectori stric propagarea n cascada. S studiem aceste situaii.
4. Ce nseamn specificitatea selectorilor?
Orice selector din CSS deine o pondere de specificitate. Ponderea de specificitate a unui
selector mpreun cu poziia sa n cascad identific modul n care vor fi afiate stilurile
(aspectul).
n Lecia 1, S construim o prim pagin web, am descris trei tipuri diferite de
selectori: de tip, de clas i selectorii ID. Toi aceti selectori dein cte o pondere unic
de specificitate.
Selectorul de tip deine ponderea de specificitate cea mai mic i anume, 0-0-1.
Selectorul de clas deine o specificitate medie avnd valoarea 0-1-0. n sfrit, selectorul
ID deine ponderea de specificitate cea mai mare, valoarea 1-0-0. Dup cum se poate
vedea, ponderile de specificitate se calculeaz folosind 3 coloane. Prima coloan numr

selectorii ID, cea de a doua coloan selectorii de clas i a treia coloan numr selectorii
de tip.
Ce este important aici este faptul c selectorul ID deine o pondere de specificitate mai
mare dect selectorul de clas iar selectorul de clas deine o specificitate mai mare dect
selectorul de tip.
5. Cum se calculeaz ponderea specificitii?
Valorile ponderilor sunt formate din coloane desprite; ele nu se calculeaz n
baza 10. Selectorii de clas nu au valoarea 10, selectorii ID nu au valoarea 100!
n schimb aceste valori trebuiesc interpretate ca 0-1-0 i respectiv 1-0-0. Imediat
vom analiza mai ndeaproape aceste valori atunci cnd combinm selectorii.
6. Care este ponderea selectorului de tip?
Cu ct ponderea specificitii unui selector este mai mare, cu att selectorul este
mai important n cazul n care se produce un conflict de stiluri. De exemplu dac
un element paragraf este selectat folosind un selector de tip ntr-un loc i un
selector ID n altul, selectorul ID va avea preceden fa de selectorul de tip
indiferent unde apare selectorul ID n cascad.
7. Care este ponderea selectorului de clas?
n exemplul de mai sus, primul selector combinat, .tranzistor p conine doi
selectori: un selector de clas i unul de tip. Aceti doi selectori sunt separai
printr-un singur spaiu. Selectorul cheie este un selector de tip ce trimite ctre
elementele paragraf. Deoarece acest selector de tip este precalificat cu un
selector de clas tranzistor, selectorul luat per ansamblu va selecta numai
elementele paragraf care se afl n cadrul unui element cu valoarea atributului
clas egal cu tranzistor.
8. Care este ponderea selectorului ID?
n cadrul CSS, acel paragraf este selectat de dou tipuri diferite de selectori: un
selector de tip i un selector ID. Dei selectorul de tip se afl dup selectorul ID
n cascad, selectorul ID are prioritate fa de selectorul de tip deoarece are o
pondere mai mare a specificitii. n consecin paragraful va aprea cu fundal
verde (green).
9. La ce folosete combinarea selectorilor?
Pn acum am analizat modul n care sunt folosii individual diferite tipuri de
selectori. Este ns util s cunoatem cum s folosim mpreun aceti selectori.
Combinnd selectorii putem fi mai specifici referitor la ce element sau grup de
elemente dorim s selectm.
De exemplu s spunem c dorim s selectm toate elementele paragraf care au
valoarea atributului clas egal cu tranzistor i s le stabilim culoarea maro
(brown). Dac totui unele din aceste paragrafe ntmpltor au valoarea

atributului clas egal cu bipolar, dorim s facem culoarea de fundal

corespunztoare galben (yellow).
10. Ce nseamn selector cheie?
Atunci cnd se combin selectorii, ei trebuie citii de la dreapta la stnga.
Selectorul cel mai din dreapta, chiar nainte de acolad, este cunoscut drept
selector cheie. Selectorul cheie identific n mod exact crui element i vor fi
aplicate stilurile. Orice selector aflat la stnga selectorului cheie va servi drept
precalificator
11. Cum este bine s fie ponderea de specificitate i ce tehnic se folosete?
Atunci cnd selectorii sunt combinai, se modific i ponderile de specificitate ale
selectorilor. Aceste ponderi de specificitate combinat pot fi calculate numrnd
fiecare tip diferit de selector din cadrul selectorului combinat.
Relund exemplul anterior, primul selector .tranzistor p deine att un selector de
clas precum i un selector de tip. Cunoscnd valoarea selectorului de clas 0-10 i valoarea selectorului de tip 0-0-1 valoarea total a selectorului combinat va fi
0-1-1 aflat adunnd fiecare tip de selector.
12. Ce sunt clasele multiple? Dai un exemplu.
O metod de a menine valori mici ale ponderile de specificitate ale selectorilor
este de a adopta o tehnic modular, mprind stiluri similare de la un element
la altul. Aceast tehnic modular este reprezentat de ierarhizarea diferitelor
stiluri folosind clase multiple.
Elementele din HTML pot avea mai multe valori ale atributului clas atta timp
ct fiecare valoare este separat prin spaiu. Astfel putem aplica anumite stiluri
pentru toate elementele de un anumit tip i n acelai timp s aplicm alte stiluri
unor elemente mai specifice.
Putem refolosi stilurile dintr-o clas i s adugm stiluri din alt clas.
S lum drept exemplu butoanele. S spunem c dorim ca toate butoanele
noastre s aib mrimea fontului de 16 pixeli, dar c dorim diferite culori de
fundal n funcie de modul n care sunt folosite. Putem crea mai multe clase pe
care s le suplimentm dup cum este nevoie cu stilurile dorite:
<a class="btn btn-pericol">...</a>
<a class="btn btn-ok">...</a>
.btn {
font-size: 16px;
}
.btn-pericol {
background: red;
}

.btn-ok {
background: green;
}

13. Ce nseamn sRGB?

Toate valorile culorilor din CSS sunt definite printr-un spaiu al culorilor denumit
sRGB (acronimul de la standard red, green, blue - standard rou, verde,
albastru). Culorile din acest spaiu sunt formate amestecnd canalele rou, verde
i albastru, asemntor modului n care afieaz culorile monitoarele i
televizoarele. Amestecnd diverse niveluri de rou, verde i albastru, putem crea
milioane de culori i s ajungem aproape la orice culoare dorim.
n prezent exist patru moduri principale de a reprezenta culorile din sRGB din
cadrul CSS: cuvinte cheie, notaii hexazecimale, valori RGB i valori HSL.
14. Ce culoare este #fff?
Galben
15. Ce realizeaz funcia rgb()?
Valorile culorilor RGB folosesc funcia rgb() care reprezint acronimul de la red
(rou), green (verde) i blue (albastru). Funcia accept trei valori separate prin
virgul, fiecare fiind un ntreg de la 0 la 255.
16. Ce realizeaz funcia rgba()?
Culorile RGB pot include i un canal alfa (transparen) folosind funcia rgba().
Funcia rgba() necesit o a patra valoare care trebuie s fie un numr real ntre 0
i 1. O valoare 0 creeaz o culoare complet transparent, adic invizibil iar
valoarea 1 creeaz o culoare complet opac. Orice valoare real ntre 0 i 1 va
crea o culoare semitransparent.
17. Ce realizeaz funcia hsl()?
Valorile HSL folosesc funcia hsl() care este acronimul de la hue (nuan),
saturation (saturaie) i lightness (luminioyitate). ntre paranteze, funcia accept
trei valori separate prin virgul, asemntor cu rgb().
Prima valoare, nuana este un numr fr uniti de la 0 la 360. Numerele 0 pn
la 360 reprezint discul culorilor, iar valoarea identific gradul unei culori pe acest
disc.
Cea de a doua i a treia valoare, saturaia i luminozitatea sunt procente de la 0
la 100%. Valoarea saturaiei identific ct de saturat este o culoare, cu 0
reprezentnd nuane de gri iar 100% semnificnd o culoare complet saturat.
Identificatorul luminozitate identific ct de nchis sau deschis este nuana,
cu0 reprezentnd negru nchis iar 100% reprezentnd alb deschis.

ntorcndu-ne la nuana de portocaliu, ca valoare HSL ar putea fi scris ca

hsl(24, 100%, 100%).
18. Ce realizeaz funcia hsla()?
Valorile HSL la fel ca i RGBa, pot include un canal alfa (de transparen)
folosind funcia hsla(). Comportarea acestui canal este aceeai ca n cazul
funciei rgba(). Trebuie adugat o a patra valoare real ntre 0 i 1, desemnnd
gradul de opacitate.
Aceeai nuan de portocaliu ca mai sus n valori HSLa cu opacitate 50% va fi
reprezentat prin hsl(24, 100%, 100%, .5).
19. Ce fel de uniti pentru lungime exist n CSS?
Valorile pentru lungimi n CSS sunt similare cu valorile pentru culori din punct de
vedere al faptului c exist numeroase tipuri de valori ce pot fi folosite pentru
lungime, fiecare potrivit pentru o anumit situaie. Valorile pentru lungimi pot fi
date n dou forme diferite: absolute i relative, fiecare folosind uniti de msur
specifice.
Ne vom opri acum doar asupra valorilor celor mai uzuale i intuitive deaorece
valorile complexe ofer mai mult flexibilitate dect avem nevoie pe moment.
20. Ce este un pixel?
Un pixel este egal cu 1/96 dintr-un inci; astfel ntr-un inci exist 96 de pixeli.
Totui mrimea exact a unui pixel poate varia uor n funcie de dispoyitivele cu
rezoluie mare i cele cu rezoluie mic.
Pixelii sunt folosii de ceva vreme i sunt utilizai mpreun cu o mulime de
proprieti. Codul ce urmeaz folosete pixelii pentru a stabili mrimea fontului la
14 pixeli pentru toate paragrafele.
21. Ce este unitatea em?
Unitatea "em" este deasemenea foarte utilizat. Unitatea em este reprezentat
prin notaia em iar lungimea ei este calculat n funcie de mrimea fontului
elementului.
O unitate em cu valoarea 1 este echivalent cu mrimea fontului unui element.
Astfel dac un element are fontul 14 pixeli iar limea este stabilit la 5em,
limea va fi egal cu 70 de pixeli (14 pixeli nmulit cu 5).