Clasele elementelor în CSS

În lecțiile anterioare am selectat elementele paginii după numele tag-ului, setând stiluri, de exemplu, tuturor paragrafelor simultan. Pe o pagină, însă, pot exista paragrafe de diferite tipuri, cărora trebuie să li se aplice stiluri diferite. Pentru a rezolva această problemă, putem atribui diferitele paragrafe unor clase CSS diferite.

Pentru a atribui un tag unei clase, este necesar să scriem acelui tag atributul class, iar în el - numele clasei inventat de dvs., format din litere, cifre, caractere de subliniere și liniuță.

Să privim un exemplu. Să facem paragrafe cu două tipuri de clase - eee și 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>

Haideți acum să ne adresăm în CSS paragrafelor cu diferite clase și să le setăm niște stiluri. De exemplu, să colorăm paragrafele cu clasa zzz în culoarea roșie, iar paragrafele cu clasa eee - în verde.

Pentru aceasta, în fișierul CSS trebuie să ne adresăm classelor noastre. Adresarea are următoarea sintaxă: mai întâi vine simbolul punct, apoi numele clasei inventat de noi. Adică pentru a ne adresa clasei eee trebuie să scriem .eee, iar pentru clasa zzz - să scriem .zzz.

Așadar, să facem cele descrise. Să adăugăm codului nostru HTML și stiluri CSS pentru clasele introduse de noi:

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

Dacă rulăm codul nostru, atunci ca rezultat vom obține următoarele:

Este dat următorul cod:

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

Colorați în roșu elementele cu clasa odd și în verde - elementele cu clasa eve.

Este dat următorul cod:

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

Colorați în roșu toate elementele cu clasa eee.

Explicați de ce în problema anterioară în roșu se colorează tag-urile li, deși clasa, care setează culoarea, este atribuită tag-ului ul.