Buna ziua, dragă cititor.
Aceasta este a noua lecție învăţarea CSS. În această lecție ne vom uita la ce este moștenirea și cum să evităm greșelile atunci când moștenim.
Înainte de a studia această lecție(moștenirea în CSS) parcurgeți lecțiile anterioare:
Teorie și practică
Când scriem stiluri CSS, ne confruntăm cu problema că unele dintre proprietățile noastre se pot suprapune cu alte proprietăți care au prioritate mai mare. Dar, de asemenea, după cum știți deja din lecțiile anterioare, unele proprietăți pot moșteni valori de la părinți. Să vedem cum funcționează clar această situație în cod.
Exemplu cod html:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html> <cap> <titlu > Acasă</titlu> <meta http-equiv = „Content-Type” content = „text/html; charset=utf-8” > <link rel = "stylesheet" type = "text/css" href = "style.css" > </cap> <corp > <div id = "conținut" > <div class = "firstPar" > <p> Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egestas ac eu nulla.</p> <p> Fusce est tellus, mattis quis nisl et, egestas posuere libero. Donec scelerisque tellus porttitor massa dictum pulvinar.</p> </div> <div class = "secondPar" > <p> Cras</p> <ul > <li > amet condimentum</li> <li > aliquam volutpat</li> <li > elementul interdum</li> </ul> </div> </div> </corp> </html> |
Acum uită-te la arborele care este html:
Acum vedeți ce este în relație cu ce și cum să relaționați. Și acum Exemplu CSS cod cu moștenire. Să zicem pentru
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #conținut ( font : 14px bold arial, verdana, sans-serif ; culoare : #C91212 ; ) .firstPar( font : inherit ; culoare : inherit ; ) .secondPar( font : 10px bold arial, verdana, sans-serif ; culoare : #000CFF ;) |
Cum arată în browser.
Moştenire este un mecanism prin care stilurile sunt aplicate nu numai elementelor specificate, ci și descendenților acestora.
De ce este necesar acest lucru? Pentru a-ți face viața mai ușoară! Exemplu:
Dacă nu ar exista o moștenire, definiția „vopsește verde” s-ar aplica doar etichetei în sine cu clasa verde, iar eticheta din interiorul acesteia ar rămâne neagră.
În stânga este rezultatul obținut prin moștenire.
În dreapta este rezultatul care s-ar fi întâmplat dacă moștenirea nu ar fi existat.
Se pare că o acțiune atât de simplă, cum ar fi, de exemplu, setarea unei culori comune a fontului pentru pagină s-ar transforma într-o întreagă întreprindere! Ar trebui să furnizăm toate etichetele interne. Și acest lucru se întâmplă de fiecare dată când trebuie să setați stiluri pentru un element și descendenții săi!
Sper că v-am convins că moștenirea este un lucru util. Acum hai să vedem cum să ne descurcăm.
Moștenirea proprietății
Să știți că nu toate proprietățile sunt moștenite. Ar fi absurd să moștenești, de exemplu, .
Într-adevăr, de ce am nevoie de margini în jurul fiecărei etichete interioare? Deci, acum trebuie să le anulez manual?
Nu vă faceți griji - nu! O serie de proprietăți, a căror moștenire este contrară bunului simț, de exemplu, liniuțe, dimensiuni, margini, pur și simplu nu sunt moștenite.
De fapt, este mai ușor să enumerați acele proprietăți care sunt moștenite. Iată-le:
Despre specificitate
Proprietățile moștenite sunt foarte convenabile atunci când trebuie să setați stiluri pentru descendenții unui element. Dar dacă definesc în mod explicit un stil, ar fi, desigur, greșit dacă ar fi „depășit” de cel moștenit. Pentru a elimina complet această posibilitate, s-a convenit că proprietățile moștenite nu au deloc specificitate. Nu. Chiar și zero. Ca rezultat, orice stil definit explicit îl va învinge întotdeauna pe cel moștenit.
Există o nuanță interesantă legată de asta. Faptul este că specificul selectorului universal este 0 (vă amintiți, atunci când calculați specificul regulii, pur și simplu nu îi acordăm atenție).
Acest lucru poate fi un nonsens din punct de vedere matematic, dar în -moștenire, specificitatea „0” este considerată a fi mai mult decât „nicio specificitate deloc”. Prin urmare, un selector universal va trece peste toate regulile moștenite.
Acesta este unul dintre motivele pentru care selectorul universal ar trebui folosit cu mare atenție (sau mai bine, deloc folosit). La urma urmei, poate provoca un efect asemănător scurt-circuit, încălcând regulile moștenite. De exemplu:
* ( culoare: #000; /* negru */ ) .verde ( culoare: #539127; /* verde */ )
De fapt, cu acest exemplu am rupt moștenirea proprietățile culoriiși a obținut același rezultat prost ca în prima poză din dreapta. Textul din interiorul span (sau orice altă etichetă interioară) va fi negru.
Moștenire și stiluri de browser
Se întâmplă că fiecare browser are propriul său stiluri proprii pentru unele etichete. Acest lucru se vede cel mai clar în exemplul unui link.
Verde (culoare: #539127; /* verde */ )
Ca urmare a acestui cod, vom vedea o inscripție verde și, cel mai probabil, o legătură albastră. De ce albastru? De ce linkul nu a moștenit culoarea părintelui său?
Este simplu. Undeva în foaia de stil a browserului există ceva de genul acesta, plasat acolo de mâinile grijulii ale dezvoltatorului:
A:link (culoare: albastru)
Deci, se dovedește că stilul moștenit a fost umbrit de ceea ce a fost clar (chiar dacă nu de mine) setat.
Verde, .verde a (culoare: #539127; /* verde */ )
Am dat în mod special acest exemplu pentru ca, dacă te confrunți cu o astfel de situație, să nu o percepi ca pe un eșec în mecanismul moștenirii.
Acest articol se va concentra pe un subiect atât de important precum moștenirea stilului. Scopul principal al acestui articol al manualului este de a vă transmite mecanismul cum funcționează moștenirea stilului, de a vă explica care sunt principalele sale avantaje și de a analiza câteva lucruri care nu sunt evidente în acest sens.
Adesea, dacă un copil are părinți excentrici, atunci el nu rămâne în urma lor sau, așa cum se spune: „mărul nu cade departe de copac”. Când vine vorba de moștenire în CSS, nu este altceva decât o metodă de replicare diverse CSS proprietăți legate de un element de pagină pe elementele sale imbricate (descendenți).
Să trecem direct la un exemplu și să ne uităm la moștenirea stilului Exemplu HTML element
, care definește conținutul vizibil al paginii.Să creăm un stil pentru element
care va schimba culoarea și tipul fontului:Titlu de al doilea nivel
Deplin paragraf
În acest exemplu, pentru element
am instalat verde culoarea textului și tipul fontului Arial. Proprietățile CSS culoarea și familia de fonturi sunt moștenite, ceea ce înseamnă că aceste proprietăți se vor aplica și elementelor imbricate din (pentru toți urmașii lui).Vă atrag atenția asupra faptului că puteți oricând să căutați dacă o anumită proprietate este moștenită sau nu în cartea de referință CSS completă.
Rezultatul exemplului nostru:
În exemplul de mai sus, toate elementele situate în interior
(descendenții săi) i-au moștenit proprietățile. Mecanismul de moștenire are un sistem pe mai multe niveluri și se extinde nu numai la descendenții direcți ai elementului, ci este transferat și la toate elementele imbricate. În exemplul nostru, un astfel de element include elementul , care, prin analogie cu alte elemente, a moștenit toate proprietățile stilului specificat pentru element . Acesta este sensul de bază al moștenirii folosit în CSS.Mecanismul de moștenire reduce semnificativ codul CSS, de exemplu, dacă elementul nostru a primit culoarea implicită - negru, atunci ar trebui să setăm separat un stil pentru acest element care să determine atât culoarea, cât și tipul fontului, ceea ce ar crește semnificativ costurile forței de muncă pentru dezvoltarea unei anumite pagini.
Un alt punct care trebuie înțeles este că mecanismul de moștenire funcționează în mod similar nu numai pentru selectoarele de tip, ci și pentru toate tipurile de selectoare discutate în articolele anterioare pe această temă. Să presupunem că am creat un selector de clasă cu proprietăți CSS similare și l-am aplicat unui element
, atunci în acest caz toate elementele imbricate în el vor moșteni și aceste proprietăți.Ulterior, veți folosi aceste funcții CSS pentru a vă simplifica munca de a stila elementele documentului.
Limitări și nuanțe ale moștenirii
Restrictii:
- Proprietăți care afectează plasarea elementelor pe pagină, proprietăți responsabile pentru externe și căptușeală element, proprietăți responsabile de limitele elementelor. Vom lua în considerare toate aceste proprietăți în detaliu mai târziu în manual. Repet că puteți oricând să vă uitați dacă o anumită proprietate de pe un site web este moștenită sau nu în cartea de referință CSS.
- Vreau să înțelegeți că multe proprietăți nu sunt moștenite de motive obiective, imaginați-vă că creăm o chenar pentru elementul părinte și după aceea toți copiii, conform acestei logici, ar trebui să moștenească această proprietate, ceea ce ar părea absurd și, dimpotrivă, ar crește munca de creare a stilurilor (anularea acestora, sau resetarea acestora). ei).
Nuanțe:
Toate browsere moderne folosesc propriul lor încorporat Stiluri CSS Pentru elemente HTML, dacă este necesar, puteți căuta aceste stiluri pentru un anumit element de pe site în cartea de referință HTML (valoare CSS implicită). În următorul articol, vom învăța cum să resetați stilurile inline pentru a vă afișa paginile la fel în toate browserele populare.
Și acum, folosind exemplul unui element care definește un hyperlink, ne vom uita la un exemplu în care ne vom uita la motivul pentru care unele elemente nu moștenesc unele proprietăți ale strămoșului lor:
Un paragraf care contine href = "#" >
hyperlink.În acest exemplu, pentru element
am stabilit următoarele stiluri: verde culoarea textului și lipsa decorului textului (eliminat sublinia de mai jos). Acordați atenție elementului în imagine, nu s-a schimbat complet. Să vedem mai jos (după vizualizarea imaginii) de ce se întâmplă acest lucru.Rezultatul exemplului nostru:
Când apare un conflict, cel mai bun om câștigă, în CSS acesta este de obicei un stil definit în mod explicit. Să deschidem instrumentele pentru dezvoltatori (pentru Chrome, acesta este F12). Vă rugăm să rețineți ce proprietăți CSS sunt încorporate în browser ( foaie de stil agent utilizator) are orice link ( orice link) în document. Pentru aceasta sunt setate următoarele stiluri: culoarea textului albastru (-webkit-link- valoarea implicită a browserului), decorarea textului (marca de subliniere) și a specificat că browserul setează cursorul automat (valoarea proprietății cursorului CSS automat).
Mai jos sunt proprietățile care au fost moștenite ( Moștenit de la) element din . După cum puteți vedea, browserul a renunțat la toate stilurile de elemente , pentru motivul că elementul stilul care definește culoarea textului este definit în mod explicit (stil inline în mod implicit) și proprietatea care definește decorarea textului nu mostenitși este afișat cu puțină transparență în instrumentele de dezvoltare, dar chiar dacă ar fi moștenit, nu s-ar aplica la fel ca culoarea de test (pentru element această proprietate este, de asemenea, clar definită).
Astfel de conflicte între stiluri sunt întotdeauna rezolvate de browser și de ce reguli determină cine acordă prioritate și cum ar trebui să se comporte într-un caz sau altul, de ce parte să ia, este determinat de reguli. în cascadă. Vom vorbi mai multe despre regulile în cascadă în următorul articol al manualului.
Întrebări și sarcini pe această temă
Vă rugăm să răspundeți la următoarele întrebări înainte de a trece la articolul următor.
Principalul motor al creșterii web la începutul mileniului a fost consum conţinut. Site-urile web au fost create pentru a oferi informații utile sau conținut distractiv vizitatorilor lor. Dar, în ultimii ani, importanța resurselor web care oferă servicii utilizatorilor a crescut brusc generaţie conținut (editore de text și grafice, foi de calcul, mesagerie instant etc.). Acest lucru a determinat transformarea site-urilor în aplicații cu o singură pagină și migrarea către web a interfețelor complexe care erau anterior apanajul programelor de aplicație.
În timpul procesului acestor transformări și migrații, a devenit clar că creșterea intensității muncii pentru crearea și menținerea unei interfețe web depășește semnificativ creșterea complexității acesteia. Au încercat (și încă încearcă) să rezolve problema împărțind-o în module, abstracție și încapsulare. În acest scop, au fost create un număr mare de cadre JavaScript (Backbone, Ember, Angular), motoare de șabloane HTML (Jade, Handlebars), sisteme de management al dependențelor (RequireJS), etc.
Cel mai complex din acest punct de vedere s-a dovedit a fi CSS, unde, prin proiectarea limbajului, orice proprietate declarată în orice fișier CSS inclus sau etichetă de stil poate afecta afișarea oricărui element din arborele DOM.
Formalizarea sarcinii.
Să presupunem, pentru simplitate, că tot codul JavaScript este inclus în module care nu știu nimic unul despre celălalt și care încapsulează tot ceea ce au nevoie pentru a-și face munca. Modulul știe cum să genereze propria sa reprezentare HTML (să-i spunem bloc) și unde să-l inserați în arborele DOM. În acest caz, blocurile pot fi imbricate unul în celălalt. La nivel de marcare, un bloc este format din element rădăcinăŞi elemente copil.Scopul este de a se asigura că afișarea elementelor oricărui bloc poate fi influențată doar de delibera modificări în reprezentarea HTML și fișierele CSS corespunzătoare și etichetele de stil.
Vom numi orice modificare neintenționată în afișarea elementelor blocului scurgeri de stiluri.
Scurgerile de stil pot apărea ca urmare a modificărilor proprietăților elementelor altor blocuri ( proprietăți de scurgere), și cu modificări în arborele DOM ( scurgeri în cascadă).
Surse de scurgeri de stil
Dacă luăm în considerare orice bloc în sine, atunci stilurile se pot scurge atât din exterior, cât și din exterior. Datorita faptului ca o scurgere spre exterior pentru o unitate va fi o scurgere din exterior pentru alta, la clasificarea scurgerilor ne putem limita la cazul scurgerilor din exterior.1. Moștenirea proprietăților
Dacă o proprietate CSS a unui element nu are o valoare specificată în mod explicit, se utilizează valoarea implicită. Dacă valoarea este moștenire , atunci valoarea proprietății este setată la valoarea proprietății elementului părinte.Astfel, elementul rădăcină al blocului curent poate moșteni stilurile părintelui său, care prin definiție aparține altui bloc.
De exemplu,
.bloc-exterior (culoare: roșu; )
2. Conformismul proprietăților
Dacă o proprietate CSS a unui element nu are o valoare specificată în mod explicit, se utilizează valoarea implicită. Dacă această proprietate este potrivită cu o proprietate a elementului părinte (de exemplu, proprietățile de lățime și înălțime cu o valoare implicită auto) sau imitată (de exemplu, cum ar fi proprietatea culoarea de fundal cu o valoare implicită de transparent), atunci finalul utilizatorul va avea impresia că stilurile elementului părinte sunt scurse pe stilurile elementului copil.De exemplu,
.bloc-exterior( fundal: roșu; )
Este de remarcat faptul că însăși existența stilurilor care se scurg prin conformitate poate fi pusă la îndoială, deoarece stilurile elementului părinte oficial nu sunt aplicate elementului copil, dar în practică un astfel de comportament poate fi chiar considerat dezirabil. Dar dacă începem de la formal din punct de vedere, trebuie să admitem că conformitatea stilurilor încalcă definitiv încapsularea lor. Ca practic Pentru dovezi, autorul invită cititorul curios să folosească testul de rață.
3. Haosul în cascadă
Aplicarea stilurilor elementelor țintă selectorului are loc în trei pași.În prima etapă de la total Arborele DOM sunt selectați Toate elemente care se potrivesc cu selectorul elementului țintă. De exemplu, pentru selectorul .current-block h3, primul pas va selecta toate elementele cu eticheta h3. Nu există nicio modalitate de a limita spațiul de selecție la orice parte a arborelui DOM.
În al doilea pas, elementele selectate sunt filtrate pentru a se potrivi cu selectorul prin parcurgere elementele părinte element țintă. Când utilizați combinatorul descendent, căutarea unei potriviri poate merge până la elementul rădăcină al arborelui DOM. Când utilizați combinatorul soră ~ (combinator general frate) - până la primul element de frate.
De exemplu,
.bloc curent h3 ( fundal: albastru; ) .bloc-exterior h3 ( fundal: roșu; )
Sunt făcut roșu intenționat
Sunt roșu din cauza haosului în cascadă
Singura cale O modalitate de a limita spațiul de căutare este să utilizați un combinator copil și un combinator frate adiacent. Pentru a face acest lucru, este necesar să setați calea exactă în arborele DOM de la elementul țintă la elementul rădăcină al blocului, ceea ce duce la o coeziune sporită între codul CSS și HTML.
În al treilea pas, proprietățile de stil sunt atribuite elementelor țintă selectate și filtrate. Mai mult, dacă mai mulți selectori revendică același element țintă, fiecare cu varianta proprie a proprietății, atunci valoarea proprietății se determină în funcție de specificul selectorilor, iar dacă este egală, pe baza ordinii de declarare.
Astfel, în anumite condiții (combinatoare utilizate, raport de specificitate, ordine de declarare), stilurile elementelor blocului exterior pot influența stilurile elementelor blocului imbricat. Acest impact ar putea fi evitat dacă ar fi posibilă specificarea regiunii arborelui DOM în care elementele țintă ar trebui să fie selectate și filtrate.
4. Condiționarea pozițională
Elementele bloc își pot schimba afișarea în funcție de poziția blocului în arborele DOM atunci când combinatoarele surori (+ și ~) sau pseudo-clasele (:first-child, etc.) sunt utilizate în selectoare.De exemplu,
Bloc ( fundal: roșu; ) .bloc + .bloc ( fundal: albastru; )
În acest capitol:
Moştenire
Când specificați un stil pentru un element, unele dintre proprietăți pot fi moștenite de copiii și descendenții acestuia, efect numit moștenire.
De exemplu, toate elementele situate în interiorul unui element
, sunt copiii și descendenții săi. Dacă în stil pentru intreaba cu folosind CSS culoarea proprietății culoarea roșie a textului, apoi culoarea textului tuturor copiilor și descendenților săi va deveni, de asemenea, roșie:
Culoarea textului titlului roșu
Culoarea textului paragrafului este, de asemenea, roșie.
Proprietățile moștenite pot fi înlocuite prin aplicarea unei reguli individuale pentru elementul dorit:
Culoarea textului titlului albastru
Culoarea textului paragrafului este roșie.
Calcularea specificității (priorității) selectoarelor
Există multe modalități de a aplica un stil de design elementul necesar. Dar ce se întâmplă dacă același element este selectat de doi sau mai mulți selectori care se exclud reciproc? Această dilemă poate fi rezolvată folosind două Principiile CSS: specificitatea selectorului și a cascadei.
Specificul selectorului(specificitatea selectorului) determină prioritatea acestora în foaia de stil Cu cât selectorul este mai specific, cu atât este mai mare prioritatea acestuia. :
- Numărul de identificatori din selector este numărat (grupa a)
- Numărul de selectori de clasă, atribute și pseudo-clase din selector este numărat (grupa b)
- Numărează numărul de selectoare de tip și pseudo-elemente din selector (grupul c)
- Un selector din interiorul unei pseudo-clase de negație (:not) este tratat ca orice alt selector, dar pseudo-clasa de negație în sine nu participă la evaluarea selectorului
- Selectorul universal (*) și combinatoarele nu participă la calculul greutății selectorului
În exemplul de mai jos, selectoarele sunt aranjate în ordinea creșterii specificității:
* /* a=0 b=0 c=0 -> specificitate = 0 */ li /* a=0 b=0 c=1 -> specificitate = 1 */ ul li /* a=0 b=0 c= 2 -> specificitate = 2 */ ul ol+li /* a=0 b=0 c=3 -> specificitate = 3 */ h1 + * /* a=0 b=1 c=1 -> specificitate = 11 * / ul ol li.red /* a=0 b=1 c=3 -> specificitate = 13 */ li.red.level /* a=0 b=2 c=1 -> specificitate = 21 */ # x34y / * a=1 b=0 c=0 -> specificitate = 100 */ #s12:not(p) /* a=1 b=0 c=1 -> specificitate = 101 */
Cele mai multe prioritate mare are un număr din grupul „a”, un număr din grupul „b” are prioritate medie, un număr din grupul „c” are cea mai mică prioritate. Numerele de la grupuri diferite nu sunt însumate într-un singur total, adică Să luăm exemplul ultimei rânduri cu specificitatea selectorului „101” - aceasta nu înseamnă numărul „o sută unu”, înseamnă că un selector din grupul „a” (identificator) și un selector din grupul „c " (selector de tip) au fost folosite.
Un stil inline are prioritate față de un stil definit într-o foaie de stil internă sau externă. Cu toate acestea, dacă pentru proprietate specifică Dacă specificați o declarație specială!importantă într-o foaie de stil internă sau externă, aceasta va avea prioritate mai mare decât valoarea unei proprietăți similare în stilul intern. Declarația!important apare după valoarea proprietății, înaintea punctului și virgulă:
Primul paragraf
Al doilea paragraf.
În cascadă
Cascading este o caracteristică CSS care permite browserului să determine ce valori de proprietate vor fi aplicate unui element atunci când apare un conflict de proprietate. Un conflict de proprietate apare atunci când un element are mai multe reguli definite ai căror selectori au aceeași specificitate și conțin proprietăți identice, dar cu sensuri diferite.
Cascada funcționează după cum urmează: dacă sunt definite mai multe reguli pentru un element din foaia de stil, ale căror selectori au aceeași specificitate și conțin proprietăți conflictuale, atunci valorile proprietăților conflictuale ale regulii situate mai jos în foaia de stil sunt setate pentru elementul:
Culoarea textului paragrafului este verde.
Dacă reguli diferite pentru un element conțin proprietăți care nu intră în conflict, atunci acestea sunt combinate într-un singur stil, de exemplu. fiecare noua regula adauga informații noi despre stil la regula de mai sus:
H1 (culoare: gri; font-family: sans-serif; ) h1 (chenar-jos: 1px negru solid; )
Codul din exemplul de mai sus este echivalent cu exemplul de mai jos, unde toate cele trei proprietăți sunt specificate într-o singură regulă:
H1 (culoare: gri; familie de fonturi: sans-serif; margine de jos: 1px negru solid; )
De obicei, regulile suplimentare pentru un element sunt specificate în cazurile în care un stil a fost specificat pentru mai multe elemente simultan, dar în plus, este necesar să adăugați altceva pentru un anumit element:
H1, h2, h3 ( /* același stil pentru trei elemente */ culoare: gri; font-family: sans-serif; ) /* regula suplimentara pentru titlurile de al doilea nivel */ h2 ( chenar-jos: 1px negru solid; )
