Atribut class

Atribut class določa enega ali več razredov za element (pod elementom se razume oznaka).

To se naredi zato, da se nato prek CSS dostopa do skupine elementov, ki imajo določen enak razred, in zanje uporabi določene lastnosti (na primer, spremeni barvo besedila, velikost pisave in tako naprej).

Obstaja tudi atribut id, ki podobno kot atribut class omogoča izbiro elementov na HTML strani.

Razlika med atributom class in atributom id je v tem, da class izbere skupino elementov (tudi če je dan enemu elementu - ga lahko kasneje damo tudi drugemu), medtem ko id izbere enoličen element (več elementov s takim id ne sme biti na strani spletnega mesta, sicer pride do konflikta).

Kako razumeti, kaj dati elementu - razred ali id? Razred se da elementom, ki se ponavljajo na straneh spletnega mesta (da se ne piše večkrat isto CSS kodo). Tudi če je trenutno ta element en sam, vendar čutite, da se lahko podobni elementi pojavijo v prihodnosti - dajte temu elementu razred. Če pa ste prepričani, da je tak element enoličen - mu dajte id. Čeprav trenutno obstaja težnja, da vsem elementom dajemo razred, id pa pustimo za JavaScript, vendar ni splošno sprejeta.

Elementu je mogoče določiti več razredov, v tem primeru jih je treba navajati ločene s presledkom.

Imena razredov morajo biti napisana z angleškimi črkami, številkami, brez presledkov (presledek ločuje razrede drug od drugega, namesto njega je mogoče uporabiti podčrtaj ali vezaj). Razredi ne smejo začeti s številko (v HTML5 je že mogoče, vendar ne bo delovalo v starih brskalnikih).

Imena razredom je treba dajati v angleškem jeziku (in ne v ruščini, preprosto z angleškimi črkami!). Imena morajo biti smiselna, odražati bistvo razreda.

Primer

Dajmo vsem odstavkom z razredom test določimo rdečo barvo besedila:

<p class="test">Odstavek z razredom test.</p>
<p>Kontrolni odstavek brez razreda.</p>

.test {
	color: red;
}

Primer . Več razredov za element

Tukaj pa dajmo prvemu odstavku določiti več razredov - test1 in test2 (zapišimo jih z presledkom). Razred test1 določa rdečo barvo besedila, razred test2 pa določa velikost pisave v 20px. Drugemu odstavku je dan samo razred test1 (ta odstavek postane rdeč), tretjemu odstavku pa - razred test2 (ta odstavek bo imel velikost pisave 20px). Prvi odstavek, ki ima dva razreda, bo imel hkrati tako rdečo barvo kot velikost pisave v 20px:

<p class="test1 test2">Odstavek z dvema razredoma test1 in test2.</p>
<p class="test1">Odstavek z razredom test1.</p>
<p class="test2">Odstavek z razredom test2.</p>
<p>Kontrolni odstavek brez razredov.</p>

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

Glejte tudi

atribut id,
ki določa enolične identifikatorje elementom