[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Opassivut > 2. Miten CSS liitetään Web-sivuihin > Linkitetyt tyylisivut (jakso 3/3)

Linkitetyt tyylisivut

Aiheet

Ulkopuoliset tyylisivut

Mielestäni aina on mielekästä luoda ulkopuolinen CSS-tyylisivutiedosto, jos tyylisivuja käyttäviä asiakirjoja on enemmän kuin kaksi. Laadi erillistiedostoon koko sivustossasi käytettävät perustyylit. Tällöin voidaan kirjoittaa sivustotason tyylisivuista.

Ulkopuolisissa tyylisivuissa määritellyillä ominaisuuksilla on sama funktio kuin tyyliattribuuteilla. Niissä annetuilla CSS-ominaisuuksilla, esim. p {color:blue; border:1px solid blue;} on sama vaikutus kuin <P style="color:blue; border:1px solid blue;">, mutta ominaisuuksia ei ole annettu elementille suoraan vaan epäsuorasti. Jollei toisin ole varta vasten määritelty p {color:blue;... koskee kaikkia dokumentin kappaleita (selostan tällä sivustolla edempänä, mikä merkitys on kuvauslohkojen edessä olevilla määrittelyillä). Tyyliattribuutin avulla annetut ominaisuudet koskevat sen sijaan vain yhtä kappaletta ([M][S][Pw]).

Ulkopuolisten tyylisivumäärittelyiden vaikutus on saman tapainen kuin HTML 3.2 dokumenttien esitystyyliin vaikuttavilla attribuuteilla, mutta sillä erolla, että dokumentin runko-osassa ei tarvitse välttämättä käyttää lainkaan esitystyyliin vaikuttavia attribuutteja!

Kun käytät ulkopuolisia tiedostoja, anna tiedostolle nimeksi esim. css_tiedoston_nimi.css ja linkitä se HTML-tiedostoosi. Linkitys on alla olevan esimerkin tapainen:

<LINK rel="stylesheet" type="text/css" href="tyylisivuTiedosto.css">

Koodin tulee sijaita dokumentin HEAD-osassa. Voit linkittää joko paikallisiin hakemistoihin tai käyttää vaikka toisten tekemiä tyylisivutiedostoja ja linkittää niihin. Vapaasti käytettäviä CSS-tiedostoja löydät ainakin W3C organisaation sivuilta (ns. core stylesheets). Alla on esimerkki linkityksestä yhteen siellä olevaan CSS-tiedostoon:

<LINK rel="stylesheet" type="text/css" href="http://www.w3.org/stylesheets/Core/Modernist">

Ulkopuolisissa tyylisivuissa ei pidä käyttää mitään HTML-elementtiä tai -kommenttia. Seuraavassa on hyvin yksinkertainen malli ulkopuolisesta tyylisivutiedostosta:

/* Älä käytä HTML-kommentteja. Käytä niiden sijaan CSS-kommentteja. */
body {color:#333333; background-color:aqua}

Suositan, että tarkastutat CSS-tiedostosi W3C CSS validator -palvelulla. W3C:n CSS-validaattorin voi asentaa myös HTML-Kit -ohjelmaan, mutta olen havainnut, että se ei toimi kunnolla.

W3C: CSS validator.
Muita sivustoja: HTML-Kit Home Page[Pw].

Ulkopuolisiin tiedostoihin voi viitata myös käyttäen ns. tuontisääntöä (import (at-)rule), jota käsittelen tämän sivun seuraavassa jaksossa. Annan samalla muutamia esimerkkejä linkitettyjen tyylisivuen käytöstä.

[Alku]

Upotetut tyylisivut ja ns. tuontisääntö

Upotetuilla tyylisivuilla tarkoitetaan asiakirjan HEAD-osaan liitettyjä tyylisivuja. Ominaisuuksien määrittelyt ovat samoja, joita käytetään ulkopuolisissa tyylisivutiedostoissa. Ne liitetään asiakirjaan ennen runko-osaa (BODY) <HEAD></HEAD> koodien väliin eli "upotetaan" (embed) asiakirjaan käyttäen STYLE-elementtiä. Tällä tavoin määriteltyjä tyylisivuja voidaan kutsua dokumenttitason tyylisivuiksi.

Suosittelen, että laitat tähän määrittelyyn vain sellaiset tiedot, joita käytät yhdessä asiakirjassa. Voit myös ohittaa muille sivuille ulkopuolisissa CSS-tiedostoissa antamiasi ominaisuuksia. Esimerkiksi haluat tiettyyn asiakirjaan muista poikkeavan taustakuvan ja -värin. Sinun ei tarvitse määritellä kaikkea uusiksi. Riittää, että annat uudet ominaisuudet vain taustalle. Muut arvot jäävät voimaan.

Seuraavan esimerkin ominaisuudet antavat asiakirjalle keltaisen pohjavärin ja uuden taustakuvan, joka on keskitetty sivulle ja joka ei toistu (näet esimerkissä myös tyylisivun oikean sijoittelun - mallissa on mukana myös linkitetty tiedosto, josta siis haetaan muut ominaisuudet ([M][S][Pw])):

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Otsikko</TITLE>
<LINK rel="stylesheet" type="text/css" href="tyylisivutiedosto.css">
<STYLE type="text/css">
<!-- /* määrittelyt ovat HTML-kommenttien sisällä, jotta vanhat selaimet ohittaisivat ne */
body {background: yellow url(uusikuva.gif) no-repeat center;} /* selostan toisessa yhteydessä tämän merkityksen */
-->
</STYLE>
</HEAD>
<BODY>
...

Sekä upotettujen että ulkopuolisten tyylisivuen kanssa voi käyttää ns. tuontisääntö (@import), joka kuuluu ns. at-sääntöihin (käsittelen muita at-sääntöjä edempänä).

Laatimastani esimerkistä näet, miten tuota sääntöä käytetään. Ensimmäisessä esimerkissä sääntö liitetään STYLE-elementtiin ([M][S][Pw]):

<LINK rel="stylesheet" type="text/css" href="tyylisivutiedosto.css">
<STYLE type="text/css">
<!--
@import url(lisaTyylisivutiedosto.css); /* huomaa lopussa oleva ; merkki - ilman sitä selain ei jatka eteenpäin lukemaan jäljessä tulevia määrittelyitä; */

/* dokumenttikohtaiset määrittelyt */
body
{font-family: Verdana, Arial, Helvetica, sans-serif; font-size:x-small;
padding-top: 10px;
padding-left: 32px;
padding-right: 10px;
padding-bottom: 10px;
margin: 0px;}
h2
{color: #660033;font-family:Verdana, Arial, Helvetica, sans-serif;} /* muista, että tämä ei kumoa aiemmin annettuja ominaisuuksia muilta kuin uudelleen määritellyiltä kohdin */
td
{font-family: Verdana, Arial, Helvetica, sans-serif; font-size:x-small;}
-->
</STYLE>

Toinen tapa käyttää tuontisääntöä on laittaa se toisen CSS-tiedoston alkuun seuraavan esimerkin tapaan:

/* tyylisivutiedosto.css - tämä on päätyylisivutiedosto; on hyvä tapa laittaa aina tyylisivutiedoston alkuun lyhyt kuvaus tyylisivutiedoston sisällöstä */
@import url(toinen_ulkopuolinen_tyylisivutiedosto.css);

body {...} /* muut määrittelyt normaaliin tapaan */

Muista, että aina kun käytetään ns. tuontisääntöä, se tulee sijoittaa ennen yksittäisiä ominaisuuksien määrittelyjä ja se käsitellään ensimmäiseksi. Jos tuontisääntöjä on useita, selain käy ne järjestyksessään lävitse. Tuontisäännön idea on se, että selain lukee tuontisäännöissä viitatut tyylisivut ikään kuin ne olisi kirjoitettu siihen paikkaan, jossa tuontisääntö sijaitsee.

Selainkohtaisia huomautuksia:

  1. Tuontisääntö ei toimi Netscape 4.x -selaimissa.

  2. MS IE 6.0 vanhemmat Windows-versiot ja MS IE 6.0 silloin kun selain ei toimi standard-compliant -moodissa[S] lukevat myös väärään paikkaan sijoitetut tuontisäännöt. Laita sääntö aina oikeaan paikkaan (kokeile mallisivua - siinä ei pitäisi näkyä tyylisivun tuomia muutoksia! ([M][S][Pw]).)

  3. Tuontisääntö sisältää useita ongelmia, mikäli halutaan mediakohtaisia CSS-määrittelyjä. Käsittelen näitä ongelmia tarkemmin sivulla Testiominaisuudet ja CSS:n kohdentaminen[S][Pw].

  4. MS IE Windows -selaimissa (ainakin MS IE 6.0 asti) on rajoituksena se, että linkitettyjä tai upotettuja tyylisivuja voi olla enintään 30 kpl.

  5. Koska MS IE 3.02 ymmärtää vain viimeisen STYLE or LINK elementin kautta määritellyn tyylisivun, se muodostaa oman ongelmansa. En käsittele selainta kuitenkaan tarkemmin, sillä sen käyttäjiä on enää todella vähän.


Pekka Järveläinen: CSC; John Allsop: Managing Style at Large Sites[Pw]; Microsoft: BUG: 30 Style Sheet Limitation in Internet Explorer.

[Alku]

Vaihtoehtoiset tyylisivut

Joku saattaa kysyä, miksi on olemassa kaksi tapaa linkittää ulkopuolisiin tyylisivuihin (tuontisääntö ja LINK elementti). Perusero niiden välillä on siinä, että periaatteessa LINK elementin käyttö antaa mahdollisuuden vaihtaa tyylisivuja määrittelemällä vaihtoehtoisia tyylisivuja. Systeemi toimii yksinkertaisesti toteutettuna seuraavasti:

  • Attribuutti title nimeää tyylisivun, jotta sen voi haluttaessa vaihtaa. Tyylisivu, jolla ei ole em. attribuuttia luetaan automaattisesti eikä sitä voi vaihtaa.
  • link rel="stylesheet" title="Oletustyylisivu" määrittelee oletustyylisivun, joka on voimassa, mikäli käyttäjä ei ole valinnut jotain toista tyylisivua.
  • link rel="alternate stylesheet" title="Vaihtoehtoinen tyylisivu" on vaihtoehtoinen tyylisivu, jonka käyttäjä voi valita joko oletustyylisivun tilalle tai jos oletustyylisivua ei ole määritelty muiden tyylisivuen lisäksi.
W3C: HTML 4.01: 14.3.1 Preferred and alternate style sheets.

Selainkohtaisia huomautuksia:

  1. Vaihtoehtoiset tyylisivut toimivat vain Mozilla Gecko, Opera 7.x+ ja Linux käyttöjärjetelmän tiedostoselaimista ainakin Konqueror 3.1:ssä, joka saattaa joskus valita väärän tyylisivun. Koska ne eivät säily selaimen muistissa seuraavalle sivulle mentäessä niistä ei ole käytännössä mitään hyötyä. Aseta niiden sijaan vaihtoehtoiset tyyliarkit evästeillä (cookies)

  2. MS IE - ja Opera-selaimissa voi määritellä käyttäjän tyylisivut. Erityisesti Opera 4.x+ tarjoaa erittäin nopean tavan vaihtaa käyttäjän (user) ja sivun tekijän (author) tyylisivuen välillä. Selitän tämän asian lisäsivu >sivulla[S].

Käsitten seuraavaksi millaisia arvoja CSS-ominaisuuksille voi antaa.

[Alku]
   
Copyright Tapio Markula 1999-2003, Salo (kotisivu, s-posti - lisää s-postiosoiteeseen pisteellä erotettuna nimeni, Tapio Markula) (@dnainternet.net) - ei julkiskäyttöön ilman sopimusta.
Get Expression!
Editori, jolla saa luotua standardit täyttäviä HTML ja XML dokumentteja. Tämän sivuston sivut on useimmissa tapauksissa tarkastettu Dave Raggetin (W3C) tekemällä HTML-Tidy apuohjelmalla ja satunnaisesti W3C-organisaation virallisella koodintarkastusohjelmalla. Useimpien sivujen syntaksin pitäisi olla sopusoinnussa W3C:n XHTML 1.0 spesifikaation kanssa. Testaa tämä sivu!
Informaatiota selaimista, jotka näyttävät tai tulostavat tämän sivuston parhaiten.
[Hae Opera] [Hae Mozilla!]
CSS-opasta on viimeksi muutettu 20.12.2004