CSS

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2025!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! Koulutuksen järjestää asiantuntijasi Koulutus- ja konsultointipalvelu KK Mediat.

CSS:n Cascade-prosessi

CSS:n tyylisäännöt voivat olla peräisin useista lähteistä, kuten kirjoittajalta, käyttäjältä tai selaimen oletusasetuksista. Sen sijaan että nämä säännöt kumoaisivat toisensa mielivaltaisesti, selain yhdistää ne johdonmukaiseksi kokonaisuudeksi niin sanotun cascade-prosessin avulla. Tämä prosessi on myös CSS:n nimen taustalla — C-kirjain viittaa ketjutukseen (engl. cascading).

Tyylisääntöjen lähteet

CSS-tyylisäännöt voivat tulla useista eri lähteistä, joilla on eri tasoinen vaikutus sivun lopulliseen ulkoasuun. Lähteet ovat:

Laatijan tyylimäärittely
Sivun laatija voi määrittää tyylisäännöt ulkoisessa CSS-tiedostossa, tiedostoon upotettuna, tai elementtikohtaisesti.
HTML:ssä olevat esitysmääreet
Vanhoissa HTML-koodinpätkissä ulkoasun määrittelyyn käytettiin esitysmääreitä, kuten bgcolor, center tai font. Nykyselaimet tulkitsevat nämä deprekoidut määreet automaattisesti vastaavina CSS-sääntöinä.
Käyttäjän tyylimäärittelyt
Käyttäjä voi lisätä selaimeensa omia tyylitiedostoja, joilla voidaan ohittaa laatijan tyylimäärittelyt tai oletustyylit. Tätä käytetään usein saavutettavuuden parantamiseen, esimerkiksi fonttikoon tai kontrastien säätämiseen näkörajoitteisille.
Selaimen oletustyylit
Kaikilla selaimilla on oletusarvoinen tyylitiedosto, joka määrittää perusasettelun niille HTML-elementeille, joille ei ole määritetty omaa tyyliä. Selainkohtaiset erot tyylien käytöksessä johtuvat usein toisistaan poikkeavista oletustyyleistä. Näiden erojen tasoittamiseksi on nk. reset-tyylejä, joilla varmistetaan että kaikilla selaimilla on identtiset oletusarvot.
Käyttäjän selainkohtaiset asetukset
Selaimen asetuksista käyttäjä voi muuttaa oletustyylejä, esimerkiksi vaihtaa oletusfontin sans-serifiksi. Tämä vaikuttaa käyttäjän selaimen omiin tyyleihin ja voi ylikirjoittaa joitakin sivun määrittelyjä.

Tyylisääntöjen priorisointi Cascade-prosessissa

Tyylisääntöjen priorisoinnissa eniten vaikuttaa sääntöjen lähde. Esimerkiksi käyttäjän määrittämät tyylit voivat olla tärkeämpiä kuin sivun kirjoittajan tyylit tai selaimen oletusarvot. Yleistettynä käyttäjän lähellä olevat tyylimäärittelyt – kuten selaimen personoidut asetukset tai yksityiset tyylit – ohjaavat sivun ulkoasun esitystä vahvemmin kuin kauempana määritellyt tyylit. Selain ottaa huomioon myös, onko sääntö merkitty tärkeäksi (!important) ja valitsimen tarkkuuden (spesifisyyden). Jos nämä tekijät ovat tasavahvoja, ratkaisevaksi nousee se sääntö, joka esiintyy dokumentissa viimeisenä.

Ensimmäinen lajitteluvaihe perustuu siihen, onko CSS-sääntö merkitty tärkeäksi !important-määreellä vai ei. Tärkeysjärjestys määräytyy seuraavasti:

  1. Tärkeät säännöt käyttäjän tyylimäärittelyssä (suurin painoarvo)
  2. Tärkeät säännöt sivun omassa tyylimäärittelyssä
  3. Tavalliset säännöt sivun tyylimäärittelyssä
  4. Tavalliset säännöt käyttäjän tyylimäärittelyssä (pienin painoarvo)

Kussakin edellä mainitussa lajitteluryhmässä tyylisäännöt järjestetään myös niiden spesifisyyden mukaan. Mitä tarkemmin sääntö kohdistuu tiettyyn elementtiin, sitä suurempi sen painoarvo. Spesifisyys määritetään kolmiportaisella asteikolla, jossa kukin taso vaikuttaa järjestykseen seuraavasti (suuremmasta pienempään painoarvoon):

  1. ID-valitsimet (#id) ja suoraan elementissä määritetyt tyylit (style)
  2. Luokkavalitsimet (.class), attribuuttivalitsimet ([type="text"]) ja pseudovalitsimet (:hover)
  3. Elementtivalitsimet (h1)

Alla oleva esimerkki havainnollistaa, miten selain valitsee tyylin monen vaihtoehdon joukosta – ja miksi pelkkä valitsimen sijainti CSS-tiedostossa ei aina riitä ennustamaan lopputulosta. Esimerkissä neljällä eri spesifisyystasolla olevat CSS-säännöt kohdistuvat samaan HTML-elementtiin: 



p { color: red; }                        /* elementtivalitsin */
.korostus { color: blue; }              /* luokkavalitsin */
#viesti { color: orange; }              /* id-valitsin */
...
<!-- HTML:n sisäinen tyyli -->
<p class="korostus" id="viesti" style="color: green;">Tämä on esimerkkiteksti.</p>

Mikä väri lopulta näkyy? Vihreä, koska style="color: green;" on määritetty suoraan elementissä, ja sillä on korkein spesifisyys.

Artikkelin tiedot

Otsikko: CSS:n Cascade-prosessi

Kuvaus: Opi, miten CSS:n Cascade-prosessi mahdollistaa eri lähteistä olevien tyylisääntöjen yhdistämisen ja priorisoinnin sivun esityksessä.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: