AVOIMET

• Apache
• ASP
• Cold Fusion
• CSS
• DHTML & DOM
• JSP ja servletit
• JavaScript
• Konehuone
• Multimedia
• .NET
• Internet-markkinointi
• Perl
• PHP
• SQL
• VBScript
• XHTML
• XML

REK. KÄYTTÄJILLE

• ActionScript 2.0
• ASP
• Apache
• Dreamweaver MX
• Flash
• Flash Lite 2.0
• Java
• MySQL
• MS Access
• MS IIS
• PHP
• SQL
• XSL

FAQ / UKK

• FAQ

PALVELUT YRITYKSILLE

• Hakukoneoptimointi
• Hakusanamainonta
• Kotisivut
• Koulutus ja kurssit

PALVELUT YKSITYISILLE

• Soittoäänet ja muu mobiiliviihde

CSS-opas

 

CSS:n keskeiset periaatteet

Kuten kaikki ohjelmointimenetelmät, myös CSS perustuu joukolle sääntöjä, jotka määrittävät miksi asiat toimivat kuten ne toimivat - ts. miksi joitain asioita tulisi tehdä /joitain ei, miksi jotkin asiat toimivat jne.

Sääntö 1: CSS kuvaa dokumentin esitystavan

CSS:n tärkein sääntö on, että CSS-tyylimäärittelyt sisältävät informaatiota rakenteellista kuvauskieltä (HTML / XHTML, XML) hyödyntävän dokumentin esitystavasta ja sitä kautta täydentävät asiakirjaa. Tämä mahdollistaa dokumentin rakenteen/sisällön kuvaavan koodin ja ulkoasuun/asetteluun liittyvän koodin erottamisen toisistaan; asiaa on käsitelty tarkemmin mm. CSS:n liittäminen osaksi HTML/XHTML-dokumenttia sivulla.

Tiivistettynä:

• HTML / XHTML tai XML-dokumentissa tulisi pyrkiä esittämään vain ja ainoastaan dokumentin sisältö ja sisällön rakenne.
• CSS-tyylimäärittelyjen avulla tulisi pyrkiä esittämään vain ja ainoastaan dokumentin ja sen sisällön esitystapa

Sääntö 2: CSS on eteen- ja taaksepäin yhteensopiva

Eteen- ja taaksepäin yhteensopivuus on sääntö, joka löytyy mistä tahansa tietokoneella suoritettavassa kielessä. Dokumenttien, jotka hyödyntävät CSS-kieltä tulee toimia sekä erittäin vanhoissa ja/tai uusinta teknologiaa edustavissa UA-laitteissa (esim. web-selain) ilman virhetilanteita. Säännön henkeen kuuluu myös alusta- ja mediariippumattomuus; CSS-tyylimäärittelyjen avulla sivun ulkoasun voi määritellä esim. näyttöä, tulostusta ja useita muita medioita varten.

Käytännön tasolla asian toteutumisesta vastaa UA-laite (esim. selain). CSS-määrittelyn mukaisesti UA-laiteen tulisi hyväksyä vain ja ainoastaan ymmärtämänsä, oikeaoppiset tyylisäännöt; kaikki muut säännöt tulisi ohittaa. Valitettavasti kaikissa selaimissa on piirteitä / bugeja, joiden takia ne poikkeavat tästä säännöstä ja pyrkivät toteuttamaan mm. virheellisiä sääntöjä. Tämä on johtanut mm. nk.selainkohtaisten CSS hackien syntymiseen erilaisten ulkoasutehosteiden / temppujen aikaansaamiseksi - näitä ei tulisi kuitenkaan käyttää.

Jo yksikin (looginen tai koodaus-)virhe HTML/XHTML/XML-dokumentissa tai CSS-tyylimäärittelyssä voi aiheuttaa huomattavia muutoksia dokumentin ulkoasuun ja toimivuuteen eri selaimilla. Tästä syystä CSS-tyylimäärittelyt tulisi aina validoita ennen käyttöönottamista. Tutustu W3C.n CSS-validointi palveluun.

Sääntö 3: CSS on yksinkertainen ja tehokas

CSS eroaa muista tyylikielistä yksinkertaisuutensa ansiosta. CSS on erittäin minimalistinen, joustava ja piirteiltään rikas tapa kuvata rakenteellisen dokumentin ulkoasu. Yksinkertaisten, koko dokumentin ulkoasuun liittyvien määrittelyjen tuottaminen onnistuu jo parilla koodirivillä, laajamuotoiset kokonaisuudet hyvin tarkaan määritelyllä ulkoasulla voivat vaatia jopa tuhansia rivejä CSS-koodia.

CSS-kielen voi tiivistetysti kuvata mm. seuraavasti:

• tarkkaan määritelty syntaksi (joka voidaan kuvata 5 rivillä) - tutustu CSS:n syntaksiin
• noin 120 erilaista ominaisuutta - tutustu: CSS:n näytöllä käytettävät ominaisuudet, CSS:n Aural ominaisuudet
• 13 eri mittayksikkö- tutustu: CSS:n käyttämät mittayksiköt
• noin 30 erilaista valitsintyyppiä - tutustu: CSS:n valitsimet ja pseudovalitsimet
• Laatikkomalli (joka määrittää jokaisen elementin esitystavan) - tutustu: CSS:n laatikkomalli
• 10 tuettua mediatyyppiä - tutustu: CSS ja mediatyypit
• Ominaisuuksien periytyminen - tutustu: CSS ja ominaisuuksien periytyminen

CSS:n tehokkaan hyödyntämisen kannalta on olennaista em. osa-alueiden tuntemisen lisäksi seuraavien asioiden hahmottaminen:

HTML / XHTML -kielen perusteet

CSS-säännöt linkitetään dokumentin rakenteeseen nk. valitsinten avulla. Valitsin on viittaus dokumentissa käytettyyn elementtiin. Esim. HTML/XHTML-kielessä elementti h1 (jota kuvastaa tagi <h1>) kuvaa 1. tason otsikkoa. Sitä vastaava tyylisääntö määritettäisiin hyödyntämällä elementtivalitsinta h1.

DOM-mallin tuntemus

Oletusarvoisesti enemmistö CSS:n ominaisuuksista periytyy alaspäin nk. dokumenttipuussa. Periytymisen ymmärtämisen kannalta on tärkeää tuntea nk. DOM-malli ja siihen liittyvät keskeiset käsitteet. Esim. jos elementille body määritetään punainen taustaväri, periytyy se kaikkiin bodyn lapsielementteihin.

Tutustu artikkelin muihin osiin:
»»» CSS »»»CSS:n keskeiset periaatteet
»»» CSS »»»Cascade prosessi

Tallenna tämä sivu kirjanmerkkeihin!