Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

1. HTML-elementtiin upottaminen Tyylimäärittely

  • Määrittely kirjoitetaan HTML-dokumentissa sen elementin alkutunnisteeseen, jonka ulkoasua halutaan muokata

...

  • Määrittely ohittaa kaikki muut määrittelyt

...

  • No Format
    
    Esim  <p> \-elementin fontin koko voidaan määritellä kappaleen alkutunnisteessa seuraavasti:
    <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> tähän esimerkki </style>

...

  •  
    

3. Erillinen tyylitiedosto
Tyylit voidaan määrittää erillisessä tyylitiedostossa, joka liitetään HTML-dokumenttiin.

  • 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.

Määrittelyiden vaikutus html-sivuun:
Jos ulkoasun määrittely on tehty eri kahdella tai useammalla tavalla, ne vaikuttavat ulkoasuun tässä Otetaan huomioon, jos edellisissä ei ole määritelty.Jos samalle elementin ominaisuudelle esim. fontin koko on tehty tyylimäärittely vaikkapa noissa kaikilla edellä mainituilla tavoilla, noudatetaan tyylejä seuraavassa järjestyksessä:
1. ensisijaisesti otetaan huomioon elementin alkutunnisteessa määritelty tyyli eli kohta 1.Ensisijaisesti huomioidaan yksittäisen html-elementin tyyli (kohta 1)
2. seuraavaksi Toiseksi HEAD-lohkossa määritetty tyyli eli (kohta 2.)
3. viimeiseksi Kolmanneksi ulkoisessa tyylitiedostossa määritelty tyyli eli (kohta 3.)

Tärkeimmät selektorit

Harjoituksia.