[ Forrige | Indhold | Næste]

Lektion 11: Boks modellen - kanter

Kanter - eller borders om man vil - kan benyttes i mange sammenhænge. Enten som et dekorativt element, eller for at understrege en adskillelse mellem to ting. CSS giver dig flere muligheder end nogensinde før for at benytte kanter på dine sider.

• Tykkelsen på kanter [border-width]
• Farven på kanter [border-color]
• Typer af kanter [border-style]
• Eksempler på kodning af kanter
• Sammenskrivning [border]

Tykkelsen på kanter [border-width]

Tykkelsen på kanter defineres med egenskaben border-width, som kan antage værdierne thin, medium, thick eller en længdeværdi - f.eks. angivet med pixels. Nedenstående figur illustruerer systemet:

Farven på kanter [border-color]

Egenskaben border-color definerer hvilken farve kanten skal have. Værdierne er de normale farveværdier - f.eks. "#123456", "rgb(123,123,123)" eller "yellow" .

Typer af kanter [border-style]

Der findes en forskellige typer af kanter at vælge imellem. Nedenfor er vist 8 forskellige typer som Internet Explorer 5.5 fortolker dem. Alle eksempler er vist med farven "gold" og tykkelsen "thick", men kan naturligvis vises med alle øvrige farver og tykkelser.

Værdien none eller hidden kan anvendes hvis man ikke ønsker nogen form for kant.

Eksempler på kodning af kanter

Ovenstående 3 egenskaber kan sammensættes for hvert element og derved frembringe forskellige kanter. For at illustruere dette kan vi kigge på et dokument hvor vi definerer forskellige kanter for <h1>, <h2>, <ul> og <p> - resultatet er måske ikke så kønt - men det viser nogle af mulighederne:

h1  {
	border-width: thick;	
	border-style: dotted  ;	
	border-color: gold;	
}
h2  {
	border-width: 20px;	
	border-style: outset  ;	
	border-color: red;	
}
p  {
	border-width: 1px;	
	border-style: dashed ;	
	border-color: blue;	
}
ul  {
	border-width: thin;	
	border-style: solid ;	
	border-color: orange;	
}

 Vis som eksempel

Det er også muligt at angive specielle egenskaber for top-, bund-, højre- eller venstrekanter. Følgende eksempel viser hvordan du gør:

h1  {
	border-top-width: thick;	
	border-top-style: solid  ;	
	border-top-color: red;	

	border-bottom-width: thick;	
	border-bottom-style: solid  ;	
	border-bottom-color: blue;	

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

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

 Vis som eksempel

Sammenskrivning [border]

Som det også er tilfældet for mange andre egenskaber kan man sammenskrive mange egenskaber til én egenskab: border. Lad os se et eksempel:

p  {
	border-width: 1px;	
	border-style: solid ;	
	border-color: blue;	
}

Kan sammenskrives til:

p  {
	border: 1px solid blue;	
}

Browser-kompatibelitet

Stort set alle browsere understøtter det du lige har lært. Hvis du er i tvivl kan prøve dig frem, eller referere til nedenstående tabel:

Tabellen viser fra og med hvilken version browseren understøtter den pågældende egenskab.

Opsummering

I den næste lektion kigger vi på hvordan man definerer dimensionerne i boks modellen - højde og bredde.

[ Forrige | Indhold | Næste]