Dagens emne

Cascading Style Sheet (CSS)

Læsestof til disse lektioner

Supplerende referencer

Øvelser/opgaver i dagens emne

se nedenfor

Læsestof til de næste lektioner

Bemærkninger

iab

Noter

CSS - Cascading Style Sheets

CSS er en forkortelse for Cascading Style Sheets. Style Sheet kan oversættes til Typografi Ark og betegner en teknik, hvormed man kan definere opsætning af et XHTML-dokument. Samtidig leverer Style Sheet en metode til at adskille layoutdefinitioner fra selve teksten og dens markup (XHTML-koderne).Vi vil senere vende tilbage til ordet Cascading.

Stylesheet er ikke en del af XHTML specifikationen, men er et særligt sprog, som har sin egen syntaks. 

Det bruges altid sammen med et formateringssprog som HTML / XHTML / XML.

W3 konsortiet fastlagde syntaksen for CSS1 i 1996 og for CSS2 i 1999. Der arbejdes for tiden på CSS3.

• CSS1 specifikationen findes på http://www.w3.org/TR/REC-CSS1
• CSS2 specifikationen findes på http://www.w3.org/TR/REC-CSS2

Syntaks

Syntaksen for en styledefinition er delt i tre: en selektor, en attribut og en værdi. (selector, property og  value)

Syntaksen ser således ud:

selektor {attribut: værdi; [ny deklaration]; [...];}

Selektoren er det element, du vil definere en stil eller layout for. Attribut er den egenskab du vil specificere og værdien angiver det konkrete udseende.

Eksempler

Eksempel, du vil gerne have at alle dine H3 overskrifter skal være grønne:

h3 {
      color: green;
}

h3 er selectoren, og med den angiver du det element, du ønsker at specificere udseendet af. color er attributten og green værdien.

Man kan have flere attributter i samme definition. Antag fx at H3 også skal centreres:

h3 {
      color: green;
      text-align: center;
}

Man kan også gruppere flere elementer i samme definition:

h1, h2, h3, h4, h5, h6 {
      color: green;
      text-align: center;
}

Nu er det ikke kun H3, men alle H elementer, som bliver grønne og centrerede.

Nedarving

Elementer indgår i et hierarki, hvor de underliggende elementer nedarver typografiark-definitioner fra de overliggende.

Hvis vi eksempelvis ser på dette eksempel

body { 
      font-family: arial, helvetica, sans-serif; 
}

p {
      font-size: 12pt;
}

b {
      font-weight: bold;
}

vil fonten i P- og B-elementet være arial, helvetica eller en anden sans-serifskrift og font-størrelsen i B-elementet vil være 12 pkt.

Kontekstuelle selektorer

Hermed menes, at man med CSS har mulighed for at tilføje formateringsregler, der afhænger af den sammenhæng, de indgår i.

Se fx på disse to angivelser af formateringskoderne for en uordnet liste

ul li {  
      font-size: 14pt; 
      font-weight: bold;
} 

ul ul li {
      font-size: 12pt; 
      font-weight: normal;
}

Her er der specificeret 2 sæt formateringskoder. En som gælder for den "primære" liste, og en anden for gælder for den indlejrede ("nested") liste.

Kommentarer i CSS

Man kan kommentere sin kode:

i {  
      color: red; 
      font-weight: bold;
} 

p i {  
      color: white; 

      /*Italic skifter til hvid i paragraffer*/
      font-weight: bold;
} 

Tre anvendelser af stylesheets

Stylesheet kan bruges på 3 måder:

Der findes egentlig en fjerde: Man kan under document level styles importere (@import) stylesheets som navngivne filer fra en URL (fx::

@import url(http://style.com/basic.css);

Men i denne sammenhæng vil vi anse dette for en variant af metode tre.

Den første måde - CSS indlejret i BODY

Ved første metode har man INGEN adskillelse af layoutdefinitioner og indhold. Denne måde bør derfor kun bruges, når det er strengt nødvendigt ( - man vil næsten altid kunne opnå samme resultat med en class definition, se herom senere).

Indbygget i et enkelt tag til "engangsbrug". Lad os se et eksempel uden yderligere kommentarer:

<p style="color:blue; font-family: arial">

World Wide Web Consortium (W3C) anbefaler brug af styles overalt hvor det er muligt med henblik på formatering. I ovenstående eksempel kunne samme effekt være opnået med font-tag'ets attributter, men den metode er "deprecated", dvs. "misbilliget" af W3C og dermed på vej ud!

Den anden måde - CSS indlejret i HEAD

Denne definition står kun ét sted, nemlig i XHTML- dokumentets HEAD sektion, men den gælder for hele dokumentet. 

Definitionen er indeholdt i STYLE-elementet, se dette eksempel:

<head>
   <style type="text/css">

    h1,h2,h3,h4,h5,h6 {
      color: green;
      text-align: center
      }

    hr {
      color: sienna
      }

    p {
      margin-left: 20px
      }

</style>
</head

Hvorfor er det smart? Hvis nu man har sat colorattribut i hvert eneste H-tag ned gennem dokumentet, så kan man være sikker på at to minutter før deadline kommer bossen/kunden/konen og siger: "Vi vil hellere have blå overskrifter."

Den tredje måde - henvisning til eksternt CSS

Man kan også have definitionen i en særskilt fil med extension  .css

I den fil skal der ikke være STYLE-tags men kun definitionerne så filen style.css indeholder disse linier:

    h1, h2, h4, h4, h5, h6 {
      color: green;
      text-align: center
      }

    hr {
      color: sienna
      }

    p {
      margin-left: 20px
      }

I XHTML-dokumentets head sektion skriver man så navnet på style-filen i et særligt element, der hedder LINK således:

<head>

<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>

Hvorfor er det smart? Jo - nu kan alle XHTML-dokumenter på et websted dele denne style-fil. Herved sikres samme udseende på alle websider og man kan stadig hurtigt ændre på værdierne for et element med virkning for ALLE html-dokumenter på én gang.

Kaskadeorden ("Cascading order")

Kaskadeorden betegner det indbyggede hiearki i CSS som definerer hvilke styledefinitioner, der har størst vægt, når de tre metoder anvendes sammen eller hver for sig.

1. Eksterne stylesheets er placeret "nederst" i hierarkiet
2. Indlejrede stylesheets i HEAD overskriver eksterne stylesheets
3. Indlejrede stylesheet definitioner i BODY overskriver både eksterne stylesheet-definitioner og stylesheet-definitioner i BODY
4. Mere specifikke tags overskrive mere generelle
5. Hvis to CSS erklæringer har samme vægt, gælder den sidste.
6. CSS erklæringer, der er markeret med !IMPORTANT overskriver alle andre.

Nedenfor har du et eksempel på anvendelse af !IMPORTANT:

<html>
<head>
<title>!important</title>

<style>
<!--
   p {color: blue !important}
   p {color: red}
-->
</style>

</head>
<body>

  <p>Denne linje vil være blå.</p>

  <p style="color: red;">
  Denne linje er også blå, selvom den er sat til rød.
  </p>

</body>
</html>

Men vær forsigtig med overskrivning, ikke alle browsere understøtter det lige godt og check derfor for en sikkerheds skyld i en repræsentativ vifte af browsere (Internet Explorer, Netscape Navigator, Opera).

CLASS og ID som selektorer

Med class teknikken kan man lave varianter af stilelementer, som kan bruges inde i et enkelt tag. Fx kan man definere en class med navnet  blaa således:

h2.blaa {
   color:navy
}

Punktummet efter h2 angiver, at det er en class - dvs. en delmængde af samtlige  h2 elementer - der er defineret. Når den er defineret, kan man herefter, i de tilfælde hvor man ønsker at sætte sin overskrift med blåt, skrive således:

<h2 class="blaa">

Men kan dog også angive en klasse generelt uden at knytte den til et særligt element, som en såkaldt anonym klasse fx:

.roed {
  color:red
}

Punktummet foran navnet angiver, som i eksemplet tidligere, at vi har defineret en class. Samtlige steder, hvor vi nu ønsker at skrive teksten med rødt, kan vi gøre det ved at anvende klassen på de pågældende elementer:

<p class="roed">

Skulle det så senere vise sig, at man hellere vil have, at den blå farve skal være rød, skal man igen kun rette i stylesheetet, og slipper derved for at se alle XHTML-dokumenter igennem for at lave rettelsen.

ID defineres analogt med class, men mens class er tiltænkt mange forekomster er id ifølge CSS standarden tiltænkt enkeltforekomster, idet alle ID'er inden for samme dokument er unikke . Syntaksen for ID er:

h2#blaa {
  color:navy
}

#gul {
  color:gul
}

Og der refereres til ID på denne måde:

<h2 id="blaa">

<p id="roed">

Pseudoclass

Der er en række classer som er foruddefinerede i CSS standarden. Link, active og visited, som hører til A-elementet, samt first-line og first-letter, der normalt bruges sammen med p-tag'et ( - prøv at gætte på deres betydning!).

a:link {
  color:red;
}

a:active {
  color:white;
}

a:visited {
  color:blue;
}

Hover er en anden pseudo-klasse, der retter sig mod A-elementet. Denne pseudo-klasse kan omdefineres så man får en virkning, når musen føres hen over et link. Ex:

a:hover {color:red; background-color:gray}

Se nærmere på W3C's CC2 specifikation (http://www.w3.org/TR/REC-CSS2/) for at få yderligere information om dette emne. Slå op under ordet Selectors i indexet.

Måleenheder

• inches - in (2,54 cm)
• millimeter - mm
• centimeter - cm
• picas - pc (pica er et amr. typografisk målesystem, svarer til 4,218 mm)
• point -pt (mindste enhed i det typografisk målesystem pica, svarer til 0,35136 mm eller 1/12 pica)
• pixels - px ("picture cell", billedelement, mindste enhed på skærmen, den absolutte størrelse af en px varierer med  skærmopløsning og -størrelse). 
• em-length - em (I typografi er en em baseret på højden på bogstavet M (store m), i CSS er en em identisk med fontstørrelsen.
• x-height - ex (højden på x af af den anvendte skrifttype og -størrelse)

Kilde: Desktop Pubshling (About)

Læs mere om de typografiske måleenheder og CSS i artiklen Typographical measurement systems (http://css.nu/articles/typograph1-en.html).  

Procentangivelser

Det er desuden muligt at angive vidden og højden på forskellige elementer med procent, fx

p {
  margin-left: 10%;
  font-size: 120%;
} 

hvor procentangivelsen refererer til browservinduets størrelse.

Farver

Man kan specificere farver på 5 måder:

1. Anvende et predefineret navn på en farve (fx, “blue”)
2. Anvende den fulde hexadecimal farveværdi med et foranstillet hash mærke
3. (e.g., “#00FF00”)
   
4. Anvende en sammentrængt hexadecimal farveværdi med et foranstillet hash mærke, hvor hvert nummer er duplikeret (fx., “#0F0”)
5. Anvende en trecifret RGB (“Red Green Blue”) farveværdi foranstillet af “RGB”, hvor hver ciffer specificerer farvemængden med en værdi fra 0 til 255, og tallene anbringes i parentes (fx., RGB(0,255,0))
6. Anvende en trecifret RGB procentvis farveværdi foranstillet af “RGB”, hvor hver ciffer specificerer den procentvise farvemængden der skal anvendes på en skala fra 0% til 100%, og procenterne anbringes i parentes (fx., RGB(0%,100%,0%)).

Kodeeksempel:

<html>
<head>
<title>Farveformater</title>
</head>

<body style="font-size: large">

<p style="color: lime;">
Denne tekst er limegrøn <code>(style="color: lime;")</code>.
</p>

<p style="color: #00FF00;">
Denne tekst er limegrøn <code>(style="color: #00FF00;")
</code>.</p>

<p style="color: #0F0;">
Denne tekst er limegrøn <code>(style="color: #0F0;")</code>.</p>

<p style="color: RGB(0,255,0);">
Denne tekst er limegrøn <code>(style="color: RGB(0,255,0);")
</code>.</p>

<p style="color: RGB(0%,100%,0%);">
Denne tekst er limegrøn <code>(STYLE="COLOR: RGB(0%,100%,0%);")
</code>.</p>

</body>
</html>

<div> og <span>

DIV og SPAN kaldes også blok- ("block") og linjeelementer ("inline"). De er "tomme" tags eller containere, der har den funktion at  særlige CSS definitioner kan knyttes til dem.

Fx.

.sic {
  font-style: italic;
  letter-spacing: 4pt;
} 

der anvendt på en tekst kunne se sådan ud:

DIV og SPAN kaldes også blok- ("block") og linjeelementer ("inline"). De er "tomme" tags eller containere, der har den funktion at  særlige CSS definitioner kan knyttes til dem

Man kan oprette en SPAN-elementet med en CSS-definition og fx anvende den på en sekvens af ord, man ønsker skal være særligt fremhævede:

Man kan oprette en SPAN-tag med en CSS-definition og fx anvende den på en sekvens af ord, man ønsker skal være<span class= "sic">særligt fremhævede</span>.

Afsnitelementer som fx P og H1 er blokelementer, mens elementer som fx I og B er linjeelementer. Så DIV benyttes på afsnit, mens SPAN anvendes på tekst eller andre elementer i afsnit.

Positionering

Med CSS er det også muligt at bestemme elementers position på siden, og det er muligt at lave overlap af fx tekster og billeder.

Disse muligheder er dog afhængige af browsernes fortolkning af koderne. Derfor er det en vældig god ide at prøve sine sider af med flere browsere, når man benytter disse funktioner.

Man kan angive positionen som: absolute, relative, fixed eller static. Relative er default

<div style="position:absolute; left:50px; top:50px;
z-index:1; visibility:show; width:300px; height:300px; padding:2em;
background-color:silver; color:navy; font-weight:800; font-family:courier, monospace; font-size:18pt;">
I denne boks kan du skrive tekst efter behag</div>

Opgaver/Øvelser

Opgave 5.1

Tag XHTML-dokumentet fra opgave 4.3, gem det under et nyt navn.

Opret derefter et eksternt stylesheet og gem det som en .css fil. Link til det fra XHTML-dokumenteternes head-element.

Arbejd nu videre med XHTML-dokumentet og det stylesheet, du har oprettet. Eksperimenter med det du har lært:

• Definer font og font-størrelse i elementer som body, h1, h2 og p.
• Angiv højre og venstremargin
• Opret en class til fremhævning af linje- eller inlineelementer og anvend den på enkelte ord, som du ønsker at markere med en anden farve eller baggrund.
• Ændre højremargin, så der bliver plads til at indsætte tekstbokse her.
• Opret et par bokse med deres egen baggrundsfarve og skriftstørrelse mv., og placer noget tekst i dem. Benyt div-elementet til formålet, og placer dem efter de retningslinjer, der er angivet i eksemplet ovenfor. 

Opgave 5.2

Definer pseudoklasserne a:link, a:active, a:visited og eksperimenter med a:hover, så dine links ændrer udseende, når markøren glider hen over dem.

Opgave 5.3

Skriv et et nyt, alternativ stylesheet til dokumentet i opgave 5.1-5.2.

Opgave 5.4

Valider dine CSS dokumenter på W3C's hjemmeside med deres CSS-validator.