Päivitetty: 10.03.2003.

HTML + CSS1

CSS määrittelyt voidaan yhdistää (x)HTML-dokumenttiin kolmella eri tavalla (tai neljällä, laskutavasta riippuen). Tyylisäännöt voivat olla ulkoisia, HTML-dokumentin <head> -osassa tai suoraan HTML -elementissä. Tietysti voit käyttää näitä kaikkia sääntöjä yhtäaikaa.


HTML + CSS1

Elementin sisäinen tyylisääntö

CSS -sääntö voidaan määritellä suoraan haluttuun HTML-elementtiin (<p>, <a>, <h1>, <div> jne.). Määrittely tehdään kyseisen HTML-elementin style -parametrilla, esim.
<P style="color:red">...</P>.

Määrittely on voimassa elementin lopetustagiin ( </> ) asti. Huomaa, että varsinaisen tyylimäärittelyn tulee lainausmerkkeihin ( " " ), eikä kaarisulkuihin niin kun muissa määrittelyissä.

Tätä tapaa ei voi suositella kokonaisen HTML-sivun määrittelyyn, koska se on työlästä ja päivittäminen on hidasta.

Mutta yksittäisten elementtien määrittelyyn se voi olla erittäin hyödyllinen. Huomaa myös, että elementin sisäinen tyylimäärittely ohittaa upotetun ja linkitetyn tyylimäärittelyn.

<P style="margin-left:30%;color:red"> MOI!</P>

MOI!

sisäisentyylin edut ja haitat:

<< Alkuun


Upotettu tyylisääntö

CSS -määrittelyn upottamisessa (x)HTML-dokumenttiin käytetään <STYLE> ... </STYLE> -elementtejä, jotka täytyy sijoittaa dokumentin <HEAD> -osaan, seuraavasti:

<HTML>
 <HEAD>
 <title>esim</title>
  <STYLE type="text/css">
   <!--
     p { color: blue; font: 14pt }
     h1,h2 { color:red }
   -->
  </STYLE>
 </HEAD>
 <BODY>...</BODY>
</HTML>

<style> -elementillä on pakollinen parametri type, jolla on arvo "text/css". Myös "text/javascript" on mahdollinen, jos tyyli määritellään JavaScriptillä.

Koska vanhemmat selaimet eivät ymmärrä tyylimäärittelyjä, täytyy tyyli piilottaa niiltä. Piilottaminen aloitetaan <!-- merkillä ja lopetetaan --> -merkkiin, niiden väliin tulee varsinainen CSS -määrittely.

Huomaa myös, että elementin upotettu tyylimäärittely ohittaa linkitetyn tyylimäärittelyn.

upotetuntyylin edut ja haitat:

<< Alkuun


Linkitetty tyylisääntö

Tehokkain tapa käyttää CSS -sääntöjä on koota tyylimääritteet erilliseksi tiedostoksi, joka sitten linkitetään kaikkiin haluttuihin (x)HTML -dokumentteihin.

CSS -määritteet tallennetaan normaaliksi tekstitiedostoksi, jonka tarkenne on aina css. HTML dokumentteihin laitetaan <head> -osaan <link> -elementti, joka kutsuu halutun tyylitiedoston.

Alla on esimerkki siitä, kuinka oma.css -nimen tyyli tiedosto linkitetään index.htm tiedoston.

  1. Luodaan HTML-tiedosto nimeltä index.htm.
  2. Luodaan CSS-tiedosto nimeltä oma.css. Molemmat tiedosto tallennetaan normaalissa ascii-muodossa, esimerkiksi käyttämällä muistio-ohjelmaa.
  3. Linkitetään oma.css -tiedosto index.htm -tiedostoon. Huomaa, että linkitys pitää tehdä jokaiseen HTML-tiedostoon jossa halutaan käyttää kyseitä CSS-tiedostoa.
/* index.htm */
<HTML>
 <HEAD>
   <title>esim</title>
   <LINK rel="stylesheet"
         type="text/css" 
         href="oma.css">
 </HEAD>
 <BODY>...</BODY>
</HTML>  
/* oma.css */
P { margin: 50px }
  h4 { font-size:14pt }
.red { color: red }

Link -elementin tulee sisältää seuraavat osat:

linkitetyntyylin edut ja haitat:

Kannattaakin ehkä aluksi käyttää upotettua tyyliä, koska sitä on helpompi muokata. Vasta kun CSS-säännöt ja (x)HTML -dokumentit ovat valmiit, leikkaa tyyli ja liitä se omaksi tiedostoksi, jonka linkität sitten haluttuihin dokumentteihin.

<< Alkuun


@import-sääntö

Toinen tapa hyödyntää ulkoista tyyliarkkia on käyttää @import-sääntöä, jota kutsutaan myös nimellä import-notaatio. @Import-säännön avulla on mahdollista upottaa ulkoiseen CSS-tiedostoon toinen ulkoinen CSS -tiedosto.

@import-sääntö käyttää ulkoisen tyylitiedoston hakemiseen aina URL-osoitetta. Osoite voi olla suhteellinen tai absoluuttinen. Seuraavat sääntö on oikein kirjoitettu:

@import url(main.css);

@import url(http://www.fi/main.css);

@import url(../main.css);

!Lisätietoa url-muodosta löydät yksiköt sivulta.

@import-sääntö voidaan sijoittaa joko ulkoiseen CSS -tiedostoon tai (x)HTML-dokumentin <STYLE> -osaan.

Ulkoisessa CSS -tiedostossa

Tämä tyylitiedoston liitäntämekanismi on tarkoitettu esimerkiksi tilanteeseen jossa sinulla on jo valmis sivusto ja CSS-tiedostot.

Ajatellaan, että sivustoon kuuluu 30 sivua joihin on jokaiseen linkitetty ulkoinen tyyliarkki perus.css. Nyt haluaisit lisätä jokaiseen sivuun extra.css -tyyli tiedoston.

Voisit tietysti avata jokaisen HTML- dokumentin ja lisätä niihin tarvittavan <LINK> -määritteen. Mutta pääset huomattavasti helpommalla kun avaat perus.css -tiedoston ja lisäät sen alkuun import-säännön seuraavasti:

perus.css:

@import url(extra.css);

/* muut css-säännöt tähän... */

Nyt extra.css -tiedosto, tuodaan jokaiseen HTML- dokumenttiin, johon on linkitetty perus.css -tiedosto. Huomaa että @import -notaation tulee sijoittaa tyylisääntöjen alkuun.

<< Alkuun


(x)HTML -tiedostossa

@import-sääntö voidaan liittää myös (x)HTML -tiedostoon. Tällöin se täytyy tietysti määritellä jokaiseen tiedostoon erikseen, joten toiminta ei ole niin tehokasta.

Ainut peruste import-säännön käyttämiseen (x)HTML -tiedostossa on ohitaa vanhat selaimet, jotka eivät tätä määritystä ymmärrä. Tosin sama tulos savutetaan yllä kuvatullakin tavallakin.

Joka tapauksessa alla on esimerkki kuinka index.htm -tiedostoon tuodaan extra.css -tiedosto:

index.htm:

<STYLE type="text/css">
 <!-- 
   @import url(extra.css); 

   /* css-säännöt tähän... */
 -->
</STYLE>

Myös tässä tavassa täytyy @import-sääntö olla ennen varsinaisia CSS-sääntöjä. Huomaa myös, että <STYLE> -elementin säännöt ja @-säännöt eivät saa olla limittäin. Eli seuraava muoto on kielltyy:

<STYLE type="text/css">
 <!-- 
   @import url(extra.css);
     BODY { margin-left: 5% )
   @import url(other.css);
 -->
</STYLE

Vanhojen selainten ohitus

@import-sääntöä voidaan siis hyödyntää kun halutaan luoda tyylisääntöjä jotka toimivat vain uusissa selaimissa, mutta aiheuttavat ongelmia vanhimmissa selaimissa.

Netscapen 4.x selaimet ovat tunnetusti ongelmallisia tapauksia CSS-tuen osalta. Ohittaaksesi Netscape käytä seuraava järjestystä:

  1. Ensin luodaan CSS-säännöt jotka toimivat Netscapessa ja linkitetään se <LINK> -elementillä.
  2. Seuraavaksi tuodaan dokumenttiin CSS-arkki joka on tarkoitettu uusille selaimille, käyttämällä @import-sääntöä.
  3. Ja lopuksi ehkä muutama dokumenttikohtainen CSS-sääntö <STYLE> -elementillä.

<< Alkuun


© Petteri Perälä 1999 - 2003.
E-mail: [ petepe@mbnet.fi ].

Valid CSS! Valid HTML 4.01!