Cascading Style Sheet

I modulen Markup 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 og CSS2 er begge anbefalinger fra W3C. CSS3 er under utarbeidelse.

CSS holdes ofte opp mot XSL_FO, XSL-Formattering. Noen betrakter disse som konkurrerende teknologier og noen ser dem som supplerende. Jeg har ingen 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.

I de fleste eksemplene nedenfor bruker jeg minimalistisk HTML.

Cascading

Hva i all verden betyr det ?

Utgangspunktet er at det er mulig å ha flere konkurerende stilsett, siden stilsett kan koples til på forskjellig måte, se nedenfor. Det er dessuten slik at 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å. Det må dessuten komme opp med en default stil når ingen av de andre to har uttrykt noen mening.

Disse tre kan ha overlappende ønsker. Derav navnet kaskade. 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 har kommandoen og legger premissene for de andre.

Kopling

Vi vet at når vi lager en enkel HTML-fil som f.eks.:

<html>
   <head>
      <title>dok1</title>
   </head>
   <body>
      <h1>Velkommen</h1>
      <p>Dette er en demoside</p>
      <p>
      <a href="javascript:history.back()">Tilbake</a>
      </p>
   </body>
</html>

så gis den et utseende som er bestemt av nettleseren. Dokumentet har fått en default stil. Vi vet videre at vi kan manipulere dette i noen grad ved å gjøre noen valg i nettleseren. F.eks. kan vi endre skriftstørrelse, farge på linker etc. Nedenfor skal vi gjøre fire forsøk på å sette ulike farger på overskriften ved hjelp av stilark.

1 stil på stedet

Vi skriver stilen direkte inn i h1-elementet:

<html>
   <head>
      <title>dok1</title>
   </head>
   <body>
      <h1 style="color: red">
      Velkommen
      </h1>
      <p>Dette er en demoside</p>
      <p>
      <a href="javascript:history.back()">Tilbake</a>
      </p>
   </body>
</html>

2 stilark i head-elementet

Vi skriver et stilark inn i head-elementet. <style> </style>

<html>
   <head>
      <title>dok1</title>
      <style type="text/css">
      h1 { color: green }
      </style>
   </head>
   <body>
      <h1>
      Velkommen
      </h1>
      <p>Dette er en demoside</p>
      <p>
      <a href="javascript:history.back()">Tilbake</a>
      </p>
   </body>
</html>

3 importert stilark

Vi importerer et stilark fra en egen fil,url:

<html>
   <head>
      <title>dok1</title>
      <style type="text/css">
      @import url(stil13.css);
      </style>
   </head>
   <body>
      <h1>
      Velkommen
      </h1>
      <p>Dette er en demoside</p>
      <p>
      <a href="javascript:history.back()">Tilbake</a>
      </p>
   </body>
</html>

der stil13.css ser slik ut

h1{color:blue}

4 link til et stilark

Vi setter opp en link til et stilark på en egen fil,url:

<html>
   <head>
      <title>dok1</title>
      <link rel=stylesheet 
      type="text/css" 
      href="stil14.css">    
   </head>
   <body>
      <h1>
      Velkommen
      </h1>
      <p>Dette er en demoside</p>
   </body>
</html>

der stil14.css ser slik ut

h1{color:yellow}

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 i et element dersom det er spesielle ting vi er ut etter.

Stilsettet som jeg bruker for dette materialet og i litt forskjellige varianter i en del andre vevsteder ser slik ut: Børres stilsett. (Det kan se ut som det trengs litt rydding og forenkling.)

CSS gir selvsagt langt flere muligheter enn å endre fargen på overskrifter. Denne modulen har ikke som ambisjon å dekke alle disse mulighetene. Vi skal konsentrere oss om noen av de mest sentrale mekanismene, valgt ut fra et praktisk publiseringsformål.

Identifikasjon av elementer

Det er enkelt sagt følgende måter å kople stilbeskrivelser til elementer på:

• Ved angivelse av element-type
• Ved angivelse av klasse
• Ved angivelse av pseudoklasse
• Ved identifikasjon, id
• Kombinasjoner av disse

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}

Dette betyr at alle elementer som har verdien "redfont" til attributten class. F.eks.:

  <p class="redfont"> tekst</p>
  <div class="redfont"> mere tekst </div>

Ved pseudoklasse

Vi kan angi stil for det W3.org kaller pseudo klasser. Syntaksen er slik:

  selector:pseudo-class {property: value}

I praksis er det pseudoklasser knyttet til anker-elementer som er aktuelle. Vanligvis finner vi noe som ligner på dette i et stilsett:

  a:link {color: #blue}
  a:visited {color: #green}
  a:hover {color: #red}
  a:active {color: #black}

Merk at rekkefølgen av en eller annen grunn er viktig for å få den ønskede effekten.

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. F.eks.:

  <p id="the_red_par"> hilited </p>

En id-verdi er forutsatt å være entydig på en side. I en rekke andre sammenhenger, som DOM-programmering, er effekten av like id'er at den først forekomsten brukes og de andre ignoreres. Anvendelsen av stilsett-definisjoner synes ikke å være like konsekvent i nettleserne.

Kombinasjoner

Vi kan kombinere og vi kan liste flere elementidentifikasjoner i samme stilangivelse. Vi skriver f.eks.:

  h1,h2,h3{color:red}
  h2,h3{font-size:18px}
  h1,.bigTxt{font-size:24px}
  p{margin-top:10px}
  p.luftig{margin:20px}
  .mlcode,.pcode{color:blue}

Noen egenskaper

Nedenfor finner du, uten nærmere forklaring, en opplisting av noen av egenskapene du kan bruke når du lager stilsett. Egenskapene er i henhold til CSS1. Hensikten er bare å minne om mulighetene. Slå opp detaljer hos W3C.

Fonter

   font-family    : proritert liste av fonter
   font-style     : normal |italic | oblique
   font-variant   : normal | small-caps
   font-weight    : normal | bold | bolder |lighter |100 | 200 |... | 900
   font-size      : xx-small | x-small | small | medium |
                    large | x-large | xx-large | smaller | larger |
                    % | absolutt størrelse
   font           : alle font-egenskaper kan settes i en definisjon

Tekst

   color           : farge | #hex
   word-spacing    : normal | absolutt størrelse
   letter-spacing  : normal | absolutt størrelse
   text-decoration : none | underline | overline | line-through | blink
   text-transform  : none | capitalize | uppercase | lowercase
   text-align      : left | right | center | justify
   text-indent     : absolutt størrelse | %
   line-height     : normal | faktor | absolutt størrelse | %

Bakgrunnsbilder

   background-color      : farge | #hex | transparent
   background-image      : url | none
   background-repeat     : repeat | repeat-x | repeat-y | no-repeat
   background-attachment : scroll | fixed
   background-position   : top left | top center | top right |
                           center left | center center | center right |
                           bottom left | bottom center | bottom right |
                           x-% y-% | x-pos y-pos
   background            : alle egenskapene kan settes i en definisjon

Lister

   list-style-type     : none | disc | circle | square | decimal |
                         decimal-leading-zero | lower-roman | upper-roman |
                         lower-alpha | upper-alpha | lower-greek | lower-latin |
                         upper-latin | hebrew | armenian | georgian |
                         cjk-ideographic |hiragana | katakana | hiragana-iroha |
                         katakana-iroha
   list-style-image    : url | none
   list-style-position : inside | outside
   list-style          : alle egenskapene kan settes i en definisjon

Border/margin/padding

   margin-top
   margin-right
   margin-bottom
   margin-left          : auto | absolutt størrelse | %
   margin               : margin-top | margin-right | margin-bottom | margin-left

   padding-top
   padding-right
   padding-bottom
   padding-left         : absolutt størrelse | %
   padding              : padding-top | padding-right | padding-bottom | padding-left

   border-top-width
   border-right-width
   border-bottom-width
   border-left-width
   border-width         : thin | medium | thick | absolutt størrelse

   border-top-style
   border-right-style
   border-bottom-style
   border-left-style
   border-style         : none | hidden | dotted | dashed | solid | double |
                          groove | ridge | inset | outset

   border-top-color
   border-right-color
   border-bottom-color
   border-left-color    : farge | #hex
   border-color         : farge | #hex

   border-top           : border-top-width | border-style | border-color
   border-right         : border-right-width | border-style | border-color
   border-bottom        : border-bottom-width | border-style | border-color
   border-left          : border-left-width | border-style | border-color

   border               : border-width | border-style | border-color

   width
   height               : auto |absolutt størrelse | %
   line-height          : normal | antall | absolutt størrelse | %


   display              : none | inline | block | list-item | run-in |
                          compact | marker | table | inline-table |
                          table-row-group | table-header-group | 
                          table-footer-group |
                          table-row | table-column-group | table-column |
                          table-cell | table-caption

   cursor                : url | auto | crosshair | default | pointer | move |
                           e-resize | ne-resize | nw-resize | n-resize | 
                           se-resize |sw-resize | 
                           s-resize | w-resize | text | wait | help

Posisjonering

   float                : left | right | none
   clear                : left | right | both | none
   position             : static | relative | absolute | fixed | inherit

Lengdeenheter

   px    - pixel
   em    - høyden av elementets font
   ex    - høyden ab bokstaven x

   in    - inch, tomme
   cm
   mm
   pt    - point, 1pt=1/72 inch
   pc    - pica,  1pc=12 pt

   %

Dynamisk

Modulen Stilendring viser noen alternative måter å programmere stiler på.

I XML

Det er ikke noe spesielt annerledes å definere stilsett for en generell XML-fil enn det er for HTML. Den eneste forskjellen er at vi selv definerer elementene. Det har blandt annet den konsekvensen at nettleseren ikke har noe godt default stilark å stille opp med. I beste fall kan den lage noe som er helt generelt. MSExplorer og Mozilla gjør det slik, mens Opera og Navigator ignorerer XML-taggene og framstiller teksten som en sammenhengende streng. Vi prøver oss med et enkelt eksempel.

<?xml version="1.0" encoding="ISO-8859-1"?>
<?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;
      display:block}

tid{ font-size:14px;
     font-weight: normal}

   

Fordelen med å ha HTML som format ved framstilling framfor XML, er 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.