VeebiABC


< 4.4.9. Elemendi ümbrus | Sisukord | 5. Kujunduse ja hea tooni ABC >

4.5. Pseudoklassid

Pseudoklassid võimaldavad lisada erinevaid efekte mingitele selektoritele või nende osadele. Käesolevas materjalis piirdume pseudoklasside kõige vanema rakendusega - erinevate stiilide määramisega viidetele vastavalt nende staatusele (külastamata, külastatud, aktiivne). Pseudoklassi üldkuju on järgmine:



selektor:pseudoklass { omadus: väärtus }

Seega viitemärgendi <a> puhul võime defineerida viite eri olekud näiteks nii:


a:link { color: blue }
a:visited {color: gray }
a:active { color: purple }

4.6. Klassid ja instantsid

Pseudoklassidest oli juba juttu, nüüd siis räägime "päris" klassidest... Klass on meetod, mis võimaldab

  1. defineerida ühe märgendi tarvis mitu erinevat stiili ja kasutada neid siis koos klassikuuluvuse äranäitamisega (näiteks võivad samas dokumendis olla kasutusel klassid "punane lõik" ja "sinine lõik" - mõlemad kasutavad <p>-märgendit)
  2. defineerida märgendist sõltumatuid stiile, mida saab kasutada mistahes märgendiga või ka iseseisvalt.

Eespoolmainitud punase ja sinise lõigu saame defineerida nii:


p.punane {color: red}
p.sinine {color: blue}

Nende kasutamine käib nii:


<p>Tavaline must tekst</p>
<p class="punane">punane tekstilõik</p>
<p class="sinine">sinine tekstilõik</p>
<p>Jälle tavaline tekst</p>

NB! Korraga saab kasutada vaid üht klassi!

Sõltumatu klassi näitena võime defineerida klassi "alarm", mis kuvab kollase suurtähtedes teksti punasel taustal. Definitsioon on järgmine:


.alarm { color: yellow; background: red; text-transform: uppercase }


<p class="alarm"> api api! Se olen mina Nodsu api api!</p>
<h1 class="alarm">Häire!</h1>

Tulemus on selline:

api api! Se olen mina Nodsu api api!

Häire!

NB! Paneme tähele, et lõigumärgendi korral värvitakse taust ära kuni rea lõpuni.

Lisaks on võimalik rakendada sõltumatut klassi mistahes tekstilõigule, kasutades <span>-märgendit:


<p>Avariiolukorras vajutage <span class="alarm">Häire</span>-nupule.</p>

Tulemus on selline:

Avariiolukorras vajutage Häire-nupule.

Instants (id) sarnaneb klassile, kuid teda kasutatakse lehel vaid üks kord. Seega saame defineerida erinevad instantsid erinevatele tekstilõikudele ja rakendada neile eri stiile. Näiteks defineerime lõiguinstantsi SuurSinine:


p#SuurSinine { font-size: x-large; color: blue }

Selle stiili kasutamiseks peame kirjutama vastava lõigu nii:


<p id="SuurSinine">Suur ja sinine lõik</p>

NB! Stiili kasutamiseks peab kokku langema nii märgend (<p>) kui ka instantsinimi (SuurSinine). Näiteks järgmine rida seda stiili kasutada ei saa - märgend on teine:


<h2 id="SuurSinine">See ei ole suur ja sinine</h2>

Instantsi saab defineerida ka (sarnaselt sõltumatu klassiga) märgendist sõltumatuna - sel juhul rakendatakse seda esimesele sama instantsinimega kohale. See defineeritakse nii:


*#PaksPunane {font-weight: bold; color: red }


< 4.4.9. Elemendi ümbrus | Sisukord | 5. Kujunduse ja hea tooni ABC >

Copyright © 2003-2019 Kaido Kikkas.
Käesoleva dokumendi paljundamine, edasiandmine ja/või muutmine on
sätestatud GNU Vaba Dokumentatsiooni Litsentsiga (versioon 1.2 või uuem).
Litsentsi ingliskeelne täistekst