HTML & CSS algajatele (Osa 26): Valikute käsitlemine valijatega (1)

Valijad määravad, millisel viisil CSS-stiilid määratakse HTML-elementidele. Vastava määratluse korral määratakse kõigepealt element, millele valija peaks pääsema. Tegelik deklaratsioon toimub seejärel kaldkriipsuvtirnade sees. Deklaratsiooni sees saab määrata ühe või mitu omadust. Üldine süntaks näeb välja järgmine:

Valija {
   Omand1: Väärtus;
   Omand2: Väärtus;
   Omand3: Väärtus;
}

Vastav määratlus on teile juba eelnevas õpetuses vastu tulnud.

h1 {
   font-family:"Courier New", Courier, monospace;
   font-size: 200%;
}

Olete kindlasti tähelepannud, et iga deklaratsioon tuleb lõpetada semikooloniga.

Vaadake saadaval olevaid valijaid

Tegelikult on CSS-il palju erinevaid valijaid, millest ma tutvustan teile olulisemad. Sest üks asi on selge: ainult valijatega tööd mõistes saab CSS-omadused mõistlikult määratleda.

Kõige lihtsam võimalus määrata stiile HTML-dokumendis on elemendivalija abil.

Järgmise süntaksiga määratakse kõikidele p-elementidele must värv.

p { 
   color: #009966; 
}

Kui soovite mitmele elemendile määrata sama stiili, on see samuti võimalik.

Sel juhul märkige lihtsalt vastavad elemendid järjestikku komaga eraldatult.

p, h1,  li { 
   color: #000; 
}

Teile saab määrata ka mitu stiili. Stiilid tuleb märkida semikoolonitega eraldatult.

p { 
   color: #000; 
   background-color: red;
}

Samuti on võimalik kasutada eespool nimetatud variante kombinatsioonis.

p, h1,  li { 
   color: #009966; 
   background-color: red;
}

Tulemus võib näida järgmine:

Valdkonnad mitme elemendiga

Sageli on vaja vormindada ala, mis koosneb mitmest HTML-elementidest. Sellistel juhtudel on HTML-is kaks spetsiaalset elementi: span ja div. Neid elemente kohtate – muide, ka selles seerias – korduvalt.

Näide:

<div class="artikel">
  <h1>Värvilõõm</h1>
  <p class="thema">Õpetus värvilõõma loomiseks <span class="autor">MarkusMelzer</span> poolt.</p>
</div>

Ainus erinevus div ja span vahel on see, et div-element sunnib tekstivoolus uut rida. span seevastu ei tekita uut rida. Näites on defineeritud div-valdkond, kus on pealkiri ja tekstilõik. Tekstilõigus on omakorda span-valdkond.

ID- ja klassivalijad

Seni on kasutatud elemendivalijaid. Järgmise näite tulemusel vormindatakse kõik h1 pealkirjad selle valijaga.

h1 { 
   color: #000; 
   background-color: red;
}

Kuid see pole alati soovitud viis. Mis juhtub näiteks siis, kui soovite määrata teatud omadusi vaid ühele või mõnele, kuid mitte kõigile h1 veergudele? Sellistel juhtudel pakub CSS kahte võimalust: klassi- ja ID-valijaid.

Klassivalijatega saab selekteerida HTML-elemente klassi atribuutide alusel. Vastavas HTML-elemendis tuleb selleks määrata atribuut class. Klassidefinitsioonid algavad punktiga.

Näide:

.punane { 
   color: red; 
}

Siin on defineeritud klass punane. Punasele määratud omaduste lisamiseks HTML-elemendile tuleb märkida class, millele järgneb klassinimi.

<p class="punane">PSD-Tutorials.de</p>

ID-valijat saab kasutada sarnaselt. ID-valijat saab tuvastada kahe ristiga.

#ylalinki { 
   color: blue; 
};

Antud näites on defineeritud ID ylalinki. Kuid tähelepanu: ID-d võib dokumendis tegelikult määrata vaid ühe korra. Juurdepääs määratud ID-omadusele näeb välja järgmine:

<div id="ylalinki">Siin on navigeerimine</div>

Atribuudile id määratakse ID-nimi. Olge ettevaatlik, et siin ei kirjutataks ristkriipsu.





Näidatud andmeid saab omavahel kombineerida. Näiteks võib ühele HTML-elementidele määrata mitu klassi.

<p class="rot gross">PSD-Tutorials.de</p>

Selles näites määratakse tekstiplokile kaks klassi rot ja gross. Kui soovite määrata klassi ja ID, siis see näeks järgmiselt välja:

<p class="rot" id="navi">PSD-Tutorials.de</p>

Samuti on võimalik elemente ja ID-sid omavahel kombineerida. Siin on üks näide:

div.navi { 
   color: blue; 
}

See süntaks kehtiks ainult div-elementidele, millel on navi klass. p-elementidel, mis omavad samuti navi klassi, ei oleks sellest mõjutatud.

CSS-is on veel üks selektorite kombinatsioonitüüp. Selleks vaadake järgmist süntaksit:

h1 { 
   color: red;
}
em { 
   color: blue; 
}

Sellega antakse kõikidele esimese taseme pealkirjadele punane värv. em-elementidele antakse aga sinine värv.

Kahe juhise kombineerimisega saab tagada, et ainult em-elemendid, mis on h1-elementide sees, oleksid sinised.

h1 em { 
   color: blue; 
};

Elementide nimed tuleb siin eraldada üksteisest komadeta.

See on tegelikult populaarne vigalõks, millesse eriti CSS-i algajad võivad sattuda. Siin on sama süntaks, kus siiski on komaga:

h1, em { 
   color: blue; 
}

Mis tähendab see süntaks? Mõjutatakse kõiki h1- ja em-elemente. See on midagi täiesti erinevat, kui süntaks ilma komata!

Veel üks oluline valija on universaalne valija. See võimaldab valida suvalise elemendi. Selle valija määratletakse tähega Asterisk.

* { 
   color: red; 
}

Selle süntaksiga muudetakse kõik elemendid punaseks. Selle valija puhul tuleb arvestada taas mõningate süntaksieripäradega.

#mainnavi * { 
   color: red; 
}

Selles näites seatakse kõikide elementide eesilma värv elemendid, mis on mainnavi ID-ga elemendi sees, on punaseks seadistatud. See ei kehti aga elemendi enda kohta.

Kui universaalne valija oleks deklaratsiooni alguses, poleks seda üldse vaja märkida. Midagi sellist oleks siis tarbetu:

* p { 
   color: red; 
}

See süntaks on samaväärne järgmisega:

p { 
   color: red; 
}

Järgmises õpetuses õpite veel teisi valijaid tundma.