Atribuut class

Atribuut class määrab ühe või mitu klassi elemendile (elemendi all mõeldakse siin silti).

See tehakse selleks, et seejärel pöörduda CSS-i kaudu elementide grupi poole, kellel on määratud sama klass, ja rakendada sellele kindlaid omadusi (näiteks muuta teksti värvi, fondi suurust jne).

Samuti on olemas atribuut id, mis sarnaselt atribuudiga class võimaldab valida elemente HTML-lehel.

Erinevus atribuudi class ja atribuudi id vahel on selles, et class valib grupi elemente (isegi kui see on antud ühele elemendile - seda saab hiljem anda ka teisele), aga id valib unikaalse elemendi (rohkem sellise id-ga elemente ei tohiks lehel olla, muidu tekib konflikt).

Kuidas aru saada, mida elemendile anda - klassi või id? Klass antakse neile elementidele, mis kordavad veebilehtedel (et mitte kirjutada mitu korda sama CSS-koodi). Isegi kui teil on praegu see element üks, kuid te tunnete, et sarnased elemendid võivad hiljem tekkida - andke sellele elemendile klass. Kui aga te olete kindel, et selline element on unikaalne - siis andke talle id. Kuigi praegusel ajal on kalduvus anda kõikidele elementidele klass, ja id jätta JavaScripti jaoks, ei ole see üldiselt aktsepteeritud.

Elemendile saab määrata mitu klassi, sel juhul tuleb need loetleda tühikuga eraldatuna.

Klasside nimed peavad olema kirjutatud inglis tähtedega, numbritega, ilma tühikuteta (tühik eraldab klassid üksteisest, selle asemel saab kasutada allkriipsu või sidekriipsu). Klassid ei tohi algada numbriga (HTML5-s juba saab, kuid see ei toimi vanemates brauserites).

Klasside nimesid tuleks anda inglise keeles (mitte vene keeles, lihtsalt inglise tähtedega!). Nimed peaksid olema mõtestatud, peegeldama klassi olemust.

Näide

Anname kõikidele klassiga test lõikudele punase teksti värvi:

<p class="test">Lõik klassiga test.</p>
<p>Kontrolllõik ilma klassita.</p>

.test {
	color: red;
}

Näide . Mitu klassi elemendile

Siin anname esimesele lõigule mitu klassi - test1 ja test2 (kirjutame need tühikuga eraldatuna). Klass test1 määrab punase teksti värvi, ja klass test2 määrab fondi suuruse 20px-ni. Teisele lõigule anti ainult klass test1 (see lõik muutub punaseks), ja kolmandale lõigule - klass test2 (sellel lõigul on fondi suurus 20px). Esimene lõik, millel on kaks klassi, on korraga nii punase värviga kui ka fondi suurusega 20px:

<p class="test1 test2">Lõik kahe klassiga test1 ja test2.</p>
<p class="test1">Lõik klassiga test1.</p>
<p class="test2">Lõik klassiga test2.</p>
<p>Kontrolllõik ilma klassita.</p>

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

Vaata ka

atribuut id,
mis määrab elementidele unikaalsed identifikaatorid