CSSда элементларнинг класслари

Олдинги дарсларда биз саҳифа элементларини тег номи бўйича танлаб, масалан, барча абзацларга бир вақтда стиллар беришни ўрганган эдик. Саҳифада, аммо, турли хил стиллар қўллаш керак бўлган турли хил абзацлар бўлиши мумкин. Бундай муаммони ҳал қилиш учун турли абзацларни турли CSS классларига мансуб қилиш мумкин.

Тегни бирон классга мансуб қилиш учун, унга class атрибутини ёзиш керак, унда эса сиз тўпинган класс номи бўлиши керак, у ҳарфлар, рақамлар, пастки чизиқ ва дефис белгиларидан ташкил топган.

Келгила, мисолда кўрамиз. Абзацларни икки турдаги класслар билан - eee ва 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>

Келгила, энди CSSда турли классларга мансуб абзацларга mурожаат қилиб, уларга бирор стиллар белгилаймиз. Масалан, zzz классли абзацларни қизил рангга, eee классли абзацларни яшил рангга бўяймиз.

Бунга эришиш учун CSS файлида бизнинг классларимизга mурожаат қилиш керак. Мурожаат қилиш куйидаги синтаксисга эга: аввало нуқта белгиси, сўнгра биз тўпинган класс номи. Яъни eee классга mурожаат қилиш учун .eee ёзиш керак, zzz класс учун эса - .zzz ёзиш керак.

Демак, тавсифланганни бажарамиз. HTMLимизга киритилган класслар учун CSS стилларини қўшамиз:

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

Агар кодни ишга туширсак, натижада куйидаги ҳосил бўлади:

Куйидаги код берилган:

<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 классли элементларни қизил рангга, eve классли элементларни эса яшил рангга бўянг.

Куйидаги код берилган:

<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 классли барча элементларни қизил рангга бўянг.

Олдинги машқда li теглари нега қизил рангга бўянишини, ҳолбуки, рангни белгиловчи класс ul тегига берилганини тушантириб беринг.