[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]

2. Miten CSS liitetään Web-sivuihin

Yleistä

Jaksoissa kaksi ja kolme kyse on elementin sisällä olevista, asiakirjaan upotetuista ja asiakirjan ulkopuolisista tyylisivuista. Sitä miten niitä tulisi käyttää, tulee tarkastella CSS:n perusfilosofiasta käsin. Tarkoituksenahan on se, että elementtien esitysasua olisi mahdollisimman helppo jälkikäteen muokata.

Cascading Style Sheets

CSS voi käyttää kolmea erityisattribuuttia. Attribuuttia style (style="...") elementin sisään tuleville suorille tyylisivuille, class (class="...") ja id (id="...") ulkopuolisille tyylisivuille. Käsittelen tässä yhteydessä tarkemmin vain attribuutin style käytön.

[Alku]

Kuvaukset

tyylisivut ovat ikään kuin dokumentin esitysasua koskevia attribuuttikokoelmia. Tässä mielessä CSS toimii aina attribuuttitasolla riippumatta tavasta, millä tavoin elementtien ulko- eli esitysasu määritellään.

Tyylisivuen sisällä olevia dokumentin ulkoasua koskevia määrittelyjä ei kuitenkaan kutsuta englanninkielisissä teksteissä attribuuteiksi vaan niistä käytetään ilmaisua properties eli suomeksi ominaisuudet.

Yksi CSS-ominaisuus voi toisinaan korvata monta HTML-attribuuttia. On myös tilanteita, joissa yhden HTML-attribuutin korvaamiseksi tarvitaan useiden CSS-ominaisuuksien määrittelemistä vieläpä niin, että ominaisuudet täytyy antaa eri elementeille. Jos HTML-attribuutti ja CSS-ominaisuudet käsittelevät samaa dokumentin esityasua koskevaa piirrettä, tällä seikalla ei ole periaatetasolla mitään merkitystä. CSS:n perustehtävähän on poistaa or muuttaa minkä tahansa dokumentin esitysasua koskevan HTML-elementin tai -attribuutin vaikutus. Olennaista on vain se, että pystyykö CSS:ää ylipäätänsä soveltamaan johonkin tilanteeseen.

Ominaisuuksista luodaan aina kuvauksia (declaration), jolla tarkoitetaan yhtä ominaisuutta ja sille annettua arvoa tai arvojoukkoa. Kuvauksen sisällä yksittäinen omainaisuus määritellään siten, että ensin annetaan ominaisuuden nimi ja kaksoispisteen (:) jälkeen sen arvo tai useita samalla kertaa annettuja arvoja. CSS-ominaisuuksia voi antaa yhtä aikaa kuinka paljon tahansa kunhan yksittäiset ominaisuudet ja niiden arvot erotetaan toisistaan puolipisteellä (;), esim.:

color:#660033; background-color:yellow;

Ominaisuudet ovat yleensä kuvauslohkon (declaration-block) sisällä. Kuvauslohkon rajoittimina toimivat kaarisulut ({}). Alla on kuvauslohkon käsitekaavio (kaarisulkujen, kaksois- ja puolipisteiden väliin saa jättää tyhjää tilaa niin paljon kuin halutaan):

Kuvauslohko (declaration-block)
kuvaus (declaration)
ominaisuus (property) arvo (value)
{ color : #660033 }

Sivujen tekijä voi useissa tapauksissa valita sen, esittääkö hän ominaisuudet ja niiden arvot yksitellen vai kokoaako hän jotkut ominaisuudet ns. pikakirjoitteeksi (shorthand properties). Yleensä taustan ominaisuudet esitetään pikakirjoitteina, esim. seuraavaan tapaan ([M][S][Pw]):

body {background: white url(./Taulut/kierrevihko.gif) repeat-y 2px 0px;}

Edellisessä esimerkissä kuvauslohkon sisällä oli vain yksi kuvaus. Seuraavassa esimerkissä kuvauslohko sisältää useita kuvauksia. Laitan seuraavassa esimerkissä selvyyden vuoksi yksittäiset kuvaukset allekkain. Yksitellen esitettynä edellisen esimerkin ominaisuuksien kuvauslohko näyttäisi tältä (en tässä yhteydessä käy lävitse, mitä yksittäiset ominaisuudet tarkoittavat):

body
{background-color: white;
background-image: url(./Taulut/kierrevihko.gif);
background-repeat: repeat-y;
background-position: 2px 0px;}

Kaikkia ominaisuuksia ei voi esittää pikakirjoitteena, mutta jos voi, periaate on sangen yksinkertainen:
Pikakirjoitteessa ominaisuuden arvot laitetaan peräkkäin, väliin jätetään tyhjää (space) ja arvojen antaminen päätetään puolipisteellä (;). Myös aliominaisuudet voidaan toteuttaa pikakirjoitteena, esim.:

body {border-top: 1px #660033 solid;}

/* vertaa sitä seuraavaan kuvauslohkoon */

body {border: 1px #660033 solid;}
[Alku]

Tyyliattribuutteihin sijoitetut tyylisivut

Jos tyylisivuja määritellään elementtien sisällä käyttäen tyyliattribuuttia. Muista tyylisivuen määrittelyistä poiketen tyyliattribuutin sisällä olevalla kuvauksella ei käytetä kaarisulkuja. Esim.:

<TD style="border:1px solid #660033">

Menettely ei oleellisesti poikkea HTML 3.2:n attribuuttimäärittelyistä. Tätä menettelytapaa nimitetään englanninkielisissä teksteissä myös rivinsisäisten tyylien käyttämiseksi (inline style sheets or vain inline styles; termi on hieman ongelmallinen - lue Alaviite 1[S][Pw]). Jos haluat muuttaa elementin aloitusmerkinnän sisään tekemääsi määrittelyä, joudut etsimään sen muun koodin seasta aivan kuin HTML 3.2 esitysasua koskevat attribuutit! Tällä tavoin määriteltyjä tyylisivuja voitaisiin nimittää elementtitason tyylisivuiksi. Ne voidaan antaa useimmille elementeille, ei kuitenkaan juurielementeille, jolle HTML 4.01 spesifikaation mukaan voi antaa vain kieliattribuutteja.

Elementtitason tuomasta rajoituksesta huolimatta myös näillä tyylisivuilla on perustavalaatuisia eroja HTML 3.2 elementtien ulkoasua määritteleviin attribuutteihin nähden:

  1. Määrittelyt voivat olla paljon monipuolisempia. HTML 3.2 esitysasua koskevia attribuutteja (muunkinlaisia attribuutteja on olemassa) voi antaa vain yhden kerrallaan eli attribuutilla voi olla kerrallaan vain yksi arvo.
  2. HTML 3.2 dokumenteissa ei voi antaa tietylle elementille kuin vain rajoitetun määrän attribuutteja. CSS-ominaisuudet eivät ole sidonnaisia tiettyihin elementteihin kuten HTML 3.2 attribuutit. Tosin on tilanteita, että kaikkia CSS-ominaisuuksia ei oteta huomioon (mainitsen tällaisia tapauksia muilla sivuilla yksittäisissä asiayhteyksissä).

Vaikka tyyliattribuutit ovat heikoin tapa hyödyntää CSS-ominaisuuksia, ne ovat kuitenkin käyttökelpoisia esim. silloin, kun määritellään elementeille absoluuttisia paikkoja. Seuraava määrittely antaa kuvalle elementille 120 pikselin sijainnin sivun yläreunasta laskien (voit määritellä kuvan muut arvot joko HTML 3.2 attribuuteilla tai lisätä tyyliattribuutin sisään enemmän CSS-ominaisuuksia ([M][S][Pw])):

<IMG src="../Kuvat/Css/omakuvaIso.gif" style="position:absolute; top:120px;">

Käytä tyyliattribuutteja harkiten! Mieti ensin tarvitsetko välttämättä juuri tiettyyn kohtaan erillismäärittelyn.

Selainkohtaisia huomautuksia:.

  1. Netscape-selaimet eivät hyväksy tyyliattribuutin kanssa kaarisulkuja (asia ei ole kuitenkaan kovin yksiselitteinen ja käsittelen ongelmia Alaviite 2:ssa[S][Pw]).

  2. Suorat tyylimäärittelyt ovat kaikkien CSS:ää tukevien selainten luettavissa. Erityisesti Netscape 4.x -selaimilla on suuria toimintavaikeuksia CSS:n kanssa, jolloin sille ei pidä antaa samaa CSS:ää kuin esim. Opera ja MS IE -selaimille. Käyn erillissivulla[S][Pw] tarkemmin lävitse, miten Netscapen suhteen tulee menetellä.


[Alku]
 

Alaviite 1. Termin inline style sheets ongelma on siinä, että sanaa inline käytetään yleensä sanan block vastakohtana. Molemmat kuvaavat elementtien peruskäyttäytymistä. Mikäli termi olisi sopusoinnussa tämän jaottelun kanssa, se koskisi vain tyypillisiä rivinsisäiselementtejä, kuten EM. Parhaiten se sopisi elementille SPAN, joka on nimenomaisesti tarkoitettu rivinsisäisiin tyyli- ja kieliohituksiin.

Tällä kertaa ei ole kuitenkaan kyse elementtien käyttäytymisestä, vaan kyse on dokumentin runko-osaan sijoitetuista eli lähdekoodiin upotetuista (embedded) tyylisivuista. Kyseltyäni asiasta sain seuraavan vastauksen:

Yes, inline has two meanings: something can be inline in the source tai in the output... An inline style is a style that is embedded in the source, an inline element is an element that will look like a phrase in a line on output... Most people talk about "inline style" tai "style attribute",...

Suomalaisittain osuvinta on kirjoittaa vain tyyliattribuuteista, sillä niitä käytetään yksinomaan dokumentin runko-osassa. Käytän myös ilmaisua elementtitason tyylisivut (element-level style sheets).

Alaviite 2. Tyyliattribuutin oikeasta syntaksista on ollut erimielisyyksiä. Useimmat selaimet hyväksyvät style="{}", jolloin tulee selvemmin esille, että tyyliattribuutin sisällä on upotettu CSS-kuvauslohko. Mutta kyseinen syntaksi on vastoin tavanomaista HTML-syntaksia eikä Netscape sitä hyväksy. Kun keskustelin David Baronin kanssa, hän sanoi, että oikea syntaksi on style="". Tarkasteltuani asiaa syvällisesti, olen asiasta eri mieltä. Olennaista on se, että dominoivaksi syntaksiksi on valittu HTML eikä CSS, joten asialle ei enää voi tehdä mitään. Nykyinen syntaksi on saman kaltainen kuin JavaScript-kirjoitteilla, joissa voidaan koota yhteen monia toimintoja, jotka erotetaan toisistaan ";"-merkillä, esim.: onClick="uusikkunaa(); if(browser) nayta(10, 'b')".

[Alku]

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