CSS īpašību mantošana

Pieņemsim, ka mums ir rindkopa, un tajā ir kāds teksts tagā i:

<p>
	This is some <i>text</i> in paragraph.
</p>

Izkrāsosim rindkopas sarkanā krāsā:

p {
	color: red;
}

Rezultātā izkrāsosies ne tikai rindkopas teksts, bet arī teksta tags i:

Visa lieta ir tajā, ka īpašība color tiek mantota. Tas nozīmē, ka, ja vecāka elementam ir iestatīts kāds krāsa, tāda pati krāsa būs arī pēctečiem. Ne visas CSS īpašības tiek mantotas, bet daudzas (no tām, kuras jūs jau zināt - visas tiek mantotas).

Tomēr, ja vēlas, var pārrakstīt vecāka īpašību, iestatot selektoru pēctecim. Piemēram, dosim rindkopai sarkano krāsu, bet kursīvam - gaiši zilo:

<p>
	This is some <i>text</i> in paragraph.
</p>

p {
	color: red;
}
i {
	color: blue;
}

Selektoru secība CSS kodā šajā gadījumā nav nozīmes. Ja apmainīsiet vietām selektoru i un selektoru p, viss darbosies tāpat:

<p>
	This is some <i>text</i> in paragraph.
</p>

i {
	color: blue;
}
p {
	color: red;
}

Izpētījuši kodu, sakiet, kādu krāsu būs teksts tagā b:

<p>
	This is some <b>text</b> in paragraph.
</p>

p {
	color: blue;
}

Izpētījuši kodu, sakiet, kādu krāsu būs teksts tagā b:

<p>
	This is some <b>text</b> in paragraph.
</p>

p {
	color: blue;
}
b {
	color: red;
}

Izpētījuši kodu, sakiet, kādu krāsu būs teksts tagā b:

<p>
	This is some <b>text</b> in paragraph.
</p>

b {
	color: red;
}
p {
	color: blue;
}

Izpētījuši kodu, sakiet, kādu krāsu būs teksts tagā li:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul {
	color: blue;
}

Izpētījuši kodu, sakiet, kādu krāsu būs teksts tagā li:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul {
	color: blue;
}
li {
	color: red;
}

Izpētījuši kodu, sakiet, kādu krāsu būs teksts tagā 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;
}

Izpētījuši kodu, sakiet, kādu izmēru būs teksts tagā 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;
}