Տարրերի դասերը 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 թեգին։