Class-attribuutti

Attribuutti class määrittää yhden tai useamman luokan elementille (elementillä tarkoitetaan tagia).

Tämä tehdään sen vuoksi, että voidaan myöhemmin viitata CSS:n kautta elementtiryhmään, jolla on sama luokka määritettynä, ja soveltaa sille tiettyjä ominaisuuksia (esimerkiksi vaihtaa tekstin väriä, fontin kokoa ja niin edelleen).

On olemassa myös attribuutti id, joka kuten attribuutti class mahdollistaa elementtien valitsemisen HTML-sivulta.

Ero attribuutin class ja attribuutin id välillä on, että class valitsee ryhmän elementtejä (vaikka se annettaisiin yhdelle elementille - se voidaan myöhemmin antaa myös toiselle), kun taas id valitsee yksilöllisen elementin (sivulla ei saa olla muuta elementtiä samalla id:llä, muuuten tulee ristiriita).

Miten ymmärtää, antaako elementille luokan vai id:n? Luokka annetaan niille elementeille, jotka toistuvat sivuston sivuilla (jotta ei tarvitse kirjoittaa samaa CSS-koodia useita kertoja). Vaikka sinulla on tällä hetkellä kyseinen elementti vain yksi, mutta tunnet, että vastaavia elementtejä voi ilmaantua myöhemmin - anna tälle elementille luokka. Jos olet varma, että tällainen elementti on ainutlaatuinen - anna sille id. Vaikka nykyään on taipumus antaa kaikille elementeille luokka, ja jättää id JavaScriptiä varten, se ei ole yleisesti hyväksytty.

Elementille voidaan antaa useita luokkia, tässä tapauksessa ne tulee luetella välilyönnillä erotettuina.

Luokkien nimet on kirjoitettava englannin kielen kirjaimin, numeroin, ilman välilyöntejä (välilyönti erottaa luokat toisistaan, sen sijaan voidaan käyttää alaviivaa tai väliviivaa). Luokkien ei pitäisi alkua numerolla (HTML5:ssa se on jo mahdollista, mutta se ei toimi vanhoissa selaimissa).

Luokkien nimet tulee antaa englannin kielellä (eivätkä venäjäksi, vain englannin kielen kirjaimin!). Nimien tulee olla mielekkäitä, heijastaa luokan olemusta.

Esimerkki

Annetaan kaikille kappaleille, joilla on luokka test, punainen tekstin väri:

<p class="test">Kappale, jolla on luokka test.</p>
<p>Vertailukappale ilman luokkaa.</p>

.test {
	color: red;
}

Esimerkki . Useita luokkia elementille

Tässä annetaan ensimmäiselle kappaleelle useita luokkia - test1 ja test2 (kirjoitetaan ne välilyönnillä erotettuina). Luokka test1 asettaa punanisen tekstin värin, ja luokka test2 asettaa fontin kooksi 20px. Toiselle kappaleelle annetaan vain luokka test1 (tästä kappaleesta tulee punainen), ja kolmannelle kappaleelle - luokka test2 (tällä kappaleella on fontin koko 20px). Ensimmäinen kappale, jolla on kaksi luokkaa, on samanaikaisesti sekä punainen että fontin koko on 20px:

<p class="test1 test2">Kappale, jolla on kaksi luokkaa test1 ja test2.</p>
<p class="test1">Kappale, jolla on luokka test1.</p>
<p class="test2">Kappale, jolla on luokka test2.</p>
<p>Vertailukappale ilman luokkia.</p>

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

Katso myös

attribuutti id,
joka asettaa elementeille yksilölliset tunnisteet