Versions Compared

Old Version 78

changes.mady.by.user Eeva Meltio

Saved on

compared with

New Version Current

changes.mady.by.user Eeva Meltio

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

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:

No Format
selektori { ominaisuus: arvo; }

esim. p { color: blue; }*

Tällaista kokonaisuutta kutsutaan deklaraatioksi.

...

No Format
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
    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 (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

Tyyliohjeiden soveltaminen

ks. span-tagin käyttö

     div-tagin käyttö

   display-ominaisuus

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
{       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%

Yleistä

Värin ja taustavärin ominaisuudet

Elementin raja, täyte ja marginaalit

Muut elementin ominaisuudet

Täydellinen lista CSS:n ominaisuuksista (CSS1, CSS2, CSS3)

Esimerkkejä:

Valideja CSS-pohjia: Template World6. Tallenna ja katsele selaimessa