Un lucru la care trebuie sa ne gandim atunci cand scriem CSS este ca un element va mosteni reguli de la parintele sau.
O regula setata pe parinte se va transmite tuturor elementelor din interiorul lui, dar un copil le poate suprascrie.
Mostenirea unei culori
Sa spunem ca avem o pagina cu urmatoarea structura:
<body>
<h1>Titlul paginii</h1>
<p>Subtitlul paginii care de fapt este un paragraf foarte scurt</p>
<div>
<p>Primul paragraf din pagina.</p>
<p>Al doilea paragraf din pagina ce cuprinde cateva <span>cuvinte speciale</span> ce vor fi stilizate altfel.</p>
<p>Ultimul paragraf ce contine cateva cuvinte, dar unul e mai <span>special</span>.</p>
</div>
</body>
Daca vom scrie o regula CSS pentru elementul <body></body>
prin care ii setam culoarea gri:
body {
color: gray;
}
Atunci aceasta regula va fi mostenita si de elementele din interiorul lui precum: <h1>
, <p>
si <div>
.
Asadar toate aceste elemente vor avea regula color: gray;
setata pe ele.
Dar asa cum <div>
-ul mosteneste de la parintele lui <body>
, si paragrafele din interiorul lui o vor mosteni. Iar tag-urile <span>
vor mosteni de la parintii lor, <p>
, si atunci si ele vor avea culoarea gri.
Asadar culoarea gri se transmite tuturor elementelor care nu au o culoare setata in mod expres.
Dar putem intrerupe acest lant.
De exemplu, pe elementul <div>
, putem seta culoarea verde:
div {
color: green;
}
Si acum toate elementele din interiorul lui vor avea culoarea verde. <h1>
si primul <p>
inca raman cu culoarea mostenita de la <body>
.
Dar <div>
-ul nu va mai mosteni de la nimeni, pentru ca are propria culoare setata.
Aceasta transmitere a regulilor se aplica pentru majoritatea regulilor din CSS, nu doar pentru culoare. Ce reguli se transmit si ce efecte au, vom descoperi doar prin exercitiu.