Elementide klassid CSS-is

Eelmistes õppetükides valisime lehe elemente silma järgi, määrates stiile näiteks kõikidele lõigudele korraga. Lehel võib aga olla erinevat tüüpi lõike, millele tuleb rakendada erinevaid stiile. Selle probleemi lahendamiseks saab erinevad lõigud liigitada erinevatesse CSS klassidesse.

Selleks, et liigitada silt mingisse klassi, tuleb sellele sildile kirjutada atribuut class, ja sellesse - teie poolt väljamõeldud klassi nimi, mis koosneb tähtedest, numbritest, allkriipsu ja sidekriipsu sümbolitest.

Vaatame näidet. Teeme lõigud kahte tüüpi klassidega - eee ja zzz:

<p class="eee">
	paragraph with class eee
</p>
<p class="eee">
	paragraph with class eee
</p>
<p class="zzz">
	paragraph with class zzz
</p>
<p class="zzz">
	paragraph with class zzz
</p>

Pöördume nüüd CSS-is erinevate klassidega lõigete poole ja määrame neile mõned stiilid. Näiteks värvime klassi zzz lõigud punaseks värvi ja klassi eee lõigud - roheliseks.

Selleks tuleb CSS failis pöörduda meie klasside poole. Pöördumisel on järgmine süntaks: kõigepealt tuleb punkt ja seejärel meie poolt väljamõeldud klassi nimi. See tähendab, et klassi eee poole pöördumiseks tuleb kirjutada .eee ja klassi zzz poole pöördumiseks - kirjutada .zzz.

Teeme nii, nagu on kirjeldatud. Lisame oma HTML-ile ka CSS stiilid sisestatud klasside jaoks:

.eee {
	color: green;
}
.zzz {
	color: red;
}

Kui käivitada meie kood, on tulemuseks järgmine:

Antud on järgmine kood:

<ul>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
</ul>

Värvige punaseks elemendid klassiga odd ja roheliseks - elemendid klassi eve.

Antud on järgmine kood:

<h2 class="eee">Title</h2>
<p class="eee">
	paragraph
</p>
<p class="eee">
	paragraph
</p>
<p>
	paragraph without class
</p>

<ul class="eee">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Värvige kõik klassi eee elemendid punaseks.

Selgitage, miks eelmises ülesandes värvuvad punaseks sildid li, kuigi värvi määrav klass on määratud sildile ul.