CSS-opas

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2008!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

Periytyminen ja valitsimet

Universaali valitsin

Universaali valitsin kohdistaa tyylisäännöt kaikkiin dokumenteissa oleviin elementteihin. Universaali valitsin merkitään "*"-merkillä, jota seuraa määrittelylohko. Koska universaali valitsin on hyvin "yleisluontoinen", voi mikä tahansa muu valitsin ylikirjoittaa universaalin valitsimen avulla määritetyt tyylit cascade-prosessin mukaisesti.

Esimerkki. Universaalin valitsimen avulla määritetään koko dokumentin oletuskirjaisimeksi Verdana. Poikkeukseksi tähän sääntöön tehdään h1-otsikkoa koskeva sääntö, joka tarkempana ylikirjoittaa universaalin säännön.


* {font-family: Verdana; }
h1 {font-family: serif; }

Universaalia valitsinta voi hyödyntää myös osana muita valitsimia. Esim. alla oleva sääntö valitsee kaikki div-elementin sisällä olevat elementit ja määrää nille kirjasintyypiksi päätteellisen serif-fontin:

div * {font-family: serif;}

Tyyppivalitsin ja ryhmittelyvalitsin

Tyyppivalitsin on yksinkertainen määrittely, joka koskee yksittäistä dokumentin elementtiä. Ryhmittelyvalitsin on tyyppivalitsimen kaltainen määrittely, sillä poikkeuksella, että se koskee määrättyjä elementtejä

Esimerkki. Määritetään kaikkien dokumentissa olevien 2.tason otsikoiden tyyli (tyyppivalitsin), määritetään otsikoiden h1,h3 ja h4 tyyli (ryhmävalitsin)

h2 {color:black;}
h1,h3,h4 {color:blue; }

ID-attribuuttivalitsin

ID-attribuuttivalitsinta käytettäessä tyylisääntö kohdistuu elementtiin, jonka id-attribuutilla on määritelty arvo. ID-attribuuttivalitsinta käytettäessä valitsinta voi käyttää kahdella eri syntaksilla:

E#a: Tyyli kohdistuu elementtiin E, jonka id-attribuutilla on arvo a
#a: Tyyli kohdistuu mihin tahansa elementtiin, jonka id-attribuutilla on arvo a

ID-attribuutin tulisi nimensä mukaisesti olla yksilöllinen, ts. samassa dokumentissa ei saa olla kuin yksi ID-attribuutti kullakin arvolla.

Alla HTML / XHTML-koodi:

<p id="testi">Alleviivattua tekstiä</p>

Ja siihen liittyvä CSS-määrittely

p#testi{text-decoration:underline;}

/* myös tämä olisi täysin oikein ja toimiva */
#testi {text-decoration:underline; }

Class-attribuuttivalitsin

Class-attribuuttivalitsinta käytettäessä tyylisääntö kohdistuu kaikkiin elementteihin, joiden class-attribuutilla on määritelty arvo. Class-attribuuttivalitsinta käytettäessä valitsinta voi käyttää kahdella eri syntaksilla:

E.a: Tyyli kohdistuu elementtiin E, jonka class-attribuutilla on arvo a
.a: Tyyli kohdistuu mihin tahansa elementtiin, jonka class-attribuutilla on arvo a

Nimensä mukaisesti class-attribuutin avulla voidaan ryhmitellä / luokitella dataa. Ts. samassa dokumentissa voi olla useita saman class-arvon sisältämiä elementtejä.

Alla HTML / XHTML-koodi:

<p class="romeo">Romea sanoo jotain</p>
<p class="julia">...ja Julia vastaa</p>
<p class="romeo">Romea puhuu lisää</p>
<p class="romeo">...ja lisää</p>

Ja siihen liittyvä CSS-määrittely

p.romeo {color;red}
p.julia {color;blue}

/* myös tämä olisi täysin oikein ja toimiva */
.romeo {color;red}
.julia {color;blue}

Kontekstin mukaiset valitsimet

Jälkeläis- ja lapsivalitsimet, eli kontekstin mukaiset valitsimet ottavat nimensä mukaisesti huomioon elementin sijainnin dokumentissa. Määritelty tyyli on voimassa vain, mikäli elementti on oikeassa paikassa tai sillä on tietty elementti vanhempana tai lapsena.

Alla HTML / XHTML-koodi:

...
<p>Dialogia: </p> 
<div class="vuorosanat"> 
  <p class="romeo">Romea sanoo jotain </p> 
  <p class="julia">...ja Julia vastaa</p> 
  <p class="julia">ja Julia jatkaa.</p> 
  <p class="romeo">Romea puhuu lisää</p> 
  <p class="romeo">...ja lisää</p> 
</div>
...

Ja siihen liittyvä CSS-määrittely

/* perustyyli */ 
p {color: #0033FF; }

/* kaikki body-elementin sisässä olevat div-elementit, joilla on class-arvo vuorosanat */
body div.vuorosanat {background-color:#FFFF99; }

/* kaikki p-elementit, joilla on class romeo ja joiden vanhempana on div-elementti class-arvolla vuorosanat */
div.vuorosanat > p.romeo {border-color:red;border-style:solid;border-width:2px;}

/* kaikki julian vuorosanat, joita edeltää romeo */
p.romeo + p.julia {color:#33CC33;}

Tutustu artikkelin muihin osiin:
»»» CSS »»»Periytyminen
»»» CSS »»»CSS:n valitsimet - yleisesti ja listaus
»»» CSS »»»CSS:n valitsimet - esimerkit ja tarkempi esittely
»»» CSS »»»CSS:n valitsimet - pseudovalitsimet
»»» CSS »»»CSS:n valitsimet - toimivuus eri selaimilla

CSS-opas

Periytyminen ja valitsimet

Universaali valitsin

Tyyppivalitsin ja ryhmittelyvalitsin

ID-attribuuttivalitsin

Class-attribuuttivalitsin

Kontekstin mukaiset valitsimet

Tallenna tämä sivu kirjanmerkkeihin!