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-те әртүрлі кластары бар абзацтарға қолданып, оларға бірнеше стильдер берейік. Мысалы, zzz класы бар абзацтарды қызыл түске, ал eee класы бар абзацтарды жасыл түске бояйық.

Ол үшін CSS файлында біздің кластарымызға қолдану керек. Қолдану келесі синтаксиске ие: алдымен нүкте белгісі, содан кейін біз ойлап тапқан клас атауы. Яғни, eee класына қолдану үшін .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 тегіне тағайындалған, түсіндіріңіз.