Nyeste it-job

Flere it-job

Lektion 2: Hvordan fungerer CSS?

Egenskaberne i Cascading Style Sheets (CSS) minder meget om egenskaberne i HTML. Du vil derfor formentlig kunne genkende mange af koderne. Men før vi kaster os ud i alle mulighederne, er det en god idé at kigge på den grundlæggende syntaks.

Den grundlæggende syntaks i CSS

For at vise ligheden mellem egenskaberne i HTML og CSS kan vi starte med et simpelt eksempel. Lad os sige at vi ønsker en rød baggrundsfarve på en side:

Med HTML ville vi have skrevet ...

<body bgcolor="#FF0000">

... mens vi i CSS opnår samme effekt med:

body {background-color: #FF0000;}

I dette eksempel er det altså stort set den samme syntaks for HTML og CSS. Koden du ser ovenfor illustruerer også den grundlæggende model man arbejder med i CSS:

figur, der viser forholdet mellem selektorer, egenskaber og værdier.

Det er da ikke så svært vel? Hvis du ser på eksemplet ovenfor med baggrundsfarven på <body>, giver det jo næsten sig selv.

Men - spørger du sikkert - hvor skriver man sin CSS kode henne for at få det til at virke? Og det er netop, hvad vi skal kigge på nu.

3 metoder til at bruge CSS i et HTML dokument

Der findes flere måder man kan bruge CSS i et HTML dokument. For god ordens skyld kigger vi på 3 metoder. Metode 3 har flest fordele, og det vil være den metode der benyttes i denne tutorial. De to øvrige kan dog være gode at kende, derfor er de medtaget.

Metode 1: Atributten style

En metode til at bruge CSS i HTML er ved at bruge atributten style. Hvis vi tager eksemplet med baggrundsfarven på <body> kan det gøres på denne måde:

<html>
<head>
<title>Eksempel</title>
</head>
<body style="background-color: #FF0000;">
...

Metode 2: Elementet style

En anden metode til at bruge CSS i HTML er ved at bruge elementet <style>. Det kunne f.eks. gøres på denne måde:

<html>
<head>
<title>Eksempel</title>
<style type="text/css">
	body {background-color: #FF0000;}
</style>
</head>
<body>
...

Metode 3: Linke til et stylesheet

At linke til et såkaldt eksternt stylesheet er klart den mest anbefalelsesværdige metode. Derfor vil vi i denne tutorial kun give eksempler med eksterne stylesheets.

Et eksternt stylesheet er simpelthen blot en tekstfil med endelsen .css, som ligger på dit website - eller hvis du arbejder lokalt - på din harddisk.

Lad os sige at vores stylesheet hedder style.css, og ligger i en folder som vi kalder for style, denne situation kan vi illustrere sådan:

folderen "style" indeholdende filen "style.css"

Lad os så prøve at linke til vores stylesheet fra filen default.htm. Dette gøres med følgende linie:

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

Stien til vores stylesheet angives altså med atributten href. Bemærket at linket skal placeres i headersektionen af HTML-dokumentet, det vil sige mellem <head> og </head>:

<html>
<head>
<title>Mit dokument</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
...

Linket fortæller browseren, at den skal hente layout fra CSS-filen. Som du måske har regnet ud, kan flere HTML-dokumenter altså linke til det samme stylesheet, og dermed "hente" sit layout fra den samme fil. Dette kan illustrueres med følgende figur:

figur, der viser hvordan flere HTML-dokumenter kan linke til det samme stylesheet.

Alene denne mulighed kan spare dig for utroligt meget arbejde. Lad os f.eks. sige at du har et website med 100 HTML-dokumenter - og at du ønsker at ændre baggrundsfarven på dine sider. Hvis du benytter HTML til at definere baggrundsfarven, må du manuelt sidde og rette 100 filer igennem. Men hvis du benytter CSS, kan du gå ind ét sted og rette baggrundsfarven for alle 100 dokumenter på én gang.

Ganske smart ikke? - og bare vent, det bliver bedre endnu.

Prøv selv

Det er på tide, at vi får omsat det vi lige har lært til praksis. Så start din Notepad (eller hvilken tekst-editor du nu bruger), og prøv at lave to filer - en html-fil og en css-fil - med følgende indhold:

default.htm

<html>
<head>
<title>Mit dokument</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Mit første stylesheet</h1>
</body>
</html>

style.css

body {
	background-color: #FF0000;
}

Hvis du placerer de to filer i forskellige mapper, skal du rette henvisningen i atributten href i default.htm - ellers kan du bare placere dem ved siden af hinanden.

Prøv så at åbne default.htm med din browser: Dokumentet har fået en rød baggrund. Tillykke! - du har nu lavet dit første stylesheet.

Skynd dig nu videre til næste lektion, hvor vi straks vil gå igang med at kigge på nogle egenskaber.

[ Forrige | Indhold | Næste]

This CSS tutorial is now avaliable in English

You can find this lesson and the rest of this CSS tutorial in English at HTML.net.