Päivitetty: 10.03.2003.

CSS:n yksiköt

Tämä sivu esittelee kaikki CSS1:n tukemat eri yksiköt. W3C:n määritysten mukaan CSS1:n käyttämä yksikkö on aina jokin seuraavista: Pituus, prosentti, väri tai URL. Näiden neljän eri yksikön avulla voidaan määritellä jokaisen (x)HTML elementin eri ominaisuuksien arvot.


CSS:n yksiköt

Pituus

CSS mahdollistaa paljon monipuolisemman mittojen käytön kun perinteinen HTML. Kun käytät CSS mittoja täytyy mittayksikkö (units) aina ilmoittaa, poikkeus tästä on 0 (0px on yhtä suuri 0% jne.) mutta myös sinä voidaan käyttää yksikköä kuten px.

CSS:n pituus on hieman harhaanjohtava käsite, sillä voidaan tarkoittaa mm. seuraavia asioita: Fontin koko, marginaalit, täyte, reunuksen paksuus, tekstirivin korkeus, tekstin sisennys yms. Tästä johtuen pituusarvot käyttäytyvät eri tilanteissa hieman eritavoin.

Pituusmitta voi sisältää desimaaleja, joissa erottimena käytetään Amerikkalaistyyliin pistettä (esim. 3.5cm). Myös negatiiviset arvot ovat mahdollisia jollakin ominaisuuksilla, kuten kaikilla margin-arvoilla.


Suhteelliset mitat

Suhteellisella mitalla tarkoitetaan mittaa jonka koko riippuu katselulaitteesta tai ylemmäntason elementin koosta. CSS tukee kolmen suhteellisen mittayksikön käyttöä, jotka ovat:

EM:

em-korkeusEm määrittelee kirjaimen tarvitseman maksimikorkeuden. Määritys p { font-size: 0.5em } tarkoittaa, että p-elementti on 0.5 kertaa ympäröivän elementin koko. Eli jos ympäröivän fontin koko 0n 20px niin p:n kooksi tulee 10px.

Määritys { margin: 2em } tarkoittaa, että elementin marginaali on 2 x kirjasimen koko. Eli jos fontti on 12px niin marginaaliksi tulee 24px.

Em-yksikkö on kätevä tilanteissa jossa ympäröivän elementin kokoa ei tunneta, kuten luokan yhteydessä. Esim. määritys

.laatikko { border: 0.5em solid navy }

Näyttää täysin erilaiselta <H1> -otsikon tai <P> -elementin kanssa, koska borderin koko on puolet elementin koosta.

<< Alkuun


EX:

ex-korkeusx-korkeus määrittelee yksinkertaisesti pienen x-kirjaimen tarvitseman korkeuden, josta lasketaan muiden merkkien tarvitsema korkeus.

Määritys { margin: 2ex } tarkoittaa, että elementin marginaali on kaksinkertainen verrattuna elementin x-kirjaimen korkeuteen.

Jos elementin mitta ilmoitetaan ex-yksikkönä lasketaan se ylemmäntason elementin koon perusteella. Eli esim. P-elementin koko lasketaan body -elementin fonttikoon suhteen, aivan kuten em-mitan yhteydessä.

<< Alkuun


PX:

PXPikseli eli kuvapiste, joka määritellään aina suhteessa esitysvälineeseen. Eli esim. määritys 12px tarkoitta kokoa joka on 12 kertaa katselulaitteen (tai tulosteen) pisteen koko (CSS olettaa, että piste on neliön muotoinen).

Määritys { margin: 2px } tarkoittaa, että elementin marginaali on 2x katselulaitteen pisteen koko. Pikseli määritys näyttää (näytöllä) eri resoluutiolla eri kokoiselta. Paperilla pikselin koko määräytyy tulostuksen tarkkuuden mukaan

Huomaa, että IE ei osaa skaalata tekstiä, joka on koko on määritelty pikseleinä. Voit testata tätä valitsemalla selaimesta: Näytä / Tekstin koko / Suurempi, jos käytät IE 4 -selainta valitse: Näytä / Fontit / Melko suuri. (Muista valita lopuksi normaali koko / keskikokoinen)

Jolloin tämä teksti {font-size: 14px} pysyy samankokoisena.

Tämä on huono asia heikkonäköisille ihmisille, koska tekstiä ei voi suurentaa. Kannattaakin välttää, ainakin tekstikappaleissa, pikselin käyttöä. Toisaalta jos haluat tietyn tekstin (esim. taulukon solussa tai kehyksessä) pysyvän juuri tietyn kokoisena, kannattaa käyttää pikseliä.

<< Alkuun


Absoluuttiset mitat

Absoluuttisella mitalla tarkoitetaan mittaa jolla on tarkasti jokin tietty arvo, eikä se muutu ympäristön mukaan. Tämä pätee vain tulostuksen yhtydessä. Sillä senteillä ja tuumilla määritetyt elementin koot mukautuvat näytön resoluutin mukaan. Näin ollen absolluutset mitat eivät näytöllä ole absoluuttisia

CSS tukee seuraavia absoluuttisia mittoja:

Alla vielä taulukko joka vertaa 1 tuumaa muihin mittoihin:

Tuuma
(in)
Senttimetri (cm) Millimetri
(mm)
Piste
(pt)
Pica
(pc)
1 2.54 25.4 72 6

Älä käytä absoluuttisia mittoja, ellet tiedä tarkoin esitysvälineen mittoja. Eli. absoluuttiset mitat soveltuvat paperille, mutta eivät kuvaruudulle.

Huomaa, että CSS2:n avulla voit luoda omat säännöt näytölle ja paperitulostusta varten, jolloin senttien ja tuumin käyttö on järkevää.

<< Alkuun


Prosenttimitta

%Vaikka %-yksikkö on suhteellinen mitta, W3C käsittelee sitä aivan omana kokonaisuutena.

Kun elementin pituus tai koko ilmoitetaan prosentteina, tyyliin {margin: 10%}, kyseessä on aina suhteellinen koon ilmaisu elementin kirjainsinkoon tai ylemmäntason elementin kirjasinkokoon verrattuna.

Jos <P> -elementillä on esim. määritys p { width:50% }, niin suoraan <body> -elementin P on puolet bodyn (näytön) leveydestä. Mutta jos P esiintyy esim. 500px pitkän <DIV> -elementin sisällä, on P:n pituus vain 250px. Eli prosenttimitta lasketaan aina ylemmäntason elementin koon perusteella.

<< Alkuun


URL

CSS1 tukee kolmea ominaisuutta jotka ottavat vastaan URL-osoitteen. Nämä ominaisuudet ovat: background-image, list-style-image sekä list-style, lisäksi @import-sääntö käyttää URL-arvoa.

Kaikkiin yllä mainittuihin ominaisuuksiin pääte seuraavat säännöt:

Eli esim. seuraavat muodot ovat oikein:

url(kuva.gif);

url('../img/kuva.gif');

url("http://www.jotain.com/img.gif");

!IE selaimet hyväksyvät myös virheellisesti annetut säännöt (esim. jos sulut tai url -sana puuttuu). Käytä kuitenkin aina oikeaa url() -muotoa.

<< Alkuun


Värit

CSS käyttää samaa värien määritystekniikkaa kuin HTML, eli värit määritellään RGB -arvoilla käyttäen Hex-desimaaleja tai kirjoittamalla suoraan värin nimi (Keywords). CSS mahdollistaa myös desimaalien käytön värin määrittelyssä.

Suuri parannus värien käytössä perinteiseen HTML-kieleen verrattuna on se, että CSS:n avulla lähes mille tahansa (x)HTM -elementille voidaan määritellä väri ja taustaväri. Ennen varsinaisia CSS:n väri määrityksiä kertaan kuitenkin käsitteet RGB sekä 51-sääntö.

RGB

RGB (Red Green Blue) on tietokoneessa yleisesti käytettävä värienmääritystekniikka. Jokainen väri (punainen, vihreä ja sininen) voi saada väriarvon väliltä 0-255.

Määritys 0 tarkoitta ettei kyseitä väri käytetä lainkaan ja 255 puolestaan tarkoittaa, että kyseinen väri on 'täysillä'.

Tietokone käyttää yleensä hex-muotoa, jossa arvo 0 on 00 ja 255 on FF. Näin esimerkiksi musta väri saadaan aikaiseksi antamalla punaiselle, vihreälle ja siniselle arvot 0. Eli Hex muodossa #000000 tai lyhennytyssä muodossa #000.

Huomaa, että RGB-arvon eteen täytyy lisätä aina risuaita-merkki ( # ). Vastaavasi valkoinen väri on saadaan kun jokainen RGB-arvo on FF eli #FFFFFF, tai lyhyt muoto #FFF.

Jos haluat esim. täysin punaista laitetaan R-arvo täysille (FF) ja muut nollalle (00) näin punain väri on siis #FF0000 tai #F00.

51-sääntö

Jos haluat käyttää ns. web-turvallisia värejä, eli värejä jotka näkyvät kaikilla käyttäjillä samalla tavalla, sinun tulee noudattaa 51-sääntö.

51-sääntö tarkoittaa, että käytät RGB -arvoissa vain desimaaleja: 0, 51, 102, 153, 204 ja 255. eli 51:n kerrannaisia. Näitä värejä yhdistämällä voidaan luoda 216 eri väriä.

Alla olevassa taulukossa on esitetty vastaavat Hex- ja %-arvot. (Koska WWW-sivuilla käytetään yleensä Hex-arvoja olisi 33-sääntö ehkä osuvampi kuvaus)

Des. Hex %
0 00 0
51 33 20
102 66 40
153 99 60
204 CC 80
255 FF 100

<< Alkuun


Css:n värimääritykset

Perinteisesti HTML-kielessä värit on annettu hex-muodossa. Sinulle joka et niistä pidä CSS tuo ilouutisen, se sallii värien ilmoittamisen suoraan RGB -arvoilla, myös prosenttimääritteet ovat mahdollisia. Alla olevat värimääritteet tuottavat kaikki sinistä väriä.

Hex-muodot:
#0000FF RGB -arvo heksadesimaalimuodossa sama kun HTML:ssä (suositeltava).
#00F sama lyhennetyssä muodossa. Lyhyttä muoto voidaan käyttää vain 51-säännön luvuilla, joissa jokainen värin (RGB) kaksinumeroisesta luvusta annetaan vain yksi. Eli #003366 on #036. Vastaavasti #9CF on #99CCFF.
RGB-muodot:
rgb(0,0,255) RGB -arvot desimaalimuodossa. (0-255)
rgb(0%,0%,100%) RGB -arvot prosentteina.
Avainsana:
blue Värin nimi, sama kun HTML:ssä (suositeltava).

Avainsanat

Avainsanat (Keyword) ovat värien määrityksessä kätevä apu. Voit yksinkertaisesti kirjoittaa värin Englanninkielisen nimen, ilman mitään RGB -määritteitä.

Alunperin HTML-kieleen (ja CSS1:n) oli määritelty 16 kpl avainsanoja, jota oli helppo muistaa ja jotka toimivat varmasti kaikissa laiteympäristöissä.Nämä värit ovat:

Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White ja Yellow.

Väri Nimi

 

Aqua
  Black
  Blue
  Fuchsia
  Gray
  Green
  Lime
  Maroon
  Navy
  Olive
  Purple
  Red
  Silver
  Teal
  White
  Yellow

Myöhemmin Netscape otti selaimissaan käyttöön 140 eri avainsanaa, joita myös muut selaimet alkoivat tukea. Nykyisin kaikki uudet selaimet tunnistavat ne.

Vaikka 140 värin laajennuttupaletti ei kuulu viralliseen CSS1 (tai CSS2) määrittelyyn, ovat ne kuitenkin mukana CSS3 ehdotuksessa. Listaus 140 värin valikoimasta on nyt omana sivunaan ks. color140

Avainsana voi määrittää elementin-, reunuksen- tai taustanvärin. Taustavärien yhteydessä voidaan käyttää myös avainsanaa transparent. Joka tarkoittaa, että kyseisen elementin taustaväri on läpinäkyvä, tämä onkin oletusarvo kaikilla elementeillä.

<< Alkuun


Avainsanat

Eri pituus- ja väriarvot voidaan antaa avainsanana (Keyword), se helppo tapa määritellä ominaisuuden arvo. CSS1 tukee useita eri avainsanoja, jolla ominaisuuden arvo voidaan määritellä yksinkertaisesti kirjoittamalla halutun arvon Englanninkielisen nimen, esim. font: large.

CSS1 tukee eri yksiköiden käytönyhteydessä seuraavia avainsanoja:

Tekstin lihotusarvo:
bold, bolder ja lighter
Laatikon reunanpaksuus:
thin, medium ja thick
Laatikon reunus
none, dotted, dashed, solid, double, groove, ridge, inset ja outset
Fontinkoko
xx-small, x-small, small, medium, large, x-large ja xx-large sekä smaller ja larger
Värit
Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White ja Yellow.

<< Alkuun


© Petteri Perälä 1999 - 2003.
E-mail: [ petepe@mbnet.fi ].

Valid CSS! Valid HTML 4.01!