Overerving van CSS-eigenschappen
Stel we hebben een paragraaf, en daarin een stuk
tekst in de tag i:
<p>
This is some <i>text</i> in paragraph.
</p>
Laten we de paragrafen een rode kleur geven:
p {
color: red;
}
Als resultaat wordt niet alleen de tekst van de paragraaf
gekleurd, maar ook de tekst van de tag i:
Het punt is dat de eigenschap color
wordt geërfd. Dit betekent dat als
de bovenliggende tag een bepaalde kleur heeft,
deze kleur ook voor de onderliggende tags geldt. Niet
alle CSS-eigenschappen worden geërfd, maar veel (van degene
die je al kent - worden allemaal geërfd).
Indien gewenst, kan men echter de eigenschap van de ouder overschrijven, door een selector voor de onderliggende tag te specificeren. Laten we bijvoorbeeld voor de paragraaf een rode kleur instellen, en voor cursief - blauw:
<p>
This is some <i>text</i> in paragraph.
</p>
p {
color: red;
}
i {
color: blue;
}
:
De volgorde van de selectors in de CSS-code
maakt in dit geval niet uit. Als je de selector
i en de selector p omwisselt, zal het
hetzelfde werken:
<p>
This is some <i>text</i> in paragraph.
</p>
i {
color: blue;
}
p {
color: red;
}
:
Bestudeer de code en zeg welke kleur de
tekst in de tag b zal hebben:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
Bestudeer de code en zeg welke kleur de
tekst in de tag b zal hebben:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
b {
color: red;
}
Bestudeer de code en zeg welke kleur de
tekst in de tag b zal hebben:
<p>
This is some <b>text</b> in paragraph.
</p>
b {
color: red;
}
p {
color: blue;
}
Bestudeer de code en zeg welke kleur de
tekst in de tag li zal hebben:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
Bestudeer de code en zeg welke kleur de
tekst in de tag li zal hebben:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
Bestudeer de code en zeg welke kleur de
tekst in de tag i zal hebben:
<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;
}
Bestudeer de code en zeg welke grootte de
tekst in de tag i zal hebben:
<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;
}
