CSS-de element klasslary

Öňki sapaklarda biz sahypa elementlerini teg atlary boýunça saýlap, meselem, ähli abzaslara birwagtda stil berýärdik. Sahypada, şonda-da, dürli stileri ulanmak zerur bolan dürli görnüşli abzaslar bolup biler. Bu meseläni çözmek üçin dürli abzaslary dürli CSS klasslara degişli etmek bolýar.

Tegi bir klassyna degişli etmek üçin, o tege class atributyny ýazmaly, we onuň içinde - özüňiziň oýlap tapyn klassyň adyny, harp, san, aşaky çyzyk we defis simwollaryndan duran.

Geliň mysal üçinde göreli. Iki görnüşli klassy - eee we zzz bilen abzaslar ýasaýarys:

<p class="eee">
	eee klassly abzas
</p>
<p class="eee">
	eee klassly abzas
</p>
<p class="zzz">
	zzz klassly abzas
</p>
<p class="zzz">
	zzz klassly abzas
</p>

Indi geliň CSS-de dürli klasslaryň abzaslaryna ýüz tutup, olara käbir stiler beraýlyň. Meselem, zzz klassyň abzaslaryny gyzyl reňke, eee klassynyň abzaslaryny bolsa ýaşyl reňke boýaýalyň.

Bunuň üçin CSS faýlynda bizimiň klasslarymyza ýüz tutmaly. Ýüz tutmanyň gurluşy şeýle: ilki nokat simwoly, soňra biziň oýlap tapan adymyz. Ýagny, eee klassyna ýüz tutmak üçin .eee ýazmaly, zzz klassyna bolsa - .zzz ýazmaly.

Şeýlelikde, beýan edileni edeliň. HTML-imize girizilen klasslarymyz üçin CSS stillerini goşalyň:

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

Kody işletsek, netijede şu çykýar:

Aşakdaky kod berlen:

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

odd klassyň elementlerini gyzyl reňke, eve klassyň elementlerini bolsa ýaşyl reňke boýaň.

Aşakdaky kod berlen:

<h2 class="eee">Serrnama</h2>
<p class="eee">
	abzas
</p>
<p class="eee">
	abzas
</p>
<p>
	klassy ýok abzas
</p>

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

eee klassy bilen ähli elementleri gyzyl reňke boýaň.

Öňki mesele näme üçin li teglere gyzyl reňk degýändigini, klas bolsa ul tegine berlen bolsa-da, düşündiriň.