Wiki Markup |
---|
h2. Yleistä CSS:n käytöstä |
...
[CSS eli tyylimäärittelyn taustaa ja käytön |
...
CSS:n liittäminen html-sivuun
Tyylimäärittelyiden liittäminen
...
mahdollisuudet|http://myy.helia.fi/~vanvu/html/tyylisivut.html] h2. CSS:n muoto ja rakenne (Lainaus: Vuokko Nurmesniemi: [http://myy.helia.fi/~vanvu/html/tyylisivut.html]) *Tyylimäärittely on muotoa: elementti {ominaisuus: ominaisuuden_arvo;}* *esim. p {color: red}* * Jos usealla elementillä on sama esittely, ne erotetaan *pilkulla*: h1, p {color: red} * Jos ominaisuudella on useita arvoja, ne erotetaan *pilkulla*, jos elementillä on useita ominaisuuksia, ne erotetaan *puolipilkulla*: h1 {font-family: verdana, sans-serif; font-size: 12pt;} h2. CSS:n liittäminen html-sivuun Tyylimäärittelyiden liittäminen (Lainaus: Vuokko Nurmesniemi: [http://myy.helia.fi/~vanvu/html/tyylisivut.html |
...
]) |
...
Tyylimäärittely voidaan liittää HTML-dokumenttiin kolmella tavalla: |
...
*1. HTML-elementtiin upottaminen |
...
* Tyylimäärittely voidaan kirjoittaa HTML-dokumentissa sen elementin alkutunnisteeseen, missä sitä halutaan käyttää style-attribuuttia käyttäen. Tämä määrittely ohittaa kaikki muut määrittelyt: |
...
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> |
...
Tämä määrää kappaleen fontin koon, vaikka <p>-elementin koko olisi määritelty kohdassa 2 ja/tai 3 mainituilla tavoilla. |
...
*2. HTML-dokumenttiin upottaminen |
...
* Tyylit voidaan kirjoittaa HEAD-lohkoon <style> ...</style> \-tunnisteiden väliin. |
...
*3. Erillinen tyylitiedosto |
...
* Tyylit voidaan määrittää erillisessä tyylitiedostossa, joka liitetään HTML-dokumenttiin.Tiedosto liitetään HTML-dokumenttiin HEAD-lohkossa LINK-tunnisteella. Tämä on suositeltava tapa, koska sama tyylitiedosto voidaan helposti liittää mihin dokumenttiin tahansa. 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. |
...
2. seuraavaksi HEAD-lohkossa määritetty tyyli eli kohta 2. |
...
3. viimeiseksi ulkoisessa tyylitiedostossa määritelty tyyli eli kohta 3. |
...
CSS:n muoto ja rakenne
Tärkeimmät selektorit
h2. Tärkeimmät selektorit h1. Harjoituksia. |