...
Yleistä
...
CSS:n
...
käytöstä
...
...
...
...
...
...
...
CSS:n
...
muoto
...
ja
...
rakenne
...
(Lainaus:
...
Vuokko
...
Nurmesniemi:
...
http://myy.helia.fi/~vanvu/html/tyylisivut.html)
Tyylimäärittely on muotoa:
| No Format |
|---|
]) {noformat} \*Tyylimäärittely on muotoa: elementti { ominaisuus: ominaisuuden_arvo; } \* {noformat} *esim. p* * |
- Jos
...
- usealla
...
- elementillä
...
- on
...
- sama
...
- esittely,
...
- ne
...
- erotetaan
...
- pilkulla
...
- :
No Format h1, p
...
- Jos
...
- ominaisuudella
...
- on
...
- useita
...
- arvoja,
...
- ne
...
- erotetaan
...
- pilkulla
...
- ,
...
jos
...
- elementillä
...
- on
...
- useita
...
- ominaisuuksia,
...
- ne
...
- erotetaan
...
- puolipilkulla
...
- :
...
No Format h1
...
{font-family: verdana, sans-serif; font-size: 12pt;}
...
...
CSS:n
...
liittäminen
...
html-sivuun
...
Tyylimäärittelyiden
...
liittäminen
...
(Lainaus:
...
Vuokko
...
Nurmesniemi:
...
http://myy.helia.fi/~vanvu/html/tyylisivut.html
...
)
...
Tyylimäärittely
...
voidaan
...
liittää
...
HTML-dokumenttiin
...
kolmella
...
tavalla:
...
1.
...
HTML-elementtiin
...
upottaminen
...
Tyylimäärittely
...
voidaan
...
kirjoittaa
...
HTML-dokumentissa
...
sen
...
elementin
...
alkutunnisteeseen,
...
missä
...
sitä
...
halutaan
...
käyttää
...
style-attribuuttia
...
käyttäen.
...
Tämä
...
määrittely
...
ohittaa
...
kaikki
...
muut
...
määrittelyt:
...
Esim
...
<p>
...
-elementin
...
fontin
...
koko
...
voidaan
...
määritellä
...
kappaleen
...
alkutunnisteessa
...
seuraavasti:
...
<p
...
style="font-size:
...
12px">Tämän
...
tekstin
...
fonttikoko
...
on
...
12
...
pikseliä</p>
...
Tämä
...
määrää
...
kappaleen
...
fontin
...
koon,
...
vaikka
...
<p>-elementin
...
koko
...
olisi
...
määritelty
...
kohdassa
...
2
...
ja/tai
...
3
...
mainituilla
...
tavoilla.
...
2.
...
HTML-dokumenttiin
...
upottaminen
...
Tyylit
...
voidaan
...
kirjoittaa
...
HEAD-lohkoon
...
<style>
...
...</style>
...
-tunnisteiden
...
väliin.
...
3.
...
Erillinen
...
tyylitiedosto
...
Tyylit
...
voidaan
...
määrittää
...
erillisessä
...
tyylitiedostossa,
...
joka
...
liitetään
...
HTML-dokumenttiin.Tiedosto
...
liitetään
...
HTML-dokumenttiin
...
HEAD-lohkossa
...
LINK-tunnisteella.
...
Tämä
...
on
...
suositeltava
...
tapa,
...
koska
...
sama
...
tyylitiedosto
...
voidaan
...
helposti
...
liittää
...
mihin
...
dokumenttiin
...
tahansa.
...
Otetaan
...
huomioon,
...
jos
...
edellisissä
...
ei
...
ole
...
määritelty.
...
Jos
...
samalle
...
elementin
...
ominaisuudelle
...
esim.
...
fontin
...
koko
...
on
...
tehty
...
tyylimäärittely
...
vaikkapa
...
noissa
...
kaikilla
...
edellä
...
mainituilla
...
tavoilla,
...
noudatetaan
...
tyylejä
...
seuraavassa
...
järjestyksessä:
...
1.
...
ensisijaisesti
...
otetaan
...
huomioon
...
elementin
...
alkutunnisteessa
...
määritelty
...
tyyli
...
eli
...
kohta
...
1.
...
2.
...
seuraavaksi
...
HEAD-lohkossa
...
määritetty
...
tyyli
...
eli
...
kohta
...
2.
...
3.
...
viimeiseksi
...
ulkoisessa
...
tyylitiedostossa
...
määritelty
...
tyyli
...
eli
...
kohta
...
3.
...
Tärkeimmät
...