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.

Graphic12
Kuva 12: Esimerkki erilaisista värimäärityksistä.

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/doc/tyovaline/css/index11.html
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2003-09-23 16:21:09
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto