Determinarea ordinii cascadei
Exista mai multe moduri de a aplica stilurile, astfel ca ne putem afla in situatia in care unui singur
element sa-i fie aplicate mai multe stiluri. Foile de stil din doua sau mai multe surse, folosite simultan,
pot cauza contradictii. De aceea exista cateva reguli care determina ordinea cascadei, si acestea sunt:
- Existenta atributului !important – confera prioritate maxima la afisarea definitiei in care este
utilizat. - Sursa regulilor – exista numeroase navigatoare care permit utilizatorului sa-si defineasca
propriile foi de stil. Totusi, foile de stil ale autorului le anuleaza pe cele ale vizitatorului daca
acestea din urma nu au valoarea !important. - Specificitate – cu cat o regula dispune de mai multi selectori HTML, de clasa si de
identificator, cu atat prioritatea ei creste. Selectorii ID au valoarea 100, clasele au valoarea 10,
iar selectorii HTML au valoarea 1. - Momentul aparitiei – cu cat un stil apare mai tarziu, mai aproape de elementul caruia i se
aplica, cu atat importanta lui este mai mare. Astfel, definitiile in linie au prioritatea cea mai
mare si anuleaza toate stilurile precedente cu care intra in conflict.
In situatia in care pentru un element HTML sunt definite mai multe stiluri, toate aceste stiluri sunt
imbinate virtual intr-unul singur, dupa urmatoarele reguli, in care nr. 1 reprezinta cel mai inalt nivel
de prioritate:
- Stil inline (in cadrul unei etichete HTML)
- Foi de stil in cascada definite intern (in cadrul sectiunii HEAD a documentului HTML)
- Foi de stil in cascada definite intr-un fisier CSS extern (referit in sectiunea HEAD a
documentului HTML) - Stilul implicit al browser-ului.
De exemplu, daca pentru elementul H1 este definit intern urmatorul stil in cascada:
h1
{
color:red;
font-size:8pt;
}
iar intr-un fisier CSS extern este definit pentru acelasi element H1 urmatorul stil:
h1
{
text-align:left;
font-size:20pt;
}
atunci, proprietatile elementului H1 in cadrul documentului vor fi urmatoarele:
color:red; – proprietate mostenita de la stilul extern CSS
text-align:left; – proprietate definita in stilul CSS intern
font-size:20pt; – valoarea proprietatii font-size este cea definita in stilul CSS intern; in cazul in
care stilul CSS intern si cel extern au definite proprietati comune, atunci stilul CSS intern suprascrie
stilul CSS extern
Nota: Daca link-ul catre fisierul CSS extern este plasat in partea de a documentului HTML
dupa stilul intern, atunci stilul extern acesta va suprascrie stilul intern.
Leave a Comment
Trebuie să fii autentificat pentru a publica un comentariu.