Menu
• Indhold

Cascading Style Sheet

Resumé

Af Jan Toksvig, UNI-C
24/08 1999

HTML bestemmer dokumentets struktur. Cascading Style Sheets (CSS) bestemmer dokumentets visuelle fremtræden.

Indhold

 

Arkiv med artikler fra Designværkstedet

Meningen med HTML var oprindelig, at man som forfatter til et dokument ved hjælp af HTML kunne fortælle læseren (eller rettere læserens browser) om strukturen i dokumentet.

Som forfatter havde man ikke mulighed for at bestemme, fx hvilken font og farve teksten skulle vises i.

Flere brugere kom til web'et. Brugere, der ville have indflydelse på, hvordan deres websider blev set af læserne.

Browserne gav efterhånden mulighed for at ændre på grundindstillingerne (bl.a. ved hjælp af FONT tag'et [1]).

Cascading Style Sheets giver forfatteren indflydelse på dokumentets visuelle fremtræden på en elegant måde, hvor stil kan holdes adskilt fra struktur.

Forskellen på CSS og fx FONT tags er, at CSS er adskilt fra HTML-koden. Dermed er det muligt at holde layout og struktur adskilt.

Om

Nyhedsbrev

Tilmeld dig til IT-temaets nyhedsbrev



 

Regler

Et style sheet består af regler.

Reglerne kan være beskrevet i:

  • STYLE-attributten til et HTML-element, fx <H1 STYLE="color: red; background: white">
  • et STYLE-element i toppen af et HTML-dokument
  • en særskilt fil, som er knyttet til HTML-dokumentet via et LINK-element

Se også [2].

 

Artikler af

Jan Toksvig
 (11/07 2007)

 

Dækker hele dokumentet

En STYLE, der defineres øverst i dokumentet, vil som udgangspunkt gælde i hele dokumentet. Lokale definitioner kan (helt eller delvist) erstatte de generelle definitioner.

STYLE definitioner kan defineres i dokumentets hoved før <BODY> tag'et.

En STYLE definition kan se ud som følger:

<STYLE TYPE="text/css">
<!--
P {
   font-family: Arial, Helvetica, Verdana;
   font-size: 10pt;
}
-->
</STYLE>

Denne definition betyder, at alle dokumentets afsnit (der eksplicit står i <P></P> tags) vises med en 10-punkts Arial (evt. en Helvetica eller Verdana, hvis der ikke er en Arial font på maskinen).

Lad os se på et lille simpelt eksempel på et dokument uden STYLE definition, og en med ovennævnte definition.

 

Over tabeller

En STYLE definition gælder også inde i en tabel.

Hvis man definerer en STYLE for <P> taget som i eksemplet ovenfor, ændres stilen for teksten i de enkelte celler også.

Ønsker man fx, at et afsnit eller et par ord skal have en anden farve, kan man lave en STYLE definition, der kun gælder navngivne tags.

En sådan definition ser ud som følger:

<STYLE TYPE="text/css">
<!--
.red {
   font-weight: bold;
   color: red;
}
-->
</STYLE>

Et specielt afsnit angives da ved:

<P CLASS="red">rødt afsnit</P>.

Vil man kun farve få ord i en sætning, kan man angive det ved: <DIV CLASS="red">Røde ord</DIV> efterfulgt af normal tekst.

Ønsker man tilsvarende, at nogle specielle tabeller skal have en anden baggrundsfarve, kan man lave følgende STYLE definition for navngivne tabelceller:

<STYLE TYPE="text/css">
<!--
TD.graa {
   background-color: #E7E7E7;
}
-->
</STYLE>

Se et eksempel på de to navngivne STYLE definitioner i brug.

 

Genbrug

Anbring STYLE definitionerne i et selvstændigt dokument og genbrug dem i andre dokumenter.

I stedet for at anbringe STYLE definitionen i toppen af dokumentet kan den gemmes i et dokument for sig (eksempel på et style sheet doklument). Definitionen kan da inkluderes i alle de dokumenter, hvor man ønsker at anvende definitionerne. På den måde kan man lave et sæt definitioner og genanvende dem på alle de dokumenter, der måtte være af samme type på en website. Det kunne fx være alle artikler på et websted. Har man flere typer af dokumenter, som fx skolens officielle sider, lærersider og elevsider, kan man blot lave tre forskellige CSS dokumenter og inkludere dem i de forskellige typer af dokumenter.

 

Hurtige ændringer

STYLE definitioner i selvstændige dokumenter gør vedligeholdelse nem.

Hvis man benytter sig af STYLE definitioner i selvstændige dokumenter, bliver det pludselig meget nemt at ændre fx farven på besøgte links på hele webstedet. Man skal blot rette definitionen i et dokument (eller måske en håndfuld).

 

<FONT>-tag'et

Hvad skal jeg med CSS, når jeg kan gøre det samme med <FONT>-tag'et?

Mange af fordelene ved CSS burde vel være klare nu.

En efter min mening stor ulempe ved at benytte <FONT>-tag'et i dokumenter med tabeller er, at det er nødvendigt at gentage <FONT>-tag'et inden i hver enkelt tabelcelle, hvis man ønsker, at teksten i tabelcellerne ser ud som teksten i resten af dokumentet. Det glemmer jeg tit!

Ulempen ved at benytte CSS er, at kun de nyere browsere forstår det. Meget virker dog fra Internet Explorer 3 og Netscape 4 [3].

 

Var det alt?

Nej, artiklen er ikke på nogen måde udtømmende. Vi vender tilbage til Cascading Style Sheets i senere artikler. Baggrundsartiklerne nedenfor kan måske stille nysgerrigheden lidt. Vi svarer også gerne på spørgsmål.

 

Baggrundsartikler

  1. Skrifttyper og FONT. Artikel med en del eksempler på brugen af FONT tag'et.
  2. Cascading Style Sheets. Regler og de vigtigste selektortyper.
  3. Index DOT Css, Brian Wilsons Cascading Style Sheet opslagsværk bl.a. med oplysninger om hvilke browsere, der understøtter de enkelte egenskaber (properties på engelsk).
  4. Hotwired om Style Sheets.
  5. Style Sheet begynder guide hos Hotwired.
  6. Jakob Nielsen: Effective Use of Style Sheets.
  7. W3C om CSS1-anbefalingen og CSS2-anbefalingen. Et par store dokumenter, hvor det, der er beskrevet ikke nødvendigvis er understøttet af browserne endnu.