| Wiki Markup |
|---|
h2. Yleistä CSS:n käytöstä |
...
[CSS eli tyylimäärittelyn taustaa ja käytön |
...
CSS:n muoto ja rakenne
...
mahdollisuudet|http://myy.helia.fi/~vanvu/html/tyylisivut.html] [CSS Wikipediassa|http://fi.wikipedia.org/wiki/CSS ] [Tyyliohjeet yleisesti|http://fi.wikipedia.org/wiki/Tyyliohje] h2. 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 |
...
* {noformat |
} 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 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 |
...
{noformat |
...
} <p style="font-size: 12px">Tämän tekstin fonttikoko on 12 pikseliä</p> |
...
{noformat} *2. HTML-dokumenttiin upottaminen |
...
* * Määrittely kirjoitetaan HTML-dokumentin HEAD-lohkoon |
...
{noformat |
...
} <style type="text/css"> p {font-size: 12px;} </style> {noformat} |
...
*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: |
...
{noformat |
...
} <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> |
...
{noformat} *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) |
...
h2. 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 ([Universal selector |
...
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 ja tallenna ja samaan kansioon muin muutkin harjoitukset nimellä tyyli.css
2. Avaa viime kerralla tehty harjoitussivu, joka sisältää kuvia ja tekstiä.
3. Linkitä tyyli.css -tiedosto harjoitussivuun LINK-määritteellä
4. Lisää tyylitiedostoon perustyylejä: body, p, a (+ pseudoluokat), eri otsikkotasot.
Esim.
| No Format |
|---|
|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; } |
5. Tallenna tyylitiedosto ja esikatsele selaimessa
...
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
h4. 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
h4. Harjoitus 3
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
\\ |