CSS1:n ominaisuudet

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.

Luvuissa käytettävät merkinnät

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>]?;

Kirjasimen ominaisuudet

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

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:

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

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

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

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;


}

Font-size

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

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;


}

Graphic13

Kuva 1: Esimerkki kirjasimen ominaisuuksien käytöstä.

Värin ja taustavärin ominaisuudet

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

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

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.

Graphic14

Kuva 2: Esimerkki taustavärin ja värin käytöstä dokumentissa.

background-image

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.

Graphic15

Kuva 3: Esimerkki taustakuvan määrittämisestä.

background-repeat

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.

Graphic16

Kuva4: Esimerkki taustakuvan toistamisesta pystysuunnassa.

background-attachment

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

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.

Graphic17

Kuva5: Esimerkki erilaisista taustakuvalle annettavista ominaisuuksista.

background

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;


}

Graphic18

Kuva6: Taustakuvan määrittelyjä eri elementteihin.

Tekstin ominaisuudet

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

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

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

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

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

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

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

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

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;


}

Graphic19

Kuva7: Esimerkki tekstin ominaisuuksien muuttamisesta.

Elementin raja, täyte ja marginaali

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.

Elementtien ominaisuuksien muuttaminen

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

Elementin marginaalit

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

Elementin täyte

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 rajan ominaisuudet

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.

border-width

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;

border-color

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

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

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;


}

Graphic20

Kuva10: Esimerkki rajan, täytteen ja marginaalin käytöstä dokumentissa.

Muut elementin ominaisuudet

Elementillä on myös muutamia muita ominaisuuksia, joiden avulla voidaan muuttaa elementin pituutta, leveyttä sekä elementin sijoittumista toisiin elementteihin nähden.

width

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

Graphic21

Kuva11: Esimerkki eri elementtien koon määrittämisestä.

height

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

float

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.

Graphic22

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

Graphic23

Kuva 13 Esimerkki sarakejaosta

clear

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 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 on clear-ominaisuudella estetty kuvien siirtyminen tekstikappaleiden viereen.

Graphic24

Kuva14: Esimerkki clear-ominaisuuden käytöstä.

display

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.

Graphic25

white-space

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.

Graphic26

Kuva15:Esimerkki white-space-ominaisuuden käytöstä.

Listan ominaisuudet

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

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

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

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

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>

Graphic27

Kuva16: Esimerkki erilaisista listan ominaisuuksista.

Kurssimateriaalin kommentointi

Kommenttien lähettämistoiminto on poistettu käytöstä suuren roskapostimäärän vuoksi 21.6.2007. Oikeita palautteita tuli reilusti alle promillen luokkaa kaikista viesteistä :-( Halutessasi voit lähettää palautteesi suoraan Essin toteuttajille .

Muita artikkeleita aiheesta:
Seuraa polkua:
Edellinen: Tyylilomakkeet
Seuraava: Muita käyttökelpoisia CSS-ominaisuuksia