...
- 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:
No Format <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)
...
Harjoituksia
Harjoitus 1
1. Avaa Notepad
2. Kirjoita css-määrittelun mukaisia perustyylejä elementeille body, p, a (+ pseudoluokat) sekä eri otsikkotasot.
| No Format |
|---|
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
...
...
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
...
...
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
...