Moștenirea proprietăților css. CSS

Nota: activat versiune adaptivă site, care se adaptează automat la mărime mică browser-ul dvs. și ascunde unele detalii ale site-ului pentru o citire mai ușoară. Vizionare placuta!

Mă bucur să vă urez bun venit pe toți din nou pe paginile blogului. Site pe! În ultimul articol am vorbit pe scurt și am examinat mai multe exemple simple . Astăzi subiectul nostru este un lucru atât de important ca moștenirea în CSS. Moștenirea în CSS

Cum se creează o pagină web?

Dacă scriem în CSS:

Corp (culoare: verde; )

Și aici scriem orice text care ne interesează. Atunci inscripția va rămâne în continuare verde, deoarece proprietatea culoare este moștenit, ceea ce înseamnă că a fost transferat de pe etichetă corp la eticheta sa imbricată div

Și aici scriem orice text care ne interesează. Pentru trimitere

- o etichetă care desemnează pur și simplu o secțiune de text. Dacă nu este nimic specificat pentru el în CSS, atunci nu face nimic. Răspuns corect: roșu.

Deoarece eticheta div a întrerupt moștenirea din corp (dar numai pentru etichetele imbricate în interiorul unui div).

Ce prioritate are moștenirea în CSS?

Da, absolut nimic. Precedența moștenirii în CSS nu este nici măcar zero, pur și simplu nu există. Ce ne spune asta? Da, că orice proprietate dată direct unei etichete imbricate va fi executată în locul proprietății pe care ar fi moștenit-o (dar nu am lăsat să se întâmple asta, deoarece am specificat aceeași proprietate, dar cu o valoare diferită). la eticheta sa imbricată Acest lucru este evidențiat în mod clar de exemplul anterior, unde eticheta nu a etichetat span este moștenit, ceea ce înseamnă că a fost transferat de pe etichetă moștenește culoarea textului verde de la etichetă la eticheta sa imbricată, și totul pentru că suntem pentru etichetă

Sau poate nu? Să ne uităm la exemplul de mai jos, în care aceeași proprietate va fi specificată în mod explicit, dar într-un mod diferit, pentru aceeași etichetă. Deci, să ne uităm la CSS-ul nostru:

Div p ( Culoare: verde; ) p( culoare: roșu; )

În ambele cazuri, culoarea este indicată clar în mod specific pentru paragrafe, dar într-unul dintre cazuri, doar pentru paragrafele din interiorul unui bloc, să vedem rezultatul:

Și chiar în interiorul paragrafului - roșu

Da, prieteni, nimic revoluționar de data aceasta, logica a câștigat :) Într-adevăr, de aceea sunt tabele în cascadă, astfel încât să puteți specifica culorile separat pentru elementele imbricate și să nu vă faceți griji cu privire la proprietățile „suprapuse”.

Să rezumăm: Moștenirea în CSS are cea mai mică prioritate posibilă, dar merită să ne amintim că nu toate proprietățile sunt moștenite. Proprietățile care au circumstanțe specifice (la trecerea cu mouse-ul, când o etichetă este imbricată în alta, etc.) au prioritate față de proprietățile specificate pentru toate celelalte cazuri.

O alta punct important: dacă după Valori CSS proprietățile pun un spațiu și scrie !important, atunci această proprietate va avea întotdeauna și oriunde cea mai mare prioritate. Exemplu de intrare:

P(culoare:roșu !important; )

Aș sfătui să evitați această tehnică și, în schimb, să vă gândiți la ea din timp. structura corecta, astfel încât să nu trebuiască să suprapuneți atât de grosolan o proprietate cu alta, dar uneori utilizarea ei poate fi foarte practică.

Și, în sfârșit, iată ce ar trebui să țineți cont dacă ceva nu merge pentru dvs. - dacă scrieți astfel:

P( culoare: roșu; ) p( culoare: verde; )

Apoi se va aplica valoarea care este mai jos în cod, adică verde. Pot exista multe cazuri similare, mai ales când aveți puțină experiență și, în același timp, pot fi destul de diverse pentru a naviga rapid în problemă, vă sfătuiesc să le folosiți; Puteți citi despre cum să le utilizați și despre ce sunt acestea la linkul de mai sus.

1) Proprietățile specificate pentru o clasă (clasă) sau un identificator unic (id) au cea mai mare prioritate, iar prioritatea id este mai mare decât cea a clasei. Veți afla totul despre acești selectoare și despre conceptul de selector în general în articolul următor.

Permiteți-mi să vă reamintesc încă o dată că cel mai bun profesor în HTML și CSS este practica + o carte de referință, pe care, de altfel, am recomandat-o într-un articol despre . De asemenea, recomand să vă abonați la actualizările blogului meu, deoarece după articolele educaționale generale și introductive voi scrie cu siguranță despre unele dintre subtilități și, ca să spunem așa, secretele amenajării corecte a site-ului.

Asta e tot pentru azi, mulțumesc pentru atenție!

Toate proprietățile CSS sunt împărțite în cele care sunt moștenite de elementele descendente din elementele lor strămoși și cele care nu sunt moștenite. Deci, de exemplu, dacă setați o chenar pentru un paragraf (formă un cadru), atunci toate elementele imbricate (elementele descendente) nu vor moșteni această proprietate CSS, deoarece în acest caz, moștenirea nu are efect pozitiv. De acord, nu ar fi pe deplin rezonabil să redefinim granițele moștenite de la paragraful părinte pentru fiecare element descendent. Dar, dacă setăm pentru un paragraf, de exemplu, Culoarea albastră font, atunci va fi moștenit de toate elementele descendente până când îl redefinim dacă este necesar pentru un anumit element, iar acest lucru este mai eficient decât definirea separată a fontului pentru fiecare element descendent. Puteți vedea ce proprietăți de stil sunt moștenite și care nu sunt pe site-ul web oficial W3C (tabelul Proprietăți CSS ).

Stiluri CSS în cascadă

Stiluri în cascadă- aceasta este o caracteristică încorporată a CSS, și anume că, dacă mai multe stiluri sunt aplicate unui element simultan, stilul rezultat va fi format din toate tipurile de proprietăți prezente în aceste stiluri și dacă există două sau mai multe proprietăți identice , valoarea proprietății se va aplica elementului cu cea mai mare prioritate într-o situație dată.

Să ne uităm mai întâi la cel mai simplu caz prezentat în Exemplul 1.26.

Text simplu paragraf.

Text paragraful cu clasă.

Redefinim atât culoarea fontului, cât și lățimea paragrafului.

Exemplul 1.26. Cel mai simplu caz stiluri CSS în cascadă

După cum puteți vedea din exemplu, doar primul stil din foaia de stil internă este aplicat primului paragraf, ceea ce îi conferă un fundal negru și o culoare roșie a fontului. Două stiluri din foaia de stil internă sunt deja aplicate celui de-al doilea paragraf, astfel încât stilul rezultat este format după cum urmează: în primul rând, toate proprietățile stilului a cărui specificitate (concretețea) selectorului este mai mare (în cazul nostru, acesta este al doilea stil). ), apoi se adaugă proprietățile lipsă din celelalte, aplicate la acest element stiluri care au mai puțină specificitate de selector (în cazul nostru, acesta este primul stil). În acest fel, lățimea va fi adăugată celui de-al doilea paragraf și fundalul va fi redefinit de la negru la galben. Trei stiluri sunt aplicate celui de-al treilea paragraf: două din foaia de stil internă și propriul stil inline. Stilul inline are cea mai mare prioritate, așa că va suprascrie culoarea fontului setată în primul stil și lățimea stabilită în cel de-al doilea stil al foii de stil inline.

Astfel, pentru a calcula corect stilul rezultat aplicat unui element, trebuie să cunoașteți regulile de formare a acestui stil în cazul aplicării mai multor stiluri deodată. Aceste reguli se rezumă la calcularea specificității selectoarelor aplicate unui element de stiluri care conține aceleași proprietăți CSS cu sensuri diferiteși, de asemenea, în cazul unei specificități egale a selectorului, să compare tipurile de stiluri, să compare aspectul tabelelor cu aceste stiluri sau dacă acestea ajung în același foaia de stil, comparând locația lor în codul acestui tabel. Să luăm în considerare această problemă mai detaliat.

Specificitatea selectoarelor CSS

Dacă două reguli care conțin aceleași proprietăți CSS, dar care au valori diferite sunt aplicate aceluiași element, apare un conflict care poate fi rezolvat prin compararea specificității selectoarelor regulilor. Ca urmare a acestei decizii, elementului va fi aplicată proprietatea regulii cu specificitatea selectorului mai mare.

Specificitatea selectorului este calculată folosind trei numere (a, b, c). Acest lucru se întâmplă după cum urmează:

• numărului a i se atribuie numărul de identificatori din selector;
• numărului b i se atribuie numărul total de clase, atribute și pseudoclase din selector;
• numărului c i se atribuie numărul total de elemente și pseudo-elemente.

După numărarea numerelor pentru toate selectoarele comparate, selectorul cu mai mare specificitate va fi cel cu număr mai mare a, indiferent de mărimea numerelor b și c. Dacă numărul a al selectorilor comparați este același, se va compara numărul lor b și, dacă este necesar, numărul c (vezi exemplul 1.27).

/* Să scriem un exemplu de cod html */ /*

Text...

*/ /* Aici a=1, deoarece există 1 identificator în selector; */ /* b=0, deoarece există 0 clase, 0 atribute și 0 pseudo-clase; */ /* с=0, deoarece există 0 elemente și 0 pseudo elemente; */ /* Acea. specificitatea este (1,0,0). */ #m_id( culoare: albastru; ) /* Aici a=0, deoarece nu există identificatori în selector; */ /* b=3, deoarece există 1 clasă, 1 atribut și 1 pseudo-clasă; */ /* с=2, deoarece există două elemente: „p” și „em”; */ /* Acea. specificitatea este (0,3,2). */ p.my_class em:hover(color: red; ) /* Deci culoarea textului din exemplul de cod va fi albastru, deoarece la a doua regulă numărul a=0, iar la prima regulă a=1. */ /* Dar dacă specificul selectorilor ar fi egal, atunci stilul regulii inferioare ar avea prioritate. */

Exemplul 1.27. Comparația specificității selectorului

Tipurile și prioritatea stilurilor CSS

Dacă specificul selectorilor regulilor comparate este egal, prioritatea va fi determinată de tipul stilului, locația foilor de stil sau, dacă acestea se află în aceeași foaie de stil, prin compararea locației lor în codul de aceasta masa. Să enumeram principalele tipuri de stiluriîn ordinea de prioritate crescătoare.

• Stilul browser are cea mai mică prioritate și se aplică implicit elementelor de cod html cărora nu li se aplică nicio altă formatare, în termeni mai simpli - codului html „gol”.
• Stilul utilizatorului este setat în setările browserului de către utilizator și este în esență un stil de browser implicit modificat de utilizator. Deci, dacă utilizatorul schimbă stilul browserului, stilul utilizatorului va fi aplicat implicit.
• Stilul autorului este setat de autorul paginii (programator) și are o prioritate și mai mare. El este cel care ne va interesa cel mai mult.

Stilul autorului este stilul rezultat, care este format din diferite tipuri de stiluri individuale, din nou, bazate pe cascadă. Le enumerăm în ordinea priorității crescătoare atunci când sunt aplicate aceluiași element, cu condiția ca specificul selectorilor să fie egal.

• Stilurile moștenite de elementele copil de la părinți au cea mai mică prioritate.
• Stilurile specificate în tabelele externe au prioritate mai mare. În acest caz, regulile care apar în codul foii de stil externe de mai jos (adică apar mai târziu) au prioritate mai mare față de regulile care apar în codul acestui tabel de mai sus (adică mai devreme). În plus, a mai multor foi de stil externe, cele conectate la document folosind elementul "legătură" mai jos în codul acestui document. În consecință, dacă un tabel este inclus în codul documentului de mai sus, atunci prioritatea stilurilor sale va fi mai mică.
• Stiluri de masă interne(situat în interiorul containerelor "stil") au prioritate asupra stilurilor de tabel externe, dar numai dacă sunt situate mai jos în cod decât elementul "legătură", cu care a fost conectată o foaie de stil externă. Din nou, regulile care apar în codul intern al foii de stil de mai jos au prioritate față de regulile care apar în codul intern al foii de stil de mai sus. În plus, dacă un document utilizează mai multe foi de stil interne, de ex. sunt mai multe elemente "stil", atunci stilurile acelor tabele care se află în codul documentului de mai jos au o prioritate mai mare.
• Au o prioritate și mai mare stiluri inline, care anulează regulile cu orice specificitate a selectorului. Într-adevăr, este mult mai specific dacă stilul este situat în eticheta de deschidere a elementului.

Parametru de service!important

Separat, trebuie spus despre parametrul de serviciu !important, care este indicat, dacă este necesar, în foile de stil interne și externe după valoarea proprietății css separate printr-un spațiu, de exemplu, p (culoare : verde !important ;) . Proprietatea stilului în care este specificat acest parametru, are cea mai mare prioritate indiferent de locația foii de stil în codul documentului sau regula însăși în foaia de stil, dar numai într-o situație în care specificitățile stilurilor sunt egale (nu trebuie uitat că specificul stilurilor). stilul inline ar trebui considerat cel mai înalt în orice caz!). Din nou, dacă există mai multe proprietăți cu acest parametru și chiar și specificitățile selectoarelor corespunzătoare sunt aceleași, atunci prioritatea va fi determinată de tipul de stil, de locația foilor de stil sau, dacă acestea sunt în același foaie de stil, comparând locația lor în codul acestui tabel.

Din cele de mai sus, rezultă o concluzie simplă: cu cât stilul este mai aproape de element și cu cât selectorul acestuia este mai specific, cu atât are prioritate mai mare.

Folosind aceleași proprietăți CSS într-o singură regulă

In cele din urma din acest alineat Să adăugăm că în aceeași regulă sunt specificate uneori două proprietăți identice, dar cu valori diferite. Acest lucru se face de obicei atunci când una dintre valorile proprietăților nu este acceptată de un browser, apoi este plasată pe locul al doilea în blocul de declarare (stil), iar o altă regulă care este acceptată de toate browserele este plasată pe primul loc. Ca urmare, dacă pagina este deschisă într-un browser în care a doua regulă nu este valabilă, aceasta va fi ignorată și browserul va aplica prima regulă. Dacă pagina este deschisă într-un browser în care atât prima cât și a doua regulă sunt valabile, atunci a doua regulă va avea prioritate mai mare, deoarece urmează în cod mai târziu. Astfel, în orice caz, ideea programatorului va fi implementată, iar valoarea proprietății setată implicit de browser sau moștenită de la elementul părinte nu va fi aplicată.

Navigați rapid la alte pagini

• Moștenirea, cascada și precedența stilurilor CSS

Moștenirea proprietăților CSS

Majoritatea proprietăților nu își transmit valorile de la elementul părinte la elementul copil

Pentru unii, valoarea implicită este ajustată la părinte

Și doar câteva (vezi lista de proprietăți CSS2, dacă coloana „Moștenit” indică „da”) moștenesc valoarea proprietății de la părinte

Proprietate care modifică toate stilurile CSS, cu excepția direcției și unicode-bidi

Acestea sunt valorile care pot fi aplicate oricărei proprietăți CSS. Stilul browserului este resetat peste tot, inclusiv etichete de intrare, progres etc.

Moștenirea CSS a stilurilor de la părinte: moștenire

Dacă strămoșul și copilul trebuie specificate aceleasi valori proprietăți, atunci este mai convenabil să utilizați moștenirea pentru editare ulterioară - va fi suficient să schimbați doar valoarea părintelui.

mostenire nu trece valoarea finala, ci ceea ce este specificat in stilurile parintelui

Exemplul 1: Care este diferența dintre lățime: moștenire; si latime: 100%;

Exemplul 2: max-inaltime: 100%; nu funcționează

Exemplul 3: Cum să duplicați stilurile CSS ale unui părinte

moștenirea transmite mai degrabă valoarea părintelui imediat decât o poziție specifică

Totul este copiat, chiar și ceea ce nu este specificat de dezvoltator în stilurile părintelui

CSS inițial: moștenire inversă

Pentru a afla valorile inițiale ale proprietăților specifice browserului, cum ar fi culoarea și familia de fonturi, puteți utiliza initial

Exemplul 1: Dezactivați moștenirea proprietăților

Exemplul 2: eliminați o proprietate pentru un selector mai îngust

initial vă permite să resetați toate stilurile, inclusiv cele pe care browserul le-a setat pentru eticheta implicită

Exemplu: pentru widgeturile terță parte, dezactivați moștenirea stilurilor și stilurile setate de browser

dezactivați CSS: resetați stilul browserului

Comportamentul este standard, doar toate etichetele devin impersonale, de parcă ar fi tăiate cu aceeași perie. Adică, ca inițial, elemente de bloc va deveni inline.

Exemplu: anulați toate stilurile de intrare posibile

Tema pentru acasă: în comentarii, oferă exemplul tău de utilizare a valorilor moștenite, inițiale și nesetate, altfel imaginația mea este deja epuizată :)

5 comentarii:

Anonim Buna ziua!
Poți să-mi spui de ce este așa?
https://jsfiddle.net/og96q6x5/

De ce ticălosul ăsta H2 mută DIV-ul galben în jos. De fapt nu voiam roșu. L-a mutat pe cel galben. L-am pus într-un alt DIV, așa că s-a mutat atât pe galben cât și pe roșu.
De ce?
NMitra Bună, din câte am înțeles, nu ești mulțumit de prăbușire? Uită-te la http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#m-parent Există soluții la problema Anonim Vă mulțumesc. Mi-am dat deja seama cum să rezolv acest colaps. Sau ca tine sau cu un DIV de curatenie.

Nu am nimic altceva.
Asta este. Asta mi-am dorit.
Se pare că am reușit să-l liniștim cu display:inline-block.
https://jsfiddle.net/og96q6x5/2/

Dar întrebarea rămâne. Nu ar trebui el, fiind în interiorul unui DIV, să se deplaseze de-a lungul acestui DIV? Nu atinge pe nimeni?
Și de ce display:inline margiņ-top: nu funcționează?
https://jsfiddle.net/og96q6x5/1/
Anonim Mulțumesc Am găsit.
vertical-align: cu display:inline; și afișare:inline-block;

Da. Cât de amuzant este totul.
NMitra Și de ce nu funcționează margiņ-top cu display:inline? — Pentru că nu este blocat, nu are înălțime

shpargalkablog.ru

Poate o clasă CSS să moștenească de la una sau mai multe alte clase?

Mă simt prost pentru că sunt programator web atât de mult timp și nu știu răspunsul la această întrebare, chiar sper că este posibil și pur și simplu nu știam despre asta și nu care cred că este răspunsul (și anume: imposibil).

Întrebarea mea este dacă este posibil să se creeze o clasă CSS care „moștenește” de la o altă clasă CSS (sau mai mult de una).

De exemplu, să presupunem că avem:

Ce as vrea sa fac este ceva de genul asta:

unde class.composite va apărea în linie și va avea un fundal roșu

27 de răspunsuri

Există instrumente precum LESS care vă permit să compuneți CSS în mai multe nivel inalt abstractizare asemănătoare cu ceea ce descrieți.

Mai puține apeluri la aceste „mixine”

Puteți adăuga mai multe clase la un element DOM, de exemplu.

Moștenirea nu face parte din standardul CSS.

Da, dar nu chiar cu această sintaxă.

Un element poate lua mai multe clase:

Și asta e cât de aproape, din păcate. Mi-ar plăcea să văd această caracteristică împreună cu aliasuri interesante.

Păstrați atributele comune și atribuiți din nou atribute specifice (sau înlocuiți).

Nu, nu poți face așa ceva

Acestea nu sunt „nume de clasă” în sensul OO. .ceva si .altceva nu mai sunt selectori.

Dar puteți specifica două clase pentru un element

sau puteți căuta o altă formă de moștenire

Dacă culoarea de fundal și abstracțiile de culoare sunt moștenite din setările din div-ul care are stilul .foo . Poate fi necesar să verificați specificația W3C exactă. moștenire este valoarea implicită pentru majoritatea proprietăților implicite, dar nu pentru toate.

Am întâlnit această problemă și am ajuns să folosesc o soluție JQuery pentru a face să pară că o clasă ar putea moșteni alte clase.

Aceasta va găsi toate elementele cu clasa „compozit” și va adăuga clasele „ceva” și „altfel” elementelor. Deci ceva de genul

Timpul perfect. Am trecut de la această întrebare la a mea e-mail pentru a găsi un articol despre Less, o bibliotecă Ruby care, apropo, face asta:

Deoarece super arată la fel ca subsol, dar cu un font diferit, voi folosi metoda Less class include (ei o numesc mixin), astfel încât să includă și aceste declarații:

Cel mai bun lucru pe care îl poți face este

SCSS pentru acest exemplu va arăta cam așa:

Din păcate, CSS nu oferă „moștenire” așa cum o fac limbajele de programare precum C++, C# sau Java. Nu puteți declara o clasă CSS și apoi o extindeți cu o altă clasă CSS.

Cu toate acestea, puteți aplica mai mult de o clasă unei etichete din marcaj. în acest caz, există un set complex de reguli care determină ce stiluri reale vor fi aplicate de browser.

CSS va căuta toate stilurile care pot fi aplicate pe baza markupului și va combina stilurile CSS din acele mai multe reguli împreună.

De obicei, stilurile sunt combinate, dar atunci când apar conflicte, stilul declarat ulterior câștigă de obicei (cu excepția cazului în care un atribut important este specificat într-unul dintre stiluri, caz în care câștigă). În plus, stilurile aplicate direct element HTML, să aibă prioritate față de stilurile de clasă CSS.

Îmi dau seama că această întrebare este acum foarte veche, dar nu este nimic aici!

Dacă scopul este de a adăuga o singură clasă care implică proprietăți ale mai multor clase, ca soluție nativă, aș recomanda utilizarea JavaScript/jQuery (jQuery nu este cu adevărat necesar, dar este cu siguranță util)

Dacă aveți, de exemplu, .umbrellaClass care „moștenește” de la .baseClass1 și .baseClass2 , este posibil să aveți ceva JavaScript pregătit.

Acum toate elementele .umbrellaClass vor avea toate proprietățile ca .baseClass s. Rețineți că, similar cu moștenirea OOP, .umbrellaClass poate avea sau nu propriile sale proprietăți.

Singura avertizare aici este să luați în considerare dacă există elemente care sunt create dinamic și care nu vor exista atunci când acest cod rulează, dar există și moduri simple ocoleste.

CSS este nasol și nu are moștenire nativă.

Moştenire

Moștenirea este transferul regulilor de formatare pentru elementele care se află în interiorul altor elemente. Astfel de elemente sunt copiii și moștenesc unele proprietăți de stil ale părinților lor, în cadrul cărora se află.

Să ne uităm la moștenire folosind un tabel ca exemplu. O caracteristică a tabelelor poate fi considerată strictă structura ierarhica Etichete Mai întâi vine containerul

Exemplul 18.1. Moștenirea opțiunilor de culoare

HTML5 CSS 2.1 IE Cr Op Sa Fx

ÎN în acest exemplu Culoarea textului este setată la roșu pentru întregul tabel, deci este aplicată și în celule, de la etichetă

Pentru a determina dacă valoarea unei proprietăți de stil este moștenită sau nu, trebuie să vă uitați în referința proprietăților CSS și să căutați acolo. Este inutil să-ți folosești intuiția într-un astfel de caz, s-ar putea chiar să te dezamăgească.

Moștenirea vă permite să setați valorile unor proprietăți o dată, definindu-le pentru părinți nivel superior. Să presupunem că doriți să setați culoarea și fontul pentru corpul textului. Folosiți selectorul BODY, adăugați proprietățile dorite pentru acesta și culoarea textului din paragrafe și altele elemente de text se va schimba automat (exemplul 18.2).

Exemplul 18.2. Opțiuni de text pentru întreaga pagină web

În acest exemplu, fontul și culoarea textului paragrafului sunt setate folosind selectorul BODY. Datorită moștenirii, nu mai este nevoie să setați separat culoarea fiecărui element al documentului. Cu toate acestea, există opțiuni atunci când mai trebuie să schimbați culoarea pentru un container separat. În acest caz, va trebui să redefiniți parametrii necesari explicit, așa cum se arată în Exemplul 18.3.

Exemplul 18.3. Modificarea proprietăților unui element moștenit

În acest exemplu, culoarea primului paragraf este moștenită de la selectorul BODY, iar culoarea celui de-al doilea este setată în mod explicit printr-o clasă numită roșu.

moștenirea proprietății css

Principalul motor al creșterii web la începutul mileniului a fost consum conţinut. Site-urile web au fost create pentru a oferi vizitatorilor lor câteva Informatii utile sau conținut de divertisment. Dar în anul trecut importanța resurselor web care oferă servicii utilizatorilor a crescut brusc generaţie conținut (text și editor grafic, foi de calcul, mesageri 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 în module, abstracție și încapsulare. În acest scop a fost creat un numar mare de Cadre JavaScript (Backbone, Ember, Angular), motoare de șabloane HTML (Jade, Handlebars), sisteme de gestionare a 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 intenționat 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ă proprietatea CSS a oricărui element nu o face în mod explicit valoarea stabilită 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.

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 ajustată pentru a se potrivi cu proprietatea elementului părinte (de exemplu, ca proprietăți de lățimeși înălțimea cu o valoare implicită auto) sau imitații (de exemplu, cum ar fi proprietatea culoarea de fundal cu o valoare implicită transparent), apoi Utilizator final se va părea că stilurile elementului părinte au trecut pe stiluri element copil.

Este de remarcat faptul că însăși existența stilurilor care se scurg prin conformitate poate fi pusă la îndoială, întrucât stilurile elementului părinte oficial nu sunt aplicate elementului copil, dar pe 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. La fel de practic Pentru dovezi, autorul invită cititorul curios să folosească testul de rață.

3. Haosul în cascadă

(combinator general de frați) - până la primul element de frați.

Singura 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 afecta 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ă

) sau pseudo-clase (:primul-copil etc.).

Ca și în cazul conformismului proprietății, merită remarcat faptul că mulți dezvoltatori consideră condiționarea pozițională destul de utilă. Autorul articolului este de acord cu acestea atâta timp cât condiționalitatea nu depășește limitele blocului, deoarece în acest caz există o încălcare clară a încapsulării stilului.

Evident, încapsularea perfectă a stilurilor CSS ar trebui să elimine orice posibilitate ca acestea să se scurgă.

A doua parte a articolului („Encapsulating CSS Styles - Part 2. Solutions”) va fi dedicată unei analize a modului în care abordările actuale (OOCSS, SMACSS, ACSS, BEM, preprocesoare CSS) corespund idealului, precum și clasificării acestora. .

voi fi bucuros sfaturi utileși critică constructivă.

Moștenirea și gruparea în CSS

Bună ziua, dragi cititori! Astăzi, ca parte a secțiunii „Tutorial CSS”. cele mai importante concepte gruparea și moștenirea în CSS. Oricine urmărește publicațiile mele de mult timp probabil a fost deja inspirat de nevoia de a înțelege elementele de bază ale foilor de stil în cascadă. Și acest lucru este corect, deoarece un webmaster modern trebuie să știe cu siguranță Noțiuni de bazăși un algoritm pentru aplicarea cunoștințelor de bază despre HTML și CSS în practică.

Le-am oferit deja cititorilor o serie destul de decentă de materiale pe această temă, inclusiv publicații despre tipuri variate selectoare CSS, cum ar fi selectoare de etichete, clase și identificatori, precum și selectoare de atribute și diferitele lor utilizări. Această parte a foilor de stil în cascadă este foarte importantă, cu toate acestea, nu le luăm în considerare pe cele neimportante.

Ei bine, acum să trecem direct la subiectul de astăzi și să privim Reguli de grupare și moștenire în CSS, datorită căruia devine posibilă organizarea și optimizarea documentelor care descriu stilurile elementelor paginilor web ale site-ului web.

Gruparea în CSS

Să luăm ca exemplu etichetele de titlu h1 h2 h3, ale căror stiluri sunt scrise în fișierul style.css. De exemplu, așa:

Dacă vă uitați cu atenție, este posibil să observați că toate etichetele de antet au o componentă comună de stil CSS, și anume valoarea font-family, care determină tipul de font. Puteți combina selectoarele h1-h3 pe ​​această bază și puteți compune pentru ei regula generala referitor la valoarea familiei de fonturi:

Și proprietățile individuale pentru fiecare selector care nu sunt comune ar trebui proiectate separat:

Aceasta este gruparea în CSS. Vă permite să optimizați oarecum înregistrările de stil și face posibil să faceți documentul mai ușor de citit. Cred că ne-am dat seama, nu e nimic complicat aici, Să trecem la conceptul de moștenire.

Moștenirea în CSS

După cum sugerează și numele, moștenirea implică transferul regulilor de stil către elemente care se află în interiorul altor elemente. Astfel de elemente sunt numite elemente copil și moștenesc proprietățile de stil ale părinților lor. Cel mai de succes exemplu pe care puteți explora clar nuanțele Moștenirea CSS, este, după umila mea părere, tabel html, care este creat folosind etichetele table, tr și td. Să presupunem că proprietățile de design pentru eticheta tabelului sunt setate:

Acum să creăm un tabel simplu de 4 celule:

Pe pagina web va arăta astfel:

Pentru această masă este setat Culoarea verde text, așa că cuvintele din celule au căpătat această nuanță. Aceasta este o consecință a faptului că un element copil al unei etichete td moștenește proprietățile etichetei tabelului părinte. Sper că totul este clar aici. Dar trebuie să înțelegeți că nu toate proprietățile de stil sunt supuse moștenirii.

De exemplu, chenar definește un chenar în jurul unui tabel, dar nu în jurul celulelor, astfel încât acele celule nu sunt mărginite în tabel. Proprietatea de fundal nu este, de asemenea, moștenită. Cu toate acestea, în acest caz se pune întrebarea: de ce culoarea de fundal a celulelor a dobândit culoarea nisip, care este specificată ca valoare a etichetei tabelului părinte, dacă nu este moștenită?

Ideea aici este că proprietatea de fundal are transparent ca valoare implicită pentru eticheta td, adică transparenţă. În acest fel, culoarea de fundal a elementului părinte este „despărțită” prin fundalul elementului copil, care este transparent. Rețineți că, în multe cazuri, majoritatea proprietăților CSS au valori implicite. Prin urmare, dacă nu sunt setați în mod explicit parametri pentru o proprietate, valoarea implicită furnizată are efect.

Moștenirea vă permite să definiți valorile o singură dată, atribuindu-le elementului părinte de nivel superior. Să presupunem că trebuie să setăm culoarea și fontul pentru textul principal al unei pagini web de blog sau site web. Pentru a face acest lucru, este suficient să determinați valorile cerute pentru selectorul de corp și sarcina va fi finalizată:

Acum, orice paragraf de pe această pagină web, de exemplu, este astfel:

Va fi decorat în stilul potrivit:

Datorită moștenirii, nu este nevoie să definiți proprietăți pentru absolut fiecare element separat. Cu toate acestea, uneori trebuie să faceți modificări pentru un anumit container, de exemplu, pentru un paragraf unic al cărui text ar trebui să iasă în evidență. În acest caz, setăm parametrii pentru acest element în mod explicit:

Acum, un paragraf obișnuit de pe pagină va arăta astfel:

Și un paragraf unic cu o valoare de culoare specificată separat va fi astfel:

Așa se face că, folosind algoritmi de grupare și moștenire acolo unde este necesar, puteți optimiza pe cât posibil fișierul de stil, făcându-l în același timp ușor de citit. Am menționat deja mai sus că nu toate proprietățile CSS sunt moștenite, așa că vă voi oferi una dintre paginile site-ului oficial W3C, unde puteți afla mai multe dacă doriți. informatii detaliate despre această întrebare. Deci, pagina „Tabel complet de proprietăți”:

În captură de ecran, un cadru roșu conturează datele despre care proprietăți CSS sunt moștenite și care nu. Și, în sfârșit, voi explica mai detaliat, coloană cu coloană, ce informații sunt prezentate aici:

„Nume” — numele proprietății CSS;
„Valori” - totul valori posibile pentru această proprietate;
"Valoarea initiala" - valoarea initiala Pentru a acestei proprietati, care este implicit (am menționat asta)
„Se aplică la” - la ce elemente se aplică regula, care include proprietatea CSS;
"Mostenit?" — dacă această regulă este moștenită sau nu.

Despre asta voiam să vă spun astăzi. Am încercat să predau nuanțele grupării și moștenirii CSS cât mai accesibile și eficiente. Cum am făcut asta? Tu fii judecătorul. Nivelul dvs. de activitate atunci când vă abonați la materiale noi de blog vă va răspunde la această întrebare. Prin urmare, permiteți-mi să-mi iau concediu. În cele din urmă, puțină relaxare nu ar strica, mai ales pentru cei care sunt parțiali la KVN:

goldbusinessnet.com

Ultima actualizare: 21.04.2016

Pentru a simplifica definirea stilurilor, CSS folosește un mecanism de moștenire a stilurilor. Acest mecanism permite elementelor imbricate să moștenească stilurile elementelor containerului lor. De exemplu, să presupunem că avem un titlu și un paragraf pe o pagină web care ar trebui să aibă text roșu. Putem aplica separat stilul adecvat paragrafului și titlului, care va stabili culoarea dorită font:

Moștenirea stilului

Cu toate acestea, deoarece atât elementul p, cât și elementul h2 sunt în elementul body, ele moștenesc multe stiluri din acel container, elementul body. Și pentru a evita duplicarea definiției stilului, am putea scrie astfel:

Moștenirea stilului

Text despre moștenirea stilului în CSS 3

Ca urmare, definirea stilurilor a devenit mai ușoară, dar rezultatul a rămas același.

Dacă nu dorim stilul moștenit, îl putem înlocui pentru anumite elemente:

Corp (culoare: roșu;) p (culoare: verde;)

Când sunt imbricate la mai multe niveluri, elementele moștenesc stilurile doar ale celui mai apropiat container:

Drepturi de autor MyCorp.com

Aici pagina web are următoarea structură:

Culoarea textului elementului div este înlocuită. Și din moment ce elementul h2 și unul dintre paragrafe sunt în element div, apoi moștenesc stilul elementului div. Al doilea paragraf este situat direct în elementul body și, prin urmare, moștenește stilul elementului body.

Cu toate acestea, nu toate proprietățile CSS aplică moștenirea stilului. De exemplu, proprietățile care reprezintă marginea, umplutura și chenarul elementelor nu sunt moștenite.

În plus, browserele aplică, de asemenea, un număr de stiluri prestabilite elementelor în mod implicit. De exemplu, titlurile au o anumită înălțime etc.

Buna ziua, draga cititorule.

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 scriu 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, așa 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. Si acum Exemplu CSS cod cu moștenire. Acceptabil pentru

Cele mai bune articole pe această temă