 |
| 9.2. | Indhold | ||||
 |
9.2.1 | Inline Typografiark | |||
|
9.2.2 | Globale Typografiark | |||
|
9.2.2.1 | Skjul Style Information for Ældre Browsere | |||
|
9.2.3 | Eksterne Typografiark | |||
|
9.2.3.1 | Fortrukne og Alternative Typografiark | |||
Den mest nærliggende måde at anvende typografiark på er inline typografiark, hvor man simpelt hen angiver style informationen i det element, den skal gælde for. Det gøres ved hjælp af elementets style attribut:
<P style="color: blue; text-align: center">Teksten i dette afsnit er blå og centreret</P>
der viser et afsnit, hvor inline style informationen får teksten til at stå centreret og med blå skrift. Som det ses, når man åbner eksemplet, gælder style informationen kun for det afsnitselement, den står i, hvorimod det andet afsnitselement i eksemplet ikke berøres.
Inline typografiark er derfor velegnede, når man kun vil ændre udseendet af elementet ét enkelt sted.
Begrænsningen i inline typografiark består i, at de kun påvirker det element, de angives i. Skal samme style information bruges i flere elementer i samme dokument, kan man derfor med fordel placere den i dokumentets header. Det gøres med elementetet STYLE, der har sluttag'et </STYLE>, som er påkrævet:
<HEAD> <STYLE type="text/css"> P { color: blue; text-align: center } </STYLE> </HEAD>
der giver afsnitselementer samme style information som i eksemplet ovenfor. Bemærk dog, at informationen nu omfatter begge afsnit og ikke kun det sidste.
Skal style informationen ikke omfatte alle afsnitselementer, men kun nogle af dem, kan man med fordel anvende klasser:
<HEAD> <STYLE type="text/css"> P.Centrer { color: blue; text-align: center } </STYLE> </HEAD> <BODY> <P class="Centrer">Teksten i dette afsnit er blå og centreret</P> </BODY>
der giver samme udseende som eksemplet med inline typografiark ovenfor. Blot er der den forskel, at man kan anvende den samme style information flere steder uden at skulle definere den igen.
Et typografiark kan også knyttes til elementet med et bestemt id i dokumentet, som nævnt i afsnittet "ID som Selektor":
<HEAD> <STYLE type="text/css"> #sidste { color: blue; text-align: center } </STYLE> </HEAD> <BODY> <P id="sidste">Teksten i dette afsnit er blå og centreret</P> </BODY>
hvor det stadigvæk kun er det sidste afsnit, der er påvirket af style informationen.
Der kan være et vilkårligt antal regler i headeren.
Selv om de efterhånden er yderst sjældne (heldigvis) og egentligt burde høre hjemme på et museum, findes der stadig browsere derude. som ikke understøtter typografiark. Dette gælder især ældre browsere, som vil vise style informationer i headeren som almindelig tekst på hjemmesiden i stedet for at anvende den, og det er der ingen, der er interesserede i.
Forfatteren er derfor nødt til at skjule informationen for disse browsere, og det gøres ved blot at kommentere den ud:
<STYLE type="text/css"> <!-- P { color: blue } P.Centrer { text-align: center } --> </STYLE>
Læg mærke til, at kommentaren skal stå inde i STYLE-elementet.
Der er knyttet nogle få attributter til STYLE-lementet, men ingen hændelser, da elementet udelukkende anvendes i HTML-dokumentets header.
Typografiark viser dog først rigtigt deres styrke, når man placerer style informationerne i en ekstern fil, som man så kæder sammen med sit HTML-dokument. Derved får man for alvor adskilt dokumenternes indhold fra deres præsentation med de fordele, det indebærer. Således kan et enkelt, eksternt typografiark styre alle dokumenter på et websted - eller flere websteder for den sags skyld, da et eksternt typografiark kan ligge overalt på World Wide Web.
Et eksternt tpografiark adskiller sig fra et almindeligt HTML-dokument ved, at det kun indeholder regler som beskrevet i afsnittet "Opbygningen af et Typografiark". Et eksternt typografiark kunne se således ud:
/* Overskrift 1 er centreret med blå tekst */ H1 { color: blue; text-align: center } /* Kapiteloverskrifter står desuden med en større skrifttype */ H1.Kapitel { font-size: 250% } /* Overskrift 2 har grøn tekst */ H2 { color: green } /* Sidens baggrundsfarve er gul */ BODY { background-color: yellow }
Selv om det ikke er noget krav, er det en god ide at indsætte kommentarer, der fortæller hvilken effekt, reglen medfører.
Dette eksterne typografiark kædes sammen med HTML-dokumentet med LINK-elementet i dokumentets header:
<HEAD> <LINK rel="stylesheet" type="text/css" href="eksempel.css"> </HEAD>
idet vi fortæller, at det et et typografiark af typen text/css og henviser til det eksterne typografiark med href attributten.
Når vi åbner siden, ser vi, at kapiteloverskriften styres af hele to regler: dels den regel der definerer klassen Kapitel, som ændrer skriftstørrelsen, dels den regel der bestemmer udseendet for overskrift 1 ved at centrere den og ændre skriftfarven til blå. Man kan således definere regler, der bestemme det generelle udseende for et element, og derefter definere klasser til samme element, som ændrer udseendet yderligere uden at skulle gentage den generelle regel. Jeg skal senere komme ind på, hvordan browseren henter style information fra forskellige kilder og samler den til det endelige udseende. Men jeg advarer jer på forhånd: det er temmeligt langhåret og lige så tør og kedelig læsning.
Man kan knytte et vilkårligt antal eksterne typografiark til et HTML-dokument. Der kan således være typografiark for forskellige medier, mens andre er rettet mod forskellige typer brugere f.eks. brugere med svagt syn.
Disse typografiark kan angives som alternative typografiark, som gensidigt udelukker hinanden. Brugeren kan så vælge mellem disse ud fra sin egen smag, idet forfatteren dog angiver et foretrukket typografiark, som browseren anvender, hvis ikke brugeren har valgt et andet alternativ.
Endelig kan forfatteren angive et fast typografiark, som skal anvendes sammen med eventuelle alternative typografiark.
Man angiver i LINK-elementet, om typografiarket skal være fast, foretrukket eller alternativt ved hjælp af rel og title attributterne:
Det efterfølgende eksempel demonstrerer teknikken. Først det faste typografiark:
BODY { background-color: #FFEF00 } H1 { text-align: center }
der sætter baggrundsfarven til den samme gule farve som på disse sider, mens overskrift 1 centreres. Vi vil derefter give brugeren valget mellem forskellige skriftfarver til overskriften. Den foretrukne er en blå farvetone, der passer til:
H1 { color: #0010FF }
mens de alternative giver valget mellem rød og grøn skrift. Her er først alternativ 1:
H1 { color: red }
mens alternativ 2 ser således ud:
H1 { color: green }
HTML-dokumentet ser således ud:
<HEAD> <LINK rel="stylesheet" type="text/css" href="fast.css"> <LINK rel="stylesheet" title="foretrukket" type="text/css" href="foretrukket.css"> <LINK rel="alternate stylesheet" title="alternativ 1" type="text/css" href="alternativ1.css"> <LINK rel="alternate stylesheet" title="alternativ 2" type="text/css" href="alternativ2.css"> </HEAD> <BODY> <H1>Faste, Foretrukne og Alternative Typografiark</H1>
Klik her for at se eksemplet.
 |
 |
 |
 |
 |
