Tämän asiakirjan asema
Tämä asiakirja on W3C:n Suositus. Tämä asiakirja on W3C:n (http://www.w3.org/) jäsenten tarkistama.
Määrityksen käyttökelpoisuudesta on päästy yhteisymmärrykseen. Tämä asiakirja
on vakaa ja sitä voidaan käyttää lähdemateriaalina ja siihen voidaan viitata
normatiivisena lähteenä muista asiakirjoista. W3C kannattaa tämän Suosituksen
laaja-alaista käyttöä.
Lista nykyisistä W3C:n Suosituksista ja muista teknisistä asiakirjoista on
nähtävillä osoitteessa http://www.w3.org/TR/.
Tämä on tarkistettu versio alunperin 17 joulukuuta 1996 julkaistusta
asiakirjasta. Muutokset alkuperäiseen versioon nähden on listattu liitteessä F. Lista tämän määrityksen tunnetuista
virheistä on julkaistu osoitteessa http://www.w3.org/Style/CSS/Errata/REC-CSS1-19990111-errata
Tämä asiakirja määrittää Cascading Style Sheet -mekanismin tason 1 (CSS1).
CSS1 on yksinkertainen tyyliohjemekanismi, jonka avulla sekä sivuntekijät
että lukijat voivat määrittää HTML-asiakirjojen ulkoasun (esim. kirjasimet ja
välit). CSS1-kieli on ihmisen luettavissa ja kirjoitettavissa ja se esittää
tyylin tavallisella työpöytäjulkaisukäsitteistöllä.
Yksi CSS:n perusominaisuuksista on tyyliohjeiden limittyvyys; sivuntekijät
voivat liittää toivotun tyylisivun, mutta lukijalla voi olla
henkilökohtainen, hänen ja hänen käyttämän tekniikan rajoitukset paremmin
huomioon ottava tyyliohje. Tämä asiakirja määrittelee säännöt tyyliohjeiden
välisten ristiriitojen käsittelyyn.
Tämä Suositus on W3C:n tyyliohjetoiminnan tulosta.
Lisätietoa tyyliohjeista: katso [1].
Tiivistelmä
Käsitteistö
1 Peruskäsitteet
1.1 Liittäminen HTML:ään
1.2 Ryhmittely
1.3 Periytyminen
1.4 Luokka valitsimena
1.5 ID valitsemena
1.6 Kontekstuaaliset
valitsimet
1.7 Kommentit
2 Näennäisluokat ja
näennäiselementit
2.1 Ankkurinäennäisluokat
2.2 Typograafiset
näennäiselementit
2.3
'first-line'-näennäiselementti
2.4
'first-letter'-näennäiselementti
2.5 Näennäiselementit
valitsimissa
2.6 Useampi
näennäiselementti
3 Limittyminen
3.1 'important'
3.2 Korvautumisjärjestys
4 Muotoilumalli
4.1 Lohkotason elementit
4.1.1 Pystysuuntainen muotoilu
4.1.2 Vaakasuuntainen
muotoilu
4.1.3 Listaelementit
4.1.4 Kelluvat elementit
4.2 Tekstitason elementit
4.3 Korvautuvat elementit
4.4 Rivien korkeus
4.5 Esitysalue
4.6 'BR'-elementit
5 CSS1Nominaisuudet
5.1 Ominaisuuksien arvojen
merkintätavat
5.2 Kirjasimen ominaisuudet
5.2.1 Kirjasimen valinta
5.2.2 'font-family'
5.2.3 'font-style'
5.2.4 'font-variant'
5.2.5 'font-weight'
5.2.6 'font-size'
5.2.7 'font'
5.3 Väri ja taustan
ominaisuudet
5.3.1 'color'
5.3.2 'background-color'
5.3.3 'background-image'
5.3.4 'background-repeat'
5.3.5 'background-attachment'
5.3.6 'background-position'
5.3.7 'background'
5.4 Tekstin ominaisuudet
5.4.1 'word-spacing'
5.4.2 'letter-spacing'
5.4.3 'text-decoration'
5.4.4 'vertical-align'
5.4.5 'text-transform'
5.4.6 'text-align'
5.4.7 'text-indent'
5.4.8 'line-height'
5.5 Laatikon ominaisuudet
5.5.1 'margin-top'
5.5.2 'margin-right'
5.5.3 'margin-bottom'
5.5.4 'margin-left'
5.5.5 'margin'
5.5.6 'padding-top'
5.5.7 'padding-right'
5.5.8 'padding-bottom'
5.5.9 'padding-left'
5.5.10 'padding'
5.5.11 'border-top-width'
5.5.12 'border-right-width'
5.5.13 'border-bottom-width'
5.5.14 'border-left-width'
5.5.15 'border-width'
5.5.16 'border-color'
5.5.17 'border-style'
5.5.18 'border-top'
5.5.19 'border-right'
5.5.20 'border-bottom'
5.5.21 'border-left'
5.5.22 'border'
5.5.23 'width'
5.5.24 'height'
5.5.25 'float'
5.5.26 'clear'
5.6
Luokitteluominaisuudet
5.6.1 'display'
5.6.2 'white-space'
5.6.3 'list-style-type'
5.6.4 'list-style-image'
5.6.5 'list-style-position'
5.6.6 'list-style'
6 Yksiköt
6.1 Pituuden yksiköt
6.2 Prosentuaaliset yksiköt
6.3 Värin yksiköt
6.4 URL
7 CSS1-yhteensopivuus
7.1 Eteenpäinyhteensopiva
tulkinta
8 Viitteet
9 Kiitokset
Liite A: Esimerkkityyliohje HTML 2.0
Liite B: CSS1:n syntaksi
Liite C: Koodaus
Liite D: Gammakorjaus
Liite E: CSS1:n sovellettavuus ja
laajennettavuus
Liite F: Muutokset joulukuun 1996 versiosta
- määre
- HTML-määre
- sivun tekijä
- HTML-asiakirjan laatija
- lohkotason elementti
- Elementti, jota ennen ja jälkeen tulee rivinvaihto (esim. 'H1'
HTML:ssä)
- esitysalue
- Se osa käyttäjäagentin piirtopinnasta, jolle asiakirjat piirretään
- lapsielementti
- Alielementti (subelement) SGML-käsitteistössä [5]
- kontekstuaalinen valitsin
- Valitsin, joka valitsee elementin perustuen sen paikkaan asiakirjan
rakenteessa. Kontekstuaalinen valitsin koostuu useasta yksinkertaisesta
valitsimesta. Esim. kontekstuaalinen valitsin 'H1.initial B' koostuu
kahdesta yksinkertaisesta valitsimesta: 'H1.initial' ja 'B'.
- CSS
- Cascading Style Sheets
- CSS1
- Cascading Style Sheets, taso 1. Tämä asiakirja määrittelee CSS1:n,
yksinkertaisen tyyliohjemekanismin web:iä varten.
- CSS1 kehittyneet ominaisuudet
- Ominaisuudet, jotka on määritelty tässä määrityksessä, mutta joita ei
ole merkitty CCS1:n ydinominaisuuksiksi.
- CSS1 ydinominaisuudet
- Se osa CSS1:stä joka vaaditaan kaikilta CSS1-yhteensopivilta
käyttäjäagenteilta.
- CSS1-jäsennin
- Käyttäjäagentti, joka lukee CSS1-tyyliohjeita.
- lauselma
- ominaisuus (esim. 'font-size') ja vastaava arvo (esim. '12pt')
- taittaja
- tyyliohjeen tekijä
- asiakirja
- HTML-asiakirja
- elementti
- HTML-elementti
- elementin tunniste
- Yleinen tunniste (generic identifier) SGML-käsitteistössä [5]
- kuvitteellinen tagijakso
- työkalu näennäisluokkien ja näennäiselementtien käyttäytymisen
kuvaamiseen
- kirjasinkoko
- Koko, jota varten kirjasin on suunniteltu. Yleensä kirjasimen koko on
likimäärin etäisyys matalimman kirjaimen alimmasta kohdasta korkeimman
(mahdollisesti diakriittisen merkin sisältävän) huippuun.
- HTML
- Hypertext Markup Language [2], SGML:n
sovellus.
- HTML-laajennus
- Käyttäjäagenttien valmistajien keksimät merkinnät, jotka usein on
tarkoitettu merkitsemään tiettyjä visuaalisia tehosteita. Esimerkiksi
"FONT", "CENTER" ja "BLINK" -elementit tai "BGCOLOR"-määre. Yksi CSS:n
tavoitteista on tarjota vaihtoehto HTML-laajennuksille.
- rivitason elementti
- elementti, jota ennen ja jälkeen ei tule rivinvaihtoa (esim. 'STRONG'
HTML:ssä)
- ominaismitat
- Korkeus ja leveys niinkuin elementti ne itse määrittää, ei elementin
ympäristön pakottamat mitat. Tässä määrityksessä oletetaan että
kaikilla korvautuvilla elementeillä - ja vain korvautuvilla
elementeillä - on ominaiset mitat.
- emoelementti
- containing element SGML-käsitteistössä [5]
- näennäiselementti
- Näennäiselementtejä käytetään CSS-valitsimissa osoittamaan
typograafisia kohteita (esim. elementin ensimmäinen rivi)
rakenteellisten elementtien sijasta.
- näennäisluokka
- näennäisluokkia käytetään CSS-valitsimissa luokittelemaan elementtejä
HTML-lähdekoodin ulkopuolisen tiedon perusteella (esim. sen
perusteella, onko linkki vierailtu vai ei).
- ominaisuus
- Tyyliparametri, johon voi vaikuttaa CSS:n avulla. Tämä määritys
määrittelee listan ominaisuuksia ja niiden arvoja.
- lukija
- henkilö, jota varten asiakirja on piirretty.
- korvautuva elementti
- Elementti, josta CSS-muotoilija tietää vain ominaiset mitat. HTML:ssä
esimerkiksi 'IMG', 'INPUT', 'TEXTAREA', 'SELECT' ja 'OBJECT' voivat
olla korvautuvia elementtejä. Esim. 'IMG'-elementin sisältö usein
korvataan SRC-määreen osoittamalla kuvalla. CSS1 ei määritä, kuinka
nämä mitat selvitetään.
- sääntö
- Lauselma (esim. 'font-family: helvetica') ja sen valitsin(esim.
'H1')
- valitsin
- Merkkijono, joka määrittää mihin elementteihin sääntöä sovelletaan.
Valitsin voi olla yksinkertainen valitsin (esim. 'H1') tai useasta
yksinkertaisesta valitsimesta koostuva kontekstuaalinen valitsin (esim.
'H1 B').
- SGML
- Standard Generalized Markup Language [5], jonka
sovellus HTML on.
- yksinkertainen valitsin
- Valitsin, joka valitsee elementtejä elementin tyypin ja/tai määreiden
eikä elementin aseman rakenteessa perusteella. Esim., 'H1.initial' on
yksinkertainen valitsin.
- tyyliohje
- kokoelma sääntöjä
- käyttäjäagentti
- Käyttäjäagentti, usein webselain tai webpääte
- käyttäjä
- synonyymi lukijalle
- painoarvo
- säännön tärkeys
Tämän määrityksen tekstissä puolilainausmerkit ('...') tarkoittavat HTML-
ja CSS-otteita.
Yksinkertaisen tyylisivun suunnittelu on helppoa. Täytyy vain osata hieman
HTML:n ja työpöytäjulkaisun peruskäsitteitä. Esim. 'H1'-elementin tekstin
värin asettamiseksi siniseksi voidaan kirjoittaa:
H1 { color: blue }
Ylläoleva esimerkki on yksinkertainen CSS-sääntö. Sääntö koostuu kahdesta
pääosasta: valitsimesta('H1') ja lauselmasta ('color: blue'). Lauselmassa on
kaksi osaa: ominaisuus ('color') ja arvo ('blue'). Vaikka ylläoleva esimerkki
yrittää vaikuttaa vain yhteen HTML-asiakirjan piirtämiseen tarvittavaan
ominaisuuteen, se on sinällään pätevä tyyliohje. Muihin tyyliohjeisiin
yhdistettynä (yksi CSS:n perusominaisuuksista on tyyliohjeiden yhdistäminen)
se määrää asiakirjan lopullisen esitysasun.
Valitsin on HTML-asiakirjan ja tyyliohjeen yhdistävä linkki ja kaikki
HTML-elementtityypit ovat mahdollisia valitsimia. HTML-elementtityypit on
määritelty HTML-määrittelyssä [2].
'color'-ominaisuus on yksi noin 50 ominaisuudesta,
jotka määräävät HTML-asiakirjan ulkoasun. Ominaisuuksien ja niiden mahdollisten arvojen
lista on määritelty tässä määritelmässä.
HTML:n tekijöiden tarvitsee kirjoittaa tyyliohjeita vain jos he haluavat
ehdottaa tiettyä tyyliä asiakirjoilleen. Jokaisella käyttäjäagentilla (usein
webselain tai webpääte) on oletustyyliohje joka esittää asiakirjat järkevällä
-- mutta luultavasti tavanomaisella -- tavalla. Liiteessä A on mallityyliohje HTML-asiakirjojen
esittämiseksi HTML 2.0-määrityksen mukaisesti [3].
CSS1:n muodollinen kielioppi on määritelty liitteessä B.
Jotta tyyliohjeet vaikuttaisivat esitykseen, käyttäjäagentin täytyy olla
tietoinen niiden olemassaolosta. HTML-määritys [2]
määrittää, kuinka HTML linkitetään tyyliohjeiden kanssa. Tämä osa on siten
informatiivinen, mutta ei normatiivinen:
<HTML>
<HEAD>
<TITLE>otsikko</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/cool" TITLE="Cool">
<STYLE TYPE="text/css">
@import url(http://style.com/basic);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Otsikko on sininen</H1>
<P STYLE="color: green">Mutta kappale vihreä.
</BODY>
</HTML>
Esimerkkissä on esitetty neljä tapaa yhdistää tyyliohjeet ja HTML:
'LINK'-elementillä linkitetty ulkoinen tyyliohje, 'STYLE'- elementti
'HEAD'-elementin sisässä, CSS:n '@import'-merkinnällä tuotu tyyliohje, ja
'STYLE'-määre elementissä 'BODY':n sisässä. Viimeisessä vaihtoehdossa tyyli
on sekoitettu sisällön sekaan ja näin menetetty osa tyyliohjeiden eduista.
'LINK'-elementti viittaa vaihtoehtoiseen tyyliohjeeseen, jonka lukija voi
valita, kun taas tuodut tyyliohjeet liitetään automaattisesti muihin
tyyliohjeisiin.
Perinteisesti käyttäjäagentit ovat jättäneet tuntemattomat tagit
huomiotta. Tämän takia vanhat käyttäjäagentit
eivät huomioi 'STYLE'-elementtiä, mutta sen sisältö käsitellään asiakirjan
runkon osana ja myös piirretään sellaisena. Siirtymävaiheen aikana
'STYLE'-elementin sisällön voi kätkeä SGML-kommenttien avulla:
<STYLE TYPE="text/css"><!--
H1 { color: green }
--></STYLE>
Koska 'STYLE'-elementti on määritelty CDATA:ksi dokumenttityypin
määrityksessä ([2]), yhteensopivat SGML-jäsentimet eivät
tulkitse ylläolevaa tyyliohjetta poistettavaksi kommentiksi.
Tyyliohjeen koon pienentämiseksi valitsimia voi ryhmitellä
pilkkuerotelluiksi listoiksi:
H1, H2, H3 { font-family: helvetica }
Lauselmia voi ryhmitellä samalla tavalla:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
Lisäksi jollain ominaisuuksilla on omat ryhmittelysääntönsä:
H1 { font: bold 12pt/14pt helvetica }
joka vastaa edellistä esimerkkiä.
Ensimmäisessä esimerkissä 'H1'-elementtien väri asetettiin siniseksi.
Oletetaan, että on 'H1'-elementti, jonka sisässä on 'EM'-elementti:
<H1>Tämä otsikko <EM>on</EM> tärkeä!</H1>
Jos 'EM'-elementille ei ole asetettu mitään väriä, korostettu "on" perii
emoelementin värin eli on myös sininen. Muut tyyliominaisuudet periytyvät
samalla, esim. 'font-family' ja 'font-size'.
Asiakirjalle voi antaa oletustyyliominaisuuden asettamalla ominaisuuden
elementille, josta kaikki näkyvät elementit periytyvät. HTML-asiakirjoissa
'BODY'-elementti sopii tähän tarkoitukseen:
BODY {
color: black;
background: url(tekstuuri.gif) white;
}
Tämä toimii vaikka asiakirjan laatija olisi jättänyt 'BODY'-tagin pois
(mikä on sallittua), koska HTML-jäsennin päättelee puuttuvan tagin. Ylläoleva
esimerkki asettaa tekstin värin mustaksi ja taustaksi kuvan. Tausta on
valkoinen, jos kuvaa ei ole saatavilla. (Katso lisää asiasta kappaleesta
5.3.)
Jotkin tyyliominaisuudet eivät periydy emoelementiltä lapsielementille.
Useimmiten on selvää miksi näin on. Esim. 'background'-ominaisuus ei periydy, mutta emoelementin
tausta näkyy oletuksena läpi.
Usein ominaisuuden arvona on prosenttiluku, joka viittaa toiseen
ominaisuuteen:
P { font-size: 10pt }
P { line-height: 120% } /* suhteessa 'font-size':een, toisin sanoen 12pt */
Jokaiselle prosenttiarvoja hyväksyvälle ominaisuudelle on määritelty,
mihin ominaisuuteen prosenttiluku viittaa. 'P'-elementin lapsielementit
perivät 'line-height':in lasketun arvon (eli
12pt), ei prosenttiarvoa.
Elementtien hallinnan tarkentamiseen HTML:ään [2] on
lisätty uusi määre: 'CLASS'. Jokaisen 'BODY'-elementin sisäpuolisen elementin
voi luokitella, ja luokkaan voi viitata tyyliohjeessa:
<HTML>
<HEAD>
<TITLE>Otsikko</TITLE>
<STYLE TYPE="text/css">
H1.ruoho { color: #00FF00 }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=ruoho>Aivan liian vihreää</H1>
</BODY>
</HTML>
Normaalit perimyssäännöt pätevät luokitettuihin elementteihin eli ne
perivät arvoja emoelementeiltään.
Kaikkiin saman luokan elementteihin voi viitata jättämällä tagin nimen
pois valitsimesta:
.ruoho { color: green } /* kaikki elementit, joiden CLASS on ruoho */
Yhdessä valitsimessa voidaan määrittää vain yksi luokka. 'P.ruoho.ranta'
on siten virheellinen valitsin CSS1:ssä. (Alla kuvatuilla kontekstuaalisilla
valitsimilla voi olla yksi luokka yksinkertaista valitsinta kohden)
CSS antaa niin paljon valtaa CLASS-määreelle, että monissa tapauksissa ei
ole edes väliä, mihin HTML-elementtiin luokka liittyy -- kaikki elementit saa
näyttämään lähes miltä tahansa muulta elementiltä. Tähän valtaan luottaminen
ei ole suositeltavaa, koska se poistaa rakenteesta tason, jolla on yleinen
merkitys (HTML-elementit). CLASS-määreeseen perustuva rakenne on
käyttökelpoinen vain rajoitetussa käytössä, kun luokkien merkityksistä on
yhteisesti sovittu.
HTML [2] esittelee myös 'ID'-määreen, jonka on taattu
olevan ainutlaatuinen asiakirjan sisällä. Sillä voi siten olla
erityismerkitys valitsimena tyyliohjeessa ja siihen voi viitata edeltävällä
#-merkillä:
#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }
<P ID=z98y>Leveää tekstiä</P>
Ylläolevassa esimerkissä ensimmäinen valitsin valitsee 'P'-elementin
ID-määreen perusteella. Toinen valitsin määrittelee sekä elementin tyypin
('H1') ja ID-arvon, joten se ei valitse 'P'-elementtiä.
Käyttämällä ID-määrettä valitsimena voidaan tyyliominaisuuksia asettaa
elementtikohtaisesti. Vaikka tyyliohjeet on suunitelty täydentämään
asiakirjan rakennetta, tämän ominaisuuden avulla sivujen tekijät voivat tehdä
hyvännäköisiä sivuja ilman HTML:n rakenteellisia elementtejä. Tälläista
tyyliohjeiden käyttöä ei kannateta.
Periytyminen säästää CSS:n kirjoittajia liialta kirjoittamiselta. Jokaisen
tyyliominaisuuden asettamisen sijaan voi määrätä oletukset ja sitten luoda
poikkeuksia. 'H1'-elementtien sisällä olevien 'EM'-elementtien määräämiseksi
erivärisiksi voitaisiin kirjoittaa:
H1 { color: blue }
EM { color: red }
Kun tämä tyyliohje on käytössä, kaikki korostetut osat sekä 'H1'-elementin
ulko- että sisäpuolella muuttuvat punaisiksi. Jos vain 'H1'-elementtien
sisällä olevat 'EM'-elementit halutaan punaisiksi, voitaisiin kirjoittaa:
H1 EM { color: red }
Valitsin on nyt hakuehto avointen elementtien pinoon. Tämäntyyppistä
valitsinta kutsutaan kontekstuaaliseksi valitsimeksi.
Kontekstuaalinen valistin koostuu tyhjän erottamista yksinkertaisista
valitsimista (kaikki tähän mennessä kuvatut valitsimet ovat olleet
yksinkertaisia valitsimia). Vain viimeisen valitsimen kanssa täsmäävät
elementit valitaan (tässä tapauksessa 'EM'-elementti ja vain jos hakuehto
täsmää. Kontekstuaaliset valitsimet CSS1:ssä tutkivat esi-isäsuhteita, mutta
muita suhteita saatetaan lisätä myöhemmissä versioissa. Ylläolevassa
esimerkissä haku täsmää jos 'EM' on 'H1':n jälkeläinen eli jos 'EM' on 'H1':n
sisällä.
UL LI { font-size: small }
UL UL LI { font-size: x-small }
Tässä ensimmäinen valitsin valitsee 'LI'-elementit, joilla on ainakin yksi
'UL'-esi-isä. Toinen valitsin valitsee ensimmäisen alijoukon eli
'LI'-elementit, joilla on ainakin kaksi 'UL'-esi-isää. Ristiriidan ratkaisee
se, että toinen valitsin on yksilöivämpi pidemmän hakuehdon vuoksi. Katso
lisätietoja limittymisjärjestyksestä (kappale
3.2).
Kontekstuaaliset valitsimet voivat valita elementtityypin, CLASS-määreen,
ID-määreen tai näiden yhdistelmien perusteella:
DIV P { font: small sans-serif }
.punertava H1 { color: red }
#x78y CODE { background: blue }
DIV.sivuhuom H1 { font-size: large }
Ensimmäinen valitsee kaikki 'P'-elementit, joilla on yksikin
'DIV'-esi-isä. Toinen valitsee kaikki
'H1'-elementit, joilla on luokkaan 'punertava' kuuluva esi-isä. Kolmas
valitsee kaikki 'CODE'-elementit, jotka ovat elementin 'ID=x78y' jälkeläisiä.
Neljäs valitsee kaikki 'H1'-elementit, joilla on luokkaan 'sivuhuom' kuuluva
'DIV'-elementti esi-isänään.
Useita kontekstuaalisia valitsimia voi ryhmittää yhteen:
H1 B, H2 B, H1 EM, H2 EM { color: red }
Joka on sama kuin:
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
Tekstikommentit CSS-tyyliohjeissa ovat samantapaisia kuin
C-ohjelmointikielessä [7]:
EM { color: red } /* punaista, todella punaista!! */
Kommentit eivät voi olla sisäkkäisiä. CSS1-jäsentimelle kommentti vastaa
tyhjää.
CSS1:ssä tyyli liitetään yleensä elementtiin perustuen elementin
sijaintiin asiakirjan rakenteessa. Tämä yksinkertainen malli on riittävä
monenlaisille tyyleille, mutta ei riitä muutamille yleisille tehosteille.
Näennäisluokat ja näennäiselementit laajentavat CSS1:n osoittamiskykyä
mahdollistamalla ulkoisen tiedon vaikutuksen muotoiluprosessiin.
Näennäisluokkia ja näennäiselementtejä voi käyttää CSS-valitsimina, mutta
niitä ei ole HTML-lähdekoodissa. Sen sijaan käyttäjäagentti luo ne tietyissä
tilanteissa vartavasten tyyliohjeen valitsimia varten. Niitä kutsutaan
"luokiksi" ja "elementeiksi", koska tämä on kätevä tapa kuvata niiden
käyttäytymistä. Tarkemmin ottaen niiden käytös määritellään
kuvitteellisena tagijaksona.
Näennäiselementtejä käytetään osoittamaan elementtien osia, kun taas
näennäisluokat antavat tyyliohjeiden tehdä eron erilaisten elementtityyppien
välillä.
Yleensä käyttäjäagentit esittävät äskettäin vieraillut ankkurit eri
tavalla kuin vanhemmat. CSS1 käsittelee tämän 'A'-elementin näennäisluokkien
avulla:
A:link { color: red } /* käymätön linkki */
A:visited { color: blue } /* käyty linkki */
A:active { color: lime } /* aktiivinen linkki */
Kaikki 'A'-elementit, joilla on 'HREF'-määre, kuuluvat yhteen ja vain
yhteen näistä luokista (ts. tämä ei vaikuta kohdeankkureihin).
Käyttäjäagentit saattavat muuttaa linkin käydystä käymättömäksi jonkin ajan
kuluttua. Luokan 'active' linkki on se, jota lukija on juuri sillä hetkellä
valitsemassa (esim. hiiren napsautuksella).
Ankkurinäennäisluokat muotoillaan niin kuin ne olisi lisätty käsin.
Käyttöjäagentin ei tarvitse muotoilla uudelleen sillä hetkellä näytettävää
asiakirjaa, jos näennäisluokat muuttuvat. Esim. tyyliohje voi sallitusti
määrittää, että näennäisluokkaan 'active' kuuluvan linkin 'font-size' on
suurempi kuin näennäisluokkaan 'visited' kuuluvan, mutta käyttäjäagenttien ei
ole pakko dynaamisesti uudelleenmuotoilla asiakirjaa, kun lukija valitsee
näennäisluokkaan 'visited' kuuluvan linkin.
Näennäisluokkavalitsimet eivät valitse tavallisia luokkia ja päinvastoin.
Allaolevan esimerkin tyylisäännöllä ei siten ole mitään vaikutusta:
A:link { color: red }
<A CLASS=link NAME=target5> ... </A>
CSS1:ssä ankkurinäennäisluokilla ei ole vaikutusta muihin kuin
'A'-elementteihin, joten elementin tyypin voi jättää pois valitsimesta:
A:link { color: red }
:link { color: red }
CSS1:ssä molemmat ylläolevat valitsimet valitsevat samat elementit.
Näennäisluokkien nimet ovat riippumattomia kirjainkoosta.
Näennäisluokkia voi käyttää kontekstuaalisissa valitsimissa:
A:link IMG { border: solid blue }
Näennäisluokkia voi myös yhdistää normaalien luokkien kanssa:
A.ulkoinen:visited { color: blue }
<A CLASS=ulkoinen HREF="http://out.side/">ulkoinen linkki</A>
Jos ylläolevan esimerkin linkki on vierailtu, se piirretään sinisenä.
Huomioi, että normaalien luokkien nimet tulevat valitsimessa ennen
näennäisluokkia.
Jotkin yleiset typografiset tehosteet eivät liity rakenteelisiin
elementteihin, vaan ennemminkin esitysalueelle piirretyn asiakirjan
typografisiin kohteisiin. CSS1:ssä tälläiset typografiset kohteet voidaan
valita näennäiselementtien avulla. Näitä ovat elementin ensimmäinen rivi ja
ensimmäinen kirjain.
CSS1 ydin: Käyttäjäagentit voivat unohtaa kaikki säännöt, joiden
valitsimessa on ':first-line' tai ':first-letter' tai vaihtoehtoisesti tukea
vain osaa näiden näennäiselementtien ominaisuuksista. (katso kappale 7)
'first-line'-näennäiselementtiä käytetään määrittämään esitysalueelle
piirretyn ensimmäisen rivin tyyli:
<STYLE TYPE="text/css">
P:first-line { font-variant: small-caps }
</STYLE>
<P>Ensimmäinen rivi artikkelissa Newsweekissa.
Tekstipohjainen käyttäjäagentti voisi muotoilla tämän seuraavasti:
ENSIMMÄINEN RIVI
artikkelissa
Newsweekissa.
Kuvitteellinen tagijakso ylläolevassa esimerkissä on:
<P>
<P:first-line>
Ensimmäinen rivi
</P:first-line>
artikkelissa Newsweekissa.
</P>
'first-line'-lopetustagi on lisätty esitysalueelle muotoillun ensimmäisen
rivin loppuun.
'first-line'-näennäiselementti voi liittyä vain lohkotason elementtiin.
'first-line'-näennäiselementti on samankaltainen kuin rivitason elementti,
mutta muutamin rajoituksin. Vain seuraavat ominaisuudet vaikuttavat
'first-line'-elementtiin: kirjasimen ominaisuudet (5.2), väri- ja taustaominaisuudet (5.3), 'word-spacing' (5.4.1), 'letter-spacing' (5.4.2), 'text-decoration' (5.4.3), 'vertical-align' (5.4.4),
'text-transform' (5.4.5), 'line-height' (5.4.8), 'clear' (5.5.26).
'first-letter'-näennäiselementtiä käytetään yleisten typografisten
tehosteiden, anfangien, tekemiseen. Se on samanlainen rivitason elementin
kanssa, jos sen 'float'-ominaisuus on 'none', muutoin se on kuin kelluva
elementti. Nämä ominaisuudet vaikuttavat
'first-letter'-näennäiselementteihin: kirjasimen ominaisuudet (5.2), väri- ja taustaominaisuudet (5.3), 'text-decoration' (5.4.3), 'vertical-align' (vain jos 'float' on 'none', 5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), marginaalien ominaisuudet (5.5.1-5.5.5), täytteen
ominaisuudet (5.5.6-5.5.10), reunan ominaisuudet (5.5.11-5.5.22), 'float'
(5.5.25), 'clear' (5.5.26).
Tällä tavoin anfangi saadaan kahden rivin korkuiseksi:
<HTML>
<HEAD>
<TITLE>Otsikko</TITLE>
<STYLE TYPE="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>Ensimmäiset</SPAN> muutamat sanat artikkelissa politiikka- ja talouslehti
The Economist:ssa.</P>
</BODY>
</HTML>
Jos tekstipohjainen käyttäjäagentti tukee
'first-letter'-näennäiselementtiä (todennäköisesti ne eivät tue), ylläoleva
voitaisiin muotoilla seuraavasti:
_
|_ NSIMMÄISET muutamat
|_ sanat artikkelissa
politikka ja talouslehti
The Economist:ssa.
Kuvitteelinen tagijakso on:
<P>
<SPAN>
<P:first-letter>
E
</P:first-letter>nsimmäiset
</SPAN>
muutamat sanat artikkelissa politiikka- ja talouslehti
The Economist:ssa.
</P>
Huomioi, että 'first-letter'-näennäiselementtitagit ovat sisällön vieressä
(ts. alkukirjaimen ympärillä), kun taas 'first-line'-näennäiselementin
aloitustagi lisätään heti sen elementin aloitustagin jälkeen, johon
'first-line'-ominaisuus on liitetty.
Käyttäjäagentti määrittävät, mitkä merkit kuuluvat
'first-letter'-elementin sisään. Normaalisti ensimmäisen kirjaimen edessä
olevat lainausmerkit otetaan mukaan:
_____
|| | | arempi
|_____| pyy
| pivossa
| kuin
kymmenen oksalla",
sanoo vanha sanan-
lasku.
Kun kappale alkaa muilla välimerkeillä (esim. suluilla tai kolmella
pisteellä) tai muilla merkeillä, joita ei yleensä pidetä kirjaimina (esim.
numerot ja matemaattiset merkit), 'first-letter'-näennäiselementit jätetään
yleensä huomioimatta .
Joissain kielissä on omia sääntöjä siitä, miten käsitellä tiettyjä
kirjainyhdistelmia. Esimerkiksi hollannissa, jos "ij" on sanan alussa,
pitäisi ne molemmat ottaa mukaan 'first-letter'-näennäiselementtiin.
'first-letter'-näennäiselementti voi liityä vain lohkotason
elementtiin.
Kontekstuaalisissa valitsimissa näennäiselementit voivat olla vain
lopussa:
BODY P:first-letter { color: purple }
Näennäiselementtejä voi yhdistää luokkien kanssa valitsimissa:
P.alku:first-letter { color: red }
<P CLASS=alku>Ensimmäinen kappale</A>
Ylläoleva esimerkki tekisi kaikkien 'P'-elementtien, joiden 'CLASS' on
'alku', ensimmäisistä kirjaimista punaisia. Yhdisteltäessä luokkia ja
näennäisluokkia täytyy näennäiselementit määritellä valitsimen lopussa.
Yhdelle valitsimelle voi määritellä vain yhden näennäiselementin.
Useita näennäiselementtejä voi yhdistää:
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<P>Jotain tekstiä, joka päätyy kahdelle riville</P>
Tässä esimerkissä jokaisen 'P'-elementin ensimmäinen kirjain olisi 24
pisteen kokoinen ja vihreä. Ensimmäisen rivin loppu (esitysalueelle
piirrettynä) olisi punainen ja loppu kappaleesta vihreä. Jos oletetaan, että
rivinvaihto on ennen sanaa "päätyy", kuvitteellinen tagijakso olisi:
<P>
<P:first-line>
<P:first-letter>
J
</P:first-letter>otain tekstiä, joka
</P:first-line>
päätyy kahdelle riville
</P>
Huomioi, että 'first-letter'-elementti on 'first-line'-elementin
sisäpuolella. 'first-letter' perii 'first-line':lle annetut ominaisuudet,
mutta jos 'first-letter':lle määritetään samoja ominaisuuksia kuin
'first-line':lle, 'first-letter':lle annetut ominaisuudet ohittavat
'first-line':ltä perityt.
Jos näennäiselementti rikkoo todellisen elementin, täytyy tarvittavat
lisätagit lisätä kuvitteelliseen tagijaksoon. Jos esimerkiksi SPAN-elementti
jatkuu </P:first-line> tagin yli, täytyy tarvittavat lisätagit
luoda. Kuvitteelinen tagijakso näyttää silloin tältä:
<P>
<P:first-line>
<SPAN>
Tämä teksti on pitkän
</SPAN>
</P:first-line>
<SPAN>
span-elementin sisäpuolella
</SPAN>
CSS:ssä usea tyyliohje voi vaikuttaa esityksen ulkoasuun samanaikaisesti.
Tähän on kaksi pääsyytä: modulaarisuus ja sivun tekijä/lukija -tasapaino.
- modulaarisuus
- Tyyliohjeen tekijä voi yhdistää useita (osittaisia) tyyliohjeita
vähentääkseen moninkertaisuuksia:
@import url(http://www.style.org/ruoho);
@import url(http://www.style.org/ranta);
H1 { color: red } /* ohita tuodut tyyliohjeet */
- sivun tekijä/lukija -tasapaino
- Sekä lukijat että sivun tekijät voivat vaikutaa esitykseen
tyyliohjeiden avulla. Tehdäkseen tämän he käyttävät samaa
tyyliohjekieltä samalla heijastaen yhtä webin perusominaisuutta:
kenestä tahansa voi tulla julkaisia. Käyttäjäagentti saa vapaasti
valita menetelmän, jota se käyttää henkilökohtaisiin tyyliohjeisiin
viittaamiseen.
Joskus esitykseen vaikuttavat tyyliohjeet ovat ristiriitaisia.
Ristiriitojen ratkaiseminen perustuu siihen, että jokaisella säännöllä on
painoarvo. Oletuksena lukijan säännön painoarvo on pienempi kuin asiakirjan
tekijän säännön painoarvo, eli jos vastaanotettavan asiakirjan säännöt ovat
ristiriidassa lukijan henkilökohtaisten sääntöjen kanssa, käytetään
asiakirjan tekijän sääntöä. Sekä asiakirjan tekijän ja lukijan säännöt
ohittavat käyttäjäagentin oletusarvot.
Tuodut tyyliohjeet voivat myös limittyä toistensa kanssa siinä
järjestyksessä missä ne on tuotu, allaolevien sääntöjen mukaan. Tyylisivussa
itsessään määritellyt säännöt ohittavat tuotujen tyyliohjeiden säännöt.
Toisin sanoen tuodut tyylisivut ovat matalammalla sijalla
limittymisjärjestyksessä kuin tyyliohjeen omat säännöt. Tuodut tyyliohjeet
voivat myös itse tuoda ja ja ohittaa itse tuomiaan muita tyyliohjeita
rekursiivisesti.
CSS1:ssä kaikkien '@import'-käskyjen täytyy olla tyyliohjeen alussa, ennen
muita lauselmia. Näin voidaan helposti nähdä, että säännöt tyyliohjeessa
itsessään ohittavat säännöt tuodussa tyyliohjeessa.
Tyylisivujen tekijät voivat kasvattaa lauselmiensa painoarvoa:
H1 { color: black ! important; background: white ! important }
P { font-size: 12pt ! important; font-style: italic }
Ylläolevassa esimerkissä kolmella ensimmäisellä lauselmalla on kasvatettu
painoarvo, mutta viimeisellä normaali painoarvo.
Lukijan sääntö 'important'-määräyksellä ohittaa sivun tekijän normaalin
säännön. Sivuntekijän sääntö 'important'-määräyksellä ohittaa lukijan
säännön, jolla on 'important'-määräys.
Ristiriitaiset säänöt ovat luontainen osa CSS-mekanismia. Seuraavan
algoritmin avulla saadaan elementti/ominaisuus -yhdistelmän arvo selville:
- Etsi kaikki elementti/ominaisuutta koskevat lauselmat. Lauselma koskee
tätä, jos valitsin täsmää kyseessä olevan elementin kanssa. Jos mikään
lauselma ei koske tätä ominaisuutta, käytä perittyä arvoa. Jos perittyä
arvoa ei ole, (tilanne on tämä 'HTML'-elementin kanssa ja
ominaisuuksille, jotka eivät periydy) käytä alkuarvoa.
- Lajittele lauselmat nimenomaisesti määritetyn painoarvon mukaan:
'!important'-merkityillä säänöillä on suurempi painoarvo kuin
merkitsemättömillä (tavallisilla) säännöillä.
- Lajittele lähteen mukaan: asiakirjan tekijän tyyliohje ohittaa lukijan
tyyliohjeen joka ohittaa käyttäjäagentin oletusarvot. Tuodulla
tyyliohjeella on sama lähde kuin tyyliohjeella, joka sen toi.
- Lajittele valitsimen yksilöivyyden mukaan: yksilöivämmät valitsimet
ohittavat yleisemmät valitsimet. Yksilöivyys määritetään laskemalla
valitsimen ID-määreiden lukumäärä (a), CLASS-määreiden lukumäärä (b) ja
tagien nimien lukumäärä(c). Yhdistämällä nämä luvut (lukujärjestelmässä
jonka kantaluku on iso), saadaan yksilöivyys. Muutamia esimerkkejä:
LI {...} /* a=0 b=0 c=1 -> yksilöivyys = 1 */
UL LI {...} /* a=0 b=0 c=2 -> yksilöivyys = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> yksilöivyys = 3 */
LI.red {...} /* a=0 b=1 c=1 -> yksilöivyys = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> yksilöivyys = 13 */
#x34y {...} /* a=1 b=0 c=0 -> yksilöivyys = 100 */
Näennäiselementit ja näennäisluokat lasketaan normaaleiksi
elementeiksi ja luokiksi.
- Lajittele määritetyn järjestyksen mukaan: Jos kahdella säänöllä on sama
painoarvo, viimeksi määritelty voittaa. Tuotujen tyyliohjeiden säännöt
ovat ennen tyyliohjeen omia sääntöjä.
Ominaisuuden arvon haku voidaan lopettaa, kun yhdellä säännöllä on
suurempi painoarvo kuin muilla samaan elementti/ominaisuus -yhdistelmään
vaikuttavilla säännöillä.
Tämä strategia antaa asiakirjan tekijän tyyliohjeille huomattavasti
suuremman painoarvon kuin lukijan tyyliohjeille. Sen takia on tärkeää, että
lukijalla on mahdollisuus laittaa jokin tyyliohje pois päältä esimerkiksi
jostain valikosta.
Elementin 'STYLE'-määressä olevalla lauselmalla (katso esimerkki kappaleesta 1.1 ) on sama painoarvo kuin
lauselmalla, jolla on ID-pohjainen valitsin, ja joka on tyyliohjeen
lopussa:
<STYLE TYPE="text/css">
#x97z { color: blue }
</STYLE>
<P ID=x97z STYLE="color: red">
Ylläolevassa esimerkissä 'P'-elementin väri olisi punainen. Vaikka
molempien lausekkeiden yksilöivyys on sama, lauselma 'STYLE'-määreessä
ohittaa 'STYLE'-elementissä olevan korvautumissäännön 5 perusteella.
Käyttäjäagentit voivat noudattaa muita HTML:n tyyliin vaikuttavia
määreitä, esimerkiksi 'ALIGN'-määrettä. Jos käyttäjäagentti päätää näin
tehdä, kyseiset määreet muutetaan vastaaviksi CSS-säänöiksi, joiden
yksilöivyys on 1. Näiden sääntöjen oletetaan olevan asiakirjan tekijän
tyyliohjeen alussa ja myöhemmät tyylisäännöt voivat ohittaa ne. Tämä käytäntö
helpottaa tyyliohjeiden ja HTML:n tyylimääreiden käyttöä keskenään
siirtymävaiheessa.
CSS1 käyttää yksinkertaista laatikkopohjaista muotoilumallia, jossa
jokainen muotoiltu elementti luo yhden tai useamman neliskulmaisen laatikon.
(Elementtejä, joiden 'display' on 'none', ei muotoilla, eivätkä nämä myöskään
luo laatikoita) Kaikissa laatikoissa on sisältöalue ja viela mahdollisesti
täyte-, reunus-, ja marginaalialueet.
_______________________________________
| |
| marginaali (läpinäkyvä) |
| _________________________________ |
| | | |
| | reuna | |
| | ___________________________ | |
| | | | | |
| | | täyte | | |
| | | _____________________ | | |
| | | | | | | |
| | | | sisältö | | | |
| | | |_____________________| | | |
| | |___________________________| | |
| |_________________________________| |
|_______________________________________|
| elementin leveys |
| laatikon leveys |
Marginaalin, reunuksen, ja täytteen koko asetetaan margin- (5.5.1-5.5.5), padding- (5.5.6-5.5.10), ja
border-ominaisuuksilla (5.5.11-5.5.22). Täytealueen taustan ominaisuudet ovat samat kuin
elementillä (määritetään taustan
ominaisuuksilla (5.3.2-5.3.7)). Reunuksen väri ja tyyli määritetään
reunuksen ominaisuuksilla. Marginaalit ovat aina läpinäkyviä, joten
emoelementti näkyy marginaalien läpi.
Laatikon koko on elementin leveyden (ts. muotoillun tekstin tai kuvan) ja
täyte-, reunus- ja marginaalialueiden summa.
Muotoilijan näkökulmasta elementtejä on kahta päätyyppiä: lohkotason
elementtejä ja rivitason elementtejä.
Elementit, joiden 'display'-arvo on 'block' tai 'list-item', ovat
lohkotason elementtejä. Myöskin kelluvia elementtejä (elementtejä,
joiden 'float'-arvo on muu kuin 'none') pidetään lohkotason elementteinä.
Seuraava esimerkki näyttää, kuinka marginaalit ja täyte muotoilevat
kaksilapsisen 'UL'-elementin. Kaavion yksinkertaistamiseksi siinä ei ole
reunuksia. Myöskään yksikirjaimiset vakiot eivät ole kelvollista CSS1:tä,
vaan ainoastaan käytännöllinen tapa yhdistää tyyliohjeen arvot ja kuvio.
<STYLE TYPE="text/css">
UL {
background: red;
margin: A B C D;
padding: E F G H;
}
LI {
color: white;
background: blue; /* eli teksti on valkoista sinisellä */
margin: a b c d;
padding: e f g h;
}
</STYLE>
..
<UL>
<LI>Listan 1. elementti
<LI>Listan 2. elementti
</UL>
_______________________________________________________
| |
| A UL marginaali (läpinäkyvä) |
| _______________________________________________ |
| D | | B |
| | E UL täyte (punainen) | |
| | _______________________________________ | |
| | H | | F | |
| | | a LI marginaali (läpinäkyvä, | | |
| | | joten punainen näkyy läpi) | | |
| | | _______________________________ | | |
| | | d | | b | | |
| | | | e LI täyte (sininen) | | | |
| | | | | | | |
| | | | h Listan 1. elementti f | | | |
| | | | | | | |
| | | | g | | | |
| | | |_______________________________| | | |
| | | | | |
| | | max(a, c) | | | <- huomaa maksimi
| | | _______________________________ | | |
| | | | | | | |
| | | d | e LI täyte (sininen) | | | |
| | | | | | | |
| | | | h Listan 2. elementti f | | | |
| | | | | | | |
| | | | g | | | |
| | | |_______________________________| | | |
| | | | | |
| | | c LI marginaali (läpinäkyvä, | | |
| | | joten punainen näkyy läpi) | | |
| | |_______________________________________| | |
| | | |
| | G | |
| |_______________________________________________| |
| |
| C |
|_______________________________________________________|
Teknisesti ajatellen täyte- ja marginaaliominaisuudet eivät periydy.
Mutta, kuten esimerkki osoittaa, elementin sijoittelu riippuu sen esi-isistä
ja jälkeläisistä eli näiden elementtien täyte- ja marginaaliominaisuuksilla
on vaikutusta jälkeläisiinsä.
Jos ylläolevassa esimerkissä olisi ollut reunuksia, ne olisivat olleet
täytteen ja marginaalin välissä.
Seuraava kaavio esittelee hiukan käsitteistöä:
--------------- <-- yläreuna
ylämarginaali
---------------
yläreunus
---------------
ylätäyte
+-------------+ <-- sisempi yläreuna
| | | | | | | |
|-vasen--|-vasen--|-vasen--|-- sisältö --|--oikea--|--oikea--|--oikea--|
| margi- | reunus | täyte | | täyte | reunus | margi- |
| naali | | | | | | naali |
+-------------+ <-- sisempi alareuna
^ ^ ^ ^
vasen vasen sisäreuna oikea sisäreuna oikea
ulkoreuna ulkoreuna
alatäyte
---------------
alareunus
---------------
alamarginaali
--------------- <-- alareuna
Vasen ulkoreuna on elementin reuna mukaanlukien sen täytteen,
reunuksen ja marginaalin. Vasen sisäreuna on pelkän sisällön reuna,
täytteen, reunuksen ja marginaalin sisäpuolella. Samoin oikealla puolella.
Yläreuna on elementin yläreuna mukaanlukien sen täytteen, reunuksen
ja marginaalin; se on määritelty vain kelluville ja rivitason elementeille,
ei kellumattomille lohkotason elementeille. Sisempi yläreuna on
pelkän sisällön reuna, täytteen, reunuksen ja marginaalin sisäpuolella.
Alareuna on elementin alareuna mukaanlukien sen täytteen, reunuksen
ja marginaalin; se on määritelty vain kelluville ja rivitason elementeille,
ei kellumattomille lohkotason elementeille. Sisempi alareuna on
pelkän sisällön reuna, täytteen, reunuksen ja marginaalin sisäpuolella.
Elementin leveys on sisällön leveys, ts. vasemman sisäreunan ja
oikean sisäreunan välinen etäisyys. Korkeus on sisällön korkeus, ts. sisemmän
alareunan ja sisemmän yläreunan välinen etäisyys.
Kellumattomien lohkotason elementtien marginaalin leveys määrittää
minimietäisyyden viereisiin laatikoihin. Kaksi tai useampi vierekkäinen
marginaali (ts. niiden välissä ei ole reunaa, täytettä tai sisältöä)
yhdistetään yhdeksi marginaaliksi, joka on yhtä suuri kuin suurin
alkuperäisistä marginaaleista. Marginaalien yhdistämisen jälkeen tulos on
useimmissa tapauksissa nätimpi ja lähempänä asiakirjan tekijän tarkoittamaa.
Ylläolevassa esimerkissä kahden 'LI'-elementin välinen marginaali on joko
ensimmäisen 'LI'-elementin 'margin-bottom' tai toisen 'LI'-elementin
'margin-top', riippuen siitä, kumpi on suurempi. Jos 'UL'-elementin ja
ensimmäisen 'LI'-elementin (vakio "E") välillä ei olisi ollut täytettä, olisi
UL-elementin ja ensimmäisen LI-elementin väliset marginaalit yhdistetty
samalla tavalla.
Jos vierekkäiset marginaalit ovat negatiiviset, negatiivisten marginaalien
suurin itseisarvo vähennetään suurimmasta positiivisesta marginaalista tai
nollasta, jos positiivisia marginaaleja ei ole.
Seuraavat seittämä ominaisuutta määrittelevät kellumattoman lohkotason
elementin vaakasuuntaisen asemoinnin ja koon: 'margin-left', 'border-left',
'padding-left', 'width', 'padding-right', 'border-right' ja 'margin-right'.
Näiden summa on aina yhtäsuuri kuin emoelementin 'width'.
Oletuksena elementin 'width'-ominaisuuden arvo on 'auto'. Jos elementti ei
ole korvautuva elementti, käyttäjäagentti laskee emoelementin
'width'-ominaisuuden niin, että se on sama kuin seittämän yllämainitun
ominaisuuden summa. Jos elementti on korvautuva, 'width'-ominaisuuden
'auto'-arvo korvataan automaatisesti elementin ominaisleveydellä.
Kolmelle näistä seittämästä ominaisuudesta voidaan antaa arvo 'auto':
'margin-left', 'width' ja 'margin-right'. Korvautuville elementeille
'width'-ominaisuuden 'auto'-arvo korvautuu ominaisleveydellä, joten näillä
voi olla vain kaksi 'auto'-arvoa.
'width'-ominaisuudella on epänegatiivinen käyttäagentin määrittämä
minimiarvo (joka voi vaihdella elementtikohtaisesti ja jopa muiden
ominaisuuksien takia). Jos 'width' on rajaa pienempi, koska se oli joko
nimenomaisesti sellaiseksi asetettu tai koska se oli 'auto'-asetuksessa ja
allaolevat säänöt tekivät siitä liian pienen, se korvataan minimiarvolla.
Jos täsmälleen yksi 'margin-left':stä, 'width':stä tai
'margin-right':sta on 'auto', käyttäjäagenttia määrittää sille arvon, joka
tekee näiden seittämän ominaisuuden arvon summan samaksi kuin emon leveys.
Jos yksikään arvo ei ole 'auto', niin 'margin-right':in arvoksi
asetetaan 'auto'.
Jos yksi tai useampi arvo on 'auto', ja tähän 'auto'-arvoisten joukkoon
kuuluu 'width', niin muut ('margin-left' ja/tai 'margin-right') asetetaan
nollaksi ja 'width' saa arvon niin, että seittämän ominaisuuden summa on emon
leveys.
Muutoin, jos 'margin-left' ja 'margin-right' ovat molemmat 'auto', ne
saavat yhtäsuuret arvot. Tämä sijoittaa elementin emonsa keskelle.
Jos jokin noista seittämästä ominaisuudesta on 'auto' rivitason
elementissä tai kelluvassa elementissä, se on sama kuin jos arvo olisi
nolla.
Toisin kuin pystysuunnan marginaaleja, vaakasuunnan marginaaleja ei
yhdistetä.
Elementit, joiden 'display'-ominaisuuden arvo on 'list-item', muotoillaan
lohkotason elementteinä, mutta niiden edessä on listapallukka.
'list-style'-ominaisuus määrittää tämän pallukan tyypin. Pallukka sijoitetaan
'list-style'-ominaisuuden arvon mukaisesti:
<STYLE TYPE="text/css">
UL { list-style: outside }
UL.compact { list-style: inside }
</STYLE>
<UL>
<LI>Ensimmäinen listan kohde tulee ensin
<LI>Toinen listan kohde tulee toisena
</UL>
<UL CLASS=COMPACT>
<LI>Ensimmäinen listan kohde tulee ensin
<LI>Toinen listan kohde tulee toisena
</UL>
Ylläoleva esimerkki saatetaan muotoilla näin:
* Ensimmäinen listan
kohde tulee ensin
* Toinen listan
kohde tulee toisena
* Ensimmäinen listan
kohde tulee ensin
* Toinen listan
kohde tulee toisena
Oikealta vasemmalle kirjoitetussa tekstissä merkit olisivat laatikon
oikealla puolella.
'float'-ominaisuudella elementti voidaan asettaa
normaalin elementtien virran ulkopuolelle ja sen jälkeen muotoilla lohkotason
elementtinä. Esimerkiksi, jos kuvan 'float'-ominaisuus asetetaan 'left':ksi,
kuvaa siirretään vasemmalle, kunnes se kohtaa toisen lohkotason elementin
marginaalin, täytteen tai reunuksen. Normaali virta rivittyy elementin
oikealta puolelta. Elementin itsensä marginaaleja, reunuksia ja täytettä
noudatetaan, eikä marginaaleja koskaan yhdistetä viereisten elementtien
kanssa.
Kelluva elementti sijoitellaan seuraavien rajoitusten mukaisesti (katso
käsitteiden selitykset kappaleesta
4.1):
- Vasemmalle kellutetun elementin vasen ulkoreuna ei voi olla
emoelementin vasemman sisäreunan vasemmalla puolella. Vastaavasti
oikealle kellutetuille elementeille.
- Vasemmalle kellutetun elementin vasemman ulkoreunan täytyy olla
jokaisen aikaisemman (HTML-koodissa) elementin oikean ulkoreunan oikealla
puolella tai aiemman yläreunan täytyy olla jälkimmäisen alareunan
alapuolella. Vastaavasti oikealle kellutetuille elementeille.
- Vasemmalle kellutetun elementin oikea ulkoreuna ei voi olla oikealle
kellutetun elementin vasemman ulkoreunan oikealla puolella. Vastaavasti
oikealle kellutetuille elementeille.
- Kelluvan elementin yläreuna ei voi olla emonsa sisemmän yläreunan
yläpuolella.
- Kelluvan elementin yläreuna ei voi olla minkään aiemman kellutetun tai
lohkotason elementin yläreunan yläpuolella.
- Kelluvan elementin yläreuna ei voi olla minkään sellaisen rivilaatikon
yläreunan yläpuolella, jossa on HTML-koodissa ennen kelluvaa elementtiä
olevaa sisältöä .
- Kelluvan elementin on oltava niin ylhäällä kuin mahdollista.
- Vasemmalle kellutettu elementti on vietävä niin vasemmalle kuin
mahdollista, oikealle kellutettu elementti niin oikealle kuin
mahdollista. Ylempänä oleva sijainti on parempi kuin enemmän
oikealla/vasemmalla oleva.
<STYLE TYPE="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG SRC=img.gif>
Jotain esimerkkitekstiä, jolla ei ole...
</BODY>
Ylläoleva esimerkki saatettaisiin muotoilla seuraavasti:
________________________________________
|
| max(BODYn marginaali, P:n marginaali)
| ______________________________
| B | P | Jotain esimerkki-
| O | | IMG marg. tekstiä, jolla ei
| D | m | _____ ole muuta tarkoi-
| Y | a | | | tusta, kuin näyt-
| | r | | IMG | tää, kuinka kellu-
| m | g | | | vat elementit
| a | i | |_____| siirretään emoele-
| r | n | mentin sivulle
| g | a | noudattaen margi-
| . | a | naaleja, reunuksia,
| | l |ja täytettä. Huomioi, kuinka
| | i |pystysuunnan marginaalit on -
| | |yhdistetty kellumattomien loh-
| | |kotason elementtien välillä
Huomioi, että 'P'-elementin marginaali sulkee kelluvan 'IMG'-elementin
sisäänsä.
Näissä kahdessa tilanteessa kelluvat elementit voivat olla päällekkäin
muiden elementtien marginaali-, reunus- ja täytealueiden kanssa:
- kun kelluvalla elementillä on negatiivinen marginaali: kelluvien
elementtien negatiivisiä marginaaleja noudatetaan siinä missä muidenkin
lohkotason elementtien.
- Kun kelluva elementti on leveämpi tai korkeampi kuin elementti, jonka
sisässä se on.
Elementit, joita ei muotoilla lohkotason elementteinä, ovat rivitason
elementtejä. Rivitason elementti voi olla samalla rivillä muiden elementtien
kanssa. Esimerkiksi:
<P>Muutamia <EM>korostettuja</EM> sanoja <STRONG>näkyvissä</STRONG>.</P>
'P'-elementti on normaalisti lohkotasoa mutta 'EM' ja 'STRONG' ovat
rivitasoa. Jos 'P'-elementti on niin leveä, että sen sisältö mahtuu yhdelle
riville, samalla rivillä on tällöin kaksi rivitason elementtiä:
Muutamia korostettuja sanoja näkyvissä.
Jos yhdellä rivillä ei ole tarpeeksi tilaa, rivitason elementti jakautuu
useiksi laatikoiksi:
<P>Muutama <EM>korostettuista sanoista</EM> on tässä.</P>
Ylläoleva saatetaan muotoilla näin:
Muutama korostetuista
sanoista on tässä.
Tekstielementin marginaalit, reunukset, täytteet tai tekstikoristeet eivät
vaikuta elementin katkaisukohtaan:
-------------
Muutama |korostetuista
-------------
--------
sanoista| on tässä.
--------
(Ylläoleva kuva on lievästi vääristynyt ASCII-grafiikan rajoitusten
vuoksi. Katso kappaleesta 4.4 kuinka
rivien korkeudet lasketaan.)
Korvautuva elementti on elementti, joka korvataan sen osoittamalla
sisällöllä. Esim. HTML:ssä 'IMG'-elementti korvataan sen 'SRC'-määreen
osoittamalla kuvalla. Voidaan olettaa, että korvautuvilla elementeillä on
omat ominaismittansa. Jos 'width'-ominaisuuden arvo on 'auto',
ominaisleveyttä käytetään elementin leveytenä. Jos tyyliohje määrittää muun
arvon kuin 'auto', tätä arvoa käytetään ja korvautuvan elementin kokoa
muutetaan vastaavasti (koon muuttamismenetelmä riippuu tietovälineen
tyypistä). 'height'-ominaisuutta käytetään samalla tavalla.
Korvautuvat elementit voivat olla joko lohkotason elementtejä tai
tekstielementtejä.
Kaikilla elementeillä on 'line-height'-ominaisuus, joka periaatteessa
kertoo tekstirivin kokonaiskorkeuden. Tekstin ylä- ja alapuolelle lisätään
tyhjää tarvittavan korkeuden saavuttamiseksi. Esimerkiksi, jos rivin teksti
on 12pt korkeaa ja 'line-height' on 14pt, lisätään 2pt edestä tyhjää: 1pt
rivin yläpuolelle ja 1pt alapuolelle. Tyhjät elementit vaikuttavat näihin
laskuihin aivan samoin kuin sisällölliset elementit.
Muotoilun jälkeen jokainen rivi muodostaa suorakulmaisen
rivilaatikon.
Jos tekstirivillä on osia, joilla on eri 'line-height'-arvo (koska rivillä
on tekstielementtejä), niin jokaisella osalla on oma 'line-height':n ja
kirjasinkoon erotuksen puolikas ylä- ja alapuolellansa. Rivilaatikon korkeus
on ylimmän osan yläreunasta alimman osan alareunaan. Huomioi, ettei kyseessä
välttämättä ole korkeimman elementin ylä- ja alareuna, koska elementtejä voi
sijoitella pystysuunnassa 'vertical-align'-ominaisuudella. Kappale
muodostetaan pinoamalla jokainen rivilaatikko valittömästi edellisen rivin
alapuolelle.
Huomioi, että korvautumattoman tekstielementin ylä- ja alapuoliset
marginaalit, täytteet tai reunukset eivät vaikuta rivin korkeuteen. Toisin
sanoen: jos 'line-height' on liian pieni valitulle täytteelle tai
reunukselle, se menee muilla riveillä olevien tekstien alueelle.
Rivillä olevat korvautuvat elementit (esim. kuvat) voivat tehdeä
rivilaatikosta isomman, jos korvautuvan elementin yläreuna (mukaanlukien
kaiken täytteen, reunuksen ja marginaalin) on korkeimman tekstiosan
yläpuolella tai alareuna on alimman osan alapuolella.
Normaalitilanteessa, jossa rivillä on vain yksi 'line-height':in arvo eikä
korkeita kuvia, ylläoleva määritelmä takaa peräkkäisten rivien olevan
täsmälleen 'line-height':in etäisyydellä toisistaan. Tämä on tärkeää, kun eri
kirjasimia sisältäviä rivejä täytyy kohdistaa esimerkiksi taulukossa.
Huomioi, että tämä ei estä vierekkäisten rivien tekstin päällekkäin menoa.
'line-height' voi olla pienempi kuin tekstin korkeus, jolloin 'line-height':n
ja kirjasinkoon erotus on negatiivinen. Tätä voidaan käyttää rivien
asettamiseksi lähemmäs toisiaan, tiedettäessä ettei tekstissä ole
alapidennyksiä (esim. koska siinä on vai isoja kirjaimia).
Esitysalue on se osa käyttäjäagentin piirtopinnasta, jolla asiakirjat
piirretään. Yksikään asiakirjan elementti ei vastaa esitysaluetta, joten
asiakirjan muotoilu nostaa esiin kaksi kysymystä:
- mistä esitysalueen mitat otetaan?
- kun asiakirja ei kata koko esitysaluetta, miten ylijäävä osa
käsitellään?
Järjellinen vastaus ensimmäiseen kysymykseen olisi, että esitysalueen
alkumitat perustuisivat ikkunan kokoon, mutta CSS1 jättää tämän kysymyksen
käyttäjäagenttien ratkaistavaksi. On myös järkeenkäypää olettaa, että
käyttäjäagentit muuttavat esitysalueen kokoa, kun ikkunan kokoa muutetaan,
mutta myös tämä on CSS1:n ulkopuolinen asia.
HTML-laajennukset ovat luoneet ennakkoratkaisun toiseen kysymykseen:
'BODY'-elementin määreet asettavat koko esitysalueen taustan. Noudattaakseen
asiakirjan laatijoiden odotuksia CSS1:ssä on erityinen sääntö esitysalueen
taustan määrittämiseen:
Jos 'HTML'-elementin 'background' on muu kuin 'transparent', käytetään
sitä, muutoin käytetään 'BODY'-elementin 'background'-arvoa. Jos tuloksena
on 'transparent', ei ole määritelty, mitä käytetään.
Säänön mukaan on sallittua:
<HTML STYLE="background: url(http://style.com/marble.png)">
<BODY STYLE="background: red">
Yllä olevassa esimerkissä esitysalue täytetään marblella. 'BODY'-elementin
(joka saattaa täyttää koko esitysalueen mutta saattaa olla täyttämättäkin)
tausta on punainen.
On suositeltavaa asettaa piirtoalueen ominaisuudet 'BODY'-elementissä,
kunnes muita tapoja tulee käytettäväksi.
Nykyiset CSS1:n ominaisuudet ja arvot eivät pysty kuvaamaan 'BR'-elementin
käyttäytymistä. HTML:ssä 'BR'-elementti määrittää rivinvaihdon sanojen
väliin. Käytännössä elementti korvataan rivinvaihdolla. Tulevat CSS-versiot
saattavat käsitellä lisättyä ja korvautuvaa sisältöä, mutta CSS1-pohjaisten
muotoilijoiden täytyy käsitellä 'BR'-elementtiä erityisesti.
Tyyliohjeet vaikuttavat asiakirjojen esitykseen antamalla arvoja
tyyliominaisuuksille. Tämä kappale listaa CSS1:n tyyliominaisuudet ja niiden
arvot.
Allaolevassa tekstissä jokaisen ominaisuuden sallitut arvot kerrotaan
seuraavaan tapaan:
Arvo: N | NW | NE
Arvo: [ <pituus> | thick | thin ]{1,4}
Arvo: [<kirjaintyyli> , ]* <kirjaintyyli>
Arvo: <url>? <väri> [ / <väri> ]?
Arvo: <url> || <väri>
<- ja >-merkkien välinen sana kertoo arvon tyypin. Yleisimmät tyypit
ovat <pituus>, <prosenttiluku>, <url>, <numero> ja
<väri>; nämä kuvataan kappaleessa 6.
Erikoistuneemmat tyypit (esim. <kirjaintyyli> ja <reunustyyli>)
kuvataan vastaavan ominaisuuden kohdalla.
Muut sanat ovat avainsanoja, jotka täytyy kirjoittaa kirjaimellisesti
samalla tavalla, ilman lainausmerkkejä. Myös vinoviiva (/) ja pilkku (,)
täytyy kirjoittaa samalla tavoin.
Usea rinnakkainaseteltu asia tarkoittaa, että niiden kaikkien on
esiinnyttävä annetussa järjestyksessä. Pystyviiva (|) erottaa vaihtoehtoja:
jonkin niistä on esiinnyttävä. Kaksoispystyviiva (A || B) tarkoittaa, että
A:n tai B:n täytyy esiintyä missä tahansa järjestyksessä. Hakasulut ([]) ovat
ryhmittelyä varten. Rinnakkainasettelu on vahvempi kuin kaksoispystyviiva ja
kaksoispystyviiva on vahvempi kuin pystyviiva. Näinollen "a b | c || d e" on
sama kuin "[ a b ] | [ c || [ d e ]]".
Jokaista tyyppiä, avainsanaa tai hakasulutettua ryhmää voi seurata jokin
seuraavista muuntelijoista:
- Asteriski (*) tarkoittaa, että edellä olevaa tyyppiä, sanaa tai ryhmää
toistetaan nolla tai useampia kertoja.
- Plusmerkki(+) tarkoittaa, että edellä olevaa tyyppiä, sanaa tai ryhmää
toistetaan kerran tai useammin.
- Kysymysmerkki (?) tarkoittaa, että edeltävä tyyppi, sana tai ryhmä on
valinnainen.
- Numeropari kaarisuluissa ({A,B}) tarkoittaa, että edeltävää tyyppiä,
sanaa tai ryhmää toistetaan vähintään A kertaa mutta enintään B kertaa.
Kirjasimen ominaisuuksien asettaminen on yksi tyyliohjeiden yleisimmistä
käyttötarkoituksista. Valitettavasti hyvinmääriteltyä ja yleisesti
hyväksyttyä nimeämiskäytäntöä kirjasimien luokitteluun ei ole, eivätkä yhden
kirjasintyypin termit välttämättä sovellu muille kirjasintyypeille. Esim
'italic' tarkoittaa usein kallistettua tekstiä, mutta muita tätä tarkoittavia
termejä voivat olla Oblique tai kursiivi. Näinollen ei ole
helppoa yhdistää tyypillisiä kirjasimen ominaisuuksia johonkin tiettyyn
kirjasimeen.
CSS1 määrittelee ominaisuudet 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-size'
ja 'font'.
Kirjasimen ominaisuuksien liittäminen kirjasimeen täytyy tehdä varovasti,
koska näille ei ole yleistä ja laajasti hyväksyttyä nimeämiskäytäntöä.
Ominaisuudet valitaan tarkasti määritellyn järjestyksen mukaan, jotta
tulokset eri käyttäjäagenteissa olisivat mahdollisimman samanlaiset
(Olettaen, että niillä on sama kirjasto kirjasimista käytettävissä).
- Käyttäjäagentti tekee (tai käyttää) tietokannan, jossa on tiedot
olennaisista CSS1:n ominaisuuksista kaikille käyttäjäagentin tuntemille
kirjasimille. Käyttäjäagentti saattaa olla tietoinen kirjasimesta, koska
se on asennettu paikallisesti tai se on etukäteen kopioitu webistä. Jos
kahdella kirjasimella on täsmälleen samat ominaisuudet, toinen niistä
unohdetaan.
- Annetulle elementille ja jokaiselle sen kirjaimelle käyttäjäagentti
kerää elementtiä koskevat kirjasimen ominaisuudet. Käyttäen koko
ominaisuusjoukkoa, käyttäjäagentti valitsee 'font-family'-ominaisuuden
perusteella kokeiltavan kirjaintyylin. Jäljellä olevia ominaisuuksia
kokeillaan kyseisessä kirjaintyylissä jokaisen ominaisuuden kohdalla
määriteltyjen kriteerien mukaisesti. Jos kaikki jäljellä olevat
ominaisuudet täsmäävät, kyseinen kirjasin on elementille sopiva.
- Jos kohdassa 2 käsitellyssä kirjaintyylissä ei ollut sopivia kirjasimia
ja on vielä vaihtoehtoisia kirjaintyylejä, kokeile seuraavaa niistä
kohdan 2 mukaisesti.
- Jos sopiva kirjasin löytyy, mutta siinä ei ole merkkiä tämänhetkiselle
kirjaimelle ja jos on seuraava vaihtoehtoinen kirjaintyyli, toista kohta
2 sillä tyylillä. Katso kuvaus kirjasimien ja merkkien koodauksesta liitteestä C.
- Jos kohdassa 2 valitussa kirjaintyylissä ei ole kirjasinta, toista
kohta 2 käyttäjäagentin oletuskirjaintyylillä ja käytä parasta
oletuskirjasinta.
(Ylläolevaa algoritmia voi optimoida, jottei CSS1:n ominaisuuksia tarvitse
tutkia erikseen jokaiselle kirjaimelle.)
Ominaisuuksien valintasäännöt kohdasta 2:
- 'font-style':ä kokeillaan ensin. 'italic':ia
vastaa käyttäjäagentin tietokannassa kirjasin, joka on joko 'italic'
(suositeltu) tai 'oblique'. Muiden arvojen täytyy täsmätä täsmäälleen tai
font-style ei täsmää.
- 'font-variant':ia kokeillaan seuraavaksi.
'normal' täsmää, jos kirjasin ei ole merkitty 'small-caps'; 'small-caps'
täsmää (1), jos kirjasin on merkitty 'small-caps', (2) kirjasin, jossa
kapiteelikirjaimet syntetisoidaan tai (3) tai jos kirjasimen kaikki
pienet kirjaimet on korvattu suurilla kirjaimilla. Kapiteelikirjasin
voidaan syntetisoida sähköisesti skaalaamalla normaalin kirjasimen isoja
kirjaimia.
- 'font-weight':ia kokeillaan seuraavaksi ja
se täsmää aina. (Katso 'font-weight' alta.)
- 'font-size':n täytyy täsmätä
käyttäjäagenttikohtaisten virherajojen sisään. (Typillisesti
skaalattavien kirjasinten koot pyöristetään lähimpään pikseliin, mutta
bittikarttakirjasinten virherajat saattavat olla jopa 20%.) Tulevat
laskut, esim. muiden elementtien em-arvoiset ominaisuudet, perustuvat
todellisuudessa käytettyyn kirjasinkokoon, ei siihen, joka on määritelty.
Arvo: [[<kirjainperhe> | <yleinen kirjainperhe>],]*
[<kirjainperhe> | <yleinen kirjainperhe>]
Oletus: käyttäjäagenttikohtainen
Koskee: kaikkia elementtejä
Periytyvä: kyllä
Prosentuaaliset arvot: ei
Arvo on kirjaintyylien ja yleisten tyylien lista tärkeysjärjestyksessä.
Toisin kuin CSS1:n arvoissa yleensä, pilkku erottelee vaihtoehtoisia
arvoja:
BODY { font-family: gill, helvetica, sans-serif }
Arvoja on kahdentyyppisiä:
- <kirjainperhe>
- Halutun kirjaintyylin nimi. Edellisessä esimerkissä "gill" ja
"helvetica" ovat tällaisia.
- <yleinen kirjainperhe>
- Edellisessä esimerkissä viimeinen arvo on yleinen kirjainperhe.
Seuraavat on määritelty:
- 'serif' (esim. Times)
- 'sans-serif' (esim. Helvetica)
- 'cursive' (esim. Zapf-Chancery)
- 'fantasy' (esim. Western)
- 'monospace' (esim. Courier)
Suositellaan, että tyyliohjeen tekijät tarjoavat yleisen
kirjainperheen viimeisenä vaihtoehtona.
Tyhjää sisältävät kirjasimien nimet tulee laittaa lainausmerkkeihin:
BODY { font-family: "new century schoolbook", serif }
<BODY STYLE="font-family: 'Minun oma kirjasin', fantasy">
Jos lainausmerkit jätetään pois, kaikki tyhjät merkit ennen ja jälkeen
kirjasimen nimeä poistetaan ja nimen sisällä oleva tyhjä typistetään yhdeksi
välilyönniksi.
Arvo: normal | italic | oblique
Oletus: normal
Koskee: kaikkia elementtejä
Periytyvä: kyllä
Prosentuaaliset arvot: ei
'font-style'-ominaisuus valitsee normaalin, kursivoidun tai oblique-muodon
kirjasinperheen sisällä.
Arvo 'normal' valitsee kirjasimen, joka on 'normal' käyttäjäagentin
tietokannassa, 'oblique' valitsee kirjasimen, joka on 'oblique' ja 'italic'
valitsee kirjasimen, joka on 'italic' tai sen puuttuessa 'oblique'.
Käyttäjäagentin tietokannan 'oblique' saattaa olla tehty sähköisesti
kallistamalla tavallista kirjasinta.
Kirjasimet, joiden nimessä on Oblique, Slanted tai Incline tyypillisesti
ovat käyttäjäagentin tietokannassa 'oblique'. Kirjasimet, joiden nimessä on
Italic, Cursive or Kursiv tyypillisesti ovat
käyttäjäagentin tietokannassa 'italic'.
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
Ylläolevassa esimerkissä korostettu teksti 'H1'-elementissä on
normaalia.
Arvo: normal | small-caps
Oletus: normal
Koskee: kaikkia elementtejä
Periytyvä: kyllä
Prosentuaaliset arvot: ei
Kapiteeli on toinen muuntuma kirjasinperheen sisällä.
Kapiteelikirjasimessa pienet kirjaimet näyttävät samanlaisilta kuin isot,
mutta ne ovat pienempiä ja hiukan erilaisia mittasuhteiltaan.
'font-variant'-ominaisuus valitsee tämän kirjasimen.
'normal'-arvo valitsee kirjasimen, joka ei ole kapiteelikirjasin ja
'small-caps' valitsee kapiteelikirjasimen. CSS1:ssä on hyväksyttävää (muttei
vaadittua), että kapiteeli tehdään normaalin kirjasimen isoja kirjaimia
skaalaamalla. Viimeisenä keinona isoja kirjaimia voi käyttää korvaamaan
kapitteelikirjasimen.
Seuraavassa esimerkissä 'H3'-elementti on kapiteelia ja korostetut sanat
kapiteelia ja obliqueta:
H3 { font-variant: small-caps }
EM { font-style: oblique }
Kirjasinperheessa voi olla myös muunlaisia kirjasimia, kuten
vanhanaikaisia numeroita, gemenanumeroita, kavennettuja kirjaimia tai
levennettyjä kirjaimia jne. CSS1:n ominaisuudet eivät voi valita niitä.
CSS1 ydin: Tämä ominaisuus muuttaa tekstin isoiksi kirjaimiksi,
samat huomiot kuin 'text-transform':iin sopivat
tähän.
Arvo: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 |
500 | 600 | 700 | 800 | 900
Oletus: normal
Koskee: kaikkia elementtejä
Periytyvä: kyllä
Prosentuaaliset arvot: ei
'font-weight'-ominaisuus valitsee kirjasimen lihavuuden. Arvot ovat
100-900 ja jokainen arvo on edeltäjäänsä lihavampi. 'normal' on sama kuin 400
ja 'bold' sama kuin '700'. Muut avainsanat sekoitettaisiin helposti
kirjasimen nimeen, joten 9-kohtaisesta listasta tehtiin numeerinen.
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
'bolder'- ja 'lighter'-arvot valitsevat lihavuuden suhteessa perittyyn
arvoon:
STRONG { font-weight: bolder }
Lapsielementit perivät tuloksena olevan arvon, ei avainsanaa.
Kirjasimilla (kirjasindatalla) on tyypillisesti yksi tai useampia
ominaisuuksia, joiden arvot ovat kirjasimen lihavuutta kuvaavia nimiä. Näillä
nimillä ei ole yhtenäistä, yleistä merkitystä. Ensisijaisesti ne erottavat
eri lihavuuksia yhden kirjasinperheen sisällä. Käyttö eri kirjasinperheissä
on varsin vaihtelevaa. Jos jokin kirjasin näyttää lihavalta, sen kuvaus
saattaa olla Regular, Roman, Book, Medium, Semi- tai DemiBold,
Bold, tai Black, riippuen kirjasinperheen normaalin kirjasimen
lihavuudesta. Koska standartisoitua nimistöä ei ole, CSS1:n numeerisella
asteikolla '400' (tai 'normal') vastaa kirjasinperheen normaalin kirjasimen
lihavuutta. Tämän kirjasimen lihavuus on yleensä Book, Regular, Roman,
Normal tai joskus Medium.
Numeeristen arvojen on tarkoitus ainoastaan säilyttää tummuusjärjestys
kirjasinperheen sisällä. Seuraava luettelo kertoo, kuinka numeroarvot
annetaan tyypillisissä tapauksissa:
- Jos kirjasinperhe jo käyttää yhdeksänportaista numeerista asteikkoa
(esim. OpenType), käytetään sitä.
- Jos perheessä on sekä Medium että joku seuraavista: Book,
Regular, Roman tai Normal, niin tällöin Medium on
normaalisti '500'.
- "Bold"-merkitty kirjasin on usein '700'.
- Jos perheessä on alle 9 lihavuutta, kolot täytetään seuraavan
algoritmin mukaisesti. Jos '500' ei ole, se on sama kuin '400'. Jos jokin
arvoista '600', '700', '800' tai '900' puuttuu, ne vastaavat seuraava
tummempaa olemassaolevaa tai vaaleampaa, jos tummempaa ei ole. Jos jokin
arvoista '300', '200' tai '100' puuttuu, ne vastaavat seuraava vaaleampaa
olemassaolevaa tai tummempaa, jos vaaleampaa ei ole.
Seuraavat kaksi esimerkkiä kuvaavat toimenpidettä. Perheessä "Example1" on
neljä lihavuutta, vaaleimmasta tummimpaan: Regular, Medium, Bold ja
Heavy. Perheessä "Example2" on kuusi lihavuutta: Book, Medium, Bold,
Heavy, Black ja ExtraBlack. Huomaa kuinka toisessa esimerkissä Example2
ExtraBlackia ei ole liitetty mihinkään.
Perheen lihavuudet | Kytkennät | Kolojen täyttö
----------------------+---------------+-------------------
"Example1 Regular" | 400 | 100, 200, 300
"Example1 Medium" | 500 |
"Example1 Bold" | 700 | 600
"Example1 Heavy" | 800 | 900
Perheen lihavuudet | Kytkennät | Kolojen täyttö
----------------------+---------------+-------------------
"Example2 Book" | 400 | 100, 200, 300
"Example2 Medium" | 500 |
"Example2 Bold" | 700 | 600
"Example2 Heavy" | 800 |
"Example2 Black" | 900 |
"Example2 ExtraBlack" | (ei mitään) |
Koska suhteelliset avainsanat 'bolder' ja 'lighter' tummentavat ja
vaalentavat perheen sisällä ja koska perheessä ei välttämättä ole kaikkia
symbolisia lihavuusarvoja vastaavia kirjasimia, 'bolder' tarkoittaa seuraavaa
saatavissa olevaa perheen tummempaa kirjasinta ja 'lighter' seuraavaa
vaaleampaa. Tarkalleenottaen näiden avainsanojen merkitys on seuraava:
- 'bolder' valitsee seuraavan kirjasimeen kytketyn lihavuusasteen, joka
on lihavampi kuin peritty arvo. Jos tällaista lihavuutta ei ole, se
valitsee seuraavan tummemman numeroarvon (ja kirjasin ei muutu), ellei
peritty arvo ole '900', jolloin myös valituksi tuleva arvo on '900'.
- 'lighter' on samanlainen, mutta toimii toisinpäin: valitsee seuraavan
kirjasimeen kytketyn lihavuusasteen, joka on vaaleampi kuin peritty arvo.
Jos tällaista ei ole, valitaan seuraava numeroarvo (eikä kirjasin muutu).
Ei ole takuita, että jokaiselle 'font-weight'-arvolle on lihavampi versio
kirjasimesta; esimerkiksi joillain kirjasimilla voi olla vain normaali ja
lihavoitu versio, kun taas toisilla voi olla kahdeksan lihavuusastetta. Ei
ole takuita siitä, miten käyttäjäagentti kytkee perheen eri lihavuudet
numeroarvoihin. Ainoa takuu on, että tiettyä arvoa vaaleammat arvot eivät
todellisuudessa ole tummempia.
Arvo: <absoluuttinen koko> | <suhteellinen koko> |
<pituus> | <prosenttiluku>
Oletus: medium
Koskee: kaikkia elementtejä
Periytyvä: kyllä
Prosentuaaliset arvot: suhteessa emon kirjasinkokoon
- <absoluuttinen koko>
- absoluuttisen koon avainsana on viittaus käyttäjäagentin laskemaan
taulukkoon kirjasinkoista. Mahdolliset arvot ovat: [ xx-small | x-small
| small | medium | large | x-large | xx-large ]. Tietokoneen ruudulla
suositeltu vierekkäisten kirjasinkokojen suhde on 1,5: Jos 'medium' on
10pt, niin 'large' voisi olla 15pt. Toisenlaisilla alustoilla saatetaan
tarvita toisenlaista suhdetta. Taulua luodessaan käyttäjäagentin
pitäisi ottaa huomioon myös kirjasinten saatavuus ja laatu. Taulu voi
olla kirjasinperhekohtainen.
- <suhteellinen koko>
- suhteellisen koon avainsanan tulkitaan olevan suhteessa
kirjasinkokotaulukkoon ja emoelementin kirjasinkokoon. Mahdolliset
arvot ovat: [ larger | smaller ]. Esimerkiksi, jos emoelementin
kirjasinkoko on 'medium', 'larger'-arvo asettaa nykyisen elementin
kirjasinkooksi 'large'. Jos emoelementin kirjasinkoko ei ole lähellä
taulukon alkiota, käyttäjäagentti saa vapaasti interpoloida taulukkoa
tai pyöristää lähimpään arvoon. Käyttäjäagentti voi joutua
ekstrapoloimaan taulukkoa, jos numeerinen arvo on avainsanojen
ulkopuolella.
Pituus- ja prosenttiarvoja käytettäessä ei pitäisi ottaa
kirjasinkokotaulukkoa huomioon, kun elementin kirjasinkokoa lasketaan.
Negatiiviset arvot on kielletty.
Kaikilla muilla elementeillä 'em'- ja 'ex'-arvot viittaavat nykyisen
elementin kirjasinkokoon. 'font-size'-ominaisuudessa ne viittaavat
emoelementin kirjasinkokoon.
Sovellus voi tulkita nimenomaisen koon uudestaan joissain tilanteissa.
Esim VR-ympäristössä kirjasin voi saada eri koon perspektiivin vuoksi.
Esimerkkejä:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
Jos suositeltua suhdetta 1,5 käytetään, kolme viimeistä ovat toisiaan
vastaavia.
Arvo: [ <font-style> || <font-variant> ||
<font-weight> ]? <font-size> [ / <line-height> ]?
<font-family>
Oletus:Ei määritelty pikakirjoiteominaisuuksille
Koskee: kaikkia elementtejä
Periytyvä: kyllä
Prosentuaaliset arvot: sallittu seuraavissa: <font-size> ja
<line-height>
'font'-ominaisuus on pikakirjoiteominaisuus seuraavien ominaisuuksien
asettamiseen yhdessä paikssa: 'font-style', 'font-variant', 'font-weight', 'font-size',
'line-height' ja 'font-family'. Ominaisuuden syntaksi perustuu
perinteiseen typograafiseen pikakirjoitteeseen, jossa asetetaan useita
kirjasimeen liittyviä ominaisuuksia.
Sallitut arvot ja oletusarvot löytyvät jo määritellyistä ominaisuuksista.
Arvot, joille ei anneta mitään arvoa, asetetaan oletusarvoihinsa.
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
Toisessa säännössä kirjasinkoon prosenttiarvo viittaa emoelementin
kirjasinkokoon. Kolmannen säännön rivinkorkeusprosentti viittaa elementin
omaan kirjasinkokoon.
Kolmessa ensimmäisessä 'font-style':ä, 'font-variant':ia ja
'font-weight':iä ei ole mainittu, joten ne asetetaan oletusarvoihinsa
('normal'). Neljäs sääntö asettaa 'font-weight':ksi 'bold', 'font-style':ksi
'italic' ja 'font-variant':ksi 'normal' (koska sitä ei mainittu, käytetään
oletusarvoa).
Viides sääntö asettaa seuraavasti: 'font-variant' ('small-caps'),
'font-size' (120% emon kirjasinkoosta), 'line-height' (120% omasta
kirjasinkoosta), 'font-family' ('fantasy'). Jäljelle jääneet 'font-style' ja
'font-weight' saavat arvon 'normal'.
Nämä elementit kuvaavat elementin väriä ja sen taustaa (ts. pintaa, jolle
sisältö piirretään). Ominaisuuksilla voidaan asettaa taustan väri tai
taustakuva. Kuvan sijainti, kuinka sitä toistetaan ja onko se paikallaan vai
liikkuuko esitysalueen mukana voidaan myös määrittää.
'color'-ominaisuus periytyy normalisti. Taustan ominaisuudet eivät
periydy, mutta emon tausta näkyy läpi, koska 'background-color':in oletusarvo
on 'transparent' (läpinäkyvä).
Arvo: <väri>
Oletus: käyttäjäagenttikohtainen
Koskee: kaikkia elementtejä
Periytyvä: kyllä
Prosentuaaliset arvot: ei
Tämä ominaisuus määrittää elementin tekstin värin. Punainen voidaan
määrittää usealla tavalla:
EM { color: red } /* englantia */
EM { color: rgb(255,0,0) } /* RGB alue 0-255 */
Katso mahdolliset arvot kappaleesta 6.3.
Arvo: <väri> | transparent
Oletus: transparent
Koskee: kaikkia elementtejä
Periytyvä: no
Prosentuaaliset arvot: ei
Tämä ominaisuus asettaa elementin taustan värin.
H1 { background-color: #F00 }
Arvo: <url> | none
Oletus: none
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: ei
Tämä ominaisuus asettaa elementin taustakuvan. Jos asetetaan taustakuva,
pitäisi määrittää myös taustaväri siltä varalta, että taustakuva ei ole
käytettävissä. Kun kuva on saatavilla, se sijoitetaan taustavärin päälle.
BODY { background-image: url(marble.gif) }
P { background-image: none }
Arvo: repeat | repeat-x | repeat-y | no-repeat
Oletus: repeat
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: ei
Jos taustakuva on määritelty, 'background-repeat' määrittää kuinka sitä
toistetaan.
'repeat' tarkoittaa, että kuvaa toistetaan sekä pysty- että
vaakasuunnassa. 'repeat-x' ('repeat-y') toistaa kuvaa vaakasuoraan
(pystysuoraan) luoden kuvanauhan puolelta toiselle. Jos arvo on 'no-repeat',
kuvaa ei toisteta.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
Ylläolevassa esimerkissä kuvaa toistetaan vain pystysuoraan.
Arvo: scroll | fixed
Oletus: scroll
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: ei
Jos taustakuva on määritelty, 'background-attachment' määrittää, onko se
paikallaan esitysalueen suhteen, vai liikkuuko se sisällön mukana.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
CSS1 ydin: Käyttäjäagentit voivat tulkita 'fixed':in
'scroll':ina. On kuitenkin suositeltavaa, että ne tulkitsevat arvon 'fixed'
oikein ainakin HTML- ja BODY-elementeille, koska asiakirjan tekijä ei voi
määrittää kuvaa vain 'fixed'-arvoa tukeville selaimille. (Katso kappale 7.)
Arvo: [<prosenttiluku> | <pituus>]{1,2} | [top |
center | bottom] || [left | center | right]
Oletus: 0% 0%
Koskee: lohkotason elementtejä ja korvautuvia elementtejä.
Periytyvä: ei
Prosentuaaliset arvot: viittavat elementin omaan kokoon
Jos taustakuva on määritelty, 'background-position' määrittää sen
alkusijainnin.
Arvopari '0% 0%' sijoittaa elementin vasemman yläkulman elementin sisällön
sisältävän laatikon (ts. ei sen, joka ympäröi täytettä, reunusta ja
marginaalia) vasempaan yläkulmaan. Arvopari '100% 100%' sijoittaa kuvan
oikean alakulman elementin oikeaan alakulmaan. Arvopari '14% 84%' sijoittaa
kuvan pisteen, jonka etäisyys kuvan vasemmasta reunasta on 14 % kuvan
leveydesta ja etäisyys kuvan yläreunasta on 84 % kuvan korkeudesta, elementin
kohtaan, jonka etäisyys elementin vasemmasta reunasta on 14 % elementin
leveydestä ja etäisyys yläreunasta on 84 % elementin korkeudesta.
Arvopari '2cm 2cm' sijoittaa kuvan vasemman yläkulman 2 cm elementin
vasemman yläkulman oikealle puolelle ja 2 cm sen alapuolelle.
Jos vain yksi prosenttiarvo on annettu, se tarkoittaa vaakasuuntaa ja
pystysuuntainen asema asetetaan tällöin 50 %:iin. Jos arvoja on annettu
kaksi, niistä ensimmäinen tarkoittaa vaakasuuntaa. Prosenttiarvon ja pituuden
yhdistelmät ovat sallittuja, esim. '50% 2cm'. Negatiiviset arvot ovat
sallittuja.
Taustakuvan sijainti voidaan määrittää myös avainsanojen avulla.
Avainsanoja ei voi yhdistää pituuksien eikä prosenttiarvojen kanssa.
Avainsanojen mahdolliset yhdistelmät ja näiden merkitykset ovat
seuraavanlaiset:
- 'top left' ja 'left top' tarkoittavat samaa kuin '0% 0%'.
- 'top', 'top center' ja 'center top' tarkoittavat samaa kuin '50%
0%'.
- 'right top' ja 'top right' tarkoittavat samaa kuin '100% 0%'.
- 'left', 'left center' ja 'center left' tarkoittavat samaa kuin '0%
50%'.
- 'center' ja 'center center' tarkoittavat samaa kuin '50% 50%'.
- 'right', 'right center' ja 'center right' tarkoittavat samaa kuin '100%
50%'.
- 'bottom left' ja 'left bottom' tarkoittavat samaa kuin '0% 100%'.
- 'bottom', 'bottom center' ja 'center bottom' tarkoittavat samaa kuin
'50% 100%'.
- 'bottom right' ja 'right bottom' tarkoittavat samaa kuin '100%
100%'.
Esimerkkejä:
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
Jos taustakuva on kiinteä esitysalueen suhteen (katso
'background-attachment' yltä), niin taustakuva sijoitetaan suhteessa
esitysalueeseen eikä elementtiin:
BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
Ylläolevassa esimerkissä kuva sijoitetaan esitysalueen vasempaan
alakulmaan.
Arvo: <background-color> || <background-image> ||
<background-repeat> || <background-attachment> ||
<background-position>
Oletus: ei määritelty pikakirjoitteille
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: vain <background-position>
'background'-ominaisuus on pikakirjoite taustan ominaisuuksien (ts.
'background-color', 'background-image', 'background-repeat',
'background-attachment' ja 'background-position') asettamiseen yhdessä
kohdassa.
'background'-ominaisuuden mahdolliset arvot ovat samat kuin yksittäisten
ominaisuuksien mahdolliset arvot.
BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }
'background'-ominaisuus asettaa aina kaikki taustan ominaisuudet.
Ylläolevan esimerkin ensimmäisessä säännössä vain 'background-color' on
annettu, joten muut asetetaan oletusarvoihinsa. Toisessa esimerkissä kaikki
ominaisuudet on annettu.
Arvo: normal | <pituus>
Oletus: normal
Koskee: kaikkia elementtejä
Periytyvä: kyllä
Prosentuaaliset arvot: ei
Pituus ilmoittaa lisäyksen sananvälin normaaliin pituuteen. Arvot voivat
olla negatiivisia, joskin toteutuskohtaisia rajoituksia saattaa esiintyä.
Käyttäjäagentti saa vapaasti valita algoritmin sananvälien luontiin. Myös
tasaus (eli 'text-align':n arvo) voi vaikuttaa sananväleihin.
H1 { word-spacing: 1em }
Tässä jokaista 'H1'-elementtien sananväliä kasvatetaan 1 em:n verran.
CSS1 ydin: käyttäjäagentit voivat tulkita kaikkien
'word-spacing':in arvojen tarkoittavan samaa kuin 'normal'. (Katso kappale 7.)
Arvo: normal | <pituus>
Oletus: normal
Koskee: kaikkia elementtejä
Periytyvä: kyllä
Prosentuaaliset arvot: ei
Pituus ilmoittaa lisäyksen normaaliin kirjainten väliin. Arvot voivat olla
negatiivisia, joskin toteutuskohtaisia rajoituksia saattaa esiintyä.
Käyttäjäagentti saa vapaasti valita algoritmin välistyksen luontiin. Myös
tasaus (eli 'text-align':n arvo) voi vaikuttaa välistykseen.
BLOCKQUOTE { letter-spacing: 0.1em }
Tässä kirjainten väli 'BLOCKQUOTE'-elementeissä kasvaa 0,1 em:n verran.
Jos arvo on 'normal', tasaus voi vaikuttaa välistykseen. Tätä ei tapahdu,
jos 'letter-spacing':ille on annettu jokin pituus:
BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }
Jos tuloksena saatava kirjainten väli ei ole sama kuin käyttäjäagentin
oletusväli, käyttäjäagentin ei pitäisi käyttää kaksoiskirjaimia.
CSS1 ydin: käyttäjäagentit voivat tulkita kaikkien
'letter-spacing':in arvojen tarkoittavan samaa kuin 'normal'. (Katso kappale 7.)
Arvo: none | [ underline || overline || line-through || blink
]
Oletus: none
Koskee: kaikkia elementtejä
Periytyvä: ei, mutta katso selvennykset alta
Prosentuaaliset arvot: ei
Tämä ominaisuus kuvaa elementin tekstiin lisättäviä koristeita. Jos
elementissä ei ole tekstiä (esi. 'IMG'-elementti HTML:ssä) tai se on tyhjä
elementti (esim. '<EM></EM>'), tällä ominaisuudella ei ole
vaikutusta. Arvo 'blink' saa tekstin välkkymään.
Koristeluun tarvittavat värit pitäisi johtaa 'color'-ominaisuuden
arvosta.
Tämä ominaisuus ei ole periytyvä, mutta elementtien pitäisi vastata
emoaan. Esim. jos elementti on alleviivattu, viivan pitäisi jatkua myös
lapsielementtien kohdalla. Alleviivauksen väri säilyy samana vaikka
jälkeläisillä olisi eri 'color'-arvo.
A:link, A:visited, A:active { text-decoration: underline }
Ylläoleva esimerkki alleviivaisi kaikkien linkkien tekstin (ts.
'A'-elementit, joilla on 'HREF'-määre).
Käyttäjäagenttien täytyy tunnistaa avainsana 'blink', mutta niiden ei
tarvitse tukea tätä tehostetta.
Arvo: baseline | sub | super | top | text-top | middle | bottom |
text-bottom | <prosenttiluku>
Oletus: baseline
Koskee: tekstielementit
Periytyvä: ei
Prosentuaaliset arvot: viittaa elementin 'line-height':n arvoon
Ominaisuus vaikuttaa elementin pystysuuntaiseen sijoitukseen. Yksi
avainsanajoukko on suhteellinen emoelementtiin nähden:
- 'baseline'
- Kohdistaa elementin peruslinjan (tai alareunan, jos elementillä ei
ole peruslinjaa) emon peruslinjan kanssa.
- 'middle'
- Kohdistaa elementin (yleensä kuvan) pystysuuntaisen keskitason emon
peruslinjan plus puolen x-korkeudesta kanssa.
- 'sub'
- Tekee elementistä alaindeksin.
- 'super'
- Tekee elementistä yläindeksin.
- 'text-top'
- Kohdistaa elementin yläreunan emon kirjasimen huipun kanssa.
- 'text-bottom'
- Kohdistaa elementin alareunan emon kirjasimen alareunan kanssa.
Toinen ominaisuusjoukko on suhteessa siihen muotoiltuun riviin, jonka osa
elementti on:
- 'top'
- Kohdistaa elementin yläreunan rivin korkeimman elementin kanssa.
- 'bottom'
- Kohdistaa elementin alareunan rivin alimman elementin kanssa.
'top' ja 'bottom' saattavat johtaa ratkaisemattomaan tilanteeseen, jossa
elementtien riippuvuudet muodostavat silmukan.
Prosentuaaliset arvot viittaavat elementin omaan
'line-height'-ominaisuuteen. Ne nostavat elementin peruslinjaa (tai
alareunaa, jos peruslinjaa ei ole) annetun määrän emon peruslinjan
yläpuolelle. Negatiiviset arvot ovat mahdollisia. Esim. arvo '-100%' laskee
elementin peruslinjaa sinne, missä seuraavan rivin peruslinjan olisi pitänyt
olla. Tämä mahdollistaa peruslinjattomien elementtien (kuten kirjaimia
esittävien kuvien) tarkan pystysuuntaisen sijoittelun.
On oletettavaa, että CSS:n tuleva versio sallii pituuden käyttämisen tämän
ominaisuuden arvona.
Arvo: capitalize | uppercase | lowercase | none
Oletus: none
Koskee: kaikkia elementtejä
Periytyvä: kyllä
Prosentuaaliset arvot: ei
- 'capitalize'
- jokaisen sanan ensimmäinen kirjain iso
- 'uppercase'
- elementin kaikki kirjaimet isoja
- 'lowercase'
- elementin kaikki kirjaimet pieniä
- 'none'
- poistaa perityn arvon vaikutuksen.
Varsinainen muunnos on kielestä riippuvainen. Katso viitteestä [4] tapoja määrittää elementin kieli.
H1 { text-transform: uppercase }
Esimerkki muuttaisi kaikki kirjaimet 'H1'-elementeissä isoiksi.
CSS1 ydin: käyttäjäagentin voivat unohtaa
'text-transform'-ominaisuuden (ts.käsitellä sitä niinkuin sen arvo olisi
'none') kirjaimille, joita ei löydy Latin-1 -merkistöstä ja senkielisille
elementeille, joiden isojen ja pienten kirjainten muuttaminen poikkeaa
Unicodessa [8] määritellyistä taulukoista.
Arvo: left | right | center | justify
Oletus: käyttäjäagenttikohtainen
Koskee: lohkotason elementtejä
Periytyvä: kyllä
Prosentuaaliset arvot: ei
Tämä elementti kuvaa kuinka teksti kohdistetaan elementin sisällä.
Varsinainen tasausalgoritmi on käyttäjäagentti- ja kielikohtainen.
Esimerkki:
DIV.keskitys { text-align: center }
Koska 'text-align' periytyy, kaikkien luokkaan 'keskitys' kuuluvien
'DIV'-elementtien sisällä olevat elementit keskitetään. Huomioi, että tekstin
kohdistaminen on riippuvainen elementin leveydestä eikä esitysalueen
leveydestä. Jos käyttäjäagentti ei tue 'justify'-ominaisuutta, se käyttää
korviketta. Länsimaisille kielille tämä on tyypillisesti 'left'.
CSS1 ydin: Käyttäjäagentit voivat korvata 'justify':n 'left':illä
tai 'right':illa elementin oletuskirjoitussuunnan mukaisesti.
Arvo: <pituus> | <prosenttiluku>
Oletus: 0
Koskee: lohkotason elementtejä
Periytyvä: kyllä
Prosentuaaliset arvot: viittaavat emoelementin leveyteen
Tämä ominaisuus määrittää ensimmäisen muotoillun rivin sisennyksen. Arvo
voivo olla negatiivinen, joskin toteutuskohtaisia rajoituksia saattaa
esiintyä. Sisennystä ei laiteta keskelle elementtiä, jonka toinen elementti
on jakanut (kuten 'BR' HTML:ssä).
Esimerkki:
P { text-indent: 3em }
Arvo: normal | <numero> | <pituus> |
<prosenttiluku>
Oletus: normal
Koskee: kaikkia elementtejä
Periytyvä: kyllä
Prosentuaaliset arvot: Viitta elementin omaan kirjasinkokoon
Tämä ominaisuus asettaa kahden vierekkäisen rivin peruslinjojen
etäisyyden.
Numeroarvo tarkoittaa, että rivinkorkeus on elementin kirjasinkoko
kerrottuna tällä luvulla. Tämä eroaa prosenttiarvosta periytymisen osalta:
lapsielementit perivät numeroarvon itsensä eikä tuloksena olevaa arvoa (joka
periytyy prosenttiarvon ja muiden yksiköiden
tapauksessa).
Negatiiviset arvot on kielletty.
Allaolevan esimerkin kolme sääntöä antavat kaikki saman rivinkorkeuden:
DIV { line-height: 1.2; font-size: 10pt } /* numero */
DIV { line-height: 1.2em; font-size: 10pt } /* pituus */
DIV { line-height: 120%; font-size: 10pt } /* prosentti */
Arvo 'normal' asettaa rivinkorkeuden elementin kirjasimelle kohtuulliseen
arvoon. Käyttäjäagenttien suositellaan käsittävän arvon 'normal' välillä 1,0
- 1,2 olevaksi luvuksi.
Katso kappaleesta 4.4 kuvaus 'line-height':in
vaikutuksesta lohkotason elementin muotoiluun.
Laatikon ominaisuudet asettavat elementtiä kuvaavan laatikon koon,
ympäryksen ja sijainnin. Katso käyttöesimerkkejä kohdasta muotoilumalli (kappale 4).
Marginaalin ominaisuudet asettavat
elementin marginaalin. 'margin'-ominaisuus asettaa kaikken neljän
kyljen marginaalin ja muut marginaalin ominaisuudet vain kyseisen kyljen
marginaalin.
Täytteen ominaisuudet määrittävät, kuinka paljon reunuksen ja sisällön
(esim. kuvan tai tekstin) väliin lisätään tyhjää. 'padding'-ominaisuus
asettaa kaikkien neljän sivun täytteen ja muut ominaisuudet vain kyseisen
sivun.
Reunuksen ominaisuudet asettavat elementin reunuksen. Jokaisella
elementillä on reunus jokaisella kyljellä, yhteensä neljä, jotka määritellään
leveyden, värin ja tyylin avulla.
'width'- ja 'height'-ominaisuudet asettavat laatikon koon, ja 'float'- ja
'clear'-ominaisuudet vaikuttavat elementtien sijaintiin.
Arvo: <pituus> | <prosenttiluku> | auto
Oletus: 0
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: viittavat
lähimpään lohkotason esi-isään
Tämä ominaisuus asettaa elementin ylämarginaalin:
H1 { margin-top: 2em }
Arvo voi olla negatiivinen, joskin toteutuskohtaisia rajoituksia saattaa
esiintyä.
Arvo: <pituus> | <prosenttiluku> | auto
Oletus: 0
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: viittavat
lähimpään lohkotason esi-isään
Tämä ominaisuus asettaa elementin oikeanpuolisen marginaalin:
H1 { margin-right: 12.3% }
Arvo voi olla negatiivinen, joskin toteutuskohtaisia rajoituksia saattaa
esiintyä.
Arvo: <pituus> | <prosenttiluku> | auto
Oletus: 0
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: viittavat lähimpään lohkotason esi-isään
Tämä ominaisuus asettaa elementin alamarginaalin:
H1 { margin-bottom: 3px }
Arvo voi olla negatiivinen, joskin toteutuskohtaisia rajoituksia saattaa
esiintyä.
Arvo: <pituus> | <prosenttiluku> | auto
Oletus: 0
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: viittavat lähimpään lohkotason esi-isään
Tämä ominaisuus asettaa elementin vasemmanpuolisen marginaalin:
H1 { margin-left: 2em }
Arvo voi olla negatiivinen, joskin toteutuskohtaisia rajoituksia saattaa
esiintyä.
Arvo: [ <pituus> | <prosenttiluku> | auto ]{1,4}
Oletus: ei määritelty pikakirjoitteille
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: viittavat
lähimpään lohkotason esi-isään
'margin'-ominaisuus on pikakirjoite seuraavien ominaisuuksien asettamiseen
yhdessä paikassa: 'margin-top', 'margin-right', 'margin-bottom' ja
'margin-left'.
Jos annetaan neljä pituutta, ne tarkoittavat yläpuolta, oikeaa puolta,
alapuolta ja vasenta puolta vastaavasti. Vain yksi arvo tarkoittaa kaikkia
kylkiä. Jos arvoja on kaksi tai kolme, puuttuvat arvot otetaan vastapäiseltä
puolelta.
BODY { margin: 2em } /* kaikki marginaalit 2em */
BODY { margin: 1em 2em } /* yläpuoli & alapuoli = 1em, vasen & oikea = 2em */
BODY { margin: 1em 2em 3em } /* yläpuoli=1em, oikea=2em, alapuoli=3em, vasen=2em */
Ylläolevan esimerkin viimeinen rivi vastaa allaolevaa:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* kopioitu vastapäiseltä puolelta(oikealta) */
}
Arvot voivat olla negatiivisia, joskin toteutuskohtaisia rajoituksia
saattaa esiintyä.
Arvo: <pituus> | <prosenttiluku>
Oletus: 0
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: viittavat
lähimpään lohkotason esi-isään
Tämä ominaisuus asettaa elementin yläpuolisen täytteen.
BLOCKQUOTE { padding-top: 0.3em }
Täytteen määrä ei voi olla negatiivinen.
Arvo: <pituus> | <prosenttiluku>
Oletus: 0
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: viittavat lähimpään lohkotason esi-isään
Tämä ominaisuus asettaa elementin oikeanpuolisen täytteen.
BLOCKQUOTE { padding-right: 10px }
Täytteen määrä ei voi olla negatiivinen.
Arvo: <pituus> | <prosenttiluku>
Oletus: 0
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: viittavat
lähimpään lohkotason esi-isään
Tämä ominaisuus asettaa elementin alapuolisen täytteen.
BLOCKQUOTE { padding-bottom: 2em }
Täytteen määrä ei voi olla negatiivinen.
Arvo: <pituus> | <prosenttiluku>
Oletus: 0
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: viittavat
lähimpään lohkotason esi-isään
Tämä ominaisuus asettaa elementin vasemmanpuolisen täytteen.
BLOCKQUOTE { padding-left: 20% }
Täytteen määrä ei voi olla negatiivinen.
Arvo: [ <pituus> | <prosenttiluku> ]{1,4}
Oletus: ei määritelty
pikakirjoitteille
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: viittavat
lähimpään lohkotason esi-isään
'padding'-ominaisuus on pikakirjoite seuraavien ominaisuuksien
asettamiseen samassa paikassa: 'padding-top', 'padding-right',
'padding-bottom' ja 'padding-left'.
Jos annetaan neljä arvoa, ne tarkoittavat yläpuolta, oikeaa puolta,
alapuolta ja vasenta puolta vastaavasti. Vain yksi arvo tarkoittaa kaikkia
kylkiä. Jos arvoja on kaksi tai kolme, puuttuvat arvot otetaan vastapäiseltä
puolelta.
Täytteen pinta asetetaan 'background'-ominaisuudella:
H1 {
background: white;
padding: 1em 2em;
}
Ylläoleva esimerkki asettaa 1 em:n täytteen pystysuuntaan ('padding-top'
ja 'padding-bottom') ja 2 em:n täytteen vaakasuuntaan('padding-right' ja
'padding-left'). 'em'-yksikkö viittaa elementin kirjasinkokoon: '1em' vastaa
käytettyä kirjasinkokoa.
Täytteen määrä ei voi olla negatiivinen.
Arvo: thin | medium | thick | <pituus>
Oletus: 'medium'
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: ei
Tämä ominaisuus asettaa elementin yläreunuksen leveyden. Leveyden
avainsanojen täsmällinen leveys on käyttäjäagenttikohtaista, mutta seuraava
pitää paikkansa: 'thin' <= 'medium' <= 'thick'.
Avainsanan tarkoittama leveys on sama koko asiakirjassa:
H1 { border: solid thick red }
P { border: solid thick blue }
Ylläolevassa esimerkissä 'H1'- ja 'P'-elementin reunukset ovat
samanlevyiset kirjasinkoosta riippumatta. Suhteellinen leveys saadaan
'em'-yksikön avulla:
H1 { border: solid 0.5em }
Reunuksen leveys ei saa olla negatiivinen.
Arvo: thin | medium | thick | <pituus>
Oletus: 'medium'
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: ei
Tämä ominaisuus asettaa elementin oikeanpuolisen reunuksen. Muutoin sama
kuin 'border-top-width'.
Arvo: thin | medium | thick | <pituus>
Oletus: 'medium'
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: ei
Tämä ominaisuus asettaa elementin alapuolisen reunuksen. Muutoin sama kuin
'border-top-width'.
Arvo: thin | medium | thick | <pituus>
Oletus: 'medium'
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: ei
Tämä ominaisuus asettaa elementin vasemmanpuolisen reunuksen. Muutoin sama
kuin 'border-top-width'.
Arvo: [thin | medium | thick | <pituus>]{1,4}
Oletus: ei määritelty pikakirjoitteille
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: N/A
Tämä ominaisuus on pikakirjoite seuraavien ominaisuuksien asettamiseen
samassa paikassa: 'border-width-top', 'border-width-right',
'border-width-bottom' ja 'border-width-left'.
Arvoja voi olla yhdestä neljään ja ne tulkitaan seuraavasti:
- yksi arvo: kaikki neljä reunusta saavat kyseisen arvon
- kaksi arvoa: ylä- ja alareukset ensimmäisen arvon mukaiset, vasen ja
oikea reunus toisen
- kolme arvoa: yläreunus on ensimmäinen arvo, vasen ja oikea reunus
toinen arvo ja kolmas on alareunus
- neljä arvoa: yläreunus, oikea reunus, vasen reunus ja alareunus
vastaavasti
Allaolevissa esimerkeissä kommentit kertovat yläreunuksen, oikean
reunuksen, vasemman reunuksen ja alareunuksen leveyden:
H1 { border-width: thin } /* thin thin thin thin */
H1 { border-width: thin thick } /* thin thick thin thick */
H1 { border-width: thin thick medium } /* thin thick medium thin */
H1 { border-width: thin thick medium thin } /* thin thick medium thin */
Reunuksen leveydet eivät voi olla negatiivisia.
Arvo: <väri>{1,4}
Oletus: 'color'-ominaisuuden arvo
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: ei
'border-color'-ominaisuus asettaa kaikkien neljän reunuksen värin.
'border-color':lla voi olla yhdestä neljään arvoa. Arvot vastaavat eri kylkiä
samoin kuin 'border-width' yllä.
Jos väriä ei ole annettu, käytetään elementin 'color'-ominaisuuden
arvoa:
P {
color: black;
background: white;
border: solid;
}
Ylläolevassa esimerkissä reunus on kiinteä musta viiva.
Arvo: none | dotted | dashed | solid | double | groove | ridge |
inset | outset
Oletus: none
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: ei
'border-style'-ominaisuus asettaa kaikkien neljän reunuksen tyylin. Sillä
voi olla yhdestä neljään arvoa. Arvot vastaavat eri kylkiä samoin kuin
'border-width' yllä.
#xy34 { border-style: solid dotted }
Ylläolevassa esimerkissä vaakasuunnan reunukset ovat 'solid' ja
pystysuunnan reunukset 'dotted'.
Koska alkuarvo on 'none', reunuksia ei näy ellei reunustyyliä ole
asetettu.
Reunustyylien merkitykset:
- none
- reunusta ei piirretä (riippumatta 'border-width':in arvosta)
- dotted
- reunus on pisteviiva taustakuvan päällä
- dashed
- reunus on katkoviiva taustakuvan päällä
- solid
- reunus on katkoton viiva
- double
- reunus on kaksinkertainen viiva taustakuvan päällä. Viivojen
leveyksien ja niiden välin summa on sama kuin <border-width>.
- groove
- 3D-ura, jonka väri on <väri>.
- ridge
- 3D-kohouma, jonka väri on <väri>.
- inset
- 3D-upotus, jonka väri on <väri>.
- outset
- 3D-koroke, jonka väri on <väri>.
CSS1 ydin: käyttäjäagentit voivat tulkita arvojen 'dotted',
'dashed', 'double', 'groove', 'ridge', 'inset' ja 'outset' tarkoittavan
katkotonta viivaa.
Arvo: <border-top-width> || <border-style> ||
<väri>
Oletus: ei määritelty pikakirjoitteille
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: ei
Tämä on pikakirjoite elementin yläreunuksen leveyden, tyylin ja värin
asettamiseksi.
H1 { border-bottom: thick solid red }
Ylläoleva sääntö asettaa H1-elementin yläreunuksen leveyden, tyylin ja
värin. Poisjätetyt arvot asetetaan oletuksiinsa:
H1 { border-bottom: thick solid }
Koska ylläolevasta esimerkistä on jätetty 'color' pois, on reunus
samanvärinen kuin itse elementtikin.
Huomaa, että tämä ominaisuus hyväksyy vain yhden tyyliarvon toisin kuin
'border-style'-ominaisuus, joka hyväksyy neljä arvoa.
Arvo: <border-right-width> || <border-style> ||
<väri>
Oletus: ei määritelty pikakirjoitteille
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: ei
Tämä on pikakirjoite elementin oikean reunuksen leveyden, tyylin ja värin
asettamiseen. Muutoin vastaava kuin 'border-top'.
Arvo: <border-bottom-width> || <border-style> ||
<väri>
Oletus: ei määritelty pikakirjoitteille
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: ei
Tämä on pikakirjoite elementin alareunuksen leveyden, tyylin ja värin
asettamiseen. Muutoin vastaava kuin 'border-top'.
Arvo: <border-left-width> || <border-style> ||
<väri>
Oletus: ei määritelty pikakirjoitteille
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: ei
Tämä on pikakirjoite elementin vasemman reunuksen leveyden, tyylin ja
värin asettamiseen. Muutoin vastaava kuin 'border-top'.
Arvo: <border-width> || <border-style> ||
<väri>
Oletus: ei määritelty pikakirjoitteille
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: ei
'border'-pikakirjoite asettaa elementin kaikkille neljälle reunukselle
saman leveyden, värin ja tyylin. Esimerkiksi allaolevassa ensimmäinen sääntö
tarkoittaa samaa kuin neljä jälkimmäistä:
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
Toisin kuin 'margin'- ja 'padding'-pikakirjoitteilla, 'border'illa ei voi
antaa eri arvoja eri reunuksille. Jos elementin eri reunuksille halutaan eri
arvoja, täytyy käyttää kyseisen reunuksen ominaisuuksia.
Koska ominaisuudet menevät osittain päällekkäin, vaikuttaa niiden
määrittelyjärjestys lopputulokseen. Esimerkiksi:
BLOCKQUOTE {
border-color: red;
border-left: double
color: black;
}
Ylläoleva määrittää vasemman reunuksen värin mustaksi ja muiden kolmen
punaiseksi. Tämä johtuu siitä, että 'border-left' asettaa sekä leveyden,
tyylin että värin. Koska tässä 'border-left'illä ei määritellä väriä, se
otetaan elementin 'color'-ominaisuudesta. 'color' olisi voitu asettaa myös
ennen 'border-left'iä, sillä ei ole merkitystä.
Huomioi, että tämä ominaisuus hyväksyy vain yhden pituusarvon, vaikka
'border-width' hyväksyy neljä.
Arvo: <pituus> | <prosenttiluku> | auto
Oletus: auto
Koskee: lohkotason ja korvautuvia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: suhteessa emoelemontin leveyteen
Tätä ominaisuus on hyödyllinen korvautuvien elementtien (kuten kuvien)
kanssa käytettynä, mutta sitä voi käyttää myös tekstiin. Kuvaa skaalataan
tarvittaessa. Skaalattaessa kuvan mittasuhteet säilyvät, jos 'height' on
'auto'-asennossa.
Esimerkki:
IMG.icon { width: 100px }
Jos sekä 'width'in että 'height'in arvo on 'auto', käytetään kuvan
ominaismittoja.
Arvot eivät voi olla negatiivisia.
Selostus tämän ominaisuuden, marginaalien ja täytteen suhteista löytyy kappaleesta 4 (muotoilumalli).
Arvo: <pituus> | auto
Oletus: auto
Koskee: lohkotason ja korvautuvia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: ei
Tätä ominaisuus on hyödyllinen korvautuvien elementtien (kuten kuvien)
kanssa käytettynä, mutta sitä voi käyttää myös tekstiin. Kuvaa skaalataan
tarvittaessa. Skaalattaessa kuvan mittasuhteet säilyvät, jos 'width' on
'auto'-asennossa'.
Esimerkki:
IMG.icon { height: 100px }
Jos sekä 'width'in että 'height'in arvo on 'auto', käytetään kuvan
ominaismittoja.
Jos tätä käytetään tekstiä sisältävään elementtiin, pyydetty korkeus
voidaan tehdä esimerkiksi vierityspalkilla.
Arvot eivät voi olla negatiivisia.
CSS1 ydin: Käyttäjäagentit voivat olla huomioimatta tätä
ominaisuutta (eli käsitellä sitä kuin sen arvo olisi 'auto'), jos kyseessä ei
ole korvautuva elementti.
Arvo: left | right | none
Oletus: none
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: ei
Jos arvo on 'none', elementti näytetään siinä kohdassa tekstiä, missä se
sattuu olemaan. Jos arvo on 'left'('right'), elementti siirretään vasemmalle
(oikealle) ja teksti rivitetään elementin oikealle(vasemmalle) puolelle. Jos
arvo on 'left' tai 'right', elementtiä käsitellään lohkotasoisena(eli
'display'-ominaisuutta ei huomioida). Katso täydellinen selitys kappaleesta 4.1.4.
IMG.ikoni {
float: left;
margin-left: 0;
}
Ylläoleva asettaa kaikki luokan 'ikoni' IMG-elementit emoelementin
vasempaan reunaan.
Tätä ominaisuutta käytetään yleensä kuviin, mutta se pätee myös tekstiä
sisältäviin elementteihin.
Arvo: none | left | right | both
Oletus: none
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: ei
Tämä määrittää, voiko elementin reunoilla olla kelluvia elementtejä.
Tarkemmin sanottuna ominaisuus listaa ne sivut, joilla kelluvia elementtejä
ei sallita. Jos arvoksi annetaan 'left', elementti siirretään kaikkien
vasemmalla puolella olevien kelluvien elementtien alapuolelle. Arvo 'none'
sallii kelluvat elementit kaikilla puolilla. Esimerkki:
H1 { clear: left }
Nämä ominaisuudet enemmänkin luokittelevat elementtejä kuin asettavat
tiettyjä näkyviä ominaisuuksia.
Listan tyylin ominaisuudet kuvaavat, kuinka listan alkiot (eli elementit,
joiden 'display'-ominaisuuden arvo on 'list-item') muotoillaan. Nämä
ominaisuudet voidaan asettaa mille tahansa elementille ja ne periytyvät
normaalisti. Ne kuitenkin vaikuttavat ainoastaan elementteihin, joiden
'display'-ominaisuuden arvo on 'list-item'. HTML:ssä tämä tyypillisesti
tarkoittaa 'LI'-elementtejä.
Arvo: block | inline | list-item | none
Oletus: block
Koskee: kaikkia elementtejä
Periytyvä: ei
Prosentuaaliset arvot: ei
Tämä määrittää esitetäänkö elementtiä piirtoalueella ja jos esitetään,
niin miten. (Piirtoalue voi olla paperinen tuloste, tietokoneen näyttö
jne.)
Jos elementin 'display'-arvo on 'block', se luo uuden laatikon, joka
sijoitetaan CSS:n muotoilumallin mukaisesti.
Tyypillisesti 'H1':n ja 'P':n kaltaiset elementit ovat tyyppiä 'block'.
'list-item' on muutoin kuin 'block', paitsi että siihen lisätään
listapallukka. HTML:ssä 'LI':llä on yleensä tämä arvo.
Arvo 'inline' luo uuden rivitasoisen laatikon samalle riville kuin
edeltävä sisältö. Laatikon koko valitaan laatikon sisällön mukaisesti. Jos
sisältö on tekstiä, se voi olla useita rivejä pitkä, joten jokaisella rivillä
on laatikko. Marginaalin, reunuksen ja täytteen ominaisuudet vaikuttavat
rivitasoisiin elementteihin, mutta ne eivät vaikuta rivinvaihtokohdissa.
Jos arvo on 'none', elementtiä, sen lapsielementtejä tai elementtiä
ympäröivää laatikkoa ei näytetä.
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
Viimeinen sääntö ottaa kuvien näyttämisen pois päältä.
'display'n alkuarvo on 'block', mutta käyttäjäagentit käyttävät yleensä
HTML-määrityksen suositusten mukaisia oletusarvoja kaikille HTML-elementeille
[2].
CSS1 ydin: Käyttäjäagentit voivat jättää tämän ominaisuuden
huomiotta ja käyttää pelkästään omia oletusarvojaan. (Katso kappale 7.)
Arvo: normal | pre | nowrap
Oletus: normal
Koskee: lohkotason elementtejä
Periytyvä: kyllä
Prosentuaaliset arvot: ei
Tämä määrittää kuinka tyhjää (sananvälejä, rivinvaihtoja yms.)
käsitellään. Vaihtoehdot ovat: 'normal' (tyhjä kutistetaan), 'pre' (kuin
HTML:n 'PRE'-elementti) tai 'nowrap' (rivinvaihdot osoitetaan ainoastaan
BR-elementeillä).
PRE { white-space: pre }
P { white-space: normal }
'white-space'n alkuarvo on 'normal', mutta käyttäjäagentit käyttävät
yleensä HTML-määrityksen suosittamia oletusarvoja [2].
CSS1 ydin: Käyttäjäagentit voivat jättää
'white-space'-ominaisuuden arvon sivun tekijän ja käyttäjän tyyliohjeissa
huomiotta ja sen sijaan käyttää omia oletusarvoja. (Katso kappale 7.)
Arvo: disc | circle | square | decimal | lower-roman |
upper-roman | lower-alpha | upper-alpha | none
Oletus: disc
Koskee: elementtejä, joiden 'display'n arvo on 'list-item'
Periytyvä: kyllä
Prosentuaaliset arvot: ei
Tämä ominaisuus määrittää listapallukan ulkonäön, jos 'list-style-image'
on 'none' tai jos sen osoittamaa kuvaa ei pystytä näyttämään.
OL { list-style-type: decimal } /* 1 2 3 4 5 jne. */
OL { list-style-type: lower-alpha } /* a b c d e jne. */
OL { list-style-type: lower-roman } /* i ii iii iv v jne. */
Arvo: <url> | none
Oletus: none
Koskee: elementtejä, joiden 'display'n arvo on 'list-item'
Periytyvä: kyllä
Prosentuaaliset arvot: ei
Ominaisuus määrittää listapallukkana käytetyn kuvan. Kun kuva on
saatavilla, se korvaa 'list-style-type'n määrittämän listapallukan.
UL { list-style-image: url(http://png.com/ellipse.png) }
Arvo: inside | outside
Oletus: outside
Koskee: elementtejä, joiden 'display'n arvo on 'list-item'
Periytyvä: kyllä
Prosentuaaliset arvot: N/A
Ominaisuus määrittää mihin listapallukka piirretään suhteessa lista-alkion
sisältöön. Katso esimerkki kappaleesta
4.1.3.
Arvo: [disc | circle | square |
decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] ||
[inside | outside] || [<url> | none]
Oletus: ei määritelty pikakirjoitteille
Koskee: elementtejä, joiden 'display'n arvo on 'list-item'
Periytyvä: kyllä
Prosentuaaliset arvot: ei
'list-style' on pikakirjoite 'list-style-type'n, 'list-style-image'n ja
'list-style-position'n asettamiseksi samalla kertaan.
UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }
'list-style'n määrittämisestä suoraan 'LI'-elementille saattaa seurata
yllättävä lopputulos. Esimerkki:
<STYLE TYPE="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
<BODY>
<OL CLASS=alpha>
<LI>taso 1
<UL>
<LI>taso 2
</UL>
</OL>
</BODY>
Koska ylläolevan esimerkin ensimmäisen säännön yksilöivyys on suurempi
kuin toisen (katso limittymisjärjestys), se
ohittaa toisen säännön kaikissa 'LI'-elementeissä. Näinollen listassa
käytetään vain tyyliä 'lower-alpha'. Tämän takia on suositeltavinta määrittää
'list-style' vain listatyyppisille elementeille:
OL.alpha { list-style: lower-alpha }
UL { list-style: disc }
Ylläolevassa 'list-style':n arvot periytyvät 'OL'- ja 'UL'-elementeiltä
'LI'-elementeille.
URL-arvoa voi käyttää minkä tahansa muun arvon kanssa:
UL { list-style: url(http://png.com/ellipse.png) disc }
Ylläolevassa esimerkissä listapallukkana on 'disc', jos kuvaa ei ole
saatavilla.
Pituusarvossa on mahdollisesti etumerkki (+ tai -, joista + on oletus),
jota seuraa välittömästi numero (desimaalipisteellä tai ilman), jota seuraa
välittämästi yksikön tunniste (kaksikirjaiminen lyhenne). Numeron 0 jälkeen
ei ole pakko tulla yksikön tunnistetta.
Jotkin ominaisuudet sallivat negatiiviset pituudet, mutta tämä saattaa
mutkistaa muotoilua ja jotkin toteutukset saattavat asettaa rajoituksia
tälle. Jos negatiivista arvoa ei tueta, se pitäisi leikata lähimpään tuettuun
arvoon.
Pituusyksiköitä on kahdenlaisia: suhteellisia ja absoluuttisia.
Suhteelliset yksiköt määrittävät koon suhteessa johonkin toiseen pituuteen.
Suhteellisia pituuksia käyttävät tyyliohjeet skaalautuvat helpommin
esitysalustalta toiselle (esim. tietokonenäytöltä lasertulostimelle). Prosentuaalisilla yksiköillä (kuvattu alla) ja
avainsanayksiköillä (esim. 'x-large') on samanlaisia etuja.
Tuetut suhteelliset yksiköt:
H1 { margin: 0.5em } /* em, elementin fontin korkeus */
H1 { margin: 1ex } /* x-korkeus, ~ kirjaimen x korkeus */
P { font-size: 12px } /* pikseliä, suhteessa piirtoalueeseen */
Suhteelliset yksiköt em ja ex viittaavat elementin fonttikokoon. Ainoa
poikkeus tähän sääntöön CSS1:ssä on 'font-size'-ominaisuus, jossa em ja ex
viittaavat emoelementtiin.
Pikseliyksiköt, kuten viimeisessä säännössä, ovat suhteessa piirtoalueen
eli useimmiten tietokoneen näytön resoluutioon. Jos näyttölaitteen
pikselitiheys poikkeaa merkittävästi tavallisesta tietokonenäytöstä,
käyttäjäagentin pitäisi skaalata pikseliarvoja. Ehdotettu
normaalipikseli on 90 dpi laitteen pikselin näkökulma käden
etäisyydellä. Jos käden pituus on 70 cm, on kulma noin 0,0227 astetta.
Lapsielementit perivät lasketun arvon, eivät suhteellista arvoa:
BODY {
font-size: 12pt;
text-indent: 3em; /* eli 36pt */
}
H1 { font-size: 15pt }
Ylläolevassa esimerkissä 'H1'-elementtien 'text-intend':in arvo on 36 pt
eikä 45 pt.
Absoluuttiset pituusmitat ovat käyttökelpoisia vain, kun näyttölaitteen
fyysiset ominaisuudet tunnetaan. Tuetut absoluuttiset yksiköt:
H1 { margin: 0.5in } /* tuumaa, 1in = 2.54cm */
H2 { line-height: 3cm } /* senttimetriä */
H3 { word-spacing: 4mm } /* millimetriä */
H4 { font-size: 12pt } /* pistettä, 1pt = 1/72 tuumaa */
H4 { font-size: 1pc } /* picaa, 1pc = 12pt */
Jos käyttäjäagentti ei pysty näyttämään määritettyä pituutta, sen tulisi
käyttää likiarvoa. Tätä likiarvoa pitäisi käyttää kaikkien CSS1:n
ominaisuuksien periytymisessä ja muissa laskuissa.
Prosentuaaliset yksiköt muodostuvat valinnaisesta merkistä(+ tai -, + on
oletus) ja sitä välittömästi seuraavasta numerosta (desimaalipisteen kanssa
tai ilman) ja sitä välittömästi seuraavasta prosenttimerkistä %.
Prosentuaaliset arvot tarkoittavat aina suhdetta toiseen arvoon,
esimerkiksi toiseen pituuteen. Jos ominaisuus hyväksyy prosentuaaliset arvot,
se myös kertoo mihin arvo viittaa. Yleensä prosentuaaliset arvot viittaavat
elementin fonttikokoon:
P { line-height: 120% } /* 120% elementin 'font-size':stä */
Kaikissa CSS1:n periytyvissä ominaisuuksissa lapsielementin perivät
tuloksena olevan arvon, eivät itse prosenttiarvoa.
Väri on joko avainsana tai numeerinen RGB-arvo.
Ehdotetut värien nimet ovat: aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, white ja yellow. Nämä
16 väriä on otettu Windowsin VGA-paletista, eikä niiden RGB-arvoja määritellä
CSS1:n määrityksessä.
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
Numeerisissa väriarvoissa käytetään RGB-mallia. Nämä kaikki tarkoittavat
samaa väriä:
EM { color: #f00 } /* #rgb */
EM { color: #ff0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* kokonaislukualue 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* liukulukualue 0.0% - 100.0% */
RGB-arvossa on ensin #-merkki ja sen jälkeen kolme tai kuusi
heksadesimaalimerkkiä. Kolmimerkkinen RGB-arvo (#rgb) muutetaan
kuusimerkkiseksi (#rrggbb) toistamalla numerot, ei lisäämällä nollia.
Esimerkiksi #fb0 on sama kuin #ffbb00. Tästä seuraa, että valkoinen (#ffffff)
voidaan määritellä lyhyellä merkintätavalla (#fff), eikä näin ole
riippuvainen näytön värisyvyydestä.
Funktiomaisessa merkintätavassa RGB arvo merkitään seuraavasti: ensin
'rgb(', sitten pilkulla erotettu kolmen luvun lista( joko kolme kokonaislukua
väliltä 0-255 tai kolme prosenttiarvoa väliltä 0.0% - 100.0%) ja lopuksi ')'.
Numerojen ympärillä voi olla tyhjää.
Lukualueen ylittävät arvot pakotetaan lukualueelle. Seuraavat kolme
sääntöä tarkoittavat tämän vuoksi samaa asiaa :
EM { color: rgb(255,0,0) } /* kokonaislukualue 0 - 255 */
EM { color: rgb(300,0,0) } /* leikattu 255:een */
EM { color: rgb(110%, 0%, 0%) } /* leikattu 100 prosenttiin */
RGB on määritelty sRGB-väriavaruudessa [9].
Käyttäjäagentit voivat toistaa värejä erilaisilla tarkkuuksilla, mutta
sRGB-värien avulla voidaan esittää yksikäsitteisesti, mitattavasti ja
kansainvälisten standardien mukaisesti, mikä värin pitäisi olla. [10].
Käyttäjäagenteille vähimmäisvaatimuksena riittää, että ne tekevät väreille
gammakorjauksen. sRGB määrittelee näytölle gamma-arvoksi 2,2 tietyissa
katseluolosuhteissa. Käyttäjäagenttien pitäisi säätää CSS:ssä annettuja
värejä niin, että yhdessä näyttölaitteen luonnollisen gamman kanssa värien
gamma-arvoksi tulee 2,2. Lisätietoja on liitteessä
D. Huomioi, että tämä vaikuttaa vain CSS:ssä määriteltyihin väreihin eli
kuvien oletetaan sisältävän omat väritietonsa.
Uniform Resource Locator (URL) merkitään funktiomaisella merkinnällä:
BODY { background: url(http://www.bg.com/pinkish.gif) }
URL-arvo alkaa 'url(', sitten tulee mahdollisesti tyhjää ja tämän jälkeen
ehkä ' tai ". Siten tulee itse URL (määritelty viitteessä [11]) ja sen jälkeen mahdollisesti ' tai " ja ehkä tyhjää
ja lopuksi ')'. URL:ään kuulumattomia lainausmerkkejä tulee olla
tasapainoisesti molemmilla puolin URLia.
URL:sä olevat lainausmerkit, pilkut, tyhjät, yksinkertaiset lainausmerkit
(') ja kaksinkertaiset lainausmerkit (") täytyy suojata kenoviivalla:
'\(','\)','\,'.
Suhteelliset URL:t tulkitaan suhteessa tyyliohjeeseen, ei suhteessa
asiakirjaan:
BODY { background: url(yellow) }
CSS1:tä käyttävä käyttäjäagentti täyttää CSS1-määrityksen vaatimukset, jos
se:
- yrittää noutaa kaikki pyydetyt tyyliohjeet ja tulkitsee ne tämän
määritelmän mukaisesti
- lajittelee kaikki lauselmat limittymisjärjestyksen mukaisesti
- toteuttaa CSS1:n esitysalustan rajoitukset huomioiden (katso selitys
alta).
CSS1-tyyliohjeita tekevä käyttäjäagentti täyttää CSS1-määrityksen, jos
se:
- tulostaa oikeanmuotoisia CSS1-tyyliohjeita
Käyttäjäagentti, joka käyttää CSS1:tä asiakirjojen esittämiseen ja luo
CSS1-tyyliohjeita, on yhteensopiva, jos se täyttää kaikki ylläolevat
ehdot.
Käyttäjäagentin ei tarvitse toteuttaa kaikkia CSS1:n ominaisuuksia.
Yhteensopivuuteen riittää, että käyttäjäagentti toteuttaa CSS1:
ydinominaisuudet. Ydinominaisuuksiin kuuluvat kaikki muut osat, paitsi ne
jotka on nimenomaisesti poissuljettu. Tekstissä tälläisten asioiden
selostukset on merkitty tekstillä "CSS1 ydin:". Ydinominaisuuksiin
kuulumattomat ominaisuudet ovat CSS:n kehittyneitä ominaisuuksia.
Tämä osio määrittää vain CSS1-yhteensopivuuden ehdot. Tulevaisuuden
CSS-versioiden vaatimukset saattavat poiketa CSS1:stä.
Esimerkkejä esitysalustan rajoituksista: rajalliset resurssit (fontit,
värit) tai rajallinen resoluutio (marginaalit saattavat olla epätarkkoja).
Näissä tapauksissa käyttäjäagentin pitäisi käyttää likimäärin oikeita arvoja.
Myös erilaiset käyttöliittymät saattava asettaa rajoituksia: 3D-selain
saattaa muuttaa asiakirjan kokoa etäisyyden perusteella.
Käyttäjäagentit voivat tarjota käyttäjille lisävaihtoehtoja. Esimerkiksi
heikkonäköisiä varten voi käyttäjäagentissa olla mahdollisuus kytkeä välkkyvä
teksti pois päältä.
Huomioi, että CSS1 ei määrittele kaikkia asiakirjan muotoilun
yksityiskohtia. Käyttäjäagentit voivat esimerkiksi vapaasti valita kirjainten
välin antavan algoritmin.
Tämä määritys myös suosittaa, muttei vaadi, että:
- lukija voi määritellä henkilökohtaisia tyyliohjeita
- yksittäisiä tyyliohjeita voi kytkeä päälle ja pois
Ylläolevat yhteensopivuusehdot kuvaavat ainoastaan toiminnallisuutta,
eivät käyttöliittymää.
Tämä määritelmä määrittää CSS:n tason 1. Tulevaisuudessa kehitetään
todennäköisesti korkeampia CSS:n tasoja. Jotta pelkästään CSS1:tä tukevat
selaimet pystyisivät lukemaan korkeampien tasojen tyyliohjeita, on
välttämätöntä määritellä, miten käyttäjäagentit käsittelevät CSS1:n mukaan
virheellisiä rakenteita.
- Jos lauselmassa on tuntematon ominaisuus, se unohdetaan. Jos
esimerkiksi tyyliohjeessa lukee
H1 { color: red; rotation: 70deg }
käyttäjäagentti käsittelee sitä niinkuin siinä olisi lukenut
H1 { color: red; }
- Jos lausemalla on laiton arvo tai osittain laiton arvo,
lauselma unohdetaan kokonaan:
IMG { float: left } /* CSS1 */
IMG { float: left top } /* "top" ei ole 'float':in arvo */
IMG { background: "red" } /* CSS1:ssä avaisanat eivät voi olla lainausmerkeissä */
IMG { border-width: 3 } /* pituusyksiköillä täytyy ilmoittaa mittayksikkö */
Ylläolevassa CSS1-tulkki tottelee ensimmäistä sääntöä ja unohtaa
loput, aivan kuin tyylisivussa olisi lukenut:
IMG { float: left }
IMG { }
IMG { }
IMG { }
Jonkin tulevan CSS-version mukainen käyttäjäagentti saattaisi hyväksyä
muutkin säännöt.
- virheellinen at-avainsana ja kaikki sitä seuraava unohdetaan seuraavan
puolipisteeseen (;) tai aaltosulkupariin ({...}) asti, kumpi tuleekaan
ensin. Jos esimerkiksi tyyliohjeessa lukee:
@three-dee {
@background-lighting {
azimuth: 30deg;
elevation: 190deg;
}
H1 { color: red }
}
H1 {color: blue}
'@three-dee' on laiton CSS1:ssä. Sen takia koko at-sääntö (kolmanteen
oikeanpuoliseen aaltosulkuun asti) jätetään huomiotta.
CSS1-käyttäjäagentti ohittaa sen, mikä typistää tyyliohjeen muotoon:
H1 {color: blue}
Tarkemmin:
Kaikkien CSS-versioiden mukainen tyyliohje on lista käskyjä.
Käskyjä on kahdenlaisia: at-sääntöjä ja sääntöjoukkoja.
Käskyjen ympärillä voi olla tyhjää (sananvälejä, sarkainmerkkejä ja
rivinvaihtoja).
CSS-tyyliohjeet on usein upotettu HTML-asiakirjoihin. Jotta CSS-ohjeet
eivät tulisi näkyviin vanhemmilla käyttäjäagenteilla, on kätevää voida
laittaa tyyliohje HTML-kommentin sisään. HTML-kommenttimerkit "<!--" ja
"-->" voivat esiintyä ennen käskyjä, käskyjen jälkeen tai käskyjen
välissä. Niiden ympärillä voi olla tyhjää.
At-säännöt alkavat at-avainsanalla, joka on @-merkillä alkava tunniste
(esimerkiksi: '@import', '@page'). Tunniste koostuu kirjaimista, numeroista,
ajatusviivoista ja suojatuista merkeistä(määritelty alla).
At-sääntö koostuu kaikesta seuraavaan puolipisteeseen (;) asti tai
seuraavasta lohkosta, kumpi tuleekaan ensin. Jos CSS1-käyttäjäagentti huomaa
jonkin muun at-säännön kuin '@import', se hylkää koko at-säännön ja jatkaa
lukemista sen jälkeen. Se hylkää myös @import-säännön, ellei se ole
tyylisivun alussa(eli jos sitä ennen on kelvollinen tai kelvoton sääntö).
Esimerkki:
CSS1-tulkki kohtaa seuraavan tyylisivun:
@import "subs.css";
H1 { color: blue }
@import "list.css";
Toinen '@import' on laiton CSS1:ssä. CSS1-tulkki ohittaa koko at-säännön,
joten jäljelle jäävät vain seuraavat osat:
@import "subs.css";
H1 {color: blue}
Lohko alkaa vasemmanpuoleisella aaltosululla ({) ja päättyy
vastaavaan oikeanpuoliseen (}). Välissä voi olla mitä tahansa merkkejä,
paitsi että sulut (()),({}),([]) ovat aina pareittain ja niitä voi olla
sisäkkäin. Yksin- (') ja kaksinkertaiset (") lainausmerkit ovat myös aina
pareittain ja niiden välillä olevat merkit tulkitaan merkkijonona(katso
määritelmä liitteestä B). Allaolevassa esimerkissä
lohkossa lainusmerkeissä oleva } ei sulje lohkoa, eikä toinen yksinkertainen
lainausmerkki sulje merkkijonoa, koska se on suojattu:
{ causta: "}" + ({7} * '\'') }
Sääntöjoukko koostuu valitsinmerkkijonosta ja lauselmalohkosta.
Valitsinmerkkijono sisältää kaiken ensimmäiseen vasempaan aaltosulkuun ({)
asti, muttei itse sulkumerkkiä. Jos sääntöjoukko alkaa kelvottomalla
valitsimella, se ohitetaan.
Oletetaan, että CSS1-tulkki kohtaa tämän tyylisivun:
H1 { color: blue }
P[align], UL { color: red; font-size: large }
P EM { font-weight: bold }
Toisella rivillä on CSS1:n mukaan laiton valitsin. CSS1-käyttäjäagentti
ohittaa sääntöjoukon, joten jäljelle jää:
H1 { color: blue }
P EM { font-weight: bold }
Lauselmalohko alkaa vasemmanpuoleisella aaltosululla ({) ja päättyy
oikeanpuoleiseen (}). Näiden välissä on nolla tai useampia puolipisteellä (;)
erotettuja lauselmia.
Lauselma koostuu ominaisuudesta, kaksoispisteestä ja
arvosta. ominaisuus on tunniste (määritelty aikaisemmin). Arvossa
voi olla mitä tahansa merkkejä, mutta sulkujen (()),({}),([]) ja
lainausmerkkien ('), (") on esiinnyttävä pareittain. Sulut voivat olla
sisäkkäisiä. Lainausmerkkien sisällä sisältöä käsitellään merkkijonona.
Jotta uusia ominaisuuksia ja uusia arvoja vanhoille ominaisuuksille
voitaisiin lisätä tulevaisuudessa, tulee käyttäjäagentin ohittaa lauselma,
jossa on kelvoton ominaisuuden nimi tai arvo. Jokaisella CSS1:n
ominaisuudella on omat kieliopilliset ja merkitykselliset rajoitukset
arvoilleen.
Jos esimerkiksi CSS1-tulkki kohtaa tällaisen tyyliohjeen:
H1 { color: red; font-style: 12pt }
P { color: blue; font-vendor: any; font-variant: small-caps }
EM EM { font-style: normal }
Ensimmäisellä rivillä toisessa lauselmassa on kelvoton arvo '12pt'. Toisen
rivin toisessa lauselmassa on määrittelemätön ominaisuus 'font-vendor'.
CSS1-tulkki ohittaa nämä, jolloin jäljelle jää:
H1 { color: red; }
P { color: blue; font-variant: small-caps }
EM EM { font-style: normal }
Kommentit (katso kappale 1.7) voivat olla siellä
missä tyhjäkin, ja niitä pidetään tyhjänä. CSS1 määrittää enemmänkin
paikkoja, missä voi olla tyhjää (kuten arvojen sisällä) ja myös näissä
paikoissa voi olla kommentteja.
Seuraavat säännöt pitävät aina paikkansa:
- Kaikki CSS-tyylisivut ovat riippumattomia kirjaimen koosta (iso vai
pieni), paitsi CSS:n ulkopuolelle viittaavissa kohdissa. Eli CSS1:ssä
kirjasinperheiden nimet ja URL-osoitteet saattavat riippua kirjainkoosta.
Sen lisäksi CLASS- ja ID-määreiden riippuvuus kirjainkoosta on HTML:n
päätettävissä [2].
- CSS1:ssä valitsimet (elementtien nimet, valitsimet ja ID:t) koostuvat
merkeistä A-Z, 0-9, Unicode-merkeistä 161-255 ja ajatusviivoista (-). Ne
voivat sisältää myäs suojattuja merkkejä ja Unicode-merkkejä numeerisena
koodina (katso seuraava kohta).
- Kenoviiva ja sitä seuraavat korkeintaan neljä heksadesimaalimerkkiä
(0-9A-F) tarkoittavat sennumeroista Unicode-merkkiä.
- Mikä tahansa merkki (paitsi heksadesimaalimerkit) menettää
erikoismerkityksensä, jos sen eteen laitetaan kenoviiva. Esimerkiksi "\""
tarkoittaa merkkijonoa, jossa on yksi lainausmerkki.
- Kaksi edeltävää kohtaa määrittävät kenoviivasuojauksen.
Kenoviivasuojaukset ovat aina osa tunnistetta, paitsi merkkijonoissa (eli
"\7B" ei ole aaltosulku vaikka "}" on ja "\32" on sallittu luokan nimessä
vaikkei "2" ole).
Huomioi: HTML:n CLASS-määre sallii muitakin merkkejä kuin luokan nimessä
kuin ylläoleva sallii valitsimille. CSS1:ssä nämä merkit on suojattava tai
kirjoitettava Unicode-numeroina: "B&W?" voidaan kirjoittaa joko
"B\&W\?" tai "B\26W\3F", "κουρος"
(kreikkaa: "kouros") täytyy kirjoittaa "\3BA\3BF\3C5\3C1\3BF\3C2".
Todennäköisesti CSS:n tulevissa versioissa useampia merkkejä voidaan
kirjoittaa suoraan.
Liitteessä B on CSS1:n kielioppi.
[1] W3C resource page on web style sheets
(http://www.w3.org/Style)
[2] "HTML
4.0 Specification", D. Raggett, A. Le Hors, I. Jacobs, December 1997.
Saatavissa http://www.w3.org/TR/REC-html40/.
[3] T Berners-Lee, D Connolly: "Hypertext Markup
Language - 2.0", RFC
1866, MIT/W3C, marraskuu 1995. Määritys on saatavilla myös hypertekstinä
(http://www.w3.org/MarkUp/html-spec/html-spec_toc.html)
[4] F Yergeau, G Nicol, G Adams, M Dürst: "Internationalization of the
Hypertext Markup Language" (ftp://ds.internic.net/rfc/rfc2070.txt).
[5] ISO
8879:1986. Information Processing - Text and Office Systems - Standard
Generalized Markup Language (SGML)
[6] ISO/IEC 10179:1996 Information
technology -- Processing languages -- Document Style Semantics and
Specification Language (DSSSL).
[7] ISO/IEC 9899:1990 Programming
languages -- C.
[8] The Unicode Consortium, "The Unicode Standard --
Worldwide Character Encoding -- Version 1.0", Addison-Wesley, Volume 1, 1991,
Volume 2, 1992.
[9] "A
Standard Default color Space for the Internet", version 1.10, M. Stokes,
M. Anderson, S. Chandrasekar, and R. Motta, 5. marraskuuta 1996.
[10] CIE Publication 15.2-1986, "Colorimetry,
Second Edition", ISBN 3-900-734-00-3
(http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html)
[11] T Berners-Lee, L Masinter, M McCahill: "Uniform
Resource Locators (URL)", RFC
1738, CERN, Xerox Corporation, University of Minnesota, December 1994
[12] "PNG (Portable Network
Graphics) Specification, Version 1.0 specification"
(http://www.w3.org/TR/REC-png-multi.html)
[13] Charles A. Poynton: "Gamma
correction on the Macintosh Platform"
(ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf)
[14] International Color Consortium: "ICC Profile Format
Specification, version 3.2", 1995
(ftp://sgigate.sgi.com/pub/icc/ICC32.pdf)
[15] S C Johnson: "YACC - Yet another compiler
compiler", Technical Report, Murray Hill, 1975
[16] "Flex: The Lexical Scanner Generator", Version
2.3.7, ISBN 1882114213
HTML:n lyhyen olemassaolon aikana on tehty useita tyyliohje-ehdotuksia, joille tämä ehdotus
on kiitollisuudenvelassa. Erityisesti Robert Raischin, Joe Englishin ja Pei
Wein ehdotukset ovat vaikuttaneet tähän suositukseen.
Useat ihmiset avat osallistuneet CSS1:n kehittämiseen. Haluaisimme
erityisesti kiittää seuraavia: Terry Allen, Murray Altheim, Glenn Adams,
Walter Bender, Tim Berners-Lee, Yves Bertot, Scott Bigham, Steve Byrne,
Robert Cailliau, James Clark, Daniel Connolly, Donna Converse, Adam Costello,
Todd Fahrner, Todd Freter, Roy Fielding, Neil Galarneau, Wayne Gramlich,
Phill Hallam-Baker, Philipp Hoschka, Kevin Hughes, Scott Isaacs, Tony Jebson,
William Johnston, Gilles Kahn, Philippe Kaplan, Phil Karlton, Evan
Kirshenbaum, Yves Lafon, Murray Maloney, Lou Montulli, Colas Nahaboo, Henrik
Frystyk Nielsen, David Perrell, William Perry, Scott Preece, Paul Prescod,
Liam Quin, Vincent Quint, Jenny Raggett, Thomas Reardon, Cécile Roisin,
Michael Seaton, David Seibert, David Siegel, David Singer, Benjamin Sittler,
Jon Smirl, Charles Peyton Taylor, Irčne Vatton, Daniel Veillard, Mandira
Virmani, Greg Watkins, Mike Wexler, Lydja Williams, Brian Wilson, Chris
Wilson, Lauren Wood ja Stephen Zilles.
Kolme ihmistä kaipaavat erityismaininnan: Dave Raggett (rohkaisustaan ja
työstään HTML3:n eteen), Chris Lilley (jatkuvasta yhteistyöstä erityisesti
värien ja fonttien suhteen) ja Steven Pemberton (hallinnollisista ja luovista
kyvyistään).
(Tämä liite on informatiivinen, ei sitova)
Allaoleva tyyliohje on kirjoitettu HTML 2.0-määrityksen [3] ehdotuksien mukaisesti. Jotkin tyylit, kuten värit, on
lisätty täydellisyyden vuoksi. Käyttäjäagenttien suositellaan käyttävän
tämänkaltaista tyyliohjetta oletusarvona.
BODY {
margin: 1em;
font-family: serif;
line-height: 1.1;
background: white;
color: black;
}
H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV,
DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, FORM, DL {
display: block }
B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP,
IMG, SPAN { display: inline }
LI { display: list-item }
H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }
H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }
B, STRONG { font-weight: bolder } /* suhteessa emoon */
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
PRE { white-space: pre }
ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }
UL, DIR { list-style: disc }
OL { list-style: decimal }
MENU { margin: 0 } /* tiukka muotoilu */
LI { margin-left: 3em }
DT { margin-bottom: 0 }
DD { margin-top: 0; margin-left: 3em }
HR { border-top: solid } /* 'border-bottom':ia olisi voinut myös käyttää */
A:link { color: blue } /* vierailematon linkki */
A:visited { color: red } /* vierailtu linkki */
A:active { color: lime } /* aktiivinen linkki */
/* linkkireunuksen asettaminen IMG-elementtien ympärille
vaatii kontekstuaalisia valitsimia */
A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }
(Tämä liite on sitova)
CSS:n vähimmäiskielioppi (eli kaikkien CSS-versioiden peruskielioppi),
jota kaikkien toteutusten on tuettava, määritellään kappaleessa 7. Allaoleva kielioppi määrittää
paljon pienemmän kielen eli CSS1:n syntaksin.
Se on kuitenkin tietyssä mielessä vielä CSS1:n ylijoukko. CSS1:ssä on
semanttisia rajoituksia, joita ei ole esitetty tässä kieliopissa.
Yhteensopivan käyttäjäagentin täytyy myös huomioida eteenpäinyhteensopivan
tulkinnan säännöt (kappale 7.1), ominaisuuden ja arvon merkintatapa (kappale
5) ja yksikköjen merkintätapa (kappale 6). Tämän lisäksi HTML asettaa
rajoituksia, esimerkiksi CLASS-määreen mahdollisille arvoille.
Kielioppi alla on LL(1) (mutta huomioi, että useimpien käyttäjäagenttien
ei pidä käyttää sitä suoraan, koska se ei esitä tulkintakäytöntöjä, vaan
ainoastaan CSS1:n syntaksin). Kielioppi on muotoiltu ihmisen helposti
luettavaksi, joten siinä käytetään joitain lyhennyksiä yaccin [15] lisäksi:
* : 0 tai enemmän
+ : 1 tai enemmän
? : 0 tai 1
| : erottaa vaihtoehtoja
[] : ryhmittelyä
Kielioppi on:
stylesheet
: [CDO|CDC]* [ import [CDO|CDC]* ]* [ ruleset [CDO|CDC]* ]*
;
import
: IMPORT_SYM [STRING|URL] ';' /* Esim. @import url(fun.css); */
;
unary_operator
: '-' | '+'
;
operator
: '/' | ',' | /* empty */
;
property
: IDENT
;
ruleset
: selector [ ',' selector ]*
'{' declaration [ ';' declaration ]* '}'
;
selector
: simple_selector+ [ pseudo_element | solitary_pseudo_element ]?
| solitary_pseudo_element
;
/* "id" on ID, jonka vasemmalle puolelle on lisätty
** elementtityyppi. esim: P#p007
** "solitary_id" on ID, johon elementtityyppiä ei ole lisätty,
** esim: #p007
** Vastaavasti luokille ja näennäisluokille.
*/
simple_selector
: element_name id? class? pseudo_class? /* esim: H1.subject */
| solitary_id class? pseudo_class? /* esim: #xyz33 */
| solitary_class pseudo_class? /* esim: .author */
| solitary_pseudo_class /* esim: :link */
;
element_name
: IDENT
;
pseudo_class /* niinkuin tässä: A:link */
: LINK_PSCLASS_AFTER_IDENT
| VISITED_PSCLASS_AFTER_IDENT
| ACTIVE_PSCLASS_AFTER_IDENT
;
solitary_pseudo_class /* niinkuin tässä: :link */
: LINK_PSCLASS
| VISITED_PSCLASS
| ACTIVE_PSCLASS
;
class /* niinkuin tässä: P.note */
: CLASS_AFTER_IDENT
;
solitary_class /* niinkuin tässä: .note */
: CLASS
;
pseudo_element /* niinkuin tässä: P:first-line */
: FIRST_LETTER_AFTER_IDENT
| FIRST_LINE_AFTER_IDENT
;
solitary_pseudo_element /* niinkuin tässä: :first-line */
: FIRST_LETTER
| FIRST_LINE
;
/* id:llä ja solitary_id:llä on rajoitus, että
** #-merkin jälkeisen osan tulee olla kelvollinen HTML ID-arvo;
** esim., "#x77" kelpaa, mutta "#77" ei.
*/
id
: HASH_AFTER_IDENT
;
solitary_id
: HASH
;
declaration
: property ':' expr prio?
| /* empty */ /* Ehkäisee syntaksivirheitä... */
;
prio
: IMPORTANT_SYM /* !important */
;
expr
: term [ operator term ]*
;
term
: unary_operator?
[ NUMBER | STRING | PERCENTAGE | LENGTH | EMS | EXS
| IDENT | hexcolor | URL | RGB ]
;
/* Värillä on rajoitus, että sen täytyy olla joko
** 3 tai 6 heksanumeroa (eli [0-9a-fA-F])
** #-merkin jälkeen "#"; esim. "#000" kelpaa, mutta "#abcd" ei.
*/
hexcolor
: HASH | HASH_AFTER_IDENT
;
Seuraava etsii sanat. se on kirjoitettu flex-kielellä [16]. Tässä oletetaan flexin 8-bittinen toteutus. Tämä ei
välitä kirjainkoon eroista (flexin komentorivimääre -i).
unicode \\[0-9a-f]{1,4}
latin1 [”-’]
escape {unicode}|\\[ -~”-’]
stringchar {escape}|{latin1}|[ !#$%&(-~]
nmstrt [a-z]|{latin1}|{escape}
nmchar [-a-z0-9]|{latin1}|{escape}
ident {nmstrt}{nmchar}*
name {nmchar}+
d [0-9]
notnm [^-a-z0-9\\]|{latin1}
w [ \t\n]*
num {d}+|{d}*\.{d}+
string \"({stringchar}|\')*\"|\'({stringchar}|\")*\'
%x COMMENT
%s AFTER_IDENT
%%
"/*" {BEGIN(COMMENT);}
<COMMENT>"*/" {BEGIN(0);}
<COMMENT>\n {/* ignore */}
<COMMENT>. {/* ignore */}
@import {BEGIN(0); return IMPORT_SYM;}
"!"{w}important {BEGIN(0); return IMPORTANT_SYM;}
{ident} {BEGIN(AFTER_IDENT); return IDENT;}
{string} {BEGIN(0); return STRING;}
{num} {BEGIN(0); return NUMBER;}
{num}"%" {BEGIN(0); return PERCENTAGE;}
{num}pt/{notnm} {BEGIN(0); return LENGTH;}
{num}mm/{notnm} {BEGIN(0); return LENGTH;}
{num}cm/{notnm} {BEGIN(0); return LENGTH;}
{num}pc/{notnm} {BEGIN(0); return LENGTH;}
{num}in/{notnm} {BEGIN(0); return LENGTH;}
{num}px/{notnm} {BEGIN(0); return LENGTH;}
{num}em/{notnm} {BEGIN(0); return EMS;}
{num}ex/{notnm} {BEGIN(0); return EXS;}
<AFTER_IDENT>":"link {return LINK_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"visited {return VISITED_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"active {return ACTIVE_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"first-line {return FIRST_LINE_AFTER_IDENT;}
<AFTER_IDENT>":"first-letter {return FIRST_LETTER_AFTER_IDENT;}
<AFTER_IDENT>"#"{name} {return HASH_AFTER_IDENT;}
<AFTER_IDENT>"."{name} {return CLASS_AFTER_IDENT;}
":"link {BEGIN(AFTER_IDENT); return LINK_PSCLASS;}
":"visited {BEGIN(AFTER_IDENT); return VISITED_PSCLASS;}
":"active {BEGIN(AFTER_IDENT); return ACTIVE_PSCLASS;}
":"first-line {BEGIN(AFTER_IDENT); return FIRST_LINE;}
":"first-letter {BEGIN(AFTER_IDENT); return FIRST_LETTER;}
"#"{name} {BEGIN(AFTER_IDENT); return HASH;}
"."{name} {BEGIN(AFTER_IDENT); return CLASS;}
url\({w}{string}{w}\) |
url\({w}([^ \n\'\")]|\\\ |\\\'|\\\"|\\\))+{w}\) {BEGIN(0); return URL;}
rgb\({w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}\) {BEGIN(0); return RGB;}
[-/+{};,#:] {BEGIN(0); return *yytext;}
[ \t]+ {BEGIN(0); /* ignore whitespace */}
\n {BEGIN(0); /* ignore whitespace */}
\<\!\-\- {BEGIN(0); return CDO;}
\-\-\> {BEGIN(0); return CDC;}
. {fprintf(stderr, "%d: Illegal character (%d)\n",
lineno, *yytext);}
(Tämä liite on informatiivinen, ei sitova)
HTML-asiakirjoissa voidaan käyttää kaikki noin 30 000 Unicodessa
määritettyä merkkiä. Usein asiakirjat käyttävät vain muutamaa sataa. Myöskin
useissa fonteissa on vain muutamia satoja kirjainmerkkejä. Tämä liite
täydentää kappaleen 5.2 kuvausta siitä, kuinka
asiakirjan merkit ja fontin kirjasimet yhdistetään.
HTML-asiakirja koostuu kirjaimista ja merkkauskielestä. Jotta se
voitaisiin siirtää lankoja pitkin, muutetaan se jollain koodauksella
jonoksi tavuja. HTML-asiakirja täytyy dekoodata, jotta saadaan selville mitä
kirjaimia tarkoitettiin. Esimerkiksi Länsi-Euroopassa on tavattu käyttää
tavua 224 merkitsemään graviaksentillista a:ta (ą), mutta hepreassa sitä
käytetään merkitsemään Alef-merkkiä. Japanissa tämän tavun merkitys yleensä
riippuu sitä edeltävästä tavusta. Joissain koodauksissa yksi kirjain
koodataan yhtenä tai useampana tavuna.
Käyttäjäagentti saa käytetyn koodauksen selville tutkimalla HTTP-otsakkeen
'charset'-parametriä. Tyypillisiä koodauksia (charsetin arvoja) ovat ASCII
(englanti), ISO-8859-1 (Länsi-Eurooppa), ISO-8859-8 (heprea) ja Shift-JIS
(japani).
HTML [2][4] tukee noin 30 000
Unicodessa määriteltyä kirjainta. Harvassa asiakirjassa on näin monta eri
kirjainta, joten sopivalla koodauksella asikirja yleensä pärjää yhdellä
tavulla kirjainta kohti. Harvoin tarvittaviin merkkeihin käytetyn koodauksen
ulkopoulelta voidaan silti viitata numeerisillä kirjainviitteillä: Π
tarkoittaa koodauksesta riippumatta kreikkalaista isoa pii-kirjainta. Tämä
tarkoittaa myös sitä, että käyttäjäagenttien on varauduttava mihin tahansa
Unicode merkkiin, vaikka ne tukisivatkin vain muutamaa koodausta.
Fontti ei sisällä kirjaimia, vaan se sisältää kuvia kirjaimista.
Nämä kuvat ovat joko vektorikuvia tai bittikarttoja, ja ne muodostavat
kirjaimen jonkin tietynmuotoisen esitysasun. Jokaiseen fonttiin liittyy
fontin koodaustaulu, joka kertoo mikä kuva esittää mitäkin merkkiä. Type
1-fonteissa tätä kutsutaan koodausvektoriksi.
Itse asiassa fontissa on usein monta kuvaa samasta kirjaimesta. Käytettävä
kuva määräytyy kielen sääntöjen tai suunnittelijan mielipiteiden mukaan.
Esimerkiksi arabiassa kaikilla kirjaimilla on neljä muotoa. Käytettävä
muoto määräytyy sijainnilla sanassa: yksi muoto sanan alussa, toinen
keskellä, kolmas lopussa ja neljäs yksinäiselle kirjaimelle. Se on sama
kirjain kaikissa tapauksissa, joten sillä on vain yksi merkki
HTML-asiakirjassa, mutta esitettäessä se näyttää erilaiselta eri
paikoissa.
On olemassa myös fontteja, joissa on useita muotoja valittavissa.
Valitettavasti CSS1 ei vielä mahdollista näiden valitsemista. Nykyään
tällaisista fonteista valitaan aina oletusmuoto.
Koska joskus yksi fontti ei riitä esittämään kaikkia asiakirjan tai edes
yhden elementin merkkejä, CSS1:ssä voi käyttää fonttien joukkoja.
CSS:n fonttijoukko on lista samantyylisistä ja -kokoisista fonteista,
joita tutkitään järjestyksessä etsittäessä tietyn merkin kuvaa. Esimerkiksi
normaalia tekstiä ja matemaattisia merkkejä sisältävä elementti saattaa
tarvita kahta fonttia, joista toisessa on tavalliset kirjaimet ja toisessa
matemaattiset merkit. Katso lisätietoja merkkien valinnasta fonttijoukoista
kappaleesta 5.2.
Alla on esimerkki fonttijoukosta, joka pystyisi esittämään latinalaisia,
japanilaisia ja matemaattisia kirjoitusmerkkejä:
BODY { font-family: Baskerville, Mincho, Symbol, serif }
Jos merkki löytyy Baskervillesta (vain latinalaisia merkkejä), se otetaan
sieltä. Japanilaiset merkit otetaan Minchosta ja matemaattiset merkit
Symbolista. Kaikki loput merkit löytyvät (toivottavasti) yleisestä
fonttiperheestä serif. Fonttiperhettä serif käytetään myös jos jokin
edellämainituista fonteista ei ole saatavilla.
(Tämä liite on informatiivinen, ei sitova)
Lue Gamma Tutorial
PNG-määrityksestä [12] jos et tiedä, mitä gamma
tarkoittaa.
Jos käyttäjäagentti käyttää katodisädeputkinäyttöä, voi se olettaa
näyttölaitteen täydelliseksi ja unohtaa sekoitussävytyksen vaikutukset
gammaan. Tämä tarkoittaa, että käyttäjäagenttien tarvitsee tehdä vain nämä
vähäiset korjaukset:
- PC ja MS-Windows
- ei mitään
- Unix ja X11
- ei mitään
- Mac ja QuickDraw
- käytä gammaa 1.39 [13] (ColorSync-savvy-ohjelmat
voivat antaa sRGB ICC-profiilin [14] ColorSyncille
värikorjausta varten)
- SGI ja X
- käytä gamma-arvoa /etc/config/system.glGammaVal (oletus on
1.7. Irix 6.2:ssa tai uudemmissa ohjelma voi antaa sRGB ICC-profiilin
värinhallintajärjestelmälle)
- NeXT ja NeXTStep
- käytä gammaa 2.22
Gamman käyttäminen tarkoittaa, että sekä R, G että B täytyy muuttaa:
R'=Rgamma, G'=Ggamma, B'=Bgamma ennenkuin ne annetaan
käyttöjärjestelmälle.
Tämä voidaan tehdä nopeasti tekemällä 256-elementtinen taulukko kerran per
selaimen esiintymä:
for i := 0 to 255 do
raw := i / 255;
corr := pow (raw, gamma);
table[i] := trunc (0.5 + corr * 255.0)
end
näin päästään tekemästä monimutkaisia laskutoimituksia jokaisen pikselin
kohdalla.
(Tämä liite on informatiivinen, ei sitova)
CSS1:n tekemisen tavoitteena on ollut luoda yksinkertainen
tyyliohjemekanismi HTML-asiakirjoille. Tämä määritys on kompromissi käytännön
toteuttamiseen tarvittavan yksinkertaisuuden ja sivujen tekijöiden haluaman
tarkan ulkoasun hallinnan välillä. CSS1 tarjoaa:
CSS1 ei tarjoa:
- pikselitason ohjausta: CSS1 arvostaa yksinkertaisuutta enemmän kuin
yksityiskohtaisuutta ja vaikka taustakuvien ja HTML:n yhdistelmä on
voimakas, pikselitason hallinta ei ole mahdollista.
- tekijän valtaa: sivun tekijä ei voi pakottaa käyttämään tiettyä
tyyliohjetta, ainoastaan ehdottaa
- taittokieltä: CSS1:ssä ei ole palstoja, päällekkäisiä ruutuja yms.
- monimutkaista kyselykieltä jäsennyspuuhun: CSS1 voi käyttää vain
esivanhempia jäsennyspuussa, toisin kuin muissa tyyliohjeissa (esim.
DSSSL [6]), joissa on täydellinen kyselykieli.
Me oletamme näkevämme CSS:n laajenevan useisiin suuntiin:
- paperi: parempi tuki HTML-asiakirjojen tulostamiselle
- tuki epävisuaalisille medioille: tällä hetkellä kehitetään
ominaisuuksia ja niiden arvoja puheelle ja pistekirjoituslaitteille
- värien nimet: nyt tuettua listaa voidaan laajentaa
- fontit: tarkempien fonttienmääritysjärjestelmien oletetaan täydentävän
CSS1:n fonttiominaisuuksia.
- arvot, ominaisuudet: oletamme ohjelmistovalmistajien ehdottavan
laajennuksia CSS1:n ominaisuuksiin ja arvoihin. Määritystä on helppo
laajentaa tähän suuntaan, mutta käyttäjäagenttien keskinäinen
yhteensopivuus on ongelma
- taittokieli: tuki kaksiulotteiselle taitolle
työpöytäjulkaisuohjelmistojen tyyliin.
- muut DTD:t: CSS1:ssä on joitain läheisesti HTML:ään liittyviä osia
(kuten 'CLASS'- ja 'ID'-määritysten erikoisasema), mutta sitä pitäisi
voida helposti laajentaa muihin asiakirjatyypin määrityksiinkin.
Emme oleta CSS1:n kehittyvän:
(Tämä liite on informatiivinen, ei sitova)
Tämä asiakirja on 17. joulukuuta 1996 julkaistun CSS1-suosituksen
tarkistettu versio. Allaolevassa listassa on lueteltu kaikki muutokset.
Haluaisimme kiittää seuraavia henkilöitä heidän avustansa tämän
tarkistetun version valmistelussa: Komachi Yushi, Steve Byrne, Liam Quinn,
Kazuteru Okahashi, Susan Lesch ja Tantek Ēelik.
Huomautus: Korjaukset viittaavat alkuperäisiin englanninkielisiin
versioihin, eikä niitä ole tässä käännetty.
Spelling and typographic mistakes
- typo1 [section 1.1] The sentence:
As as result, old UAs will ignore the 'STYLE' element, but its content
will be treated as part of the document body, and rendered as
such.
has been changed to:
As a result, old UAs will ignore the 'STYLE' element, but its content
will be treated as part of the document body, and rendered as
such.
- typo2 [section 1.6] The sentence:
The second selector matches matches all 'H1' elements that have an
ancestor of class 'reddish'.
has been changed to:
The second selector matches all 'H1' elements that have an ancestor of
class 'reddish'.
- typo3 [section 2.1] The sentence:
E.g., a style sheet can legally specify that the 'font-size' of an
'active' link should be larger that a 'visited' link, but the UA is not
required to dynamically reformat the document when the reader selects
the 'visited' link.
has been changed to:
E.g., a style sheet can legally specify that the 'font-size' of an
'active' link should be larger than a 'visited' link, but the UA is not
required to dynamically reformat the document when the reader selects
the 'visited' link.
- typo4, typo5 [section
2.3-2.4] A trailing quote mark has been added to 'vertical-align'.
- typo6 [section 4] A missing right parenthesis has
been added.
- typo7 [section 4.1] A missing comma has been
added.
- typo8 [section 4.1.2] The text:
"If more than one of the three is 'auto', and one of them is 'width',
than the others..."
has been changed to:
"If more than one of the three is 'auto', and one of them is 'width',
then the others..."
- typo9 [section 5.3.6] The word "Examples" has been
capitalized.
- typo10 [section 5.4.4] An entity gone astray has
been corrected (from "<length&t;" to "<length>").
- typo11 [section 5.5] The text:
The margin properties properties set the margin of an
element.
has been changed to:
The margin properties set the margin of an element.
- typo12 [section 5.5.25] Superfluous quote marks
have been removed.
Errors
Structure and Organization
- Appendix F, which lists all changes since the 17 December 1996 version
has been added.
- A paragraph in the status section has been added to inform readers that
this is a revised version.
- The style sheet has changed.
- The reference to a future HTML specification with support for style
sheets has been updated to reference HTML 4.0.
- URLs in the References have been updated, and dead links have been
removed.
- The underlying HTML markup has been revised.
