Atributul class

Atributul class definește una sau mai multe clase pentru element (prin element se înțelege tag-ul).

Acest lucru se face pentru a putea apoi să ne adresăm prin CSS unui grup de elemente cărora le este atribuită aceeași clasă și să îi aplicăm anumite proprietăți (de exemplu, să schimbăm culoarea textului, dimensiunea fontului și așa mai departe).

Există și atributul id, care similar cu atributul class permite selectarea elementelor de pe o pagină HTML.

Diferența dintre atributul class și atributul id este că class selectează un grup de elemente (chiar dacă este atribuit unui singur element - ulterior îl poți atribui și altuia), iar id selectează un element unic (nu ar trebui să existe un alt element cu acest id pe pagina site-ului, altfel va apărea un conflict).

Cum să înțelegi ce să dai unui element - clasă sau id? Clasa se acordă acelor elemente care se repetă pe paginile site-ului (pentru a nu scrie de mai multe ori același cod CSS). Chiar dacă acest element este acum singur, dar simțiți că elemente similare ar putea apărea în viitor - dați acestui element o clasă. Dacă sunteți sigur că un astfel de element este unic - atunci dați-i un id. Deși în prezent există o tendință de a da tuturor elementelor clasă, iar id să fie lăsat pentru JavaScript, aceasta nu este general acceptată.

Unui element i se pot atribui mai multe clase, în acest caz acestea trebuie enumerate separate prin spațiu.

Numele claselor trebuie să fie formate din litere englezești, cifre, fără spații (spațiul separă clasele unele de altele, în locul lui se poate folosi linia de subliniere sau liniuța). Clasele nu trebuie să înceapă cu o cifră (în HTML5 deja se poate, dar nu va funcționa în browserele vechi).

Numele claselor trebuie să fie date în limba engleză (și nu în rusă, pur și simplu cu litere englezești!). Numele trebuie să fie semnificative, să reflecte esența clasei.

Exemplu

Să dăm tuturor paragrafelor cu clasa test culoarea roșie a textului:

<p class="test">Paragraf cu clasa test.</p>
<p>Paragraf de control fără clasă.</p>

.test {
	color: red;
}

Exemplu . Mai multe clase pentru un element

Iar aici să dăm primului paragraf mai multe clase - test1 și test2 (le scriem separate prin spațiu). Clasa test1 definește culoarea roșie a textului, iar clasa test2 definește dimensiunea fontului la 20px. Al doilea paragraf are dată doar clasa test1 (acest paragraf va deveni roșu), iar celui de-al treilea paragraf - clasa test2 (acest paragraf va avea dimensiunea fontului de 20px). Primul paragraf, căruia îi sunt atribuite două clase, va avea simultan atât culoarea roșie cât și dimensiunea fontului de 20px:

<p class="test1 test2">Paragraf cu două clase test1 și test2.</p>
<p class="test1">Paragraf cu clasa test1.</p>
<p class="test2">Paragraf cu clasa test2.</p>
<p>Paragraf de control fără clase.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

Vezi și

atributul id,
care definește identificatori unici pentru elemente