Die CSS-Syntax

(Auszug aus "XML in a Nutshell" von Elliotte Rusty Harold & W. Scott Means)

Die CSS-Syntax ist keine XML-Syntax, allerdings ist sie so trivial, dass dies kaum eine Rolle spielt. Ein CSS-Stylesheet ist einfach eine Liste der Elemente, auf die Sie die Styles anwenden wollen, normalerweise ist in jeder Zeile ein Element. Befindet sich das Element in einem Namensraum, muss der qualifizierte Name, etwa rezept:gericht, verwendet werden. Das Präfix muss im Stylesheet und im XML-Dokument das gleiche sein. Jedem Elementnamen folgt eine Liste der Styles, die Sie auf das Element anwenden wollen. Sie können Kommentare einfügen, die in Kommentarzeichen (/*...*/) eingeschlossen werden, die Ihnen vertraut sein sollten, falls Sie in C programmieren. Whitespace hat keine besondere Bedeutung, Sie können ihn deshalb benutzen, um das Stylesheet zu formatieren. Das folgende Beispiel zeigt ein einfaches CSS-Stylesheet für das Rezept aus dem Code-Beispiel Marjorie Andersons Rezept für Southern Corn Bread. Die folgende Abbildung zeigt das Rezept, wie es vom Opera 4.01-Browser mit diesem Stylesheet aufbereitet und ausgegeben wird.

/* Vorgaben für das gesamte Dokument */
rezept  {font-family: "New York", "Times New Roman", serif; font-size: 12pt }

/* Hiermit sieht der Name des Gerichts wie eine Überschrift aus */
gericht    {
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20pt;
  font-weight: bold;
  text-align: center }

/* Eine Aufzählungsliste */
zutat  {display: list-item; list-style-position: inside }

/* Diese beiden Einträge sollen als Absätze formatiert werden */
anweisungen, geschichte {
  display: block;
  margin-top: 12pt;
  margin-left: 4pt }

Code-Beispiel: Ein CSS-Stylesheet für Rezepte

Dieses Stylesheet enthält vier Style-Regeln. Jede Regel nennt das Element oder die Elemente, das bzw. die sie formatiert, gefolgt von einem Paar geschweifter Klammern, in denen die Style-Properties enthalten sind, die auf diese Elemente angewendet werden. Jedes Property besitzt einen Namen, wie font-family, und einen Wert, wie "New York", "Times New Roman", serif. Die Properties werden durch Semikolons getrennt. Weder die Namen noch die Werte unterscheiden zwischen Groß- und Kleinschreibung; font-family ist das Gleiche wie FONT-FAMILY oder Font-Family. CSS Level 2 definiert mehr als 100 unterschiedliche Style-Properties. Sie müssen sie jedoch nicht alle kennen. Für alle Properties, die Sie nicht explizit einstellen, gibt es vernünftige Vorgabewerte.

Zum Beispiel gilt die erste Regel für das Element rezept. Sie besagt, dass dies in der Schriftart New York mit einer Größe von 12 Punkten formatiert werden soll. Wenn New York nicht zur Verfügung steht, wird stattdessen Times New Roman ausgewählt. Ist auch diese Schrift nicht vorhanden, kann jede passende Serifenschrift eingesetzt werden. Diese Styles gelten auch für alle Nachfahren des Elements rezept; d.h., die Kindelemente erben die Styles ihrer Elternelemente, wenn sie sie nicht ausdrücklich mit anderen Werten für dieselben Properties überschreiben. Da rezept das Wurzelelement ist, gibt es die Schrift für das gesamte Dokument vor.

Die zweite Regel sorgt dafür, dass das Element gericht wie eine Überschrift aussieht, wie Sie in der folgenden Abbildung sehen können. Es ist in einer viel größeren Schriftart gesetzt, fett gedruckt und zentriert. Darüber hinaus ist sein display-Style auf block gesetzt. Das bedeutet, dass zwischen diesem Element und seinen vorherigen bzw. nachfolgenden Geschwisterelementen ein Zeilenumbruch auftritt. Die dritte Regel formatiert die Zutaten als Aufzählungsliste, während die vierte Regel die Elemente anweisungen und geschichte als relativ einfache Absätze mit ein wenig zusätzlichem Freiraum oben und an der linken Seite formatiert.

Semantisches XML-Dokument, nachdem CSS-Stylesheet angewandt wurde

Abbildung: Ein semantisch ausgezeichnetes XML-Dokument, nachdem ein CSS-Stylesheet angewandt wurde

Nicht alle Elemente in dem Dokument besitzen Style-Regeln, und nicht alle brauchen sie. Zum Beispiel gibt es für das Element schritt keinen besonderen eigenen Style. Es erbt nämlich bereits einige unterschiedliche Styles von seinen Vorfahr-Elementen anweisungen und rezept und verwendet einige Vorgabewerte. Ein anderes Stylesheet könnte eine Regel für das Element schritt hinzufügen, das die Styles außer Kraft setzt, die es erbt. Beispielsweise würde die folgende Regel für seine Schrift eine 10-Punkt-Palatino verwenden:

schritt {font-family: Palatino, serif; font-size: 10pt }

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema XML bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

  


Copyright © 2005 O'Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "XML in a Nutshell" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstraße 81, 50670 Köln, kommentar(at)oreilly.de