Seuraavissa luvuissa käydään läpi W3C:n CSS1-suosituksen mukaisia tyylien ominaisuuksia, kuten kirjasimen ja tekstin ominaisuuksia. Lisäksi luvussa tarkastellaan värien ja taustavärien määrittämistä elementeille sekä erilaisten rajojen, täytteiden ja marginaalien määrittämistä elementeille.
Seuraavissa luvuissa käytetään erilaisten ominaisuuksien määrittämisessä syntaksia, jonka merkinnät ovat hieman sekavia, joten merkinnät käydään seuraavassa tarkoin läpi.
Pienempi kuin ja suurempi kuin -merkin väliin
kirjoitettavalla tekstillä tarkoitetaan arvon tyyppiä.
Arvon tyyppi kertoo minkä tyyppisiä arvoja voidaan
kyseiseen kenttään laittaa. Tavallisimmin
käytettyjä arvoja ovat <pituus>, jolla
tarkoitetaan jotakin pituusmittaa sekä
<prosentti>, jolla tarkoitetaan prosentuaalista
arvoa.
Ominaisuus: <arvon_tyyppi>;
Ilman suurempi kuin ja pienempi kuin -merkkejä määritellään ominaisuuden arvo. Tällöin kyseinen arvo voidaan antaa ominaisuudelle sellaisenaan.
Ominaisuus: arvo;
Arvojen välissä oleva pystyviiva ( | ) ilmaiseen, että arvot ovat vaihtoehtoiset. Ominaisuudelle voidaan siis antaa joko arvo1 tai arvo2, mutta ei kumpaakin.
Ominaisuus: arvo1 | arvo2;
Arvojen välissä olevat kaksi pystyviivaa ( | | ) ilmaisevat, että arvot ovat vaihtoehtoiset, mutta voivat esiintyä kumpikin. Ominaisuudelle voidaan siis antaa joko arvo1 tai arvo2 tai molemmat.
Ominaisuus: arvo1 || arvo2;
Hakasulkeita ( [ ] ) käytetään arvojen ryhmittelyyn.
Ominaisuus: [arvo1 || arvo2] <arvon_tyyppi>;
Kaarisulkeissa olevat luvut ilmaisevat kuinka monta kertaa arvo voidaan toistaa. Luku A ilmoittaa toistojen minimin ja luku B ilmoittaa toistojen maksimin.
Ominaisuus: arvo {A,B};
Tähtimerkki (*) kertoo, että edeltävää määrittelyä voidaan toistaa nollasta useampaan kertaan.
Ominaisuus: [<arvon_tyyppi>]*;
Plusmerkki (+) kertoo, että edeltävää määrittelyä voidaan toistaa yhdestä tai useampaan kertaan.
Ominaisuus: [<arvon_tyyppi>]+;
Kysymysmerkki ( ? ) kertoo, että edeltävä arvo tai ryhmä on valinnainen.
Ominaisuus: [<arvon_tyyppi>]?;
Kauttaviiva ( / ) kertoo, että kaksi arvoa annetaan
toisistaan kauttaviivalla erotettuina.
Ominaisuus: <arvon_tyyppi>[/<arvon_tyyppi>]?;
Seuraavissa luvuissa käydään läpi erilaisia
kirjasimen ominaisuuksia. Kirjasimen ulkonäköön
voidaan vaikuttaa ominaisuuksien font-family, font-style,
font-variant, font-weight, font-size ja font
avulla.
font-family-ominaisuudella voidaan vaikuttaa
pelkästään kirjasimen ulkoasuun. Ominaisuuden avulla
voidaan määritellä kirjasintyyppi, jolla elementin
sisällä oleva teksti näytetään.
font-family-ominaisuudelle annetaan ensin kirjoittajan
ehdottamat kirjasintyypit. Selain näyttää elementin
sisällön ensimmäisen kirjasintyypin mukaan, jonka se
tunnistaa annetusta kirjasintyyppilistasta. Kirjasintyyppejä
voidaan antaa useampiakin pilkulla toisistaan erotettuna. Jos
selain ei tunnista yhtään määritellyistä
kirjasintyypeistä, niin sille voidaan kertoa yleinen
kirjasinperhe, jonka mukaan selain valitsee
käytettävän kirjasimen.
font-family: [[<kirjasintyyppi> | <yleinen-kirjasinperhe>],]* [<kirjasintyyppi> | <yleinen-kirjasinperhe>];
font-family-ominaisuus on periytyvä ja
sitä voidaan käyttää kaikkien elementtien
yhteydessä.
<kirjasintyyppi> voi olla mikä tahansa
kirjasintyyppi, kuten esimerkiksi Times, Times New Roman tai
Courier.
<yleinen-kirjasinperhe> voi olla jokin
seuraavista:
serif (esimerkiksi Times)
sans-serif (esimerkiksi Helvetica)
cursive(esimerkiksi, Zapf-Chancery)
fantasy (esimerkiksi, Western)
monospace(esimerkiksi, Courier)
Seuraavassa esimerkissä on yksinkertainen kirjasintyypin ja
yleisen kirjasinperheen määritys.
Määrityksessä kirjasintyypiksi
määritellään verdana, mutta jos
selain ei löydä kyseistä kirjasintyyppiä, niin
se näyttää elementin sisällön jollakin
sans-serif-kirjasinperheen kirjasimella.
font-family: verdana, sans-serif;
Seuraavassa esimerkissä on määritelty useita
vaihtoehtoisia kirjasintyyppejä, joita
käytetään esiintymisjärjestyksessä. Jos
yhtään kirjasintyypeistä ei löydy
käytetään jotakin serif-perheen
kirjasinta. Kirjasintyyppi täytyy laittaa lainausmerkkien
sisään, jos kirjasintyypin nimestä löytyy
välilyönti.
font-family: Verdana, "Times New Roman", Times, "New York", serif ;
font-style-ominaisuudella voidaan
määritellä esitettävän kirjasimen tyyli.
font-style voi saada arvon normal, italic
ja oblique. Arvolla normal teksti
näytetään ilman korostuksia, arvolla
italic teksti näytetään kursivoituna ja
arvolla oblique teksti näytetään
vinona. Käytännössä arvot italic
ja oblique eivät paljoakaan eroa toisistaan.
font-style: normal | italic | oblique;
font-style-ominaisuus on periytyvä ja
sitä voidaan käyttää kaikkien elementtien
yhteydessä.
Seuraavassa esimerkissä kirjasin on määritelty kursivoiduksi.
font-style: italic;
font-variant-ominaisuudella voidaan kirjasimen
kirjoitusasu muuttaa kapiteelikirjaimiksi eli kirjoitusasultaan
isoiksi kirjaimiksi, jotka ovat pienten kirjainten kokoisia.
font-variant-ominaisuus voi saada arvon
normal tai small-caps. Arvolla
normal kirjasin näytetään normaalina,
mutta arvolla small-caps kirjasin
näytetään kapiteelikirjaimina.
font-variant: normal | small-caps;
font-variant-ominaisuus on periytyvä ja
sitä voidaan käyttää kaikkien elementtien
yhteydessä.
font-weight-ominaisuudella kirjasimelle voidaan
määritellä kirjasimen korostus. Mahdollisia arvoja
font-weight-ominaisuudella ovat normal, bold,
bolder, lighter sekä muutama erilainen numeerinen arvo.
Arvo bold lihavoi kirjasimen ja arvo
bolder on hieman heikompi lihavointi kuin
bold. Vastaavasti arvo lighter
keventää kirjasinta hieman. bolder ja
lighter arvot toimivat suhteellisesti perittyihin
arvoihin nähden, mutta eteenpäin perittäessä ne
tulkitaan kiinteiksi numeroarvoiksi. Numeeriset arvot vastaavat
tekstimuotoisia arvoja seuraavasti. Arvo 400 vastaa
arvoa normal ja arvo 700 vastaa arvoa
bold.
font-weight: normal | bold | bolder | lighter | 100 | 200| 300 | 400 | 500 | 600 | 700 | 800 | 900 ;
font-weight-ominaisuus on periytyvä ja
sitä voidaan käyttää kaikkien elementtien
yhteydessä.
Esimerkki font-weight-ominaisuuden
käytöstä. Esimerkissä
strong-elementin sisällä oleva teksti
näytetään hieman lihavoituna.
strong {font-weight: bolder;}
Kirjasinkoko voidaan määritellä
font-size-ominaisuuden avulla. Kirjasinkoko voidaan
määrittää sekä absoluuttisesti että
suhteellisesti.
font-size: <absoluuttinen_koko> | <suhteellinen_koko> | <pituus> | <prosentti>;
Font-size-ominaisuus on periytyvä ja sitä
voidaan käyttää kaikkien elementtien
yhteydessä.
<Absoluuttinen_koko> voidaan
määrittää arvojen xx-small, x-small,
small, medium, large, x-large ja xx-large
avulla. Arvoilla voidaan määritellä esimerkiksi
tekstin kokoa normaalista eli medium-arvosta
poikkeavaksi. Tekstin kokoa muutetaan absoluuttisilla arvoilla aina
noin puolitoistakertaiseksi edelliseen kokoon nähden.
Seuraavassa esimerkissä kirjasinkoko
määritellään absoluutttisesti normaali kokoa
suuremmaksi. Jos arvon medium kirjasinkooksi on
määritelty 10 pt:tä, niin seuraava esimerkin
suurempi arvo large muuttaa tekstin koon 15pt:een.
font-size: large;
<suhteellinen_koko> voidaan
määrittää arvoilla larger ja
smaller. Suhteellisilla arvoilla voidaan
määritellä kirjasimen koko suhteessa ylemmän
tason kappaleeseen. Seuraavassa esimerkissä muutetaan
kirjasimenkokoa suhteellisesti ylemmän tason elementin kokoon
nähden. body-elementille on määritelty
kirjasimen kooksi medium. Jos
body-elementin sisään tulevalle
p-elementille määritellään
kirjasinkooksi larger, niin p-elementin koko nostetaan
absoluuttiseksi arvoksi large.
p {font-size: larger;}
<pituus> voidaan määritellä
luvussa esitetyllä tavalla suhteellisia ja absoluuttisia
pituusmittoja käyttäen. Kirjasinkoolle ei kuitenkaan
sallita negatiivisia arvoja. Seuraavassa esimerkissä
käytetään ainoastaan suhteellisia
pituusyksikköjä kirjasimen koon muuttamiseen.
Seuraava esimerkki muuttaa kirjasinkokoa ylemmän tason elementin kirjasinkokoon nähden puolitoistakertaiseksi.
font-size: 1.5em;
Seuraava esimerkki muuttaa kirjasinkokoa ylemmän tason elementin pienen kirjaimen kirjasinkokoon nähden kaksinkertaiseksi.
font-size: 2ex;
Seuraava esimerkki muuttaa kirjasinkoon kaksikymmenkertaiseksi katselulaitteen kuvapisteen kokoon nähden.
font-size: 20px;
font-ominaisuuden avulla voidaan muuttaa kaikkia
edellä käsiteltyjä kirjasimen ominaisuuksia
seuraavan syntaksin mukaisessa järjestyksessä.
font: [ <font-style> || <font-variant> || <font-weight> ] ? <font-size> [ / <line-height> ] ? <font-family>;
font-ominaisuus on periytyvä ja sitä
voidaan käyttää kaikkien elementtien
yhteydessä.
Seuraavassa esimerkissä p-elementille on
määritelty seuraavat ominaisuudet.
font-style-ominaisuus on italic, mutta
font-variant- ja font-weight-ominaisuudet
on jätetty määrittelemättä kokonaan.
font-size-ominaisuuden arvoksi on asetettu 1.5em ja
line-height-ominaisuuden eli rivinkorkeudeksi arvoksi
on määritelty 2em. font-family-ominaisuuden
arvoksi on määritelty Palatino, serif.
p {font: italic 1.5em/2em Palatino, serif;}
Seuraava esimerkki on täsmälleen sama kuin edellä, mutta jokainen ominaisuuden arvo on määritelty erikseen.
p {font-style: italic;font-size: 1.5em;line-height: 2em;font-family: Palatino, serif;}
Seuraavaan esimerkkiin on koottu erilaisia kirjasimen määrittämisessä käytettäviä ominaisuuksia.
h1 {font-family: verdana, arial, helvetica, sans-serif;font-style: italic;font-variant: small-caps;font-weight: bold;font-size: 2em;}p {font-family: "Times New Roman", times, serif;font-style: normal;font-variant: normal;font-weight: 400;font-size: 150%;}strong {font-family: Courier, monospace;font-style: normal;font-variant: small-caps;font-weight: 900;font-size: xx-large;}
Seuraavassa esimerkissä edellisen esimerkin
kirjasimen määritykset on toteutettu
font-ominaisuuden avulla.
h1 {font: italic small-caps bold 2em verdana, arial, helvetica, sans-serif;}p {font: normal normal 400 150% "Times New Roman", times, serif;}strong {font: normal small-caps 900 xx-large Courier, monospace;}
Kuva 1: Esimerkki kirjasimen ominaisuuksien käytöstä.
Tässä luvussa käsitellään elementin
värin, taustan ja taustavärin ominaisuuksia.
Käsiteltävät ominaisuudet ovat color,
background-color, background-image, background-repeat,
background-attachment, background-position ja
background.
color-ominaisuudella
määritellään elementin etualan väri, joka
toimii esimerkiksi tekstikappaleissa kirjasimen
värinä.
color: <väri>;
color-ominaisuus on periytyvä ja sitä
voidaan käyttää kaikkien elementtien
yhteydessä.
<väri> voidaan antaa luvussa
määritellyllä tavalla. Tarkempi esimerkki värin
antamisesta background-color-ominaisuuden
yhteydessä.
background-color-ominaisuuden avulla voidaan
määritellä elementeille taustaväri.
Ominaisuudelle voidaan antaa värinmääritys luvussa
määritellyllä tavalla tai taustaväri voidaan
laittaa läpinäkyväksi arvolla
transparent. Elementeille on oletuksena
taustavärin arvona transparent. Vaikka
background-color-ominaisuus ei ole periytyvä
voidaan elementti asettaa läpinäkyväksi, jolloin
ominaisuus näyttää periytyvän.
background-color: <väri> | transparent;
background-color-ominaisuus ei ole periytyvä,
mutta sitä voidaan käyttää kaikkien elementtien
yhteydessä.
Seuraavassa esimerkissä havainnollistetaan värin ja
taustavärin käyttämistä tyyleissä.
Esimerkissä body-elementtiin on
määritelty taustaväriksi hopean harmaa ja tekstin
väriksi valkea. h1-elementin taustaväriksi
on määritelty läpinäkyvyys ja tekstin
väriksi tulee valkea. p-elementin väriksi on
määritelty punainen, mutta taustaväriksi on
määritelty läpinäkyvä.
strong-elementin tekstin väriksi on
määritelty punainen ja taustaväriksi keltainen.
body {color: white;background-color: silver;}h1 {color: #ffffff;background-color: transparent;}p {color: #ff0000;background-color: transparent;}strong {color: red;background-color: yellow;}
Seuraavassa kuvassa on edellisen esimerkin tyyleillä
muotoiltu tiedosto.
Kuva 2: Esimerkki taustavärin ja värin käytöstä dokumentissa.
background-image-ominaisuuden avulla voidaan
elementille määritellä taustakuva.
background-image-ominaisuutta
käytettäessä kannattaa käyttää
myös background-color-ominaisuutta. Jos
taustakuvaa ei pystytä näyttämään, niin
näkyville tulee ainakin taustaväri.
background-image: <url> | none;
background-image-ominaisuus ei ole periytyvä,
mutta sitä voidaan käyttää kaikkien elementtien
yhteydessä.
Seuraavassa esimerkki background-image-ominaisuuden
käytöstä body-tyylin
sisällä.
body {color: #000000;background-color: white;background-image: url(./kuvat/tausta.gif);}
Seuraavassa kuvassa edellisen esimerkin mukainen
taustakuvan määrittely. Taustakuvan valinnassa
pitää olla hyvin tarkkana, koska huonosti valittu
taustakuva voi heikentää dokumentin luettavuutta, kuten
esimerkissä on käynyt. Esimerkin taustakuva on vain 50*50
pikselin kokoinen, joten taustakuvaa on toistettu koko taustan
alalle.
Kuva 3: Esimerkki taustakuvan määrittämisestä.
background-repeat-ominaisuuden avulla voidaan kuvaa
toistaa ominaisuuden määrittelemässä suunnassa,
jos taustakuva on kooltaan pienempi kuin selainikkunassa
näytettävä alue. Arvo repeat toistaa
kuvaa koko taustan yli sekä pysty- että vaakasuunnassa.
Arvolla repeat-x toistetaan kuvaa vaakasuunnassa ja
arvolla repeat-y toistetaan kuvaa pystysuunnassa.
Arvolla no-repeat kuva esiintyy taustalla vain
kerran.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
background-repeat-ominaisuus ei ole periytyvä,
mutta sitä voidaan käyttää kaikkien elementtien
yhteydessä. Oletuksena taustakuvaa toistetaan sekä vaaka-
että pystysuunnassa.
Seuraavassa esimerkissä taustakuvaksi on määritelty tausta.gif-niminen kuva. Taustakuva toistetaan taustalla ainoastaan pystysuunnassa. Koska taustakuvaa ei toisteta koko näytön alalla, niin taustan väriksi on määritelty valkoinen.
body {color: #000000;background-color: white;background-image: url(./kuvat/tausta.gif);background-repeat: repeat-y;}
Seuraavassa kuvassa on edellä olevan esimerkin tyyleillä muokattu dokumentti. Kuvassa taustakuvaa on toistettu ainoastaan pystysuunnassa.
Kuva4: Esimerkki taustakuvan toistamisesta pystysuunnassa.
background-attachment-ominaisuuden avulla voidaan
vaikuttaa taustakuvan liikkumiseen dokumentti-ikkunaa rullattaessa.
Arvolla fixed taustakuva on kiinnitetty
selainikkunaan, joten kuva ei liiku sisällön
vierittämisen mukana. Arvolla scroll taustakuva
ei ole kiinnitetty selainikkunaan, joten taustakuva liikkuu
sisällön mukana, joten taustakuva näyttää
olevan kiinni vieritettävässä dokumentissa.
background-attachment: scroll | fixed;
background-attachment-ominaisuus ei ole
periytyvä, mutta sitä voidaan käyttää
kaikkien elementtien yhteydessä.
Seuraavassa esimerkissä taustakuvaa ei vieritetä dokumentin sisällön mukaan, joten taustakuviointi pysyy aina samannäköisenä dokumentin yläreunassa.
body {color: #000000;background-color: white;background-image: url(tausta.gif);background-repeat: repeat-x;background-attachment: fixed;}
background-position-ominaisuudella voidaan
määritellä taustakuvalle tarkka sijainti. Arvot
voidaan antaa prosentuaalisesti selainikkunan vasemmasta
ylälaidasta lähtien, jota vastaa arvo 0% 0%. Esimerkiksi
arvo 100% 0% tarkoittaa elementin oikeaa yläkulmaa.
Prosentteina ja pituutena annettuista arvoista ensin annetaan
vaakasuuntaan vaikuttava arvo ja sen jälkeen vasta
pystysuuntaan vaikuttava arvo. Kuvan sijoittumisen vaakasuunnassa
voi myös määritellä avainsanojen left,
center ja right avulla vasemmalle, keskelle ja
oikealle. Vastaavasti kuvan sijoittuminen pystysuunnassa voidaan
määritellä avainsanojen top, center ja
bottom avulla ylös, keskelle ja alas.
background-position: [<prosentti> | <pituus>] {1,2} | [left | center | right] || [top | center | bottom];
background-position-ominaisuus ei ole
periytyvä ja sitä voidaan käyttää
ainoastaan lohkotason sekä korvattavien elementtien
yhteydessä.
Seuraavissa esimerkeissä dokumentin taustakuvan
sijoittuminen määritellään
background-position-ominaisuuden avulla. Seuraavassa
esimerkissä kuva määritellään
dokumentti-ikkunan keskelle ja kuva kiinnitetään
selainikkunaan, jolloin se pysyy keskellä selainikkunaa,
vaikka dokumenttia vieritettäisiin ikkunassa.
body {color: #000000;background-color: white;background-image: url(./kuvat/tausta.gif);background-repeat: no-repeat;background-position: 50% 50%;background-attachment: fixed;}
Seuraavassa kuvassa on edellisen esimerkin tyylimääritystä käyttävä HTML-dokumentti.
Kuva5: Esimerkki erilaisista taustakuvalle annettavista ominaisuuksista.
background-ominaisuudella voidaan vaikuttaa
kaikkiin edellä käsiteltyihin taustan ominaisuuksiin.
Ominaisuuden arvoilla on tietty järjestys, joka on
nähtävillä seuraavasta syntaksista.
background: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ;
Background-ominaisuus ei ole periytyvä, mutta
sitä voidaan käyttää kaikkien elementtien
yhteydessä.
Seuraavassa esimerkissä on määritelty kaikki
background-position-ominaisuuden yhteydessä
olleen esimerkin ominaisuudet background-ominaisuuden
avulla.
body {color: #000000;background: white url(./kuvat/tausta.gif) no-repeat fixed 50% 50%;}
Taustakuvia voidaan todellakin käyttää kaikkien elementtien yhteydessä. Seuraavassa esimerkissä taustakuvia on määritelty myös dokumentin muihin elementteihin. Esimerkin mukaisia taustakuvan määrittelyja kannattaa harkita erityisen huolellisesti, koska taustakuva usein vaikeuttaa dokumentin lukemista.
body {color: #000000;background-color: white;background-image: url(./kuvat/tausta.gif);background-repeat: repeat;}h1 {color: #000000;background-image: url(./kuvat/marmori.gif);background-color: white;background-repeat: repeat-y;}p {color: #000000;background-color: white;background-image: url(./kuvat/tiilet.gif);background-repeat: repeat-x;}strong {color: #000000;background-color: white;}
Kuva6: Taustakuvan määrittelyjä eri elementteihin.
Tekstin ominaisuuksia voidaan muuttaa tyylien avulla hyvin
paljon. Seuraavissa luvuissa käsiteltävät
ominaisuudet ovat word-spacing, letter-spacing,
text-decoration, vertical-align, text-align, text-transform,
text-indent, text-align ja line-height.
word-spacing-ominaisuudella voidaan kasvattaa tai
pienentää sanojen välistystä. Sanojen
välistys voidaan antaa jonkin pituusmitan avulla. Sanojen
välistyksen oletusarvona käytetään arvoa
normal. Pituusmittojen
määrittämisestä enemmän luvussa .
word-spacing: normal | <pituus>;
word-spacing-ominaisuus on periytyvä ja
sitä voidaan käyttää kaikkien elementtien
yhteydessä.
Seuraavassa esimerkissä h1-elementin sanojen
välistyksen arvoksi laitetaan 1em, joka jättää
sanojen väliin h1-elementin kirjasinkoon verran
tyhjää tilaa.
h1 {word-spacing: 1em;}
letter-spacing-ominaisuudella voidaan kasvattaa tai
pienentää sanoissa olevien merkkien välistystä.
Merkkien välistys voidaan antaa jonkin pituusmitan avulla tai
arvona normal. Oletusarvona käytetään
arvoa normal. letter-spacing-ominaisuun
arvolla normal selain voi kasvattaa kumpaankin reunaan
tasatun tekstin merkkiväliä. Pituusmittojen
määrittämisestä enemmän luvussa .
letter-spacing: normal | <pituus> ;
letter-spacing-ominaisuus on periytyvä ja
sitä voidaan käyttää kaikkien elementtien
yhteydessä.
Seuraavassa esimerkissä muutetaan h1-elementin
merkkien välistystä.
h1 {letter-spacing: 1em;}
text-decoration-ominaisuudella voidaan muuttaa
tekstin ulkoasua. Ominaisuudelle voidaan antaa seuraavia arvoja.
underline alleviivaa tekstin, overline
ylleviivaa tekstin sanat, linethrough yliviivaa koko
tekstin ja blink laittaa tekstin vilkkumaan.
Korostuksen värinä käytetään tekstin
väriä.
text-decoration: none | [ underline || overline || line-through || blink ];
text-decoration-ominaisuus ei ole periytyvä,
mutta sitä voidaan käyttää kaikkien elementtien
yhteydessä.
Seuraavassa esimerkissä a-elementistä eli
tässä tapauksessa linkistä poistetaan kokonaan
alleviivaus.
a {text-decoration: none;}
vertical-align-ominaisuudella voidaan
määritellä tekstin pystysuuntaista sijoittumista
muuhun kappaleeseen nähden. Arvo baseline
määrittelee elementin peruslinjan ylemmän tason
elementin peruslinjan mukaan tai joissakin tapauksissa elementin
alalaidan mukaan. Arvolla super voidaan teksti
korottaa yläindeksiksi ja arvolla sub teksti
voidaan laskea alaindeksiksi. text-top arvo
määrittelee elementin ylälaidan ylemmän tason
elementin kirjasimen ylälaitaan ja vastaavasti
text-bottom määrittelee elementin alalaidan
ylemmän tason elementin kirjasimen alalaitaan.
top arvo määrittelee elementin
ylälaidan rivillä olevan korkeimman elementin
ylälaitaan ja bottom määrittelee
elementin alalaidan rivillä olevan alimmaksi ulottuvan
elementin alalaitaan. middle määrittelee
elementin puolivälin kohtaan, joka muodostuu summana
ylemmän tason elementin peruslinjasta ja puolikkaasta pienen
kirjasimen korkeudesta.
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <prosentti>;
vertical-align-ominaisuutta voidaan
käyttää ainoastaan tekstitason elementtien
yhteydessä ja ominaisuus ei ole periytyvä.
Seuraavassa esimerkissä on määritelty
strong-tyylille aliluokan ylaindeksi.
strong.ylaindeksi {vertical-align: super;}
text-transform-ominaisuudella voidaan
määritellä tekstille erilaisia kirjoitusasun
muutoksia. Tekstin ominaisuuksia voidaan muokata arvolla
capitalize, jolloin tekstin sanojen ensimmäinen
kirjain muutetaan isoksi. Arvolla uppercase voidaan
sanat muuttaa kokonaan isoiksi kirjaimiksi ja arvolla
lovercase sanat muutetaan pieniksi kirjaimiksi.
Text-transform: none | capitalize | uppercase| lowercase;
Text-transform-ominaisuus on periytyvä ja
sitä voidaan käyttää kaikkien elementtien
yhteydessä.
Seuraavalla esimerkillä tekstissä korostetut sanat muutetaan isoilla kirjaimilla kirjoitetuiksi.
strong{text-transform: uppercase;}
text-align-ominaisuudella voidaan muuttaa
tekstikappaleen tasausta vaakatasossa. Arvolla left
teksti tasataan vasempaan reunaan, arvolla right
teksti tasataan oikeaan reunaa, arvolla center teksti
tasataan keskelle ja arvolla justify teksti tasataan
molempiin reunoihin.
text-align: left | right | center | justify;
text-align-ominaisuus on periytyvä ja
ominaisuutta voidaan ainoastaan lohkotason elementtien
yhteydessä.
Tarkempi esimerkki ominaisuuden käyttämisestä
text-indent-ominaisuuden yhteydessä.
text-indent-ominaisuudella voidaan muuttaa
kappaleen ensimmäisen rivin sisennystä. Sisennys voidaan
antaa pituutena tai prosenttiarvona. Pituuden ja prosenttiarvojen
antamisesta enemmän luvussa .
text-indent: <pituus> | <prosentti>;
text-indent-ominaisuus on periytyvä, mutta
sitä voidaan käyttää ainoastaan lohkotason
elementtin yhteydessä.
Seuraavassa esimerkissä tekstikappaleiden ensimmäisen
rivin sisennykseksi on asetettu kaksi kertaa
p-elementin kirjasimen koon verran. Tekstin tasaus on
tehty molempiin reunoihin.
p {text-indent: 2em;text-align: justify;}
line-height-ominaisuudella voidaan
määritellä tekstikappaleen rivin korkeus. Rivin
korkeus määritellään suhteellisesti elementin
kirjasinkoon suhteen. Rivin korkeus voidaan antaa numeerisesti
ilman yksikköä, pituutena yksikon kanssa ja
prosentuaalisesti elementin kirjaisinkokoon nähden. Pituuden
antamisesta enemmän kappaleessa .
line-height: normal | <numeerinen> | <pituus> | <prosentti>;
line-height-ominaisuus on periytyvä ja
ominaisuutta voidaan käyttää kaikkien elementtien
yhteydessä.
Seuraavassa esimerkissä käytetään kaikkia kolmea tapaa rivin korkeuden määrittämiseksi. Ensimmäisessä esimerkissä rivin koko annetaan ilman pituusyksikköä numeerisesti. Rivin korkeuden arvoksi tulee 18 pt:tä.
p {font-size: 12pt;line-heigth: 1.5;}
Toisessa esimerkissä rivin korkeus annetaan pituutena suhteessa kappaleen kirjasimen kokoon. Rivin korkeuden arvoksi tulee 18 pt:tä.
p {font-size: 12pt;line-heigth: 1.5em;}
Kolmannessa esimerkissä rivin korkeus annetaan prosentuaalisesti suhteessa kappaleen kirjasimen kokoon nähden. Rivin korkeuden arvoksi tulee 18 pt:tä.
p {font-size: 12pt;line-heigth: 150%;}
Seuraavassa esimerkissä havainnollistetaan tekstin ominaisuuksien käyttämistä HTML-dokumentissa.
h1 {word-spacing: 1em;text-decoration: overline;vertical-align: baseline;text-transform: uppercase;text-align: center;}p {text-indent: 5em;text-align: justify;line-height: 200%;}strong{letter-spacing: 0.5em;vertical-align: top;}
Kuva7: Esimerkki tekstin ominaisuuksien muuttamisesta.
Jokaisella elementille voidaan hahmottaa oheisen kuvan mukaiset ominaisuudet. Elementtiä kuvassa edustaa sisältö, joka voi olla esimerkiksi tekstikappale tai taulukon solu. Täytteellä (engl. padding) voidaan kasvattaa rajan ja sisällön välistä eroa toisistaan. Marginaalin avulla voidaan vastaavasti kasvattaa eri elementtien välistä tyhjää tilaa.
Kuva8. Elementin sisällön, täytteen, rajan ja marginaalin suhde.
Täytealueen leveyttä voidaan muuttaa täytteen ominaisuuksien avulla, mutta täyte käyttää samoja taustavärin asetuksia kuin sisältö. Rajan väriä ja ulkoasua sekä muutamia muita ominaisuuksia voidaan muuttaa rajan ominaisuuksien avulla. Marginaalin ominaisuuksista voidaan muuttaa esimerkiksi marginaalin leveyttä, mutta marginaali on aina läpinäkyvä, joten sille ei voi asettaa omaa väriä. Seuraavassa tarkastellaan elementtien muotoilemiseen liittyviä seikkoja tarkemmin.
Kappaletason elementtejä ovat esimerkiksi tekstikappale, erilaiset listat sekä taulukot, mutta kappaletason elementtejä löytyy HTML:stä paljon muitakin. Kaikki elementit, jotka muodostavat oman kappaleen tai lohkon voidaan käsittää lohkotason elementeiksi. Tekstitason elementtejä ovat elementit, joita voidaan käyttää ainoastaan jonkin lohkotason elementin sisällä. Tekstitason elementit vaikuttavat ainoastaan muutamaan tekstikappaleen sisällä olevaan tekstin osaan, mutta tekstitason elementit eivät vaikuta koko kappaleen ominaisuuksiin. Sekä lohkotason että tekstitason elementin ympärillä olevan tilan muotoilemiseen voidaan käyttää marginaalin, rajan ja täytteen ominaisuuksia.
Perusidea elementtien täytteen, rajan ja marginaalin
muotoilemisessa on muuttaa jokaista haluttua ominaisuutta erikseen
jokaisesta suunnasta. Seuraavassa kuvassa esitetään
kaikki erilaiset mahdollisuudet sisällön
ympärillä olevan tilan muotoilemiseen. Esimerkiksi
haluttaessa muuttaa jonkin elementin vasemman täytteen
leveyttä voidaan viitata pelkästään vasemman
täytteen ominaisuuteen padding-left.
Kuva9. Ominaisuuksien sijoittuminen sisällön ympärille.
Seuraavat kaksi esimerkkiä p-elementin
marginaalin määrittämiseksi ovat identtiset.
Marginaalin määrittämisestä kannattaa huomata,
että ellei kerrota mitä marginaalia ollaan muuttamassa,
niin järjestys on seuraava: Ensimmäisenä arvona
annataan ylämarginaalin arvo. Ylämarginaalin arvon
antamisen jälkeen kierros jatkuu oikeaan marginaaliin.
Kolmantena listassa on alamarginaali ja viimeisenä annetaan
vasen marginaali. Jos jonkin marginaalin arvo halutaan
jättää määrittelemättä, niin
silloin muut marginaalin arvot on annettava toisen esimerkin
muodossa viitaten marginaalin paikkaan.
P {margin: 10px 7px 4px 1px;}p {margin-top: 10px;margin-right: 7px;margin-bottom:4px;margin-left: 1px;}
Marginaalin ja täyteen ominaisuudet eivät periydy,
mutta ne vaikuttavat hieman toisiinsa. Esimerkiksi kahden
vierekkäisen listaalkion (li-elementin)
marginaali on maksimi yläpuolella olevan elementin
alamarginaalista ja alapuolella olevan elementin
ylämarginaalista. Marginaaleja ei siis lasketa yhteen, kuten
voisi olettaa. Elementin korkeudesta ja leveydestä puhuttaessa
tarkoitetaan aina elementin sisällön leveyttä ja
korkeutta. Leveyteen ja korkeuteen ei oteta mukaan marginaaleja,
rajaa tai täytettä.
Kaikkien HTML-elementtien ympärille voidaan määritellä marginaali. Seuraavassa käydään esimerkkien avulla marginaalin määrittäminen tarkoin läpi.
margin-ominaisuuden avulla voidaan elementille
määritellä marginaali, jolla voidaan
lisätä tai vähentää elementtien rajojen
välistä tyhjää tilaa.
margin-ominaisuudelle voidaan antaa arvo
pituusyksikköinä tai prosentteina.
margin-ominaisuuden avulla voidaan antaa pituus
kaikille marginaaleille yhtäaikaa, mutta jokaisen marginaalin
leveyden voi määritellä myös erikseen.
Elementin margin-ominaisuuksia
määriteltäessä kannattaa muistaa, että
määriteltävien marginaalien järjestys on
seuraava: Ensimmäinen arvo vastaa ylämarginaalia, toinen
oikeaa marginaali, kolmas alamarginaalia ja neljäs vasenta
marginaalia.
margin: [ <pituus> | <prosentti> | auto ]{1,4}
margin-ominaisuus ei ole periytyvä, mutta
sitä voidaan käyttää kaikkien elementtien
yhteydessä.
Seuraavissa esimerkeissä marginaalien arvot annetaan kahdella erilaisella tavalla. Ensimmäisessä esimerkissä ylämarginaalin korkeudeksi asetetaan kaksi kertaa kappaleen kirjasinkoko. Oikean marginaalin arvoksi asetetaan kolme kertaa kappaleen kirjasinkoko. Alamarginaalin korkeudeksi asetetaan neljä kertaa kappaleen kirjasinkoko. Vasemman marginaalin arvoksi asetetaan viisi kertaa kappaleen kirjasinkoko.
p {margin: 2em 3em 4em 5em;}
Seuraavan esimerkin marginaalien koot ovat samoja kuin edellisessä esimerkissä määritellyt marginaalit.
p {margin-top: 2em;margin-right: 3em;margin-bottom: 4em;margin-left: 5em;}
Jos elementin marginaalille annetaan vain yksi arvo seuraavan esimerkin mukaisesti, niin jokaisen marginaalin leveydeksi asetetaan 2em.
p { margin: 2em; }
Jos elementin marginaalille määritellään ainoastaan kaksi arvoa seuraavan esimerkin mukaisesti, niin ensimmäinen arvo 2 em asetetaan ylä- ja alamarginaalin leveydeksi ja toinen arvo 3em asetetaan oikean ja vasemman marginaalin leveydeksi.
p { margin: 2em 3em; }
Kaikkien HTML-elementtien ympärille voidaan määritellä täyte. Elementin täytteeksi kutsutaan elementin sisällön ja rajan väliin jäävää tyhjää aluetta.
padding-ominaisuudella voidaan muuttaa elementin
täytteen leveyttä. padding-ominaisuus
voidaan antaa pituusyksikköinä tai prosentteina.
padding-ominaisuuden avulla voidaan antaa
täytteen leveys jokaiselle puolelle yhtäaikaa, mutta
jokaisen täytteen leveyden voi määritellä
myös erikseen. padding-elementin ominaisuuksia
määriteltäessä kannattaa muistaa, että
määriteltävien täytteiden järjestys on
seuraava: Ensimmäinen arvo vastaa ylätäytettä,
toinen oikeaa täytettä, kolmas alatäytettä ja
neljäs vasenta täytettä.
padding: <pituus> | <prosentti> ]{1,4};
padding-ominaisuus ei ole periytyvä, mutta
sitä voidaan käyttää kaikkien elementtien
yhteydessä.
Seuraavassa esimerkissä täytteen ominaisuudet
määritetään kahdella erilaisella tavalla.
Ensimmäisessä esimerkissä p-elementin
täyteelle määritellään sekä ylä-
että alatäytteen leveydeksi kaksi kertaa kappaleen
kirjasimen koko. Oikean ja vasemman täytteen leveydeksi
määritellään neljä kertaa kirjasimen
koko.
p {padding: 2em 4em;}
Seuraavan esimerkin täytteen koot ovat samoja kuin edellisessä esimerkissä määritellyt täytteet.
p {padding-top: 2em;padding-right: 4em;padding-bottom: 2em;padding-left: 4em;}
Seuraavan esimerkin täytteen koot ovat samoja kuin edellisissä esimerkeissä määritellyt täytteet.
p {padding: 2em 4em 2em 4em;}
Jos elementin täytteelle annetaan vain yksi arvo seuraavan esimerkin mukaisesti, niin jokaisen täytteen leveydeksi asetetaan 3em.
p { padding: 3em; }
Elementille voidaan määritellä raja, joka erottaa
elementin marginaalin ja täytteen toisistaan. Seuraavissa
luvuissa käsiteltävät rajan ominaisuudet ovat
border-width, border-color, border-style ja
border.
Elementin rajojen leveys voidaan määrittää
border-width-ominaisuuden avulla. Ominaisuudelle
voidaan antaa arvoja pituusyksiköissä tai arvoina
thin, medium ja thick. Arvolla
thin rajaksi tulee ohut raja, arvolla
medium rajaksi tulee keskipaksu ja arvolla
thick rajasta tulee paksu.
border-width: [ thin | medium | thick | <length> ]{1,4};
border-width -ominaisuus ei ole periytyvä,
mutta sitä voidaan käyttää kaikkien elementtien
yhteydessä.
Jos border-width-ominaisuudelle annetaan ainoastaan
yksi arvo, niin silloin kyseessä on kaikkien rajojen leveys.
Kahdella arvolla määritellään pareittain oikean
ja vasemman rajan leveys sekä ylä- ja alarajojen
leveys.
Seuraavassa esimerkissä elementin jokaisen reunan paksuudeksi asetetaan paksu reuna.
border-width: thick;
Seuraavassa esimerkissä elementille asetetaan ylä ja alateunaan paksu raja ja vasempaan ja oikeaan reunaan asetetaan ohut raja.
border-width: thick thin;
Seuraavassa esimerkissä ylärajaksi asetetaan paksu raja, oikeaksi rajaksi asetetaan keskipaksu raja, alarajaksi asetetaan ohut raja ja vasemmaksi rajaksi asetetaan keskipaksu raja.
border-width: thick medium thin medium;
Jokaisen kehyksen paksuus voidaan asettaa erikseen. Seuraavassa esimerkissä jokaisen kehyksen koko on asetettu edellisen esimerkin arvojen mukaisesti.
border-top-width: thick;border-right-width: medium;border-bottom-width: thin;border-left-width: medium;
Elementin rajojen väri voidaan määritellä
border-color-ominaisuuden avulla. Rajojen väri
voidaan antaa suoraan värin nimellä tai värin
RGB-arvona. Värien antamisesta enemmän luvussa .
Jokaiselle elementin reunalle voidaan määritellä oma
väri. Tällöin värit annetaan seuraavassa
järjestyksessä: Ylärajan väri, oikean rajan
väri, alarajan väri ja vasemman rajan väri.
border-color: <color> {1,4};
border-color-ominaisuus ei ole periytyvä,
mutta sitä voidaan käyttää kaikkien elementtien
yhteydessä.
Seuraavassa esimerkissä ylä- ja alarajan väriksi asetetaan punainen sekä oikean ja vasemman rajan väriksi asetetaan keltainen.
border-color: #ff0000 yellow;
Seuraavassa esimerkissä ylärajan väriksi asetetaan punainen, oikean rajan väriksi asetetaan vihreä, alarajan väriksi asetetaan sininen ja vasemman rajan väriksi asetetaan keltainen.
border-color: red green blue yellow;
border-style-ominaisuudella voidaan
määritellä rajan ulkoasu. Rajan ulkoasu voidaan
määritellä jokaiselle rajalle erikseen
järjestyksessä: Yläraja, oikea raja, alaraja ja
vasen raja. Ominaisuuden arvoksi voidaan laittaa none,
jolloin rajaa ei piirretä ollenkaan. Arvolla
dotted raja on pilkutettu, arvolla dashed
raja on katkoviivoitettu, arvolla solid raja on
yhtenäinen, arvolla double raja on kaksikertainen
ja yhtenäinen, arvolla groove raja on
kourumainen, arvolla ridge raja on harjamainen,
arvolla inset raja on upotettu ja arvolla
outset raja on korotettu.
border-style: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4};
border-style-ominaisuus ei ole periytyvä,
mutta sitä voidaan käyttää kaikkien elementtien
yhteydessä.
Seuraavassa esimerkissä yläraja on yhtenäinen, oikea raja on katkoviivoitettu, alaraja on yhtenäinen ja vasen raja on katkoviivoitettu.
border-style: solid dashed solid dashed;
Seuraavan esimerkin rajamäärittelyt ovat täsmälleen samat kuin edellisessä esimerkissä.
border-style: solid dashed;
border-ominaisuuden avulla voidaan keskitetysti
hallita kaikkia rajan ominaisuuden määrityksiä.
Tarkemmat määritykset rajan leveyden, ulkoasun ja
värin määrittämiseksi löytyvät
edellisistä luvuista. border-ominaisuudella
joudutaan määrittelemään jokaisen reunan
ominaisuudet samalla kertaa.
border: <border-width> || <border-style> || <color>;
border-ominaisuus ei ole periytyvä, mutta
sitä voidaan käyttää kaikkien elementtien
yhteydessä.
Seuraavassa esimerkissä kaikille reunoille määritellään keskikokoinen yhtenäinen ja punainen raja.
border: medium solid red;
Seuraavassa esimerkissä määritellään edellistä esimerkkiä vastaavat ominaisuudet yksi reuna kerrallaan.
border-top: medium solid red;border-right: medium solid red;border-bottom: medium solid red;border-left: medium solid red;
Seuraavaan esimerkkiin on koottu erilaisia rajan,
täytteen ja marginaalin ominaisuuksia.
h1 {margin-top: 1em;margin-right: 1em;margin-bottom: 1em;margin-left: 1em;padding: 0.5em;border-color: red;border-style: dashed;border-width: medium thick;color:black;background-color:yellow;}p {padding: 1em 2em 3em 4em;border: thick ridge silver;}strong{padding: 0.1em;border-color: blue;border-style: solid;border-width: thin medium medium thin;}
Kuva10: Esimerkki rajan, täytteen ja marginaalin käytöstä dokumentissa.
Elementillä on myös muutamia muita ominaisuuksia, joiden avulla voidaan muuttaa elementin pituutta, leveyttä sekä elementin sijoittumista toisiin elementteihin nähden.
width-ominaisuudella voidaan
määritellä elementin pituus hyvin tarkkaan.
Esimerkiksi kuvia voidaan skaalata tarvittaessa
width-ominaisuuden avulla. Kuvien koko kannattaa
kuitenkin pyrkiä muuttamaan kuvankäsittelyohjelmassa,
koska width-ominaisuudella kuvan fyysinen koko ei
oikeasti muutu. width-ominaisuudelle voidaan
määritellä pituus pituusyksiköissä tai
prosentteina. auto-arvolla elementti
näytetään sen oikeassa koossa, mutta
käytettäessä height-ominaisuutta
width-ominaisuuden auto-arvo
määräytyy height-ominaisuuden koon
mukaan.
width: <pituus> | <prosentti> | auto ;
Width-ominaisuus ei ole periytyvä ja sitä
voidaan käyttää ainoastaan lohkotason elementtien
sekä korvattavien elementtien yhteydessä.
Seuraavassa esimerkissä määritellään eri elementeille tarkkoja kokoja.
neljannes {width: 25%;height: 25%;}tarkkakoko {width: 150px;height: 150px;}.puolikas {width: 50%;}
Seuraavassa esimerkkinä käytettävä
HTML-dokumentti.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"><html><head><link rel="StyleSheet" href="levkor.css" type="text/css" /><title>CSS-esimerkeissä tarvittava tiedosto</title></head><body><h1>Ensimmäisen tason otsikko</h1><p class="puolikas">Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään. Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-elementillä. Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään. Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-elementillä. Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään. Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-elementillä.</p><p><img class="tarkkakoko" src="testi.gif" alt="Venyteltäväksi tarkoitettu ruudukkokuva 2x2 pikseliä" /><img class="tarkkakoko" src="testi2.gif" alt="Venyteltäväksi tarkoitettu ruudukkokuva 10x10 pikseliä" /></p><p class="neljannes"><img class="puolikas" src="testi.gif" alt="Venyteltäväksi tarkoitettu ruudukkokuva 2x2 pikseliä" /></p><p class="puolikas"><img class="puolikas" src="testi2.gif" alt="Venyteltäväksi tarkoitettu ruudukkokuva 10x10 pikseliä" /></p></body></html>
Seuraavassa kuvassa edellä olleen HTML-dokumentin
mukainen dokumentti määriteltynä edellä olleen
tyylitiedoston avulla. Kappaleen leveydeksi on määritelty
50%, joten kappale on puolet selainikkunasta. Kuvien kokoja on
muutettu paljon width- ja height-ominaisuuden
avulla. Kuvan, jossa on kaksi punaista neliötä,
alkuperäinen koko on 2*2 pikseliä ja toisen kuvan
alkuperäinen koko on 10*10 pikseliä.
Kuva11: Esimerkki eri elementtien koon määrittämisestä.
height-ominaisuudella voidaan
määritellä elementin pituus hyvin tarkkaan.
Esimerkiksi kuvia voidaan skaalata tarvittaessa
height-ominaisuuden avulla. Kuvien koko kannattaa
kuitenkin pyrkiä muuttamaan kuvankäsittelyohjelmassa,
koska height-ominaisuudella kuvan fyysinen koko ei
oikeasti muutu. height-ominaisuudelle voidaan
määritellä pituus pituusyksiköissä tai
prosentteina. auto-arvolla elementti
näytetään sen oikeassa koossa, mutta
käytettäessä width-ominaisuutta
height-ominaisuuden auto-arvo
määräytyy width-elementin koon
mukaan.
height: <pituus> | auto ;
height-ominaisuus ei ole periytyvä ja
sitä voidaan käyttää ainoastaan lohkotason
elementtien ja korvattavien elementtien yhteydessä.
Selaimet näyttävät HTML-elementit tavallisesti
siinä järjestyksessä, jossa ne on
määritelty HTML-dokumenttiin.
float-ominaisuudella voidaan elementti irrottaa
normaalista elementtijärjestyksestä.
float-ominaisuus mahdollistaa esimerkiksi kuvan
siirtämisen tekstin oikealle puolelle siten, että teksti
rivitetään kuvan vierelle. Ominaisuus vastaa hyvin
pitkälle HTML-elementeissä käytettyä
align-attribuuttia.
float: left | right | none ;
float-ominaisuus ei ole periytyvä, mutta
sitä voidaan käyttää kaikkien elementtien
yhteydessä.
Seuraavassa esimerkissä kuva on siirretty tekstin oikealle puolelle.
img.oikea {float:right;}
Seuraavassa esimerkissä käytetään
float-ominaisuutta kuvien sijoittamiseen tekstin
vierelle.
body {background-color: white;margin: 0em;padding: 0em;}.vasen {float: left;margin-top: 0em;margin-left: 1em;margin-right: 1em;margin-bottom: 0.5em;}.oikea {float: right;margin-top: 0em;margin-left: 1em;margin-right: 1em;margin-bottom: 0.5em;}p.clear-left {clear: left;}
Seuraavassa HTML-koodi, jossa on käytetty aliluokkia
kuvien liu'utuksen mahdollistamiseksi.
<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi"><head><link rel="StyleSheet" href="float.css" type="text/css" media="screen" /><title>CSS-testausta</title></head><body><h1>Liu'utus</h1><blockquote cite="http://www.w3.org/TR/REC-CSS2/visuren.html#floats"><p><img src="kuva.jpg" alt="Longyearbyen" class="oikea"></p><p class="clear-left">A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box. The following is an introduction to float positioning and content flow; the exact rules governing float behavior are given in the description of the 'float' property. </p><p><img src="kuva.jpg" alt="Longyearbyen" class="vasen"></p><p class="clear-right">A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements). Any floated box becomes a block box that is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. The top of the floated box is aligned with the top of the current line box (or bottom of the preceding block box if no line box exists). If there isn't enough horizontal room on the current line for the float, it is shifted downward, line by line, until a line has room for it. </p><p class="clear-both">Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist. However, line boxes created next to the float are shortened to make room for the floated box. Any content in the current line before a floated box is reflowed in the first available line on the other side of the float.</p></blockquote></body></html>
Seuraavassa kuvassa HTML-dokumentin kuvat on liu'utettu
tekstin vierelle float-ominaisuuden avulla.
Kuva12: Esimerkki kuvan liu'uttamisesta tekstin vierelle.
Seuraavassa toinen esimerkki float-ominaisuuden
käytöstä. Esimerkissä kolme tekstikappaletta
sijoitetaan rinnakkain selainikkunaan.
body {background-color: white;margin: 0;padding: 0em;font-family: Arial, Verdana, sans-serif;font-size: 0.8em;}.sarakkeet {margin-top: 1em;margin-bottom: 1em;border: none;width: 100%;}.oikea {text-align : justify;margin : 0;padding-left : 1%;padding-right : 1%;border-right: 1px solid;border-left: 1px solid;width : 30%;height: 90%;float : left;}.keski {text-align : justify;margin : 0;padding-left : 1%;padding-right : 1%;width : 30%;height: 90%;float : left;}.vasen {text-align : justify;margin : 0;padding-left : 1%;padding-right : 1%;border-right: 1px solid;border-left: 1px solid;width : 30%;height: 90%;float : left;}
Seuraavassa edellisen esimerkin tyylejä käyttävä HTML-dokumentti.
<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi"><head><link rel="StyleSheet" href="columns.css" type="text/css" media="screen" /><title>float</title></head><body><h1>Sarakejakoa float-ominaisuuden avulla</h1><div class="sarakkeet"><div class="vasen"><p>Tämä kappale kuuluu vasempaan sarakkeeseen</p><p>Tämä kappale kuuluu vasempaan sarakkeeseen</p><p>Tämä kappale kuuluu vasempaan sarakkeeseen</p><p>Tämä kappale kuuluu vasempaan sarakkeeseen</p></div><div class="keski"><p>Tämä kappale kuuluu keskimmäiseen sarakkeeseen</p><p>Tämä kappale kuuluu keskimmäiseen sarakkeeseen</p><p>Tämä kappale kuuluu keskimmäiseen sarakkeeseen</p><p>Tämä kappale kuuluu keskimmäiseen sarakkeeseen</p></div><div class="oikea"><p>Tämä kappale kuuluu oikeaan sarakkeeseen</p><p>Tämä kappale kuuluu oikeaan sarakkeeseen</p><p>Tämä kappale kuuluu oikeaan sarakkeeseen</p><p>Tämä kappale kuuluu oikeaan sarakkeeseen</p></div></div></body></html>
Seuraavassa kuvassa on edellä esitetyn tyylitiedoston
avulla muokattu HTML-dokumentti. HTML-dokumentin sisältö
on nähtävillä edellä.
Kuva 13 Esimerkki sarakejaosta
clear-ominaisuuden avulla voidaan
määritellä saako elementin sivulla olla
float-ominaisuudella liu'utettua
elementtiä.
clear: left | right | both | none ;
clear-ominaisuus ei ole periytyvä, mutta
sitä voidaan käyttää kaikkien elementtien
yhteydessä.
Seuraavassa esimerkissä on kappaleelle määritelty, että sen vasemmalle puolelle ei saa tulla elementtiä. Jos kappaleen vasemmalla puolella oli jokin elementti, niin kappale siirretään elementin alapuolelle.
p {clear: left;}
Seuraavassa esimerkissä käytetään
clear-ominaisuutta estämään kuvien
siirtyminen tekstikappaleiden vierelle.
body {background-color: white;margin: 0em;padding: 0em;}.vasen {float: left;margin-top: 0em;margin-left: 1em;margin-right: 1em;margin-bottom: 0.5em;}oikea {float: right;margin-top: 0em;margin-left: 1em;margin-right: 1em;margin-bottom: 0.5em;}p.clear-left {clear: left;}p.clear-right {clear: right;}p.clear-both {clear: both;}
Seuraavassa HTML-koodi, jossa käytetään aliluokkia estämään kuvien sijoittuminen tekstikappaleiden vierelle.
<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi"><head><link rel="StyleSheet" href="float.css" type="text/css" media="screen" /><title>CSS-testausta</title></head><body><h1>Liu'utus</h1><blockquote cite="http://www.w3.org/TR/REC-CSS2/visuren.html#floats"><p><img src="kuva.jpg" alt="Longyearbyen" class="oikea"></p><p class="clear-left">A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box. The following is an introduction to float positioning and content flow; the exact rules governing float behavior are given in the description of the 'float'property. </p><p><img src="kuva.jpg" alt="Longyearbyen" class="vasen"></p><p class="clear-right">A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements). Any floated box becomes a block box that is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. The top of the floated box is aligned with the top of the current line box (or bottom of the preceding block box if no line box exists). If there isn't enough horizontal room on the current line for the float, it is shifted downward, line by line, until a line has room for it. </p><p class="clear-both">Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist. However, line boxes created next to the float are shortenedto make room for the floated box. Any content in the current line before a floated box is reflowed in the first available line on the other side of the float. </p></blockquote></body></html>
Seuraavassa kuvassa on clear-ominaisuudella estetty
kuvien siirtyminen tekstikappaleiden viereen.
Kuva14: Esimerkki clear-ominaisuuden käytöstä.
display-ominaisuus määrittelee miten
elementti näytetään.
display-ominaisuudella voidaan antaa arvot
block, inline,
list-item ja none. Arvolla
block elementti käyttäytyy kuten lohkotason
elementti eli erillisena kappaleena. Arvolla inline
elementti käyttäytyy kuten tekstitason elementti. Arvolla
list-item elementti käyttäytyy kuten
lista-alkio. Arvolla none elementtiä ei
näytetä ollenkaan.
display: block | inline | list-item | none ;
display-ominaisuus ei ole periytyvä, mutta
sitä voidaan käyttää kaikkien elementtien
kanssa.
Seuraavassa esimerkissä havainnollistetaan
display-ominaisuuden käyttöä.
h1 {display: none;}p {display: list-item;}strong {display: block;}
Seuraavassa kuvassa on edellä määritellyillä tyylien avulla muotoiltu HTML-dokumentti.
white-space-ominaisuudella voidaan kertoa kuinka
elementin sisällä olevia välilyöntejä
pitäisi käsitellä. Ominaisuuden arvoksi voidaan
antaa normal, pre ja nowrap.
Arvolla normal selain rivittää tekstin
välilyöntien kohdalta tarvittaessa. Arvolla
pre selaimessa näytetään kaikki
välilyönnit. Oletuksena näytetään sanojen
välissä ainoastaan yksi välilyönti. Arvolla
nowrap selainikkunan tekstiä ei rivitetä
välilyöntien kohdalta.
white-space: normal | pre | nowrap ;
white-space-ominaisuus on periytyvä, mutta
sitä voidaan käyttää ainoastaan lohkotason
elementtien kanssa.
Seuraavassa esimerkki white-space-ominaisuuden
käytöstä.
p.normal {white-space: normal;}p.pre {white-space: pre;}p.nowrap {white-space: nowrap;}
Seuraavassa HTML-tiedosto, jossa käytetään edellä määriteltyjä tyylin aliluokkia.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"><html><head><link rel="StyleSheet" href="white-space.css" type="text/css" /><title>CSS-esimerkeissä tarvittava tiedosto</title></head><body><h1>Ensimmäisen tason otsikko</h1><p class="normal">Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään. Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-elementillä. Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään. Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-elementillä. Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään. Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-elementillä.</p><p class="pre">Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään.Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-elementillä.Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään.Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-elementillä.Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään.Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-elementillä.</p><p class="nowrap">Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään. Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-elementillä. Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään. Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-elementillä. Tavallinen tekstikappale, joka kirjoitetaan <strong>p</strong>-elementin sisään. Kappaleessa olevat korostukset on toteutettu <strong>strong</strong>-elementillä.</p></body>
Seuraavassa kuvassa on edellä olleen tyylilomakkeen avulla muokattu tiedosto. Edellä on myös dokumentin HTML-koodit.
Kuva15:Esimerkki white-space-ominaisuuden
käytöstä.
Listan ominaisuuksia voidaan muuttaa hieman CSS:n avulla.
Seuraavassa käsitellään ominaisuudet
list-style-type, list-style-image, list-style-position
ja list-style.
list-style-type-ominaisuuden avulla lista-alkiolle
voidaan määritellä lista-alkion tunnistin.
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-aplha | upper-alpha | none;
list-style-type-ominaisuus on periytyvä, mutta
sitä voidaan käyttää ainoastaan
listaelementtien kanssa.
Seuraavassa esimerkissä lista on numeroitu käyttäen kokonaislukuja.
ol {list-style-type: decimal; /* Järjestetty lista (1,2,3, ...)*/}
Seuraavassa esimerkissä lista on numeroitu pienillä roomalaisilla kirjaimilla.
ol {list-style-type: lower-roman; /* Järjestetty lista (i,ii,iii,...)*/}
Seuraavasa esimerkissä lista on järjestämätön lista, jossa lista-alkiot merkitään neliöllä.
ul {list-style-type: square; /* Järjestämätön lista (■,■,■,... )*/}
list-style-image-ominaisuudella lista-alkioiden
erottimeksi voidaan laittaa jokin kuva.
list-style-image: <url> | none;
list-style-image-ominaisuus on periytyvä,
mutta sitä voidaan käyttää ainoastaan
listaelementtien kanssa.
ul {list-style-image: url(http://palvelin/hakemisto/pallukka.gif);}
list-style-position-ominaisuudella voidaan
määritellä kuinka lista-alkio
näytetään suhteessa listan
sisältöön.
list-style-position: inside | outside;
list-style-position-ominaisuus on periytyvä,
mutta sitä voidaan käyttää ainoastaan
listaelementtien kanssa.
list-style-ominaisuuden avulla voidaan
määritellä keskitetysti edellä esitettyjä
listaan vaikuttavia ominaisuuksia list-style-type,
list-style-position ja list-style-image.
list-style: <list-style-type> || < list-style-position> || <list-style-image>
Seuraavassa esimerkissä määritellään lista-alkion erottimeksi pieni roomalainen numero ja lista-alkion erotin määritellään laitettavaksi listan sisään.
ol {
list-style: lower-roman inside;
}
Seuraavaan esimerkkiin on koottu listan erilaisia ominaisuuksia.
ol.lower-roman {list-style-type: lower-roman;list-style-position: inside;}ul.square {list-style-type: square;list-style-position: outside;}ul.kuva {list-style-image: url(testi2.gif);}
Seuraavassa on sen HTML-tiedoston lähdekoodi, jota muutetaan edellä määritellyllä tyylilomakkeella.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"><html><head><link rel="StyleSheet" href="listat.css" type="text/css" /><title>CSS-esimerkeissä tarvittava tiedosto</title></head><body><h1>Listaominaisuuksia</h1><ol class="lower-roman"><li>Uloin lista - ensimmäinen alkio</li><li>Uloin lista - toinen alkio <br />esimerkkitekstiä esimerkkitekstiä esimerkkitekstiä esimerkkitekstiäesimerkkitekstiä esimerkkitekstiä esimerkkitekstiä esimerkkitekstiäesimerkkitekstiä esimerkkitekstiä esimerkkitekstiä esimerkkitekstiäesimerkkitekstiä esimerkkitekstiä esimerkkitekstiä esimerkkitekstiä</li><li>Uloin lista - kolmas alkio<ul class="square"><li>Sisempi lista - ensimmäinen alkio</li><li>Sisempi lista - toinen alkio<ul class="kuva"><li>Sisin lista - ensimmäinen alkio</li><li>Sisin lista - toinen alkio</li><li>Sisin lista - kolmas alkio</li></ul></li><li>Sisempi lista - kolmas alkio <br />esimerkkitekstiä esimerkkitekstiä esimerkkitekstiä esimerkkitekstiäesimerkkitekstiä esimerkkitekstiä esimerkkitekstiä esimerkkitekstiäesimerkkitekstiä esimerkkitekstiä esimerkkitekstiä esimerkkitekstiäesimerkkitekstiä</li></ul></li></ol></body></html>
Kuva16: Esimerkki erilaisista listan ominaisuuksista.