CSS-opas

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2008!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

Syntaksi ja arvot pt.3

Ominaisuudet

CSS 1 ja CSS 2 määrittelyjen perusteella käytettävissä olevia ominaisuuksia on noin 120 erilaista. Tutustu:CSS:n näytöllä käytettävät ominaisuudet, CSS:n Aural ominaisuudet -listauksiin.

Arvot ja mittayksiköt

Kaikkein yksiselitteisin arvojoukko ovat nk. ominaisuuden sisäänrakennetut arvot. Esim. list-style-position-ominaisuuden mahdolliset sisäänrakennetut arvot ovat "inside", "outside" tai "inherit".

Merkkijonoarvot tulee sijoittain lainausmerkkien (' tai ") sisällä. CSS-tiedostossa käytettävän merkistön enkoodaus voidaan ilmoittaa seuraavasti:

HTTP-otsikon charset parametrilla Content-Type kentässä (tärkein)
@charset -säännöllä
Dokumenttiin viitatessa, esimerkiksi HTML:ssä link-elementin charset- attribuutilla (vähiten tärkeä)

Numeerisissa arvoissa käytetään desimaalierottimena aina pistettä (ei pilkkua, kuten normaalissa Suomalaisessa käytännössä). Mittayksikkö merkitään välittömästi arvon jälkeen ilman välilyöntiä. Nolla-arvon jälkeen ei mittayksikköä tarvitse (ja joisain tilanteissa ei saa) merkitä. Mittayksiköt voivat olla joko suhteellisia tai absoluuttisia.

Suhteellinen mittayksikkö: Suhteelliset mittayksiköt määrittävät arvon verrattuna johonkin toiseen mittayksikköön tai arvoon.
Absoluuttinen mittayksikkö: Absoluuttiset mittayksiköt ovat kiinteitä.

Suhteellisia arvoja pyritään suosimaan, sillä ne skaalautuvat helpommin erilaisiin medioihin ja näyttökokoihin / resoluutioihin. Absoluuttisia mittoja tulisi välttää, ellei esitysväline ja sen ominaisuudet ole tarkoin tiedossa (esim. tulostus).

Absoluuttiset mittayksiköt
Mittayksikkö	Seloste
in	tuuma eli 2,54cm
cm	senttimetri
mm	millimetri
pt	piste eli 0,353 mm
pc	pica, 1pica = 12pt = 4,24mm

Suhteelliset mittayksiköt
Mittayksikkö	Seloste
em	Kirjasinlajin korkeus. Se määritetään korkeudeksi, jonka tietyn korkuinen kirjasinlaji tarvitsee, mukaan lukien aksenttimerkki ja perusviivan alle menevä osa.
ex	x-korkeus. Määrittää pienen x-kirjaimen peruskorkeudeksi.
px	Pikselit eli kuvapisteet, jotka määritetään suhteessa esitysvälinetyyppiin.
%	Prosenttiarvot ilmaistaan aina suhteessa johonkin toiseen arvoon, yleensä vanhemman vastaavaan ominaisuuteen. Kuten muidenkin suhteellisten arvojen kohdalla, lapsielementti perii tavallisesti lasketun arvon, ei siis alkuperäistä prosenttiarvoa. Esim. body-elementin leveys on 80% ja sen sisällä olevan div-elementin leveys on 80%. Siis div-elementin leveys nk. viewportista on 64%

Esimerkki:

@media screen {
  body {
   margin-left:10% 
   margin-top: 0;
   margin-right:10%;
   margin-bottom:2em;
   font-size:0.8em;
}
@media print {
  body {
   margin-top: 2cm;}
   margin-left: 2cm;
   margin-right: 2cm;
   font-size: 12px;
}
}

Jotkut ominaisuudet voivat saada arvokseen URI- tai URL-arvon. Tällöin arvo voidaan sijoittaa lainausmerkkien sisään, mutta se ei ole pakollista. Esim:

list-style-image:url(/kuvat/ikoni.gif)

Väriarvot voidaan ilmoittaa CSS:ssä useilla tavoilla, mutta tavallisinta on käyttää värin avainsanaa tai heksadesimaalimuodossa olevaa RGB-arvoa. CSS2 antaa normaalin väriskaalan lisäksi mahdollisuuden viitata käyttäjän järjestelmässä oleviin väreihin. Esimerkki:

body {
  color: #FF0000; 
  background-color:white;
}

Aural-tyylimäärittelyjä on tarjolla valikoima ääni-mediaan liittyviä mittayksiköitä. Kulma-arvoja käytetään äänen suunnan, aikaa äänen keston ja taajuutta äänen korkeuden määrittelemiseksi.

Äänen määrittelyssä käytetyt mittayksiköt
Mittayksikkö	Seloste	Rajoitukset
deg	Kulma asteina (0-360°)	Voi olla myös negatiivinen.
Grad	Kulma gradientteina (0-400)
rad	Kulma radiaaneina (0-2p)
ms	Aika (millisekunteina)	Arvojen pitää olla positiivisia.
s	Aika (sekunteina)
Hz	Taajuus (hertseinä)	Arvojen pitää olla positiivisia.
kHz	Taajuss (kilohertseinä)

Korkein ihmisen kuulema taajuus 20 kHz, ja alin ihmisen kuulema taajuus 20 KHz .

Tutustu artikkelin muihin osiin:
»»» CSS »»»CSS-kielen perussyntaksi
»»» CSS »»»Valitsin esittelylohko
»»» CSS »»»Ominaisuudet ja arvot
»»» CSS »»»Kommentit
»»» CSS »»»@säännöt

CSS-opas

Syntaksi ja arvot pt.3

Ominaisuudet

Arvot ja mittayksiköt

Tallenna tämä sivu kirjanmerkkeihin!