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">Title</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 тегине гана белгилеген болчубуз, аны түшүндүрүп бериңиз.