Cum funcționează moștenirea CSS în documentele Web

O parte importantă a designului unui site web cu CSS este înțelegerea conceptului de moștenire.

Moștenirea CSS este definită automat de stilul proprietății folosite. Când căutați în sus culoarea de fundal a stilului, veți vedea o secțiune intitulată "Moștenire". Dacă sunteți ca majoritatea designerilor web, ați ignorat acea secțiune, dar aceasta nu are un scop.

Ce este moștenirea CSS?

Fiecare element dintr-un document HTML face parte dintr-un arbore și fiecare element, cu excepția elementului inițial, are un element parental care îl înconjoară. Orice stiluri se aplică acelui element părinte pot fi aplicate elementelor închise în el dacă proprietățile sunt cele care pot fi moștenite.

De exemplu, acest cod HTML de mai jos are o etichetă H1 care include o etichetă EM:

Acesta este un Titlu Big

Elementul EM este un copil al elementului H1 și toate stilurile de pe H1 care sunt moștenite vor fi transmise și pe textul EM. De exemplu:

h1 {font-size: 2m; }

Deoarece proprietatea font-size este moștenită, textul care spune "Big" (care este cel care este inclus în tag-urile EM) va avea aceeași dimensiune ca restul H1. Aceasta se datorează faptului că moștenește valoarea setată în proprietatea CSS.

Cum se utilizează moștenirea CSS

Cel mai simplu mod de utilizare este familiarizarea cu proprietățile CSS care sunt și nu sunt moștenite. Dacă proprietatea este moștenită, atunci știi că valoarea va rămâne aceeași pentru fiecare element copil din document.

Cea mai bună modalitate de a utiliza acest lucru este să vă setați stilurile de bază pe un element foarte înalt, cum ar fi BODY. Dacă setați familia font-ului pe proprietatea corporală, atunci, datorită moștenirii, întregul document va păstra aceeași familie de fonturi. Acest lucru va face de fapt pentru foi de stil mai mici, care sunt mai ușor de gestionat, deoarece există mai puține stiluri generale. De exemplu:

corp {font-family: Arial, sans-serif; }

Utilizați Valoarea stilului moștenit

Fiecare proprietate CSS include valoarea "moștenire" ca o posibilă opțiune. Acest lucru îi spune browserului Web că, chiar dacă proprietatea nu ar fi în mod normal moștenită, ar trebui să aibă aceeași valoare ca și părintele. Dacă ați setat un stil, cum ar fi o marjă care nu este moștenită, puteți utiliza valoarea moștenirii pentru proprietățile ulterioare pentru a le oferi aceeași marjă ca cea a părintelui. De exemplu:

corp {marja: 1em; } p {margine: moștenire; }

Moștenirea utilizează valori calculate

Acest lucru este important pentru valori moștenite , cum ar fi dimensiunile de fonturi care utilizează lungimi. O valoare calculată este o valoare care este relativă la o altă valoare pe pagina Web.

Dacă setați o dimensiune a fontului de 1m pe elementul dvs. BODY, întreaga pagină nu va avea toate dimensiunile de numai 1. Acest lucru se datorează faptului că elemente precum titlurile (H1-H6) și alte elemente (unele browsere calculează proprietățile tabelului în mod diferit) au o dimensiune relativă în browserul Web. În absența altor informații despre dimensiunea fontului, browserul Web va face întotdeauna un titlu H1 cel mai mare text de pe pagină, urmat de H2 și așa mai departe. Când setați elementul BODY la o anumită dimensiune a fontului, atunci acesta este folosit ca dimensiune medie a fontului, iar elementele de titlu sunt calculate de la acesta.

O notă despre moștenire și proprietățile fundalului

Există o serie de stiluri listate care nu au fost moștenite în CSS 2 pe W3C, dar browserele Web continuă să moștenească valorile. De exemplu, dacă ați scris următoarele coduri HTML și CSS: