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