Tyyleissä käytettävät arvot ja ominaisuudet
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 oikeinkirjoittaminen
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 ilmoittaminen
Pituuden ilmoittamisella tarkoitetaan elementin vaaka- että pystysuuntaisen pituuden tai elementin sijainnin ilmoittamista.
Suhteelliset pituusmitat
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
}
Prosenttien ilmoittaminen
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%}
Värien ilmoittaminen
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.
Käyttäjien kommentit