Atribūts class

Atribūts class norāda vienu vai vairākas klases elementam (ar elementu saprotama atbilstošā iezīme).

Tas tiek darīts, lai pēc tam varētu piekļūt caur CSS pie elementu grupas, kuriem ir norādīta viena un tā pati klase, un piemērot tai noteiktus īpašības (piemēram, mainīt teksta krāsu, fonta izmēru un tā tālāk).

Pastāv arī atribūts id, kas līdzīgi kā atribūts class ļauj atlasīt elementus HTML lapā.

Atšķirība starp atribūtu class un atribūtu id ir tāda, ka class atlasa elementu grupu (pat ja tas ir dots vienam elementam - to pēcāk var dot arī citam), bet id atlasa unikālu elementu (vairāk elementu ar tādu id nedrīkst būt vietnes lapā, pretējā gadījumā radīsies konflikts).

Kā saprast, ko dot elementam - klasi vai id? Klase tiek dota tiem elementiem, kas atkārtojas vietnes lapās (lai vairākas reizes nerakstītu to pašu CSS kodu). Pat ja jums šobrīd šis elements ir viens, bet jūs jūtat, ka līdzīgi elementi var parādīties turpmāk - dodiet šim elementam klasi. Ja gan jūs esat pārliecināts, ka šāds elements ir unikāls - tad dodiet tam id. Lai gan pašlaik pastāv tendence, ka visiem elementiem tiek dotas klases, bet id tiek atstāts JavaScript, tā nav vispārpieņemta.

Elementam var norādīt vairākas klases, šajā gadījumā tās jāuzskaita atdalot ar atstarpi.

Klašu nosaukumiem jābūt rakstītiem ar latīņu burtiem, cipariem, bez atstarpēm (atstarpe atdala klases vienu no otras, tās vietā var izmantot apakšsvītru vai defisi). Klasēm nevajadzētu sākties ar cipari (HTML5 tas jau ir atļauts, bet nestrādās vecās pārlūkprogrammās).

Klašu vārdi jāizvēlas angļu valodā (nevis krieviski, tikai latīņu burtos!). Vārdiem jābūt jēgpilniem, jāatspoguļo klases būtību.

Piemērs

Uzstādīsim visiem rindkopām ar klasi test sarkano teksta krāsu:

<p class="test">Rindkopa ar klasi test.</p>
<p>Kontroles rindkopa bez klases.</p>

.test {
	color: red;
}

Piemērs . Vairākas klases elementam

Šeit dosim pirmajai rindkopai vairākas klases - test1 un test2 (ierakstīsim tās atdalot ar atstarpi). Klase test1 uzstāda sarkano teksta krāsu, bet klase test2 uzstāda fonta izmēru uz 20px. Otrajai rindkopai tiek dota tikai klase test1 (šī rindkopa kļūs sarkana), bet trešajai rindkopai - klase test2 (šai rindkopai būs fonta izmērs 20px). Pirmā rindkopa, kurai ir divas klases, vienlaikus būs gan sarkanas krāsas, gan ar fonta izmēru 20px:

<p class="test1 test2">Rindkopa ar divām klasēm test1 un test2.</p>
<p class="test1">Rindkopa ar klasi test1.</p>
<p class="test2">Rindkopa ar klasi test2.</p>
<p>Kontroles rindkopa bez klasēm.</p>

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

Skatiet arī

atribūts id,
kas norāda unikālus identifikatorus elementiem