Hvordan bruges CSS
Der er 3 måder at indsætte css
1. Eksternt style sheet
2. Internt style sheet
3. Inline style
Eksternt style sheet
Her har du alle dine formateringsregler liggende i én fil - vi kalder den ofte styles.css, men du bestemmer selv.
På den måde kan du styre layoutet på alle sider på dit web-site fra denne ene fil! - DET ER SMART!
Det eneste du skal gøre er at sørge for at alle sider har et <link> tag i toppen af koden (det hjælper DreamWeaver/Expression dig med). Koden ser sådan her ud:
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head
Dit program hjælper dig med at oprette og vedligeholde sådan et CSS dokument.
Et CSS dokument kan se sådan her ud:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Vi skal primært arbejde med eksternt style sheet!
Internt style sheet
Et internt style sheet kan bruges, hvis du har en enkelt side på dit site, der skal have sit helt eget layout. Et internt style sheet står i head sektionen på det dokument, der skal have specielt layout - det kan se sådan her ud:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Styles
Med inline styles mister du mange af de fordele der er med style sheets, så brug det kun hvis det er virkelig nødvendigt!
Inline syles sættes direkte på HTML elementet:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Flere Style Sheets
Hvis en egenskab sættes for samme selektor i forskellige style sheets vil værdierne nedarves.
Hvis man f.eks. sætter følgende egenskaber for H3 i et eksternt stylesheet:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
Og et internt style sheet sætter
h3
{
text-align:right;
font-size:20pt;
}
Formateringen af H3 vil så blive:
color:red;
text-align:right;
font-size:20pt;
Det interne style sheet "vinder" altså over det eksterne.
Og skulle du også have et inline style sheet vil det vinde over de to andre.
Flere styles vil "cascade" til én
Formatering kan sættes
-
Inde i et html element
-
I head sektionen på en html side
-
I en ekstern CSS fil
"Cascade" rækkefølge
Formateringen af et html element styres regler i følgende rækkefølge
1. Browseren default formatering
2. Eksternt style sheet
3. Internt style sheet (i head sektionen)
4. Inline style (inde i et html element)
Bemærk: Hvis linket til det eksterne style sheet er placeret efter det interne style sheet i <head> vil det eksterne style sheet "vinde" over det interne!