[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]
AihepiiriluetteloCSS-oppaan etusivuOpassivut > 3. Mitkä ovat CSS:n mittayksiköt, värit ja avainsanat

3. Mitkä ovat CSS:n mittayksiköt, värit ja avainsanat

Aiheet

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.

Mitat

HTML 3.2:ssa tarkkoja mittayksiköitä ei ole kuin yksi (= pixel = piste näyttöruudulla, esim. widht="300" - mittayksikköä ei ole mainittu, koska se aina sama). Tekstille ei sitäkään, koska teksti halutaan säilyttää skaalautuvana. HTML 3.2 mukainen fonttikoko (kuten esim. <FONT size="3">) voidaan ilmaista CSS:llä vain fonteille tarkoitetuilla avainsanoilla xx-small, x-small, small, medium, large, x-large, xx-large (esim. small {font-size:x-small;}).

Fontteihin liittyville elementeille kuten useimmille muille elementeille voidaan käyttää myös numeroarvoisia mittayksiköitä. Niiden mahdollisina desimaalierottimina käytetään pistettä. Numeroarvoille pitää laittaa lähes aina mittayksikkö (toisin kuin HTML 3.2 attribuuteissa), mikäli kyse pituuteen tai korkeuteen liittyvistä seikoista (numeroarvo voi tarkoittaa myös jotain muuta asiaa, jolloin siinä ei käytetä mittayksikköä). Ainoan poikkeukset muodostavat ominaisuus line-height (sille riittää esim. line-height:1.2) sekä arvo 0.

Jotkut ominaisuudet voivat saada arvokseen web-osoitteen. Arvot (values) voidaan sijoittaa lainausmerkkien sisään, mutta se ei ole välttämätöntä (url("gif.gif") tai url(gif.gif)). Lainausmerkkejä (' tai ") tarvitaan kaikissa nimissä, joissa on välilyöntejä (esim. font-family: "Times New Roman") sekä sekä ominaisuuksissa, joiden arvoissa käytetään merkkijonoja (esim. content: "tämä on merkkijono";)

Numeroarvoisista mittayksiköistä toiset ovat relatiivisia ja toiset absoluuttisia. Mittayksikkö em suhteutuu ympäröivän elementin fonttikokoon. Esim. small {font-size: 0.9em;} tarkoittaa, että; fonttikoko on 0,9 kertaa pienempi kuin ympäröivällä elementillä eli "emoelementillä" (käsittelen emoelementti-näkökulmaa tarkemmin tuonnempana, mutta tässäkin on kyse elementin asemasta dokumenttipuussa[S][Pw]).

Saman tapainen mittayksikkö on ex, josta spesifikaation ilmoittaa:

ex: the 'x-height' of the relevant font.

Termi x-height merkitsee tietylle merkistölle tyypillisen pienen x-kirjainmerkin korkeutta; suurempi x-korkeus tekee samalla nimellispistekoolla luodun merkistön pienet kirjaimet suuremmiksi ja luettavammiksi.

Fonteille ja useimmille muille elementeille voidaan käyttää myös prosenttiarvoja (kuten esim. big {font-size:120%}.

Relatiivisten arvojen ongelma on siinä, että ne ovat käytännössä sangen epätäsmällisiä. Fonttikokojen suhteen etuna se, että fonttia voi helposti isontaa/pienentää. Tästä syystä useimmat fonttimääritykseni ovat relatiivisia. Tein esimerkkisivun, jossa on käytetty useita relatiivisia yksiköitä ([M][S][Pw]).

Absoluuttisilla mittayksiköillä saa tarkemman kontrollin, mutta useimmat selaimet eivät osaa skaalata niitä (Opera skaalaa kaiken, joten sille liian pieni fonttikoko ei ole ongelma). Kaikki CSS-ominaisuuksia osaavat selaimen näyttävät siten saman fonttityypin aina (lähes) saman kokoisena. Seuraavat mittayksiköt ovat spesifikaation mukaan absoluuttisia (mahdollinen desimaaliosuus erotetaan pisteellä):

  • in = inches, tuumia
  • cm = senttimetrejä
  • mm = millimetrejä
  • pt = points, pisteitä - yksi piste on sama kuin 1/72 tuumaa = 0,353 mm (printattuna, mutta ruudulla se voi olla esim. 1/96 osa tuumaa riippuen käyttöjärjestelmästä ja sen resoluutiosta)
  • pc: pica - 1 pica = 12 points, pistettä = 4,24mm

Spesifikaatio määrittelee mittayksiön px (= pikseli) olevan näyttölaitteen (viewing device) suhteen relatiivisiin mittayksikkö (edellisellä mallisivulla oli viimeisenä yksi esimerkki tämän yksikön käyttämisestä). Se on printatuissa dokumenteissa periaatteessa relatiivinen mittayksikkö, mutta näyttöruudulla absoluuttinen yksikkö. Tosin CSS2 spesifikaatio suosittelee, että selaimet laskevat sille absoluuttisen arvon ja niin selaimet toimivatkin.

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[S] 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.

Selainkohtaisia huomautuksia:

  1. Kaikki selaimet eivät vaadi width ja height ominaisuuksiin mittayksikköä, vaikka pitäisi. Joillakin selaimilla tämä seikka on DTD-riippuvainen[S].

  2. Selaimilla saattaa olla toisistaan poikkeavat oletusmäärittelyt, mistä syystä relatiiviset fonttikoot saattavat olla toisistaan poikkeavia.

  3. Avainsanat xx-small-xx-large eivät täsmälleen vastaa HTML attribuuttia size ja selainten tulkinta vaihtelee suuresti. Small on pienin käytettäväksi suositeltava arvo. Uusimmmille Netscape/ Mozilla ja tietyillä dokumenttityypeillä myös MS IE 6.0 Windows -selaimen käytös on em. fonttikokojen kohdalla DTD-riippuvainen[S]. Tein vertailusivun[S][Pw], joka osoittaa mitä eroja selainten välillä on olemassa.

  4. Jotkut selaimet osaavat skaalata absoluuttisia fonttiyksikköjä, mutta useimmat eivät (Opera skaalaa tarvittaessa kaiken).

  5. Selaimet toteuttavat prosenttiarvojen pyöristyksen hieman toisistaan poikkeavasti.

  6. Fonttikoossa ei koskaan saa unohtaa mittayksikköä, sillä sen sen lisäksi että Netscape 4.x hylkää virheellisen arvon se hylkää myös virheellisen fonttimäärittelyn jälkeen annetut ominaisuudet! Laitoin mallisivun alimpaan esimerkkiin tahallisesti virheellisesti laaditun määrittelyn ([M][S][Pw]).


Zeffrey Zeldman and Brian Platz: A List Apart; Keijo Kortelainen: Syntaksi.
[Alku]

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;} ([M][S][Pw])). 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ä ([M][S][Pw]):

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[Pw].

Selainkohtaisia huomautuksia:.

  1. CSS2 spesifikaatio antaa mahdollisuuden käyttää sovelluskohtaisia värejä. Opera 5.x -sarja tukee Netscapen 140 nimetyn värin palettia mutta monet versiot eivät. Katso englanninkieliseltä sivulta Color keywords[S], miltä eri värit näyttävät ja miten niitä eri käyttöympäristössä tuetaan. Mikäli haluat välttää mahdollisimman pitkälle väriongelmia, käytä mahdollisuuksien mukaan ns. web safe colors -palettiin kuuluvia värejä RGB tai heksadesimaaliarvoja käyttäen.

  2. Uudet Netscape/Mozilla-selaimet käyttävät UA CSS[S] tiedostoissa joitakin erityisiä väriarvoja (esim. invert), jotka on tarkoitettu selaimen omaan käyttöön. Niitä voi kuitenkin käyttää myös intranet-ratkaisuissa, joissa käytetään uusia Netscape/Mozilla -selaimia. Viittaan niihin CSS-taulukon nooteissa[S].

  3. Jotkut selaimet hyväksyvät virheellisesti heksadesimaaliarvoiset värit ilman #-merkkiä (esim. color:334455). MS IE 6.0 Windows ja uusissa Netcape/Mozilla -selaimissa tämä asia on DTD-riippuvainen[S].

[Alku]

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 [Pw], 17 Tables, 7.7 Audio rendering of tables[Pw], 19 Aural style sheets[Pw].
Muita sivustoja: Keijo Kortelainen: Syntaksi.

[Alku]

Virheiden käsittely

Joissakin tapauksissa selain tai muu tyylisivuja käsittelevä ohjelmaa kohtaa virheellisiä tai tuntemattomia tyylimäärityksiä. Esim. ominaisuuksien arvot voivat olla virheellisiä. Jotta uudet ominaisuudet ja arvot toimisivat tulevaisuudessa, kaikkien käyttäjäsovellusten tulisi täytyy noudattaa seuraavia sääntöjä:

  • Tuntemattomat ominaisuudet jätetään tulkitsematta (selaimen pitäisi pystyä kuitenkin tulkitsemaan kuvauslohkoista standardin mukaisesti määritellyt ominaisuudet).
  • Laittomat arvot jätetään huomioimatta.
  • Kelvottomat at-avainsanat jätetään huomioimatta (käsittelen at-avainsajoja myöhemmin).
W3C: CSS2: 4.2 Rules for handling parsing errors[Pw].

Selainkohtaisia huomautuksia:

  1. Erityisesti MS IE 4.01-5.5 Windows -selaimet sietävät paljon sellaisia virheitä, joita selaimen ei tulisi suvaita. Kun MS IE 6.0 Windows toimii ns. standard-compliant -moodissa[S] se sietää niitä paljon vähemmän.

[Alku]

Käsittelen seuraavaksi sitä, millä tavalla selain tunnistaa kohteet, joihin CSS:ää sovelletaan eli tarkastelemme valitsimia.

[Alku]
   
Copyright Tapio Markula 1999-2003, Salo (kotisivu, s-posti - lisää s-postiosoiteeseen pisteellä erotettuna nimeni, Tapio Markula) (@dnainternet.net) - ei julkiskäyttöön ilman sopimusta.
Get Expression!
Editori, jolla saa luotua standardit täyttäviä HTML ja XML dokumentteja. Tämän sivuston sivut on useimmissa tapauksissa tarkastettu Dave Raggetin (W3C) tekemällä HTML-Tidy apuohjelmalla ja satunnaisesti W3C-organisaation virallisella koodintarkastusohjelmalla. Useimpien sivujen syntaksin pitäisi olla sopusoinnussa W3C:n XHTML 1.0 spesifikaation kanssa. Testaa tämä sivu!
Informaatiota selaimista, jotka näyttävät tai tulostavat tämän sivuston parhaiten.
[Hae Opera] [Hae Mozilla!]
CSS-opasta on viimeksi muutettu 20.12.2004