Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Yleistä CSS:n käytöstä

CSS eli tyylimäärittelyn taustaa ja käytön mahdollisuudet

CSS Wikipediassa

Tyyliohjeet yleisesti

CSS:n muoto ja rakenne

CSS on muotoa:

No Format
selektori { ominaisuus: arvo; }

esim. 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:

...

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)

Tyyliohjeiden soveltaminen

ks. span-tagin käyttö

     div-tagin käyttö

   display-ominaisuus

Tärkeimmät selektorit

Selektori on css:llä määriteltävä kohde. Selektoreiden avulla deklaraatiot yhdistetään html-dokumentissa sijaitseviin kohteisiin.

...

Kontekstiselektori, esim. sisalto ul li

Selektoreiden yhteenveto

CSS ja selainten tuki

Sivujen toimivuus on välttämätöntä tarkistaa etenkin IE 6 ja 7 -versioilla, joita valtaosa käyttäjistä käyttää.
Vanhat selaimet tukevat vain CSS 1.

...

Tärkeimmät CSS-ominaisuudet

Tekstin muotoilu CSS:n avulla

Kirjasimen ominaisuudet

Tekstin ulkoasun muuntelu (W3 Schools)

...

Linkkien muotoilu

Linkkien muotoilu: ns. pseudo-luokat

Muita ulkoasun muotoiluja CSS:ssä

Yleistä

Värin ja taustavärin ominaisuudet

...

Täydellinen lista CSS:n ominaisuuksista (CSS1, CSS2, CSS3)

Esimerkkejä:

Valideja CSS-pohjia: Template World