23 HTML atribuudid class ja id
Atribuut class
Atribuuti class saame kasutada mitme elemendi korraga stiliseerimiseks. Näiteks muudame iga teise tekstilõigu punaseks. Selleks määrame igale teisele tekstilõigule class atribuudi väärtusega “error” (või mõni muu vabalt valitud nimi) kujul:
class="nimi"
Pärast klassi nime määramist saame style elementi ja CSS-i kasutades kõiki sama nime omavaid elemente korraga stiliseerida.
CSS-iga klassinimedele viitamisel kasutatakse klassinime eest punkti.
<!DOCTYPE html>
<html>
<head>
<style>
.error {color: red;}
</style>
</head>
<body>
<p>See on tavaline tekst.</p>
<p class="error">See on punane tekst.</p>
<p>See on jällegi tavaline tekst.</p>
<p class="error">See on ka punane!</p>
</body>
</html>
Klassiatribuuti saame kasutada ka koos konteinerelementidega <div> ja <span>.
Näiteks muudame kahe pealkirja ja kahe tekstilõigu tausta siniseks, teksti valgeks ja lisame teksti ja tausta vahele natuke vaba ruumi kasutades elementi <div>:
<!DOCTYPE html>
<html>
<head>
<style>
.eriline {
background-color: blue;
color:white;
padding:10px;
margin-bottom:10px;
}
.tavaline{
padding:10px;
}
</style>
</head>
<body>
<div class="eriline">
<h1>Pealkiri 1</h1>
<p>Esimene tekstilõik</p>
</div>
<div class="eriline">
<h1>Pealkiri 2</h1>
<p>Teine tekstilõik</p>
</div>
<div class="tavaline">
<h1>Pealkiri 3</h1>
<p>Kolmas tekstilõik</p>
</div>
</body>
</html>
Või siis muudame mõned sõnad tekstilõigus punaseks kasutades elementi <span>:
<!DOCTYPE html>
<html>
<head>
<style>
.eriline {
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<p>See on <span class="eriline">tekst</span>, milles mõned sõnad on muudetud punaseks kasutades <span class="eriline">span</span> elementi ja <span class="eriline">class</span> atribuuti.</p>
</body>
</html>
Elemendid võivad korraga omada ka mitut class atribuudi poolt määratud nime. Sellisel juhul eraldatakse need tühikuga. Ülevalolevas näites, kus kahe pealkirja ja tekstilõigu taust oli muudetud siniseks, määrasime kahele erinevale klassinimele omaduseks polsterduse (padding) 10px. Proovime selle korduse koodist eemaldada kasutades mõnel elemendil kahte klassinime:
<!DOCTYPE html>
<html>
<head>
<style>
.eriline {
background-color: blue;
color:white;
margin-bottom:10px;
}
.tavaline{
padding:10px;
}
</style>
</head>
<body>
<div class="tavaline eriline">
<h1>Pealkiri 1</h1>
<p>Esimene tekstilõik</p>
</div>
<div class="tavaline eriline">
<h1>Pealkiri 2</h1>
<p>Teine tekstilõik</p>
</div>
<div class="tavaline">
<h1>Pealkiri 3</h1>
<p>Kolmas tekstilõik</p>
</div>
</body>
</html>
Tulemus on sama nagu üleeelmisel pildil näha.
Atribuut id
Ainult ühe elemendi või elemendi osa kujundamiseks saame kasutada id atribuuti, mille lisame elemendi algusmärgendisse. Näiteks soovime muuta ainult ühe kindla tekstilõigu siniseks:
<p>See on tavaline tekst.</p> <p id="sinine">See on sinine tekst.</p> <p>See on jällegi tavaline tekst.</p>
Seejärel määrame ära id-le “sinine” omase stiili. CSS-iga id-le viitamiseks kasutame id nime ees hashtag-i.
#sinine{
color: blue;
}
Kasutade id-sid saame rohkelt infot sisaldava lehele lisada järjehoidjaid. Selleks peame kõigepealt id-d kasutades lisama mõnele elemendile järjehoidja. Lisame järjehoidja näiteks viiendale peatükile:
<h2 id="p5">Viies Peatükk</h2>
Seejärel loome samal lehel lingi, mis viib meid eelpool viidatud peatüki juurde:
<a href="#p5">Vaata viiendat peatükki</a>
Või siis loome lingi mõnele teisele lehele, mis tooks meid peatükki sisaldava lehe ja peatükk viienda juurde:
<a href="index.html#p5">Mine viienda peatüki juurde</a>
