CSS dagi element klasslari

Oldingi darslarda biz sahifa elementlarini teg nomi bo'yicha tanladik, masalan, barcha abzaslarga bir vaqtning o'zida stil berardik. Sahifada, shu bilan birga, turli xil stillarni qo'llash kerak bo'lgan turli xil abzarlar bo'lishi mumkin. Buni hal qilish uchun turli abzarlarni turli CSS klasslariga bog'lash mumkin.

Tegni ma'lum bir klassga bog'lash uchun, unga class atributini yozish kerak, unda esa siz tomoningizdan kiritilgan klass nomi bo'lishi kerak, u harflar, raqamlar, pastki chiziq va defis belgilaridan iborat bo'ladi.

Keling, misolni ko'rib chiqaylik. Ikki xil klassdagi abzarlarni yaratamiz - eee va zzz:

<p class="eee">
	class eee ga ega abzas
</p>
<p class="eee">
	class eee ga ega abzas
</p>
<p class="zzz">
	class zzz ga ega abzas
</p>
<p class="zzz">
	class zzz ga ega abzas
</p>

Keling, endi CSS orqali turli klassdagi abzarlarga murojaat qilaylik va ularga biron bir stil beraylik. Masalan, zzz klassidagi abzarlarni qizil rangga, eee klassidagi abzarlarni esa yashil rangga bo'yaylik.

Buning uchun CSS faylida bizning klasslarimizga murojaat qilish kerak. Murojaat quyidagi sintaksisga ega: avval nuqta belgisi, keyin esa biz tomonimizdan kiritilgan klass nomi. Ya'ni eee klassiga murojaat qilish uchun .eee yozish kerak, zzz klassiga esa - .zzz yozish kerak.

Shunday qilaylik. HTML imizga kiritgan klasslarimiz uchun CSS stillarini qo'shamiz:

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

Agar kodimizni ishga tushirsak, natijada quyidagi hosil bo'ladi:

Quyidagi kod berilgan:

<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 klassidagi elementlarni qizil rangga bo'yang va eve klassidagi elementlarni - yashil rangga bo'yang.

Quyidagi kod berilgan:

<h2 class="eee">Sarlavha</h2>
<p class="eee">
	abzas
</p>
<p class="eee">
	abzas
</p>
<p>
	class siz abzas
</p>

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

eee klassidagi barcha elementlarni qizil rangga bo'yang.

Oldingi vazifada nima uchun li teglari qizil rangga bo'yalishini tushuntiring, garchi rang beruvchi klass ul tegiga berilgan bo'lsa ham.