Laatikon ominaisuudet (Box Properties)

Top Margin

margin-top ominaisuus asettaa elementin ylämarginaalin pituus tai prosenttiarvolla. Prosenttiarvot ovat suhteessa ylemmän elementin leveyteen. Negatiiviset arvot ovat sallittuja.

Esimerkiksi seuraava tyylisääntö poistaa sivun ylämarginaalin:

BODY { margin-top : 0 }

Huomaa että vierekkäiset pystysuuntaiset marginaalit ovat yhdistettyjä marginaalin maksimi arvojen käyttämiseksi.

Right Margin

margin-right ominaisuus asettaa elementin oikean marginaalin pituus tai prosenttiarvolla. Prosenttiarvot ovat suhteessa ylemmän elementin leveyteen. Negatiiviset arvot ovat sallittuja.

Esimerkki:

P.narrow { margin-right : 50% }

Vierekkäiset vaakasuuntaiset marginaalit eivät ole yhdistettyjä.

Bottom Margin

margin-bottom ominaisuus asettaa elementin alamarginaalin pituus tai prosenttiarvolla. Prosenttiarvot ovat suhteessa ylemmän elementin leveyteen. Negatiiviset arvot ovat sallittuja.

Esimerkiksi:

DT { margin-bottom : 3em }

Huomaa että vierekkäiset pystysuuntaiset marginaalit ovat yhdistettyjä marginaalin maksimi arvojen käyttämiseksi.

Left Margin

margin-left ominaisuus asettaa elementin vasemman marginaalin pituus tai prosenttiarvolla. Prosenttiarvot ovat suhteessa ylemmän elementin leveyteen. Negatiiviset arvot ovat sallittuja.

Esimerkiksi:

ADDRESS { margin-left : 50% }

Vierekkäiset vaakasuuntaiset marginaalit eivät ole yhdistettyjä.

Margin

margin ominaisuus määrää elementin marginaalit yhdellä tai neljällä arvolla, jotka jokainen voivat olla pituus, prosenttiarvo tai auto. Prosenttiarvot ovat suhteessa ylemmän elementin leveyteen. Negatiiviset arvot ovat sallittuja.

Jos neljä arvoa on määritetty, ne vastaavat ylä, oikeaa, ala ja vasenta marginaalia. Jos yksi arvo on määritetty se vaikuttaa kaikkiin marginaaleihin. Jos vain kaksi arvoa on annettu, ensimmäinen arvo vaikuttaa ylä- ja alamarginaaleihin ja toinen vasempaan ja oikeaan marginaaliin. Kolmen arvon tapauksessa ensimmäinen arvo vastaa ylämarginaalia, toinen vasenta ja oikeaa marginaalia ja kolmas alamarginaalia.

Esimerkkejä marginaalin tyylisäännöistä

BODY { margin : 5em }   /* kaikki marginaalit 5em */
P { margin : 2em 4em }   /* ylä ja ala marginaalit 2em,
                            vasen ja oikea 4em */
DIV { margin : 1em 2em 3em 4em }   /* ylämarg. 1em,
                                      oikea 2em,
                                      ala 3em ja 
                                      vasen marg. 4em */

Huomaa että vierekkäiset pystysuuntaiset marginaalit ovat yhdistettyjä maksimi marginaalien käyttämiseksi. Vierekkäiset vaakasuuntaiset marginaalit eivät ole yhdistettyjä.

Käyttämällä margin ominaisuutta voi määritellä kerralla kaikki neljä marginaalia, vaihtoehtoisesti voi käyttää margin-top, margin-right , margin-bottom tai margin-left ominaisuuksia.

Top Padding

padding-top ominaisuus määrittää kuinka paljon tyhjää tilaa jätetään elementin/valitsimen yläreunuksen ja sisällön väliin. Arvo on joko pituus tai prosenttiarvo. Prosenttiarvot ovat suhteessa ylemmän elementin leveyteen. Negatiiviset arvot EIVÄT ole sallittuja.

TD { padding-top : 20px }

Right Padding

padding-right ominaisuus määrittää kuinka paljon tyhjää tilaa jätetään elementin/valitsimen oikean reunuksen ja sisällön väliin. Arvo on joko pituus tai prosenttiarvo. Prosenttiarvot ovat suhteessa ylemmän elementin leveyteen. Negatiiviset arvot EIVÄT ole sallittuja

H1 { padding-right : 10% }

Bottom Padding

padding-bottom ominaisuus määrittää kuinka paljon tyhjää tilaa jätetään elementin/valitsimen alareunuksen ja sisällön väliin. Arvo on joko pituus tai prosenttiarvo. Prosenttiarvot ovat suhteessa ylemmän elementin leveyteen. Negatiiviset arvot EIVÄT ole sallittuja

TD { padding-bottom : 20px }

Left Padding

padding-left ominaisuus määrittää kuinka paljon tyhjää tilaa jätetään elementin/valitsimen alareunuksen ja sisällön väliin. Arvo on joko pituus tai prosenttiarvo. Prosenttiarvot ovat suhteessa ylemmän elementin leveyteen. Negatiiviset arvot EIVÄT ole sallittuja

H1 { padding-left : 10% }

Padding

padding ominaisuus on oikotie padding-top, padding-right , padding-bottom ja padding-left ominaisuuksiin.

Padding on tyhjä tila elementin reunuksen ja sisällön välissä. Sille annetaan yhdestä neljään arvoa, jotka ovat pituus tai prosenttiarvoja. Prosenttiarvot ovat suhteessa ylempään elementtiin. Negatiiviset arvot EIVÄT ole sallittuja.

Jos neljä arvoa on annettu, ne vastaavat ylä, oikeaa, ala ja vasenta tyhjää tilaa. Jos vain yksi arvo on annettu se vaikuttaa kaikkiin niihin. Jos kaksi arvoa on annettu, ensimmäinen arvo vastaa ylä- ja alareunukseen ja sisällän väliin ja toinen vasemman- ja oikeanreunuksen ja sisällön väliin. Kolmen arvon tapauksessa ensimmäinen arvo vaikuttaa yläreunuksen, toinen vasemman- ja oikeanreunuksen ja sisällön väliin, kolmas arvo vaikuttaa alareunuksen ja sisällön väliin.

Esimerkiksi seuraava sääntö asettaa yläreunan tyhjän tilan arvoksi 2em, oikean arvoksi 4em, alareunan 5em ja vasemman arvoksi 4em:

BLOCKQUOTE { padding : 2em 4em 5em }

Top Border Width

border-top-width ominaisuus määrittää elementin yläreunuksen paksuuden. Arvo voi olla yksi kolmesta avainsanasta (ohut, keskipaksu ja paksu), joihin fontin koko ei vaikuta, tai pituus joilla saadaan suhteellisia leveyksiä. Negatiiviset arvot EIVÄT ole sallittuja.

TD { border-top-width : thin }

Tilalla voidaan myös käyttää border-top, border-width ja border ominaisuuksia oikotienä.

Right Border Width

border-right-width ominaisuus määrittää elementin oikean reunuksen paksuuden. Arvo voi olla yksi kolmesta avainsanasta (ohut, keskipaksu ja paksu), joihin fontin koko ei vaikuta, tai pituus joilla saadaan suhteellisia leveyksiä. Negatiiviset arvot EIVÄT ole sallittuja.

TH { border-right-width : medium }

Tilalla voidaan myös käyttää border-right , border-width ja border ominaisuuksia oikotienä.

Bottom Border Width

border-bottom-width ominaisuus määrittää elementin alareunuksen paksuuden. Arvo voi olla yksi kolmesta avainsanasta (ohut, keskipaksu ja paksu), joihin fontin koko ei vaikuta, tai pituus joilla saadaan suhteellisia leveyksiä. Negatiiviset arvot EIVÄT ole sallittuja.

TD { bottom-border-width : thin }

Tilalla voidaan myös käyttää border-bottom , border-width ja border ominaisuuksia oikotienä.

Left Border Width

border-left-width ominaisuus määrittää elementin alareunuksen paksuuden. Arvo voi olla yksi kolmesta avainsanasta (ohut, keskipaksu ja paksu), joihin fontin koko ei vaikuta, tai pituus joilla saadaan suhteellisia leveyksiä. Negatiiviset arvot EIVÄT ole sallittuja.

TH { border-left-width : medium }

Tilalla voidaan myös käyttää border-left , border-width ja border ominaisuuksia oikotienä.

Border Width

border-width ominaisuus asettaa elementin reunuksen paksuuden yhdestä neljään arvolla, jotka voivat olla avainsana (ohut, keskipaksu ja paksu) tai pituus. Negatiiviset arvot EIVÄT ole sallittuja.

Jos neljä arvoa on annettu ne vastaavat ylä, oikean, ala ja vasemman reunuksen paksuutta. Jos vain yksi arvo on annettu se vastaa kaikkia reunuksia. Mikäli kaksi arvoa on annettu, niistä ensimmäinen vastaa ylä- ja alakehyksen paksuuksiin ja toinen arvo vasemman- ja oikeankehyksen paksuuksiin. Kolmen arvon tapauksessa ensimmäinen vastaa yläreunuksen paksuuteen, toinen vasemman- ja oikeanreunuksen paksuuksiin ja kolmas arvo alareunuksen paksuuteen.

TD { border-width : medium thin medium thin }

Tämä ominaisuus on oikotie border-top-width, border-right-width , border-bottom-width ja border-left-width ominaisuuksiin.

Tilalla voidaan käyttää muös border ominaisuutta.

Border Color

border-color ominaisuus määrää elementin reunuksen värin. Ominaisuudelle voidaan antaa yhdestä neljään arvoa jotka vastaavat yläreunusta, oikeaa, ala ja vasenta reunusta. Jos vain yksi arvo annetaan se vaikuttaa kaikkiin reunuksiin. Jos annetaan vain kaksi arvoa niin ensimmäinen niistä vaikuttaa ylä- ja alareunuksen väriin ja toinen arvo vasemman- ja oikeanreunuksen väreihin. Kolmen arvon tapauksessa ensimmäinen vaikuttaa yläreunuksen väriin, toinen vasemman- ja oikeanreunuksen väriin ja kolmas alareunuksen väriin.

TD { border-color : blue red }   /*ylä ja alareunus sinisiä
                                   oikea ja vasen punaisia*/
TH { border-color : blue green red }  /*yläreunus sininen
                                        oikea ja vasen vihreä
                                        alareunus punainen*/

Tilalla voidaan käyttää border ominaisuutta oikotienä.

Border Style

dotted=pisteviivoitus, dashed=katkoviivoitus, solid=kiinteä, double=tuplaviivoitus, groove=uurros, ridge=harjanne, inset=upotus ja outset=kohotus

border-style ominaisuus määrää elementin reunuksen tyylin. Tämä ominaisuus täytyy olla määritetty reunuksen näkymiseksi.

Arvoja voi olla yhdestä neljään. Jos neljä arvoa on annettu ne vaikuttavat yläreunuksen, oikean, alareunuksen ja vasemmanreunuksen tyyleihin. Yksi arvo vaikuttaa kaikkiin reunuksiin. Jos vain kaksi arvoa on annettu, ensimmäinen vaikuttaa ylä- ja alakehyksen tyyliin ja toinen arvo vasemman- ja oikean reunuksen tyyliin. Kolmen arvon tapauksessa ensimmäinen arvo vaikuttaa yläkehyksen tyyliin, toinen vasemman- ja oikean reunuksen tyyliin ja kolmas arvo alareunuksen tyyliin.

TD { border-style : double }   /* kaikki tuplareunuksia */
TH { border-style : dashed dotted }  /* ylä ja alareuna
                                        katkoviivalla ja
                                        vasen ja oikea piste-
                                        viivalla */

Top Border

border-top ominaisuus on oikotie elementin yläreunuksen width, style ja color ominaisuuksiin.

Huomaa että ominaisuuksille voidaan antaa vain yhdet arvot.

TD { border-top : thin double blue }

Tilalla voidaan myös käyttää border ominaisuutta oikotienä.

Right Border

border-right ominaisuus on oikotie elementin oikeanreunuksen width, style ja color ominaisuuksiin.

Huomaa että em. ominaisuuksille voidaan antaa vain yhdet arvot.

TD { border-right : thin double blue }

Tilalla voidaan myös käyttää border ominaisuutta oikotienä.

Bottom Border

Huomaa että em. ominaisuuksille voidaan antaa yhdet arvot.

TD { border-bottom : thin double blue }

Tilalla voidaan myös käyttää border ominaisuutta oikotienä.

Left Border

Huomaa että em. ominaisuuksille voidaan antaa vain yhdet arvot.

TD { border-left : thin double blue }

Tilalla voidaan myös käyttää border ominaisuutta oikotienä.

Border

border ominaisuus on oikotie elementin reunuksen width, style ja color ominaisuuksiin.

Esimerkkejä

H2 { border : groove black }
A:link { border : solid blue }
A:visited { border : thin dotted #800080 }
A:active { border : thick double red }

border ominaisuudella voidaan asettaa vain kaikki reunukset, joten vain yhdet arvot voidaan antaa. Eri arvojen antamiseksi eri reunuksille täytyy käyttää yhtä tai useampaa seuraavista border-top, border-right , border-bottom , border-left , border-color , border-width, border-style, border-top-width , border-right-width, border-bottom-width ja border-left-width ominaisuuksista.

Width

Mille tahansa block tai "replaced" elementille voidaan määrittää leveys, merkittynä pituutena, prosentteina tai arvolla auto. ("Replaced" elementti on sellainen josta tiedetään vain olennaiset mitat: esim. HTML:n IMG , INPUT, TEXTAREA, SELECT ja OBJECT ovat replaced-elementtejä.) Oletusarvo width ominaisuudelle on auto, joka asettaa elementin leveyden automaattisesti (Esim. elementin sisältämän kuvan mukaan). Prosenttiarvot ovat suhteessa ylempään elementtiin. Negatiiviset arvot EIVÄT ole sallittuja.

Tätä ominaisuutta voidaan käyttää antamaan yleinen leveys joillekin INPUT-elementeille, kuten "submit" ja "reset" painikkeille.

INPUT.button { width : 10em }

Height

Mille tahansa block tai "replaced" elementille voidaan määrittää korkeus, merkittynä pituutena, prosentteina tai arvolla auto. (Replaced elementti on sellainen josta tiedetään vain olennaiset mitat: esim. HTML:n IMG , INPUT, TEXTAREA, SELECT ja OBJECT ovat replaced-elementtejä.) Oletusarvo width ominaisuudelle on auto, joka asettaa elementin korkeuden automaattisesti (Esim. elementin sisältämän kuvan mukaan). Prosenttiarvot ovat suhteessa ylempään elementtiin. Negatiiviset arvot EIVäT ole sallittuja.

Kuten width- ominaisuutta, myös height- ominaisuutta voidaan käyttää kuvan koon muuttamiseen.

IMG.pieni { width : 40px; height : 40px }

Useimmissa tapauksissa on suositeltavaa kuvan kokoa kuvankäsittelyohjelmalla, koska selaimet todennäköisesti eivät skaalaa kuvia hyvälaatuisina ja kuvan skaalaaminen pienemmäksi aiheuttaa sivujen katsojalle tarpeettoman isoja ladattavia tiedostoja. Kuitenkin skaalaaminen width ja height ominaisuuksilla on hyödyllinen mahdollisuus käyttäjän tyylisivuille, sivujen näkymisen parantamiseksi

Float

float ominaisuus mahdollistaa sen että teksti voi kiertää elementtiä. Tämä ominaisuus on toiminnaltaan identtinen HTML 3.2n IMG-elementille mahdollistamien ALIGN=left ja ALIGN=right atribuuttien kanssa, mutta CSS1 mahdollistaa "kellumisen" kaikille elementeille, eikä vain kuvalle ja taulukolle kuten HTML 3.2:ssa on.

H3 { float : left }

Clear

clear ominaisuus määrää voiko elementin sivuilla olla "kelluvia" elementtejä (ks. float). Arvo left siirtää elementin kaikkien sen vasemmalla puolella olevien kelluvien elementtien alapuolelle, right tekee saman vastaavasti oikealla puolella. Muut arvot ovat none, joka on oletusarvo ja both joka siirtää elementin sen molemmilla puolilla olevien kelluvien elementtien alapuolelle. Ominaisuus on samanlainen kuin HTML 3.2n <BR> elementin CLEAR="left|right|all|none"-attribuutti, mutta se voidaan määrittää kaikille elementeille.

Laatikon kaavio