SELFHTML

XML-Darstellung mit CSS Stylesheets

Informationsseite

nach unten Allgemeines zur Darstellung mit CSS
nach unten Zusammenhängendes Beispiel: ein Zugfahrplan
nach unten Grenzen und Probleme bei der Darstellung mit CSS

 nach unten 

Allgemeines zur Darstellung mit CSS

Kapitel CSS Stylesheets sind eigentlich als Ergänzungssprache für HTML gedacht. Mit Hilfe von CSS ist es möglich, HTML-Elemente, die ein Browser mit Default-Formatierungen anzeigt, nach eigenen Wünschen zu formatieren. Diese Möglichkeit besteht je nach Browser auch, um XML-Daten zu formatieren. Genauso, wie Sie HTML-Elemente wie blockquote, h1 oder div mit CSS formatieren können, ist dies dann mit eigenen XML-Elementen möglich, egal ob sie nun telefonnummer, kurzbeschreibung oder wie auch immer heißen.

Damit die Kombination von XML und CSS funktioniert, müssen im Browser allerdings drei Voraussetzungen erfüllt sein:
1. Der Browser muss XML verarbeiten können.
2. Der Browser muss CSS kennen.
3. Der Browser muss CSS in Verbindung mit XML erlauben.

Erfüllt werden diese Voraussetzungen vom MS Internet Explorer ab der Version 5.0 und von Netscape ab Version 6.0. Dabei ist nicht einmal eine DTD erforderlich. Es genügt, wenn eine Seite wohlgeformte XML-Datei existiert. Die Elemente einer solchen Datei können Sie mit CSS formatieren.

XML in Verbindung mit CSS hat den Vorteil, dass es in den Browsern, in denen es funktioniert, ohne Kenntnisse in XSL/XSLT auskommt. Da die Verarbeitung komplett im Browser stattfindet, ist auch keine Serverumgebung oder ähnliches erforderlich. Zu den Nachteilen siehe nach unten Grenzen und Probleme bei der Darstellung mit CSS.

 nach obennach unten 

XML1.0msie5.0Netscape 6.0 Zusammenhängendes Beispiel: ein Zugfahrplan

Der Zugfahrplan eines Bahnhofs ist ein typisches strukturiertes Dokument, für das es in HTML kaum sinnvolle Elemente gibt. Es ist zwar kein Problem, eine schöne Kapitel Tabelle in HTML zu erstellen und einen Fahrplan darin darzustellen. Doch aus "semantischer Sicht" gehen dabei Daten verloren. Denn eine HTML-Tabelle besteht aus Tabellenzellen, aber diese sagen nichts weiter über ihren jeweiligen Inhalt aus. Mit Hilfe einer XML-Struktur lassen sich die Fahrplandaten so beschreiben, dass die Einzeldaten jeweils in "Elementen mit Bedeutung" stehen.

Das folgende Beispiel zeigt eine solche XML-Struktur. Es besteht aus drei Teilen:
1. der Kapitel DTD für die Validierbarkeit der Daten,
2. einer XML-Anwendung dieser DTD, also einem Beispieldokument, das auch eine separate CSS-Datei einbindet, und
3. aus dieser separaten CSS-Datei und ihren Definitionen.

Popup-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

Beispiel-DTD fahrplan.dtd:

<!ELEMENT fahrplan  (bahnhof)>
<!ELEMENT bahnhof   (name,(ereignis)*)>
<!ELEMENT name      (#PCDATA)>
<!ELEMENT ereignis  (abfahrt | ankunft)>
<!ELEMENT abfahrt   (zeit,zugtyp,zugnr,route)>
<!ELEMENT ankunft   (zeit,zugtyp,zugnr,route)>
<!ELEMENT zeit      (#PCDATA)>
<!ELEMENT zugtyp    (#PCDATA)>
<!ELEMENT zugnr     (#PCDATA)>
<!ELEMENT route     (#PCDATA | start | ziel)*>
<!ELEMENT start     (#PCDATA)>
<!ELEMENT ziel      (#PCDATA)>

Beispiel einer gültigen Anwendung fahrplan.xml:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE fahrplan SYSTEM "fahrplan.dtd">
<?xml-stylesheet type="text/css" href="fahrplan.css" ?>
<fahrplan>
<bahnhof>
 <name>Frankfurt HBF</name>
  <ereignis>
   <abfahrt>
    <zeit>10.24</zeit>
    <zugtyp class="ic">IC</zugtyp>
    <zugnr>234</zugnr>
    <route>Nürnberg 11.48, Regensburg 12.50, Passau 13.38, Linz 14.22
     <ziel>Wien West an 17.55</ziel>
    </route>
   </abfahrt>
  </ereignis>
  <ereignis>
   <ankunft>
    <zeit>10.36</zeit>
    <zugtyp>RB</zugtyp>
    <zugnr>20392</zugnr>
    <route><start>Koblenz ab 08.57</start>
     Bacherach 09.16, St. Goar 09.42, Mainz 10.05, Ffm Flughafen 10.25
    </route>
   </ankunft>
  </ereignis>
  <ereignis>
   <abfahrt>
    <zeit>10.39</zeit>
    <zugtyp>RSB</zugtyp>
    <zugnr>58483</zugnr>
    <route>Offenbach 10.52, Hanau 11.01
     <ziel>Aschaffenburg an 11.27</ziel>
    </route>
   </abfahrt>
  </ereignis>
  <ereignis>
   <ankunft>
    <zeit>10.40</zeit>
    <zugtyp class="ice">ICE</zugtyp>
    <zugnr>23</zugnr>
    <route><start>Hamburg ab 06.55</start>
     Hannover 08.05, Göttingen 08.43, Kassel 09.01, Fulda 09.43
    </route>
   </ankunft>
  </ereignis>
 </bahnhof>
</fahrplan>

Beispiel der eingebundenen CSS-Datei fahrplan.css:

bahnhof
 { position:absolute;
   top:10px;
   left:40px;
   background-color:#C0C0C0;
   padding:10px;
 }
name
 { position:relative;
   display:block;
   width:600px;
   background-color:#808080;
   color:#FFFFFF;
   font-family:Tahoma,Arial,Helvetica,sans-serif;
   font-size:36pt;
   padding:5px;
 }
abfahrt
 { position:relative;
   display:block;
   width:600px;
   background-color:#FFFF80;
   color:#000000;
   font-family:Tahoma,Arial,Helvetica,sans-serif;
   font-size:12pt;
   padding:2px;
 }
ankunft
 { position:relative;
   display:block;
   width:600px;
   background-color:#FFFFFF;
   color:#000000;
   font-family:Tahoma,Arial,Helvetica,sans-serif;
   font-size:12pt;
   padding:2px;
 }
zeit
 { position:relative;
   width:70px;
   vertical-align:top;
 }
zugtyp
 { position:relative;
   width:50px;
   vertical-align:top;
 }
zugnr
 { position:relative;
   width:70px;
   vertical-align:top;
 }
route
 { position:relative;
   width:350px;
 }
ziel,start,zeit
 { font-weight:bold;
   color:0000E0;
 }
.ic, .ice
 { font-weight:bold;
   color:E00000;
 }

Erläuterung:

In der Beispiel-DTD, die separat in einer Datei namens fahrplan.dtd gespeichert wird, wird die gewünschte Elementstruktur der Daten definiert. Unterhalb des Dokument-Elements fahrplan gibt es ein umfassendes Element namens bahnhof, das aus einem Namen für den Bahnhof (Element name) und aus einer beliebigen Anzahl von Ereignissen (Element ereignis) besteht. Ein Ereignis besteht entweder aus einer Abfahrt oder einer Ankunft (Elemente abfahrt und ankunft). Beide Ereignisarten haben die gleiche innere Struktur. Sie bestehen aus einer Uhrzeit (Element zeit), einer Zugtypbezeichnung (Element zugtyp), einer Zugnummer (Element zugnr) und einer Routenbeschreibung des Zuges (route). Das Element route kann nochmals innere Elemente enthalten, nämlich für die Nennung des Startbahnhofs bei ankommenden Zügen (Element start, und für den Endbahnhof bei abfahrenden Zügen (Element ziel).
Einzelheiten zu solchen DTD-Definitionen finden Sie im Abschnitt Seite Elemente und Verschachtelungsregeln.

In der XML-Anwendungsdatei wird in einer Seite Dokumenttyp-Deklaration mit externer DTD auf die zuvor erstellte DTD Bezug genommen. Gleich im Anschluss an die Dokumenttyp-Deklaration, noch vor den eigentlichen Nutzdaten der Datei, folgt die Anweisung, mit deren Hilfe die CSS-Datei eingebunden wird:
<?xml-stylesheet type="text/css" href="fahrplan.css" ?>

Es handelt dabei um eine Seite Verarbeitungsanweisung. Durch die Notation xml-stylesheet weiß der Browser, dass die nachfolgenden Attribute eine separate Stylesheet-Datei einbinden, in der Formatierangaben für die einzelnen XML-Elemente stehen. mit dem href-Attribut wird die Datei referenziert. Ebenfalls wichtig, besonders wenn die ganze Anwendung über einen Webserver aufgerufen wird, ist das Attribut type. Bei Verwendung von CSS erhält dieses Attribut den Wert text/css.

Der Rest der XML-Datei besteht aus den eigentlichen Nutzdaten. Dabei werden die Elemente verwendet, die in der DTD definiert wurden, und die Verschachtelungsregeln werden eingehalten. Das obige Beispiel beschränkt sich der Einfachheit halber auf vier "Ereignisse" im Zugfahrplan.

Die separate CSS-Datei, die im Beispiel den Namen fahrplan.css hat, definiert für die einzelnen Elemente gewünschte Kapitel CSS-Eigenschaften. Auf die einzelnen Eigenschaften wird an dieser Stelle nicht näher eingegangen. Aber einen wichtigen Grundsatz sollten Sie kennen: ein XML-Element hat für den Browser zunächst keinerlei Eigenschaften. Der Browser weiß nicht einmal, ob ein Element einen eigenen Block bei der Anzeige erzeugen soll, oder ob es nur innerhalb des laufenden Textes vorkommen soll (inline). Per Voreinstellung wird alles inline angezeigt, also wie ein völlig unstrukturierter Text. Deshalb müssen Sie bei den CSS-Definitionen von XML-Elementen, die einen eigenen Block erzeugen sollen, stets eine entsprechende Angabe notieren. Diese lautet display:block.

Im obigen Beispiel wird das Element bahnhof, das den gesamten Zugfahrplan einschließt, absolut positioniert (position:absolute). Die inneren Elemente werden dann in Abhängigkeit ihres relativen Anfangspunkts positioniert (position:relative). Diese Angaben in Verbindung mit Angaben zur Breite der Elemente (width:...) sorgen dafür, dass die Ausgabe sauber formatiert wie in einer Tabelle erscheint.

Eine Besonderheit stellt die unterste Definition in der CSS-Datei dar. Dort werden zwei so genannte Seite Klassen definiert. Solche Klassen können in HTML-Elementen normalerweise mit dem Kapitel Universalattribut class="Klassenname" angesprochen werden. Der Internet Explorer interpretiert solche Universalattribute auch in XML-Elementen in Verbindung mit CSS. In den Daten der XML-Datei im obigen Beispiel wird an zwei Stellen auf diese Klassen Bezug genommen, z.B. in der Anweisung <zugtyp class="ic">IC</zugtyp>.
Der Internet Explorer interpretiert sogar das Attribut style in einleitenden XML-Tags. Dies erlaubt Ihnen, einzelne XML-Elemente individuell zu formatieren, z.B.: <geburtstag style="font-family:Modern; font-size:14pt; color:blue">.
Je stärker Sie jedoch die XML-Anwendungsdaten durch HTML-entlehnte Attribute wie class= oder style= "aufweichen", desto weiter entfernen Sie sich wieder von der reinen XML-Lehre, die Daten und Formatierung streng voneinander trennen will und Formatierung nur für definierte Bestandteile einer DTD erreichen will.

 nach obennach unten 

Grenzen und Progleme bei der Darstellung mit CSS

CSS ist für Anwender, die sich mit Vorkenntnissen in HTML an XML heranwagen, zunächst sicher einfacher zu verstehen und leichter anzuwenden. Dennoch gibt es Nachteile bei CSS in Verbindung mit XML, die Sie kennen müssen:

 nach oben
weiter Seite Grundlagen von XSL/XSLT
zurück Seite Notations für referenzierte Daten
 

© 2001 E-Mail selfhtml@teamone.de