CSS:ssä on kaksi erilaista kehystyyppiä, border ja outline. border määrittelee aina suorakulmaisen kehyksen, kun taas CSS2:ssa esitellyt outline-kehykset on tarkoitettu ei-neliömäisille alueille. Ja vielä yksi ero: outline-kehyksen reuna sijoittuu kehyksen ulkopuolelle, minkä vuoksi elementille voidaan määrittää sekä kehys border että reunus outline.
Tässä opetusohjelmassa esitellyt kehyksen määritelmät ovat erityisen mielenkiintoisia niille elementeille, jotka muodostavat oman kappaleen. Periaatteessa niitä voidaan kuitenkin soveltaa myös muihin elementteihin.
Määritä kehys
border-ominaisuudella voidaan määrittää elementin koko kehyksen ulkonäkö.
Yleisesti border-ominaisuus koostuu seuraavista arvoista, joihin pureudutaan yksityiskohtaisesti:
• border-color
• border-style
• border-width
Yksittäiset ominaisuudet erotetaan toisistaan välilyönneillä. Ominaisuuksien järjestyksellä ei ole merkitystä. Lisäksi border:lla on neljä alaominaisuutta, joiden avulla voidaan määrittää reunaväri, reunan paksuus ja reunatyyppi yksittäisille elementin sivuille.
• border-top – Yläreuna
• border-right – Oikea reuna
• border-bottom – Ala reuna
• border-left – Vasen reuna
Seuraava esimerkki näyttää border-ominaisuuden käytön. Tällä määrityksellä luodaan kolmen pisteen levyinen, musta ja katkoviivainen kehys.
<p style="border:3pt solid #000000;"> Tervetuloa </p>
Selaimen tulos:
Kehyksen väri
border-color määrittelee kehyksen värin. Sallitut arvot ovat seuraavat:
• transparent – läpinäkyvä kehys
• Väriarvo
Jos annetaan vain yksi arvo, se koskee kaikkia kehyksen sivuja. Eri värit eri sivuille määritetään antamalla useita arvoja, erotettuina välilyönnein.
• Kaksi arvoa – ensimmäinen ylä- ja alareunalle, toinen vasemmalle ja oikealle reunavärille.
• Kolme arvoa – ensimmäinen yläreunalle, toinen vasemmalle ja oikealle, kolmas alareunalle.
• Neljä arvoa – ensimmäinen yläreunalle, toinen oikealle, kolmas alareunalle ja neljäs vasemmalle reunavärille.
Samoin voidaan käyttää seuraavia border-alaominaisuuksia:
• border-top-color – Yläreunan väri
• border-right-color – Oikean reunan väri
• border-bottom-color – Alareunan väri
• border-left-color – Vasemman reunan väri
Esimerkki:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
Tässä selaimen tulos:
Viivan tyyppi
border-style määrittää kehyksen viivan tyyppin.
Alla on luettelo mahdollisista kehyksen muunnelmista:
• none – näkymätön kehys
• dotted – pisteviiva
• dashed – katkoviiva
• solid – jatkuvaviiva
• double – kaksinkertainen jatkuvaviiva
• groove – 3D-viiva
• ridge – 3D-viiva
• inset – 3D-viiva
• outset – 3D-viiva
Tässä esimerkki kehyksen tyylilajeista:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">none</p>
<p class="dotted">dotted</p>
<p class="dashed">dashed</p>
<p class="solid">solid</p>
<p class="double">double</p>
<p class="groove">groove</p>
<p class="ridge">ridge</p>
<p class="inset">inset</p>
<p class="outset">outset</p>
<p class="hidden">hidden</p>
</body>
</html>Selaimen tulos:
Jos annat vain yhden arvon, se koskee kaikkia kehyksen sivuja. Eri tyyppiset kehykset eri sivuille määritetään antamalla useita arvoja, erotettuina välilyönnein.
• Kaksi arvoa – ensimmäinen ylä- ja alareunalle, toinen vasemmalle ja oikealle kehystyypille.
• Kolme arvoa – ensimmäinen yläreunalle, toinen vasemmalle ja oikealle, kolmas alareunalle kehystyypille.
• Neljä arvoa – ensimmäinen yläreunalle, toinen oikealle, kolmas alareunalle ja neljäs vasemmalle kehystyypille.
Samoin voidaan käyttää seuraavia border-alaominaisuuksia:
• border-top-style – Yläreunan tyyli
• border-right-style – Oikean reunan tyyli
• border-bottom-style – Alareunan tyyli
• border-left-style – Vasemman reunan tyyli
Myös tässä esimerkki:
<p style="border-bottom-style: dashed;"> Viivattu kehys </p>
Ja näin se näkyy selaimessa:
Määritä kehyksen leveys
border-width-ominaisuudella määritetään reunuksen leveys.
• Pituusarvo
• ohut – ohut kehys
• medium – keskipaksu kehys
• paksu – paksu kehys
Jos annetaan vain yksi arvo, se koskee kaikkia elementin reunoja. Eri reunoille eri reunaleveyksien määrittämiseksi on kaksi tapaa. Ensimmäisessä vaihtoehdossa käytetään useita välilyönnillä erotettuja arvoja.
• Kaksi arvoa – ensimmäinen arvo ylä- ja alareunoille, toinen vasemmalle ja oikealle reunaleveydelle.
• Kolme arvoa – ensimmäinen arvo yläreunalle, toinen vasemmalle ja oikealle, kolmas alareunalle.
• Neljä arvoa – ensimmäinen arvo ylhäältä, toinen oikealle, kolmas alhaalta ja neljäs vasemmalle reunaleveydelle.
Vastaavasti voit käyttää seuraavia reunan alaominaisuuksia:
• border-top-width – yläreunan leveys
• border-right-width – oikean reunan leveys
• border-bottom-width – alareunan leveys
• border-left-width – vasemman reunan leveys
Esimerkki:
<p style="border-width:2px;border-style: dotted;"> Tervetuloa </p>
Tarkista reunuksen väri
outline
outline-color-ominaisuudella määritetään reunaväri. Ohjeet ovat samat kuin border-color.
• Käänteinen – väri kääntyy ympäri. Tämä väri muodostuu kääntämällä kaikkien bittien arvot heksadesimaaliseksi väriarvoksi.
• Väriarvo
Esimerkki:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
Näin se näkyy selaimessa:
Reunan tyyppi
outline
outline-style-ominaisuus määrittelee ääriviivan tyyppiä. Sallitut arvot ovat samat kuin border-style.
• ei mitään – näkymätön kehys
• pilkullinen – pilkullinen
• katkaistu – katkoviiva
• peräkkäin – yhtenäinen
• kaksoisviiva – kaksoisviiva
• groove – 3D-viiva
• ranta – 3D-viiva
• upotettu – 3D-viiva
• aloite – 3D-viiva
Esimerkki:
<p style="outline-style:solid;outline-width:2px; outline-color:red;"> PSD-Tutorials.de </p>
Reunalinjan leveys
outline
outline-width-ominaisuus vastaa border-width-ominaisuutta. Tämän avulla määritetään reunavahvuus. Näkyvän reunalinjan luomiseksi yhdistetään aina outline-width ja outline-style.
• medium – keskipaksu kehys
• ohut – ohut kehys
• paksu – paksu kehys
• Pituusarvo – määrittää reunavahvuuden
Esimerkki:
<p style="outline-width: thin;outline-style: solid; outline-color: red;">
Tervetuloa
</p>
Ja kuten reunassa, myös outline-kehykselle on yleinen ominaisuus.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p {
border:red solid thick;
outline:green dotted thick;
}
</style>
</head>
<body>
<p>Tervetuloa PSD-Tutorials.de-sivustolle!</p>
</body>
</html>
Tämä kokoaa seuraavat ominaisuudet yhteen:
• outline-width
• outline-style
• outline-color
Periaate on tässä sama kuin yleisessä border-ominaisuudessa.
