Hitra šola CSS

Selektorji

Selektorji so osnova CSS-a!

Vzorci

Selektorji niso nujno kar enaki elementom v izvornem dokumentu. Pravzaprav so lahko selektorji dokaj kompleksni vzorci. Naloga CSS agenta je, da za vsak element izvornega dokumenta najde selektor, ki mu ustreza (če selektor sploh obstaja!). Pri iskanju ustreznega selektorja ne pozabite na velikost črk! Če je izvorni dokument XML, potem je velikost pomembna, če pa je izvorni dokument HTML, velikost pač ni pomembna!

vzorci

VZOREC         | POMEN
------------------------------------------------------------------------
*              | ustreza vsakemu elementu
E              | ustreza elementu E
E F            | ustreza elementu F, ki je znotraj elementa E
E>F            | ustreza elementu F, ki je otrok elementa E
E+F            | ustreza elementu F, ki neposredno sledi elementu E in imata oba
               |         istega očeta
E:link         | ustreza elementu E, če je to povezava, ki še ni bila obiskana
E:hoover       | ustreza elementu E, če je to povezava, ki je že bila obiskana
E[abc]         | ustreza elementu E z atributom abc
E[abc="nekaj"] | ustreza elementu E z atributom abc, ki ima vrednost nekaj
E[abc~="nekaj"]| ustreza elementu E z atributom abc, ki vsebuje seznam vrednosti
               |         izmed katerih je vsaj ena enaka nekaj
E#nekaj        | ustreza elementu E z atributom ID, ki ima vrednost nekaj
E.nekaj        | velja samo za HTML dokumente in določa tisti element E, ki ima
               |         atribut class enak nekaj (<E class="nekaj">)

Združevanje

Če ima več selektorjev isti deklaracijski blok, jih lahko združimo, tako, da jih ločimo z vejico.

Ta CSS	je enakovreden temu:
H1 { color: blue } H2 { color: blue } H3 { color: blue } H4 { color: blue }	H1, H2, H3, H4 { color: blue }

Vsebovani elementi

Včasih je potrebno CSS agentu povedati, naj vse elemente tipa A, ki se nahajajo znotraj tipa B, prikaže na poseben način. Recimo, da želimo naslove in programsko kodo v modri barvi. Na ta način se bo programska koda lepo videla v črnem tekstu:

Modri naslovi in programska koda [Ogled]

H1   { color: blue }
CODE { color: blue }

Kaj pa tedaj, ko je programska koda znotraj naslova (kot je to v drugem naslovu v podanem primeru). V tem primeru pa želimo to programsko kodo v recimo, črni barvi, ki bo tako izstopala iz modrega naslova:

Kaj če je programska koda vsebovana v naslovu [Ogled]

H1      { color: blue  }
CODE    { color: blue  }
H1 CODE { color: black } /* če je programska koda v naslovu, naj bo črna! */

Pazite pri uporabi vejice oz. presledka. Če med selektorjema uporabite vejico, ju s tem združite (kot je vidno zgoraj). Če pa med njima ni vejice, pomeni, da želite določiti vsebovane elemente oz., da naj CSS agent išče relacije med elementi

Otroci

Tudi tukaj bomo govorili o situaciji, kjer so pomembne relacije elementov v dokumentu.

Vsi elementi <p>, ki so otroci elementa <div> naj bodo rdeče barve!

DIV > P { color: red  }

Če imata E1 in E2 istega očeta in se E2 nahaja naposredno za E1 potem naj bo modre barve

E1 + E2 { color: blue  }

Opisan operatorja (za delo z otroci elementov) v večini produktov še nista implementirana!

Selektorji z atributi

Tudi za te velja, da jih trenutni brkljalniki še ne poznajo, zato jih ne bom podrobneje opisoval. Poznajo pa atribute class in ID, ki jih bom podrobneje prikazal!

V tabeli na vrhu poglavja smo spoznali, da lahko nek element določimo tudi na osnovi njegovih atributov. V trenutnih implementacijah CSS je to pravzaprav omejeno na dva atributa in to sta atributa class in ID.

Uporaba atributov class in ID ([Ogled])

<html>

<style type="text/css">
    /* vsi el. div z atr. class="div1" naj bodo rdeči */
  div.div1 { color: red;    }
  
    /* vsi el. div z atr. class="div2" naj bodo modri */
  div.div2 { color: blue;   }

    /* vsi el. div z atr. id="div1" naj bodo zeleni */
  div#div1 { color: green;  }

    /* vsi el. div z atr. id="div2" naj bodo rumeni */
  div#div2 { color: yellow; }

    /* POZOR! vsi elelementi z atr. class="div3" naj bodo zlati */
  .div3    { color: gold; }
</style>

  <body>
    <div class="div1">   div class="div1"  </div>
    <div class="div2">   div class="div2"  </div>
    <div class="div3">   div class="div3"  </div>
    <div ID   ="div1">   div ID="div1"     </div>
    <div ID   ="div2">   div ID="div2"     </div>
    <div ID   ="div3">   div ID="div3"     </div>
    <div class="div2">   div class="div2"  </div>
    <div ID   ="div1">   div ID="div1"     </div>
    <div class="div3">   div class="div3"  </div>
    <div class="div2">   div class="div2"  </div>
    <p   class="div3">   p class="div3"    </p>
    <h1  class="div3">   h1 class="div3"   </h1>		
  </body>
</html>

Opozoril bi predvsem na zadnje pravilo .div3 {color: gold}, ki uporablja univerzalni selektor in pravi naj bodo vsi elementi, katerih atribut class ima vrednost div3 zlate barve. To se na primeru tudi lepo vidi, saj sta tudi elementa p in h1 zlato obarvana.

Pri univerzalnem selektorju bi opozoril še na majhno podrobnost. Povsem na vrhu smo kot univerzalni selektor spoznali zvezdico (*). Torej bi v primeru moralo pisati *.div3 {color: gold}. Toda zvezdice (*) ni potrebno pisati, ker se v primeru praznega selektorja privzame (*).

Psevdo atributi `:link`, `:visited`, `:hover`, `:active`, `:focus`,

Tem atributom pravim psevdo atributi, ker niso zapisani v dokumentu samem, temveč so odvisni od uporabe dokumenta. Vse se navezujejo na HTML element <a>, ki določa skok.

:link pove, kako naj se prikaže element a, če uporabnik še ni skočil na stran, na katero skok kaže!
:visited pove, kako naj se prikaže element a, če je uporabnik že skočil na stran, na katero skok kaže!
:hover pove kako, naj se prikaže element a, če se miška nahaja nad njim!
:active pove kako, naj se prikaže element a, v času, ko je aktiven (v času ko uporabnik pritisne in spusti miško!
:focus pove kako, naj se prikaže element a, ko je povezava izbrana (s tipkovnico recimo)!

V tem primeru lahko vidite uporabo atributa :hover, če se z miško postavite na povezavo!

Uporaba atributa :hover ([Ogled])

<html>

<style type="text/css">
:hover { color: red; font-size:200%; }
</style>

  <body>
<div>
  Tole je neka povezava, na katero bo vplival atribut ':hover'.
</div>
<div>
  CSS je zapisan kot ':hover { color: red; font-size:200%; }'
</div>
<div><a href="http://www.matjazev.net">
  Z miško se postavite na tole povezavo!
</a></div>
  </body>
</html>

Hitro preverjanje znanja

Kako združimo več selektorjev z istim deklaracijskim blokom? ..... Odgovor
Kako bi zaukazali, naj bo odebeljen tekst (element b) znotraj odstavka (element p) rdeče barve? ..... Odgovor
Kako bi zaukazali, naj bodo vse neobiskane povezave rdeče? ..... Odgovor