Udskriv…
Hjælp til udskrift
Om…
Nyhedsbrev
Sitemap
Teknik
Skriv til
RSS
Søg
Del med…Lynkursus i Cascading Style Sheets (CSS)
Resumé
Af John Mirland, UNI-C16/09 2002
Ved at anvende CSS kan man på fornuftig vis adskille indhold og design i produktionen af ens websider og samtidig få mulighed for at ændre design på tværs af mange sider ved blot at rette i én fil.
CSS betyder Cascading Style Sheets. I stedet for at definere en websides udseende og formatering i selve html-koden anvender man et stylesheet. Dette indeholder oplysninger - eller måske rettere regler - om fonte, størrelser, farver, placeringer - alt hvad der ikke har noget med selve indholdet at gøre. Et stylesheet kan på dansk oversættes til typografiark og fungerer principielt på samme måde som typografiark kendt fra Word.
CSS er en webstandard angivet af World Wide Web Consortium, også kaldet W3C.
Adskillelsen af indhold og design er uhyre vigtig. Html har gennem årene udviklet sig til et rodsammen af standarder og propietære tags (eksempelvis font tag'et) fra browserproducenterne. Html koden er blevet et uigennemskueligt rod af indhold og design. Ved at adskille de to kan man koncentrere sig om at lave et indhold i stedet for at blande designprocessen ind i det. Desuden kan man ved at benytte et centralt stylesheet lade mange sider anvende de samme styles, og på den måde kan man ændre et website's design blot ved at rette i en enkelt fil.
Det anbefales desuden at anvende CSS af hensyn til eksempelvis synshandikappede, da man på den måde ikke blander indhold og design sammen, og de derfor kan få et bedre udbytte af deres besøg på et website.
Om Hvorfor bruge det?
Nyhedsbrev
Udseendet og opførslen af ethvert html-tag kan defineres via anvendelsen af CSS.
Syntax
Syntaxen for stylesheets er ikke helt ens, alt efter hvordan man anvender dem. Den største forskel er brugen af {} på dokument-niveau og i eksterne styles.Hvert tag kan have en række regler. Hver regel adskilles af;
Inline styles
Inline styles er den mest simple måde at anvende styles på. Den er også den mest uhensigtsmæssige, da man ganske vist anvender CSS-syntaxen og konceptet, men fortsat har oplysninger om det visuelle design blandet ind i índholdet:
<h1 style="font-family:verdana, sans-serif;font-size:20px;color:red"/>
Dokument-niveau styles
Dokument-niveau styles skrives ind i <head> delen af html-dokumentet. Reglerne står altså ikke direkte blandet sammen med indholdet, men det er stadig væk ikke helt godt:
<style type="text/css">
h1 {font-family:verdana, sans-serif;font-size:20px;color:red}
</style>
Eksterne stylesheets
Dette er den absolut mest effektive udnyttelse af CSS:
h1 {font-family:verdana, sans-serif;font-size:20px;color:red}
Det eksterne stylesheet skrives i ren tekst og gemmes med ekstensionen.css
Ønsker man at kommentere sine styles gøres dette således:
/* kommentar */
For at gøre browseren opmærksom på, at man har et stylesheet, der skal med, skrives følgende i <head> delen af html-dokumentet:
<link rel="stylesheet" type="text/css" href="ut_style.css">
eller:
<STYLE TYPE="text/css">
@import url(ut_style.css);
</STYLE> (note: Bemærk at generation 4 browsere ikke kender import-funktionaliteten!)
Et eksternt stylesheet kan ligge på en hvilken som helst server ude i verden. Det vil sige, at et firma som UNI-C, der har mange sites på flere forskellige servere, kan lægge sit centrale stylesheet på én server, og alle kan stadig anvende det.
Nedarving
Nedarving er en meget vigtig del af CSS og samtidig en af de ting, der har taget browserproducenterne længst tid at implementere. I teorien betyder nedarving, at har man defineret:
body {font-family:verdana, sans-serif;font-size:12px;color:black}
Så gælder dette for alle tags indeholdt i <body>
Ønsker man så, at teksten indeholdt i p tags skal være rød, skriver man:
p {color:red}
Dette gælder for alle tags, der "indeholder" andre: At deres regler nedarves til deres "børn", og at børnene kan tilføjes deres egne regler eller ændre på "forældrenes".
Classes
Ved at anvende classes kan man have flere regelsæt for det samme tag. En class defineres således:
.classNavn {color:red}
…og anvendes således i html-koden:
<h1 class="classNavn">
Hvis man skriver html-tag'et foran:
h1.classNavn {color:red}
Så "binder" classen sig til netop det tag.
Pseudoclasses
En pseudoclass definerer hvorledes et tag opfører sig i forskellige situationer, f.eks når en musemarkør holdes hen over.Et eksempel på en pseudoclass:
a:hover {text-decoration:underline}
Pseudoclassen ovenover binder sig til a tag'et, og understreger indholdet i a, når musmarkøren holdes hen over. Pseudoclasses karakteriseres ved, at der indsættes et: efter det tag, som classen refererer til, og før den situation, der resulterer i classens aktivering.
Classes på id
Ved at anvende id som kan skrives på stort set alle html tags, kan man også tilskrive classes. Det gør man således:
#idNavn {background-color:red}
… og i html-koden:
<td id="idNavn">
Det kan være ganske smart at anvende id, da det gør det nemmere at identificere det enkelte tag i andre sammenhænge. Man kan uden problemer anvende både id og class på samme tag, men så bør kun class henvende sig til stylesheetet.
Ordet "cascading" kan dårligt oversættes til dansk, så man får den rigtige betydning frem, men man skal forestille sig, at reglen i én style "cascader" ud over den næste regel på samme måde som et vandfald. På denne måde kan man i sit centrale stylesheet have defineret, hvorledes en heading 1 skal opføre sig:
h1 {font-size:18px; color:red}
Men inde på selve siden (dokumentet) ønsker man, at netop én af de anvendte heading 1 skal være grøn. Så vil man umiddelbart forvente at skulle definere en særlig class for dette eller skrive:
<h1 style="font-size:18px;color:green">
Men man kan i stedet nøjes med at skrive:
<h1 style="color:green">
Styles defineret inline "vinder" over styles defineret enten på dokument-niveau eller eksternt samtidig med, at "cascadingen" sørger for, at fontstørrelsen stadig er 18px.
Rækkefølgen af hvem der vinder over hvem er:
- Inline style
- Dokument-niveau style
- Ekstern style
Desuden vinder et importeret stylesheet angivet inline over et eksternt. Har man flere importerede stylesheets afgør rækkefølgen, hvem der vinder: Den sidst importerede.
Dette betyder i praksis, at man kan have et overordnet stylesheet f.eks. for UNI-C samtidig med, at det enkelte site kan have sit eget stylesheet, som importeres på dokument-niveau:
<STYLE TYPE="text/css">
@import url(ut_style.css);
@import url(praktik.css);
</STYLE>
I dette stylesheet defineres de regler, man ønsker for netop dette site samtidig med, at man får "cascadingen" fra det centrale UNI-C stylesheet.
Man kan også vælge at linke til flere stylesheets:
<link rel="stylesheet" type="text/css" href="ut_style.css">
<link rel="stylesheet" type="text/css" href="praktik.css">
Resultatet burde i så tilfælde ikke blive en cascade. I stedet skulle brugeren blive spurgt af browseren, hvilket stylesheet, man ønsker anvendt. I praksis er dette dog ikke implementeret, så der er for nuværende ingen reel forskel mellem de to.
Da man ikke altid ved, hvilket medie modtageren anvender eller om vedkommende har tænkt sig at printe en given webside, understøtter CSS2 [1] muligheden for at lave mediespecifikke stylesheets. Det vil sige, at man kan lave et stylesheet, der fjerner en evt. baggrundsfarve, erstatter den skærmvenlige font med en mere printervenlig samt undlader at vise evt. menuer, det øjeblik brugeren trykker på "print".
Det fungerer således:
<link rel="stylesheet" type="text/css" href="print_style.css" media="print">
<link rel="stylesheet" type="text/css" href="ut_style.css">
Man angiver det stylesheet, der afviger fra den generelle brug først i rækken af angivne stylesheets. Det vil sige, at i ovenstående tilfælde er det printstylesheetet, der afviger, og nedenunder dette er angivet stien til det generelle stylesheet. Implicit i dette forstår browseren, at media="screen". Derfor skal man ikke angive medietype på det generelle stylesheet, hvis det skal anvendes på computerskærm.
Mulighederne er: tty, tv, projection, handheld, print, braille, aural og all.
Boksmodellen tager sit udspring i, at ifølge CSS er alle elementer basalt set en rektangulær boks. Denne boks kan der opstilles regelsæt for på samme måde, som man definerer hvilken font, der anvendes gennem et regelsæt. Boksen har margin ud til det omgivelserne og den har padding i forhold til dens indhold. Derudover har den border, farver, baggrundsbilleder osv osv.
Nedenstående eksempel viser nogle af mulighederne med boksmodellen:
#eksempel {margin:20px;padding-top:10px;padding-left:5px:padding-right:8px; padding-bottom:30px;border:1px;solid black;width:150px;height:45px; position:absolute;left:45px;top:80px;display:block; background-image:url(images/billede.gif); background-repeat:no-repeat;background-attachment:fixed}
Browserunderstøttelsen af CSS har længe ladet meget tilbage at ønske. Netscape's 4 generation var og er et mareridt mht. CSS. Der er ikke nogen konsekvens i Netscapes implementation af CSS og man kan kun prøve sig frem. Det bedste er nok at opfatte Netscape 4 som en browser, der ikke understøtter CSS. Internet Explorer har siden v.4 arbejdet imod at understøtte større og større mængder af CSS 1.2 standarden. IE5 og frem understøtter omkring 80% af W3C's anbefaling. Den ultimative kommercielle browser er for tiden Netscape 6.2. Den bygger på Mozilla og understøtter efter sigende CSS 1.2 100%. Alle andre browsere (Opera, AOL o.l.) er mere eller mindre uinteressante, da så få brugere anvender dem.
Målet er at udelukke brugen af f.eks. tables til at styre layout. En tabel skal benyttes til det, den er tænkt som: En tabel. Placering af indhold og dets udseende skal styres igennem CSS. Der er kun gevinster at hente på den konto. Nogle vil argumentere for, at deres browser ikke kan understøtte det ordentligt. Det er kun deres eget problem. Browsere er gratis og installation / opgradering er automatiseret. Det er blot et spørgsmål om vilje og fremsynethed.
For den fulde dokumentation af standarden og alt andet om CSS:
Læs mere om tilgængelighed for websider hos Statens Information
