Cascading Style Sheets

Från Rilpedia

Texten från svenska Wikipedia

Cascading Style Sheets (CSS, på svenska stilmall) är ett språk som beskriver presentationsstilen för ett strukturerat dokument som till exempel typsnitt, textstorlek och färg. Tekniken är ett sätt att anpassa dokumentet med hänsyn till datortyp, skärmupplösning, färgdjup och installerade typsnitt.

Namnet kommer från en författares möjlighet att definiera ett utseende som sedan kan återanvändas på flera dokument med olika innehåll. Tekniken introducerades av Håkon Wium Lie och Bert Bos 1994 i webbläsaren Argo.

Ett XML- eller HTML-baserat dokument har inte på förhand en given utformning utan består av strukturerad text utan stilinformation. Hur dokumentet skrivs ut på papper, på en webbsida, på displayen i en mobiltelefon eller en handdator, bestäms av en stilmall. CSS ingår inte som en del av XML-språket, men kan användas för att anpassa presentationer av webbsidor. I slutändan är det dock mottagarklienten som har stort inflytande över hur dokumentet presenteras.

Användning

CSS används av Wikipedia och av de flesta stora webbplatser. CSS-dokumentet inkluderas oftast med hjälp av ett link-element:

<link rel="stylesheet" type="text/css" href="sökvägen/till/stilmallen.css">

Denna rad specificerar sökvägen till filen med stilspecifikationerna (href="sökvägen/till/stilmallen.css") och hur webbläsaren ska tolka filen (rel="stylesheet" type="text/css").

Ett annat sätt att använda CSS i ett HTML eller XHTML-dokument är style-elementet, som kan användas på två sätt. Det första är att inkludera CSS-filen via en CSS-instruktion:

<style type="text/css">@import url(stilmall.css);</style>

Alternativt går det att skriva in CSS-koden direkt i style-elementet. Detta är inte rekommenderat då det kan uppstå problem med äldre webbläsare då de tolkar CSS-koden som en del av HTML-koden och därför visar koden direkt på webbsidan. En annan andledning är också för att det blir krångligare att ändra koden i efterhand sedan. Det är därför rekommenderat att använda ett link-element för att koppla CSS-kod till webbsidor, dels för att spara bandbredd och dels att en HTML-tolk och XHTML-tolk hanterar style-element på olika sätt.

CSS-tekniken har ibland kritiserats för att komplicera arbetet för webbutvecklare då många webbläsares stöd för CSS-standarden varierar kraftigt, webbläsaren Internet Explorer version 6 och tidigare är ofta utsatta för dessa anklagelser. Vissa speciella designdelar anses vara onödigt komplicerade som till exempel horisontell och vertikal centrering av olika element.

Exempel på CSS-dokument

body {background-color: #E9E9E9;}
p {font-family: georgia, "Times New Roman", serif; font-size: 19px;}

Ovanstående CSS-kod innehåller två instruktioner för hur body- och p-elementet samt dess innehåll ska presenteras. Den första raden (background-color: #E9E9E9;) anger att bakgrunden ska ha en väldigt ljus grå färg. Nästa rad ställer in typsnittet till Georgia i första hand, i andra hand Times New Roman. Om besökaren på webbsidan inte har något av dessa typsnitt installerade, så används i tredje hand något annat serif-typsnitt. Slutligen anges att typsnittet ska visas i en storlek av 19 bildpunkter (pixlar).

Resultat:

CSS Konstanter (interna csser)

Det går med lite trixande att få till CSS variabler. Detta går till så att man skapar ett prefix, helst med ett valfri symbol såsom $/# etc, skapar sedan ett hantag till style taggen, ID. Via ett javaskript kod direkt efter, griper man tag i style-elementet, substituterar prefixet med valfritt värde. Den kan också användas för att skapa dynamiska css mallar, som skiftar utseende beroende på händelse osv.

exempel:

 ... CSS Element med id "csselm" ....
 
background-color: #primaryColor;
 ... SLUT ...
 
... Javascript ...
 
var csselm = document.getElementById("csselm");
csselm.innerHTML=csselm.innerHTML.replace(/#primaryColor/g,"<valfritt värde>");
.. Slut javascript ..

Detta skulle möjligtvis att gå att använda på externa csser ocskå, om man använder @import() systemet.

Externa länkar

• W3Cs webbplats om CSS
• Nybörjarguide till CSS