[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]

Reunaominaisuudet

Reunukset ovat kivoja ja ne voivat olla joka sivulla (top, bottom, left ja right) erilaisia. Voit määritellä erilaisia paksuuksia (border-width), värejä (border-color) ja tyylejä (border-style). Värit ja paksuudet voi määritellä kuten missä tahansa elementissä. Paksuudelle on kolme keyword-arvoa: thin, medium (oletusarvo, joka on voimassa, mikäli paksuutta ei ole määritelty) ja thick.

CSS1:n reunustyylejä ovat dotted, dashed, solid, double, groove, ridge, inset, outset sekä arvo none (se antaa reunuksen paksuudelle arvon 0). CSS2:ssa on lisäksi arvo hidden, joka on muuten edellisen kaltainen, mutta ottaa määritellyn tilan (esim. border: hidden 5px;).

Mikäli halutaan näkyvät reunukset, reunusten paksuutta ja väriä ei ole pakko antaa. Jos väriä ei ole määritelty, sen pitäisi olla sama kuin reunuksellisen elementin tekstin värin. Selainten tulee kuitenkin saada reunustyyppi, sillä oletusarvona on none eli se, että ei ole lainkaan reunuksia.

W3C: CSS2: CSS2 8 Box model; 8.5.3 Border style[Pw].

Seuraavassa on malli lohkositaatille (BLOCKQUOTE) tehtävästä reunusmäärittelystä (mallin[S][Pw] määrittelyt eivät ole välttämättä mitenkään mielekkäitä, mutta ovat silti toimivia):

blockquote
{padding:10px; /* padding antaa täytearvon reunuksen sisään laitettaville elementeille ja tekstille - margin ja padding voidaan antaa kaikille reunoille pikakirjoitteena alempana olevien esimerkkien tapaan; negatiiviset margin-arvot ovat sallittuja, mutta padding ei voi saada negatiivia arvoja */
border: olive 5px solid; /* pikakirjoiteyleisarvot reunuksille, joka voidaan myöhemmin ohittaa - joka reunalle ei tämän kautta voi laittaa arvoja vaan täyttyy käyttää alimäärittelyitä */
border-style:inset; /* tässä kaikilla sivuilla sama reunus - tämä ohittaa edellisen määrittelyn arvon solid ja kukin seuraavista kolmesta ohittaa aina edellisen arvon */
border-style:inset outset ; /* tässä ensimmäinen koskee ylä- ja alareunaa ja toinen vasenta ja oikeaa reunaa */
border-style:inset outset inset; /* tässä ensimmäinen koskee yläreunaa ja toinen vasenta ja oikeaa reunaa ja kolmas alareunaa */
border-style:inset outset inset outset; /* tässä ensimmäinen koskee yläreunaa, toinen oikeaa, kolmas alareunaa ja neljäs vasenta reunaa eli arvot menevät myötäpäivään */
border-width: 10px 5px 10px; /* toimivat samalla logiikalla kuin border-style -arvot ja viimeksi mainittu ohittaa ensiksi annetun arvon */ }

Voit katsoa myös sivun Miten CSS liitetään Web-sivuihin[S][Pw] malleja.

Yleisiä huomautuksia:

  1. Reunukset ovat ikään kuin elementin ulkoreunaan piirtyviä kehyksiä, joiden ainoa ominaisulottuvuus on niiden paksuus. Se, miten reunukset huomioidaan elementtien dimensioita laskettaessa riippuu width attribuutista or ominaisuudesta.

  2. Reunukset voi teoriassa antaa käyttäen myös ominaisuutta outline (esim. outline:#660033 1px solid;). Kaikilla reunoilla on aina samanlaiset reunukset. Ominaisuudella outline määriteltyjen reunusten periaatteellinen ero border nähden on siinä, että outline ei saa muuttaa toisten elementtien sijoitusta eikä sitä oteta mukaan elementtien dimensioita laskettaessa. Se saa siis mennä dokumentin kaiken sisällön päälle.

  3. Koska kaikenlaiset reunukset ovat elementtien esitysasua koskevia piirteitä, CSS2:n perustehtäviin kuuluu, että se joko pystyy poistamaan kaikki mahdolliset reunukset tai muuttamaan minkä tahansa reunuksen esitystapaa. Kuvien reunusten kohdalla (<IMG border=""...>) ei ole mitään periaatteellisia ongelmia. Koska selaimet käyttävät HTML:llä annettuja reunuksia ikään kuin oletusominaisuuksina, reunusten tyyppiä ei tarvitse määrittää CSS:llä. <TABLE border> kohdalla tilanne on monimutkaisempi. CSS2:ssa on määritelty erityissäännöt, miten reunuksia käsitellään taulukoissa (käsittelen taulukoiden reunuskysymyksiä sivulla 10[S]).

  4. Teoriatasolla CSS:n pitäisi pystyä muuttamaan myös kaikkien lomake-elementtien reunuksia, mutta CSS2:ssa ei ole riittävästi ominaisuuksia määrittelemään, miten niiden kanssa tulisi menetellä (käsittelen lomake-elementtejä edempänä).

Selainkohtaisia huomautuksia:

  1. MS IE tulkitsee arvot suhteelliset arvot paksumpina kuin Opera ja Netscape (niille ei ole annettu ohjearvoja eikä MS IE toimi spesifikaation vastaisesti). Täsmälleen saman paksuuden määrittäminen edellyttää numeeristen arvojen käyttämistä.

  2. Tyylit dotted ja dashed eivät toimi MS IE 5.5 Windows -selainta vanhemmissa versioissa.

  3. Opera 3.51+. tukee kaikkia näkyviä reunustyylejä. Uudemmat selaimet tukevat myös arvoa hidden kuten myös Mozilla Gecko -selaimet.

  4. Mikäli reunusväriä ei ole määritelty MS IE käyttää taulukoissa reunusvärinä vaalean harmaata, joka on toinen elementille TABLE border-attribuutin antamista reunusväreistä.

  5. Outset and inset eivät toimi värin black kanssa MS IE 5.x -selaimissa. Lopputulos on aina erilainen, sillä MS IE käyttää useampia sävyä Operalla ja Netscape. Syynä on todennäköisesti se, että MS IE käyttää elementille TABLE epästandardeja attribuutteja, esim. bordercolorlight="#eeeeee" bordercolordark="#1111111".

  6. Ominaisuus outline on toiminut vain joissakin Netscape 6.0:n esiversioissa ja Opera 7.x:ssä. Viittaan ominaisuuteen myös sivulla 6[S] ja englanninkielisissä CSS-kommenteissa[S].

[Alku]