!

Dette materialet blir ikke lenger vedlikeholdt. Du vil finne oppdatert materiale på siden: http://borres.hiof.no/wep/

CSS
Børre Stenseth

Cascading Style Sheet

Cascading | Kopling | Stilregler | I XML
Hva
En kort innføring i de mest sentrale delene av CSS, Cascading Style Sheets. Stilark eller stilsett

I modulen MVC er det forsøkt å legge vekt på forskjellen mellom struktur i et dokument og dokumentets utseende. Når vi betrakter stilark seter vi fokus på utseendet. Stilark lar seg anvende på HTML- og XML-dokumenter.

CSS forekommer i tre versjoner. CSS1, CSS2 og CSS3. Det er litt forskjell på hvorden nettleserne forholder seg til denne utvklingen. W3C Schools [1] er rimelig godt oppdatert på tilstanden og er et godt sted å begynne å lete dersom det er problemer. Det er imidlertid en del mer sofistikerte problemer og kombinasjoner som ikke dekkes der. Det er selvsagt mange andre kilder, en av dem er Engineering Degree [2] .

Du kan sjekke status på din nettleser på denne siden: CSS3 Selectors Test [3] .

Det er selvsagt verdt å merke seg at hovedmannen bak CSS, Håkon Wium Lie [4] , har sine røtter ved Høgskolen i Østfold.

CSS holdes ofte opp mot XSL_FO (XSL-Formattering), se modulen XSL-FO . Noen betrakter disse som konkurrerende teknologier og noen ser dem som supplerende. Jeg har liten erfaring med XSL-FO, men det er vel slik at dette er en mer ambisiøs teknologi som dessuten har en syntaks og en definisjon som faller bedre på plass i XML-familien. På den annen side er CSS vesentlig enklere, i alle fall har CSS en slakkere læringskurve, enkle ting er intuitivt enkelt. Det er også slik at utviklingen av CSS og (X)HTML ser ut til å gå ganske synkront. Det er også litt uklart hvor mye arbeid som legges i å videreutvikle XSL-FO og tilhørende verktøy.

Cascading

Hva i all verden betyr det ?

Dersom vi lager dokumneter med flere stilsett, eller blander stilangivelser i selve elementet med tilsvarende i stilsett, eller unnlater å sette stiler for ulike situasjoner, kan vi få overraskende resultater i nettleseren. Stilangivelser tillegges ulik vekt når nettleseren skal beslutte hvem som skal brukes. Det er i hvert fall fire forhold som påvirker dette.

  1. Stilen for et element kan gjøre mer eller mindre spesielt. Den stilangivelsen som er mest spesiell prioriteres.
    For eksempel er "div .name{}" mer spesifikk en "div{}"
    Det er også slik at ID angivelser "#name{}" har prioritet foran CLASS angivelser ".name{}".
  2. Nettleseren forholder seg til stilsett som er tilpasset det mediet som materialet skal vises på. Det stilsettet som er tilpasset mediet prioriteres, se modulen Media
  3. Vi kan ha flere konkurrerende stilsett med alternative bestemmelser for samme element(er), siden stilsett kan koples til på forskjellig måte, se nedenfor.
  4. Det er tre roller som kan ha meninger om et dokuments utseende:
    • Forfatteren som skriver og angir et stilsett
    • Leseren som kan ha spesielle ønsker som hun forsøker å realisere ved å påvirke framvisningsprogrammet, f.eks. et ønske om større tekst
    • Framvisningsprogammet, f.eks. en nettleser. En nettleser må treffe noen beslutninger basert på det mediet dokumentet skal vises på, og må dessuten komme opp med en default stil når ingen av de andre to rollene har uttrykt noen mening.
    Disse tre ønskene kan komme i konflikt og det må være noen regler for å løse opp i dette. Som hovedregel er det forfatteren som kan ta kommandoen og legger premissene for de andre, gitt en rimelig standardisert nettleserteknologi.

Begrepet "kaskade" knyttes til hvordan disse ulike prioriteringen vektes når stilen for et konkret element skal bestemmes.

Kopling

Det er i prinsipp fire måter å kople inn stilangivelser på:

  1. Vi kan angi en style-attributt i det individuelle elementet vi vil påvirke: 
    <h2 style="color:red">Overskrift</h2>
  2. Vi kan skrive en style-tag i headeren til dokumentet, som i dette tilfellet påvirker alle h2-tagger 
    ...
<head>
...
<style>
h2{color:red}
</style>
</head>
...
  3. Vi kan importere en fil med stildefinisjoner i headeren til dokumentet. 
    ...
<head>
...
<style>
@import url(minstil.css);
</style>
</head>
...
  4. Vi kan lenke til en fil med stildefinisjoner i headeren til dokumentet. ( denne fila skal ikke innholde noen style-tag 
    ...
<head>
...
<link href="minstil.css" rel="STYLESHEET" />
</head>
...

Stilangivelsene har prioritet i den rekkefølge de er angitt.

Vi kan blande disse mekanismene friskt og fort komme ut i en litt forvirret situasjon som framfor alt er vond å vedlikeholde. For de fleste vanlige publikasjonsformål er det min erfaring at den siste versjonen med å linke til et stilsett er å foretrekke. Samme stilsett kan brukes for mange sider, det trenger ikke lastes mer enn en gang for flere sider i et vevsted og det er bare ett sted å gjør endringer dersom vi ønsker å endre utseende på en gruppe dokumenter. Det forhindrer selvsagt ikke at vi kan overstyre en standard stil ved å benytte stilangivelse direkte i et element dersom det er spesielle ting vi er ut etter. Eller vi kan bruke mer spesifikke utvalgskriterier for unntakssituasjonen, se nedenfor.

Stilsettene som jeg bruker for dette materialet og i litt forskjellige varianter i en del andre vevsteder ser slik ut:

_wxtstyle.css

og

_template.css

Stilregler

Hvis vi ser bort fra media-angivelse, se modulen Media , kan vi si at et stilsett består av en rekke stilangivelser som er bygget etter følgende mønster: 

 selektor[,selektor]{stilregel[;stilregel]}

Eksempel: 

h2{padding-top:10px;padding-bottom:10px;background-color:#EEE8CD}
h3,h4{color:red}

Der en stilregel har formen: 

 navn:verdi

Selektorer er måter å identifisere hvilke elementer som skal stilsettes. De enkleste måtene å identifisere elementer på er:

  • Ved element-type

    Dette er den enkle, rett-fram metoden. Vi setter f.eks. stilen på alle overskrifter på nivå 4 ved å skrive: 

    h4{color:red}

  • Ved klasse

    Vi kan angi stil for en klasse. Det vil si at vi beskriver en stil som skal gjelde for alle elemnter som er av den klasse. Vi skriver f.eks.: 

    .redfont{color:red}

  • Ved identifikasjon

    Vi kan angi stil for et bestemt element. Vi skriver f.eks.: 

    #the_red_par{color:red}

    Dette betyr at elementet som har verdien "the_red_par" til attributten id.

I CSS3 finnes en rekke sofistikerte måter å formulere selektorer på. Disse er nærmere beskrevet i modulen CSS selektorer .

Angivelse av stilregler er nærmere beskrevet i modulen Litt CSS .

I XML

Det er viktig å huske at CSS er en teknologi som generelt er laget for å sette stil på XML-strukturer. I denne sammenheng er XHTML et spesialtilfelle. Dette spesialtilfellet er imidlertid ikke helt tilfeldig for en nettleser. Dersom nettleseren gjenkjenner (X)HTML stiller den opp med et default stilsett. Dersom den ikke gjenkjenner formatet og ikke finner noe stilsett oppfører de nettleserne jeg bruker som referanse,IE, Opera, Chrome og Firefox, likt og framstiller XML-strukturen.

XML CSS 
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="stil3.css"?>
<resultater>
  <deltager>
    <navn>Ole Brumm</navn>
    <tid>24.7</tid>
  </deltager>
  <deltager>
    <navn>Nasse Nøff</navn>
    <tid>24.8</tid>
  </deltager>
  <deltager>
    <navn>Tigergutt</navn>
    <tid>37.5</tid>
  </deltager>
</resultater>

navn{ font-size:14px; 
      font-weight: bold;
      color:red;
      display:block}
tid{ font-size:14px;
     font-weight: normal}
Merk at display:block er nødvendig for å få linjeskift.
Se xml-fila med stilsett: dok3.xml
Se xml-fila uten stilsett: dok3uten.xml

Fordelen med å ha HTML som format ved framstilling framfor XML, er selvsagt at vi får en rekke stilegenskaper gratis. Det er dessuten et problem å få framstilt attributter som ofte er en viktig del av datainnholdet i en XML-fil. XSL-transformasjoner er det naturlige svaret på å bringe generelle XML-filer over på HTML-format. Se modulen XSL og spesielt eksempelet Olympiade for en serie med transformasjoner mot samme datagrunnlag.

Referanser
  1. Cascading Style Sheets W3C Schools www.w3schools.com/css/default.asp 14-03-2010
  1. CSS Tutorials Engineering Degree www.engineeringdegree.net/resources/css-tutorials/ 14-03-2010
  1. CSS3 Selectors Test CSS3.info www.css3.info/selectors-test/ 14-10-2011
  1. Håkon Wium Lie Wikipedia en.wikipedia.org/wiki/H%C3%A5kon_Wium_Lie 14-11-2012
  1. CSS (Cascading Style Sheets) Web Design Group www.htmlhelp.com/reference/css/ 14-03-2010
  1. Cascading Style Sheets Wikipedia en.wikipedia.org/wiki/Cascading_Style_Sheets 14-03-2010
Vedlikehold
Børre Stenseth, revidert oktober 2012
( Velkommen ) ( CSS selektorer )
HTML5
name=borres&lang=no&color=#F7F7F7
name=borres&lang=no&color=#F7F7F7