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

CSS:n keskeiset periaatteet

Sääntö 4: Cascade prosessi

CSS sallii useista eri tyylimäärittelystä peräisin olevien sääntöjen yhdistämisen yhdeksi kokonaisuudeksi dokumentin esittämisvaiheessa. Tämä vaihe tunnetaan nimellä Cascade-prosessi.

C-kirjain CSS:n nimessä (Cascading Style Sheets) tulee Cascade-prosessista.

Sivua varten sovellettavat tyylisäännöt voivat tulla useista lähteistä, joiden paino-arvo on erilainen. Lähteitä voivat olla:

Laatijan tyylimäärittely: Joko linkitettynä ulkoisena tiedostona , HTML /XHTML -koodiin upotettuna, tai molemmin tavoin edustettuna
Merkintäkielessä olevat muotoilumääreet: Esimerkiksi HTML-dokumentin body-elementissä on määritetelty dokumentin taustaväri .Cascade-prosessissa selain muuntaa tämän vastaavaksi CSS-säännöksi.
Käyttäjän määrittämä tyylimäärittely: Käyttäjä voi määritellä UA-laitteeseen (esim. web-selain) nk. yksityisen tyylimäärittelyn (CSS-tiedosto), jonka avulla voi ylikirjoittaa dokumentissa käytettävät normaalit tyylit. Piirteen avulla voidaan mm. blokata dokumentissa käytettäviä mainoksia tai muotoilla sisältö erikoiskäyttäjille (esim. näkövammaiset) sopivammaksi.
UA-laitteen oletusasetukset ja perityt arvot: Oletusarvoisesti jokainen UA-laite (esim. web-selain) sisältöö joukon oletusarvoja, jotka määrittävät eri elementtien ulkoasun. Esim. mikä on oletusarvoinen fontti (serif vai sans-serif) jne.
Käyttäjän määrittämät UA-kohtaiset asetukset: Kuten yo. kohta, mutta käyttäjän mukauttamana. Esim. moni edistynyt käyttäjä vaihtaa web-selaimen oletusarvoisen fontin nk. sans-serif-kirjasimeksi.

Sääntöjen asettaminen keskinäiseen arvojärjestykseen tapahtuu useissa vaiheissa sen perusteella, mistä lähteestä sääntö tulee. Lisäksi tähän vaikuttavat säännön spesifisyys ja se, onko sääntö asetettu tärkeäksi. Jos kaikki osatekijät ovat samanarvoisia, käyttöön otetaan viimeksi esiintynyt sääntö. Kokonaisvaltaisena nyrkkisääntönä voi pitää, että käyttäjää lähinnä olevat ominaisuudet määrittelevät hyvin pitkälti sivun esittämistä.

Ensimmäinen lajittelu tapahtuu sen perusteella, onko sääntö tärkeä vai ei (nk. CSS !important-sääntö). Lajittelu tapahtuu seuraavasti (tärkeysjärjestyksessä):

Tärkeät säännöt käyttäjän tyylimäärittelyssä (tärkein)
Tärkeät säännöt sivun omalla tyylimäärittelyssä
Tavalliset säännöt sivun tyylimäärittelyssä
Tavalliset säännöt käyttäjän tyylimäärittelyssä (vähiten tärkeä)

Kussakin em. lajitteluryhmässä tyylisäännöt lajitellaan lisäksi sen perusteella, kuinka yksityiskohtaisia ne ovat. Mitä yksityiskohtaisempi sääntö, sitä tärkeämpi. Yksityiskohtaisuus määräytyy kolmiportaisen asteikon mukaan, jonka tulos lajitellaan nousevaan järjestykseen. Asteikko määräytyy seuraavista tekijöistä:

Valitsimessa olevaan id-attribuuttiin johtavien viitteiden lukumäärän mukaan, ja suoraan elementissä olevien tyylisääntöjen mukaan style-attribuutin kautta (tärkein)
Muiden valitsimessa olevien attribuuttien ja pseudoluokkien lukumäärä.
Valitsimessa olevat elementtinimet (vähiten tärkeä)

Pieni esimerkki selventänee asiaa. Alla lyhyt HTML/XHTML-koodi:

<p class="eka">Kappaleteksti&auml;, jossa on 
<a href="#" id="linkki">linkki</a>. </p>

Ja siihen liittyvä CSS:

/* vähiten tärkeä sääntö, tavallinen elementtivalitsin */ 
a {color: red; }

/* tarkempi sääntö, sisältää mm.luokkavalitsimen */
p.linkki a { color:#99CC00;} 


/* tärkein sääntö, suora id-viittaus ja useita valitsinviitteitä */
body * a#linkki {color:#CC9900;}

/* myös id-viittaus, mutta yo. sääntö on tarkempi.
Siksi tämä sääntö ei ylikirjoita yo. sääntöä */
a#linkki {color:#00FF00;}

Tutustu artikkelin muihin osiin:
»»» CSS »»»Periaatteet
»»» CSS »»»Cascade prosessi

CSS-opas

CSS:n keskeiset periaatteet

Sääntö 4: Cascade prosessi

Tallenna tämä sivu kirjanmerkkeihin!