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]