CSS placering

Fra Kommunikation-IT Holstebro HTX
Skift til: navigering, søgning

CSS placering er det udtryk der bruges for funktionen der tillader dig at indsætte en anderledes stil på din hjemmeside. CSS kan hjælpe dig med bedre at holde styr på din side, og hurtigt og effektivt ændre i udseendet og stilen for din hjemmeside. Informationen til dit CSS style-tag kan opbevaret i selve dokumentet, eller i flere forskellige separate dokumenter.

Der er findes flere forskellige måder at indsætte en CSS style på. De to bedste hedder External style sheet og Internal style sheet.

- External style sheet

- Internal style sheet

- Styling i de enkelte koder

External style sheet

Et External style sheet tillader dig, at ændre hele udseendet på din hjemmeside (alle undersider), ved hjælp af ændring i en enkelt fil.

Dette er klart den bedste måde at håndtere CSS på.

CSS filen kan skrives i hvilket som helst dokument, og opbevares separat fra hjemmesiden selv.

Der skal være et link på hver side, der referer til CSS filen.

Eksempel

Her er et eksempel på hvordan der henvises til en CSS-fil:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Her er et eksempel på hvordan et style sheet kan skrives i CSS-filen:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

Internal style sheet

Et Internal style sheet tillader dig i modsætning til et external style sheet, kun at ændre udseendet på én side.

Dette er mest brugbart til lige at teste noget CSS inden man lægger det i CSS-filen, eller hvis du vil have en forskellig stil på hver af dine sider. Du behøver ikke at have et refererende link til din CSS på hver side, hvis du bruger denne metode.

Eksempel

Her er et eksempel på CSS-koder der er lagt ind i siden:

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

CSS i de enkelte koder

Man kan på det enkelte tag lægge styles ind, ved at man bruger style-egenskaben.

Denne metode er ikke anbefalelsesværdig, da det normalt giver en tung kode at læse - det er bedre at bruge en class til at formattere med, da man så igen kan lægge alt styling af siden i en separat fil.

Eksempel

Dette eksempel viser hvordan CSS kan placeres i det enkelte tag:

<h1 style="color:blue;text-align:center">Dette er en header 1</h1>
<p style="color:green">Dette er tekst der står i et afsnit (paragraph på engelsk).</p>
<p>Dette står i et afsnit der ikke er stylet</p>

Det giver følgende udseende:

Style-direkte.png