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 {
#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) tyylitiedostoon. Määrittele luokassa jokaiselle kuvalle erilainen reunaviiva, marginaali ja täyte (padding)
5. Muuta kuvien leveyksiä siten, että ensimmäisen leveys on 10%, toisen 30% ja kolmannen 50%.
6. Lisää kuviin marginaalia.
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
Tee 3-4 sivun kokonaisuus, johon teet ulkoisen tyylitiedoston.
Sivun tarkoituksen on toimia kuvitteellisen mainostoimiston käyntikorttina verkossa. Sivulle tulee lyhyt kuvaus yrityksen toiminnasta, yhteystiedot ja linkkejä yrityksen toteuttamiin sivuihin.
Käytä sivulla ainakin seuraavia elementtejä:
- taustaväri (esim. navigaatiossa olevien linkkien taakse)
- kuvituskuva / taustakuva
- leipätekstin muotoilu (tekstin koko, rivivälit, rivinkorkeus)
- marginaalit ja täyte elementtien asettamisessa