Atributas class

Atributas class nustato vieną ar kelias klases elementui (elementu turima omenyje ženklą).

Tai daroma tam, kad vėliau galėtume per CSS pasiekti elementų grupę, kuriai nustatyta tokia pati klasė, ir pritaikyti jai tam tikras savybes (pavyzdžiui, pakeisti teksto spalvą, šrifto dydį ir pan.).

Taip pat egzistuoja atributas id, kuris, panašiai kaip ir atributas class, leidžia pasirinkti elementus HTML puslapyje.

Skirtumas tarp atributo class ir atributo id yra tas, kad class pasirenka elementų grupę (net jei jis suteiktas vienam elementui - vėliau jį galima suteikti ir kitam), o id pasirenka unikalų elementą (daugiau elementų su tokiu id neturėtų būti svetainės puslapyje, kitaip kils konfliktas).

Kaip suprasti, ką suteikti elementui - klasę ar id? Klasė suteikiama tiems elementams, kurie kartojasi svetainės puslapiuose (kad nereikėtų kelis kartus rašyti to paties CSS kodo). Net jei dabar šis elementas yra vienas, bet jaučiate, kad panašūs elementai gali atsirasti ateityje - suteikite šiam elementui klasę. Jei esate tikri, kad toks elementas yra unikalus - tada suteikite jam id. Nors šiuo metu yra tendencija visiems elementams suteikti klasę, o id palikti JavaScript, tačiau ji nėra visuotinai priimta.

Elementui galima suteikti kelias klases, šiuo atveju jas reikia išvardinti per tarpą.

Klasių pavadinimai turi būti sudaryti iš anglų raidžių, skaičių, be tarpų (tarpas atskiria klases vieną nuo kitos, vietoj jo galima naudoti apatinį brūkšnį arba brūkšnį). Klasės neturėtų prasidėti skaičiumi (HTML5 jau galima, bet neveiks senose naršyklėse).

Klasėms pavadinimus reikėtų duoti anglų kalba (o ne rusiškai, tiesiog anglų raidėmis!). Pavadinimai turi būti prasmingi, atspindintys klasės esmę.

Pavyzdys

Visų pastraipų su klase test tekstui nustatykime raudoną spalvą:

<p class="test">Pastraipa su klase test.</p>
<p>Kontrolinė pastraipa be klasės.</p>

.test {
	color: red;
}

Pavyzdys . Kelios klasės elementui

O čia pirmai pastraipai suteikime kelias klases - test1 ir test2 (parašykime jas per tarpą). Klasė test1 nustato raudoną teksto spalvą, o klasė test2 nustato šrifto dydį iki 20px. Antrai pastraipai suteikta tik klasė test1 (ši pastraipa parausvės), o trečiai pastraipai - klasė test2 (ši pastraipa turės šrifto dydį 20px). Pirmoji pastraipa, kuriai suteiktos dvi klasės, turės ir raudoną spalvą, ir šrifto dydį 20px:

<p class="test1 test2">Pastraipa su dviem klasėmis test1 ir test2.</p>
<p class="test1">Pastraipa su klase test1.</p>
<p class="test2">Pastraipa su klase test2.</p>
<p>Kontrolinė pastraipa be klasių.</p>

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

Taip pat žiūrėkite

atributas id,
kuris nustato unikalius elementų identifikatorius