Elementklasse in CSS

In vorige lesse het ons elemente van die bladsy volgens hul tag-naam gekies, en style byvoorbeeld tegelyk aan alle paragrawe toegepas. Op 'n bladsy kan daar eger paragrawe van verskillende tipes wees, waarop verskillende style toegepas moet word. Om hierdie probleem op te los, kan ons verskillende paragrawe aan verskillende CSS klasse toewys.

Om 'n tag aan 'n klas toe te wys, moet jy aan daardie tag die attribuut class skryf, en daarin - 'n selfbedagte naam vir die klas, wat uit letters, syfers, onderstreep- en koppeltekens bestaan.

Kom ons kyk na 'n voorbeeld. Laat ons paragrawe met twee tipes klasse maak - eee en zzz:

<p class="eee">
	paragraaf met klas eee
</p>
<p class="eee">
	paragraaf met klas eee
</p>
<p class="zzz">
	paragraaf met klas zzz
</p>
<p class="zzz">
	paragraaf met klas zzz
</p>

Kom ons verwys nou in CSS na die paragrawe met die verskillende klasse en ken aan hulle 'n paar style toe. Byvoorbeeld, laat ons die paragrawe met klas zzz rooi kleur, en die paragrawe met klas eee - groen.

Om dit te doen, moet jy in die CSS-lêr na ons klasse verwys. Die verwysing het die volgende sintaks: eers kom die punt-simbool, en dan ons selfbedagte klasnaam. Dus om na klas eee te verwys moet jy .eee skryf, en vir klas zzz - skryf .zzz.

So, laat ons dit soos beskryf doen. Laat ons by ons HTML ook CSS-style vir die klasse wat ons gedefinieer het byvoeg:

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

As jy ons kode uitvoer, sal die resultaat die volgende wees:

Die volgende kode word gegee:

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

Kleur die elemente met klas odd rooi en die elemente met klas eve groen.

Die volgende kode word gegee:

<h2 class="eee">Titel</h2>
<p class="eee">
	paragraaf
</p>
<p class="eee">
	paragraaf
</p>
<p>
	paragraaf sonder klas
</p>

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

Kleur alle elemente met klas eee rooi.

Verduidelik hoekom in die vorige taak die li tags rooi gekleur word, alhoewel die klas wat die kleur spesifiseer, aan die ul tag toegewys is.