Päivitetty: 10.03.2003

Laatikko

Kaikki CSS-säännöt koostuvat laatikoista (Box). Tai ehkä on parempi sanoa, että jokaisen (x)HTML-elementin ympärillä on laatikko, tosin se on oletuksena läpinäkyvä. Jokaisella laatikolle voidaan määritellä leveys ja korkeus sekä määritllä kuinka laatikot kiertävät sen. Laatikon koostumus on sisältäpäin lukien:

Sisältö
HTML-elementtejä kuten: tekstiä, kuvia, listoja, linkkejä yms.
Täyte (Padding)
Sisällön ja reunuksen välinen tyhjä tila.
Reunus (Border)
Määrittelee laatikon reunaviivan tyylin
Marginaali (Margin)
Laatikon ympärillä oleva tyhjä tila.
Marginaalit:   Reunukset:   Koot ja kierrot:
   
Täytteet:      
     

Laatikko


margin-top

Ylämarginaali.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: auto | <pituus> | <%> (Myös negatiiviset arvot ovat käytössä.)
Oletusarvo: 0
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: %-arvo viittaa lähimpään block-elementin leveyteen.

margin-top esimerkki

margin-top:50px

Lisää esimerkkejä.

<< Alkuun


margin-right

Oikea marginaali.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: auto | <pituus> | <%> (Myös negatiiviset arvot ovat käytössä.)
Oletusarvo: 0
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: %-arvo viittaa lähimpään block-elementin leveyteen.

margin-right esimerkki

margin-right: 60px

Lisää esimerkkejä.

<< Alkuun


margin-bottom

Alamarginaali.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: auto | <pituus> | <%> (Myös negatiiviset arvot ovat käytössä.)
Oletusarvo: 0
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: %-arvo viittaa lähimpään block-elementin leveyteen.

margin-bottom esimerkki

margin-bottom: 40px

Lisää esimerkkejä.

<< Alkuun


margin-left

Vasen marginaali.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: auto | <pituus> | <%> (Myös negatiiviset arvot ovat käytössä.)
Oletusarvo: 0
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: %-arvo viittaa lähimpään block-elementin leveyteen.

margin-left esimerkki

margin-left:30px

Lisää esimerkkejä.

<< Alkuun


margin

Margin on pikakirjoite, joka yhdistää seuraat ominaisuudet: margin-top, margin-right, margin-bottom ja margin-left.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: [ auto | <pituus> | <%> ] {1,4}
Oletusarvo: Ei käytössä pikakirjoitteessa
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: %-arvo viittaa lähimpään block-elementin leveyteen.

margin esimerkki

margin: 30px

Lisää esimerkkejä.

<< Alkuun


padding-top

Ylätäyte.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: <pituus> | <%> (Ei negatiivisia arvoja)
Oletusarvo: 0
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: %-arvo viittaa lähimpään block-elementin leveyteen.

padding-top esimerkki

padding-top: 30px

Lisää esimerkkejä.

<< Alkuun


padding-right

Oikeatäyte.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: <pituus> | <%> (Ei negatiivisia arvoja)
Oletusarvo: 0
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: %-arvo viittaa lähimpään block-elementin leveyteen.

padding-right esimerkki

padding-right: 40px | - - - - - - - - - - - - - - - - |

Lisää esimerkkejä.

<< Alkuun


padding-bottom

Alatäyte.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: <pituus> | <%> (Ei negatiivisia arvoja)
Oletusarvo: 0
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: %-arvo viittaa lähimpään block-elementin leveyteen.

padding-bottom esimerkki

padding-bottom: 30px

Lisää esimerkkejä.

<< Alkuun


padding-left

Vasentäyte.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: <pituus> | <%> (Ei negatiivisia arvoja)
Oletusarvo: 0
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: %-arvo viittaa lähimpään block-elementin leveyteen.

padding-left esimerkki

padding-left: 40px

Lisää esimerkkejä.

<< Alkuun


padding

Padding on pikakirjoite, joka yhdistää seuraat ominaisuudet: paddingn-top, padding-right, padding-bottom ja padding-left.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: <pituus> | <%> {1,4} (Ei negatiivisia arvoja)
Oletusarvo: Ei käytössä pikakirjoitteessa
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: %-arvo viittaa lähimpään block-elementin leveyteen.

padding esimerkki

|- - padding: 25px - -|

Lisää esimerkkejä.

<< Alkuun


border-top-width

Yläreunan viivan leveys.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: thin | medium | thick | <pituus>
Oletusarvo: medium
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Ei

border-top-width esimerkki

border-top-width: 0.3em

Lisää esimerkkejä.

<< Alkuun


border-right-width

Oikean reunan viivan leveys.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: thin | medium | thick | <pituus>
Oletusarvo: medium
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Ei

border-right-width esimerkki

{ border-right-width: 6px }

Lisää esimerkkejä.

<< Alkuun


border-bottom-width

Alareunan viivan leveys.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: thin | medium | thick | <pituus>
Oletusarvo: medium
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Ei

border-bottom-width esimerkki

border-bottom-width: thick

Lisää esimerkkejä.

<< Alkuun


border-left-width

Vasemman reunan viivan leveys.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: thin | medium | thick | <pituus>
Oletusarvo: medium
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Ei

border-left-width esimerkki

{ border-left-width: 8px }

Lisää esimerkkejä.

<< Alkuun


border-width

Border-width on pikakirjoite, joka yhdistää seuraat ominaisuudet: border-top-width, border-right-width, border-bottom-width ja border-left-width.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: thin | medium | thick | <pituus> {1,4}
Oletusarvo: Ei käytössä pikakirjoitteessa
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Ei

border-width esimerkki

border-width: medium

Lisää esimerkkejä.

<< Alkuun


border-color

Laatikon reunojen värit.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: <väri> {1,4}
Oletusarvo: Elementin oletusväri (yleensä musta)
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Ei

border-color esimerkki

border-color: #00CC33

Lisää esimerkkejä.

<< Alkuun


border-style

Laatikon reunaviivan tyyli.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Oletusarvo: none
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Ei

border-style esimerkki

border-style: double

Lisää esimerkkejä.

!Arvot 'dotted' ja 'dashed' toimivat IE:ssä vasta versiosta 5.5 lähtien.

<< Alkuun


border-top

Border-top on pikakirjoite, joka yhdistää seuraat ominaisuudet: border-top-width, border-style ja color.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4*, Opera 3.6) (*NN 4.73 ei!)
Sallitut arvot: <border-top-width> || <border-style> || <color>
Oletusarvo: Ei käytössä pikakirjoitteessa
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Ei

border-top esimerkki

border-top:thick ridge skyblue

Lisää esimerkkejä.

<< Alkuun


border-right

Border-right on pikakirjoite, joka yhdistää seuraat ominaisuudet: border-right-width, border-style ja color.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4*, Opera 3.6) (*NN 4.73 ei!)
Sallitut arvot: <border-right-width> || <border-style> || <color>
Oletusarvo: Ei käytössä pikakirjoitteessa
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Ei

border-right esimerkki

border-right: 5px Ridge Gold

Lisää esimerkkejä.

<< Alkuun


border-bottom

Border-bottom on pikakirjoite, joka yhdistää seuraat ominaisuudet: border-bottom-width, border-style ja color.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: <border-bottom-width> || <border-style> || <color>
Oletusarvo: Ei käytössä pikakirjoitteessa
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Ei

border-bottom esimerkki

border-bottom: 6px groove blue

Lisää esimerkkejä.

<< Alkuun


border-left

Border-left on pikakirjoite, joka yhdistää seuraat ominaisuudet: border-left-width, border-style ja color.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: <border-left-width> || <border-style> || <color>
Oletusarvo: Ei käytössä pikakirjoitteessa
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Ei

border-left esimerkki

border-left: 10px Inset Coral

Lisää esimerkkejä.

<< Alkuun


border

Border on pikakirjoite, joka yhdistää seuraat ominaisuudet: border-width, border-style ja color.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: <border-width> || <border-style> || <color>
Oletusarvo: Ei käytössä pikakirjoitteessa
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Ei

border esimerkki

border: 4px dotted blue

Lisää esimerkkejä.

<< Alkuun


width

Määrittää elementin leveyden.

Yhteensopivuus: CSS1 ja CSS2 (IE5, NN4, Opera 3.6)
Sallitut arvot: <pituus> | <%-arvo> | auto
Oletusarvo: auto
Käyttö: block-level elementit sekä korvatut elementit
Periytyvä: Ei
Prosenttiarvo: Viittaa äitielementin leveyteen.

width esimerkki

width: 80px

Lisää esimerkkejä.

<< Alkuun


height

Määrittää elementin korkeuden.

Yhteensopivuus: CSS1 ja CSS2 (IE5, NN4*, Opera 3.6) (NN 4.73 ei!)
Sallitut arvot: <pituus> | auto
Oletusarvo: auto
Käyttö: block-level elementit sekä korvatut elementit
Periytyvä: Ei
Prosenttiarvo: Ei

height esimerkki

height: 50px

Lisää esimerkkejä.

<< Alkuun


float

Määrittelee lohkon jälkeen tulevien elementtien kierron.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN 4.7, Opera 3.6)
Sallitut arvot: left | right | none
Oletusarvo: none
Käyttö: kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Ei

float esimerkki

 
Lohko A
Lohko A
Lohko A
Lohko A

Lohkolla A on arvo {float: left}. Tämä määrittää sen pysymään vasemmalla ja seuraava lohko (tämä teksti) kiertää sen oikealta.

Lisää esimerkkejä.

!'Lohko A' on tavallinen <div> -elementti, jolle on määritetty pituus (width 70px), taustaväri sekä reunus.

Huomaa, että IE 4 ei tue kunnolla 'width' ominaisuutta, joten teksti-lohkojen kierto ei toimi siinä kunnolla.

<< Alkuun


clear

Katkaisee lohkotyyliä kiertävän tekstin.

Yhteensopivuus: CSS1 ja CSS2 (IE4, Opera 3.6)
Sallitut arvot: none | left | right | both
Oletusarvo: none
Käyttö: kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Ei

clear esimerkki

Esimerkki kuva: Sininen pallo harmaalla taustallaKuvalla on arvo {float: right}, joten tämä teksti kiertää sen vasemmalta.

Kierto katkaistaan arvolla {clear:right}.

Lisää esimerkkejä.

!Kierron katkaisussa 'clear' ja 'float' arvot on oltava samat.

<< Alkuun


© Petteri Perälä 1999 - 2003.
E-mail: [ petepe@mbnet.fi ].

Valid CSS! Valid HTML 4.01!