Päivitetty: 10.03.2003.

CSS info

Kerron tällä sivulla, mikä CSS on ja miksi sitä tulisi käyttää. Kerron myös, mitä tavoitteita CSS:n avulla pyritään saavuttamaan. Lisäksi näytän lyhyesti, kuinka CSS muuttaa perinteisen hypertekstidokumentin rakennetta.


CSS info

Mikä CSS?

Jos olet tehnyt HTML-kielellä sivuja tiedät miten hankalaa on esimerkiksi vaihtaa kaikki sivulla olevat <H3> -otsikot tummanvihreäksi. HTML-kielessä kyseinen operaatio tehdään esim. näin: <h3><font color="#009900">…</font></h3>.

Yhdellä sivulla voi kymmeniä H3 -elementtejä, joihin kaikkiin pitää laittaa sama määrittely. Ja entä jos sivuja on kymmeniä tai satoja? Käytössä olevista apuohjelmista riippuen urakkaan voi mennä muutamasta tunnista muutamaan päivään.

Eikö olisikin paljon helpompaa, jos voisit määritellä yhteen paikka, että kaikki <H3> -otsikot saavat värin #00990? CSS mahdollistaa juuri tämän! Kirjoitat vain tyylisääntöihin:
h3 { color: #009900 } ja yllätys yllätys, kaikki H3 -otsikot ovat halutun värisiä.

Ja tämä on vasta alkua. Voit määritellä CSS:n avulla kaiken sen mitä HTML mahdollistaa, sekä paljon muuta mutta ennen kaikkea huomattavasti helpommin.

CSS:n määritelmä

Eli CSS on tyylikieli, joka kuvaa HTML-, XHTML- tai XML -dokumenttien ulkoasua. CSS korvaa vanhentuneen HTML:n käyttämät muotoilukomennot.

Voi tehdä CSS:n avullaa kaiken sen mitä HTML mahdollistaa sekä paljon muuta. CSS:n avulla voit mm määritellä lähes jokaiselle HTML-elementille oman värin, taustaväri ja taustakuva lisäksi elementille voidaan antaa reunukset ja marginaalit.

W3C on julkaissut myös uudemman suosituksen, jonka nimi on loogisesti CSS2. Nyt petepeweb sisältää myös CSS2-oppaan.

Cascading Style Sheet (CSS) tarkoittaa seuraavia asioita:

Style - Tyyli
Määrittää (x)HTML-elementtien ulkoasun.
Style Sheet - Tyyliarkki
Kokoaa säännöt yhteen.
Cascading Style Sheet - Porrastetut tyyliarkit
Eri säännöt voivat mennä päällekkäin, jolloin Cascading -sääntö määrää, mikä sääntö on voimassa.

CSS:n avulla voidaan siis määritellä (x)HTML-dokumentin ulkoasu, kuten elementtien koko, marginaali, väri, taustakuva jne. Mutta CSS ei pysty vaikuttamaan mihinkään muuhun, eli esim. et voi määritellä CSS:n avulla mihin kehykseen linkit avataan.

<< Alkuun

Suomennos

Cascading Style Sheet on aika kömpelö ilmaisu kirjoitettuna tai puhuttuna, niinpä siitä yleensä käytetään lyhennystä CSS. Suomennus onkin jo hieman hankalampaa. Virallista käännöstä ei ole, mutta ainakin seuraavia ilmaisuja käytetään:

Käytän sivullani kuitenkin vain lyhennettä CSS, jolla CSS1-oppaassa ensisijaisesti tarkoitan CSS Level 1 -määrittelyä.

<< Alkuun

CSS:n tavoitteet

CSS:n tavoitteena on:

<< Alkuun


Hypertekstidokumentin arkkitehtuuri

Käytän nimitystä hypertekstidokumentti, joka voi olla mikä vain WWW-tekniikkaa tukeva dokumentti. Tavallisin hypertekstidokumentti on perinteisellä HTML-kielellä rakennettu sivu. Muita tekniikoita ovat xHTML ja XML sekä sen johdannaiset kuten, WAP tai SMIL.

Yksi HTML-kielen suurimpia ongelmia on, että dokumentin sisältämä informaatio eli tieto on ulkoasun eli esitystavan kanssa samassa tiedostossa. Mitä haittaa tästä sitten on? Tarkastellaan seuraavaksi kahta pientä esimerkkiä, joista ensimmäinen on perinteinen HTML-dokumentti ja toinen uudempi CSS -tekniikkaa hyödyntävä sivu.

 

'vanha tapa'

HTML-dokumentti:

<html>
 <head> <title>testi</title> </head>
<BODY bgcolor="#FFFFFF" text="#000000" 
link="#0000FF" vlink="#999999" alink="#FF0000">
 <h1><font color="#990000" face="Times New Roman">
 Tervetuloa</font></h1>
 <p><font face="Arial"
 Nämä ovat minun kotisivut</font></p>
...
</BODY>
</html>

Yllä oleva lyhyt HTML-listaus muodostaa lähdekoodin, josta selain muotoilee WWW-dokumentin Tämä on siis 'perinteinen' hypertekstidokumenttien arkkitehtuuri, joka voidaan tiivistää muotoon:

Lähde       Kohde
Rakenne
Tieto
Esitystapa
+
Kielioppi (selain)
=
WWW-dokumentti

Dokumentin rakenne on HTML-dokumenteissa aina sama, eli se koostuu: <HTML>-, <HEAD>- ja <BODY> -osista. Dokumentin varsinainen tieto sijaitsee aina <BODY> osassa.

Mutta myös dokumentin esitystapa (formatointi), sijaitsee samassa dokumentissa. HTML:n esitystavan kuvaaminen tehdään pitkälti <FONT> -elementillä.

Tästä seuraa, että kun dokumentta halutaan muokata täytyy editoida tietosisältöä sekä esitystapaa, riippumatta siitä kumpaa halutaan päivittää. Tämä on hidasta ja työlästä. Lisäksi tiedon ja esitystavan sijaitseminen samassa asiakirjassa kasvattaa dokumentin kokoa ja latautumisaikaa.

Kuten voit myös todeta lyhyestä HTML-koodista, se ei ole järin helppolukuista. Jos dokumentti on iso on siinä kymmeniä jopa satoja/tuhansia <FONT> -määrittelyjä, voit varmaan kuvitella miltä kyseinen dokumentti näyttää koodipuolella.

Kaiken lisäksi HTML-kielellä on varsin rajalliset mahdollisuudet muokata dokumenttia. Tämä johtuu HTML-kielen käyttötarkoituksesta, joka alunperin suunniteltiin kuvamaan vain tiedon fyysistä rakennetta. Katsotaan nyt samaa dokumenttia, kun siinä käytetään CSS -muotoilua.

<< Alkuun

'uusi tapa'

(x)HTML / XML -dokumentti CSS-tiedosto
<html>
 <head>
 <title>testi</title>
 <LINK rel="stylesheet"
 type="text/css"
 href="oma.css">
 </head>
<BODY>
 <h1>Tervetuloa</h1>
 <p>Nämä ovat minun kotisivut</p>
 ...
</BODY>
</html>
body {
color: #FFF;
background: #000; }

h1 {
color: #900;
font: Arial }

p { font: Arial }

Tämä on siis 'uuden tavan' arkkitehtuuri, ja se voidaan tiivistää muotoon:

Lähde       Kohde
Rakenne
Tieto
 
Esitystapa
(CSS, XSL)
 
WWW-dokumentti
Tulostettava dokumentti
SQL-haku yms.
+
ohjelmointi (DOM)
=
 
Kielioppi (i18n)
 

Nyt lähde sisältää fyysisen rakenteen lisäksi vain varsinaisen tietosisällön. Tällöin tiedoston koko pienenee ja sitä on helpompi editoida.

Lähdetiedosto voi olla perinteinen HTML-tiedosto tai xHTML / XML -tiedosto. Se voi olla myös tietokannasta tai käyttäjän valintojen perusteella dynaamisesti generoitu (tuotettu) hypertekstidokumentti. Lähdetiedostoon voidaan linkittää ulkoisia tiedostoja, jotka tekevät kukin oman tehtävänsä:

Esitystapa
Tuodaan nyt erillisenä tiedostona, jolloin sitä voidaan hyödyntää useilla eri sivuilla. Esitystapa voi olla CSS, XLS, JavaScript Style Sheet (JSS), DSSSL tai mikä tahansa kyseisen lähdetiedoston formatointiin sopiva kieli.
Ohjelmointi
on mahdollista (jos noudatetaan DOM -standardia) millä tahansa ohjelmointi kielellä. Näin voidaan luoda esim. C-kielellä toimintoja, jotka suoritetaan palvelimella ja siitä saatu informaatio lisätään WWW-dokumenttiin.
Kielioppi
määrittelee dokumentin käyttämän kieliversion (lang) sekä elementtien kirjoitussuunnan (dir). Tarvittaessa kielioppi voidaan ladata halutusta paikasta.

Selain muodostaa lähdetiedostosta sekä saamiensa muiden ulkoisten ohjeiden avulla kohdetiedoston, eli WWW-dokumentin.

Dokumentin ulkoasu voi vaihdella eri ympäristöissä. Eli esimerkiksi tulostettava versio voi olla erinäköinen kuin näytölle tarkoitettu sivu. Lisäksi WWW-dokumentti voi sisältää esim. SQL-hakuja tai muita toimintoja, jotka määritellään ohjelmointi kohdassa.

Ylempi dokumenttirakenne on 'vanha tyyli', jota käytetään Internetissä vieläkin, vaikka se onkin vanhentuneen HTML 3.2 peruja. Alempi dokumenttirakenne on siis 'uudempi tyyli' ja se on tarkoitettu HTML 4- / xHTML- sekä XML -dokumenttien rakenteeksi.

<< Alkuun


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

Valid CSS! Valid HTML 4.01!