Salut tuturor! In acest tutorial vom discuta despre un concept fundamental limbajului de descriere CSS, de unde, si numele, foi de stil in cascada.Probabil va intrebati ce reprezinta acest concept, numit, cascada, si de ce foile de stil sunt in cascada? Apropo, trebuie sa stiti cu ce se mananca specificitatea pentru a intelege ceea ce incerc sa prezint aici.
Ei bine, explicatia este simpla, datorita faptului ca unui element HTML ii pot fi aplicate declaratii CSS ce provin din mai multe surse, trebuie sa fie o modalitatate de a determina ce declaratii si din ce surse, aceste declaratii pot fi aplicate elementului HTML.
Cand vorbesc despre aceste surse, ma refer la toate modalitatile de a descrie prezentarea elementelor HTML folosind CSS si la toate foile de stil ce sunt incarcate intr-un document HTML.
Navigatoarele web aplica propriile stiluri CSS in mod implicit, chiar daca documentul HTML nu contine pic de CSS, acesta este modul de functionare al navigatoarelor web.Datorita faptului ca fiecare navigator web are propriile stiluri CSS, dezvoltatorii web folosesc foi de stil pentru a reseta toate aceste stiluri la anumite valori comune tuturor navigatoarele web.
De asemenea, cel care a construit pagina web aplica propriile foi de stil, si mai mult decat atat, pana si vizitatorii pot aplica propriile stiluri CSS ( ce sunt aplicate doar pe dispozitivele folosite de ei ) documentului web.Navigatorul web trebuie sa stie ce stiluri sa folosesca, si din ce surse sa foloseasca aceste stiluri.
Ei bine, acestia sunt pasii facuti, de acest alogoritm, cascada, pentru a aplica declaratiile corecte elementelor HTML atunci cand aceste declaratii provin din mai multe surse:
-
Din toate sursele, se identifica declaratiile CSS ce ii sunt atribuite unui singur element, aceasta identificare fiind facuta de selectorii folositii pentru a identifica acel element.
-
Se sorteaza toate declaratiile CSS acelui element in functie de specificitatea lor, si mai mult decat atat, se verifica exceptiile de la regula specificitatii,
!importantfiind mai presus de orice specificitate, si pseudo-clasa:not().Declaratatiile cu specificitatea cea mai mare castiga. - In caz de egalitate ( doua sau mai multe declaratii folosesc
!important), se folosesc declaratiile cu specificitatea cea mai mare.Mai mult decat atat, daca exista declaratii ce au aceeasi specificitate, se folosesc declaratiile din ultima regula CSS.
De retinut este faptul ca in cascada se refera la ordinea in care acest algoritm identifica toate declaratiile unui singur element HTML.In primul rand verifica stilurile implicite aplicate de navigatorul web documentului web.In continuare, daca exista, verifica stilurile adaugate de creatorul documentului web.In final, daca exista, verifica stilurile adaugate de cel ce viziteaza pagina web.
Sa vedem un exemplu:
index.html
<html>
<head>
<title>CSS - Foi de stil in cascada</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Acesta este doar un sir de caractere</h1>
</body>
</html>style.css
h1 {
color: green;
}Cand deschidem fisierul index.html in navigatorul web, asupra elementelor HTML se aplica declaratii CSS din doua surse.In primul rand, stilurile implicite ale navigatorului web, si fisierul CSS extern incarcat de noi.Atat stilurile navigatorului web cat si stilurile create de noi identifica elementul h1, folosind un acelasi selector element, si ii aplica anumite declaratii CSS.
Datorita a ceea ce am discutat mai sus, avem doi selectori cu aceeasi specificitate, asta inseamna o specificitate de aceeasi valoare, ceea ce inseamna ca se aplica regula CSS din fisierul style.css creat de noi.Cu alte cuvinte, valoarea proprietatii color rescrie valoarea proprietatii din fisierul de stil creat de navigator in mod implicit.Culoarea text-ul va fi verde.
De retinut este faptul ca si declaratiile din regulile @media sunt sub influenta "cascadei", insa declaratiile din interiorul regulilor @keyframes nu sunt.
Sper ca va ajuta!
