Menthal27

CSS: Reunukset

Reunusten väri (border-color)

Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.

Erilaisia reunusmuotoiluja on viisi:

  • border-color määrittää reunuksen värin kaikille neljälle laatikon sivulle. Border-colorin avulla voi määrittää jokaiselle sivulle oman värinsä kirjoittamalla useita väriarvoja peräkkäin. Ensimmäinen arvo kertoo yläreunan, toinen oikean reunan, kolmas alareunan ja neljäs vasemman reunan värin. Mikäli ilmoitetaan kaksi arvoa, ensimmäinen kertoo ylä- ja alareunuksen ja toinen oikean ja vasemman sivun muotoilut.
  • border-left-color määrittää vasemmanpuoleisen reunuksen värin.
  • border-top-color määrittää yläreunuksen värin.
  • border-right-color määrittää oikeanpuoleisen reunuksen värin.
  • border-bottom-color määrittää alareunuksen värin.
Arvot
#xxxxxx Väri heksakoodilla ilmaistuna. Jokainen x merkitsee numeroa väliltä 0-9 tai kirjainta a-f.
#xxx
rgb(arvo,arvo,arvo) Väri rgb-arvoilla ilmaistuna. Jokainen arvo on joko väliltä 0-255 tai 0-100 %.
värin nimi Jonkin värin englanninkielinen nimi.
transparent Reunukset ovat väriltään läpinäkyvät.
inherit Väri periytyy ylemmiltä elementeiltä.

Esimerkkejä:

border-left-color:#000;
border-color:yellow #444 rgb(2,2,2) white;
border-bottom-color:rgb(40%,24%,10%);
border-style:red green;

Reunusten tyyli (border-style)

Tämä muotoilu toimii osittain IE 6:lla ja kokonaan IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.

Reunustyylin voi määrittää joko kaikille neljälle sivulle yhtä aikaa tai jokaiselle sivulle erikseen. Reunusmuotoilut ovat seuraavat:

  • border-style määrittää reunusten tyylin kaikille neljälle sivulle. Border-stylen avulla voi määrittää jokaiselle sivulle oman reunustyylinsä kirjoittamalla useita reunustyylejä peräkkäin. Ensimmäinen arvo kertoo yläreunan, toinen oikean reunan, kolmas alareunan ja neljäs vasemman reunan tyylin. Mikäli ilmoitetaan kaksi arvoa, ensimmäinen kertoo ylä- ja alareunuksen ja toinen oikean ja vasemman sivun muotoilut.
  • border-left-style määrittää vasemman reunuksen tyylin.
  • border-top-style määrittää yläreunuksen tyylin.
  • border-right-style määrittää oikeanpuoleisen reunuksen tyylin.
  • border-bottom-style määrittää alareunuksen tyylin.
Arvot
* Näkyy Internet Explorer 6:lla samoin kuin dashed.
dashed Pitkä katkoviivareunus.
dotted * Lyhyt katkoviivareunus.
double Kaksoisreunus.
groove Kuoppamainen reunus.
hidden Reunus on piilotettu.
inset Upottava reunus.
none Ei reunusta.
outset Kohottava reunus.
ridge Siltamainen reunus.
solid Tasainen reunus.
inherit Reunustyyli periytyy ylemmältä elementiltä.

Esimerkkejä:

border-left-style:ridge;
border-style:solid ridge groove dashed;
border-style:solid ridge;

Reunusten leveys (border-width)

Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.

Reunusten leveyden voi määrittää joko kaikille sivuille yhtä aikaa tai jokaiselle erikseen. Reunusmuotoilut ovat seuraavat:

  • border-width määrittää reunusten leveyden kaikille neljälle sivulle. Jokaisen reunan voi myös määrittää eri levyiseksi antamalla border-widthille useita arvoja. Ensimmäinen arvo kertoo yläreunan, toinen oikean reunan, kolmas alareunan ja neljäs vasemman reunuksen leveyden. Mikäli ilmoitetaan kaksi arvoa, ensimmäinen kertoo ylä- ja alareunuksen ja toinen oikean ja vasemman sivun muotoilut.
  • border-left-width määrittää vasemman reunuksen leveyden.
  • border-top-width määrittää yläreunuksen leveyden.
  • border-right-width määrittää oikean reunuksen leveyden.
  • border-bottom-width määrittää alareunuksen leveyden.
Arvot
numero ja mittayksikkö Reunuksen leveys määritetään jonkin mittayksikön, esimerkiksi pikselin tai sentin, avulla.
inherit Reunuksen leveys periytyy ylemmältä elementiltä.

Esimerkkejä:

border-width:4px 1em;
border-top-width:1cm;

Pikakirjoite

Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.

Pikakirjoitteen avulla voidaan määrittää lyhyesti reunuksen väri, tyyli ja paksuus. Reunuspikakirjoitteita on viisi erilaista:

  • border määrittää muotoilut kaikille neljälle laatikon sivulle.
  • border-left määrittää muotoilut vasemmanpuoleiselle reunukselle.
  • border-top määrittää muotoilut yläreunukselle.
  • border-right määrittää reunukset oikeanpuoleiselle reunukselle.
  • border-bottom määrittää muotoilut alareunukselle.

Pikakirjoitteissa kerrotaan ensimmäisenä reunuksen paksuus, sitten reunuksen tyyppi ja lopuksi väri.

Esimerkiksi:

border:1px solid red;
border-left:4cm ridge #567;

Ääriviivat (outline, outline-color, outline-style, outline-width)

Tämä muotoilu ei toimi IE 6:lla ja IE 7:llä, mutta kylläkin FF 2:lla, Opera 9:llä sekä Safari 3:lla.

Ääriviivamuotoilujen avulla saadaan esille haluttujen elementtien ääriviivat. Käytännössä outline-color toimii border-colorin, outline-style border-stylen, outline-width border-widthin ja outline edellisten pikakirjoitteen tavoin. Border-vastaavien arvot, esimerkiksi reunustyylit, käyvät sellaisinaan vastaaviin ääriviivamuotoiluihin.

Muita reunuksiin liittyviä muotoiluja

  

Menthal27 © Sonja Valkeinen 2002-2008. Shadows. WP. Takaisin sivun alkuun.