Yleistä CSS:n käytöstä
CSS eli tyylimäärittelyn taustaa ja käytön mahdollisuudet
CSS:n muoto ja rakenne
(Lainaus: Vuokko Nurmesniemi: http://myy.helia.fi/~vanvu/html/tyylisivut.html)
CSS on muotoa:
selektori { ominaisuus: arvo; }
esim. p { color: blue; }*
Tällaista kokonaisuutta kutsutaan deklaraatioksi.
Jos usealla elementillä on sama esittely, ne erotetaan pilkulla
h1, h2, p { color: blue; }
Jos ominaisuudella on useita arvoja, ne erotetaan pilkulla,
jos elementillä on useita ominaisuuksia, ne erotetaan puolipilkulla:
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
<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
<style type="text/css"> p {font-size: 12px;} </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
- Tyylitiedoston linkittäminen:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
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
Selektori on css:llä määriteltävä kohde. Selektoreiden avulla deklaraatiot yhdistetään html-dokumentissa sijaitseviin kohteisiin.
Yleistietoa selektoreista: http://www.w3.org/TR/CSS2/selector.html
Yleisselektori (Universal selector)
Kontekstiselektori, esim. sisalto ul li
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.
Firefox ja Opera tukevat CSS:n uusimpia ominaisuuksia paremmin kuin IE. Siksi niillä voidaan kokeilla ja kehitellä sivuja, jotka hyödyntävät CSS:ää monipuolisesti.
Lisäksi on hyödyllistä kokeilla ja tuntea myös muita käytössä olevia selaimia, vaikka niiden käyttäjäkunta onkin pienempi kuin em. selainten.
Tekstin muotoilu CSS:n avulla
Esimerkkejä:
- fontin asettaminen
- tekstin väri
- fonttikoko
- tekstin taustaväri
- merkkien välit
- sanojen välit
- rivinkorkeus
- tekstin koristelu
Linkkien muotoilu
Linkkien muotoilu: ns. pseudo-luokat
Muita ulkoasun muotoiluja CSS:ssä:
Harjoituksia
Harjoitus 1
1. Avaa Notepad
2. Lisää tyylitiedostoon perustyylejä: body, p, a (+ pseudoluokat), eri otsikkotasot.
Esim.body
3. Tallenna tyylitiedosto samaan kansioon kuin muutkin harjoitukset css-nimiseen kansioon nimellä tyyli1.css
4. Avaa viime kerralla tehty harjoitussivu, joka sisältää kuvia ja tekstiä.
5. Linkitä tyyli.css -tiedosto harjoitussivuun LINK-määritteellä
6. Tallenna tyylitiedosto ja esikatsele html-sivu selaimessa
Harjoitus 2
1. Avaa loputkin viime kerralla tehdyt harjoitukset ja linkitä tyyli1.css-tiedosto niihin
2. Katso lopputulosta selaimessa
3. Muokkaa tyylitiedostoa, jos vielä tarpeen
Harjoitus 3
1. Luo uusi html-sivu perusrakenteineen ja tallenna se omaan kansioosi.
2. Valitse kolme kuvaa sivulta http://www.sxc.hu/ ja lisää ne sivulle peräkkäin
3. Luo uusi tyylitiedosto ja