XML och CSS

Konstruera och tillämpa en CSS-mall på ditt XML-dokument

Du skall börja med att skapa en rudimentär formatmall som får din XML-text att framträda i en form som gör innehållet lite mer läsligt. Vi vill bara än en gång understryka att det här hålls ytterligt kort, eftersom vi vill lämna mer tid för XSLT och HTML/CSS.

För de övningar som följer under den här dagen gäller att de för enkelhets skull utgår från mycket simpla exempel. Men om du känner dig trygg kan du givetvis överföra övningsinstruktionerna till något annat mer utvecklat XML-dokument, om du har något sådant till hands.

Låt oss nu se på hur du gör genom att utgå ifrån följande mycket enkla XML-dokument som exempel. När du blir mer bekant med tekniken kommer det kanske att kännas bättre att utgå ifrån en "dokumentinstans" och hur du vill att den skall presenteras, men här skall du börja med att utgå ifrån följande DTD. Tanken är ju att den "layout" vi skapar skall kunna appliceras på alla instanser av den här dokumenttypen och därför kan det vara lämpligt att börja från DTDn. Har du grepp om strukturen kommer du säkert att lyckas bättre också med presentationen.

<!ELEMENT bibliography (book*)>
<!ELEMENT book (author*, title+, ISBN)>
<!ATTLIST book lang (en | se ) "en">
<!ELEMENT author (#PCDATA)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT ISBN (#PCDATA)>

Som du ser rör det sig om en bibliografi med rotelementet bibliography som måste innehålla inga eller flera förekomster av elementet book. Detta i sin tur innehåller element för författare, titel och ISBN-nr. Märkorden är på engelska, för att vi skall slippa problemen med å, ä och ö, som egentligen skall gå att använda.

Du kan tänka dig följande instans.

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE bibliography SYSTEM "exempel.dtd">
<bibliography>
<book lang="en"><author>Bruner, Jerome</author><title>The Culture of Education</title><ISBN>0-674-1793-6</ISBN> </book>
<book lang="en"><author>Landow, George</author><title>Hypertext 2.0</title><ISBN>0-8018-5585-3</ISBN> </book>
<book lang="en"><author>Ray, Erik T</author><title>Learning XML</title><ISBN>0-596-00046-4</ISBN> </book>
<book lang="se"><author>Marchal, Benoît</author><title>XML genom exempel</title><ISBN>91-636-0680-1</ISBN> </book>
</bibliography>

Skapa en DTD och en XML-instans

Kopiera instansen respektive DTDn till varsitt tomt fönster i anteckningar och spara instansen som exempel.xml samt DTDn som exempel.dtd

Öppna ännu ett nytt fönster av anteckningar för att där lägga "CSS-regler". Att skapa en formatmall handlar nämligen om att fastställa vissa regler (rules) för förekomster av element i en instans. Dessa regler talar om hur respektive element skall presenteras.

En regel inleds med en selektor (selector) vilken ofta är namnet på ett element (ett märkord), varpå följer en deklaration (declaration) av presentationen för detta. Exempelvis

book { color : blue }

Denna regel säger att elementet "book" skall ha en blå förgrundsfärg, vilket innebär att innehållet (dvs texten) i detta blir blått. Nu innehåller elementet ingen text utan i stället tre andra element. CSS fungerar emellertid så att ett elements barn (children) ärver dess förälders (parent) egenskaper. Det finns dock undantag för den principen.

Börja med din formatmall

Om du nu efter att ha skrivit in denna regel sparar din formatmall som exempel.css samt infogar följande (det fetstilta) i din XML-fil direkt efter bearbetningsinstruktionen kan du se resultatet.

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<?xml-stylesheet type="text/css" href="exempel.css"?>
<!DOCTYPE bibliography SYSTEM "exempel.dtd">
<bibliography>
<book><author>Bruner, Jerome</author></title>The Culture of Education</title><ISBN>0-674-1793-6</ISBN>
</book>
</bibliography>

Som du märker sätts IEs interna XSL-mall ur spel och ersätts av din CSS-mall, trots att den bara har en enda regel.

Vi skall nu gå vidare, men innan dess introducera två termer som är nödvändiga. I den föregående regeln angav vi en deklaration för elementet "book". Denna deklaration har en viss syntax. Mellan två krullparenteser fastställs för det första vilken egenskap (property) som skall modifieras. Därefter följer ett kolon innan värdet (value) för egenskapen anges. Vilka egenskaper som är möjliga att definiera och vilka värden de kan ta förtecknas i CSS-specifikationen som är närmast oundgänglig (http://www.w3.org/TR/REC-CSS2/). Givetvis begränsas möjligheten av vilket stöd för CSS-egenskaper som ges av XML-tolken. Det finns ett flertal egenskaper och värden som anges i specifikationen som (beklagligtvis) ännu inte implementerats för IE.

Deklarera "display"-typ

Låt oss nu fortsätta med att deklarera regler för vart och ett av elementen. Det första du bör göra är att tala om av vilken (presentationsorienterad) typ varje element skall vara. Vad menas nu med detta...? Jo, det finns två grundläggande typer av "boxar" för CSS, block och inline. Ett blockelement tillskansar sig ett rektangulärt utrymme som kan sägas ta det fullständiga horisontella utrymmet i anspråk, medan inlineelementen fungerar som pusselbitar som fylls på både vertikalt och horisontellt i det normala flödet (normal flow). Har du god erfarenhet av HTML vet du att stycketext inte kan fås att ligga direkt till höger eller vänster om rubriker, H1 t ex genererar alltid en radbrytning efter sig och före sig, om du inte placerar blockelementet H1 i en tabellcell (härav det myckna bruket av HTML-elementen TABLE, TR och TD, kan man anta). Gör på följande vis.

bibliography { display : block ;
}
book {display : block ;
}
author {display : inline ;
}
title {display : inline ;
}
ISBN {display : inline ;
}

Definiera ett elements bredd

Eftersom vi nu skall börja manipulera elementen kan det vara bra att se hur "boxarna" läggs ut. Sätt därför förslagsvis en tunn ram runt varje, som du i slutändan kan avlägsna. Låt oss i samma moment också definiera bredden på varje box. Observera att om du definierar två egenskaper i en regel så måste du särskilja dem med ett semikolon för att det skall bli korrekt och fungera.

bibliography { display : block ;
width : 590px ;
border : 1px solid ;
}
book {display : block ;
width : 500px ;
border : 1px solid ;
}
author {display : inline ;
width : 150px ;
border : 1px solid ;
}
title {display : inline ;
width : 200px ;
border : 1px solid ;
}
ISBN {display : inline ;
width : 130px ;
border : 1px solid ;
}

Nu har du grunderna för CSS och du kan med hjälp av CSS-specifikationen prova vilka andra möjligheter som finns. Kom bara ihåg att syntaxen är grunden, ett litet syntaktiskt fel, som ett glömt semikolon kommer troligen att få till följd att ingenting i CSSen fungerar som avsett. (Det sista semikolonet kan dock uteslutas.) Vi lämnar nu XML för att se hur CSS kan tillämpas på HTML. Om du vill kan du förstås på egen hand fortsätta.