Siirry sivun sisältöön Avut CSS HTML JS Wp

Laatikko-ominaisuudet

Nämä ominaisuudet koskevat elementtien kokoa, ympärystä ja sijaintia. CSS1 muotoilee elementit käyttäen yksinkertaista laatikkomallia, jossa elementtien muotoilun tuloksena on yksi tai useampi laatikko, mikäli elementti yleensä tulostetaan:

 _______________________________________
|                                       |
|           marginaali (margin)         |
|   _________________________________   |
|  |                                 |  |
|  |        reunus (border)          |  |
|  |   ___________________________   |  |
|  |  |                           |  |  |
|  |  |     puskuri (padding)     |  |  |
|  |  |   _____________________   |  |  |
|  |  |  |                     |  |  |  |
|  |  |  |  elementin sisältö  |  |  |  |
|  |  |  |_____________________|  |  |  |
|  |  |___________________________|  |  |
|  |_________________________________|  |
|_______________________________________|

Ts. elementeille piirretään laatikko, jonka koko määräytyy seuraavan kaavan mukaisesti:

  elementin koko
+ puskuri
+ reunus
+ marginaali
----------------
= laatikon koko

Top Margin

Top Margin -ominaisuudella määritellään elementille ylämarginaali.

Huomiot

• Negatiiviset arvot ovat sallittuja.
• Marginaalit ovat aina läpinäkyviä, jolloin mahdollinen väri tulee emoelementistä.

Esimerkit

<p style="margin-top:auto">
Asiakassovellus päättää ylämarginaalista.</p>

<div style="margin-top:3em">
Tälle elementille on pyydetty reilusti ylämarginaalia.</div>

<p style="margin-top:-1%">
Tämä tekstikappale taas pitäisi olla häiritsevän ylhäällä!</p>

Right Margin

Right Margin -ominaisuudella määritellään elementille oikeanpuoleinen marginaali.

Huomiot

• Negatiiviset arvot ovat sallittuja.
• Marginaalit ovat aina läpinäkyviä, jolloin mahdollinen väri tulee emoelementistä.

Esimerkit

<p style="margin-right:auto">
Asiakassovellus päättää oikeanpuolisesta marginaalista.
Asiakassovellus päättää oikeanpuolisesta marginaalista.
Asiakassovellus päättää oikeanpuolisesta marginaalista.
Asiakassovellus päättää oikeanpuolisesta marginaalista.</p>

<div style="margin-right:2in">
Tälle elementille on pyydetty reilusti marginaalia oikealle.
Tälle elementille on pyydetty reilusti marginaalia oikealle.
Tälle elementille on pyydetty reilusti marginaalia oikealle.
Tälle elementille on pyydetty reilusti marginaalia oikealle.</div>

<p style="margin-right:-2cm">
Tämän elementin marginaali pitäisi ulottua yli laidan.
Tämän elementin marginaali pitäisi ulottua yli laidan.
Tämän elementin marginaali pitäisi ulottua yli laidan.
Tämän elementin marginaali pitäisi ulottua yli laidan.</p>

Bottom Margin

Bottom Margin -ominaisuudella määritellään elementille alamarginaali.

Huomiot

• Negatiiviset arvot ovat sallittuja.
• Marginaalit ovat aina läpinäkyviä, jolloin mahdollinen väri tulee emoelementistä.

Esimerkit

<div style="margin-bottom:2cm">
Tälle elementille on pyydetty reilusti alamarginaalia.
Tälle elementille on pyydetty reilusti alamarginaalia.
Tälle elementille on pyydetty reilusti alamarginaalia.
Tälle elementille on pyydetty reilusti alamarginaalia.</div>

<p style="margin-bottom:auto">
Asiakassovellus päättää alamarginaalista.
Asiakassovellus päättää alamarginaalista.
Asiakassovellus päättää alamarginaalista.
Asiakassovellus päättää alamarginaalista.</p>

<p style="margin-bottom:-4mm">
Tässä on määritetty negatiivinen arvo.
Tässä on määritetty negatiivinen arvo.
Tässä on määritetty negatiivinen arvo.
Tässä on määritetty negatiivinen arvo.</p><hr />

Left Margin

Left Margin -ominaisuudella määritellään elementille vasemmanpuoleinen marginaali.

Huomiot

• Negatiiviset arvot ovat sallittuja.
• Marginaalit ovat aina läpinäkyviä, jolloin mahdollinen väri tulee emoelementistä.

Esimerkit

<p style="margin-left:auto">
Asiakassovellus päättää vasemmanpuolisesta marginaalista.
Asiakassovellus päättää vasemmanpuolisesta marginaalista.
Asiakassovellus päättää vasemmanpuolisesta marginaalista.
Asiakassovellus päättää vasemmanpuolisesta marginaalista.</p>

<div style="margin-left:2cm">
Tälle elementille on pyydetty reilusti marginaalia vasemmalle.
Tälle elementille on pyydetty reilusti marginaalia vasemmalle.
Tälle elementille on pyydetty reilusti marginaalia vasemmalle.
Tälle elementille on pyydetty reilusti marginaalia vasemmalle.</div>

<p style="margin-left:-15mm">
Myös negatiiviset arvot ovat sallittuja.
Myös negatiiviset arvot ovat sallittuja.
Myös negatiiviset arvot ovat sallittuja.
Myös negatiiviset arvot ovat sallittuja.</p>

Margin

Margin on pikakirjoitusominaisuus, jolla voidaan yhdistää kaikki marginaaliin vaikuttavat ominaisuudet yhdeksi ilmoitukseksi.

Huomiot

• Ominaisuudelle ilmoitetaan yhdestä neljään arvoa, joiden vaikutusalue riippuu ilmoitettujen arvojen lukumäärästä seuraavasti:
  • yksi arvo - vaikuttaa kaikkiin neljään marginaaliin
  • kaksi arvoa - ensimmäinen arvo koskee ylä- ja alamarginaalia, toinen arvo vasenta ja oikeaa marginaalia
  • kolme arvoa - ensimmäinen arvo koskee ylämarginaalia, toinen arvo oikeaa marginaalia, kolmas arvo alamarginaalia ja neljäs puuttuva arvo määräytyy vastakkaisen (oikean) puolen arvon mukaan
  • neljä arvoa - ensimmäinen arvo koskee ylämarginaalia, toinen oikeaa marginaalia, kolmas alamarginaalia ja neljäs vasenta marginaalia
• Negatiiviset arvot ovat sallittuja.
• Päällekkäiset (pystysuorat) marginaalit komputoidaan "luhistamalla" käyttämään arvojen enimmäismäärää seuraavasti:
  • positiivisista arvoista isoin jää voimaan
  • negatiivinen arvo suhteutetaan positiiviseen
  • negatiivinen arvo suhteutetaan nollaan, jollei posittivista arvoa ole
• Marginaalit ovat aina läpinäkyviä, jolloin mahdollinen väri tulee emoelementistä.

Esimerkit

<div style="margin:auto">
Asiakassovellus päättää kaikista marginaalista.
Asiakassovellus päättää kaikista marginaalista.
Asiakassovellus päättää kaikista marginaalista.
Asiakassovellus päättää kaikista marginaalista.</div>

<div style="margin:1em">
Sama arvo vaikuttaa kaikkiin neljään marginaaliin.
Sama arvo vaikuttaa kaikkiin neljään marginaaliin.
Sama arvo vaikuttaa kaikkiin neljään marginaaliin.
Sama arvo vaikuttaa kaikkiin neljään marginaaliin.</div>

<div style="margin:7mm 20mm">
Ensimmäinen arvo koskee ylä- ja alamarginaalia,
toinen arvo vasenta ja oikeaa marginaalia.
Ensimmäinen arvo koskee ylä- ja alamarginaalia,
toinen arvo vasenta ja oikeaa marginaalia.</div>

<div style="margin:5px 20px 10px">
Ensimmäinen arvo koskee ylämarginaalia,
toinen arvo oikeaa marginaalia,
kolmas arvo alamarginaalia
ja vasemman marginaalin arvoksi tulee 20 kuvapistettä.</div>

<p style="margin:2.1pc 6ex 13pt 1in">
Kaikki neljä marginaalia on määritetty eri mitta-arvoilla.
Ensimmäinen arvo koskee ylämarginaalia,
toinen oikeaa marginaalia,
kolmas alamarginaalia ja
neljäs vasenta marginaalia.</p>

<div style="background:#ffc;color:#000;margin:1cm">
Tässä on esimerkki marginaalien "luhistumisesta",
jossa vierekkäiset pystysuorat marginaalit
komputoidaan yhdeksi senttimetriksi.</div>
<div style="background:#cff;color:#000;margin:1cm">
Ts., elementtien yhteiseksi marginaaliksi ei muodostu
1cm (alamarginaali) + 1cm (ylämarginaali) = 2cm,
kuten saattaisi odottaa.</div>

Top Padding

Top Padding -ominaisuudella määritellään elementille yläpuskuri (elementin sisällön ja yläreunuksen välinen alue).

Huomiot

Negatiiviset arvot eivät ole sallittuja.

Esimerkit

<div style="background-color:#0ff">
Tämä on tavallinen DIV,
jolle on pyydetty värillinen tausta.</div>

<div style="background-color:yellow;padding-top:3em">
Tämä on tavallinen DIV,
jolle on pyydetty keltainen tausta,
sekä reilusti yläpuskuria.</div>

Right Padding

Right Padding -ominaisuudella määritellään elementille puskuri oikealle (elementin sisällön ja oikean reunuksen välinen alue).

Huomiot

Negatiiviset arvot eivät ole sallittuja.

Esimerkit

<div style="background-color:#0ff">
Tämä on tavallinen DIV,
jolle on pyydetty värillinen tausta.
Tämä on tavallinen DIV,
jolle on pyydetty värillinen tausta.
Tämä on tavallinen DIV,
jolle on pyydetty värillinen tausta.</div>

<div style="background-color:yellow;padding-right:3cm">
Tämä on tavallinen DIV,
jolle on pyydetty keltainen tausta,
sekä reilusti puskuria oikealle.
Tämä on tavallinen DIV,
jolle on pyydetty keltainen tausta,
sekä reilusti puskuria oikealle.
Tämä on tavallinen DIV,
jolle on pyydetty keltainen tausta,
sekä reilusti puskuria oikealle.</div>

Bottom Padding

Bottom Padding -ominaisuudella määritellään elementille alapuskuri (elementin sisällön ja alareunuksen välinen alue).

Huomiot

Negatiiviset arvot eivät ole sallittuja.

Esimerkit

<div style="background-color:#0ff">
Tämä on tavallinen DIV,
jolle on pyydetty värillinen tausta.
</div>

<div style="background-color:yellow;padding-bottom:3ex">
Tämä on tavallinen DIV,
jolle on pyydetty keltainen tausta,
sekä reilusti alapuskuria.
</div>

Left Padding

Left Padding -ominaisuudella määritellään elementille puskuri vasemmalle (elementin sisällön ja vasemman reunuksen välinen alue).

Huomiot

Negatiiviset arvot eivät ole sallittuja.

Esimerkit

<div style="background-color:#0ff">
Tämä on tavallinen DIV,
jolle on pyydetty värillinen tausta.</div>

<div style="background-color:yellow;padding-left:5%">
Tämä on tavallinen DIV,
jolle on pyydetty keltainen tausta,
sekä reilusti puskuria vasemmalle.</div>

Padding

Padding on pikakirjoitusominaisuus, jolla voidaan yhdistää kaikki puskuriominaisuudet yhdeksi ilmoitukseksi.

Huomiot

Ominaisuudelle ilmoitetaan yhdestä neljään arvoa, joiden vaikutusalue riippuu ilmoitettujen arvojen lukumäärästä seuraavasti:

• yksi arvo - vaikuttaa kaikkiin neljään suuntaan
• kaksi arvoa - ensimmäinen arvo koskee ylä- ja alapuskuria, toinen arvo vasenta ja oikeaa puskuria
• kolme arvoa - ensimmäinen arvo koskee yläpuskuria, toinen arvo oikeaa puskuria, kolmas arvo alapuskuria ja neljäs puuttuva arvo määräytyy vastakkaisen (oikean) puolen arvon mukaan
• neljä arvoa - ensimmäinen arvo koskee yläpuskuria, toinen oikeaa puskuria, kolmas alapuskuria ja neljäs vasenta puskuria

Negatiiviset arvot eivät ole sallittuja.

Esimerkit

<p style="background:#ffc;color:#000;padding:1em">
Sama arvo vaikuttaa joka suuntaan.
Sama arvo vaikuttaa joka suuntaan.
Sama arvo vaikuttaa joka suuntaan.
Sama arvo vaikuttaa joka suuntaan.</p>

<p style="background:#ffc;color:#000;padding:7mm 20mm">
Ensimmäinen arvo koskee ylä- ja alapuskuria,
toinen arvo vasenta ja oikeaa puskuria.
Ensimmäinen arvo koskee ylä- ja alapuskuria,
toinen arvo vasenta ja oikeaa puskuria.</p>

<p style="background:#ffc;color:#000;padding:5px 20px 10px">
Ensimmäinen arvo koskee yläpuskuria,
toinen arvo oikeaa puskuria,
kolmas arvo alapuskuria
ja vasemman puskurin arvoksi tulee 20 kuvapistettä.</p>

<p style="background:#ffc;color:#000;padding:2.1pc 6ex 13pt 1in">
Kaikki neljä puskuria on määritetty eri mitta-arvoilla.
Ensimmäinen arvo koskee yläpuskuria,
toinen oikeaa puskuria,
kolmas alapuskuria ja
neljäs vasenta puskuria.</p>

<p style="background:#ffc;color:#000">
Asiakassovellus päättää puskuroinnista.
Asiakassovellus päättää puskuroinnista.
Asiakassovellus päättää puskuroinnista.
Asiakassovellus päättää puskuroinnista.
</p>

<p style="background:#ffc;color:#000;padding:0">
Tästä kappaleesta on asiakassovelluksen
mahdollisesti asettama oletuspuskuri pyydetty pois.
Tästä kappaleesta on asiakassovelluksen
mahdollisesti asettama oletuspuskuri pyydetty pois.
</p>

Top Border Width

Top Border Width -ominaisuudella määritellään elementin yläreunuksen leveys.

Huomiot

Avainsanojen merkitykset ovat:

• thin - kapea
• medium - keskikokoinen
• thick - paksu

Avainsanojen tarkat leveysarvot jäävät kunkin asiakasohjelman määriteltäväksi, mutta ne pysyvät vakiona läpi dokumentin.

Negatiiviset arvot eivät ole sallittuja.

Esimerkit

<p style="border-top:solid;border-top-width:thin">
Tälle kappaleelle on pyydetty ohut yläreunus.</p>

<p style="border-top:solid;border-top-width:medium">
Tälle kappaleelle on pyydetty keskikokoinen yläreunus.</p>

<p style="border-top:solid;border-top-width:thick">
Tälle kappaleelle on pyydetty paksu yläreunus.</p>

<p style="border-top:solid;border-top-width:9px">
Tälle kappaleelle on pyydetty yhdeksän
kuvapisteen paksuinen yläreunus.</p>

<p style="border-top:solid;border-top-width:1cm">
Tälle kappaleelle on pyydetty senttimetrin
paksuinen yläreunus.</p>

Right Border Width

Right Border Width -ominaisuudella määritellään elementin oikean reunuksen leveys.

Huomiot

Avainsanojen merkitykset ovat:

• thin - kapea
• medium - keskikokoinen
• thick - paksu

Avainsanojen tarkat leveysarvot jäävät kunkin asiakasohjelman määriteltäväksi, mutta ne pysyvät vakiona läpi dokumentin.

Negatiiviset arvot eivät ole sallittuja.

Esimerkit

<p style="border-right:solid;border-right-width:thin">
Tälle kappaleelle on pyydetty ohut oikea reunus.</p>

<p style="border-right:solid;border-right-width:medium">
Tälle kappaleelle on pyydetty keskikokoinen oikea reunus.</p>

<p style="border-right:solid;border-right-width:thick">
Tälle kappaleelle on pyydetty paksu oikea reunus.</p>

<p style="border-right:solid;border-right-width:9px">
Tälle kappaleelle on pyydetty yhdeksän kuvapisteen paksuinen
oikea reunus.</p>

<p style="border-right:solid;border-right-width:1cm">
Tälle kappaleelle on pyydetty senttimetrin paksuinen oikea
reunus.</p>

Bottom Border Width

Bottom Border Width -ominaisuudella määritellään elementin alareunuksen leveys.

Huomiot

Avainsanojen merkitykset ovat:

• thin - kapea
• medium - keskikokoinen
• thick - paksu

Avainsanojen tarkat leveysarvot jäävät kunkin asiakasohjelman määriteltäväksi, mutta ne pysyvät vakiona läpi dokumentin.

Negatiiviset arvot eivät ole sallittuja.

Esimerkit

<p style="border-bottom:solid;border-bottom-width:thin">
Tälle kappaleelle on pyydetty ohut alareunus.</p>

<p style="border-bottom:solid;border-bottom-width:medium">
Tälle kappaleelle on pyydetty keskikokoinen alareunus.</p>

<p style="border-bottom:solid;border-bottom-width:thick">
Tälle kappaleelle on pyydetty paksu alareunus.</p>

<p style="border-bottom:solid;border-bottom-width:9px">
Tälle kappaleelle on pyydetty yhdeksän kuvapisteen
paksuinen alareunus.</p>

<p style="border-bottom:solid;border-bottom-width:1cm">
Tälle kappaleelle on pyydetty senttimetrin paksuinen
alareunus.</p>

Left Border Width

Left Border Width -ominaisuudella määritellään elementin vasemman reunuksen leveys.

Huomiot

Avainsanojen merkitykset ovat:

• thin - kapea
• medium - keskikokoinen
• thick - paksu

Avainsanojen tarkat leveysarvot jäävät kunkin asiakasohjelman määriteltäväksi, mutta ne pysyvät vakiona läpi dokumentin.

Negatiiviset arvot eivät ole sallittuja.

Esimerkit

<p style="border-left:solid;border-left-width:thin">
Tälle kappaleelle on pyydetty ohut vasen reunus.</p>

<p style="border-left:solid;border-left-width:medium">
Tälle kappaleelle on pyydetty keskikokoinen vasen reunus.</p>

<p style="border-left:solid;border-left-width:thick">
Tälle kappaleelle on pyydetty paksu vasen reunus.</p>

<p style="border-left:solid;border-left-width:9px">
Tälle kappaleelle on pyydetty yhdeksän kuvapisteen paksuinen
vasen reunus.</p>

<p style="border-left:solid;border-left-width:1cm">
Tälle kappaleelle on pyydetty senttimetrin paksuinen vasen
reunus.</p>

Border Width

Border Width on pikakirjoitusominaisuus, jolla voidaan yhdistää kaikki reunuksen leveyteen vaikuttavat ominaisuudet yhdeksi ilmoitukseksi.

Huomiot

Avainsanojen merkitykset ovat:

• thin - kapea
• medium - keskikokoinen
• thick - paksu

Avainsanojen tarkat leveysarvot jäävät kunkin asiakasohjelman määriteltäväksi, mutta ne pysyvät vakiona läpi dokumentin.

Ominaisuudelle ilmoitetaan yhdestä neljään arvoa, joiden vaikutusalue riippuu ilmoitettujen arvojen lukumäärästä seuraavasti:

• yksi arvo - vaikuttaa kaikkiin neljään reunukseen
• kaksi arvoa - ensimmäinen arvo koskee ylä- ja alareunusta, toinen arvo vasenta ja oikeaa reunusta
• kolme arvoa - ensimmäinen arvo koskee yläreunusta, toinen arvo oikeaa reunusta, kolmas arvo alareunusta ja neljäs puuttuva arvo määräytyy vastakkaisen (oikean) puolen arvon mukaan
• neljä arvoa - ensimmäinen arvo koskee yläreunusta, toinen oikeaa reunusta, kolmas alareunusta ja neljäs vasenta reunusta

Negatiiviset arvot eivät ole sallittuja.

Esimerkit

<p style="border-style:solid;border-width:thin">
Sama arvo vaikuttaa kaikkiin neljään reunukseen.
Sama arvo vaikuttaa kaikkiin neljään reunukseen.
Sama arvo vaikuttaa kaikkiin neljään reunukseen.
Sama arvo vaikuttaa kaikkiin neljään reunukseen.</p>

<p style="border-style:solid;border-width:thin medium">
Ensimmäinen arvo koskee ylä- ja alareunusta,
toinen arvo vasenta ja oikeaa reunusta.
Ensimmäinen arvo koskee ylä- ja alareunusta,
toinen arvo vasenta ja oikeaa reunusta.</p>

<p style="border-style:solid;border-width:thin medium thick">
Ensimmäinen arvo koskee yläreunusta,
toinen arvo oikeaa reunusta,
kolmas arvo alareunusta
ja vasemman reunuksen arvoksi tulee
oikean <var>medium</var>.</p>

<p style="border-style:solid;border-width:8px 6px 4px 2px">
Ensimmäinen arvo koskee yläreunusta,
toinen oikeaa reunusta,
kolmas alareunusta ja
neljäs vasenta reunusta.</p>

Border Color

Border Color -ominaisuudella määritellään elementin reunuksen väri.

Huomiot

Ominaisuudelle ilmoitetaan yhdestä neljään arvoa, joiden vaikutusalue riippuu ilmoitettujen arvojen lukumäärästä seuraavasti:

• yksi arvo - vaikuttaa kaikkiin neljään reunukseen
• kaksi arvoa - ensimmäinen arvo koskee ylä- ja alareunusta, toinen arvo vasenta ja oikeaa reunusta
• kolme arvoa - ensimmäinen arvo koskee yläreunusta, toinen arvo oikeaa reunusta, kolmas arvo alareunusta ja neljäs puuttuva arvo määräytyy vastakkaisen (oikean) puolen arvon mukaan
• neljä arvoa - ensimmäinen arvo koskee yläreunusta, toinen oikeaa reunusta, kolmas alareunusta ja neljäs vasenta reunusta

Esimerkit

<p style="border-style:solid;border-color:#0ff;">
Sama väriarvo vaikuttaa joka suunnassa.
Sama väriarvo vaikuttaa joka suunnassa.
Sama väriarvo vaikuttaa joka suunnassa.
Sama väriarvo vaikuttaa joka suunnassa.</p>

<p style="border-style:solid;border-color:#0ff #00f;">
Ensimmäinen väriarvo koskee ylä- ja alareunusta,
toinen väriarvo vasenta ja oikeaa reunusta.
Ensimmäinen väriarvo koskee ylä- ja alareunusta,
toinen väriarvo vasenta ja oikeaa reunusta.</p>

<p style="border-style:solid;border-color:#0ff #00f #000;">
Ensimmäinen väriarvo koskee yläreunusta,
toinen väriarvo oikeaa reunusta,
kolmas väriarvo alareunusta
ja vasemman reunuksen väri määrittyy
vastakkaisen (oikean) puolen arvon mukaan.</p>

<p style="border-style:solid;border-color:#0ff #00f #000 #f0f;">
Kaikki neljä reunusta on määritetty eri väreillä.
Ensimmäinen arvo koskee yläreunusta,
toinen oikeaa reunusta,
kolmas alareunusta ja
neljäs vasenta reunusta.</p>

<p style="border-style:solid">
Tämän kappaleen reunuksen väri määrittyy elementin
edustan (color-ominaisuuden) mukaan, koska sen väriä
ei erikseen ilmoiteta.</p>

Border Style

Border Style -ominaisuudella määritellään elementin rajaviivan tyyli. Ominaisuus on oltava erikseen määritettynä, jotta reunuksesta tulisi näkyvä.

Huomiot

Avainsanojen merkitykset ovat:

• none - rajaviivaa ei piirretä (border-width -omimaisuuden arvoksi muodostuu 0)
• solid - rajaviiva muodostuu yhtenäisestä viivasta
• dotted - pyytää pistejonosta muodostuvaa rajaviivaa
• dashed - pyytää katkoviivoista muodostuvaa rajaviivaa
• double - pyytää kahta tyhjällä välillä erotettua yhtenäisestä viivaa (kokonaisuuden summa vastaa border-width -ominaisuuden arvoa, joten kovin pienet leveydet eivät toimi tämän arvon kanssa)
• groove - pyytää kaiverretulta viivalta vaikuttavaa kolmiulotteista efektiä
• ridge - pyytää kohotetulta viivalta vaikuttavaa kolmiulotteista efektiä (edellisen vastakohta)
• inset - pyytää upotetulta laatikolta vaikuttavaa kolmiulotteista efektiä
• outset - pyytää kohotetulta laatikolta vaikuttavaa kolmiulotteista efektiä (edellisen vastakohta)

CSS1-standardi antaa asiakasohjelmille oikeuden tulkita kaikki seitsemän monimutkaisempaa arvoa solid-arvoisena.

Ominaisuudelle ilmoitetaan yhdestä neljään arvoa, joiden vaikutusalue riippuu ilmoitettujen arvojen lukumäärästä seuraavasti:

• yksi arvo - vaikuttaa kaikkiin neljään reunukseen
• kaksi arvoa - ensimmäinen arvo koskee ylä- ja alareunusta, toinen arvo vasenta ja oikeaa reunusta
• kolme arvoa - ensimmäinen arvo koskee yläreunusta, toinen arvo oikeaa reunusta, kolmas arvo alareunusta ja neljäs puuttuva arvo määräytyy vastakkaisen (oikean) puolen arvon mukaan
• neljä arvoa - ensimmäinen arvo koskee yläreunusta, toinen oikeaa reunusta, kolmas alareunusta ja neljäs vasenta reunusta

Esimerkit

<p style="border-style:solid;border-width:thin;">
Sama arvo vaikuttaa joka suunnassa.
Sama arvo vaikuttaa joka suunnassa.
Sama arvo vaikuttaa joka suunnassa.
Sama arvo vaikuttaa joka suunnassa.</p>

<p style="border-style:dotted solid;border-width:medium;">
Ensimmäinen arvo koskee ylä- ja alareunusta,
toinen arvo vasenta ja oikeaa reunusta.
Ensimmäinen arvo koskee ylä- ja alareunusta,
toinen arvo vasenta ja oikeaa reunusta.</p>

<p style="border-style:dotted solid dashed;border-width:thick;">
Ensimmäinen arvo koskee yläreunusta,
toinen arvo oikeaa reunusta,
kolmas arvo alareunusta
ja vasen rajaviiva määrittyy
vastakkaisen (oikean) puolen arvon mukaan.</p>

<p style="border-style:double dotted dashed none;border-width:1ex;">
Kaikki neljä reunusta on määritetty eri arvoilla.
Ensimmäinen arvo koskee yläreunusta,
toinen oikeaa reunusta,
kolmas alareunusta ja
neljäs vasenta reunusta.</p>

<p style="border-style:groove;border-width:thick;">
Pyydetään kolmiulotteiselta kaiverrukselta vaikuttavaa efektiä.
Pyydetään kolmiulotteiselta kaiverrukselta vaikuttavaa efektiä.
Pyydetään kolmiulotteiselta kaiverrukselta vaikuttavaa efektiä.
Pyydetään kolmiulotteiselta kaiverrukselta vaikuttavaa efektiä.
</p>

<p style="border-style:ridge;border-width:.5em;">
Pyydetään edellisen esimerkin vastakohtaista efektiä.
Pyydetään edellisen esimerkin vastakohtaista efektiä.
Pyydetään edellisen esimerkin vastakohtaista efektiä.
Pyydetään edellisen esimerkin vastakohtaista efektiä.</p>

<p style="border-style:inset;border-width:5px;">
Pyydetään upotetulta laatikolta vaikuttavaa kolmiulotteista efektiä.
Pyydetään upotetulta laatikolta vaikuttavaa kolmiulotteista efektiä.
Pyydetään upotetulta laatikolta vaikuttavaa kolmiulotteista efektiä.
Pyydetään upotetulta laatikolta vaikuttavaa kolmiulotteista efektiä.
</p>

<p style="border-style:outset;border-width:5px;">
Pyydetään edellisen esimerkin vastakohtaista efektiä.
Pyydetään edellisen esimerkin vastakohtaista efektiä.
Pyydetään edellisen esimerkin vastakohtaista efektiä.
Pyydetään edellisen esimerkin vastakohtaista efektiä.</p>

<p style="border-width:5px;border-color:red;">
Tälle kappalleelle ei piirretä rajaviivaa ollenkaan,
huolimatta leveys- ja väriarvoista,
koska reunuksen tyyliä ei määritetä missään.</p>

Top Border

Top Border on pikakirjoitusominaisuus, jolla määritellään elementin yläreunuksen leveys, tyyli ja väri.

Huomiot

• Ominaisuus hyväksyy vain yhden arvon kullekin yksittäiselle ominaisuudelle.
• Kaikkia yksittäisiä ominaisuuksia ei tarvitse ilmoittaa, jolloin niiden alku- tai periytyneet arvot jäävät voimaan.

Esimerkit

<p style="border-top:1px solid red;">
Tälle kappalelle on pyydetty yhden kuvapisteen
levyinen yhtenäinen punainen yläreunus.</p>

<p style="border-top:5px double;">
Reunuksen väri määrittyy elementin edustavärin mukaan,
koska se puuttuu ilmoituksesta. </p>

<p style="border-top:5px red;">
Tässä reunusta ei piirretä lainkaaan, koska
<code>border-style</code>-ominaisuutta ei ilmoiteta,
joten sen alkuarvo <var>0</var> astuu voimaan.
Täten leveys- ja värimääritys menettävät merkityksensä,
eikä tuota viiden kuvapisteen tilaa edes varata.</p>

<p style="border-top:dashed teal;">
Reunuksen leveys määrittyy <code>border-width</code>
-ominaisuuden alkuarvon mukaan.</p>

Right Border

Right Border on pikakirjoitusominaisuus, jolla määritellään elementin oikean reunuksen leveys, tyyli ja väri.

Huomiot

• Ominaisuus hyväksyy vain yhden arvon kullekin yksittäiselle ominaisuudelle.
• Kaikkia yksittäisiä ominaisuuksia ei tarvitse ilmoittaa, jolloin niiden alku- tai periytyneet arvot jäävät voimaan.

Esimerkit

<p style="border-right:1cm solid red;">
Tälle kappalelle on pyydetty yhden senttimetrin
levyinen yhtenäinen punainen oikea reunus.</p>

<p style="border-right:5px double;">
Reunuksen väri määrittyy elementin edustavärin mukaan,
koska se puuttuu ilmoituksesta. </p>

<p style="border-right:5px red;">
Tässä reunusta ei piirretä lainkaaan, koska
<code>border-style</code>-ominaisuutta ei ilmoiteta,
joten sen alkuarvo <var>0</var> astuu voimaan.
Täten leveys- ja värimääritys menettävät merkityksensä,
eikä tuota viiden kuvapisteen tilaa edes varata.</p>

<p style="border-right:dashed teal;">
Reunuksen leveys määrittyy <code>border-width</code>
-ominaisuuden alkuarvon mukaan.
Reunuksen leveys määrittyy <code>border-width</code>
-ominaisuuden alkuarvon mukaan.</p>

Bottom Border

Bottom Border on pikakirjoitusominaisuus, jolla määritellään elementin alareunuksen leveys, tyyli ja väri.

Huomiot

• Ominaisuus hyväksyy vain yhden arvon kullekin yksittäiselle ominaisuudelle.
• Kaikkia yksittäisiä ominaisuuksia ei tarvitse ilmoittaa, jolloin niiden alku- tai periytyneet arvot jäävät voimaan.

Esimerkit

<p style="border-bottom:1px solid red;">
Tälle kappalelle on pyydetty yhden kuvapisteen
levyinen yhtenäinen punainen alareunus.</p>

<p style="border-bottom:5px double;">
Reunuksen väri määrittyy elementin edustavärin mukaan,
koska sen määritys puuttuu ilmoituksesta.</p>

<p style="border-bottom:5px red;">
Tässä reunusta ei piirretä lainkaaan, koska
<code>border-style</code>-ominaisuutta ei ilmoiteta,
joten sen alkuarvo <var>0</var> astuu voimaan.
Täten leveys- ja värimääritys menettävät merkityksensä,
eikä tuota viiden kuvapisteen tilaa edes varata.</p>

<p style="border-bottom:dashed teal;">
Reunuksen leveys määrittyy <code>border-width</code>
-ominaisuuden alkuarvon mukaan.</p>

Left Border

Left Border on pikakirjoitusominaisuus, jolla määritellään elementin vasemman reunuksen leveys, tyyli ja väri.

Huomiot

• Ominaisuus hyväksyy vain yhden arvon kullekin yksittäiselle ominaisuudelle.
• Kaikkia yksittäisiä ominaisuuksia ei tarvitse ilmoittaa, jolloin niiden alku- tai periytyneet arvot jäävät voimaan.

Esimerkit

<p style="border-left:1cm solid red;">
Tälle kappalelle on pyydetty yhden senttimetrin
levyinen yhtenäinen punainen vasen reunus.</p>

<p style="border-left:5px double;">
Reunuksen väri määrittyy elementin edustavärin mukaan,
koska se puuttuu ilmoituksesta.</p>

<p style="border-left:5px red;">
Tässä reunusta ei piirretä lainkaaan, koska
<code>border-style</code>-ominaisuutta ei ilmoiteta,
joten sen alkuarvo <var>0</var> astuu voimaan.
Täten leveys- ja värimääritys menettävät merkityksensä,
eikä ilmoitettua viiden kuvapisteen tilaa edes varata.</p>

<p style="border-left:dashed teal;">
Reunuksen leveys määrittyy <code>border-width</code>
-ominaisuuden alkuarvon mukaan.
Reunuksen leveys määrittyy <code>border-width</code>
-ominaisuuden alkuarvon mukaan.</p>

Border

Border on pikakirjoitusominaisuus, jolla yhdistetään kaikki neljään reunukseen vaikuttavat ominaisuudet yhdeksi ilmoitukseksi.

Huomiot

Tällä pikakirjoitusominaisuudella ei voi asettaa erilaisia arvoja eri reunuksille.

Esimerkit

<p style="border:1cm solid red;">
Tälle kappalelle on pyydetty yhden senttimetrin
levyinen yhtenäinen punainen reunus.</p>

<p style="border:5px double;">
Reunuksen väri määrittyy elementin edustavärin mukaan,
koska se puuttuu ilmoituksesta.</p>

<p style="border:5px red;">
Tässä reunusta ei piirretä lainkaaan, koska
<code>border-style</code>-ominaisuutta ei ilmoiteta,
joten sen alkuarvo <var>0</var> astuu voimaan.
Täten leveys- ja värimääritys menettävät merkityksensä,
eikä ilmoitettua viiden kuvapisteen tilaa edes varata.</p>

<p style="border:dashed teal;">
Reunuksen leveys määrittyy <code>border-width</code>
-ominaisuuden alkuarvon mukaan.</p>

Width

Width-ominaisuudella määritellään elementin leveys.

Huomiot

• Korvattavat elementit ovat sellaisia, jotka tavalla tai toisella tuovat kokotietoja mukanansa, esim. kuvat ja tekstilaatikot. Korvattavuutta havainnollistaa hyvin esim. IMG-elementti, joka yleisesti korvataan SRC-attribuutissa määritetyllä kuvalla.
• Negatiiviset arvot eivät ole sallittuja.

Esimerkit

<p>Kuvan luontainen koko (75×75) säilyy: 
<img style="width:auto;" src="../text/testi.jpg"
 alt="testikuva" /></p>

<p>Kuvan leveyttä kasvatetaan 25-pikselillä: 
<img style="width:100px;" src="../text/testi.jpg"
 alt="testikuva" /> jolloin kuvan korkeuskin
skaalautuu, koska korkeuden alkuarvo on <var>auto</var>. 
</p>

<div style="width:250px;border:1px solid"><img
 style="width:50%;" src="../text/testi.jpg"
 alt="testikuva" />Kuvan leveys tulisi olla
puolet emolaatikosta.</div>

<p><button style="width:75%;">Leveä esimerkkinappi?
</button></p>

Height

Height-ominaisuudella määritellään elementin korkeus.

Huomiot

• Korvattavat elementit ovat sellaisia, jotka tavalla tai toisella tuovat kokotietoja mukanansa, esim. kuvat ja tekstilaatikot. Korvattavuutta havainnollistaa hyvin esim. IMG-elementti, joka yleisesti korvataan SRC-attribuutissa määritetyllä kuvalla.
• Negatiiviset arvot eivät ole sallittuja.
• CSS1-standardi antaa asiakasohjelmille oikeuden ohittaa muiden kuin korvattavien elementtien korkeusmuutokset.

Esimerkit

<p>Kuvan luontainen koko (75×75) säilyy: 
<img style="height:auto;" src="../text/testi.jpg"
 alt="testikuva" /></p>

<p>Kuvan korkeutta kasvatetaan 25-pikselillä: 
<img style="height:100px;" src="../text/testi.jpg"
 alt="testikuva" /> jolloin kuvan leveyskin
skaalautuu, koska leveyden alkuarvo on <var>auto</var>. 
</p>

<p><button style="height:2cm;">Korkea esimerkkinappi?
</button></p>

<p style="height:120px;border:1px solid"><img
 style="height:50%;" src="../text/testi.jpg"
 alt="testikuva" />Tämä esimerkki on CSS2-standardin mukainen,
jossa korkeuden arvoksi voidaan antaa myös prosenttiarvo, mikäli
emolaatikon korkeus on eksplisiittisesti ilmoitettu. Kuvan
esityskooksi tulisi komputoitua 60×60-kuvapistettä.</p>

Float

Float-ominaisuudella voidaan asettaa laatikko normaalin elementtivirran ulkopuolelle, kelluvaksi.

Huomiot

• Avainsanojen merkitykset ovat:
  • left - laatikko kelluu vasemmalla
  • right - laatikko kelluu oikealla
  • none - ei kelluntaa
• Kelluvat laatikot saavat automaattisesti display-arvokseen block.

Esimerkit

<p>Kaksi kuvaa, toinen kelluva, toinen ei. Tarkkaile kuvien
käyttäytymistä muuntelemalla selainikkunan kokoa.
<img src="../class/star.gif" alt="Esimerkki kelluvasta kuvasta."
 style="float:right;border:1px dotted red;" /> Kaksi kuvaa,
toinen kelluva, toinen ei. Tarkkaile kuvien käyttäytymistä
muuntelemalla selainikkunan kokoa. Kaksi kuvaa, toinen
kelluva, toinen ei. Tarkkaile kuvien käyttäytymistä
muuntelemalla selainikkunan kokoa. Kaksi kuvaa,
toinen kelluva, toinen ei. Tarkkaile kuvien käyttäytymistä
muuntelemalla selainikkunan kokoa. Kaksi kuvaa, toinen
kelluva, toinen ei. Tarkkaile kuvien käyttäytymistä
muuntelemalla selainikkunan kokoa.
<img src="../class/star.gif"
 alt="Esimerkki ei-kelluvasta kuvasta."
 style="float:none;" /> Kaksi kuvaa, toinen kelluva,
toinen ei. Tarkkaile kuvien käyttäytymistä muuntelemalla
selainikkunan kokoa. </p>

<p>Esimerkki kelluvasta laatikosta, jolle on asetettu reunus,
marginaali ja leveys.
<span style="float:left;border:1px solid;margin:1em;width:6em;">
Esimerkki kelluvasta laatikosta!</span> Esimerkki kelluvasta
laatikosta, jolle on asetettu reunus, marginaali ja leveys.
Esimerkki kelluvasta laatikosta, jolle on asetettu reunus,
marginaali ja leveys. Esimerkki kelluvasta laatikosta, jolle on
asetettu reunus, marginaali ja leveys. Esimerkki kelluvasta
laatikosta, jolle on asetettu reunus, marginaali ja leveys.
Esimerkki kelluvasta laatikosta, jolle on asetettu reunus,
marginaali ja leveys. Esimerkki kelluvasta laatikosta, jolle
on asetettu reunus, marginaali ja leveys. Esimerkki kelluvasta
laatikosta, jolle on asetettu reunus, marginaali ja leveys.
Esimerkki kelluvasta laatikosta, jolle on asetettu reunus,
marginaali ja leveys. Esimerkki kelluvasta laatikosta,
jolle on asetettu reunus, marginaali ja leveys.</p>

Clear

Clear-ominaisuudella voidaan määrittää sallitaanko elementin rinnalle kelluvia laatikoita.

Huomiot

• Avainsanojen merkitykset ovat:
  • none - kelluvat laatikot ovat sallittuja kummallakin puolella
  • left - ei kelluvia laatikoita vasemmalle puolelle
  • right - ei kelluvia laatikoita oikealle puolelle
  • both - ei kelluvia laatikoita rinnalle
• CSS2:ssa ominaisuus on korjattu koskemaan vain lohkotason elementtejä.

Esimerkit

<p>Kelluva kuva oikealla. Tarkkaile kuvan
käyttäytymistä muuntelemalla selainikkunan kokoa.
<img src="../class/star.gif"
 alt="Esimerkki kelluvasta kuvasta."
 style="float:right;border:1px dotted red;" />
<span style="clear:right;color:red;display:block">
Selain ei saisi hyväksyä tätä elementtiä kelluvan kuvan
rinnalle, sen vasemmalle puolelle.</span> Kelluva kuva
oikealla. Tarkkaile kuvan käyttäytymistä muuntelemalla
selainikkunan kokoa.</p>

<p>Esimerkki kelluvasta laatikosta, jolle on asetettu reunus,
marginaali ja leveys.
<span style="float:left;border:1px solid;margin:1em;width:6em;">
Esimerkki kelluvasta laatikosta!</span> Esimerkki kelluvasta
laatikosta, jolle on asetettu reunus, marginaali ja leveys.
<span style="clear:both;color:red;display:block">Selain ei
saisi hyväksyä tätä elementtiä kelluvien laatikoiden rinnalle.
</span></p>