Oorerving van CSS Eienskappe
Gestel ons het 'n paragraaf, en daarin is daar 'n stuk
teks in die i-tag:
<p>
This is some <i>text</i> in paragraph.
</p>
Kom ons maak die paragrawe rooi:
p {
color: red;
}
As gevolg sal nie net die paragraaf se teks rooi word nie,
maar ook die teks in die i-tag:
Die rede is dat die eienskap color
geërf word. Dit beteken dat as
die ouer-tag 'n sekere kleur het,
dan sal die kinders dieselfde kleur hê. Nie alle
CSS eienskappe word geërf nie, maar baie (van die wat
jy reeds ken - word almal geërf).
Indien verlang, kan jy egter die ouer se eienskap oorheers deur 'n selektor vir die nageslag te spesifiseer. Byvoorbeeld, laat ons die paragraaf rooi maak en die kursief - blou:
<p>
This is some <i>text</i> in paragraph.
</p>
p {
color: red;
}
i {
color: blue;
}
:
Die volgorde van selektore in die CSS-kode maak in so 'n geval
nie saak nie. As jy die selektor i en die selektor p omruil, sal alles steeds werk
op dieselfde manier:
<p>
This is some <i>text</i> in paragraph.
</p>
i {
color: blue;
}
p {
color: red;
}
:
Deur die kode te bestudeer, sê watter kleur die
teks in die b-tag sal hê:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
Deur die kode te bestudeer, sê watter kleur die
teks in die b-tag sal hê:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
b {
color: red;
}
Deur die kode te bestudeer, sê watter kleur die
teks in die b-tag sal hê:
<p>
This is some <b>text</b> in paragraph.
</p>
b {
color: red;
}
p {
color: blue;
}
Deur die kode te bestudeer, sê watter kleur die
teks in die li-tag sal hê:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
Deur die kode te bestudeer, sê watter kleur die
teks in die li-tag sal hê:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
Deur die kode te bestudeer, sê watter kleur die
teks in die i-tag sal hê:
<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;
}
Deur die kode te bestudeer, sê watter grootte die
teks in die i-tag sal hê:
<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;
}
