Luettelen alla aihealueittain tekemäni aihepiirit. Paluulinkkeinä tähän aihepiiriin on tämä valikko ja sivun yläreunassa oleva linkki Aihepiiriluettelo.
|
![]() | Aihepiiriluettelo > CSS-oppaan etusivu > Harjoittelu > Harjoitustehtäviä |
---|
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ä:
style=""
).
Ominaisuutena olkoon color
. Anna väri
(esim. color:...
) kuusidigitaalisena heksadesimaaliarvona (#121212
) kuten
HTML-attribuuteissakin on tapana.LINK
kaikki tarvittavat HTML-attribuutit!body
{color:}
.BODY
. Jatka tuota sääntöä äläkä kirjoita uutta. Muista laittaa
välimerkit oikein!BODY
suhteellinen normaalista
pienennetty fonttikoko. Muista laittaa se yhtä
pykälää isompana kuin muille selaimille. Jatka
aiemmin tekemääsi määrittelyä.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.H2
väri.P
) rivinsisäistyylejä attribuutin style
avulla. Anna niiden avulla kaikkia värien
määrittelykeinoja käyttäen erilaisia
väriarvoja.H2
esimerkissä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
).H1
, H3
-H6
yhteinen sääntö.TABLE
, TH
, TD
.BODY
luokka (esim. BODY class="omaLuokka"
).div.doc {}
. Kirjoita halutessasi myös muita
sääntöjä.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.p:first-letter
koskeva sääntö vain muille kuin Netscape 4.x
selaimille tarkoitettuun CSS-tiedostoon.table p {}
.BODY
, mutta lisää luokkatarkennin (esim. body.omaLuokka p {}
). Määrittele samalla periaatteella myös muita sääntöjä.!important
-sääntöjä.style=""
).FONT
koskevat esimerkit johonkin Tehtävättiedostoon.big
{}
ja font.font-style1 {}
.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).BODY
ja CODE
ominaisuus font-family
.TABLE, TD,
TH
sekä mahdollisesti muillekin ryhmille.CODE
ominaisuus font-family
.H2
ja P
. Kokeile niissä joitakin
esimerkeissä käytettyjä ominaisuuksia.@media all {...} ... @media print, projection {...} @media
screen {...}
(katso mallia tiedostosta ../Css/CssSite.csscursor
.a:link
ja a:visited
.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
).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
.BODY
on jokin luokka.BODY
tarkoitettu
taustakuva (muista laittaa myös käyttämäsi
luokkatarkennin). Käytä kaikkia mahdollisia
ominaisuuksia ja vertaa selainten
käyttäytymistä.BLOCKQUOTE
jotkin reunusarvot. Kokeile eri reunojen
toimivuutta eri selaimissa (Netscape 4.x saattaa kaatua).list-style-type
eri listatasoille.TD
ja
TH
on määritetty fontin ominaisuudet.max-width
sijaan
ominaisuutta width
.position:absolute
)
ja z-index
ominaisuus. Testaa toimiiko ominaisuus
z-index
eri selaimissa.display
.