Atrybut class

Atrybut class definiuje jedną lub więcej klas dla elementu (przez element rozumie się tag).

Robimy to po to, aby następnie odwołać się za pomocą CSS do grupy elementów, którym przypisano tę samą klasę i zastosować do nich określone właściwości (na przykład zmienić kolor tekstu, rozmiar czcionki i tak dalej).

Istnieje również atrybut id, który podobnie jak atrybut class pozwala wybierać elementy na stronie HTML.

Różnica między atrybutem class a atrybutem id polega na tym, że class wybiera grupę elementów (nawet jeśli jest przypisany do jednego elementu - można go później przypisać również do innego), a id wybiera unikalny element (nie powinno być więcej elementów z takim id na stronie internetowej, w przeciwnym razie wystąpi konflikt).

Jak zrozumieć, co nadać elementowi - klasę czy id? Klasę nadaje się tym elementom, które powtarzają się na stronach internetowych (aby nie pisać kilka razy tego samego kodu CSS). Nawet jeśli obecnie ten element jest jeden, ale czujesz, że podobne elementy mogą pojawić się w przyszłości - nadaj temu elementowi klasę. Jeśli zaś jesteś pewien, że taki element jest unikalny - to nadaj mu id. Chociaż obecnie istnieje tendencja do nadawania wszystkim elementom klas, a id pozostawiania dla JavaScriptu, nie jest ona powszechnie przyjęta.

Elementowi można przypisać kilka klas, w tym przypadku należy je wymieniać przez spację.

Nazwy klas powinny być pisane angielskimi literami, cyframi, bez spacji (spacja oddziela klasy od siebie, zamiast niej można użyć podkreślenia lub myślnika). Klasy nie powinny zaczynać się od cyfry (w HTML5 już można, ale nie będzie działać w starych przeglądarkach).

Nazwy klas należy nadawać w języku angielskim (a nie po rosyjsku, po prostu angielskimi literami!). Nazwy powinny być znaczące, odzwierciedlać istotę klasy.

Przykład

Nadajmy wszystkim akapitom z klasą test czerwony kolor tekstu:

<p class="test">Akapit z klasą test.</p>
<p>Akapit kontrolny bez klasy.</p>

.test {
	color: red;
}

Przykład . Kilka klas dla elementu

A tutaj nadajmy pierwszemu akapitowi kilka klas - test1 i test2 (zapiszmy je przez spację). Klasa test1 nadaje czerwony kolor tekstowi, a klasa test2 nadaje rozmiar czcionki na 20px. Drugiemu akapitowi nadano tylko klasę test1 (ten akapit stanie się czerwony), a trzeciemu akapitowi - klasę test2 (ten akapit będzie miał rozmiar czcionki 20px). Pierwszy akapit, któremu nadano dwie klasy, będzie miał jednocześnie i czerwony kolor i rozmiar czcionki na 20px:

<p class="test1 test2">Akapit z dwiema klasami test1 i test2.</p>
<p class="test1">Akapit z klasą test1.</p>
<p class="test2">Akapit z klasą test2.</p>
<p>Akapit kontrolny bez klas.</p>

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

Zobacz też

atrybut id,
który nadaje elementom unikalne identyfikatory