 |
| 9.1. | Indhold | |||||
 |
9.1.1 | Typografiark | ||||
|
9.1.2 | Hvorfor Bruge Typografiark | ||||
|
9.1.3 | Opbygningen af et Typografiark | ||||
|
9.1.4 | Arv | ||||
|
9.1.4.1 | Værdien "inherit" | ||||
|
9.1.5 | Klasser | ||||
|
9.1.6 | Kommentarer i Typografiark | ||||
Cascading Style Sheets - eller skabeloner eller typografiark, som vi også kan sige på dansk - er en beskrivelse af, hvordan en hjemmeside bliver vist for brugeren. Udtrykket "cascading" hentyder til, at beskrivelserne fra forskellige kilder kan blandes sammen for at få den endelige udformning, idet visse typografiark har fortrinsret overfor andre. Lyder det indviklet, synes du? Bliv bare hængende alligevel, for det er faktisk ikke så slemt.
Her vil vi beskæftige os med "Cascading Style Sheets, level 2", der er defineret i [CSS2], og som er baseret på "Cascading Style Sheets, level 1", defineret i [CSS1]. De fleste typografiark udformet efter CSS1 er således også gyldige i CSS2.
HTML 4.0 understøtter også andre style sheet sprog end CSS, men disse vil ikke blive gennemgået her. Det er desuden ikke nogen god ide at blande flere style sheet sprog.
Det væsentligste formål med typografiark er at skille indhold og præsentation ad. Det i sig selv forenkler HTML-dokumenterne en hel del, da mange af formateringskoderne forsvinder, mens nogle få andre kommer til. Desuden kan man give elementerne en hel del mere spræl ved hjælp af typografiark, end det ellers er muligt.
De væsentligste fordele ved adskillelsen er dog, at HTML-dokumenterne bliver nemmere og billigere, at vedligeholde - et ikke uvæsentligt argument i vore dage - da præsentationen af dem kan placeres centralt i et eksternt typografiark.
En anden fordel ved at skille præsentation og indhold ad er, at man kan tilpasse præsentationen til forskellige medier og derved give flere brugere mulighed for at se hjemmesiden - eller få den læst op for den sags skyld.
Typografiark kan anvendes sammen med stort set alle elementer i HTML 4.0. Der er dog to elementer - SPAN og DIV - der er specielt velegnede til brug sammen med typografiark, da de ikke i sig selv medfører nogen formatering af teksten bortset fra, at de virker på henholdsvis inline- og blokniveau.
Et typografiark består af en eller flere regler, der beskriver, hvordan et element skal se ud i et HTML-dokument. Et simpelt typografiark kan se således ud:
H1 { color: blue }
der indeholder en enkelt regel, som sætter skriftfarven på den største overskrift til blå, mens alle andre egenskaber ved overskrift 1 ikke berøres.
En regel består af to væsentlige dele: en selektor ("H1"), der angiver hvilket element, reglen gælder for, samt en erklæring ("color: blue"), der bestemmer, hvordan selektorens elementer skal se ud. Erklæringen består også af to dele: egenskaben ("color") og dens værdi ("blue").
Mange egenskaber kan sættes til flere værdier. Hvis værdierne er alternativer, adskilles de med komma, mens værdier, der lægges sammen, blot adskilles med mellemrum. Det fremgår af teksten, om en egenskab understøtter flere værdier, samt om de er alternativer, kan lægges sammen eller begge.
Reglen i eksemplet ovenfor omfatter kun et enkelt element, men en selektor kan sagtens indeholder flere elementer, idet reglen så gælder for dem alle sammen. På samme måde kan en regel indeholder flere erklæringer, der så gælder for det eller de elementer, der er angivet i selektoren:
H1, H2 { color: blue; text-align: center }
der gælder for overskrift 1 og overskrift 2, som begge vises centreret og med blå skrift. De to elementer i selektoren adskilles med komma, mens der anvendes semikolon til adskillelse af de enkelte erklæringer.
Man kan sætte default style information for hele dokumentet ved at knytte den til dokumentets <BODY> tag:
BODY { color: black; background: url(baggrund.gif) white }
der sætter dokumentets tekstfarve til sort, og baggrunden til et GIF-billede eller hvidt, hvis billedet ikke er tilgængeligt. Disse style informationer vil så gælde for alle dokumentets elementer, såfremt de ikke selv definerer noget andet. Med andre ord arver de andre elementer denne style information fra deres ophav - i dette tilfælde BODY-elementet.
I det første eksempel i afsnittet "Opbygningen af et Typografiark" sætter vi skriftfarven i overskrift 1 til at være blå. Er en del af en sådan overskrift 1 fremhævet:
<H1>Det er <EM>vigtigt</EM> med overskrifter</H1>
og der ikke er knyttet nogen skriftfarve til EM-elementet, vil det fremhævede "vigtigt" arve skriftfarven fra overskriften, der er dets ophav, dvs. det vil også blive skrevet med blåt.
Det er dog ikke alle style egenskaber, der arves fra ophavselementet. F.eks. arves baggrunden ikke, men standard er, at ophavets baggrund skinner igennem. Det er som regel logisk hvilke egenskaber, der ikke nedarves.
Hver egenskab har også en medfødt værdi "inherit", der betyder, at den pågældende egenskab for et givent element antager den samme værdi som sit ophavselement. Den nedarvede værdi, der normalt kun bruges som en reserveværdi, kan styrkes ved specifikt at sætte "inherit":
BODY { color: black } background : white } * { color: inherit } background: transparent }
I dette eksempel sættes egenskaberne color og background for <BODY> elementet. I alle andre elementer vil color egenskaben blive arvet og baggrunden være gennemsigtig.
Ud over at bestå af HTML-elementer kan en selektor også bestå af klasser, som så tilknyttes ved hælp af elementets class attribut. Man så taler om at definere en klasse til det pågældende element:
H1.Kapitel { font-size: 150%; color: blue; text-align: center }
Denne regel definerer klassen Kapitel til overskrift 1. Kapitel har akkurat de samme egenskaber som en normal overskrift 1 bortset fra, at skriften er 50% større, blå og centreret. Når man så vil anvende klassen i et HTML-dokument, skriver man blot:
<H1 class="Kapitel">Dette er en kapiteloverskrift</H1>
idet man angiver klassens navn i elementets class attribut (nej, hvor smart!).
Men hvad nu hvis det samme sæt egenskaber skal gælde for mange elementer? Skal vi så til at lave den samme regel for hver enkelt? Sikke et bøvl! Vi kunne selvfølgelig sætte flere elementer ind i den samme regel:
H1.Kapitel, H2.Kapitel { font-size: 150%; color: blue; text-align: center }
men selv det kan hurtigt blive bøvlet, hvis der er flere end blot nogle få elementer involveret. Næh, så er det bedre at knytte klassen til alle elementerne:
.Kapitel { font-size: 150%; color: blue; text-align: center }
Det er også meget mere overskueligt. Men det betyder ikke, at man bare skal erklære alle klasser som generelle. For så kan man hurtigt ende med en masse rod, og der var jo ikke det, der var meningen.
Det er ofte en god ide at indsætte kommentarer i et typografiark f.eks.for at fortælle, hvad de enkelte regler medfører. Kommentarer angives på samme måde i CSS som i programmeringssproget C:
H1 EM { color: red } /* Fremhævninger i overskrift 1 skrives med rødt */
En kommentar kan ikke stå inde i en anden kommentar.
 |
 |
 |
 |
