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

CSS ja mediatyypit

Sivutettu media - tulosteet

Sivutettu media, kuten tulosteet ja projektori, eroavat normaalista esityksestä siinä, että katseltava dokumentti jaetaan useampaan osaan eli sivuun vierityksen sijasta. Tämän takia CSS 2 esittelee nk. sivutetulle medialle oman, normaalista CSS:n laatikkomallista laajennetun säännöstönsä, joka ottaa huomioon mm. sivunvaihdot, orporivit ym. keskeiset tekijät.

Sivutettu media Sivutetun median kuvaamiseen CSS käyttää nk. sivulaatikkoa, jota ilmentää kooditasolla at-sääntöä @page. Sivulaatikko koostuu kahdesta osasta; sisällöstä ja reuna-alueesta (eli marginaaleista) jotka muodostavat yksittäisen sivun. @page-esittelylohkon sisällä ilmoitetaan lisäksi sisällön elementtejä koskevat tyylisäännöt.

Sivutetun median arvoja hyödyntäessä tulisi ottaa huomioon median omat rajoitukset. Esim. näyttöön pohjautuvia mittayksikköjä (em ja ex) tulisi välttää.

Sivulaatikon luominen

Sivulaatikko luodaan at-säännöllä @page. Esimerkki:

@page {
/* tulosteet tyylit tänne*/
}

Sivulaatikon koko määritetään ominaisuudella size. Jos sivulaatikon koon arvoksi annetaan vain yksi arvo, vastaa se kaikkia sivuja. Tulostuva alue on siis tällöin neliön muotoinen. Antamalla kaksi arvoa ilmaistaan ensin leveys, sitten korkeus. Sivulaatikon koko määritellään antamalla ominaisuudelle jokin seuraavista arvoista:

auto : Sivulaatikko noudattaa paperin kokoa ja suuntaa.
landscape: Sivulaatikko noudattaa paperin kokoa ja suuntaa vaakasuunnassa.
portrait: Sivulaatikko noudattaa paperin kokoa ja suuntaa pystysuunnassa.
inherit: Arvo peritään.
absoluuttinen tai suhteellinen mittayksikkö (prosenttiarvot eivät ole sallittuja ja näyttöön suhteutettuja arvoja suositellaan vältettävän)

Reuna-alue (marginaalit) määritetään ominaisuudella ominaisuudella margin. Marginaaleja määritettäessä tulee ottaa huomioon, että ne luodaan sivulaatikon sisällä olevan sisällön marginaaleiksi

@page {

  / A4 arkki tuumina */
  size:	8.26in 11.69in; 

  /* 2cm marginaali */
  margin:2cm; 
}

Tutustu artikkelin muihin osiin:
»»» CSS »»»Mediatyypit
»»» CSS »»»Sivutettu media - tulosteen koon määrittäminen
»»» CSS »»»Sivutettu media - tulosteen tehokas hallinta
»»» CSS »»» CSS ja ääni (nk. aural-tyylit)

CSS-opas

CSS ja mediatyypit

Sivutettu media - tulosteet

Sivulaatikon luominen

Tallenna tämä sivu kirjanmerkkeihin!