CSS
- For alternative betydninger, se CSS (flertydig). (Se også artikler, som begynder med CSS)
Cascading Style Sheets (forkortet CSS) er et computersprog, der bruges til at beskrive, hvordan man ønsker indholdet af et HTML/XHTML/XML-dokument præsenteret, f.eks. i en browser.
Cascading Style Sheets (CSS) | |
Filendelse: | .css |
---|---|
MIME-type: | text/css |
Udviklet af: | World Wide Web Consortium (W3C) |
Formattype: | Style sheet language |
I HTML kan man indlejre CSS-koden i et style
-element eller have det i filer for sig (på samme måde som man kan med JavaScript) ved henvisning via et link
-element. En af fordelene ved at placere typografibeskrivelsen i en fil for sig selv er, at formateringen kan genbruges i flere dokumenter (ved at flere dokumenter inkluderer 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 normalt ikke er hensigtsmæssigt.
Ved mere avanceret brug kan et CSS-dokument bruges til at styre en hel hjemmesides udseende og visuelle opbygning. Derved kan man holde indholdet af siden i HTML-koden og lade CSS-koden styre udseendet.
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".
Brug af Cascading Style Sheets i HTML
redigérFra et HTML-dokument kan der refereres til en eller flere CSS-filer med linjer som denne i head
-elementet:
<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 og inkludere det direkte på siden. Eksempel:
<style type="text/css">
p {
color: sienna;
margin-left: 20px;
}
</style>
Til sidst kan CSS-teksten stå som en værdi i attributten style
tilknyttet et element. Eksempel:
<p style="color: sienna; margin-left: 20px">
Dette er et typografisk afsnit
</p>
I selve CSS-filen bruges en syntaks, som ikke ligner HTML. Det mest grundlæggende af syntaksen ser således ud:
/* Kommentar */
selector {
egenskab1: værdi;
egenskab2: værdi;
}
Og her er et konkret eksempel på et CSS-dokument:
/* Brug sort tekst på grå baggrund i hele dokumentet som standard */
body {
color: black; /* Sort tekstfarve */
background: gray; /* Grå baggrundsfarve */
}
/* Grønne centrerede overskrifter. Den anvendte baggrundsfarve til
overskrifterne forbliver den grå fra body-elementet, da h1, h2, og h3
altid er indeholdt i et body-element. */
h1, h2, h3 {
color: green; /* Tilsidesæt tekstfarven fra body-elementet */
text-align: center; /* Centrer overskriften */
}
Som vist i eksemplet kan definitioner tilsidesættes eller "overskrives". Overskrivningsreglerne inden for CSS følger til dels rækkefølgen af definitioner, men mere vigtigt er, at de mest specifikke regler har forrang over for mindre specifikke regler. Derfor[forklar yderligere] vil baggrunden forblive grå i eksemplet og den generelle tekstfarve vil være sort.
Klasser og id'er
redigérMan kan bruge klasser og id'er til at strukturere og gøre genbrug lettere.
Eksempel:
<style>
/* Denne regel refererer til elementer, hvis class-attribut
indeholder "minklasse" */
.minklasse {
font-size: 16px;
font-family: Arial;
color: red;
}
</style>
<p class="minklasse">Dette vil stå med rød 16px Arial.</p>
Man kan også referere til specifikke id
-attributter:
<style>
/* Denne regel refererer til det element, hvis id-attribut
er lig med "mitid" (bemærk at kun et enkelt element kan
have en bestemt id-værdi). */
#mitid {
font-size: 16px;
font-family: Arial;
color: red;
}
</style>
<p id="mitid">Dette vil stå med rød 16px Arial.</p>
Id'er og klasser kan også kombineres:
Eksempel:
<style>
.min-class {
background-image: url("http://example.com/baggrund.jpg");
}
#mit-id {
color: red;
}
</style>
<h1 id="mit-id" class="min-class">Rød overskrift med baggrundsbillede</h1>
Selectors
redigérSelectoren ("udvælgeren") vælger et eller flere elementer. Det der står i krøllede parenteser {} efter selectoren kommer til at gælde for de valgte elementer. Her er en tabel over hvad selectorerne vælger:
Selector | 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 attributten d med værdien c | <E d="c"> og </E> |
E#myid | Elementet E med den unikke ID "myid" | <E id="myid"></E> |
Note: Man kan godt blande tingene (eksempel: P.stor>SPAN+A[href="http://www.wikipedia.org"]:hover)
Egenskaber
redigérEgenskaber (eng. properties) bestemmer hvad der skal ske med alle de elementer selectoren har valgt. Eksempel:
p {
background: white;
}
Her udvælger selectoren HTML-elementet p
, og egenskaben siger at baggrunden skal være hvid. Her kan du se en liste over egenskaber og hvad værdierne kan være: http://www.w3.org/TR/REC-CSS2/propidx.html
Eksterne henvisninger
redigér- Cascading Style Sheets hos World Wide Web Consortium
- CSS Zen Garden
- Lær CSS hos World Wide Web Consortium's undervisningsside (på engelsk)