Klassid ja pseudoklassid

Klassid

Siiani oleme tegelenud kujunduse määramisega kõigile ühte ja sama tüüpi HTML elementidele. Oleme kirjeldanud stiile, mis määravad et kõik HTML dokumendis olevate lõikude tekst on sinist värvi. Tihti ei saa aga kujundust nii üldiselt määratleda. Eelnevaid koodinäiteid aluseks võttes võib tekkida olukord, kus veebilehel peab esimese sissejuhatava lõigu tekst olema punane, kõik ülejäänud aga sinised.

CSS-is kasutatakse selleks HTML-elementide rühmitamist. Sääraseid ühte rühma ja seeläbi ka sarnast välimust omavaid elementide kogumeid nimetatakse klassideks. Klassidele saab seega stiilifailis omistada mingit kindlat kujundust.

Olgu meil seega HTML dokumendis tehtud kolm lõiku, esimene lõik sisaldab sissejuhatavat teksti, teised kaks on sisuteksti lõigud:

...
<body>
	<h1>See on lehekülje suur pealkiri</h1>
	<p class="sissejuhatus">Siia lõiku on kirjutatud sissejuhatav tekst</p>
	<p class="sisu">See on esimene tekstilõik artikli sisuga</p>
	<p class="sisu">See on teine tekstilõik, mis sisaldab artikli sisu</p>
</body>
...

HTML elementide rühmitamiseks lisatakse neile juurde parameeter class, jutumärkide vahele kirjutatakse rühma nimetus, kuhu antud element kuuluma peab. Näites on seega tekitatud lõikudest kaks rühma, ühe nimi on sissejuhatus ja teise nimi sisu. Esimesse rühma kuulub ainult üks lõik, teise rühma kaks tekstikõiku.

Nagu näha, on rühmade nimed vabalt valitavad, kasutada ei tohiks täpitähti ega mingeid muid erisümboleid.

Kujunduse rakendamiseks tuleb dokumendifailile juurde kirjutada ka vastav stiilifail või lisada need käsud HTML-faili <head>-osasse <style>-märkide vahele:

p.sissejuhatus {color: red}
p.sisu {color: blue}

Eraldiseisva stiilifaili kasutamise korral tuleb see fail ka dokumendile lisada, lisades <head>-osasse vastava viite:

<link rel="stylesheet" type="text/css" href="stiilifaili_nimi" />

Pseudoklassid

Lisaks tavalistele HTML elementide rühmadele, saab mõnel juhul määrata kujundust ka muude, mitte elemendi nimest ega sisust tulenevate omaduste põhjal. Näiteks tähistatakse HTML keeles kõiki linke märgendiga <a>…</a>, ning antud lingid võivad moodustada erinevaid rühmi (klasse). Sageli on lingid rühmitatud pealinkideks ja alamlinkideks. Kõikidel lingitüüpi elementidel on aga mitu olekut

Link võib olla:

Säärased olekud ei ole seotud ei konkreetse lingi ega tema sisuga ning nende kirjeldamiseks ongi CSS-s kasutusel pseudoklassid. HTML-koodis pseudoklasse ei eksisteeri, sest dokumendi ülesehitust nad ei muuda (muudavad vaid välimust, HTML on aga keel dokumendi struktuuri kirjeldamiseks).

Näitena tekitame lingi, mis:

HTML-dokument näeb välja suhteliselt lihtne:

<a href="http://study.risk.ee" class="pealink">See on link</a>

Lingile on lisatud ka klassi tähis, paigutades ta rühma pealink. CSS failis on ära kirjeldatud eelpool märgitud olukorrad:

a.pealink:link {color: green}			/* Vaikimisi värvus */
a.pealink:active {color: red}			/* Värvus hiirega klikkimisel */
a.pealink:visited {color: gray}			/* Külastatud lingi värvus */
a.pealink:hover {text-decoration: none}		/* Hiirega osutades eemaldatakse joon */

Pseudoklassid kirjutatakse seega kooloniga klassi nime järele. Suvalisele HTML elemendile pseudoklasse määrata ei saa, see sõltub ikkagi konkreetse HTML elemendi omadustest. Näiteks ei ole võimalik pildile määrata pseudoklassi visited, sest erinevalt veebilehest ei ole pilti võimalik külastada.