Klasat e Elementeve në CSS

Në mësimet e mëparshme ne kemi zgjedhur elementet e faqes sipas emrit të tag-ut, duke u dhënë stile, për shembull, të gjithë paragrafëve njëkohësisht. Në një faqe, sidoqoftë, mund të ketë paragrafë të llojeve të ndryshme, të cilëve duhet t'u aplikohen stile të ndryshme. Për zgjidhjen e këtij problemi paragrafë të ndryshëm mund t'u caktohen klasave të ndryshme CSS.

Për t'i caktuar një tag një klase, duhet t'i shkruhet atij tag-ut atributi class, dhe në të - emri i klasës i menduar nga ju, i përbërë nga shkronja, numra, shenja të nënvizimit dhe vizash.

Le ta shohim me një shembull. Le të bëjmë paragrafë me dy lloje klasash - eee dhe 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>

Tani le t'u drejtohemi në CSS paragrafëve me klasa të ndryshme dhe t'u caktojmë disa stile. Për shembull, le t'i ngjyrosim paragrafët me klasën zzz me ngjyrë të kuqe, kurse paragrafët me klasën eee - me ngjyrë të gjelbër.

Për këtë, në skedarin CSS duhet t'u drejtohemi klasave tona. Drejtimi ka sintaksën e mëposhtme: së pari vjen shenja pikë, e më pas emri i klasës i menduar nga ne. Domethënë për t'u drejtuar klasës eee duhet të shkruhet .eee, kurse për klasën zzz - të shkruhet .zzz.

Pra, le ta bëjmë të përshkruarën. Le t'i shtojmë HTML-it tonë edhe stilet CSS për klasat e prezantuara nga ne:

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

Nëse e ekzekutojmë kodin tonë, si rezultat do të fitohet kjo:

Është dhënë kodi i mëposhtëm:

<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>

Ngjyrosni me ngjyrë të kuqe elementet me klasën odd dhe me ngjyrë të gjelbër - elementet me klasën eve.

Është dhënë kodi i mëposhtëm:

<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>

Ngjyrosni me ngjyrë të kuqe të gjithë elementet me klasën eee.

Shpjegoni pse në detyrën e mëparshme me ngjyrë të kuqe ngjyrohen tag-et li, edhe pse klasa, që përcakton ngjyrën, është caktuar tag-ut ul.