CSS
Fra Wikipedia, den frie encyklopædi
For alternative betydninger, se CSS (flertydig). (artikler, som begynder med CSS)
Cascading Style Sheets, (også kaldet for stilark, stylesheet eller bare 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]

