Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

CSS on muotoa:

...

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

CSS:n liittäminen html-sivuun

Tyylimäärittelyiden liittäminen

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

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

1. HTML-elementtiin upottaminen
Tyylimäärittely voidaan kirjoittaa HTML-dokumentissa sen elementin alkutunnisteeseen, missä sitä halutaan käyttää style-attribuuttia käyttäen. Tämä määrittely ohittaa kaikki muut määrittelyt:
Esim <p> -elementin fontin koko voidaan määritellä kappaleen alkutunnisteessa seuraavasti:
<p style="font-size: 12px">Tämän tekstin fonttikoko on 12 pikseliä</p>
Tämä määrää kappaleen fontin koon, vaikka <p>-elementin koko olisi määritelty kohdassa 2 ja/tai 3 mainituilla tavoilla.

2. HTML-dokumenttiin upottaminen
Tyylit voidaan kirjoittaa HEAD-lohkoon <style> ...</style> -tunnisteiden väliin.

3. Erillinen tyylitiedosto
Tyylit voidaan määrittää erillisessä tyylitiedostossa, joka liitetään HTML-dokumenttiin.Tiedosto liitetään HTML-dokumenttiin HEAD-lohkossa LINK-tunnisteella. Tämä on suositeltava tapa, koska sama tyylitiedosto voidaan helposti liittää mihin dokumenttiin tahansa. Otetaan huomioon, jos edellisissä ei ole määritelty.

Jos samalle elementin ominaisuudelle esim. fontin koko on tehty tyylimäärittely vaikkapa noissa kaikilla edellä mainituilla tavoilla, noudatetaan tyylejä seuraavassa järjestyksessä:
1. ensisijaisesti otetaan huomioon elementin alkutunnisteessa määritelty tyyli eli kohta 1.
2. seuraavaksi HEAD-lohkossa määritetty tyyli eli kohta 2.
3. viimeiseksi ulkoisessa tyylitiedostossa määritelty tyyli eli kohta 3.

CSS:n muoto ja rakenne

Tärkeimmät selektorit


No Format

selektori { ominaisuus: 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; }

Jos ominaisuudella on useita arvoja, ne erotetaan pilkulla,
jos elementillä on useita ominaisuuksia, ne erotetaan puolipilkulla:

No Format

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

Tyyliohjeiden soveltaminen

ks. span-tagin käyttö

     div-tagin käyttö

   display-ominaisuus

Muita ulkoasun muotoiluja CSS:ssä

Yleistä

Värin ja taustavärin ominaisuudet

Elementin raja, täyte ja marginaalit

Muut elementin ominaisuudet

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

Esimerkkejä:

Valideja CSS-pohjia: Template World

...