Versions Compared

Old Version 99

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

...

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)

Tyyliohjeiden soveltaminen

...

     div-tagin käyttö

   display-ominaisuus

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.

Tärkeimmät CSS-ominaisuudet

Tekstin muotoilu CSS:n avulla

Kirjasimen ominaisuudet

Tekstin ulkoasun muuntelu (W3 Schools)

Esimerkkejä:

Linkkien muotoilu

Linkkien muotoilu: ns. pseudo-luokat

...

Muita ulkoasun muotoiluja CSS:ssä

...