Moștenirea proprietăților CSS
Să presupunem că avem un paragraf, iar în el un
text în tag-ul i:
<p>
This is some <i>text</i> in paragraph.
</p>
Haideți să colorăm paragrafele în roșu:
p {
color: red;
}
Ca rezultat, se va colora nu doar textul paragrafului,
ci și textul tag-ului i:
Totul se datorează faptului că proprietatea color
se moștenește. Aceasta înseamnă că dacă
tag-ului părinte i se atribuie o anumită culoare,
atunci această culoare va fi și la descendenți. Nu toate
proprietățile CSS se moștenesc, dar multe dintre ele (dintre cele
pe care le știți deja - toate se moștenesc).
Dacă se dorește, totuși, se poate suprascrie proprietatea părintelui, setând un selector pentru descendent. De exemplu, haideți să setăm paragrafului culoarea roșie, iar italicului - albastru deschis:
<p>
This is some <i>text</i> in paragraph.
</p>
p {
color: red;
}
i {
color: blue;
}
:
Ordinea selectorilor în codul CSS în acest caz
nu are importanță. Dacă schimbăm locurile
selectorului i și selectorului p, totul va funcționa
la fel:
<p>
This is some <i>text</i> in paragraph.
</p>
i {
color: blue;
}
p {
color: red;
}
:
Studiind codul, spuneți ce culoare va avea
textul în tag-ul b:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
Studiind codul, spuneți ce culoare va avea
textul în tag-ul b:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
b {
color: red;
}
Studiind codul, spuneți ce culoare va avea
textul în tag-ul b:
<p>
This is some <b>text</b> in paragraph.
</p>
b {
color: red;
}
p {
color: blue;
}
Studiind codul, spuneți ce culoare va avea
textul în tag-ul li:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
Studiind codul, spuneți ce culoare va avea
textul în tag-ul li:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
Studiind codul, spuneți ce culoare va avea
textul în tag-ul i:
<ul>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
i {
color: green;
}
Studiind codul, spuneți ce dimensiune va avea
textul în tag-ul i:
<ul>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
</ul>
i {
font-size: 30px;
}
ul {
font-size: 20px;
}
li {
color: red;
font-weight: bold;
}
