Yleistä

HTML-sivujen tekeminen on helppoa. On olemassa paljon ohjelmia, joilla sivuja voi tehdä ymmärtämättä oikeastaan juuri mitään HTML-asiakirjojen koodin rakenteesta, sillä ne näyttävät sivut suoraan lähes sellaisina kuin ne näkyvät eri selaimissa (aivan tarkka tuo yhtäläisyys ei yleensä ole). Tällaisia sovelluksia nimitetään WYSIWYG-ohjelmiksi (What You See Is What You Get = mitä näet sen saat).

HTML perustuu SGML-kieleen (Standard Generalized Markup Language = standardi yleismerkintäkieli. SGML on yleinen dokumenttien rakenteen esittämiskieli, joka sisältää välineet eri dokumenttityyppien kuvaamiseksi (käsittelen dokumenttityyppiä koskevia näkökulmia tarkemmin edempänä). SGML ei ole siis merkintäkieli vaan metakieli eli tapa kuvata merkintäkieliä, jotka ovat sekä ihmisen että koneen luettavissa.

SGML-dokumentaatiossa kirjoitetaan elementtimerkkauksista seuraavasti (lisäsin tekstiin hieman korosteita; voit katsoa myös sanan tag selityksen):

Markup that describes the structure and other attributes of a document in a non-system specific manner, independently of any processing that may be performed to it. In particular, SGML descriptive markup uses tags to express the element structure.

Elementtimerkkaukset ovat dokumentin elementtirakennetta kuvaavia ja siten kielen tärkeimpiä merkintäkoodeja (markup codes; HTML ja XML-kielissä on eräitä muitakin merkintäkoodeja, joita käsittelee Alaviite 2). Jos sana tag haluttaisiin "kääntää" sen selityksen perusteella, voisimme nimittää sitä kuvausmerkinnäksi.

Elementin nimeä kutsutaan sen yleistunnisteeksi (generic identifier) ja se tarkoittaa eri asiaa kuin tag, mikä käy ilmi seuraavista SGML- ja modularisaatio­dokumentaatioiden sitaateista:

SGML:

Generic identifier (GI) = A name that identifies the element type of an element

Modularization of XHTML (Terms and Definitions):

Tag

Descriptive markup delimiting the start and end (including its generic identifier and any attributes) of an element.

W3C: CSS2: 4 CSS2 syntax and basic data types, 4.1.3.
Modularization of XHTML.

Tosiasiassa elementin nimi yhdessä rajoittimien kanssa toimii tunnistimena (mitä tarkoitetaan rajoittimilla, tulee esille elementin käsitekaaviossa, jossa esimerkkinä on elementti HTML). On silti terminologinen asiavirhe sanoa, että elementtimerkkaus kokonaisuudessaan on tunniste, sillä elementin alkumerkkaus saattaa sisältää useita tunnisteita (käsittelen tätä asiaa tarkemmin myöhemmin; voit tutkia asiaa myös käännösvastineen perusteluista).

SGML:ssä elementtimerkkaukset eivät itsessään sisällä mitään toimintaohjetta, mutta HTML:ssä niillä on määritellyt tehtävät. Perustehtävä on kuitenkin sama kuin SGML:ssä eli kuvata dokumentin rakennetta. Nimi HTML johtuu osaltaan siitä, että aloitus- ja päätösmerkkaukset merkitsevät alueita. Siksi puhumme merkintäkielestä (markup language).

Elementtimerkkaus eli alkukielessä tag on ikään kuin "leima", joka "isketään" elementin alkuun ja mahdollisesti myös loppuun, jotta elementti varmasti erottuisi muusta koodista. Sitä voisi verrata puiden leimaamiseen. tai voit ajatella sen "lapuksi", joka laitetaan valitun sisällön alkuun ja loppuun. Toivon, että sitä havainnollistaa käyttämäni eläinvertaus. Tälle eläimelle laitetaan eräitä merkintöjä. Mutta ei toki kuvassa olevia! Asiakirjamme nimi voisi olla vaikka Lehma.html.

Toinen keskeinen merkitys on se, että elementtien avulla luodaan linkkejä. HTML suunniteltiin alun alkaen hyvin yksinkertaiseksi kieleksi luoda dokumentteja, jotka sisältävät hyperlinkkejä (hyperlinkit ovat dokumentin sisäisiä tai dokumenttien välisiä linkkejä). Tämän vuoksi puhumme HTML:n yhteydessä hypertekstistä ja HTML-kielestä (Hyper Text Markup Language = hypertekstin merkintäkieli - alunperin HTML sisälsi vain tekstilinkkejä). Itse asiassa alun alkaen muut kuin linkitykseen tarvittavat elementit olivat lähinnä vain viestinnän selkeyttämisen apukoodeja, jotta asiasisältö olisi luettavampaa ja se voisi olla selkeästi jäsenneltyä ().

Elementit, jotka voivat saada sekä alku- että päätösmerkkaukset, voivat toimia sisällön ja toisten elementtien säilyttiminä eli "konttielementteinä" (element containers). Tällaiset elementit voivat olla emoelementtejä (parent elements) lapsielementeille (child-elements) eli elementeille, jotka ovat jonkun emoelementin alku- ja päätösmerkkauksen välissä ilman että elementtien välissä on muita elementtitasoja (käsittelen tätä näkökulmaa tarkemmin myöhemmin). Emoelementeillä voi olla sisältömalleja (content models; vastaavasti elementillä, joka on jonkun toisen elementin lapsielementti, voi olla emomalleja, parent models).

Jotkut elementit eivät voi saada päätösmerkkauksia, sillä ne eivät rajaa mitään sisältöaluetta. Tällöin niitä nimitetään "tyhjiksi elementeiksi" (empty elements). Esimerkki elementtien käytöstä (esimerkissä on elementit P= paragraph eli kappale ja BR = pakotettu rivikatko), joka näkyy seuraavanlaisena ns. lähdekoodia (source code) katsomalla ():

<P>Tämä teksti on aloitus-<BR> ja päätösmerkkausten välissä,<BR> mutta välissä on eräitä BR-elementtejä,<BR> jotka aiheuttavat ylimääräisiä rivikatkoja.</P>

Rivinsisäiselementtejä on kahdentyyppisiä. Ensinnäkin erilaiset tekstiin liittyvät rivinsisäiselementit, esim. B ja I, joita voidaan pitää esitysasullisina elementteinä (inline presentational). Useimmilla tämän ryhmän elementeillä on tietty semanttinen (semantic = merkitysopillinen) sisältö. Em. elementit voidaan ilmaista myös semanttista puolta kuvaavilla elementeillä EM (emphasized = painotteinen) ja STRONG. Näitä elementtejä voisi kutsua rivinsisäisiksi fraasielementeiksi (inline phrasal). Tällaiset rivinsisäiselementit voivat olla rajoituksetta keskenään sisäkkäisiä (nested).

Ne eivät luo ympärilleen lohkoelementtien tavoin suorakaiteen muotoisia laatikoita vaan elementit liikkuvat rivin mukana. Ne käyttäytyvät kuin rivillä oleva fraasi. Tekstiin vaikuttavia rivinsisäiselementtejä käytetään ensisijaisesti korostamaan jotain asiasisällön kohtaa.

Opiskeluaikana monet pistivät kirjoihinsa keltaisella paksulla tussilla merkkauksia. Käytän samaan tapaan elementtiä CODE, jonka avulla merkitsen sinisellä vain lähdekoodissa näkyvät merkintäkoodit - huomaa, että tässä lauseessa olevat korosteiset sanat ovat rivinsisäiselementtejä (CODE ja STRONG).

Myös linkitykseen käytetty erityiselementti A (sanasta Anchor = ankkuri) kuuluu rivinsisäiselementteihin. Se käyttäytyy tekstiin vaikuttavien elementtien tavoin, mutta sen rajoituksena on se, että linkitykseen käytetyt elementit eivät saa olla sisäkkäisiä.

Yksittäisillä attribuuteilla on arvoja (values). HTML 3.2 dokumentissa elementille P voi olla esim. attribuutti align="center", joka tarkoittaa keskitä kappale ():

<P align="center">Tässä on tavallinen kappale, joka on keskitetty kuten tämä esimerkkikappale käyttäen attribuuttia align="center".</P>

Selvyyden vuoksi pyrin siihen, että tekstissä ja esimerkeissä elementit on merkitty isolla kirjaimella (esim. BLOCKQUOTE) ja kaikki attribuutit ja niiden määrittelyt pienellä kirjaimella (esim. style=" ... ").

On kuitenkin kaksi poikkeusta. Dokumenttityypin kuvausilmoitus on isolla kirjaimilla, koska se on yleinen tapa. Se ei kuulu dokumentin varsinaiseen rakenteeseen. Mikäli ilmoitus sisältää tiedostonimen, se antaa selaimelle mahdollisuuden ladata DTD-tiedosto tietokoneen muistiin. Erilaisille validaattori ohjelmille tieto on välttämätön. Alkuerottimessa on huutomerkki (<!DOCTYPE ... >).

W3C on luonut HTML -dokumenteille ns. DTD-tiedostot (Document Type Definition = dokumenttityyppimäärittely), jotka sisältävät tiedot elementeistä ja käytetyistä attribuuteista sekä tiedon siitä, millaisia rakenteita dokumentissa sallitaan.

Dokumenttityypin kuvausilmoitus on kuin lehmän korvamerkkaus (eartag). Lehmä ei tarvitse korvamerkintää, mutta sen isäntä (ja viranomaiset) tarvitsee. Selain osaa ne ilman ilmoitustakin, mutta periaatteessa juuri dokumenttityyppi ilmoittaa sen kielen, jolla dokumentti on kirjoitettu (kuten aiemmin on tullut esille, määrittelykielenähän HTML-dokumenteissa on SGML).

XML-dokumentit sen sijaan saattavat tarvita dokumenttityyppi-ilmoitusta, sillä sivujen tekijä voi luoda oman dokumenttityyppikuvauksen. XML-dokumenteissa korvamerkintää vastaakin <?xml version="1.0"?>. Käytän viitatessani XML-elementteihin pieniä kirjaimia.

Kommenteissa käytetään seuraavan kaltaisia merkitsemistapoja, joita olen itsekin käyttänyt esimerkeissäni (katso kommentin käsitekaavio):

/* tämä on CSS-kommentti, joka CSS-määrittelyjä ymmärtävillä selaimilla selvyyden vuoksi pitäisi näkyä vihreänä */
<!-- merkitsen myös mahdolliset HTML-kommenttien aloitus- ja päätösmerkit vihreällä -->

Rakenne-elementtien lisäksi jotkut elementit olivat semanttisia (esim. STRONG), mutta esitysasua kuvaavia elementtejä ei Dan Connollyn ensimmäisessä DTD:ssä ollut. Sen sijaan W3C:n hakemistossa, joka käsittelee ensimmäisiä HTML-dokumentteja on käytetty elementtejä B ja I (niidenkin käytön voi ymmärtää osittain semanttisesti). Ensimmäiset dokumentit eivät sisältäneet lainkaan kuvia eikä fonttimäärittelyjä, sillä dokumenttien tuli olla käyttöympäristöstä riippumattomia, kuten seuraavasta sitaatista käy ilmi:

It is required that HTML be a common language between all platforms. This implies no device-specific markup, tai anything which requires control over fonts tai colors, for example. This is in keeping with the SGML ideal.

Tutustu varhaisien HTML-versioiden historiaan sivun Help for HTML All johdanto-osa Document typesavulla.

W3C: HTML Home page; esimerkkihakemisto.
Muita sivustoja: Dan Connollyn ensimmäinen DTD, Dmitry Kirsanov.

HTML 2.0 toi jo mahdollisuuden käyttää kuvia, mutta elementtien ja attribuuttien määrä pysyi sangen pienenä. Vähitellen niihin haluttiin yhä lisää tekstinkäsittelyohjelmien (kuten Word, WordPerfect) tapaisia muotoiluja ja lisäelementtejä, jolloin elementtien ja attribuuttien määrää kasvatettiin, mikä näkyy HTML 3.2:ssa.

HTML 3.2:ssa kaikki attribuutit liitettiin aikaisempien versioiden tapaan elementtien sisään ja siten myös osaksi asiakirjan runkoa (BODY). Sisältö, rakenne ja esittäminen ovat yleensä samassa dokumentissa lukuun ottamatta linkitettyjä kuvia ja ns. upotettuja (embed) elementtejä (kuten esim. ns. Java-kielellä tehtyjä pienoissovelluksia (applets), joita en käsittele näillä sivulla lainkaan). Tällaisen HTML asiakirjan luominen on erittäin helppoa. Ongelmana on muotoilun staattisuus - kerran tehtyjä muotoiluja voi olla hidasta muuttaa jälkikäteen varsinkin, jos esitysasua kuvaavia elementtejä ja attribuutteja on paljon!

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).

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.

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

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ö.

Erityisesti Microsoftin tarkoituksena on ollut luoda laajoja maailmanlaajuisia tietokantoja, joissa on mahdollista käyttää etsintäkriteereinä elementtejä ja elementtiryhmiä. Myös erilaiset tieteenalat, kuten matematikka ja kemia voisivat käyttää omia elementtejä. Koska mahdollisille elementeille ei ole mitään rajoituksia ei ole, XML kertoo jo nimenä tämän asian XML is extensible (eXtensible M arkup Language = 'laajennettavissa oleva merkkauskieli').

HTML-dokumenteissa elementeillä on esimääritellyt esitystavat. XML-elementeillä ei ole mitään oletusesitystapaa. Määrittelemätön XML-elementti ei tee yhtään mitään! Eräs tapa antaa XML-elementeille esitystapa on CSS. Jos XML-dokumentit käyttävät samoja elementtejä kuin HTML-elementit, samaa CSS-tiedostoa voidaan käyttää niin HTML- kuin XML-dokumenteillekin (tein lisäsivu:n tästä asiasta).

Toinen keino on XSL (eXtensible Stylesheet Language), jossa on enemmän mahdollisuuksia vaikuttaa XML-dokumenttien rakenteeseen. Microsoft suosii sitä. Se antaa enemmän mahdollisuuksia asettaa elementit toiseen järjestykseen kuin CSS. On kuitenkin huomattava, XSL:n suosiminen johtuu osittain siitä, että Microsoft Internet Explorer:n CSS-tuki ei ole valmis. Puuttuvat piirteet olisivat XML-dokumenttien suhteen tärkeitä. CSS:llä ei voi saada MS IE -selaimille kunnon esitysasua.

Jos toteutus olisi parempi tilanne voisi olla toinen. Lyhyesti sanottuna MS IE ei CSS-tuen osalta täytä XML-vaatimuksia. Esim. Netscape 6.x+ ja Opera 4.x+ -selaimille on XML-dokumenteille luotavissa kunnollinen esitysasu. Käsittelen MS IE 5.5+n ongelmia eräällä lisäsivu:lla).

XML-dokumenttien yhteensopivuus (compatibility) HTML 3.2 -tasoon kykenevien selainten kanssa riippuu XML-sivujen tekijästä. Pahimmassa tapauksessa XML-dokumentit ovat vanhoille selaimille toisiinsa liittynyttä tiivistä tekstiä ja erityiskoodeja (lue alaviite 1, jos tahdot tietää mitä tarkoitan erityiskoodeilla) - käytännössä mahdotonta tai erittäin vaikea lukea. Itse asiassa sivujen tekijä voi luoda oman HTML:ää muistuttavat kielen - XML on ihanne kieli "tee se itse" -ihmisille! XML-dokumentit voidaan kuitenkin laatia sangen luettaviksi myös vanhoille selaimille, jollin kaikki tai useimmat elementit ovat samoja kuin HTML-dokumenteissa (elementtien ei kuitenkaan tarvitse käyttäytyä samalla lailla kuin XML:ää osaavilla selaimilla).

XHTML

Mitä XHTML (eXtensible Hyper Text M arkup Language) dokumentteihin tulee kyse on erityisistä XML-dokumenteista, jotka käyttävät pääosin täysin samoja elementtejä kuin HTML-dokumentit. Ne voidaan ilmoittaa joko HTML tai XML dokumentteina. XHTML-dokumentit pitää aina tehdä XML-sääntöjen mukaan, jotka ovat paljon tiukemmat kuin HTML-dokumenteilta edellytettävät vaatimukset. Ensinnäkin kaikki dokumentit täytyy olla hyvin muotoiltua (well-formed) - enää ei ole sallittua tehdä niin paljon virheitä kuin aiemmin! HTML-dokumenttien ja XHTML-dokumenttien välillä on esim. seuraavia eroja:

Alla on esimerkki hyvin yksinkertaisesta XHTML-dokumentista ():

<!DOCTYPE HTML PUBLIC "-//w3c//dtd xhtml 1.0 transitional//en"
http://www.w3.org/TR/xhtml1/"/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1/">
   <head> 
      <meta name="keywords"
      content="Opera,Mozilla,Netscape,Internet Explorer,CSS" />
      <title>Esimerkki XHTML-dokumentista</title>
   </head>

   <body>
      <h1>Pääotsikko</h1>
      <br />
      <p>Tekstiä.</p>
      <p>Tekstiä.</p>
      <blockquote>Tekstiä lohkositaatin sisällä.</blockquote>
      <ol>
         <li>Tekstiä listan sisällä.</li>
         <li>Tekstiä listan sisällä.</li>
      </ol>
</body>
</html>

CSS-oppaan sivut ovat nykyisin XHTML 1.0 dokumentteja mallisivuja lukuun ottamatta. HTML-tiedostoja on helppo kääntää XHTML:ksi käyttämällä ilmaisen HTML-Kit-editorin HTML Tidy-toimintoa. Jos haluat käyttää samaa CSS-tiedostoa HTML, XHTML ja XML-dokumenteille, on järkevää kirjoittaa elementtien nimet aina pienillä kirjaimilla. Olen pyrkinyt tekemään esimerkkini siten, että niitä voi käyttää myös XHTML-dokumenteissa. Skriptien käyttö on kuitenkin ongelmallista, mutta olen käyttänyt niitä HTML-dokumenttien tapaan.

W3C: XHTML 1.0 (4.8 Script and Style elements and C.4 Embedded Style Sheets and Scripts), Namespaces in XML.
Other sites: HTML-Kit Home Page.

Seuraava sivu käsittele perus menetelmiä, joilla CSS liitetään Web-sivuille.

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):

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 ():

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


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 ()):

<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.

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:

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).

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.

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ä.

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 ()):

<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 ():

<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.

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.

Mittayksiköt ja korvaavat avainsanat

CSS-ominaisuuksien koko- ja sijaintiarvot määritellään joko käyttämällä mittayksiköitä (units) tai tiettyjä avainsanoja (keywords), jotka korvaavat numeeriset mittayksiköt. Avainsanat vaihtelevat ominaisuuskohtaisesti ja käsittelen tässä yhteydessä vain yleisiä mittayksiköitä ja fonteille tarkoitettuja avainsanoja.

Pikseliarvot ovat hyödyllisiä, jos fonttikoko täytyy pitää jostakin syystä vakiona. Näin on asian laita esim. tietyn levyisiin taulukoihin tai kehyksiin suunnitelluissa linkeissä.

Absoluuttiset mittayksiköt toimivat parhaiten ensisijaisesti tulostettaviksi tarkoitetuilla www-sivuilla, joille on tehty oma tyylisivu mediasäännön avulla. Se voi olla hyvinkin erilainen kuin ruudulla näkyvä versio. Erityisesti mittayksikkö pt on tarkoitettu printattaville dokumenteille. Ainakin mittayksiköt in, cm ja mm takaavat yhtäläisen tulostuksen kaikissa tulostustyylisivuja tukevissa selaimissa.

Värit

Väreille on olemassa useitakin vaihtoehtoisia esitystapoja. Suositan selvyyden vuoksi käyttämään vain kahta yleisintä, sillä nämä ovat samoja kuin mitä käytetään HTML-attribuuteissa (esim. <BODY bgcolor="white" text="#3f3f3f" link="#3f3f3f"> - CSS-ominaisuuksia ymmärtävät selaimet käyttävät näitä siinä tapauksessa, että vastaavia CSS-ominaisuuksia ei ole määritelty):

1. Avainsanoina määritellyt nimetyt värit (esim. strong {color:red;}). Muista kuitenkin, että myös 16 yleisesti käytettyä värien nimeä (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white ja yellow) ovat käyttöympäristöriippuvaisia.
2. Ns. heksadesimaaliarvot (= numerot 0-9 + kirjaimet a-f), joiden eteen laitetaan merkki # (esim. p.special {color:#070e0e;} ()). Kuusidigitaaliset arvot vastaavat 24 bittisiä (noin 16,7 miljoonaa väriä) RGB-arvoja (red-green-blue). Heksadesimaaliarvot voidaan esittää myös kolmidigitaalisina arvoina (esim. {color:#00e;}, joka merkitsee samaa kuin {color:#0000ee;} ), jolloin värejä on käytössä vähemmän.

Tosin jotkut voivat pitää RGB-arvojen antamisesta. Seuraavassa esimerkissä kaikki kuvaukset tarkoittavat samaa väriä ():

em {color: rgb(255,0,0) } /* RGB värit 0-255, voit käyttää aina kolmidigitaalisia numeroita, esim. 255,000,000 */
em {color: rgb(100%,0%,0%) } /* RGB värit 0-255 lähinnä sopivina prosenttiarvoina - huomaa, että tämä on epätarkempi tapa kuin edellinen */
em { color: red; } /* edellä mainittuja arvoja vastaava keyword-tyyppinen määrittely */

W3C: CSS2: 4 CSS2 Syntax and basic data types, 4.3.6 Colors.

Muut mittayksiköt

Uudempi spesifikaatio tarjoaa lisäksi mahdollisuuden tehdä kuulovammaisia varten erityistyylisivuja (angles, times & frequencies). En ole itse perehtynyt syvällisemmin tähän osa-alueeseen, sillä katson että se kuuluu toistaiseksi toteutumattomiin tulevaisuuden visioihin. Niitä voitaneen käyttää ehkä myös tavallisten tyylisivuen kanssa, jolloin voidaan hyödyntää tietokoneiden äänikortteja.

W3C: CSS2: 4 CSS2 syntax and basic data types, 4.3 Values , 17 Tables, 7.7 Audio rendering of tables, 19 Aural style sheets.
Muita sivustoja: Keijo Kortelainen: Syntaksi.

Yleistä

CSS systeemin perustoimintaperiaate on siinä, että elementeille sovitetaan CSS-ominaisuuksia tiettyjen periaatteiden mukaan. Selaimen tulee tunnistaa elementit. Lukuun ottamatta suorien tyyliattribuuttien käyttöä selain luo elementtitunnisteista ikään kuin tunnistettavan hahmon. Perustoimintaperiaatetta nimitetäänkin hahmontunnistukseksi (pattern matching). CSS:ssä ja dokumentissa, jossa sitä käytetään tulee olla toisiaan vastaavia pareja.

Jos esitysasu määritellään erillisillä CSS-tiedostoilla, tiedostot toimivat eräänlaisina esitysasua koskevina tietokantoina (ne vastaavat käsinkirjoitettuja tietokantoja). Ulkopuolisten CSS-tiedostojen käyttämistä voi verrata siihen, että sivun asiasisältö haetaan tietokannasta. CSS mahdollistaa siten esitysasun dynaamisen päivittämisen. Upotetussa CSS:ssä "tietokanta" kulkee asiakirjan mukana, joten se ei toteuta dynaamista päivitystä muuten kuin siten, että upotettu CSS haetaan palvelinpuolen skriptillä jostakin erillistiedostosta.

Jotta "CSS-tietokannassa" ja dokumentissa olevat parit löydettäisiin, selain tarvitsee ns. valitsimia (selectors). Ne nimensä mukaisesti valitsevat elementin tai elementit, joille CSS-ominaisuudet liitetään. Tällä sivulla käsittelen yleisimmät valitsimet ja niihin liittyvät tärkeimmät hahmonsovitussäännöt (matching rules). Alkuperäistermejä ovat mm. universal selector, (element) type selector, class selector, id selector, pseudo-class selectors ja pseudo-element selectors.

W3C: CSS2: 5 Selectors; 5.1 Pattern matching.
Muita sivustoja: Keijo Kortelainen: Valitsimet.

Esimerkkien ensimmäinen määrittelytapa on kaikkein yleisin, mitä voi ajatella. Seuraavassa esimerkissä on myös muutamia muita HTML-asiakirjoille tarkoitettuja yleisvalitsimen käyttötapoja ():

*{color:red;} /* ensimmäinen merkki on ns. jokerimerkki, joka on tässä yhteydessä välttämätön - jokerimerkki on yleinen tapa eri tietokonesovelluksissa */
*.muu {color:blue;} /* tässä tapauksessa jokerimerkin voi jättää pois, sillä määrittelyssä on mukana piste ja pisteen jälkeen on tällä kertaa ns. luokkavalitsin, joka selitetään edempänä */
.muu {color:blue;} /* merkitys sama kuin edellä */

Kuten edeltävistä esimerkeistä voi havaita valitsimet liittyvät ns. kuvauslohkoihin (sanan määrittely). Kun kuvauslohkoon liitetään jokin valitsin, saadaan sääntö (rule), esim:

*
{font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
text-align:justify;}

Seuraava käsitekaavio selvittää vielä termien välisiä suhteita (* tarkoittaa sekä yleisvalitsinta että mitä tahansa mahdollista valitsinta; kuvauslohko voi sisältää useita kuvauksia):

Englanninkielisessä tekstissä sääntöjä nimitetään myös sanoilla rule sets ja statements (=käsky, lause; ks. sanan määrittely). Tarkasti ottaen kyse on käskylohkokoista, jolloin englanninkielisissäkin teksteissä pitäisi kirjoittaa statement-blocks or block-statements). Valitsimiin liittyvät yksinkertaiset säännöt or sääntöjoukot kertovat 1)  kohdistettavan or kohdistettavien elementtien tunnisteet sekä 2) ominaisuudet, jotka niille annetaan eli ominaisuuksien kuvauslohkon ja siinä olevat kuvaukset. Näiden perusteella selain esittää dokumentin halutulla tavalla.

Elementtityyppivalitsin

Yleisin mahdollinen määrittely on useimmiten liian kattava ja käytännössä yleisvalitsimellakin on aina jokin tarkennin. Elementtityyppitunnisteilla on seuraavaksi ylempi painoarvo. Oikeastaan hahmontunnistusperiaatekin alkaa vasta elementtityyppivalitsimista, sillä selain joutuu etsimään yksittäisiä kohteita. Siksi perusvalitsimena voidaan pitää yksinkertaista ns. elementtityyppivalitsinta (element type selector or vain type selector).

Elementtityyppivalitsimissa tunnisteena toimii tietyn elementin nimi. Esim. seuraavassa on elementtiä H2 koskeva sääntö ():

h2 {color:#660033; background-color:#ff3; border:#660033 1px solid; font-size:17px}

CSS-säännöissä ja dokumentissa olevien elementtimerkkausten sisällä olevat elementtien nimet muodostavat toisiaan vastaavan parin.

Muista, että XML-asiakirjoissa on merkitystä sillä, käytetäänkö pieniä vai isoja kirjaimia. CSS-säännöissä ja XML-dokumentissa olevilla elementtityyppitunnisteilla täytyy olla sama kirjainkoko.

Luokka- ja id-valitsimilla (kuten edempänä käsiteltävillä attribuuttivalitsimilla) on suurempi painoarvo kuin elementtityyppivalitsimilla. HTML-spesifikaatioiden mukaan id-attribuutin nimen tulisi olla dokumenttikohtaisesti uniikki. Id-valitsinta voitaisiin kutsuu oikeastaan uniikkivalitsimeksi, sillä valintakriteeri perustuu (periaatteessa) yksilöivään eli uniikkiin tunnisteeseen (unique identifier). Attribuuttia id kutsutaan englanninkielisissä teksteissä myös sanoilla fragment identifier (= katkelmatunniste, fragmenttitunniste), joten id-valitsinta on mahdollista kutsua myös fragmenttivalitsimeksi.

On kuitenkin huomattava, että CSS:ää tukevat selaimet hyväksyvät CSS:n suhteen saman id-attribuutin arvon useaankin otteeseen annettuna. Saman arvon omaavaa id-valitsimia (HTML-spesifikaatioiden vastaisesti) voisi käytännössä antaa useaan otteeseen samassa asiakirjassa luokkavalitsinten lisätarkentimina. Tällöin luokkavalitsimet määrittäisivät yleisiä ominaisuuksia ja id-valitsinten avulla annettaisiin poikkeuksellisia ominaisuuksia. Ongelmaksi muodostuu kuitenkin dokumentin oikeellisuuden tarkistus, sillä tarkistuspalvelut huomauttavat dokumentin olevan virheellinen. Sama lopputulos saadaan aikaiseksi standardilla tavalla käyttämällä samalle elementille useita luokkia (annan esimerkin edempänä).

On myös mahdollista antaa samalle elementille useita luokkia jättämällä välilyönti (esim. class="a b c"), esim.:

.a {color:black; border:1px solid black; blackgroud-color:white}
.special {color:red}
...
<div class="a special">

En pidä sitä kuitenkaan kovin suositeltavana tapana. Ominaisuudet voivat olla toisensa kumoavia. Selaimelle tulee lisätöitä selvitellessä prioriteettisuhteita ja CSS:n laatija itse voi mennä sekaisin. Mikäli niitä käytetään, on oltava erityisen huolellinen.

Jos luokkavalitsimet ilmaistaan attribuuttivalitsimina, niillä on sama prioriteetti. Mikäli kuvauslohkojen ominaisuudet ovat erilaisia, viimeksi annettu jää voimaan kuten seuraavissa esimerkeissä:

.testi {color:red}
*[class="testi"] {color:blue} /* tällä säännöllä on sama prioriteetti kuin edellisellä säännöllä, mutta sen on annettu edellisen jälkeen, jolloin se kumoaa edellisen; jotkut MS IE -selaimet lukevat tämän ikään kuin yleisvalitsimena */
p.testi{color:olive} /* tämä sääntö kumoaa edellisen, sillä mukana on elementtityypin tuoma tarkennus */
p[class="testi"]{color:green} /* tällä säännöllä on sama prioriteetti kuin edellisellä säännöllä, mutta sen on annettu edellisen jälkeen, jolloin se kumoaa edellisen*/

Voit katsoa virhesivulta lisää malleja, miten selaimen tulisi toimia.

Pseudo-class on apukäsite, joka CSS:ssä mahdollistaa elementtien luokittelun samaan tapaan kuin luokkien avulla, mutta joissakin tapauksissa HTML-dokumentin ulkopuolisiin seikkoihin perustuen (esim. sen mukaan, onko linkkiä seurattu vai ei).

Pseudo-element on apukäsite, jolla CSS:ssä liitetään valitsimia elementin esitysasullisiin aliosiin (kuten elementin esitysasun ensimmäiseen riviin or kirjaimeen) samaan tapaan kuin elementtityyppivalitsimia liitetään elementteihin.

Samoin eräänlaisia pseudoluokkia ovat CSS2 sivukatkosääntöihin liittyvät :left ja :right (sivusäännöt eivät toimi vielä kovin monessa selaimessa, mutta tulevaisuudessa niistä on hyötyä).

W3C: CSS2: 13 Paged media, 17 Tables.
Muita sivustoja: John Allsop: Kinds of Selector.

Yleistä

CSS-tiedostojen rakentelun kannalta olennaisinta on ymmärtää, missä järjestyksessä selain lukee CSS-ominaisuudet.

Emo- ja lapsielementtien välistä suhdetta havainnollistaa yksinkertaistettu dokumenttipuu:

Suurin osa säännöistä on nimetty sukumetaforaa käyttäen eikä metaforan rikkautta voi täysin ilmaista suomenkielisissä vastineissa. Alkukielen kuvakieli on kuitenkin syytä pitää mielessä. Elementeistä puheen ollen on muistettava, että nämä nimet liittyvät elementtitasoihin ja elementtien keskinäisiin suhteisiin toisiinsa nähden ns. dokumenttipuussa (systeemi toimii osittain myös attribuuttivalitsimilla). Käsittelen tässä yhteydessä myös :first-child näennäisluokkavalitsimen (sitä voisi kutsua "näennäisesikoisluokkavalitsimeksi"). Se on osa koko systeemiä ja se voidaan ymmärtää vain suhteessa muihin käsitteisiin. Yritän selittää kaiken niin ruohonjuuritasoisesti kuin voin. Elementtien keskinäisiä suhteita koskevat CSS-metaforan osat ovat seuraavat:

• Ancestor = esi-isä, esivanhempi eli "esi-isäelementti" (tai "esiemoelementti"). Osittain sama kuin parent, mutta toistensa sisään sijoittuvia tasoja voi olla useita, kuten perheessä isoisällä on lastenlapsia ja lastenlapsilla voi edelleen olla lapsia jne.
• Descendant = perillinen eli perilliselementtitaso. Osittain sama kuin child, mutta elementtien välissä voi olla useita elementtitasoja. "Lapsenlapset" ovat aina perilliselementtejä.
• Adjacent sibling = viereissisarelementti eli "viereissisarelementtitaso". Sisarelementeillä on sama emo. Sisarelementit eivät ole koskaan keskenään sisäkkäin vaan ovat samalla tasolla ikään kuin siskokset. Adjacent sibling on ilmoitetun sisarustason jälkeen seuraava saman tason elementti. CSS2 liittää "sisarussuhteisiin" vieläkin tarkempia ilmaisuja.

• • Preceding sibling. Perheessä on aina yksi esikoinen ja hänen jälkeensä tulevat muut siskokset. Adjacent sibling määrittää vain elementtitason. Jotta esikoinen voitaisiin tarkasti nimetä, tarvitaan :first-child näennäisluokkaa. Preceding sibling on sisarusparven esikoinen, ennen muita sisaria.
  • Following sibling. Joku muu saman "elementtiperheen" sisarus.
  • Preceding element. Elementti, joka on heti jäljessä tulevaan sisarelementtiin nähden samalla tasolla sitä ennen tai edellisellä elementtitasolla.
  • Following element. Kyseessä on edelliseen nähden päinvastaisesta suhteesta. Näiden eroa aiemmin mainittuihin yleisempiin ilmaisuihin selventänee (?) seuraava yritys suomentaa CSS2 spesifikaation selityksiä (mukana on alkuperäistermit, sillä ilman niiden ymmärtämistä ei selviä):

• • • Ancestor (element). Elementtiä A kutsutaan elementin B esi-isäelementiksi (ancestor), jos ja vain jos B tulee elementin A jälkeen eli on sen jälkeläiselementti (descendant).
    • Descendant (element). Elementtiä A kutsutaan elementin B jälkeläiselementiksi (descendant), jos elementti A on joko
      (1) elementin B lapsi or
      (2) jonkun muun elementin (C) lapsi ja on samanaikaisesti elementin B jälkeläiselementti (descendant) elementti
    • Preceding element. Elementtiä A kutsutaan elementin B edeltäväksi (preceding) elementiksi, jos ja vain jos
      (1) A on elementin B esi-isäelementti or
      (2) A on elementin B edeltävä sisarelementti (preceding sibling).
    • Following element. Elementtiä A kutsutaan elementin B jäljessä tulevaksi elementiksi (following) jos ja vain jos B on elementin A edeltävä (preceding) elementti.

W3C: CSS2: 3 Conformance: Requirements and Recommendations.

Periytyminen

Perheessä lapsi perii vanhempansa ja jälkeläinen saa perinnön esi-isiltään tiettyjen lakien ja asetusten mukaisesti. CSS-ominaisuuksien ymmärtämisessä on olennainen kysymys "perimysjärjestyksestä" (inheritance). Periytymisessä on kyse selaimen automaattisesta toimintamekanismista, jolla ominaisuudet sovitetaan eri elementeille. Periaate koskee toisten sisällä olevia eli sisäkkäisiä elementtejä, jotka ovat dokumenttipuun (document tree) osia.

HTML-dokumenteissa määriteltävä peruselementti on yleensä BODY. BODY-elementin ominaisuuksien periytyminen toimii hyvin erityisesti tietyillä lohkoelementeillä ja niiden pakollisilla lapsilla. Lohkoelementeille automaattisesti periytyviä ominaisuuksia ovat lähinnä useimmat fontti- ja tekstityyppimääreet.

Käytettävään tekstityyppiin vaikuttavilla elementeillä, kuten H1-H6, B ja I säilyy vaihtelevassa määrin niiden ominaispiirteet. H1-H6 säilyttävät suhteelliset kokosuhteensa perustekstiin nähden, mutta tekstityyli periytyy BODY-elementiltä. Toisilla elementeillä perustyyli ei periydy BODY-elementiltä vaan sen muuttaminen edellyttää uudelleen määrittelyä. Syy siihen, miksi tietyt fontteihin liittyvät ominaisuudet eivät periydy kaikille mahdollisille elementeille on yksinkertaisesti siinä, että niille on määritelty selaimen omissa määrittelyissä tietyt perusominaisuudet. Esimäärittelyjen määrä vaihtelee selainkohtaisesti. Siksi jotkut selaimet tarvitsevat enemmän CSS:ää kuin jotkin toiset. Periytymissysteemissä on lisäksi joitakin puutteita, mutta käsittelen niitä muissa yhteyksissä.

Näissäkin toimintamekanismi perustuu pääosin dokumenttipuuhun ja suhteiden kuvaamiseen käytetään aiemmin selittämääni sukumetaforaa. Mutta toisin kuin automaattisessa ominaisuuksien periytymisessä, ominaisuuksia ei soviteta automaattisen mallin mukaan vaan ikään kuin avain ja lukko -periaatteella. Kontekstin mukaiset valitsimet ottavat nimensä mukaisesti huomioon ympäristön, jossa tyyli on määritelty. Määritelty tyyli on voimassa vain, mikäli elementti on oikeassa paikassa or sillä on tietty elementti vanhempana.

Itse asiassa yksinkertainen yleis- tai elementtityyppivalitsin on tunnistettava hahmo. Monimutkaisissa tunnistettavissa hahmoissa käytetään kohdistetumpia valitsimia. Erottaaksemme ne yksinkertaisista luokka- ja elementtityyppivalitsimista, tarkoitan tunnistettavalla hahmolla sellaista sääntöjä, jossa on vähintään kaksi ehtoa. Esimerkki yksinkertaisesta tunnistettavasta hahmosta ():

table p {color:green;} /* jälkimmäistä osaa tässä säännössä kutsutaan nimellä descendant selector; määrittelyssä on huomattava, että kaarisulun eteen ei saa laittaa rivikatkoa, sillä olen todennut, että se tekee määrittelyt joskus toimimattomiksi */

On kuitenkin on muistettava, että tunnistettavan hahmon pituus ei yksistään ratkaise. Minulle kävi listatestiä tehdessäni virhe, kun en huomannut kaikkia sääntöjä ja niiden keskinäisiä vuorovaikutussuhteita. Seuraava esimerkki hahmottaa niitä sinulle:

li ol+ul {list-style-type: disc; /* tämän säännön tulisi muuttaa listakuva punaiseksi testatessani sitä eräällä Netscape 6.x esiversiolla */
list-style-image: url(./Css/Kuvat/pallo-punainen.gif);
list-style-position: outside;}

ul li {list-style-type: disc; /* sääntö ei jää voimaan, koska lyhyempi hahmo UL LI kumoaa sen, sillä se jatkaa edellistä määrittelyä siitä, mihin se päättyi! */
list-style-image: url(./Css/Kuvat/pallo.gif);
list-style-position: outside;}

li ol+ul li {list-style-type: disc; /* jotta ensimmäinen sääntö saadaan voimaan ja lyhyempi kumottua, ensimmäistä patteria tulee pidentää yhdellä elementillä - nyt Netscape näyttää suunnitellun kuvan! */
list-style-image: url(./Css/Kuvat/pallo-punainen.gif);
list-style-position: outside;}



Kaikista tarkimmat tunnistettavat hahmot voisi luoda yhdistämällä elementtityyppi- ja attribuuttivalitsimia.

Porrastettu valintajärjestys on osa CSS-ominaisuuksien prosessointijärjestystä. Se on kytkeytynyt hahmonsovitukseen (pattern matching). Koko systeemin voi yksinkertaistaa seuraaviin kolmeen tekijään, jotka esitän vielä alkuperäistermien kanssa:

• Periytyminen (inheritance; CSS1 tasolla vain automaattisena ja sisältää myös CSS2 "pakkoperiytymisen")
• Tunnistettavat hahmot: kaikki mahdolliset valitsimet toisen valitsimen kanssa ovat tunnistettavia hahmoja (matching patterns)
• Porrastettu valintajärjestys (cascading order)

Koska nämä kolme ovat koko ajan yhtä aikaa toiminnassa, on mahdotonta yksiselitteisesti esittää yleismallia, joka kuvaisi sitä, mikä on yksityiskohtaisempi määrittely kuin joku toinen. Ennemminkin voidaan esittää esimerkkejä, mikä määrittely yksittäisessä tilanteessa ohittaa jonkun toisen määrittelyn. Sivujen tekijän täytyy miettiä, miten selain tekee ratkaisunsa. Hänen tulee myös tietää, mitä selain todella osaa toteuttaa ja mitä ei! Seuraava järjestys suuntaviivoja pyrittäessä yleisemmästä yksityiskohtaisempaan määrittelyyn. Järjestys voi olla yksittäisessä tilanteessa toinen.

1. Yleisvalitsin ilman mitään tarkenninta.
2. BODY-elementti ilman luokkaa.
3. Class-tarkennettu yleisvalitsin
4. Muu yksilöity tyyppivalitsin kuin BODY
5. Muu yksilöity tyyppivalitsin kuin BODY luokkatarkennettuna
6. Monimutkainen tunnistettava hahmo, jossa on mukana myös luokkatarkentimia.
7. Id-valitsin.

Sivuntekijöiden pyrkimyksenä on varmastikin luoda mahdollisimman tehokas ja vaivaton systeemi, jossa CSS-määrityksiä tarvitaan suhteellisen vähän dokumentin BODY-osassa. Annan seuraavat suositukset:

1. Yksi yleinen BODY-määrittely ja yleinen taulukkoelementtien kuvaus (siitä on tarkempi selitys sivulla Taukot).
2. Asiakirjakohtaisia muutoksia ajatellen erilaisia sääntöjä BODY-elementille, jolla on luokka- ja id-tarkennin.
3. Yksittäisille tekstielementeille omat säännöt.
4. Muut mahdolliset säännöt pyritään toteuttamaan BODY-elementistä lasketuilla tunnistettavilla hahmoilla.
5. Dokumenttikohtaisia sääntöjä käytetään harkiten

Tärkeyssääntö (!important)

Normaalin järjestyksen voi ohittaa ns. eli tärkeyssäännöllä (important rule), esim:

body {color: black !important; background-color: white !important;}

Mikäli selain ei tapaa toisia samanlaisia tärkeyssääntöjä, vastaavia jälkeenpäin annettuja ominaisuuksia ei oteta huomioon. Kyse ei ole kuitenkaan vain yksinkertaisesta järjestykseen liittyvästä säännöstä. Näin määritellyt ominaisuudet ohittavat myös elementille luokkiin ja tunnistimiin (id) perustuvilla tunnistettaville hahmoille annetut sekä elementtien sisälle yksilöllisesti annetut ominaisuudet.

Sen vuoksi, että tärkeyssääntö ohittaa kaikki elementille määritellyt muut säännöt, katson sen olevan eräänlainen erityissääntö (termi on kuitenkin hieman ongelmallinen - ks. Alaviite 1). Sivujen suunnittelija saattaa määrätä ohitettavaksi kuvauksen, jota hän ei haluasikaan ohittaa! Koska em. sääntö tuo melkoista päänvaivaa sivujen laatijalle ja selaimelle lisätöitä, suosittelen sen käyttämistä erittäin harkitusti.

Koska CSS:llä yleisimpänä käyttökohteena voidaan pitää käytettyyn tekstityyliin vaikuttamista, käsittelemme Seuraavaksi fontin ja tekstin määrittämistapoja sekä erilaisten käyttötilanteiden huomioimista.

Yleistä

Kuten sivulla Mikä on HTML ja XML asiakirjojen perusrakenne tuli esille, fontin määrittely on CSS:n kanssa yhteensopivuuden näkökulmasta ongelmallinen. Perusnäkökulma on se, että mitä enemmän halutaan helposti ja joustavasti toteutettavia CSS-määrittelyjä, sitä vähemmän dokumentit ovat ulkonäön suhteen HTML 3.2 yhteensopivia.

Mikäli halutaan mahdollisimman suuri alaspäin yhteensopivuus, tulee käyttää elementtiä FONT, vaikka CSS spesifikaatio ei sitä mainitse kuin ohimennen. Kun annat kuvauksen luokalle font-style1, voit jälkikäteen määritellä fontin ominaisuudet uusiksi, mutta vanhemmat selaimet näyttävät HTML 3.2 tasoiset vaihtoehtoiset attribuutit. Tee seuraavan tapainen määrittely dokumentin runko-osaan ( - mallisivulla on kaikki tämän jakson mallit):

<FONT class="font-style1" face="Arial" color="#3f3f3f">

Tällainen on kuitenkin aika vaivalloista ja HTML 3.2 attribuutit ovat aika vaatimattomia verrattuna CSS-ominaisuuksiin. Et koskaan saavuta kovin suurta alaspäin yhteensopivuutta. Tavallaan jonkinasteinen alaspäin yhteensopivuus toteuttaa CSS-mediapäämääriä - eri laitteille voidaan tarjota yksilöllisiä sivuja.

Tosin attribuuttivalitsimia käyttäen CSS luokka- tai id-valitsimia ei tarvita lainkaan vaan ominaisuuksien sovitussäännöissä voidaan hyödyntää olemassa olevia attribuutteja. Alla on kaksi esimerkkiä elementin FONT värin muutostavoista attribuuttivalitsinten avulla ():

font[color="#660033"]{color:blue} /* elementti FONT, jolla on attribuuttina color="#660033", saavat värin blue - muista välilyöntisääntö; jos laitat välilyönnin elementtityypin perään, säännössä sanotaan: fontti-elementti, jonka perässä on elementti, jolla on attribuutti color="#660033" saavat värin blue */
*[color="#660033"]{color:blue} /* värin muutoksen voi esittää myös yleisesti; tässä sanotaan vain, että mikä tahansa elementti, jolla on attribuuttina color="#660033", saavat värin blue */

Erityisesti otsikoissa voi käyttää hyvinkin monenlaisia ominaisuuksia. Olen seuraavaan esimerkkiin koonnut suuren joukon ominaisuuksia ja mainitsen, mitkä niistä kuuluvat vain CSS2:een ():

h2
{color: #660033; /* tekstin väri ns. keyword-arvona */
font-family: Algerian, "Times New Roman",serif;
font-weight: bold; /* miten paksua fonttia käytetään - tässä ns. keyword-arvona */
font-size: 18pt; /* absoluuttisella yksiköllä määritelty fonttikoko */
font-style:oblique; /* standardin mukaan tekee normaali fontin tietokoneella viistoksi (slant) - melkein sama kuin italic (oletuksena normal) */
font-variant:small-caps; /* kaikki kirjaimet ovat isoja kirjaimia, mutta pienet kirjaimet näytetään vähän matalampina */
text-transform:capitalize; /* hieman edellisen kaltainen - sanan ensimmäinen kirjain on aina iso kirjain (muut arvot ovat lowercase ja uppercase); huomaa, että lowercase (pienet kirjaimet) kumoaa edellisen määrittelyn */
text-decoration: overline; /* muut mahdolliset arvot: none, underline, line-through, blink; ominaisuus ei automaattisesti periydy */ font-stretch:wider; /* em. arvon pitäisi leventää fonttityyppiä (CSS2) */
text-shadow: 5px 5px red; /* tekstin varjostus (CSS2) */ }

Fonttimääreiden kohdalla huomionarvoista on font-weight. Periaatteessa fonttiperheeseen voi kuulua yhdeksän eri fontinpaksuutta ja ne merkitään 100-900 (esim. font-weight:600). Millään tuntemallani fontilla näin ei ole kuitenkaan asianlaita ja mikä arvo puuttuu otetaan lähin sopiva arvo (lisäksi on huomattava, että normal=400 ja bold=700). Väliaikaiseen koon muuttamiseen voi käyttää myös avainsanoja lighter ja bolder, joita en suosittele perusmääreiksi.

Fontin ominaisuudet voidaan määritellä myös ns. pikakirjoitteena, jossa mukana on myös line-height ominaisuus ():

... {font: normal small-caps 120%/120% fantasy;} /* malli fontin pikakirjoitemäärittelystä; ensimmäinen prosenttiluku tarkoittaa fontin korkeutta ja toinen rivikorkeutta (line-height ominaisuus voidaan määrittää muista vastaavan kaltaisista ominaisuuksista poiketen ilman mittayksikköä: 1.2 = 1.2em); erillismäärittelyjä on kuitenkin mielestäni tässä tapauksessa helpompi hallita */

Alla on W3C organisaation spesifikaation pohjalta muokattu esimerkki:

@media print {/* toimii ainakin MS IE 5.x, uusilla Netscape/ Mozilla ja Opera4.+ selaimilla */
body {font-size: 10pt}
}
@media screen {
body {font-size: 12pt }
}
@media screen, print {/* muut mahdolliset mediatyypit: aural, braille, embossed, handheld, projection, tty, tv - huomaa, että laitteen täytyy tunnistaa itsensä eli tietyt laitteet tarvitsevat erityisselaimen eikä toimivuutta voi testata ennen kuin kyseinen selain on valmistettu! */
body {line-height: 1.2}
} /* huomaa, että kaarisulut ympäröivät tavanomaiset määrittelyt */

W3C: CSS2: 7 Media types; 7.2.1 The @media rule.

Kun mediasääntö liitetään samaan tyylisivuin, sääntöjen merkitystasoja kuvaa jo aiemmin käyttämäni kaavio, johon olen lisännyt yhden tason (mediasääntölohko voi sisältää useita sääntöjä aivan kuten kuvauslohko voi sisältää useita kuvauksia):

Edellä olleessa kaaviossa print on ns. mediatyyppi (media type). Mediatyyppitiedon voi liittää myös STYLE tai LINK-elementteihin (<LINK rel="stylesheet" type="text/css" media="print">) ja @import -sääntöön (esim. @import url(printti.css) print; - tämä tiedosto haetaan vain tulostettaessa).

Mediaryhmät

Normaali näyttöesitysmedia, kuten eräät muutkin mediatyypit ovat ns. jatkuvaa media (continous media). Mediatyypit print ja projection ovat osa CSS2:n sivutettua mediaa (paged media), joka on yksi mediaryhmä (media group).

Sivutetussa tulostus- ja näyttömediassa pyritään hallitsemaan sivutkatkot.

Tavanomainen paperitulostus, normaali näyttöesistys ja projektioesitys ovat kaikki osa visuaalista muotoilumallia (visual formatting model). CSS2:n kuuluu myös ei-visuaalisia muotoilumalleja (formatting models) ja erityismedioita näkövammaisia varten, joita ovat kuulomuotoilumalli (aural rendering model) ja kosketeltava media tactile media).

Lisäksi on otettava huomioon esityslaitteen ominaisuudet, joihin kuuluu mm. se, voiko käyttää lainkaan grafiikkaa. tai voiko käyttäjä vaikuttaa esityksen lopputulokseen vai ei.

Seuraava lista esittelee mediaryhmät, muotoilumallit sekä niihin liittyvät mediatyypit, mikäli niitä on vain yksi tai kaksi:

• Visuaalinen muotoilumalli
• Kuulomuotoilumalli - mediatyyppi aural
• Kosketeltava media - mediatyypit braille ja emboss
• Sivutettu media - jatkuva media (kyse on siitä, että käytetäänkö sivunkatkosääntöjä vai ei)
• Interaktiivinen media - staattinen media (interactive - static; voiko käyttäjä muuttaa sivun esitysasua vai ei)
• Kehikko - rasteri (grid - bitmap; edellisessä näyttö käyttää ns. kiinteävälistä kirjasinkehikkoa (fixed-pitch character grid), joka ei tue grafiikkaa; jälkimmäisessä näyttö toimii rasterina, jolloin voidaan käyttää myös suhteutettuja merkkejä ja esittää grafiikkaa)

Muotoilumallien, mediatyyppien ja -ryhmien välistä suhdetta kuvaa W3C spesifikaatiosta lainattu taulukko (kohta ei sovellu, merkitään englanniksi N/A (= not applicable), joka merkitsee sitä, että kyseistä vaihtoehtoa ei voi soveltaa tiettyyn tilanteeseen; ks. mediatyyppien suomennosehdotuksia:

Fonttityyppien at-sääntö

Eri visuaalisten esitystapojen tueksi on myös mahdollista ladata fontteja @font-face säännön avulla. Seuraavassa kuitenkin yksi W3C sivuilta ottamani esimerkki:

@font-face {
src: local("Helvetica Medium"), /* selain yrittää ensin etsiä asennetun fontin */
url(http://www.fonts.org/sans/Helvetica_family) format("truedoc"); /* mikä selain ei löydä sellaista, se lataa fontin; mikäli ladattua fonttia ei löydy käytetään vaihtoehtoista fonttia */
font-family: "Helvetica";
font-style: normal}
h3 {font-family: "Helvetica Medium", sans-serif }

W3C: CSS2: 15 Fonts, 15.3.1 Font Descriptions and @font-face.

Koska nimelliskooltaan samankokoinen fontti saattaa näyttää kovinkin erikokoiselta, CSS2 tuo laskentakaavoja (font matching algorithm), joilla korvaavien fonttien koko tuottaisi mahdollisimman samankaltaisen lopputuloksen (font-size-adjust).

W3C: CSS2: 15 Fonts, 15.2.4 Font size, 15.5 Font matching algorithm.
Microsoft: @font-face Rule; Netscape: Dynamic HTML in Netscape Communicator Part 3. Downloadable Fonts.

Kansainvälisyys

Käyttäjän huomioimista on myös hänen kielensä mukaisesti tehdyt sivut. Tätä pyrkimystä kutsutaan W3C piirissä termillä internationalization (se lyhennetään usein muotoon i18n). On mahdollista luoda samaan dokumenttiin oikealta ja vasemmalta kirjoitettavaa tekstiä (kuten esim. hepreaa) käyttämällä ominaisuutta direction, jota käsitellään spesifikaation luvussa 9. Tämä on kuitenkin itselleni äärimmäisen harvoin tarvittava piirre enkä ole sitä testannut.

Muut i18n piirteet käsitellään CSS2 spesifikaation luvussa 12. Siinä tuodaan esille, että on mahdollista tehdä kielikohtaisia sitaatteja käyttäen elementtiä Q (= quote = sitaatti. Myös erityisten listatyyppien käyttö on mahdollista (käsittelen listoja omalla sivulla).

W3C: CSS2: 9 Visual formatting model, 9.10 Text direction: the 'direction' and 'unicode-bidi' properties, 12 Generated content, automatic numbering, and lists .

Jos haluat, että selain huomioi linkin ympäröivälle (esi-isä)elementille tai BODY elementille antamasi luokan (esim. <BODY class="oma">), toteuta sääntö hahmonsovitus-periaatteella :

.oma a:hover {color: #dcd2d3; text-decoration: none; background-color: #706a6a;} /* määrittelyä sovelletaan ensin ikään kuin mille tahansa elementille, mutta sille annetaankin tarkennettu ehto; linkin ominaisuuksien muutos tapahtuu vain sillä ehdolla, että linkin esi-isäelementillä on luokka oma */
.oma table a:hover {color: #dcd2d3; text-decoration: none; background-color: #706a6a;} /* määrittelyä sovelletaan edellistä esimerkkiä tarkemmin - sääntö toteutuu vain sillä ehdolla, että linkki on sellaisen taulukon sisällä, jonka esi-isäelementillä on luokka oma */

Attribuuttivalitsimet

CSS2 tarjoaa myös attribuuttivalitsimiin perustuvan määrittelytavan. Otan esille muutaman tämän tavan käyttömahdollisuuksista:

a[href] {color:blue} /* vastaa samaa kuin a:link */
a[id] {color:blue} /* samalle sivulle viittaavat linkit merkitään erilailla kuin sivulta pois vievät linkit */
a[id="ankkurin_nimi"] {color:blue} /* ankkuri merkitään vain siinä tapauksessa, että sillä on tarkka tunniste eli tietty nimi */
a[href] img {background-color:yellow} /* elementteihin ja attribuutteihin perustuvia tunnistettavia hahmoja voidaan myös yhdistellä */
a[href="http://www.server.fi/~joku/"] {color:blue} /* vain tietty linkki merkitään */
a[target="new"], a[target="_blank"] {color:olive; background-color:yellow} /* omien sivujen ulkopuolelle uuteen ikkunaan ohjaavat linkit merkitään erilailla kuin omiin sivuihini viittaavat linkit */