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. Kirjoita css-määrittelun mukaisia perustyylejä elementeille body, p, a (+ pseudoluokat) sekä eri otsikkotasot.
Esim.
body
{ background-color : #FFFFFF;
font-family : Verdana, Arial, sans-serif;
color : #000088;
margin: 0px;
}
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. Avaa viime kerralla tehty harjoitus, jossa on tekstiä nokkaeläimestä (platypus)
2. Värjää jokainen tekstikappale eriväriseksi määrittelemällä p-elementille uusia luokkia (.class) tyylitiedostoon
3. Muuta vielä tekstikappaleiden kokoa siten, että joka toisen kappaleen fonttikoko on 12 px ja ja joka toisen 16 px
4. Lisää 20 pikseliä marginaalia kappaleiden oikeaan ja vasempaan reunaan
5. Tallenna ja esikatsele
Harjoitus 4
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 ja tallenna se css-nimiseen kansioon nimellä kuvat.css
4. Tee jokaiselle kuvalle oma luokka (.class) tyylitiedostoo. Määrittele luokassa jokaiselle kuvalle erilainen reunaviiva, marginaali ja täyte (padding)
5. Muut kuvien leveyksiä siten, että ensimmäisen leveys on 30%, toisen 50% ja kolmannen 100%
6. Tallenna ja katsele selaimessa
Lisätehtävä nopeille:
Tutustu clip-elementin toimintaan: http://www.w3schools.com/css/tryit.asp?filename=trycss_clip
Leikkaa kuvista reunat pois clip-elementin avulla.
Harjoitus 5: Käyntikorttina toimivan sivuston luominen
Luo