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]

