...
Yleistä
...
CSS:n
...
käytöstä
...
...
...
...
...
...
...
CSS:n muoto ja rakenne
(Lainaus: Vuokko Nurmesniemi: http://myy.helia.fi/~vanvu/html/tyylisivut.html
...
)
...
CSS
...
on
...
muotoa
...
:
| No Format |
|---|
\\ {noformat} selektori { ominaisuus: arvo; } esim. p { color: blue; }* {noformat} |
Tällaista
...
kokonaisuutta
...
kutsutaan
...
deklaraatioksi.
...
Jos
...
usealla
...
elementillä
...
on
...
sama
...
esittely,
...
ne
...
erotetaan
...
pilkulla
| No Format |
|---|
} h1, h2, p { color: blue; } {noformat} |
Jos
...
ominaisuudella
...
on
...
useita
...
arvoja,
...
ne
...
erotetaan
...
pilkulla
...
,
...
jos
...
elementillä
...
on
...
useita
...
ominaisuuksia,
...
ne
...
erotetaan
...
puolipilkulla:
| No Format |
|---|
*: \\ \\ {noformat} h1 {font-family: arial, sans-serif; font-size: 12pt;} {noformat} h2. Tyylimäärittelyn liittäminen |
Tyylimäärittelyn liittäminen html-sivuun
...
Tyylimäärittely
...
voidaan
...
liittää
...
HTML-dokumenttiin
...
kolmella
...
tavalla:
...
1.
...
HTML-elementtiin
...
upottaminen
...
- Määrittely
...
- kirjoitetaan
...
- HTML-dokumentissa
...
- sen
...
- elementin
...
- alkutunnisteeseen,
...
- jonka
...
- ulkoasua
...
- halutaan
...
- muokata
...
- Määrittely
...
- ohittaa
...
- kaikki
...
- muut
...
- määrittelyt
...
No Format
...
<p style="font-size: 12px">Tämän tekstin fonttikoko on 12 pikseliä</p>
...
2.
...
HTML-dokumenttiin
...
upottaminen
...
- Määrittely
...
- kirjoitetaan
...
- HTML-dokumentin
...
- HEAD-lohkoon
...
No Format
...
<style type="text/css"> p {font-size: 12px;} </style>
...
3.
...
Erillinen
...
tyylitiedosto
...
- Ulkoasu
...
- määritellään
...
- erilliseen
...
- tyylitiedostoon
...
- Tiedosto
...
- liitetään
...
- HTML-dokumenttiin
...
- HEAD-lohkossa
...
- LINK-tunnisteella
...
- Suositeltava
...
- tapa,
...
- koska
...
- sama
...
- tyylitiedosto
...
- voidaan
...
- helposti
...
- liittää
...
- mihin
...
- dokumenttiin
...
- tahansa
...
- Tyylitiedoston
...
- linkittäminen:
...
No Format
...
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
...
Määrittelyiden vaikutus html-sivuun:
...
Jos
...
ulkoasun
...
määrittely
...
on
...
tehty
...
eri
...
kahdella
...
tai
...
useammalla
...
tavalla,
...
ne
...
vaikuttavat
...
ulkoasuun
...
tässä
...
järjestyksessä:
...
1.
...
Ensisijaisesti
...
huomioidaan
...
yksittäisen
...
html-elementin
...
tyyli
...
(kohta
...
1)
...
2.
...
Toiseksi
...
HEAD-lohkossa
...
määritetty
...
tyyli
...
(kohta
...
2)
...
3.
...
Kolmanneksi
...
ulkoisessa
...
tyylitiedostossa
...
määritelty
...
tyyli
...
(kohta
...
3)
...
Tärkeimmät
...
selektorit
...
Selektori
...
on
...
css:llä
...
määriteltävä
...
kohde.
...
Selektoreiden
...
avulla
...
deklaraatiot
...
yhdistetään
...
html-dokumentissa
...
sijaitseviin
...
kohteisiin.
...
Yleistietoa
...
selektoreista:
...
http://www.w3.org/TR/CSS2/selector.html
...
Yleisselektori
...
(
...
...
Kontekstiselektori, esim. sisalto ul li
CSS ja selainten tuki
Sivujen toimivuus on välttämätöntä tarkistaa etenkin IE 6 ja 7 -versioilla, joita valtaosa käyttäjistä käyttää.
Vanhat selaimet tukevat vain CSS 1.
Firefox ja Opera tukevat CSS:n uusimpia ominaisuuksia paremmin kuin IE. Siksi niillä voidaan kokeilla ja kehitellä sivuja, jotka hyödyntävät CSS:ää monipuolisesti.
Lisäksi on hyödyllistä kokeilla ja tuntea myös muita käytössä olevia selaimia, vaikka niiden käyttäjäkunta onkin pienempi kuin em. selainten.
Tekstin muotoilu CSS:n avulla
Esimerkkejä:
- fontin asettaminen
- tekstin väri
- fonttikoko
- tekstin taustaväri
- merkkien välit
- sanojen välit
- rivinkorkeus
- tekstin koristelu
Linkkien muotoilu
Linkkien muotoilu: ns. pseudo-luokat
Muita ulkoasun muotoiluja CSS:ssä:
Harjoituksia
Harjoitus 1
1. Avaa Notepad
2. Lisää tyylitiedostoon perustyylejä: body, p, a (+ pseudoluokat), eri otsikkotasot.
| No Format |
|---|
Esim.body { |http://www.w3.org/TR/CSS2/selector.html#universal-selector]) [Elementin nimi selektorina|http://www.w3.org/TR/CSS2/selector.html#type-selectors] [Luokkaselektori class|http://www.w3.org/TR/CSS2/selector.html#class-html] [Tunnisteselektori id|http://www.w3.org/TR/CSS2/selector.html#id-selectors] Kontekstiselektori, esim. sisalto ul li [Selektoreiden yhteenveto|http://weppipakki.com/css/tekstit/selektor.htm] h2. CSS ja selainten tuki Sivujen toimivuus on välttämätöntä tarkistaa etenkin IE 6 ja 7 \-versioilla, joita valtaosa käyttäjistä käyttää. Vanhat selaimet tukevat vain CSS 1. Firefox ja Opera tukevat CSS:n uusimpia ominaisuuksia paremmin kuin IE. Siksi niillä voidaan kokeilla ja kehitellä sivuja, jotka hyödyntävät CSS:ää monipuolisesti. Lisäksi on hyödyllistä kokeilla ja tuntea myös muita käytössä olevia selaimia, vaikka niiden käyttäjäkunta onkin pienempi kuin em. selainten. h2. Tekstin muotoilu CSS:n avulla [Tekstin ulkoasun muuntelu|http://www.w3schools.com/css/css_text.asp] *Esimerkkejä:* * [fontin asettaminen|http://www.w3schools.com/css/tryit.asp?filename=trycss_font-family] * [tekstin väri|http://www.w3schools.com/css/tryit.asp?filename=trycss_color] * [fonttikoko|http://www.w3schools.com/css/tryit.asp?filename=trycss_font-size] * [tekstin taustaväri|http://www.w3schools.com/css/tryit.asp?filename=trycss_text_background] * [merkkien välit|http://www.w3schools.com/css/tryit.asp?filename=trycss_letter-spacing] * [sanojen välit|http://www.w3schools.com/css/tryit.asp?filename=trycss_text_word-spacing] * [rivinkorkeus|http://www.w3schools.com/css/tryit.asp?filename=trycss_line-height] * [tekstin koristelu|http://www.w3schools.com/css/tryit.asp?filename=trycss_text-decoration] h2. Linkkien muotoilu [Linkkien muotoilu|http://www.w3schools.com/css/css_pseudo_classes.asp]: ns. pseudo-luokat * [Linkin väri|http://www.w3schools.com/css/tryit.asp?filename=trycss_link] h2. Muita ulkoasun muotoiluja CSS:ssä: * [Taustavärit|http://www.w3schools.com/css/tryit.asp?filename=trycss_background-color] * [Reunat (border)|http://www.w3schools.com/css/tryit.asp?filename=trycss_border] * [Marginaali|http://www.w3schools.com/css/css_margin.asp] * [Täyte (padding)|http://www.w3schools.com/css/css_padding.asp] h2. h1. Harjoituksia h4. Harjoitus 1 1. Avaa Notepad 2. Lisää tyylitiedostoon perustyylejä: body, p, a (\+ pseudoluokat), eri otsikkotasot. Esim.body { background-color : #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.
...
Luo
...
uusi
...
html-sivu
...
perusrakenteineen
...
ja
...
tallenna
...
se
...
omaan
...
kansioosi.
...
2.
...
Valitse
...
kolme
...
kuvaa
...
sivulta
...
...
ja
...
lisää
...
ne
...
sivulle
...
peräkkäin
...
3.
...
Luo
...
uusi
...
tyylitiedosto
...
ja
...