Etsi sivuiltani:

	Aihepiiriluettelo > CSS-oppaan etusivu > Harjoittelu > Harjoitustehtäviä

Harjoitustehtäviä

Aiheet

• Yleistä
• Sivu 2., Miten CSS liitetään Web-sivuihin
• Sivu 3., Mitkä ovat CSS:n mittayksiköt, värit ja avainsanat
• Sivu 4., Mitä ovat valitsimet, luokat ja id-attribuutit
• Sivu 5., Mikä on CSS:n prosessointijärjestys
• Sivu 6., Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille
• Sivu 7., Miten CSS liitetään ankkureille ja linkeille
• Sivu 8., Miten CSS annetaan elementtien taustoille ja reunoille
• Sivu 9., Miten CSS annetaan listaelementeille
• Sivu 10., Miten CSS annetaan taulukkoelementeille
• Sivu 11., Mikä on CSS2:n Visuaalinen muotoilumalli

Yleistä

Sivustolla on mukana tiedostot Oppilas.html ja Oppilas2.html. Tehtävät on ensisijaisesti tarkoitus suorittaa sivulle Oppilas2.html or siitä jatkolinkitetyille sivuille. Toki mitä tahansa tiedostoa voi käyttää. Collected.php3, Opettaja.html, collected.css ja collected.txt ovat malleina.

Huomautus. Osa tehtävistä on tarkoitettu kaikille selaimille, mutta osa vain joillekin selaimille. Harkitse, mitä asioita voit milläkin selaimella toteuttaa. Moni tehtävissä mainittu CSS ei toimi Netcape 4.x -sarjassa kunnolla tai ei lainkaan. Tee vähintään yksi tiedosto Netscape 4.x -selainsarjalle (esim. Netscape4x.css) ja muita selaimia ajatellen useita tiedostoja. Käytä joko JavaScript tai serveripuolen koodausta (ks. erillissivulla olevat ohjeet). Mikäli toisin ei ole mainittu, tehtävät koskevat kaikkia selaimia.

Käytän seuraavia lyhenteitä:

• IE = Microsoft Internet Explorer.
• NS = Netscape.
• OP = Opera.

Sivu 2., Miten CSS liitetään Web-sivuihin

1. Määrittele jollekin kappaleelle tyyliattribuutti (style=""). Ominaisuutena olkoon color. Anna väri (esim. color:...) kuusidigitaalisena heksadesimaaliarvona (#121212) kuten HTML-attribuuteissakin on tapana.
2. Määrittele linkitettyjä tyylisivuja ja tallenna ne joillakin nimillä. Muista laittaa elementille LINK kaikki tarvittavat HTML-attribuutit!
3. Kirjoita tekemiisi CSS-tiedostoihin body {color:}.
4. Kirjoita sivun 2. viimeisin esimerkki tiedostoon, joka on tarkoitettu muiden kuin Netscape 4.x -selainten käyttöön. Huomaa että sinä olet jo määritellyt elementin BODY. Jatka tuota sääntöä äläkä kirjoita uutta. Muista laittaa välimerkit oikein!

Sivu 3., Mitkä ovat CSS:n mittayksiköt, värit ja avainsanat

1. Kirjoita Netscape 4.x:lle tarkoitettuun CSS-tiedostoon elementille BODY suhteellinen normaalista pienennetty fonttikoko. Muista laittaa se yhtä pykälää isompana kuin muille selaimille. Jatka aiemmin tekemääsi määrittelyä.
2. Kirjoita muita selaimia ajatellen toiseen CSS-tiedostoon suhteellinen fonttikoko, joka on yhtä pykälää pienempi kuin Netscape 4.x antamasi fonttikoko. Jatka aiemmin tekemääsi määrittelyä.
3. Kirjoita elementille H2 absoluuttinen fonttikoko (h2 {font-size:}). Kokeile, näkyykö koko samana Netscape-, MS IE - ja mahdollisesti vielä Opera-selaimissa. Mikäli koko ei näytä samalta, muuta joko Netscape 4.x -selaimelle tarkoitetun tiedoston tai jonkin muun CSS-tiedoston fonttikokoarvoa.
4. Määrittele elementille H2 väri.
5. Kirjoita Tehtävätsivun useisiin kappaleisiin (elementti P) rivinsisäistyylejä attribuutin style avulla. Anna niiden avulla kaikkia värien määrittelykeinoja käyttäen erilaisia väriarvoja.

Sivu 4., Valitsimet

1. Kirjoita muille kuin Netscape 4.x -selaimille tarkoitettuun CSS-tiedostoon elementille H2 esimerkissä annetut sellaiset ominaisuudet, joita sille ei ole aiemmin annettu.
2. Määrittele elementille CODE väri ja taustaväri (background-color) niin, että elementti näkyy oppilaan Tehtävätsivulla suurin piirtein samoilla väreillä kuin varsinaisilla CSS-opaassa. Mikäli haluat, voit määritellä myös muita elementtejä (kuten esim. BLOCKQUOTE).
3. Kirjoita elementeille H1, H3-H6 yhteinen sääntö.
4. Tee sääntö ryhmälle TABLE, TH, TD.
5. Määrittele Tehtävätsivuihisi elementille BODY luokka (esim. BODY class="omaLuokka").
6. Kirjoita ja määrittele sääntö div.doc {}. Kirjoita halutessasi myös muita sääntöjä.
7. Mikäli käytössäsi on Mozilla Gecko/NS 6.x+ tai OP 4.x+, kokeile antamieni esimerkkien mukaisesti jossakin kappaleessa attribuuttivalitsimia.
8. Määrittele samalle elementille sekä class että id attribuutit ja niitä vastaavat säännöt. Määrittele säännöt niin, että ne osittain täydentävät ja osittain kumoavat toisensa.
9. Mikäli käytössäsi on Mozilla Gecko/NS 6.0, OP 4.x+ tai IE 5.5+, määrittele p:first-letter koskeva sääntö vain muille kuin Netscape 4.x selaimille tarkoitettuun CSS-tiedostoon.

Sivu 5., Prosessointijärjestys

1. Tee Tehtävätsivuihisi taulukko, jonka sisällä on kappaleita ja määrittele niille sääntö table p {}.
2. Tee vastaavantapainen sääntö elementille BODY, mutta lisää luokkatarkennin (esim. body.omaLuokka p {}). Määrittele samalla periaatteella myös muita sääntöjä.
3. Tee vain muille kuin Netscape 4.x -selaimille tarkoitettuun tiedostoon CSS-sääntöjä, joissa on !important-sääntöjä.
4. Kokeile em. säännön toimivuutta myös yksittäisissä kappaleissa rivinsisäistyylejä käyttäen (style="").

Sivu 6., Testiominaisuudet ja CSS:n kohdentaminen

1. Kirjoita tai kopioi elementtiä FONT koskevat esimerkit johonkin Tehtävättiedostoon.
2. Määrittele säännöt big {} ja font.font-style1 {}.
3. Mikäli käytössäsi on Mozilla Gecko/NS 6.0, kokeile elementin FONT värin muuttamista käyttäen sääntöä font[color="..."] {} (OP 4.x+ ei tue värin muuttamista *[color="..."] {} tyypisiä sääntöjä käyttäen, vaikka attribuuttivalitsimet toimivat kyseisellä selaimella yleisesti ottaen sangen hyvin).
4. Määrittele Tehtävätsivuihisi elementeille BODY ja CODE ominaisuus font-family.
5. Tee sama myös ryhmälle TABLE, TD, TH sekä mahdollisesti muillekin ryhmille.
6. Määrittele myös elementille CODE ominaisuus font-family.
7. Tee sääntöjä elementeille H2 ja P. Kokeile niissä joitakin esimerkeissä käytettyjä ominaisuuksia.
8. Laadi CSS-tiedosto, jossa on erilaisia medialohkoja (esim. @media all {...} ... @media print, projection {...} @media screen {...} (katso mallia tiedostosta ../Css/CssSite.css).
9. Määrittele style-attribuutilla johonkin kappaleeseen ominaisuus cursor.
10. Määrittele jollekin elementeille systeemifontteja ja -värejä (ne ovat tuettuja MS IE 4.x+, Netscape 6.x+, Opera 5.1x+ -selaimissa).

Sivu 7., Ankkurit ja linkit

• Määrittele Netscape 4.x:lle tarkoitettuun tiedostoon a:link ja a:visited.
• Määrittele muille selaimille tarkoitettuun tiedostoon a:link, a:visited, a:hover ja a:active (mikäli käytässäsi on uusi NS/Mozilla voit määritellä myös a:focus).
• Määrittele muille kuin Netscape 4.x -selaimille tarkoitettuun tiedostoon vastaava systeemi huomioiden elementille BODY antamasi luokan. Huomaa, että sinun ei tarvitse välttämättä määritellä koko sarjaa uusiksi, mutta voi määritellä myös sarjan :link > :focus.
• Määrittele muille selaimille tarkoitettuun tiedostoon vain kuvia koskeva sarja ilman mitään luokkatarkenninta.
• Määrittele muille selaimille tarkoitettuun tiedostoon vain kuvia koskeva sarja siten, että elementillä BODY on jokin luokka.

Sivu 8., Taustat ja reunat

1. Määrittele upotettuna tyylisivuna oppilaan mallitiedostoon elementille BODY tarkoitettu taustakuva (muista laittaa myös käyttämäsi luokkatarkennin). Käytä kaikkia mahdollisia ominaisuuksia ja vertaa selainten käyttäytymistä.
2. Määrittele (esim. upotettuna tyylisivuna) oppilaan mallitiedostoon luokkatarkennetulle elementille BLOCKQUOTE jotkin reunusarvot. Kokeile eri reunojen toimivuutta eri selaimissa (Netscape 4.x saattaa kaatua).

Sivu 9., Listat

1. Määrittele list-style-type eri listatasoille.
2. Tee muille selaimille tarkoitettuun tiedostoon listakuvia koskevia sääntöjä (suosittelen käyttämään noin 16x16 kuvapisteen (pixel) GIF-kuvia.

Sivu 10., Taulukot

1. Tarkasta sekä Netscape 4.x:lle että muille selaimille laatimasi CSS-tiedostot niin, että kaikille selaimille ainakin elementeille TD ja TH on määritetty fontin ominaisuudet.
2. Täydennä aikaisempia sääntöjä tai tee uusia.
3. Lisää muille kuin Netscape 4.x:lle tarkoitettuun CSS-tiedostoon sääntöjä, joissa käytät erityisiä taulukkomalliominaisuuksia (suositeltavin testiselain on OP 4.x+).

Sivu 11., Muotoilut

1. Luo erään mallisivun kaltainen sivurakenne, mutta käytä ominaisuuden max-width sijaan ominaisuutta width.
2. Laita kokeilusivun alkuun joitakin kuvia. Määritä niille absoluuttiset koordinaatit (position:absolute) ja z-index ominaisuus. Testaa toimiiko ominaisuus z-index eri selaimissa.
3. Kokeile piilottaa jokin kappale tai muu elementti käyttäen ominaisuutta display.
4. Mikäli käytössäsi on OP 4.x+ or NS 6.x+, voit kokeilla taulukoiden muodostamista XML-dokumenteille CSS:n avulla.