Tyylilomakkeiden (engl. Cascading Style Sheets, CSS) avulla voidaan helposti määritellä XHTML-dokumenttien ulkoasu. Tyylilomakkeiden avulla saadaan dokumentin rakenne pidettyä kokonaan irrallaan dokumentin ulkoasusta. Seuraavissa luvuissa tarkastellaan tyylilomakkeita ja niiden käyttöä ensisijaisesti W3C:n Cascading Style Sheets, level 1 -suosituksen pohjalta.
Yleisesti voidaan todeta tyylien käytöstä aiheutuvien hyötyjen olevan huomattavasti suurempia kuin tyylien mukana tulevien haittojen. XHTML-dokumenteissa ensimmäiseen tyylien hyötyyn törmää jo dokumenttien tekovaiheessa. Tyylilomakkeita käyttämällä sivuston tekijän ei tarvitse juurikaan kiiinnittää huomiota sivujen ulkoasuun, vaan hän voi keskittyä kokonaan dokumenttien sisällön hiomiseen.
Suurilla organisaatioilla voi olla tiukat määräykset sivustonsa ulkoasusta, jolloin WWW-sivustolla on oma ylläpitäjä. Ulkoasun yhtenäisyys ja helppo muokattavuus on yksi huomattava etu tyylitiedostojen käytössä. Esimerkiksi yrityksillä tai organisaatioilla voi olla useita kymmeniä tai satoja WWW-sivuja, joiden on oltava yrityksen "näköisiä" pelkästään yrityksen imagon vuoksi. Esimerkiksi yrityksen tunnusvärien muuttuessa WWW-sivujen ulkonäkö täytyy luultavasti muuttaa toisenlaiseksi. Jos jokaista yrityksen WWW-sivuilla olevaa dokumenttia joudutaan muokkaamaan erikseen voi hommaan mennä jopa viikkoja. Tietenkin muutokset voidaan tehdä erillisellä ohjelmalla, mutta ohjelman rakentaminen ja sen tekemien virheiden korjaaminen varmasti kestää jonkin aikaa. Tyylien avulla värien muuttamiseen menee aikaa vain muutamia minuutteja. Toki sivuille tehtävät muutokset voivat olla huomattavasti suurempia kuin pelkän värin muuttaminen toiseksi.
Tyylilomakkeiden ainoana haittapuolena voidaan pitää selainten vaihtelevaa tukea tyyleille. Tyylien toimivuus vaihtelee selaimittain hyvin runsaasti selainten eri versioiden välillä, joten tyylilomakkeita käyttävät sivut on suunniteltava toimimaan myös ilman tyylejä. Jacob Nielsenin tekemän tutkimuksen perusteella ihmiset eivät kovin helposti asenna koneelleen uusinta selainta, jos vanha selain toimii heidän mielestään riittävän hyvin. Tämän vuoksi selainten ja niiden eri versioiden kirjo on hyvin laaja. Sivuston sisältö pitäisi olla saatavilla myös ilman tyylilomakkeiden käyttämistä, koska tyylilomakkeiden on tarkoitus kuvata vain ulkoasua. Tyylilomakkeita sisältävät sivut kannattaa suunnitella ja testata huolellisesti myös ilman tyylilomakkeita. Erilaisten lisäominaisuuksien käyttö ei saa häiritä käyttäjiä, jotka eivät pysty syystä tai toisesta käyttämään lisäominaisuuksia hyväkseen. Jotkut ihmiset eivät edes pysty käyttämään selaimia jotka tukevat tyylejä. Tällöin oleelliseksi tuleekin dokumentin hyvin määritelty rakenne, joka edesauttaa sivun toimimista kaikilla selaimilla. Yksinkertaisin esimerkki selaajasta, joka ei näe tyylejä on, google-hakupalvelun robotti, joka selaa läpi sivuja ja tallentaa niiden sisältöä tietokantaansa. Toinen esimerkki voisi olla näkövammainen henkilö.
Monimutkaisia tyylilomakkeita kirjoitettaessa sivusto kannattaa testata tärkeimmillä selaimilla. Paras CSS-tuki löytyy Mozillasta ja Operasta. Eniten käytetty Internet Explorer selain tulkitsee tyylejä monesti hieman väärin joten pelkästään sillä testaamiseen ei kannata luottaa.
Tyylilomakkeiden käyttämisessä kannattaa aina muistaa, että dokumentin tekijän määrittelemä tyylilomake on vain suositus käytettävästä ulkoasusta. Dokumentin lukija voi aina oman selaimensa asetuksilla ohittaa dokumenttiin liitetyn tyylilomakkeen määrityksiä, koska hän itse tietää parhaiten omat tarpeensa. Sivunsa tyylit kannattaakin suunnitella niin, että ne mukautuvat mahdollisimman hyvin käyttäjän selaimen asetuksiin. Ei siis kannata pakottaa tekstiä tietyn kokoiseksi vaan ennemmin ehdottaa, että käytetään käyttäjän selaimen tekstin oletuskokoa. Ei myöskään kannata pakottaa sivua tietyn levyiseksi koska pakotettu leveys on aina jollekin liian leveä tai kapea. Tyylimäärityksistään kannattaa tehdä mahdollisimman mukautuvia. WWW-sivujen ulkoasun suunnittelu eroaa hyvin suuresti perinteisestä paperiesitteiden tms. tulosteiden suunnittelusta. Paperi on aina tietyn kokoinen mutta WWW-sivun fyysistä kokoa ei voida tietää koska se vaihtelee käytettyjen ohjelmien ja ympäristöjen mukaan.
WWW:n selaamiseen käytettyjen päätelaitteiden ja ohjelmien kirjo kasvaa koko ajan. Tätä varten CSS2-suosituksessa otetaan erityisesti huomioon erilaisten päätelaitteiden ominaisuuksia. CSS2:n avulla on mahdollista määritellä oma ulkoasunsa esim. televisiota käyttävälle lukijalle, kännykän käyttäjälle, tekstiselaimen käyttäjälle tai ääniselaimen käyttäjälle. Kullakin laitteella on omat rajoituksensa kuten epätarkka näyttö, erittäin pieni näyttö, ei ollenkaan grafiikkaa jne. Nämä voidaan erikseen huomioida erilaisilla tyylilomakkeilla. Esim. sivu näytetäänkin erilaisella ja suuremmalla kirjasimella jos sitä katsellaan piirtoheittimellä. Ei tarvitakaan enää erillistä Powerpoint-esitystä. Kännykkäkäyttäjän näytöstä jätetään pois tilaa vievää grafiikkaa. Ääniselaimen käyttäjälle määritellään oma lukuääni otsikoille, linkeille ja leipätekstille.
Seuraavassa lyhyt esimerkki tyylilomakkeen oikeaoppisesta käyttämisestä XHTML-dokumentin ulkoasun määrittelemiseksi. Seuraavassa kuvassa ( Kuva 1) on yksinkertainen XHTML-dokumentti, jonka ulkoasu on määritelty ulkoisen tyylilomakkeen avulla.
Seuraavassa kuvassa ( Kuva 2) on edellä esitetyn kuvan (Kuva 1) XHTML-dokumentti, josta tyylilomake on poistettu käytöstä. Sivun ulkoasu ei enää korosta kahtiajakoa, mutta sivu on kuitenkin toimiva ja sivuilla oleva informaatio on luettavissa kokonaisuudessaan. Esimerkiksi merkkipohjaisilla selaimilla sivu näkyisi miltei kuvassa esityn kaltaisena.
Tyylimääritykset voidaan liittää
XHTML-dokumenttiin kolmella eri tavalla, mutta tyylien
ominaisuuksien määrittäminen tapahtuu tavasta
riippumatta täsmälleen samalla tavoin. Tyylien
määrittämisen perusidea on muuttaa olemassaolevien
XHTML-elementtien ominaisuuksia. Tyyli on nimetty
XHTML-dokumentissa esiintyvien XHTML-elementtien mukaisesti ja
tyyliin tehtävät muutokset vaikuttavat kyseisen
XHTML-elementin sisällön (esimerkiksi tekstin) ulkoasuun.
Normaalisti XHTML-elementit näytetään selaimen
oletusmääritysten mukaisesti. Antamalla tyyleille
ominaisuuksia voidaan selaimen oletusmääritykset kumota
ja näyttää dokumentti tyylien
määrämällä tavalla. Esimerkiksi tyyliin
h1
tehtävät muutokset vaikuttavat kaikkiin
dokumentin
h1
-elementteihin eli dokumentin korkeimman
otsikkotason-elementtiin.
Seuraavassa esimerkissä havainnollistetaan tyylin
ominaisuuksien asettamista kolmelle tyylille.
h1
-,
p
- ja
strong
-tyylillä on olemassa oletusmuotoilut,
joita muutetaan seuraavan esimerkin määrittelyillä.
Elementin ominaisuudet, joita tyylimäärittelyssä ei
muuteta, säilyvät ennallaan. Esimerkissä olevat
h1
-tyylin määrittelyt muuttavat
h1
-elementin sisällä olevan tekstin
keltaiseksi harmaalla pohjalla sekä tekstin keskitetyksi,
mutta esimerkiksi tekstin kokoa ei muuteta.
p
-tyylin määrittelyt muuttavat
p-
elementin sisällä olevan tekstin
vihreäksi valkealla pohjalla sekä tekstin tasauksen
molempiin reunoihin.
strong
-elementin sisällä oleva teksti
muutetaan ainoastaan lihavoiduksi.
h1 {
color: yellow;
background-color: gray;
text-align: center;
}
p {
color: green;
background-color: white;
text-align: justify;
}
strong {
font-weight: bold;
}
Tyylin määrittely alkaa tyylin nimellä eli sen
XHTML-elementin nimellä, johon tyylimäärittelyt
vaikuttavat. Edellisessä esimerkissä tyylin nimeksi on
annettu
h1
,
p
ja
strong
. Välittömästi tyylin nimen
jälkeen tulee osa, jossa kerrotaan tyylin ominaisuudet. Kaikki
tyylin ominaisuudet kerätään lohkoon kaarisulkeiden
({ ja }) väliin. Tyylin ominaisuuden nimi ja siihen
liittyvä arvo täytyy antaa kaksoispisteellä (
:
) toisistaan erotettuna muodossa
ominaisuus: arvo;
. Puolipisteellä (;) erotetaan
saman lohkon sisällä olevat ominaisuuksien
määrittelyt toisistaan. Ominaisuuden
määrittelyjä voidaan sijoittaa useampia samalle
riville. Puolipisteen lisääminen on erityisen
tärkeää, jos samassa lohkossa
määritellään useampia ominaisuuksia.
h1
-tyylin ominaisuuksien nimet ovat edellisessä
esimerkissä
color, background-color
ja
text-align
ja ominaisuuksille asetettavat arvot ovat
yellow, gray
ja
center
.
Seuraavassa kuvassa on käytetty edellisen esimerkin tyylinmäärittelyjä XHTML-dokumentissa.
Seuraavassa esimerkissä on nähtävillä edellisessä esimerkkikuvassa olleen (Kuva 3) XHTML-dokumentin sisältö. Seuraavien lukujen CSS-esimerkeissä tullaan käyttämään pohjana seuraavaa XHTML-dokumenttia, jollei toisin mainita.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<link rel="StyleSheet" href="tyyliton.css" type="text/css" />
<title>CSS-esimerkeissä tarvittava
tiedosto</title>
</head>
<body>
<h1>Ensimmäisen tason otsikko</h1>
<p>
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
</p>
<p>
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
</p>
<p>
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
</p>
</body>
</html>
Käytettävissä olevat ominaisuudet on määritelty CSS1- ja CSS2-suosituksissa sekä tulevassa CSS3-suosituksessa. Ominaisuuksiin kelpaavat arvot on myös rajattu näissä suosituksissa. Eri ominaisuuksista kerrotaan tarkemmin myöhemmissä luvuissa.
Tyylien liittäminen XHTML-dokumenttiin onnistuu kolmella eri tavalla. Tässä dokumentissa käsitellään kuitenkin vain kaikista kätevintä ja järkevintä tapaa eli ulkoisia tyylitiedostoja.
Ylivoimaisesti käyttökelpoisimmassa tyylilomakkeen käyttötavassa dokumenttiin määritellään ulkoinen tyylitiedosto. Ulkoiseen tyylitiedostoon kootaan kaikki dokumenttia koskevat tyylin määritykset. Yksi ulkoinen tyylitiedosto voi toimia useammankin XHTML-dokumentin tyylien pohjana. Tyylitiedostoa muutettaessa muuttuu kaikkien niiden XHTML-dokumenttien ulkoasu, jotka käytävät tiedostossa olevia tyylejä. Yhtä tiedostoa muuttamalla voidaan siis muuttaa kokonaisten sivustojen ulkonäköä.
Tyylitiedosto ja dokumentti täytyy yhdistää
toisiinsa jollakin tavoin. Tyylitiedosto linkitetään
link
-elementillä jokaiseen XHTML-dokumenttiin,
jossa tyylitiedostoa halutaan käyttää.
link
-elementin attribuuttien arvoilla selaimelle
kerrotaan tyylitiedosto, jota XHTML-dokumenttissa halutaan
käyttää.
link
-elementti sijoitetaan XHTML-dokumentissa
head
-elementin sisään.
<link href="tyylit.css" rel="stylesheet" type="text/css" />
href
-attribuutin arvolla ilmaistaan tyylitiedoston
nimi ja sen sijaintirel
-attribuutilla ilmaistaan dokumentin suhde, joka
tässä tapauksessa tarkoittaa, että kyseessä on
tyylitiedosto (
stylesheet
)type
-attribuutilla ilmoitetaan tiedoston ns.
MIME-tyyppi, joka CSS-tiedostoilla on
text/css
Attribuuteista ja niiden arvoista kerrotaan enemmän XHTML-elementtien yhteydessä.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<link href="tyylit.css" rel="stylesheet" type="text/css" />
<title>Dokumentin otsikko</title>
</head>
<body>
<h1>Ensimmäisen tason otsikko</h1>
<p>Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-
elementin sisään. Kappaleessa olevat korostukset on
toteutettu
<strong>strong</strong>-elementillä.</p>
<p>Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-
elementin sisään. Kappaleessa olevat korostukset on
toteutettu
<strong>strong</strong>-elementillä.</p>
<p>Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-
elementin sisään. Kappaleessa olevat korostukset on
toteutettu
<strong>strong</strong>-elementillä.</p>
</body>
</html>
Seuraavassa on esimerkki ulkoisen tyylitiedoston
tyylit.css sisällöstä. Tyylitiedosto
sisältää
body
-tyylin ja
p
-tyylin määrittelyt. Tyylien avulla
body
-elementissä määritellään
tekstin väriksi musta ja taustaväriksi valkea sekä
tekstin tasaus keskitetyksi.
p
-elementin tekstin väri
määritellään keltaiseksi ja taustaväri
harmaaksi sekä tekstin tasaus keskitetyksi.
body {
color: black;
background-color: white;
text-align: center;
}
p {
color: yellow;
background-color: gray;
text-align: center;
}
Seuraavassa kuvassa käytetään edellisen esimerkin mukaisia tyylimäärityksiä XHTML-dokumentissa.
Tyylitiedostoa määriteltäessä on tiedettävä myös hieman XHTML-elementtien vaikutusalueesta, koska tyylien kaikkia ominaisuuksia ei voi antaa kaikille elementeille. XHTML-elementtien vaikutusalue käydään tarkemmin läpi XHTML-elementtien yhteydessä, joten seuraavassa asiaa tarkastellaan hyvin lyhyesti.
Lohkotason (engl.
block-level) tai
kappaletason -elementiksi kutsutaan
elementtiä, joka voi muodostaa itsenäisen lohkon tai
kappaleen. Lohkotason elementit voivat sijaita XHTML-dokumentissa
itsenäisinä, joten niiden ei tarvitse olla toisten
lohkotason elementtien sisällä. Luonnollisesti kaikki
lohkotason elementit sijaitsevat
body
-elementin sisällä. Tyypillinen
esimerkki lohkotason elementistä on
p
-elementti, joka muodostaa oman tekstikappaleen.
Tekstitason (engl.
inline-level) -elementiksi kutsutaan elementtiä, joka
voi sijaita ainoastaan lohkotason elementin sisällä.
Tässä dokumentissa käytettävä nimitys
tekstitason-elementti ei ole suora suomennos vastaavasta
englanninkielisestä termistä. Tekstitason elementti
havainnollistaa kirjoittajan mielestä hyvin elementin
riippuvuutta kappaletason eli lohkotason elementistä.
Tyypillinen esimerkki tekstitason elementistä on
strong
-elementti, jonka täytyy sijaita jonkin
lohkotason elementin sisällä XHTML-dokumentissa.
Korvattaviksi (engl.
replaced)-elementiksi kutsutaan elementtiä, jolla
merkitään XHTML-dokumenttiin esimerkiksi kuvan paikka.
Tyypillinen esimerkki korvattavaksi tarkoitetusta elementistä
on
img
-elementti, jonka paikalla selain
näyttää elementin
src
-attribuutissa määritellyn kuvan. Yleensä korvattavien
elementtien pitää sijaita lohkotason elementin sisällä.
Tyylejä, niiden ominaisuuksia ja arvoja voidaan ryhmitellä hieman erilaisilla tavoilla. Seuraavassa on lyhyesti esitettynä erilaiset ryhmittelymahdollisuudet.
Tyylejä, joissa on samoja ominaisuuksia ja arvoja, voidaan
ryhmitellä yhteen. Esimerkiksi otsikkotasoisten tyylien
kirjasimen värin määritteleminen onnistuu kootusti
seuraavan esimerkin mukaisesti. Esimerkissä tyyleille
h1
,
h2
ja
h3
halutaan antaa kirjaisimen väriksi keltainen.
Tällöin tyylien nimet erotetaan toisistaan pilkulla ja
niille tehdään yhteinen lohko, jonka sisällä
tyylien yhteiset ominaisuudet ilmoitetaan.
h1, h2, h3 { color: yellow; background-color: black; }
Määriteltäessä useiden ominaisuuksien arvoja erotetaan
ominaisuudet toisistaan puolipisteellä (;).
Seuraavassa
esimerkissä
h1
-tyylille on määritelty kaksi ominaisuutta
font-weight
ja
font-family
.
h1 { font-weight: bold; font-family: helvetica, sans-serif; }
Tyylin ominaisuudet voivat periytyä toiselle tyylille.
Ominaisuuden periytyminen tapahtuu elementtien vaikutusalueiden
mukaan. Periytymisen yhteydessä puhutaan usein vanhempi- ja
lapsi-elementistä tai ylemmän ja alemman tason
elementistä. Vanhempi-elementillä eli ylemmän tason
elementillä tarkoitetaan rakenteellisesti ulompana olevaa
XHTML-elementtiä, jonka sisällä on lapsi eli alemman
tason -elementti. Tyypillinen esimerkki vanhempi-elementistä
eli ylemmän tason elementistä on
body
-elementti, jonka sisälle tulevat kaikki
XHTML-dokumentin sisällön rakennetta kuvaavat elementit.
Lapsi-elementistä eli alemman tason elementistä hyvin
tyypillinen esimerkki on
p
-elementti. Tyylin ominaisuudet periytyvät
esimerkin tapauksessa
body
-elementiltä
p
-elementille, jos
p
-elementissä ei ole määritelty
kyseistä ominaisuutta.
Kaikki elementtien ominaisuudet eivät ole periytyviä!
Seuraavassa esimerkissä tarkastellaan tyylien
ominaisuuksien periytymistä. Esimerkin
body
-tyyliin tehty väriominaisuus
color
periytyy automaattisesti
body
-elementin sisällä oleviin
XHTML-elementteihin. Esimerkin
body
-tyylin taustaväriksi on määritetty
keltainen ja tekstinväriksi on määritetty musta.
XHTML-dokumentissa
h1
- ja
p
-elementit sijoitetaan aina
body
-elementin sisälle. Esimerkin tapauksessa
h1
-elementin sisällä oleva teksti on mustaa,
koska ominaisuus periytyy
body
-elementistä.
p
-elementin tekstin väri on keltainen, koska
väri on määritelty uudelleen
p
-elementissä.
p-
elementin sisään tulevalle
strong
-elementille periytyy
p
-elementiltä keltainen tekstin väri.
Myös kirjasinperheen (
font-family
) ominaisuudet periytyvät
body
-elementistä
h1
- ja
p
-elementtiin. Kirjasinperheen määritykset
eivät kuitenkaan periydy
strong
-elementille, koska elementille on
määritelty omat kirjasinperheen
määritykset.
body { color: black; background-color: yellow; font-family: verdana, sans-serif; } h1 { text-align: center; } p { color: yellow; background-color: black; } strong { font-family: courier, monospace; }
Seuraavassa kuvassa edellisen esimerkin tyyleillä
muotoiltu XHTML-dokumentti.
Aivan kaikki tyylien ominaisuudet eivät kuitenkaan periydy.
Esimerkiksi
background-color
-ominaisuus ei kuulu periytyvien
ominaisuuksien joukkoon. Ominaisuus näyttää
periytyvän, koska esimerkiksi
body
-tyylin
background-color
-ominaisuus näkyy
h1-
tyylisen kappaleen taustan läpi, koska
h1
-tyyliin ei ole määritelty omaa
background-color
-ominaisuutta vaan tausta on oletuksena läpinäkyvä.
Perinnän avulla tyylitiedostoon ei tarvitse kirjoittaa
kaikkien ominaisuuksien tyylimäärittelyjä.
Esimerkiksi
body
-tyyliin määritellyt ominaisuudet
joitakin poikkeuksia lukuunottamatta periytyvät
body
-elementin sisällä oleville
elementteille.
XHTML-elementeille voidaan määritellä aliluokkia,
joiden avulla yhdelle XHTML-elementille voidaan
määritellä useita erilaisia esitystapoja.
Aliluokkien avulla saadaan jokaiselle elementille ulkoasu
käyttötarkoituksen mukaan dokumentin rakennetta
rikkomatta. Esimerkiksi normaaliteksti eli
p
-elementin sisään
määriteltävät kappaleet voidaan tehdä
erilaisiksi ulkoasultaan kappaleiden sisällön mukaan.
Kyseessä on eräänlainen kokonaan uuden tyylin
tekeminen.
Tyylien aliluokkia voidaan määritellä antamalla
tyylille alkuperäisen tyylin nimestä ja aliluokasta
muodostuva yhdistelmänimi. Uuden tyylin nimi on muotoa
tyyli.luokka
, jossa
tyyli
on alkuperäisen tyylin nimi ja
luokka
on aliluokan nimi. Tyylin ja aliluokan nimi on
erotettu toisistaan pisteella (.). Seuraavassa esimerkissä
tyylille
h1
on luotu aliluokka
h1.tarkea
.
h1
-tyylin tekstin väri on määritelty
mustaksi. Tyylistä on haluttu tehdä erillinen aliluokka,
jonka tekstin väriksi tulee punainen. Esimerkin kaltaista
h1.tarkea
aliluokkaa voidaan käyttää
otsikoissa, jotka vaativat erityistä korostamista.
h1 { background-color: white; color: black; text-align: center; } h1.tarkea { background-color: yellow; color: red; }
Seuraavassa kuvassa on esimerkin tyyleillä muotoiltu
XHTML-dokumentti. Kuten kuvasta voidaan nähdä periytyy
h1
-tyyliin määritelty keskitys myös
h1.tarkea
-tyyliin. Tämä johtuu siitä, että tyylitiedostossa on merkitystä
mihin järjestykseen tyylimäärityksiä kirjoitetaan. Tässä tapauksessa
h1
-tyylin määritykset on tehty ensimmäisenä jolloin
ne periytyvät kaikkiin jatkossa seuraaviin h1
:een kohdistuviin
määritykseen eli tässä tapauksessa h1.tarkea
-tyyliin.
Jos h1.tarkea
olisi sijoitettu tyylitiedostossa ensimmäiseksi
se ei olisi perinyt mitään h1
-tyylin määrityksiä.
Jos aliluokkaa ei haluta yhdistää mihinkään tiettyyn tyyliin, voidaan se esitellä seuraavan esimerkin mukaisesti ilman varsinaista tyylin nimeä. Aliluokkaa voi tällöin käyttää minkä tahansa elementin yhteydessä.
.tarkea { background-color: yellow; color: red; }
Varsinaisessa XHTML-dokumentissa tyylien aliluokan
käyttöönotto onnistuu
class
-attribuutin avulla seuraavan esimerkin
mukaisesti. Dokumentissa tärkeänä pidetty otsikko
halutaan nähdä punaisena ja vähemmän
tärkeä otsikko halutaan nähdä mustana. Jos
selain ei tue tyylien käyttöä, niin sekä
h1
-tyylillä sekä
h1.tarkea
-tyylillä määritellyt otsikot
näytetään selaimen oletusmuodossa. Kummatkin
otsikkotekstit on nähtävissä otsikkotasoisena, joten
dokumentin rakenne säilyy kunnossa. Aliluokkien
käytössä on erityisen tärkeää,
että aliluokat pohjataan aina rakenteellisesti oikeaan
elementtiin. Tällä tavoin varmistetaan dokumentin
näkyminen oikeassa muodossa myös selaimissa, jotka
eivät tue tyylilomakkeita. Ei siis saa määritellä p
-elementille
tyylejä jotka saavat sen näyttämään otsikolta, koska p
-elementti
tarkoittaa kappaletta eikä otsikkoa.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<link rel="StyleSheet" href="aliluokat.css" type="text/css" />
<title>CSS-esimerkeissä tarvittava tiedosto</title>
</head>
<body>
<h1>Ensimmäisen tason otsikko</h1>
<p>Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.</p>
<h1 class="tarkea">Tärkeä ensimmäisen tason otsikko</h1>
<p>Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.</p>
</body>
</html>
Asiayhteyden mukaan määräytyviä tyylejä
selvennetään seuraavien esimerkkien avulla.
Esimerkissä on
p
- ja
strong
-tyyli, joille on määritelty muutamia
ominaisuuksia.
p
-tyyliä käytetään
normaalikappaleiden muotoilemiseen ja
strong
-tyyliä käytetään erilaisten
korostusten tekemiseen.
strong
-tyylillä kirjoitettu teksti tulee aina
jonkin kappaletason elementin sisään. Seuraavassa
esimerkissä jokainen
strong
-tyylin esiintymä on aina punainen
riippumatta elementistä, jonka sisällä
strong
-elementtiä käytetään.
p { background-color: white; color: black; text-align: justify; } strong { background-color: white; color: red; }
Seuraavasta kuvasta on
nähtävissä strong
-elementillä
määritellyt kohdat. Myös
h1
-elementin sisällä on käytetty
strong
-elementtiä.
Edellisessä esimerkissä ei käytetty asiayhteyden
mukaan määräytyviä tyylejä.
Esimerkissä asiayhteyden mukaan
määräytyvänä tyylinä voitaisiin
käyttää
p
-elementin sisällä olevien
strong
-elementtien sisällön värin
muuttamista hopean harmaaksi. Seuraavassa esimerkissä on
toteutettuna kyseinen tyyli. Tyylin nimi muodostuu nyt kahden
elementin nimestä. Ensiksi annetaan sen elementin nimi, jonka
sisällä toisena olevan elementin on
esiinnyttävä. Esimerkkitapauksessa
strong
-elementti on
p
-elementin sisällä.
p strong { background-color: white; color: silver; } p { background-color: white; color: black; text-align: justify; } strong { background-color: white; color: red; }
Seuraavassa kuvassa on käytetty edellisen esimerkin
tyylitiedoa XHTML-dokumentissa. Esimerkistä on
nähtävissä, että
h1
-elementin sisällä oleva korostus on
punainen ja
p
-elementin sisällä oleva korostus on hopean
harmaa.
Edellä olevan esimerkin kaltaisia sisäkkäin
määriteltyjä tyylejä voi olla useampiakin.
Tällöin tyyli otetaan käyttöön vasta
kaikkien tyyliehtojen tullessa voimaan. Seuraavassa
esimerkissä on määritelty asiayhteyden mukaan
määräytyvä tyyli, jonka
järjestämättömän listan alkiot ovat
punaisia. Tällöin XHTML-dokumentissa olevat kahden
sisäkkäisen
ul
-elementtien sisällä olevat
li
-elementit eli lista-alkiot ovat vihreitä.
Tällä tavoin voidaan rajata tyylin käyttö
todella tapauskohtaiseksi, koska esimerkissä ainoastaan toisen
tason lista-alkiot värjätään punaiseksi.
Esimerkin tyylin määrittely ei vaikuta ollenkaan
ensimmäisen tason lista-alkioihin.
ul ul li{ background-color: white; color: green; }
Seuraavassa on esimerkkinä käytetävä listan XHTML-koodi.
<ul> <li>Listan ensimmäinen alkio</li> <li>Listan toinen alkio <ul> <li>Sisemmän listan ensimmäinen alkio</li> <li>Sisemmän listan toinen alkio</li> <li>Sisemmän listan kolmas alkio</li> </ul> </li> <li>Listan kolmas alkio</li> </ul>
Seuraavassa kuvassa edellisen esimerkin tyylien avulla muotoiltu XHTML-dokumentti. Kuvasta on nähtävissä sisemmän listan poikkeava väri.
Seuraavan esimerkin järjestämättömän listan kaikki lista-alkiot ovat punaisia riippumatta sisäkkäisten listojen tasosta. Esimerkillä on tarkoitus osoittaa, että asiayhteyden mukaan määräytyvien tyylien määrittely huomioi ainoastaan elementtien esiintymisjärjestyksen. Tällöin sisäkkäisiä listoja voi olla monia, mutta jokainen sisäkkäinen lista esitetään punaisena, koska aiemmin aloitetut listat jätetään huomioimatta.
ul li { background-color: white; color: red; }
Asiayhteyden mukaan määräytyviä tyylejä
käytettäessä voidaan käyttää
myös tyylien aliluokkia. Seuraavassa esimerkissä
esitetään punaisella kaikki sellaiset
strong
-elementit, jotka ovat jonkin
erikois
-aliluokan esiintymän
sisällä.
.erikois strong { background-color: white; color: red; }
Toisessa esimerkissä esitetään punaisella
sellaisten
strong
-elementtien sisältö, jotka ovat
nimenomaan
p
-elementin sisällä ja joiden aliluokan nimi
on
erikois
.
p.erikois strong { background-color: white; color: red; }
Asiayhteyden mukaan määräytyviä tyylejä kannattaa käyttää aina kuin vain
mahdollista koska niiden käyttäminen ei edellytä mitään muutoksia XHTML-koodiin.
Monesti asiayhteyden mukaan määräytyvillä tyyleillä voi korvata useita
aliluokkia joiden käyttäminen edellyttäisi sopivan class
-attribuutin
lisäämistä XHTML-koodiin.
Tyylimääritysten sekaan voidaan asettaa C-kielen mukaisia kommentteja. Kommentti alkaa /*-merkillä ja se loppuu */-merkkiin. Seuraavassa esimerkissä tyylin sekaan on lisätty tyylin merkityksestä kertova kommentti. Sisäkkäisiä kommentteja ei sallita, mutta kommentin voi ulottaa useammallekin riville.
strong { /* korostamiseen käytettävä tyyli */ background-color: white; color: red; }
Näennäis- eli pseudoluokat ovat tyyliluokkien
erikoistapauksia. Havainnollisin
esimerkki asiasta on linkkien värin muuttaminen
tapauskohtaisesti vierailemattoman ja vieraillun linkin
välillä. Esimerkiksi vieraillun linkin väri on ollut
erilainen kuin linkki, josta avautuvaa dokumenttia ei ole
käyty katsomassa. Tapauskohtaisten värien
määrittäminen ei ole mahdollista tyylien aliluokkien
avulla, joten siihen joudutaan käyttämään
näennäisluokkia. Käytettäessä
näennäisluokkaa tyylin nimi koostuu tyylin nimestä
ja näennäisluokan nimestä, jotka erotetaan
toisistaan kaksoispisteellä (:). Seuraavassa esimerkissä
käytetään
a
-elementin näennäisluokkaa
visited
.
a:visited {/* vierailtu linkki */
color: purple;
background-color: transparent;
}
Tyylin näennäisluokan käyttö ei aiheuta mitään lisäyksiä varsinaiseen XHTML-dokumenttiin, kuten esimerkiksi tyylin aliluokkien käyttö aiheutti.
Näennäisluokkia voidaan käyttää myös asiayhteyden mukaan toimivina ja niitä voidaan käyttää myös aliluokkien yhteydessä. Seuraavissa esimerkeissä tarkastellaan kumpaakin tapausta. Ensimmäisessä esimerkissä poistetaan kuvan ympäriltä kehys, jonka jotkin selaimet tekevät automaattisesti vierailemattomana linkkinä toimivan kuvan yhteydessä.
a:link img { border: none; }
Toisessa esimerkissä kirjasimen kokoa on suurennettu
vierailemattomissa linkeissä, jotka kuuluvat aliluokkaan
tarkea
.
a.tarkea:link { font-size:larger; }
Linkin eli
a
-elementin näennäisluokat ovat varmasti
yksi tarpeellisimmista näennäisluokkien
käyttökohteista. Linkkien näennäisluokkien
avulla voidaan dokumentin vieraillut, vierailemattomat ja
aktiiviset linkit erottaa toisistaan esimerkiksi erilaisilla
värimäärityksillä. Seuraavassa esimerkissä
esitellään linkkien erilaiset näennäisluokat.
Ensimmäisenä on vierailemattoman linkin
näennäisluokka
link
, jonka ominaisuudet saa
a
-elementin sisällä oleva teksti. Toisena on
vieraillun linkin näennäisluokka
visited
, jonka ominaisuudet
a
-elementin sisällä olevat teksti saa, jos
linkin kautta on vierailtu toisella sivulla. Kolmantena
esimerkissä on aktiivisen linkin näennäisluokka
active
, jonka ominaisuudet
a
-elementin sisällä oleva teksti saa, jos
käyttäjä on valinnut linkin aktiiviseksi esimerkiksi
hiirellä. Viimeisenä esimerkissä on näennäisluokka hover
,
jonka ominaisuudet tulevat voimaan vietäessä hiiren kohdistin linkin päälle.
a:link {/* vierailematon linkki */ color: blue; background-color: transparent; } a:visited {/* vierailtu linkki */ color: purple; background-color: transparent; } a:active {/* aktiivinen linkki */ color: red; background-color: transparent; } a:hover {/* Hiiren kohdistin on linkin päällä */ color: white; background-color: black; }
Ulkoasuun liittyvien näennäisluokkien avulla voidaan muuttaa XHTML-dokumentin ulkoasua joidenkin erikoistapausten osalta. Esimerkiksi kappaleen ensimmäinen kirjain voidaan suurentaa tai kappaleen ensimmäinen rivi voidaan sisentää muuta kappaletta sisemmäksi. Ulkoasun näennäisluokat ovat ainoastaan keinoja saada XHTML-dokumentin ulkoasusta "hienompi", mutta mitään rakenteellista merkitystä ulkoasun näennäisluokilla ei ole.
Seuraavassa esimerkissä ensimmäisen rivin
muotoilemiseen on käytetty kapiteelikirjaimia. Kappaleen
ensimmäistä riviä voidaan muotoilla
first-line-
näennäisluokan avulla.
Ensimmäisellä rivillä tarkoitetaan tässä
yhteydessä kappaleen ensimmäistä riviä, joka
näkyy selainikkunassa. Selainikkunan koon muuttuessa sivu
päivitetään uudestaan, koska ensimmäisen rivin
pituus saattaa muuttua. Ensimmäisen rivin
näennäisluokkaa voidaan käyttää ainoastaan
kappaletasoisten elementtien kanssa. Ensimmäisen rivin
näennäisluokan ominaisuuksia voidaan muuttaa
ominaisuuksien
font, color, background, word-spacing, letter-spacing,
text-decoration, vertical-align, text-transform, line-height
ja
clear
avulla.
p:first-line { font-variant: small-caps; }
Seuraavassa esimerkissä kappaleen ensimmäinen kirjain
on muutettu 200 prosenttiseksi oletuskirjasimen kokoon verrattuna.
Ensimmäisen kirjaimen ominaisuuksia
päästään muuttamaan
first-letter-
näennäisluokan avulla.
Ensimmäisen kirjaimen näennäisluokan
ominaisuuksia voidaan muuttaa ominaisuuksien
font, color, background, word-spacing, letter-spacing,
text-decoration, vertical-align, text-transform, line-height,
clear, margin, padding, border
ja
float
avulla.
p:first-letter { font-size: 200%; }
Näennäisluokkia voidaan käyttää asiayhteyden mukaan toimivina ja niitä voidaan käyttää myös aliluokkien kanssa.
Seuraavassa kuvassa on käytetty ulkoasun näennäisluokkien yhteydessä olleita esimerkkejä dokumentin ulkoasun muotoilemiseen.
Tyylin ominaisuuksien ja arvojen kirjoittamista koskevat hyvin monet säännöt. Seuraavissa kappaleissa on kerrottu tarkemmin ominaisuuksiin ja niihin liittyvien arvojen antamiseen liittyvistä asioista.
Arvojen ja ominaisuuksien kirjoittamisessa kannattaa kiinnittää huomiota muutamiin asioihin. Seuraavaan on kerätty muutamia varottavia asioita ominaisuuksien ja arvojen antamisessa sekä niitä vastaavat oikeat tavat.
Arvoille ja ominaisuuksille kelpaavat vain tiettyä muotoa olevat arvot. Mitä tahansa ominaisuutta tai arvoa ei voida antaa tyylille. Ominaisuudet ja arvot ovat hyvin tarkkoja oikeinkirjoituksesta, mutta isoilla ja pienillä kirjaimilla ei yleensä ole väliä.
Esimerkki ominaisuuden kirjoittamisesta väärin. Virhe
on aika tyypillinen, koska
bgcolor
on yksi
body
-elementin attribuutti, joten sen voi kirjoittaa
helposti myös
body
-tyylin määrittelyyn.
background-color: black;/* OIKEIN */ bgcolor: black;/* VÄÄRIN */
Arvoa ei saa laittaa minkäänlaisten lainausmerkkien väliin, koska se muuttaa arvon merkkijonoksi. Esimerkki oikeasta tavasta antaa ominaisuudelle arvo.
color: red; /* OIKEIN */ color: "red";/* VÄÄRIN */
Arvot annetaan usein pituusyksiköissä. Tällöin arvo-osassa ei saa olla välilyöntejä luvun ja yksikön välissä.
margin: 20mm;/* OIKEIN */ margin: 20 mm;/* VääRIN */
Pituuden ilmoittamisella tarkoitetaan elementin vaaka- että pystysuuntaisen pituuden tai elementin sijainnin ilmoittamista.
Suhteellinen pituus voidaan ilmaista kolmea eri
yksikköä käyttäen. Pituus voidaan ilmaista
em
-yksiköllä, jolloin kyseessä on
suhteellisen pituuden ilmoittaminen kappaleen oletuskirjasimeen
nähden. Seuraavassa esimerkissä
h1
-elementille määritellään
marginaali, joka on 1,5-kertainen kappaleen peruskirjasimen kokoon
nähden. Jos
em
-yksikköä käytetään
kirjasimen koon määrittämiseen, niin silloin
kirjasimen koko lasketaan ylemmän tason elementin kirjasinkoon
mukaan. Esimerkiksi
h1
:n kirjasinkoko laskettaisiin
body
-elementin kirjasinkoon suhteen, koska
h1
-elementti sijaitsee
body
-elementin sisällä.
h1 { margin: 1.5em }
Kokoja voidaan ilmaista myös käyttäen
px-yksikköä, joka tarkoittaa
katselulaitteen kuvapisteen kokoa. px-yksikköä ei kannata
käyttää tekstin koon muuttamiseen koska se ei järkevästi
suhteudu käyttäjän ympäristöön vaan vain lähinnä marginaalien tai reunusten
määrittelyyn.
Seuraavassa esimerkissä
h1
-tyylille määritellään yhden pikselin levyinen
musta reunus:
h1 {
border: 1px solid black
}
Elementtien pituus tai koko voidaan ilmoittaa myös
prosenttilukuna. Tällöin pituusmitta on täysin
suhteellinen kyseisen kappaleen kirjasinkokoon tai ylemmän
tason elementin kirjasinkokoon. Normaalissa XHTML-dokumentissa
prosenttiarvot täytyy antaa lainausmerkkien sisällä,
mutta tyylilomakkeissa lainausmerkkien käyttäminen
prosenttiarvojen ympärillä on kiellettyä.
Seuraavassa esimerkissä
h1
-elementin kirjasinkoko
määritellään prosentuaalisesti, jolloin sen
uusi kirjasinkoko on 1,2-kertainen ylemmän tason elementin
oletuskirjasimeen nähden.
h1 { font-size: 120%}
Tyyleissä värien määrittäminen tapahtuu muutamaa poikkeusta lukuunottamatta samalla tavoin kuin normaalissa XHTML-dokumentissa.
Värit voidaan määritellä värien
englanninkielisillä nimillä, kuten esimerkiksi
blue
. Tällaisia värejä on kuitenkin
vain kuusitoista kappaletta (
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, purple, red, silver, teal, white, ja yellow
), joten
yleensä värit joudutaan
määrittelemään heksadesimaalilukujen avulla.
Värin heksadesimaaliluku annetaan risuaitamerkin (#)
jälkeen ja yhtä RGB (RedGreenBlue)-väriä voi
vastata joko yksi- tai kaksidesimaalista heksadesimaalilukua.
Annettaessa väri yhdellä desimaalilla
täydennetään väri kaksidesimaaliseksi
tuplaamalla yksidesimaalinen arvo. Esimerkiksi
f
muutetaan muotoon
ff
. Perinteisestä XHTML-dokumentista poiketen
värit voidaan antaa myös prosenttilukuina ja
kokonaislukuina. Tällöinkin värien suhteet
määritellään kolmen RGB-värien (punainen,
vihreä ja sininen) osuuksina. Kaikkien seuraavien esimerkkien
p
-elementtien väriksi on asetettu punainen.
P { color: #f00; } P { color: #ff0000; } P { color: rgb(255, 0, 0); } P { color: rgb(100%, 0%, 0%); }
Seuraavassa esimerkissä
body
-elementille on annettu väriksi musta ja
taustaväriksi keltainen.
h1
-elementille on vastaavasti määritelty
väriksi punainen ja taustaväriksi valkea.
P
-elementille on vastaavasti määritelty
väriksi valkea ja taustan väriksi musta.
body { color: #000000; background: yellow; } h1 { color: #f00; background-color: white; } p { color: rgb(255,255,255); background-color: rgb(0%,0%,0%); }
Seuraavassa kuvassa on käytetty edellä olevia tyylin määrittelyjä XHTML-dokumentissa.
CSS1:en kaikki ominaisuudet käydään tilanpuutteen vuoksi läpi vain WWW-sivulla osoitteessa http://appro.mit.jyu.fi/doc/css1/.
Ominaisuuden nimi | Toiminta | Esimerkki |
---|---|---|
font-family | Käytettävä kirjasin | font-family: Verdana, Arial, sans-serif; |
font-size | Kirjasimen koko | font-size: 1.1em; |
color | Tekstin väri | color: black; |
background-color | Taustan väri | background-color: #ffffff; |
text-align | Tekstin tasaus | text-align: center; |
margin-left | Vasen marginaali | margin-left: 1%; |
margin-right | Oikea marginaali | margin-right: 1%; |
margin-top | Ylämarginaali | margin-top: 1em; |
margin-bottom | Alamarginaali | margin-bottom: 1em; |
border-left | Vasen raja | border-left: 1px solid black |
border-right | Oikea raja | border-right: 1px solid black |
border-top | Yläraja | border-top: 3px dotted #e0e0e0; |
border-bottom | Alaraja | border-bottom: 3px solid #000000; |
padding-left | Vasen täyte | padding-left: 0.5em; |
padding-right | Oikea täyte | padding-right: 0.5em; |
padding-top | Ylätäyte | padding-top: 1em; |
padding-bottom | Alatäyte | padding-bottom: 1em; |
float | Elementin leijutus | float: left; |
list-style-type | Listan tyyppi | list-style-type: disc; |