1 2 3 4 5 6 7 8 9 10 11 12 E L S

Harjoittelu: Collected.css

The English version has BODY with the class CssSite. Tämä on harjoitustehtäviä varten tehty mallisivu. Huomaa, että tämä on vain mallisivu, enkä ole päivittänyt sen asiasisältöä.

Aiheet

• Yleistä
• Tyyliattribuutteihin sijoitetut tyyliarkit
• Ulkopuoliset tyyliarkit
• Upotetut tyyliarkit ja ns. tuontisääntö
• Kuvaukset
• Lohko- ja rivinsisäiselementtien käyttäytyminen CSS-ominaisuuksien kanssa

Yleistä

Edellisen luettelon kolmessa ensimmäisessä kohdassa on kyse elementin sisällä olevista, asiakirjaan upotetuista ja asiakirjan ulkopuolisista tyyliarkeista. 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.

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

Tyyliattribuutteihin sijoitetut tyyliarkit

Jos tyyliarkkeja käytetään elementtien sisällä käyttäen tyyliattribuuttia, kuten 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 tyyliattribuuttien/ tyylien käyttämiseksi (inline style sheet( attribute)s). Jos haluat muuttaa elementin aloitusmerkinnän sisään tekemääsi määrittelyä, joudut etsimään sen muun koodin seasta aivan kuin HTML 3.2 tyyliset attribuutit!Tällä tavoin määriteltyjä tyyliarkkeja voitaisiin nimittää elementtitason tyyliarkeiksi. 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ä tyyliarkeilla on perustavalaatuisia eroja HTML 3.2 elementtien ulkoasua määritteleviin attribuutteihin nähden:

1. Määrittelyt voivat olla paljon monipuolisempia. Tyyliarkkien sisällä olevia määrittelyjä ei kutsuta englanninkielisissä teksteissä attribuuteiksi vaan niistä käytetään ilmaisua properties, joka suomennetaan yleensä sanalla ominaisuudet. Ne määritellään siten, että ensin annetaan ominaisuuden nimi ja kaksoispisteen (:) jälkeen sen arvo tai useita samalla kertaa annettuja arvoja. HTML 3.2 attribuutteja voi antaa vain yhden kerrallaan eli attribuutilla voi olla kerrallaan yksi arvo. CSS-ominaisuuksia voi antaa yhtä aikaa kuinka paljon tahansa kunhan yksittäiset ominaisuudet ja niiden arvot erotetaan toisistaan puolipisteellä (;), esim. style="color:#660033; background-color:yellow;".
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 (käsittelen tätä näkökulmaa aivan tämän sivun loppu osassa).

Tyyliarkit ovat ikään kuin attribuuttikokoelmia. Tässä mielessä CSS toimii aina attribuuttitasolla riippumatta tavasta, millä tavoin elementtien ominaisuudet määritellään. Sekaannusten välttämiseksi käytän ilmaisua ominaisuudet tai kirjoitan vain CSS-määrittelyistä.

Vaikka tyyliattribuutit ovat heikoin tapa hyödyntää CSS-ominaisuuksia, ne ovat kuitenkin käyttökelpoisia 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:

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

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

Ulkopuoliset tyyliarkit

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

Ulkopuolisissa tyyliarkeissa määritellyillä ominaisuuksilla on sama funktio kuin tyyliattribuuteilla. Niissä annetuilla CSS-ominaisuuksilla 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 erikseen määritelty, ominaisuudet koskevat kaikkia dokumentin kappaleita. Tyyliattribuutin kautta annetut ominaisuudet koskevat sen sijaan vain yhtä kappaletta.

Ulkopuolisten tyyliarkkimää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 css_tiedoston_nimi.css ja linkitä se HTML-tiedostoosi. Linkitys on muotoa <LINK rel="stylesheet" type="text/css" href="tyyliarkkitiedosto.css">. Voit linkittää joko paikallisiin hakemistoihin tai käyttää vaikka toisten tekemiä tyyliarkkitiedostoja ja linkittää niihin. Vapaasti käytettäviä CSS-tiedostoja löydät ainakin W3C organisaation sivuilta (ns. core stylesheets) ja ne ovat muotoa <LINK rel="stylesheet" type="text/css" href="http://www.w3.org/stylesheets/Core/Modernist">

Ulkopuolisiin tiedostoihin voi viitata myös käyttäen ns. tuontisääntöä (import rule), jota käsittelen edempänä.

Upotetut tyyliarkit ja ns. tuontisääntö

Upotetuilla tyyliarkeilla tarkoitetaan asiakirjan HEAD-osaan liitettyjä tyyliarkkeja. Ominaisuuksien määrittelyt ovat samoja, joita käytetään ulkopuolisissa tyyliarkkitiedostoissa. 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ä tyyliarkkeja voidaan kutsua dokumenttitason tyyliarkeista.

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 tyyliarkin oikean sijoittelun - mallissa on mukana myös linkitetty tiedosto, josta siis haetaan muut ominaisuudet:

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Otsikko</TITLE>
<LINK rel="stylesheet" type="text/css" href="tyyliarkkitiedosto.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>
...


Valitettavasti Netscape 4.0x selaimilla on kuitenkin niin suuria toimintavaikeuksia, että jos haluaa optimoida em. selainten maksimaalisen tukemisen ja määrittelyjen helppouden, sinun tulee joiltakin osin ohittaa selain. Selaimen ohittaminen onnistuu helposti käyttämällä ns. tuontisääntöä (@import), sillä kyseiset selaimet eivät ymmärrä sitä. Samalla näet myös, miten tuota sääntöä käytetään. Ensimmäisessä esimerkissä sääntö liitetään STYLE-elementtiin:

<LINK rel="stylesheet" type="text/css" href="NS_4_0x.css">
<STYLE type="text/css">
<!--
@import url(tyyliarkkitiedosto.css); /* tiedostosta NS_4_0x.css määrittelyt, jotka toimivat hyvin NS 4.0x selaimissa; @import säännön avulla haetaan ulkopuolisista tyyliarkkitiedostoista sellaisia asioita, jotka kaatavat NS 4.0x selaimen; tuontisääntöjä voi olla useita, mutta kaikkien tulee olla ennen muita määrittelyjä; 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>

Edellinen tapa on tehokkain. Se tarjoaa mahdollisuuden antaa Netscape 4.0x selaimille aivan omat ominaisuudet, jotka sitten ohitetaan dokumenttiin upotetun tuontisäännön avulla. Jollei toisin ole erikseen määritelty ulkopuolinen tyylimäärittely koskee kaikkia kappaleita, kun suora määrittely vain yhtä kappaletta.

Toinen tapa ohittaa NS 4.0x ja samalla käyttää on tuontisääntöä, on laittaa se toisen CSS-tiedoston alkuun seuraavan esimerkin tapaan:

/* tyyliarkkitiedosto - tämä on päätyyliarkkitiedosto; on hyvä tapa laittaa aina tyyliarkkitiedoston alkuun lyhyt kuvaus tyyliarkkitiedoston sisällöstä */
@import url(toinen_ulkopuolinen_tyyliarkkitiedosto.css); /* tuontisääntöjä voi olla useita, mutta ne kaikki pitää olla tiedoston alussa; muista laittaa ; merkki! */

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

Muista, että aina kun käytetään ns. tuontisääntöä, se tulee sijoittaa ennen yksittäisiä ominaisuuksien antamisia ja se käsitellään ensimmäiseksi. Jos tuontisääntöjä on useita, selain käy ne järjestyksessään lävitse. Varoitus: MS IE lukee myös väärään paikkaan sijoitetut tuontisäännöt. Mutta Opera ja tuleva Netscape eivät niitä lue väärin sijoitettuna, joten laita sääntö aina oikeaan paikkaan! Kokeile mallisivua - siinä ei pitäisi näkyä tyyliarkin tuomia muutoksia!.

Kuvaukset

Käytät sitten minkä tyylisiä CSS-ominaisuuksia tahansa, luot ominaisuuksista kuvauksen (declaration). Kuvaus on kahden kaarisulun eli lohkon (block) välissä ({}) ilmoitetut ominaisuudet ja niiden arvot. Voit useissa tapauksissa valita sen, esitätkö ominaisuudet ja niiden arvot yksitellen vai kokoatko jotkut pikakirjoitteeksi (shorthand properties). Yleensä taustan ominaisuudet esitetään pikakirjoitteina, esim. seuraavaan tapaan:

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

Tarkasti ottaen ennen puolipistettä on vain yksi ominaisuuksien ja niiden arvojen kuvaus. Kuvaus on aina kuvauslohkon (declaration-block) sisällä. 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ä samojen ominaisuuksien kuvauslohko näyttäisi tältä (en tässä yhteydessä käy lävitse, mitä yksittäiset ominaisuudet tarkoittavat; katso myös kaavio kohdasta kuvauslohko):

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;}

Voit tehdä kuvauslohkoja vaikka NotePadilla. Kaikki käytettävissä olevat opastinsovellukset eli velhot ovat puutteellisia, mutta niilläkin saa annettua perusominaisuuksia. Ks. lopuksi liitesivu sovelluksista, joissa käsittelen freeware ja shareware ohjelmia.

Lohko- ja rivinsisäiselementtien käyttäytyminen CSS-ominaisuuksien kanssa

Vaikka melkein mitkä tahansa ominaisuudet voi antaa mille tahansa elementille, niiden toimivuudessa on eroja. Rivinsisäisten elementtien ei tulisi ottaa eräitä ominaisuuksia, jotka kuuluvat vain lohkoelementeille, kuten testin vaaka-asemointi (text-align) ja kappaleen ylä- ja alatäyte (padding-top ja padding-bottom). Nämä määritellään lohkoelementistä käsin.

Sivujen tekijät laittavat joskus rivinsisäisten elementtien sisään lohkoelementtejä. Microsoftin selaimet näyttävät virheellisesti laaditun kohdan yhtenäisenä lohkona. CSS-määrittelyjen suhteen tuleva Netscape 6.0 on kuitenkin tarkempi kuin IE 5.0. Olen itse huomannut, että virheellinen menettely aiheuttaa turhia rivikatkoja eivätkä annetut ominaisuudet toimi niin kuin on tarkoitettu! Varoitus: ole tarkkana rivinsisäisten elementtien oikean sijoittelun kanssa, mikäli haluat lohkojen toimivan kunnolla!

Lohko- ja rivinsisäiselementeille on kaksi yleiselementtiä. Yleinen lohkoelementti on DIV ja sen ymmärtävät vanhatkin selaimet. CSS-ominaisuuksia ja kielitietoja varten on yleinen rivinsisäinen elementti SPAN (yksi mahdollinen käännös on säätöalue, mutta elementtien erisnimiä ei käännetä). Sen sisään ei missään tapauksessa saisi sijoittaa mitään lohkoelementtiä.

Ainoat sekä rivinsisäis- että lohkoelementtien tavoin käyttäytyvät elementit ovat INS ja DEL. Niitä voi käyttää jompanakumpana, mutta ei sekaisin.

Rivinsisäiselementit toimivat Opera 3.6x selaimen kanssa lähes moitteettomasti (tosin vain CSS1 tason määrittelyissä). Sillä on kuitenkin ongelmia, jos SPAN elementti aloittaa uuden rivin. MS IE selaimilla on rivinsisäisillä elementeillä vakavia puutteita, joita käsittelen myöhemmin.

Lohkoelementeillä on yleisesti sovittuja oletusmarginaaleja, mutta oletusmarginaalit voivat hieman selainkohtaisesti vaihdella. Monet lohkoelementit kannattaa siksi määritellä Tarkasti, mikäli haluaa niiden näyttävän mahdollisimman samankaltaisilta uusimmissa selaimissa.