Cascadarea stilurilor
Când un singur stil este aplicat unui element specific, totul este destul de simplu. Însă, dacă același element are aplicate mai multe stiluri diferite, se ridică întrebarea: care dintre aceste stiluri va fi aplicat în realitate?
În CSS funcționează mecanismul de cascadare, care poate fi definit ca un set de reguli ce determină ordinea de aplicare a mai multor stiluri la același element.
De exemplu, avem definită următoarea pagină web:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cascadarea stilurilor în CSS3</title>
<style>
.redLink {color: red;} /* culoarea textului roșu */
.footer a {font-weight: bold;} /* textul îngroșat */
a {text-decoration: none;} /* eliminarea sublinierii link-urilor */
</style>
</head>
<body>
<p class="footer">Pentru a vedea informații detaliate, urmați link-ul:
<a class="redLink" href="index.php">Fundamentele CSS 3</a></p>
</body>
</html>În CSS sunt definite trei stiluri și toate sunt aplicate link-ului.
Dacă mai multe stiluri, care nu sunt în conflict între ele, sunt aplicate aceluiași element de pe pagina web, browserul le combină într-un singur stil.
Astfel, în acest caz, toate cele trei stiluri nu sunt în conflict între ele, așadar toate aceste stiluri vor fi aplicate link-ului:
Dacă stilurile sunt în conflict între ele, de exemplu, definesc culori diferite pentru text, atunci se aplică un sistem complex de reguli pentru calculul importanței fiecărui stil. Toate aceste reguli sunt descrise în specificația CSS: Calculating a selector's specificity. Să le analizăm pe scurt.
Diferiți selectori pot fi aplicați aceluiași element, iar importanța fiecărui selector este evaluată în puncte. Cu cât un selector acumulează mai multe puncte, cu atât stilurile sale au prioritate mai mare față de stilurile altor selectori.
- Selectorii de taguri au o importanță de 1 punct
- Selectorii de clase, atribute și pseudoclase sunt evaluați la 10 puncte
- Selectorii de id sunt evaluați la 100 de puncte
Stilurile inline (definite prin atributul style) sunt evaluate la 1000 de puncte.
De exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cascadarea stilurilor în CSS3</title>
<style>
#index {color: navy;} /* culoarea textului navy */
.redLink {color: red; font-size: 20px;} /* culoarea textului roșu și dimensiunea fontului de 20px */
a {color: black; font-weight: bold;} /* culoarea textului negru și îngroșat */
</style>
</head>
<body>
<a id="index" class="redLink" href="index.php">Fundamentele CSS 3</a>
</body>
</html>Aici, link-ul are aplicate trei stiluri. Aceste stiluri conțin două reguli neconflictuale:
font-size: 20px;
font-weight: bold;care setează dimensiunea fontului la 20px și îngroșarea textului. Deoarece fiecare dintre aceste reguli este definită doar într-un singur stil, în final ele vor fi combinate și aplicate link-ului fără probleme.
De asemenea, toate cele trei stiluri conțin definiții pentru culoarea textului, dar fiecare stil definește propria sa culoare pentru text. Deoarece selectorii de id au cea mai mare greutate, în final va fi aplicată culoarea navy, definită de selectorul:
#index {color: navy;}Dacă selectorul este compus, atunci se adună punctele tuturor subselectorilor incluși în selector. Să luăm următorul exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cascadarea stilurilor în CSS3</title>
<style>
a {font-size: 18px;}
.nav li a {color: red;} /* culoarea textului roșu */
#menu a {color: navy;} /* culoarea textului navy */
.nav .menuItem {color: green;} /* culoarea textului verde */
a.menuItem:not(.newsLink) {color: orange;} /* culoarea textului portocaliu */
div ul li a {color: gray; } /* culoarea textului gri */
</style>
</head>
<body>
<div id="menu">
<ul class="nav">
<li><a class="menuItem">Principală</a></li>
<li><a class="menuItem">Forum</a></li>
<li><a class="menuItem">Blog</a></li>
<li><a class="menuItem">Despre site</a></li>
</ul>
</div>
</body>
</html>În CSS sunt definite cinci selectoare diferite care stabilesc culoarea linkurilor. În final, browserul va alege selectorul #menu a și va colora linkurile în culoarea navy. Dar de ce, pe ce bază va alege browserul acest selector?
Să analizăm cum se vor aduna punctele pentru fiecare dintre cei cinci selectori:
Așadar, vedem că pentru selectorul #menu a în coloana sumă avem cel mai mare număr de puncte - 101. Adică, el are 1 identificator (100 de puncte) și un tag (1 punct), care în sumă dau 101 puncte.
De exemplu, în selectorul .nav .menuItem sunt doi selectori de clasă, fiecare oferind 10 puncte, deci în total 20 de puncte.
În timp ce pseudoclasele, cum ar fi :not, spre deosebire de alte pseudoclase, nu sunt luate în considerare, totuși se ia în considerare selectorul specificat în pseudoclasa :not.
Regula !important
CSS oferă posibilitatea de a anula complet semnificația stilurilor. Pentru aceasta, la sfârșitul stilului se adaugă valoarea !important:
a {font-size: 18px; color: red !important;}
#menu a {color: navy;}În acest caz, indiferent de prezența altor selectoare cu un număr mai mare de puncte, linkurilor li se va aplica culoarea roșie, definită de primul stil.