...
- 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)
...
Harjoitus 1
1. Avaa Notepad
2. Lisää tyylitiedostoon perustyylejä: 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ä
...
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
...
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