Page History

Yleistä CSS:n käytöstä

CSS:n muoto ja rakenne

(Lainaus: Vuokko Nurmesniemi: http://myy.helia.fi/~vanvu/html/tyylisivut.html)

CSS on muotoa:

No Format
elementtiselektori { ominaisuus: ominaisuuden_arvo; } esim. p { color: blue; }*

Tällaista kokonaisuutta kutsutaan deklaraatioksi.

Jos usealla elementillä on sama esittely, ne erotetaan pilkulla:

No Format
h1, h2, p { color: blue; }

...

No Format
h1 {font-family: arial, sans-serif; font-size: 12pt;}

Tyylimäärittelyn liittäminen html-sivuun

Tyylimäärittely voidaan liittää HTML-dokumenttiin kolmella tavalla:

1. HTML-elementtiin upottaminen

Määrittely kirjoitetaan HTML-dokumentissa sen elementin alkutunnisteeseen, jonka ulkoasua halutaan muokata

Määrittely ohittaa kaikki muut määrittelyt

No Format
<p style="font-size: 12px">Tämän tekstin fonttikoko on 12 pikseliä</p>

2. HTML-dokumenttiin upottaminen

Määrittely kirjoitetaan HTML-dokumentin HEAD-lohkoon
No Format
<style> tähän esimerkki </style>

3. Erillinen tyylitiedosto

Ulkoasu määritellään erilliseen tyylitiedostoon
Tiedosto liitetään HTML-dokumenttiin HEAD-lohkossa LINK-tunnisteella
Suositeltava tapa, koska sama tyylitiedosto voidaan helposti liittää mihin dokumenttiin tahansa.

Määrittelyiden vaikutus html-sivuun:
Jos ulkoasun määrittely on tehty eri kahdella tai useammalla tavalla, ne vaikuttavat ulkoasuun tässä järjestyksessä:
1. Ensisijaisesti huomioidaan yksittäisen html-elementin tyyli (kohta 1)
2. Toiseksi HEAD-lohkossa määritetty tyyli (kohta 2)
3. Kolmanneksi ulkoisessa tyylitiedostossa määritelty tyyli (kohta 3)

Tärkeimmät selektorit

http://www.w3.org/TR/CSS2/selector.html
    - yleisselektori *
    - luokkaselektori class
    - tunnisteselektori id
    - kontekstiselektori, esim. sisalto ul li

...