CSS - kuinka

CSS kuinka


Esimerkkejä


Kuinka tyylimääritykset lisätään HTML-dokumenttiin

Kun selain lukee tyylimääritykset se muotoilee HTML-dokumentin määritysten mukaan. Tyylimääritysten välittäminen selaimelle on mahdollista kolmella eri tavalla:

Ulkoinen tyylitiedosto

Ulkoinen tyylitiedosto on useimmiten paras vaihtoehto. Samalla ulkoisella tyylitiedostolla tyylimääritykset saadaan asetettu usealle HTML-sivulle.
Koko Web-sivuton ulkoasua on helppoa muuttaa editoimalla pelkästään tätä yhtä tiedostoa. Jokaisen HTML-sivun tulee ottaa ulkoinen tyylitiedosto käyttöön <link>-tagilla.
<link>-tagi sijoitetaan head-osaan:

<head>  
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Selain lukee tyylimääritykset tiedostosta mystyle.css ja muotoilee sivun tämän mukaisesti.

Ulkoinen tyylitiedosto voidaan kirjoittaa mitä tahansa tekstieditoria käyttäen. Tiedosto ei saa sisältää html-tageja. Tyylitiedosto tulee tallentaa .css-päätteisenä. Alla on esimerkki tyylitiedostosta.

hr {color: sienna}  
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}

Älä jätä välilyöntejä arvon ja yksikön väliin. Esim. koodin "margin-left: 20 px" käyttäminen koodin "margin-left: 20px" sijaan ei toimi muissa kuin IE6:ssa!

Sivun sisäinen tyylimäärityslohko

Sivun sisäistä tyylimääritystä kannattaa käyttää vain kun kyseessä on yksittäinen Web-sivu omalla uniikilla tyylillään. Tällöin tyylit määritellään head-lohkossa <style>-tagia käyttäen seuraavasti:

<head>  
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>

Selain osaa lukea head-lohkossa annetut tyylimääritykset ja muotoilla dokumentin esitysasun tämän mukaisesti.

Huomaa: Selain ohittaa normaalisti tuntemattomat tagit. Tämän takia vanhemmat selaimet jotka eivät tue tyylejä ohittava <style>-tagin, mutta tagin sisältö näytetään sivun sisällön ohella.
Sisällön näyttäminen on mahdollista estää piilottamalla se HTML-kommentiksi:

<head>  
<style type="text/css">
<!-- hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} -->
</style>
</head>

Inline-tyylimääritys

Inline-tyylimääritystä käyttäessä menetetään suurin osa tyylitiedostojen eduista, joten tätä tapaa tulee käyttää erittäin harkiten.

Inline-tyylit määritellään elementtien style-attribuutteja käyttäen. Style-attribuutilla voidaan määrittää mikä tahansa CSS-ominaisuus. Seuraavassa kappaleen väri ja vasen marginaali:

<p style="color: sienna; margin-left: 20px">  
This is a paragraph
</p>


Päällekkäiset tyylimääritykset

Jos jokin ominaisuus on asetettu kahteen kertaan eri tyylimäärityksissä, yhdistetään eri määritykset "virtuaaliseksi tyylitiedostoksi".

Jos esimerkiksi ulkoinen tyylitiedosto sisältää seuraavat tyylimääritykset h3-valitsimelle:

h3   
{
color: red;
text-align: left;
font-size: 8pt
}

Ja sisäinen tyylitiedosto seuraavat määritykset h3-valitsimelle:

h3   
{
text-align: right;
font-size: 20pt
}

Tällöin sivu joka käyttää kumpaakin yo määritystä tullaan käsittelemään seuraavan "virtuaalisen" tyylitiedoston mukaisesti:

color: red;   
text-align: right;
font-size: 20pt

Värimääritys saadaan ulkoisesta tyylitiedostosta, mutta tekstin asemoinnin ja fonttikoon määritykset korkeammalla prioriteetilla olevasta sisäisestä tyylitiedostosta.