În acest post, vom descompune o caracteristică a CSS, cum ar fi cascadă și prioritate. Din lecția despre moștenire, probabil că vă amintiți că mai multe reguli pot fi aplicate aceluiași element de pagină web. Deci, browser-ul ar trebui să decidă cumva ce regulă va fi cea mai importantă pentru o anumită situație. Și el decide acest lucru cu ajutorul unui sistem special, care, fără îndoială, se numește o cascadă.
Acest subiect este foarte important, iar înțelegerea corectă este o condiție prealabilă pentru lucrul productiv cu foi de stil cascadă. Prin urmare, încercați să vă concentrați cât mai mult posibil în următoarele 20 de minute, astfel încât să puteți stăpâni materialul prima dată.
Combinând stilurile moștenite
Sa întâmplat astfel încât elementele încorporate de obicei să moștenească proprietăți de la părinții și strămoșii lor. Luați în considerare următoarea situație:
În exemplul de mai sus, am setat familia de fonturi la un strămoș comun (corp), mărime la paragrafe (p) și culoare la eticheta em. Pe pagina web în sine vom vedea conținutul etichetei em în fontul 16px, familia Arial și cel albastru. În cazul nostru, fontul și mărimea au fost moștenite de la strămoși și de la părinte, respectiv.
Aceasta înseamnă că elementele imbricate pot moșteni proprietăți neconflicte. Dar ce se întâmplă dacă specificăm aceeași proprietate cu valori diferite pentru părinte și pentru strămoși?
Avantajul este cel mai apropiat element parental
Luați în considerare următoarele reguli de proiectare pentru eticheta principală a paginii și toate paragrafele:
Ce crezi, ce culoare va conține conținutul em tag-ului, verde sau roșu? Desigur, roșu este roșu, deoarece prioritatea de moștenire are întotdeauna proprietatea celui mai apropiat element părinte. Având în vedere cuibăritul etichetelor em în paragrafe, afișarea lor în roșu nu este surprinzătoare.
Prioritatea este întotdeauna acordată unui stil specific
Și ce se va întâmpla dacă atribuim încă o dată regulilor de proiectare anterioare? De exemplu, culoarea pentru aceeași etichetă em.
În acest caz, destul de logic, conținutul etichetei este colorat albastru (albastru), deoarece pentru ea există un stil definitoriu specific. Aceasta înseamnă că un anumit stil are prioritate față de cele moștenite.
Când un browser selectează un stil pentru un element de pagină web, alegerea intră întotdeauna în direcția stilului respectiv. Dacă nu este prezent, browserul selectează stilul celui mai apropiat element parent și îl aplică copilului.
Prioritizarea între stilurile CSS specifice
După înțelegerea principiilor cascade de mai sus, întrebarea apare involuntar: "Cum sunt prioritățile alocate între reguli specifice?" La urma urmei, unul și același element poate fi accesat în mai multe moduri.
De exemplu, prin selectorul de etichete, clase și identificatori. Luați în considerare următorul exemplu, în care avem un paragraf pe pagină care are clasa "aly" și identificatorul "principal". Pentru acest paragraf vom da diferite culori prin selectorii corespunzători.
Ce regulă va prevala? La urma urmei, toate se confruntă cu același element. Nu știu dacă sunteți surprins sau nu, dar singurul nostru paragraf va fi vopsit în albastru. Și se întâmplă deoarece fiecare tip de tratament are propriul său nivel de importanță. El este bine ilustrat în ilustrația de mai jos.
Prioritate în CSS
Așa cum se poate vedea din ilustrație, regula aplicată prin selectorul de taguri are 1 punct de semnificație, clasa - 10 și identificatorul - 100 de puncte. Cea mai mare importanță este acordată stilurilor încorporate care au 1000 de unități de importanță. Stilul încorporat este o regulă CSS în interiorul marcajului html:
Cu acest stil încorporat, paragraful va fi verde (verde). Cu toate acestea, utilizarea acestei tehnici este nedorită din două motive:
- marcajul html nu este destinat înregistrării;
- Poate fi dificil să schimbi aspectul unui element care are un stil încorporat, deoarece orice apeluri către el printr-o foaie de stil externă nu va da nimic.
Prioritatea nu contează în cazul proprietăților moștenite.
Uneori principiul priorității poate induce în eroare o persoană. De exemplu, atunci când un element moștenește stiluri de la un părinte numit printr-un selector de identificatori.
Din exemplul de mai sus, vedem că paragrafele din interiorul elementului bloc cu identificatorul "principal" vor fi colorate verde (verde). Deși, la prima vedere, s-ar părea că regula pentru "#main" este mai importantă, trebuie să ne amintim că este adresată divului, nu direct în paragraf. Și aici se declanșează regula despre un stil mai concret, conform căruia paragrafele vor fi pictate verde. Pe scurt, prioritatea nu este moștenită de descendenți.
În tabelul de mai jos puteți vedea un exemplu despre cum pot fi însumate scorurile pentru selectori diferiți.
Ultimul stil este asemănător cu soluția finală
Se poate întâmpla ca regulile pentru același element să aibă același punctaj în prioritate. Cum va ajunge în acest caz browserul? Ce regulă CSS ar prefera? Luați în considerare exemplul de mai jos.
Avem două reguli de formatare pentru aceeași etichetă puternică cu clasa îndrăzneață din interiorul paragrafului cu clasa în viață. Ambele stiluri au aceeași importanță - 11 puncte. Ce regulă va da browser-ului palma?
În lupta egală, a doua regulă câștigă, deoarece este indicată ultima, citită - este cea mai urgentă. Dar dacă avem un stil pe care vrem să îl determinăm cu siguranță în eticheta puternică?
Putem avea o masă de stiluri de dimensiuni impresionante, deoarece devine destul de greu să folosim un selector cu prioritatea corectă, să nu mai vorbim de posibilitatea de a avea stiluri încorporate undeva. Pentru a rezolva această problemă, putem folosi valoarea! Important. Aceasta trebuie prescrisă la proprietatea necesară.
Dacă utilizați această înregistrare, toate celelalte proprietăți de culoare vor fi ignorate de browser. Cu toate acestea, trebuie să utilizați această tehnică cu prudență, pentru că, odată ce o aplicați, veți pierde controlul asupra acestei proprietăți în viitor, până când veți scăpa de această valoare (! Important).
Cunning: utilizarea flexibilă a regulii ultimei înregistrări
Una dintre dificultățile de a crea site-uri mari este nevoia de a utiliza stiluri non-standard pentru anumite pagini. Aceasta înseamnă că, pentru aceleași elemente ale paginilor diferite, ar putea fi necesar să se utilizeze stiluri diferite. Dar cum să realizăm acest lucru?
În mod alternativ, puteți utiliza regula ultimei înregistrări (cea mai relevantă). De exemplu, pentru o astfel de pagină "non-standard", puteți atașa o foaie de stil separată care conține reguli speciale de formatare. Nu uitați să conectați acest fișier după foaia de stil principală pentru a anula regulile anterioare. Iată trucul :-)
Pericolul folosirii frecvente a selectorilor prin ID
Vă sfătuiesc să utilizați cu grijă identificatorul selectorului. Prezența unui scor mare pe ea poate cauza probleme cu design-ul site-ului dvs. Acordați atenție stilurilor de mai jos.
Conform primei reguli, setăm culoarea neagră pentru toate paragrafele din interiorul blocului cu identificatorul "principal". Apoi dorim să selectăm un paragraf cu litera "de clasă" într-o culoare separată. Se află în interiorul blocului cu identificatorul "principal".
Dar acest lucru nu va funcționa pentru motivul că primul stil are 101 de puncte de semnificație, iar al doilea este de numai 11. Acesta este un exemplu de dificultăți care pot apărea atunci când se utilizează selectorul de către identificator. Puteți folosi, bineînțeles, un alt record:
Cu toate acestea, rezolvă problema doar parțial, deoarece afectează numai paragrafele din interiorul blocului cu identificatorul "principal". Paragrafele cu litera "de clasă", situate în alte blocuri, nu funcționează. Prin urmare, aveți grijă.
Pe asta nu-mi spun rămas bun. Vă mulțumim pentru atenție și vă vedem în următoarele publicații!
Trimiteți-le prietenilor: