You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 79 Next »

Yleistä CSS:n käytöstä

CSS eli tyylimäärittelyn taustaa ja käytön mahdollisuudet

CSS Wikipediassa

Tyyliohjeet yleisesti

CSS:n muoto ja rakenne

(Lainaus: Vuokko Nurmesniemi: http://myy.helia.fi/~vanvu/html/tyylisivut.html)

CSS on muotoa: 

selektori { ominaisuus: arvo; }

esim. p { color: blue; }*

Tällaista kokonaisuutta kutsutaan deklaraatioksi.


Jos usealla elementillä on sama esittely, ne erotetaan pilkulla

h1, h2, p { color: blue; }

Jos ominaisuudella on useita arvoja, ne erotetaan pilkulla,
jos elementillä on useita ominaisuuksia, ne erotetaan puolipilkulla: 

h1 {font-family: arial, sans-serif;
    font-size:   12pt;}

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 
    <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 
    <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: 
    <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 (Universal selector)

Elementin nimi selektorina

Luokkaselektori class

Tunnisteselektori id

Kontekstiselektori, esim. sisalto ul li

Selektoreiden yhteenveto

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

Tekstin ulkoasun muuntelu

Esimerkkejä:

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.

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 http://www.sxc.hu/ ja lisää ne sivulle peräkkäin

3. Luo uusi tyylitiedosto ja ja tallenna se css-nimiseen kansioon nimellä kuvat.css

4. Tee jokaiselle kuvalle oma luokka (.class) tyylitiedostoo. Määrittele luokassa jokaiselle kuvalle erilainen reunaviiva, marginaali ja täyte (padding)

5. Muut kuvien leveyksiä siten, että ensimmäisen leveys on 30%, toisen 50% ja kolmannen 100%

6. Tallenna ja katsele selaimessa

Lisätehtävä nopeille:

Tutustu clip-elementin toimintaan: http://www.w3schools.com/css/tryit.asp?filename=trycss_clip

Leikkaa kuvista reunat pois clip-elementin avulla. 

Harjoitus 4

  • No labels
You must log in to comment.