CSS –tyylit© Lauri Hintsanen/2007

Päivitetty 5.3.09

Lähteet: fi.wikipedia.org, hakusana CSS

Osmo Saarikumpu, www.webbipakki.com

Yleistä

CSS-tyylit (Cascading Style Sheets) on tekniikka, joka mahdollistaa yksinkertaisten ja helposti omaksuttavien tyyliehdotuksien yhdistämisen rakenteellisiin dokumentteihin, kuten (X)HTML- tiedostoihin. Tyyliehdotukset koskevat dokumenttien esitystapaa, esimerkiksi sen graafista ulkoasua, ääntämistä, tai tulostusta. Tyylikielen nimessä esiintyvällä Cascading -sanalla viitataan mahdollisuuteen vaikuttaa dokumentteihin usean tyylisäännöstön ja -säännön välityksellä samanaikaisesti.

Varsinaisia kaskadisia tyylikieliä ovat mm. CSS1 ja sen seuraaja CSS2. World Wide Web Consortium (W3C) ylläpitää CSS-kielien määritelmiä. Kehitteillä on sarjan kolmosversio, CSS3. Sitä odotellessa työn alla on myös CSS2:n päivitysversio CSS21. Kaikista versioista käytetään usein lyhyesti nimitystä CSS.

CSS:n toimivuus selaimessa

Valtaosa nykyisin käytettävistä selaimista tukee CSS2-standardia vain rajallisesti. Yksi selaimen CSS-tuen mittari on Acid3 testi, josta odotetusti testin julkaisun aikaan yksikään nykyselaimista ei läpäissyt testiä, vaan jäi 40–60 pisteen kohdalle.

Ensimmäisinä täysiin pisteisiin yltäneet olivat Operan julkaisematon betaversio, sekä Safari ja sen Webkit-moottorin uusin kehitysversio. Safari oli ensimmäinen julkisesti saatavilla ollut selain, joka läpäisi testin.

Acid3 testi löytyy osoitteesta: www.webstandards.org

Kuva joka muodostuu, jos selain läpäisee Acid3-testin täydellisesti.

Acid3 -testin tulos Firefox 3.0.6 selaimella.

Saman testin tulos Internet Explorer 7 selaimella.

© Lauri Hintsanen 2

CSS:n edut

CSS:n avulla voidaan erottaa esitykseen liittyvät seikat dokumenttien rakenteesta ja asiasisällöstä. Tämä on käytännöllistä mm. seuraavista syistä:

Dokumenttien käyttöalueet laajenevat: sama rakenne kelpaa eri välineille, kuten tulostimille, kännyköille, yms., joille sitten tyylien avulla voidaan ehdottaa kullekin sopivaa esitystapaa.

Dokumenttien luonti ja ylläpito yksinkertaistuu: esitystavan suunnittelu, toteuttaminen ja viimeistely voidaan jättää viimeiseksi toimenpiteeksi, tarvittaessa eri osaamisalueiden taitajille. Rakenteellinen koodi helpottaa myös sisältöpäivityksiä ja keskitetty ulkoasuhallinta nopeuttaa esitykseen liittyviä muutoksia.

Dokumenttien tiedostokoko pienenee: samoja tyylejä voidaan yhdistää moneen dokumenttiin, jolloin välimuistien hyödyntäminen tehostuu ja dokumenttien siirrettävyys ja latautuminen nopeutuu.

CSS tiedoston luominen

Tyylitiedosto voidaan kirjoittaa esim. Notepadilla tai TeXturilla. Tiedostoa tallennettaessa käytetään tiedostomuotoa *.css

CSS:n perussyntaksi

Tyyliehdotus (style sheet, tiedostonnimi.css) koostuu vähintään yhdestä tyylisäännöstä (style rule). Tyylisääntö sisältää vähintään yhden selektorin, jolla on ominaisuus. Ominaisuudella on taasen jokin arvo. Yksinkertaisimmillaan syntaksi on seuraavanlainen:

selektori {ominaisuus: arvo;}

Kaikki ominaisuudet ja arvot tulevat aaltosulkujen {} sisään. Useita ominaisuuksia ja niiden arvoja voi laittaa samaan valitsimeen peräkkäin erottelemalla ne puolipisteellä ;

selektori {ominaisuus1: arvo;ominaisuus2: arvo;ominaisuus3: arvo;}

Tyylisäännössä voi esiintyä useampi arvo, jolloin nämä erotetaan toisistaan pilkuilla.

selektori {ominaisuus: arvo1, arvo2, arvo3;}

© Lauri Hintsanen 3

Esimerkki CSS-määrittelystä:

p {color: green;font-size: 12pt;}

h1 {color: green;background-color: blue;font-size: 48pt;}

Selektorit

Selektoreita on käytettävissä laaja skaala, mutta kaikki selaimet eivät kaikkia selektoreita. Yleisimmin käytetyt selektorit ovat: tyyppiselektori, luokkaselektori , tunnisteselektori ja näennäisselektori.

Tyyppiselektori

Tyyppiselektorilla viitataan elementtityyppeihin niiden nimellä. Tyyppiselektori on yksinkertainen määrittely, joka koskee yksittäistä dokumentin elementtiä.

h1 {color: #ffffff;background-color: blue;font-size: 48pt;}

Luokkaselektori

Luokkaselektorin (class) avulla voidaan luoda elementtiryhmiä, joilla on yksilöllinen nimi. Aluksi merkataan halutut elementit Class-attribuutilla, sitten luodaan säännöt kyseisille attribuuteille tyylisäännöt ja lopuksi selain automaattisesti käyttää luotuja sääntöjä kyseiselle elementtiryhmälle. Class –atribuuttia voidaan käyttää useamman kerran samalla sivulla.

<p class="tarkea">HUOM! Tämä kohta on hyvin tärkeä<p>

Tyylisäännössä luokkaan viitataan pisteellä:

.tarkea {color:red;background-color:yellow;}

© Lauri Hintsanen 4

Tunnisteselektori

Tunnisteselektorin avulla elementille luodaan uniikki attribuutti. Aluksi merkataan halutut elementit risuaitamerkillä #, sitten luodaan säännöt kyseisille attribuuteille tyylisäännöt. Koska kyseessä on uniikki attribuutti, sitä voidaan käyttää vain kerran samalla sivulla.

<p id="poikkeus">Huomioi kuitenkin…</p>

Tyylisäännössä tunnisteeseen viitataan pisteellä:

#poikkeus {border:3px red double;}

Näennäisselektori

Aiemmat selektorit kohdistuvat staattisiin elementteihin, eli yleisesti XHTML –tageihin. Näennäisselektorin voi kohdistaa dynaamisiin elemetteihin. Yleisin dynaaminen elementti sivulla in linkki ja sen eri muodot: vierailematon linkki, vierailtu linkki, kursori linkin päällä, klikkaus linkin päällä.

a:link {color:blue;}a:visited {color:purple;}a:hover {color:aqua;}a:active{color:lime;}

Kommentointi

CSS tyyleihin voi liittää kommentteja samalla idealla kuin esim. XHTML-sivulle. CSS kommentti alkaa /* ja päättyy */ merkeillä. Kommentointi helpottaa tyylitiedoston lukua ja tarjoaa tietoa esim. henkilölle joka päivittää tyylitiedostoa.

/* Tästä eteenpäin tulevat linkkimääritykset */

© Lauri Hintsanen 5

CSS:n yhdistäminen XHTML-sivuun

CSS tyylimääritykset voidaan yhdistää sivuun joko tuomalla ne ulkopuolisesta, erillisestä tiedostosta (tyyli.css) tai upottamalla se suoraan tiedostoon. Erillinen css-tiedosto on kätevämpi, koska todennäköisesti sivusto käyttää samoja tyylejä useammalla sivulla. Jos tyyli upotetaan jokaisen sivun alkuun on jokaista sivua muokattava erikseen, kun halutaan muuttaa tyyliä. Toisaalta upotettu tyyli antaa mahdollisuuden käyttää täysin erilaisia tyylejä eri sivuilla.

Tyylimääritysten upottaminen

Tyylimääritys upotetaan suoraan XHTML-sivulle <head> </head> tagien sisään:

<head><title>Otsikko</title><style type="text/css">body {margin: 100px 0px;background-color: #f8f8f8;}</style></head>

Tyylimääritysten tuominen erillisestä tiedostosta

LINK-elementillä viitataan ulkopuoliseen CSS-tiedostoon:

<link rel="stylesheet" type="text/css" charset="iso-8859-1" href="tyyli.css" />

Linkki tyylitiedostoon sijoitetaan XHTML sivulle <head> </head> tagien sisään:

<head> </head> tagien sisään:

<head><title>Otsikko</title><link rel="stylesheet" type="text/css" charset="iso-8859-1" href="tyyli.css" /></head>

Mitä atribuutit tarkoittavat?

TYPE-attribuutilla ilmoitetaan linkitetyn tiedoston sisältötyyppi, joka on aina tuo sama CSS:n ollessa kyseessä.

REL-attribuutilla ilmoitetaan linkin suhde (relationship) dokumenttiin; tässä tyylisäännöstö.

CHARSET-attribuutilla ilmoitetaan ulkoisen resurssin merkistö; tässä suomenkielisen kommentoinnin mahdollistava länsi- ja pohjoiseurooppalainen Latin-1.

HREF-attribuutilla ilmoitetaan CSS-tiedoston URL; tässä dokumentin kanssa samassa hakemistossa (kansiossa) sijaitseva tyylit.css.

© Lauri Hintsanen 6

CSS-tiedosto on aivan tavallinen tekstitiedosto, joka sisältää pelkät tyyliehdotukset ja mahdolliset kommentit. Tiedostomuotona *.css

Jos tyylit eivät toimi

Tarkista seuraavat asiat

1. Koodien oikeellisuus

Tarkista kirjoitusvirheet. Pienikin virhe voi johtaa siihen että tyylit eivät toimi toivotulla tavalla.. Vika voi piiletä kahdella suunnalla, sekä tyylien että merkkauksen virheellisyydessä. Merkintäkieleen (XHTML) liittyvät virheet voidaan poistaa validoimalla koodi. XHTML sivun validointi: http://validator.w3.org

Tyylimäärityksien kirjoitus- tai ajatusvirheet voidaan taas poistaa CSS-syntaksin tarkistuksella.CSS-syntaksin tarkistus: http://jigsaw.w3.org/css-validator/

2. Selaintuen tarkistus

Mitä monimutkaisempia tyylejä käyttää, sen todennäköisempää on ettei selain tue tyyliominaisuutta. Selaimesta saattaa puuttua jonkin ominaisuuden tuki jopa kokonaan. Tuki voi olla myös puutteellista tai peräti virheellistä.

Tuetut ominaisuudet eri selaimissa: http://www.webdevout.net/browser-support-css

© Lauri Hintsanen 7

Tyylimäärityksiä

Tekstin ominaisuudet

Ominaisuus mahdolliset arvot Mallifont-style normal, italic, oblique font-style:obliquefont-family serif, sans-serif, cursive, monospace, fantasy font-family:monospace

"fontin nimi" eli "Times New Roman" font-family:arial

font-size xx-small, x-small, small, medium, large, x-large, xx-large font-size:small

smaller ja larger - suhteessa oletuskokoon font-size:smaller

120 % -suhteessa oletuskokoon font-size:120%

24pt -normaali pistekoko font-size:24pt

font-variant normal, small-caps eli pienet suuraakkoset font-variant:small-capsfont-weight normal, bold, bolder, lighter font-weight:bold

jokin tasasataluku 100-900 font-weight:800

Tasaaminen

Ominaisuus mahdolliset arvot Mallivertical-align baseline, sub, super, text-top, text-bottom, middle -

tekstin sijainti kuvaan nähden pystysuunnassavertical-align:middle

letter-spacing 0.6em - eli em on mittayksikkö suhteessa kirjaimen korkeuteen, kirjainten väli

letter-spacing:0.6em

word-spacing 0.1em - sanojen väli word-spacing:0.2emtext-decoration line-trough, underline, overline, blink text-decoration:overlinetext-align left, right, center, justify (molemmat reunat tasalle) text-align:centertext-transform none, UPPERCASE, lowercase, Capitalize text-transform:lowercasetext-indent 8em - 1.rivin sisennys text-indent:6emline-height 3 - eli luku, jolla fontin korkeus kerrotaan line-height:5

Tila tekstin ympärille Ominaisuus mahdolliset arvot Mallimargin-top 20% tai 4cm - eli ylämarginaali margin-top:5cmmargin-right margin-right:4cm

margin-left margin-left:5cm

margin-bottom margin-bottom:2cm

Reunat teksteille

Ominaisuus mahdolliset arvot Malliborder-top-width thin, medium, thick border-top-width:thinborder-left-width border-left-width:thin

© Lauri Hintsanen 8

border-right-width border-right-width:thin

border-bottom-width border-bottom-width:thin

border-color väri kts.värit border-color:rgb(0,255,0)border-style none, solid, dashed, dotted, groove, inset, ridge,

double, outsetborder-style:solid

Värit myös muille kuin teksteille, esim BODY

Ominaisuus mahdolliset arvot Mallicolor red, #00FF00, rgb(0,255,0) color:redbackground-color samat, mutta tekstin taustalle background-color:bluebackground-image url(tiedosto.nimi) - taustakuva elementille background-

image:url(joku.gif)

Listat OL, UL ja LI-elementeillelist-style-type disc, circle, square, decimal, lower-roman, upper-

roman, lower-alpha, upper-alpha, none listan "pallukat"

list-style-type: disc

list-style-image url(tiedoston nimi) - kuva listan "pallona" list-style-image:url(kuva.gif)

MuutA:link Samoja ominaisuuksia kuin edellä. Linkin värien

määrittely.A:link{color:red}

A:visited Samoja ominaisuuksia kuin edellä. Vieraillun linkin määrittely.

A:visited{color:blue}

A:hover Linkin ominaisuus, kun hiiri tulee sen päälle. A:hover{color:yellow}first-line Ensimmäisen rivin ominaisuudet. first-letter Ensimmäisen kirjaimen ominaisuus.

© Lauri Hintsanen 9