:: CSS-opas: Opassivut: 1. Mikä on HTML ja XML asiakirjojen perusrakenne: HTML 4.0 + CSS ja CSS:n tavoitteet (jakso 6/7) ::

	Aihepiiriluettelo > CSS-oppaan etusivu > Opassivut > 1. Mikä on HTML ja XML asiakirjojen perusrakenne > HTML 4.0 + CSS ja CSS:n tavoitteet (jakso 6/7)

Sivun jaksot:

HTML 4.0 + CSS ja CSS:n tavoitteet

HTML 4.0:n ja CSS:n avulla sisältö ja sen ulko- eli esitysasu (esittämistapa) voidaan eriyttää osittain or lähes kokonaan toisistaan käyttäen CSS-koodausta. Lyhenne CSS tarkoittaa seuraavaa (käsitteet ovat loogisessa järjestyksessä):

Style = tyyli eli elementtien ulkoasun esittäminen käyttäen erityisiä tyylikuvauksia ja -sääntöjä (käsittelen niitä tarkemmin edempänä).
Style Sheets = kirjaimellisesti tyyliarkit = tyylikuvaukset ja -säännöt kootaan "tyyliarkeiksi" eli tyylisivuiksi (nykyisin tyylisivu on standardiksi muodostunut sanan sheet vastine, mitä voi pitää oikeutettuna, sillä arkkikin on sivu); yksittäinen tyylisivu on paikka, jossa on yksi tai useampia varsinaisia or loogisia tyylisääntöjä, jotka määrittelevät dokumentin esitysasun (spesifikaatioissa on hieman epätarkat määritelmät; lue Alaviite 1 ).
Cascading = tyylisivut voidaan kytkeä toisiinsa ja alistaa eli ikään kuin limittää tai porrastaa keskenään. Juuri siksi käsittelemme Cascading Style Sheets -määrittelyjä, emme vain style tai style sheet määrittelyjä. Suomennan sen tilanteesta riippuen joko limitetyt tyylisivut tai porrastetut tyylisivut. Nämä käännökset ovat sopusoinnussa W3C-organisaation logon kanssa!

CSS:ssä on kyse useiden, eri lähteistä peräisin olevien tyylikuvauksien ja -sääntöjen soveltamisesta samanaikaisesti. Tämän vuoksi spesifikaatio kirjoittaa sheets monikossa ja suomenkielessä tulee käyttää monikkomuotoista ilmausta arkit. Tyylisäännöillä on toisiinsa nähden ikään kuin porrastetut, tarkoin säädellyt painoarvot (weigth).

CSS ei ole täyspiirteinen kieli, sillä se toimii vain toisten kielten apukielenä (yleisimmin HTML, XML ja XSL). Se ei se sisällä lainkaan HTML:n kaltaisia elementtimerkkauksia. CSS:n käyttöä voi verrata pikemminkin JavaScript ja ECMAScript ohjelmointikieliin, joita kutsutaan nimellä scripting languages. Sekä JavaScript-kieltä että CSS:ää voidaan käyttää dokumentin runko-osassa hyvin lyhyinä koodikatkelmina. CSS ei ole kuitenkaan ohjelmointikieli, vaikka sen syntaksi on niiden perua.

CSS1 on rajoitettu mekanismi käyttää erilaisia tyylejä Web-asiakirjoissa ja se on siten rajoittunut muotoilukieli (formatting language). CSS1:tä ei voi pitää varsinaisena sivuntaittokielenä.

Sen sijaan CSS2 on jo lähes täysipainoinen sivuntaittokieli, sillä sen avulla pystyy luomaan suurimman osan Web-dokumenttien tarvitsemista muotoiluista ja sivujen tarvitsemista kontrolleista. Tosin eräitä puutteita siinäkin on. Nämä puutteet pyritään korjaamaan CSS3:ssa. Muotoilu merkitsee ensisijaisesti visuaalista muotoilua (visual formatting). CSS on kuitenkin monessa muussakin mielessä muotoilukieli.

Jos selain toteuttaisi täysin CSS2:n, kielellä voisi teoriassa määritellä useimpien HTML:n rakenneosien eli elementtien muotoilupiirteet kokonaan uudestaan. CSS käyttäisi tällöin HTML-elementtejä lähinnä vain merkkauskoodeina. HTML itsessään ei toimisi juuri lainkaan muotoilukielenä. Elementtien todellista järjestystä CSS:llä ei tosin pysty muuttamaan (kylläkin poistamaan elementtejä näytöltä tai sijoittamaan ne toisiin paikkoihin - miten se tapahtuu selviää myöhemmin).

Muotoilu- ja sivuntaittokielen keinoin CSS2 pyrkii seuraaviin tavoitteisiin:

Sisältö ja sen esittäminen voidaan irrottaa toisistaan.
Muotoilukeinoja käyttäen voidaan muuttaa myös dokumentin rakennetta. CSS ei ole kuitenkaan keino irrottaa rakenne ja sisältö kokonaan toisistaan, koska se ei kykene muuttamaan elementtien todellista järjestystä.
Sillä voidaan luoda tarkempia ja monipuolisempia esitysasumäärittelyjä elementeille kuin mitä HTML-kielellä yksinään on mahdollista.
Tiedostot voivat olla alaspäin yhteensopivia.
Perusasiakirjat voivat olla rakenteeltaan hyvin yksinkertaisia.
Sama asiakirja voidaan tarjota hyvin erilaisena erilaisille laitteille. Visuaalisen esittämisen sijaan tiedot voidaan syöttää näkövammaisia ajatellen erityiskirjoittimille tai puhesyntetisaattoreille. Tällöin kyseessä on kuuloon ja kosketukseen perustuva dokumenttien muotoilu.
CSS-tiedostoja voidaan käyttää muissakin kuin HTML-asiakirjoissa, kuten XML-asiakirjoissa.

CSS mahdollistaa palaamisen HTML:n alkuperäiseen ideaan eli paluu juurille! äärimmilleen vietynä HTML 4.0 asiakirja ei itsessään sisällä ainuttakaan esitysasua kuvaavaa attribuuttia, vaan lähinnä rakenne- ja linkityselementtejä ja -attribuutteja. Sellaisia elementtejä ja attribuutteja, jotka koskevat puhtaasti tekstin esittämistyyliä (kuten esim. elementtejä FONT, B, I, U ja attribuutteja align, bgcolor) ei käytetä. Osa em. elementeistä ovat sinänsä sallittuja, mutta ne ovat joka tapauksessa ei-suositeltavia, sillä elementtien ensisijaisena tarkoituksena on ilmaista dokumenttien rakenne ja semantiikka, ei sen esitystapa. Tämä sivu ei käytä edes sallittuja esitysasullisia elementtejä.

Muotoilut linkitetään useimmiten pääosin erillistiedostoon käyttäen muotoa <LINK rel="stylesheet" type="text/css" href="tyylisivutiedosto.css"> kuten tässä esimerkissä ():

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <LINK rel="stylesheet" type="text/css" href="tyylisivutiedosto.css"> <TITLE>Asiakirjan otsikko</TITLE> </HEAD> <BODY> <H2>Otsikkoteksti</H2> <P>Kappale</P> <P>Toinen kappale. <A href="html_asiakirja.html">Linkki</A >. Ainoat välttämättä tarvittavat attribuutit ovat linkit sekä mahdolliset linkitettävät objektit kuten kuvat.</P> </BODY> </HTML>

Tiedostossa tyylisivutiedosto.css kuvataan, miten esim. elementti H2 näytetään tietokoneruudulla. Sama koskee tätä dokumenttia. CSS mahdollistaa korvata HTML 3.2 tyyliset dokumentin esitysasua koskevat attribuuttimäärittelyt paljon rikkaammalla tavalla esittää asiakirjan ulkoasu.

Lopputuloksena voi olla äärimmäisen pelkistetty, vähän koodia sisältävä ja nopeasti latautuva asiakirja, joka on kaikesta huolimatta hyvin näyttävä selaimelle, joka ymmärtää CSS:ää - mutta samalla äärimmäisen karu selaimelle, joka ei sitä ymmärrä. Todellisuudessa esim. Netscape 3.x pudotetaan ulkonäön esittämisen suhteen lähes alkuajan selainten tasolle. Tätä on HTML 4.0 Strict (strict= ankara, tinkimätön)!

Vaikka rakenne on pääosin itse asiakirjassa, siihen voidaan periaatteessa joiltakin osin vaikuttaa myös CSS:n avulla. Koska elementtien ulkoasun määrittelyt ovat erillistiedostossa, sivuston ulkoasun ja eräiden rakenteiden muuttaminen on äärimmäisen helppoa! Sivun tekijän (author) ei tarvitse uudestaan koodata yksittäisiä elementtejä. Minimitapauksessa riittää, että muutat vain muutaman kirjainmerkin ja tuhansien sivujen ulkoasu muuttuu kerralla!

On mahdollista luoda myös löysiä (loose), HTML 4.0 Transitional asiakirjoja. Transitional tarkoittaa "murrosvaiheen" dokumenttityyppimäärittelyä. Asiakirja sisältää muotoiluja, jotka HTML 4.0:ssa strict ei tarvita ja jotka siinä voidaan korvata CSS:llä. Tällaiset määrittelyt katsotaan vähitellen poistuviksi ja korvautuviksi. Paremman yhteensopivuuden vuoksi niitä käytetään vanhempia selaimia varten. Tosin poistuvuuden suhteen olen hieman eri mieltä kuin jyrkimmät CSS:n käyttäjät. Monin paikoin on joustavampaa käyttää HTML 3.2 attribuutteja kuin CSS:ää.

Tämä dokumentti on lähes strict-kriteerit täyttävä. Olen käyttänyt dokumentin varsinaisessa asiaosassa lähes yksinomaan sellaisia elementtejä ja attribuutteja, jotka on mainittu HTML 4.0 strict.dtd asiakirjassa (sen sijaan yksittäisissä linkkeissä ja linkkikokonaisuuksissa on strict-dokumenttityyppiin kuulumattomia elementtejä ja attribuutteja, joihin kuuluu elementille A annettu attribuutti target; lue viimeksi mainittuun attribuuttiin liittyvä Alaviite 2 ). Tämän dokumentin näyttäminen riippuu vanhoilla selaimilla niiden oletusasetuksista ja käyttäjän niihin tekemistä mahdollisista muutoksista. Testaa ero! Vertaa tiedostoa tyylisivun kanssa () ja ilman sitä (). Jälkimmäinen on kuin HTML 2.0 asiakirja.

Huomautus. HTML 4.01 (HTML 4.0:n korjattu versio) ja CSS2 spesifikaatiot on suunniteltu toteuttamiskelpoisiksi. Selaimen pitää toimia mahdollisimman pitkälle niin, että sen tukemat spesifikaatiot pääsevät toteutumaan. On kuitenkin muistettava se, että HTML ja CSS spesifikaatiot kehittyvät ja niiden kesken tulee olla priorisointi.

Jos eri spesifikaatioiden välillä ilmenee ristiriitoja, toimitaan selaimen tukeman uusimman spesifikaation mukaan. Vanhempia spesifikaatioita toteutetaan siinä määrin kuin niitä voidaan toteuttaa aiheuttamatta ristiriitaa uudempien kanssa.

Koska CSS:n perusideana muualta käsin (kuten erillistiedostoista) pystyä poistamaan tai muuttamaan minkä tahansa esitysasua koskevan HTML-elementin tai -attribuutin vaikutusta, CSS:lle pitää antaa suhteessa HTML:ään etusija, mikäli sekä HTML että vastaava CSS on annettu tai HTML ylipäätänsä käsittelee jollakin tavalla samoja esitysasullisia piirteitä kuin CSS.

Käyn lävitse näillä sivuilla seuraavia asioita:

Yritän tällä sivulla selittää, mitä ovat tyylisivut.
Sivulla 2 käsittelen sitä, missä niitä voidaan määritellä. Annan joitakin käytännön esimerkkejä yksinkertaisista tyylisivuista.
Sivulla kolme käsittelen mahdollisia mittayksiköitä ja värejä.
Sivuilla 4-5 käsittelen sitä, milloin käyttäjäsovellukset (UA = User agents, useimmiten WWW-selaimet) käsittelevät niitä lopullisessa prosessissa.
Sivut 6-9 käsittelevät sivun yksityiskohtia (fontit, ankkurit ja linkit, tausta, reunukset ja listat).
Sivut 10-11 käsittelevät dokumentin perusrakenteiden hallintaa.
Sivu 12 on vilaus tulevaisuuteen.

Seuraava jakso käsittelee HTML 4.01:n jälkeisiä XHTML-spesifikaatiota sekä XML-dokumentteja. Mikäli et ole niistä kiinnostunut, voit hypätä sivulle 2.

John Allsop: The key ideas of CSS

.
Keijo Kortelainen: Tyylimäärittelyjen käytöstä aiheutuvat hyödyt ja haitat.

Sivun jaksot:

Alaviite 1. Seuraavat spesifikaatioiden määritelmät vaativat vähän selittämistä:

CSS1:

a collection of rules

CSS2:

A set of statements that specify presentation of a document.

Yksittäinen tyylisivu ei sisällä välttämättä useaa sääntöä eli sääntö- tai lausekokoelmaa (a collection of rules (sama kuin a rule set) tai a set of statements). Yksinkertaisimmillaan se sisältää joko yhden säännön tai se ei sisällä lainkaan varsinaista sääntöä, esim. style="color:blue". Tällaisessa tapauksessakin on kuitenkin kyse loogisesti säännöstä, sillä tyylisivuilla on aina suhteellinen painoarvo toisiin tyylisivuihin nähden. CSS2-spesifikaation määritelmä on tosi, kun a set of statements (lausejoukko) määritellään seuraavasti:
Lausejoukko = yksi tai useampi varsinainen tai looginen CSS-sääntö.

Alaviite 2. Strict ei salli kehysten käyttöä. Keskusteltuani erään W3C organisaation HTML-työryhmän (working group) jäsenen kanssa asiasta. Hänen mukaansa kehykset eivät ole riittävän hyvin määriteltyjä, että ne kelpaisivat tiukkaan dokumenttimäärittelyyn. Poistin välillä joitakin linkkejä, jotta sain tämän dokumentin hyväksytyksi. Totesin kuitenkin, etten voi tehdä mielekkäällä tavalla tehdä tämän kriteerin täyttäviä dokumentteja. Tarvitsen aina target-attribuutteja linkittäessäni muiden tekemiin asiakirjoihin (käytän näillä sivuilla target="new" ja yleinen tapa avata rinnakkaisikkuna on target="_blank"). En katso ollenkaan hyväksi ratkaisuksi sitä, että kehyksien käyttöä pidettäisiin virheellisenä. Juuri target-määritteet tuovat mahdollisuuden monipuoliseen ikkunoiden käyttöön.

Sivun jaksot: