CSS-də Element Sinifləri

Əvvəlki dərslərdə səhifə elementlərini teq adına görə seçirdik, məsələn, eyni anda bütün abzaslara stil tətbiq edirdik. Lakin səhifədə müxtəlif növ abzalar ola bilər, onlara müxtəlif stillər tətbiq etmək lazımdır. Bu problemi həll etmək üçün müxtəlif abzasları müxtəlif CSS siniflərinə aid etmək olar.

Teqi hansısa sinfə aid etmək üçün, həmin teqə class atributunu yazmaq, onun içinə isə hərflər, rəqəmlər, altxət simvolları və defisdən ibarət öz təxərrüs etdiyiniz sinif adını yazmaq lazımdır.

Gəlin nümunəyə baxaq. eee və zzz kimi iki növ sinfi olan abzaslar edək:

<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>

İndi gəlin CSS-də müxtəlif sinifləri olan abzaslara müraciət edək və onlara bəzi stillər təyin edək. Məsələn, zzz sinifli abzasları qırmızı rəngə, eee sinifli abzasları isə yaşıl rəngə boyayaq.

Bunun üçün CSS faylında siniflərimizə müraciət etmək lazımdır. Müraciət aşağıdakı sintaksisə malikdir: əvvəlcə nöqtə simvolu, sonra isə bizim təxərrüs etdiyimiz sinif adı yazılır. Yəni eee sinfinə müraciət etmək üçün .eee yazmaq, zzz sinfinə müraciət etmək üçün isə .zzz yazmaq lazımdır.

Beləliklə, təsvir ediləni edək. HTML-ə əlavə olaraq, təqdim etdiyimiz siniflər üçün CSS stilləri əlavə edək:

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

Kodumuzu işə salsaq, nəticədə aşağıdakılar alınacaq:

Aşağıdakı kod verilmişdir:

<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>

odd sinifli elementləri qırmızı rəngə, eve sinifli elementləri isə yaşıl rəngə boyayın.

Aşağıdakı kod verilmişdir:

<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>

eee sinifli bütün elementləri qırmızı rəngə boyayın.

Əvvəlki məsələdə niyə li teqləri rənglənir, həlbuki rəngi təyin edən sinif ul teqinə verilib?