HTML & CSS za začetnike (del 26): Tako deluje dostop s selektorji (1)

Selektorji določajo, na kakšen način se CSS slogi dodelijo HTML elementom. Pri ustrezni definiciji najprej navedemo ime elementa, do katerega naj selektor dostopa. Dejanska deklaracija se nato izvede znotraj zavitih oklepajev. V deklaraciji se lahko navede ena ali več lastnosti. Splošna sintaksa je torej naslednja:

Selektor {
   Lastnost1: Vrednost;
   Lastnost2: Vrednost;
   Lastnost3: Vrednost;
}

Ustrezen primer ste že srečali v prejšnjem vadnem gradivu.

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

Poskrbite, da bo vsaka deklaracija zaključena s podpičjem.

Pogled na razpoložljive selektorje

CSS dejansko ponuja precejšnje število selektorjev, od katerih vam bom predstavil najpomembnejše. Kajti eno je jasno: Le če obvladate delo s selektorji, lahko ustrezno določite CSS lastnosti.

Najlažji način za dodeljevanje slogov znotraj HTML dokumenta je preko Element-Selektorja.

Z naslednjo sintakso bo vsem elementom p dodeljena črna barva.

p { 
   color: #009966; 
}

Če želite dodeliti isti slog več elementom, je to prav tako mogoče.

V tem primeru preprosto naštejte ustrezne elemente enega za drugim, ločene z vejico.

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

Elementom lahko dodelite tudi več slogov. Slogi so ločeni z podpičjem.

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

Možna je tudi kombinacija navedenih variant.

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

Rezultat bi lahko bil videti takole:

Območja z več elementi

Pogosto je potrebno oblikovati območje, ki je sestavljeno iz več HTML elementov. Za takšne primere v HTML obstajata dva posebna elementa: span in div. Ta elementa se bosta – mimogrede tudi v tej seriji – vedno znova pojavljala.

Primer:

<div class="artikel">
  <h1>Barvni pojav</h1>
  <p class="thema">Vodnik za ustvarjanje barvnega pojava od <span class="autor">MarkusMelzer</span>.</p>
</div>

Edina razlika med div in span je v tem, da div element v besedilnem toku ustvari novo vrstico. Span pa ne ustvarja nove vrstice. V prikazanem primeru je določeno območje div, v katerem je naslov in odstavek. V odstavku pa je span območje.

ID- in razredni selektorji

Do zdaj smo uporabljali elementne selektorje. S tem primerom bodo vsi naslovi h1 oblikovani z elementnim selektorjem.

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

To seveda ni vedno želeno. Kaj na primer, če želite določenim, vendar ne vsem naslovom h1 dodeliti določene lastnosti? Za takšne primere CSS ponuja dve možnosti, in sicer razredne in ID selektorje.

Z razrednimi selektorji lahko selektirate HTML elemente z atributi razredov. V posameznem HTML elementu je treba navesti atribut class. Definicije razredov se začnejo z piko.

Primer:

.rdece { 
   color: red; 
}

Za razred rdece je bil določen. Da dodamo rdeče dodeljene lastnosti HTML elementu, navedemo class in nato ime razreda.

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

ID selektor lahko uporabimo na podoben način. ID selektor je prepoznaven po dvojnem križu.

#topnavi { 
   color: blue; 
};

V tem primeru je bil določen ID topnavi. Vendar bodite pozorni: ID se v dokumentu lahko dejansko dodeli samo enkrat. Dostop do določene lastnosti ID bo potem izgledal takole:

<div id="topnavi">Tukaj je navigacija</div>

Attribut id dodeli ime ID. Pazite, da tukaj ne pišete dvojne pomišljaje.





Prikazane informacije je mogoče tudi kombinirati. Tako lahko na primer HTML elementu dodelite več razredov.

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

V tem primeru sta besedi rdece in veliko dodeljeni odstavku. Če želite navesti razred in ID, zgleda takole:

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

Elemente in ID-je je mogoče kombinirati. Tukaj je še en primer:

div.navi { 
   color: modra; 
}

Ta sintaksa velja samo za div elemente s razredom navi. Odstavki, ki imajo prav tako razred navi, ne bi bili prizadeti.

V CSS obstaja še en način kombiniranja selektorjev. Oglejte si to sintakso:

h1 { 
   color: rdeča;
}
em { 
   color: modra; 
}

Vsem naslovom prve stopnje je dodeljena rdeča barva. em elementi pa dobijo modro barvo.

Z združitvijo obeh navodil lahko poskrbite, da bodo modri samo em elementi, ki se nahajajo znotraj h1 elementov.

h1 em { 
   color: modra; 
};

Imena elementov niso zapisana drug ob drugem brez vejice.

To je sicer priljubljena past, v katero se pogosto ujamete tudi začetniki v CSS. Tu je enaka sintaksa, vendar je bila vstavljena vejica:

h1, em { 
   color: modra; 
}

Kaj pomeni ta sintaksa? Ansprežene so vse h1 in vse em elemente. To je torej nekaj povsem drugega kot sintaksa brez vejice!

Še en pomemben selektor je univerzalni selektor. Ta omogoča izbiro kateregakoli elementa. Definira se prek zvezdice.

* { 
   color: rdeča; 
}

Za to sintakso bi bili vsi elementi obarvani rdeče. Tudi pri tem selektorju je treba upoštevati nekaj posebnosti glede sintakse.

#mainnavi * { 
   color: rdeča; 
}

V tem primeru je barva besedila vseh elementov znotraj elementa z ID mainnavi nastavljena na rdeče. To pa ne velja za sama element.

Če bi bil univerzalni selektor na začetku deklaracije, ga sploh ne bi bilo treba zapisati. Takole bi bilo torej odveč:

* p { 
   color: rdeča; 
}

Ta sintaksa je enakovredna naslednji:

p { 
   color: rdeča; 
}

V naslednjem vadnem posnetku boste spoznali dodatne selektorje.