 | Peatüki sisukord |  |
5.3 Erinevad selektorid
Kõige tavalisemaks selektoriks ongi HTML elementide nimed nagu body või h1 või p.
Vahel harva võib vaja minna ka võimalust luua kujundus korraga kõigile HTML elementidele, sellisel juhul on selektoriks *:
*{
color: black;
}
Tihtipeale on vaja sama tüüpi HTML märgendile sama veebilehe sees erinevates osades teistsugust kujundust. Näiteks kui soovime kujundada ühel lehel erinevalt pealkirjasid, siis kasutatakse klasse. Selektori nime järgi lisatakse punkt ning klassi nimi:
selektor.klass {parameeter: väärtus}
Näiteks on osa pealkirjasid veebilehel kujundada punase värviga, rohelisega:
h1.esimene{background-color: red}
h1.teine{background-color: green}
Jäta meelde, et klassi nime ei tohi alustada numbriga! Selline klass ei tööta Mozilla Firefox brauseri kasutamisel!
Klasside (ehk kujunduse) kasutamiseks HTML dokumendis, tuleb vastavasse algusmärgendisse lisada atribuut class. Näiteks meie eelpool loodud klasside puhul:
<h1 class="esimene">Pealkiri 1</h1> <h1 class="teine">Pealkiri 2</h1>
Võib luua ka universaalseid klasse, mis ei ole seotud ühe kindla html elemendile nimega. Sellisel juhul tuleb css failis klassi nime ette panna punkt (e html elemendi nimi kirja panemata jätta):
.esimene{background-color: red}
.teine{background-color: green}
Loomulikult võib ka mitmele klassile korraga nende ühiseid omadusi kirja panna. Selleks kirjutatakse soovitud klassid komadega eraldatult üksteise järele. Näiteks:
.kolmas, .neljas{
font-family:"Comic Sans MS", Verdana;
}
Kujunduse saab luua ka kindlat identifikaatorit omavale objektile, mille algusmärgendis on id
atribuut:
| Peatüki sisukord | |