I CSS findes der to forskellige typer rammer med border og outline. Mens border altid markerer en rektangulær ramme, er de i CSS2 indførte outline-rammer beregnet til ikke-rettangulære områder. Og der er en anden forskel: Med outline udføres omridsningen uden for rammen, hvilket betyder, at et element kan få tildelt både en ramme med border og en omridsning med outline.
Rammedefinitionerne præsenteret i denne vejledning er især interessante for elementer, der udgør en separat afsnit. Men i princippet kan de selvfølgelig også anvendes på andre elementer.
Definer rammen
Med border kan udseendet af hele rammen om et element bestemmes.
Ved den generelle border-egenskab drejer det sig om en samling af de følgende værdier, som vil blive uddybet:
• border-color
• border-style
• border-width
Værdierne til de enkelte egenskaber er adskilt af mellemrum. Rækkefølgen, hvori egenskaberne angives, spiller ingen rolle. Derudover er der også fire underegenskaber for border, som gør det muligt at angive oplysninger om ramme farve, ramme tykkelse og rammetypen for individuelle element-sider.
• border-top – øverste ramme
• border-right – højre ramme
• border-bottom – nederste ramme
• border-left – venstre ramme
Følgende eksempel viser brugen af border. Ved denne definition oprettes en ramme, der er tre punkter bred, sort og stribet.
<p style="border:3pt solid #000000;"> Velkommen </p>
Resultatet i browseren:
Rammefarven
Ved hjælp af border-color bestemmes ramme farven. De tilladte værdier er følgende:
• transparent – gennemsigtig ramme
• Farve værdi
Hvis der kun angives en værdi, gælder denne for alle ramme siderne. For at definere forskellige farver for de individuelle sider angives flere værdier, adskilt af mellemrum.
• To værdier – den første værdi for den øverste og nederste, den anden for den venstre og højre ramme farve.
• Tre værdier – den første værdi for den øverste, den anden for den venstre og højre, den tredje for den nederste ramme farve.
• Fire værdier – første værdi for øverst, anden for højre, tredje for nederste og fjerde for venstre ramme farven.
De følgende border-underegenskaber kan også bruges:
• border-top-color – ramme farve øverst
• border-right-color – ramme farve højre
• border-bottom-color – ramme farve nederst
• border-left-color – ramme farve venstre
Et eksempel:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
Og her er resultatet i browseren:
Linjetypen
Ved hjælp af border-style kan linjetypen for rammen fastlægges.
Nedenfor finder du en liste over de mulige rammevarianter:
• none – usynlig ramme
• dotted – punkteret
• dashed – stiplet
• solid – stribet
• double – dobbelt stribet
• groove – 3D-linje
• ridge – 3D-linje
• inset – 3D-linje
• outset – 3D-linje
Her er et eksempel på, hvordan ramme typerne ser ud:
<!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>Resultatet i browseren:
Hvis der angives kun én værdi, gælder denne for alle ramme siderne. For at definere rammetyper for de enkelte sider skrives flere værdier, adskilt af mellemrum.
Også her er et eksempel:
<p style="border-bottom-style: dashed;"> Stiplet ramme </p>
Og sådan ser det ud i browseren:
Angivelse af rammebredde
Border-width bestemmer bredden af rammen.
• Længdeangivelse
• thin - tynd ramme
• medium - medium stærk ramme
• thick - tyk ramme
Hvis der kun angives én værdi, gælder den for alle sider af elementet. For at angive forskellige rammebredder for individuelle sider er der to muligheder. I den første variant skriver man flere værdier adskilt af mellemrum.
• To værdier - den første værdi for top- og bundramme, den anden for venstre og højre rammebredde.
• Tre værdier - den første værdi for top, den anden for venstre og højre, den tredje for bundrammebredde.
• Fire værdier - første værdi for top, anden for højre, tredje for bund og fjerde for venstre rammebredde.
Derudover kan du også bruge følgende border-underattributter:
• border-top-width - rammebredde øverst
• border-right-width - rammebredde til højre
• border-bottom-width - rammebredde nederst
• border-left-width - rammebredde til venstre
Et eksempel:
<p style="border-width:2px;border-style: dotted;"> Velkommen </p>
Rammefarve til kant
Rammefarven defineres gennem outline-color. Angivelsen er identisk med border-color.
• invert - farve inverteres. Denne farve dannes ved at invertere alle bits af en hexadecimal farveværdi.
• Farveangivelse
Et eksempel:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
Sådan ser det ud i browseren:
Rammetype til kontur
Angivelsen outline-style bestemmer typer konturen. De tilladte værdier er de samme som for border-style.
• none - usynlig ramme
• dotted - punkteret
• dashed - stribet
• solid - heltrukken
• double - dobbelt heltrukken
• groove - 3D-linje
• ridge - 3D-linje
• inset - 3D-linje
• outset - 3D-linje
Et eksempel:
<p style="outline-style:solid;outline-width:2px; outline-color:red;"> PSD-Tutorials.de </p>
Rammebredde til kontur
Angivelsen outline-width er identisk med border-width. Herigennem defineres rammebredden også. For at generere en synlig rammelinje kombineres outline-width altid med outline-style.
• medium - medium stærk ramme
• thin - tynd ramme
• thick - tyk ramme
• Længdeangivelse - bestemmer rammebredden
Et eksempel:
<p style="outline-width: thin;outline-style: solid; outline-color: red;">
Velkommen
</p>
Og ligesom for border er der også en generel attribut for outline rammerne.
<!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>Velkommen til PSD-Tutorials.de!</p>
</body>
</html>
Dette indeholder følgende attributter:
• outline-width
• outline-style
• outline-color
Princippet her er identisk med det generelle border-attribut.
