CSS

Fra Wikipedia, den frie encyklopædi

Cascading style sheet, CSS, er et computer-sprog der bruges til at beskrive hvordan man ønsker indholdet af et HTML/XHTML/XML dokument præsenteret f.eks. i en browser. Man kan indlejre sproget i et HTML-dokument mellem to links-tags eller have det i filer for sig (på samme måde som man kan med javascript). Fordelen ved at placere denne type oplysninger i en fil for sig selv er, at formateringen kan genbruges i flere dokumenter (ved at flere dokumenter inkludere link til samme fil med css). Hvis man ikke lægger det i en fil for sig vil man skulle gentage den samme kode på hver side hvor man ønsker samme effekt, hvilket ikke er hensigtmæssigt.

Ved mere avanceret brug, kan et CSS-dokument bruges til at kontrollere en hel hjemmesides udseende og opbygning. Derved kan man holde indholdet af siden i HTML-koden og samtidig lade CSS-koden kontrollere udseendet. Et eksempel på den form for brug af CSS ses blandt andet på siden CSS Zen Garden.

Ud over genbrug giver CSS-formatet mulighed for at kombinere formateringsoplysninger fra flere forskellige CSS-filer. Med denne teknik kan man eksempelvis have en CSS-fil med basal formatering, der bruges af alle HTML-dokumenter, man administrerer, og en anden, som bruges til eksempelvis "avanceret indhold".

Indholdsfortegnelse

[redigér] Brugen af Cascading style sheets

Fra et HTML-dokument refereres til en eller flere CSS-filer med linjer som denne i <head>:

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

Man kan også skrive CSS teksten i <style> elementet. Det skal bare være i <head> elementet. Eksempel:

<head>
<style type="text/css">
p {
color: sienna;
margin-left: 20px
}
</style>
</head>

Til sidst kan CSS teksen stå som en value i attribute'en style i et element. Eksempel:

<p style="color: sienna; margin-left: 20px">
Dette er en paragraph
</p>

I selve CSS-filen bruges en syntaks, som ikke ligner HTML. Her er et eksempel på syntaksen:

selector {
property: value;
/*Kommentar*/
property: value
}

/* Brug sort tekst på hvid baggrund i dokumentet */
body {
   font-family: verdana, arial, helvetica, sans-serif;
   color: black;
   background: white;
}

/* Grønne centrerede overskrifter. Baggrund skinner igennem fra 'body' */

h1, h2, h3 {
   color: #11ee11;
   text-align: center;
}

Som vist i eksemplet kan definitioner overskrives. Overskrivningsreglerne inden for en CSS-fil følger ikke rækkefølgen af definitioner, men de mest specifikke regler gælder. Derfor vil baggrunden forblive hvid i eksemplet og den generelle tekstfarve vil være sort.

[redigér] Selectors

Selector'en vælger et eller flere elementer. Det der står i disse parenteser: {} bag efter Selector'en kommer så gælde for de valgte elementer. Her er en tabel over hvad Selector'ne vælger:

Selector'en Elementer den vælger Alt imellem
* Alle elementer Alt tekst
E Elementet E <E> og </E>
E.C Elementet E med class'en C <E class="C"> og </E>
F > E Elementet E som er child i et element F <F><E> og </E></F>
F+E Elementet E som er lige efter elementet F <F></F><E> og </E>
E[d="c"] Elementet E med attribute'en d med value'en c <E d="c"> og </E>
E#myid Elementet E med den unike ID som er "myid" <E id="myid"></E>

Note: Man kan godt blande tingene (eksempel: P.stor>SPAN+A[href="http://www.wikipedia.org"]:hover)

[redigér] Property

Property'er er dem der bestemmer hvad der skal ske med alle de elementer Selector'en har valgt. Eksempel:

p {
   background: white;
}

Her vælger Selector'en elementet P og Property'en siger at background'en skal ændres. Value'en bag efter siger at den skal være hvid. Her kan du se en liste over Property'er og hvad value'erne kan være: [1]

[redigér] Eksterne henvisninger