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-kielen perusteet: syntaksi ja arvot

@-säännöt

@-sääntöjen avulla voidaan kohdentaa esittelylohkon sisällä oleva CSS-sääntöjoukko määrättyyn toimintoon. @sääntö voi olla tyypiltään nk:

@import-sääntö: @import esittelylohkon avulla CSS-tyylimäärittelyyn voidaan tuoda ulkoisia CSS-tyylitiedostoja. @import-rakenteella tuodut tyylimäärittelyt yhdistetään cascade-prosessin aikana osaksi tuontioperaation aloittanutta CSS-tyylimäärittelyä.
@media-sääntö: @media-esittelylohkon avulla määrätyt CSS-tyylimäärittelyt voidaan kohdentaa määrättyyn mediaan, esim. tulostukseen tai näytölle.
@page-sääntö: @page-esittelylohkon avulla voidaan määritellä tulostusmediaa varten nk. sivulaatikko ja sille paperinkoko, marginaalit ym. edistyneitä asetuksia.
@font-face-sääntö: @font-face esittelylohko mahdollistaa "ei standardien" fonttien hyödyntämisen www-julkaisuissa.
@charset-sääntö: Määrittää CSS-tiedostossa käytettävän merkistön. Yleensä merkistöä ei tarvitse vaihtaa.

Työn alla oleva CSS 3 määrittely näyttäisi kirjoittamisen hetkellä tuovan ainakin kaksi uutta at-sääntöä.

@page ja @font-face säännöt ovat osa CSS 2 määrittelyä. CSS 2.1 määrittelyssä ne on poistettu ja niitä ei tulisi hyödyntää. On mahdollista, että em. säännöt palaavat CSS 3 määrittelyn myötä.

At-sääntö alkaa aina @-merkillä, jota seuraa välittömästi määritin, joka kertoo säännön tyypin (kts. yllä oleva listaus).

At-sääntö loppuu aina joko puolipisteeseen tai @-esittelylohkon lopetusmerkkiin.

@import ja ulkoisen tyylitiedoston tuominen

Ulkoisen tyylitiedoston tuominen osaksi olemassaolevaa tyylitiedostoa tapahtuu at-säännöllä @import, jota seuraa välilyönnillä erotettuna url-arvo tuotavaan CSS-tiedostoon. Kaikki modernit selaimet tukevat @import-sääntöä.

Esimerkki:

 @import url(tyyli.css);

@import-sääntöä käytetään hyvin usein HTML/XHTML-dokumentissa style-elementin sisällä estämään erittäin vanhoja UA-laitteita (esim. Netscape Navigator 4) lukemasta tyylitiedoston sisältöä:

...
<style type="text/css" media="all">
<!--
@import url(tyyli.css);
-->
</style>
...

@media ja tyylien kohdistaminen esitysmediaan

@media-säännön avulla liitetään joukko sääntöjä määrättyyn esitysmediaan. @media-sääntöä täytyy välittömästi seurata mediatyypin määrittely. Kaikki modernit selaimet tukevat @media-sääntöä ainakin mediatyyppien all, print ja screen osalta, osa laajemminkin.

Mahdolliset mediatyypin arvot ovat:

CSS:n määrittelemät mediatyypit
Mediatyyppi	Kuvaus
all	Käytetään kaikkia esitysvälinemuotoja varten
aural	Ääni, joka esitetään puhesyntetisaattorin kautta
braille	Braille-kuvaruudut näkövammaisille
embossed	Tulostus Braille-kirjoittimelle (pistekirjoituksena)
handheld	Käsimikrot tai PDA-laitteet joissa on rajoitetusti värejä, pieni kuvaruutu ja rajoittuneet grafiikkaominaisuudet.
print	Paperitulosteet
projection	Datasiirtoheittimet ja vastaavat
screen	Tietokoneen näyttö (oletusarvo)
tty	Merkkipohjaiset kuvaruudut, joissa ei voi esittää grafiikkaa
tv	Televisiotyyppiset kuvaruudut, joissa on matala erottelukyky ja rajoitetut kuvaruudun vieritysmahdollisuudet

Alla olevassa esimerkissä oletusfontti näytöllä tapahtuvassa esityksessä on isompi kuin tulostetussa dokumentissa. Lisäksi hyperlinkit esitetään tulostetussa versiossa alleviivattuina.

@media screen {
  body {font: Verdana 1em; }
  a {text-decoration:none;}
}
@media print {
  body {font: Arial 0.8em; }
  a {text-decoration:underline;}
}

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

CSS-opas

CSS-kielen perusteet: syntaksi ja arvot

@-säännöt

@import ja ulkoisen tyylitiedoston tuominen

@media ja tyylien kohdistaminen esitysmediaan

Tallenna tämä sivu kirjanmerkkeihin!