Formatering med CSS

1. Inledning

Hittills har du fått lära dig skapa Xml-dokument med enbart Xml-kod. Som du har sett har Xml-läsaren sedan visat en ganska tråkig sida. Därför är det nu dags att titta lite mer på hur man kan presentera informationen på ett roligare sätt.

2. CSS och XSL

I sista exemplet på förra sidan visade jag hur man kan lägga in Html-kod i ett Xml-dokument. Ändå såg inte sidan ut som i Html då den visades i webbläsaren. Anledningen är att med Xml separeras innehållet från utseendet.

Därför måste vi hitta andra sätt att skapa en snyggare layout. Detta arbete kallas för att formatera Xml-dokumentet. När man gör det måste man välja mellan två olika metoder: CSS eller XSL.

CSS eller "Cascading Style Sheets" kallas ibland lite slarvigt för "stylesheets". På svenska säger man "stilmallar" eller ibland "formatmallar". Jag har berättat utförligt om CSS på sidorna om stilmallar. Gå dit >

Men det går att skapa stilmallar även med XSL. XSL står för "Extensible Stylesheet Language" och kan sägas vara en storasyster till CSS. Med XSL definierar man vilken information man vill ha ut ur ett visst Xml-dokument, en process som brukar kallas för att transformera Xml-koden. Transformationen kompletteras sedan med formatering av utseendet.

XSL är rejält svårare än CSS eftersom man kan göra så mycket mer än att bara formatera utseendet på Xml-dokumentet. Först i fördjupningsdelen går jag därför igenom hur man använder XSL.

När det gäller formatering finns det också alternativa sätt, beroende på var man vill presentera Xml-dokumentet. I vissa fall, t.ex då man vill visa ett Xml-dokument på en mobiltelefonskärm eller liknande, vill man inte främst skapa en snygg sida utan snarare försöka få plats med alla data på ett så smidigt sätt som möjligt. Därför använder man i stället andra kodspråk, t.ex WML. Jag berättar mer om sådana metoder i fördjupningsdelen.

3. Formatera med CSS

När man formaterar sitt Xml-dokument med CSS måste stilmallskoden ligga i en extern fil. Man formaterar alltså dokumentet utifrån, snarare än inne i koden.

Eftersom Xml helt saknar kod för att formatera dokumentet måste allt sådant ske i stilmallen. Skriver man elementet <p> i Html vet ju webbläsaren att den skall skapa ett nytt stycke. I Xml vet inte webbläsaren det förrän man skriver in det i stilmallen.

I exemplen med cd-skivan på de tidigare sidorna skapade vi olika element, t.ex <artist>. I stilmallen styr man visningen av detta genom att skriva in stilmallen direkt för elementet:

artist {
  display: block;
  background: #CCCCFF;
  padding: 5px;
  font-size: 11px;
  font-weight: normal;
  font-family: Verdana, Trebuchet, Geneva, Arial, Helvetica, sans-serif;
  border: ridge 1px #000099; }

En sak man måste tänka på när man styr elementen är att berätta om ett objekt skall visas som "block" eller "inline". Här vill jag att innehållet i <artist> skall visas som ett block, dvs visas som ett eget stycke.

En annan detalj som kan kännas ny är att man kan dölja innehåll i vissa element, om man har med data som inte skall visas:

<serienummer>IMP007CD </serienummer>

I stilmallen skriver man då:

a) serienummer { display: none } eller
b) serienummer { visibility: hidden }

Dessa två metoder kan i vissa fall även kombineras. De kommer att tolkas så här:

a) Innehållet i elementet ingår inte i den sida och visas inte alls.
b) Innehållet ingår i sidan, men visas som ett tomt utrymme.

För att skapa en referens till stilmallen som styr dokumentets layout, skriver man följande i Xml-dokumentet:

<?xml version="1.0" encoding="UTF-8"?>
<DOCTYPE rotelementet SYSTEM "dokumentnamn.dtd">
<?xml-stylesheet type="text/css" href="stilmall.css"?>
<rotelementet>

Jag har gjort ett litet exempel på hur man kan gå till väga.

Jag har utgått ifrån det första exemplet på en Xml-sida och formgett den, enligt länkarna nedan.

Det skall sägas att jag anpassat koden något för att den skulle se korrekt ut i min webbläsare. Vissa versioner av t.ex Internet Explorer kraschar tyvärr när de försöker läsa koden. jag har använt Safari för Mac OS X.

Bilden visar hur det såg ut i den.

Titta på Xml-koden >
Titta på CSS-koden >
Titta på Xml-dokumentet >

4. Tabeller

I Xml finns inget inbyggt tabellverktyg som i Html. Därför måste man själv tala om vilka element som skall vara tabellelement. I stilmallen definierar man varje element utifrån egenskapen display.

I Xml-dokumentet står t.ex elementet <artist>. I stilmallen anger vi att elementet skall utgöra en tabellcell, motsvarande <TD> i Html, med följande kommando:

artist { display: table-cell; }

Det finns flera olika värden att välja mellan. Jag har valt att låna ett exempel jag hittat på bokförlaget Wrox webbplats (www.wrox.com) och förklara dessa olika värden och samtidigt visa hur formateringen går till i CSS:

Titta på Xml-koden >
Titta på CSS-koden >
Titta på Xml-dokumentet

Bilden nedan visar hur det såg ut i min webbläsare: