HOME -> CSS_TUTORIAL -> css-14 Tirsdag, 22. august 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
Offentliggjort 2002 - Opdateret n/a

CSS lektion 14

Box-oriented model - Border

Følgende egenskaber for border beskrives i denne lektion:
  • Border-width
  • Border-color
  • Border-style
  • Sammenskrivning til border
  • Eksempler
  • Width og height

Border-width
Border-width er i princippet en sammenskrivning af følgende:

border-top-width | border-right-width | border-bottom-width | border-left-width

Der kan angives en til fire værdier, med følgende interpretation:

En værdi: Top, right, bottom og left har samme bredde værdi.

To værdier: Top angives med den første værdi, right angives med den anden værdi. Bottom får tildelt værdien af top, og left får tildelt værdien af right.

Tre værdier: Top angives med den første værdi, right angives af den anden værdi, bottom angives med den tredje værdi. Left får værdien af den modstående side.

Fire værdier: Top, right, bottom og left, har hver deres egen værdi.

Følgende værdier til angivelse af width er mulig:

thin | medium | thick | length (px, em, pt ....)


h1 {border-width: thin;}
/* Medfører følgende bredde: thin thin thin thin */

h1 {border-width: thin thick;}
/* Medfører følgende bredde: thin thick thin thick */

h1 {border-width: thin thick medium;}
/* Medfører følgende bredde: thin thick medium thick */

h1 {border-width: thin thick medium thin;}
/* Medfører følgende bredde: thin thick medium thin */

/* Altså med ur, startende med angivelse af top width! */


Border-width kan ikke antage negative værdier.
Border-color
Border-color angiver farven af kanten. Værdierne der anvendes her er de samme som i tidligere eksempler, du kan derfor angive værdier som: '#ff9900' eller 'rgb(255,153,0)'.
Border-style
Der findes en del stregtyper som kan anvendes. Foruden disse kan du også anvende 'none' (eller hidden) når der ikke skal vises nogen border-style.

Nedenfor kan du se hvordan IE6.0 viser de enkelte stregtyper. Længere nede er et link, tryk på det og du kan se hvordan din browser viser stregtyper. Syntaksen er den allerede velkendte form:


h4 {border-style: solid;}



Hvordan ser det ud i din browser?

Sammenskrivning til border

h4 {
border-width: 2px;
border-style: solid;
border-color: red;
}


Dette kan sammenskrives til:


h4 {
border: 2px solid red;
}


Eksempler til kodning af border!
Her er et eksempel med anvendelse af 'border'.


p {
border-width: 2px;
border-style: solid;
border-color: black;
}
h1 {
border-width: 0.3em;
border-style: dashed;
border-color: #cc0000;
}
h2 {
border-width: 3pt;
border-style: solid dotted;
border-color: rgb(255,153,0);
}

/* Gemmes som border1.css */



<html>
<head>
<title>Anvendelse af border</title>
<link rel="stylesheet" type="text/css" href="border1.css" />
</head>
<body>
<p>De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ....</p><br /><br />
<h1>De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ....</h1><br /><br />
<h2>De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ....</h2><br /><br />
</body>
</html>


Vis som eksempel

Her kommer et eksempel med anvendelse af:

'border-top-(width, style og color)'
'border-right-(width, style og color)'
'border-bottom-(width, style og color)'
'border-left-(width, style og color)'.


p {
border-top-width: 3px;
border-top-style: solid;
border-top-color: black;

border-right-width: 6px;
border-right-style: solid;
border-right-color: red;

border-bottom-width: 9px;
border-bottom-style: solid;
border-bottom-color: green;

border-left-width: 12px;
border-left-style: solid;
border-left-color: orange;
}

h4 {
border-top-width: thin;
border-top-style: solid;
border-top-color: blue;

border-right-width: thick;
border-right-style: solid;
border-right-color: purple;

border-bottom-width: medium;
border-bottom-style: solid;
border-bottom-color: green;

border-left-width: thin;
border-left-style: solid;
border-left-color: orange;
}

/* Gemmes som border2.css */



<html>
<head>
<title>Anvendelse af border</title>
<link rel="stylesheet" type="text/css" href="border2.css" />
</head>
<body>
<p>De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ....</p><br /><br />
<h4>De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ....</h4><br /><br />
</body>
</html>


Vis som eksempel

Width og height
Med width og height har du mulighed for at definere bredde og højde af et element.


#boks {
width: 400px;
height: 400px;
border: 0.5em solid orange;
background: yellow;
padding: 2px;
}

/* Gemmes som width.css */



<html>
<head>
<title>Width og height</title>
<link rel="stylesheet" type="text/css" href="width.css" />
</head>
<body>
<div id="boks">De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ....</div><br /><br />
</body>
</html>


Vis som eksempel

Prøv nu at slette den linie med angivelse af height. Så vil du se at boksens højde følger indholdet. Du kan også nøjes med at klike på linket nedenfor.

Vis som eksempel

Egenskaberne width og height egner sig særdeles godt i forbindelse med billeder. Ved f.eks. at angive width, kan du scalere dit billede så det passer bedre ind i dit html dokument.



Det var en ordentlig omgang, tag dig en slapper og et kop kaffe før du går i gang med næste lektion som handler om positionering.

POSITIONERING >>

 

Copyright © 2002 - 2017
NETeXplorer.dk · All rights reserved Top