Элементҳо дар CSS бо классҳо

Дар дарсҳои қаблӣ мо элементҳои саҳифаро ба номи тег интихоб мекардем, масалан, ба ҳамаи абзасҳо якбора услубҳо таъин мекардем. Дар саҳифа, аммо, метавонад абзасҳои навъҳои гуногун бошад, ба онҳое, ки ба услубҳои гуногун ниёз аст. Барои ҳалли чунин мушкилот метавон абзасҳои гуногунро ба классҳои CSS гуногун тааллуқ дод.

Барои тааллуқ додани тег ба ягон класс, ба он тег ниёз аст хосияти class нависед, ва дар он - номи ихтироъкардаи шумо барои класс, ки аз ҳарфҳо, рақамҳо, аломатҳои зерихат ва тире иборат аст.

Биёед ба мисол назар кунем. Абзасҳо бо ду навъи классҳо - eee ва zzz созем:

<p class="eee">
	абзас бо класси eee
</p>
<p class="eee">
	абзас бо класси eee
</p>
<p class="zzz">
	абзас бо класси zzz
</p>
<p class="zzz">
	абзас бо класси zzz
</p>

Биёед акнун дар CSS ба абзасҳо бо классҳои гуногун муроҷиат кунем ва ба онҳо ягон услубҳо таъин кунем. Масалан, абзасҳои бо класси zzz-ро ба ранги сурх, ва абзасҳои бо класси eee - ба сабз ранг кунем.

Барои ин дар файли CSS ниёз аст ба классҳои мо муроҷиат кунем. Муроҷиат синтаксиси зерро дорад: аввал аломати нуқта меояд, ва сипас номи ихтироъкардаи мо барои класс. Яъне барои муроҷиат ба класи eee ниёз аст нависед .eee, ва барои класи zzz - нависед .zzz.

Пас, описанӣро анҷом диҳем. Ба HTML-и мо инчунин услубҳои CSS барои классҳои воридкардаи мо илова кунем:

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

Агар коди моро оғоз кунем, дар натиҷа хоҳад шуд зеро:

Коди зерин дода шудааст:

<ul>
	<li class="odd">матн</li>
	<li class="eve">матн</li>
	<li class="odd">матн</li>
	<li class="eve">матн</li>
	<li class="odd">матн</li>
	<li class="eve">матн</li>
</ul>

Элементҳои бо класи odd-ро ба ранги сурх ва элементҳои бо класси eve - ба сабз ранг кунед.

Коди зерин дода шудааст:

<h2 class="eee">Сарлавҳа</h2>
<p class="eee">
	абзас
</p>
<p class="eee">
	абзас
</p>
<p>
	абзас бе класс
</p>

<ul class="eee">
	<li>матн</li>
	<li>матн</li>
	<li>матн</li>
	<li>матн</li>
	<li>матн</li>
</ul>

Ҳамаи элементҳои бо класи eee-ро ба ранги сурх ранг кунед.

Шарҳ диҳед, чаро дар вазифаи қаблӣ ба ранги сурх тегҳои li ранг мешаванд, ҳол он ки класс, ки рангро таъин мекунад, ба теги ul таъин шудааст.