 |
XML-Dokumente an sich sehen recht öde aus. Will man das ändern und ihnen ein richtiges Layout, vielleicht vergleichbar mit einer HTML-Seite, geben, so läuft das meist auf den Einsatz von Style Sheets hinaus. Mit ihnen kann man jedem einzelnen Element ein bestimmtes Aussehen und bestimmte Eigenschaften zuweisen.
In diesem Tutorial gehen wir zunächst auf die Cascading Style Sheets ein, die Sie bereits von HTML kennen. ALs Grundwissen werden daher die drei Folgen unseres CSS-Tutorials vorausgesetzt (erreichbar von der HTML-Praxis).
Neben den CSS gibt es noch eine andere Technologie, die XSLT. Sie ermöglichen es, die hierarchische Struktur eines Dokuments neu aufzubauen. Das können CSS nicht: sie bauen auf der durch Ihr Dokument vorgegebenen Anordnung von Attributen und Elementen auf. Auf XSLT jedoch werden wir in dieser Folge des Tutorials nicht eingehen.
CSS einbinden
CSS werden so eingebunden:
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/css" href="datei.css"?>
<der_rest>
...
</der_rest>
In unserem Beispiel enthält die Datei datei.css die CSS-Anweisungen.
Übrigens ist es auch möglich, innerhalb von datei.css weitere Dateien einzubinden. Die entsprechende Anweisung dazu lautet @import url(http://www.xyz.de/stylesheet2.css);, wobei das, was zwischen den Klammern steht, natürlich durch die entsprechende URL ersetzt werden muss.
CSS-Syntax
Die CSS-Syntax wird in unserem CSS-Tutorial Teil 1 recht ausführlich behandelt. Zur Erinnerung: zuerst kommt ein Selektor, der auf irgendeine Art und Weise angibt, auf welche Elemente sich die folgenden Eigenschaften beziehen. In geschweiften Klammern folgt erst ein Leerzeichen und dann die Liste der Attribute. Ein Attribut-Name wird dabei von einem Doppelpunkt, dem Wert des Attributes und einem abschließenden Semikolon gefolgt.
Insgesamt könnte solch eine CSS-Datei also so aussehen:
body {font-family: Verdana, Arial; font-size: 12pt; color: green;}
b {font-weight: bold; color: blue;}
Selektoren
Während die verfügbaren Eigenschaften denen in HTML sehr ähneln, bieten die Selektoren im Zusammenspiel mit XML deutlich mehr Funktionen. Das werden wir anhand einiger Beispiele erläutern:
abc {...}
Selektiert alle Elemente, abc heißen.
abc.klasse2 {...}
Selektiert alle Elemente, die abc heißen und ein Attribut class mit dem Wert klasse2 haben.
#abc {...}
Selektiert alle Elemente, die ein Attribut id mit dem Wert abc haben.
abc[name="Herbert"] {...}
Selektiert alle Elemente, die abc heißen und ein Attribut name mit dem Wert Herbert haben.
abc[name="Herbert"][frau="Gerlinde"] {...}
Selektiert alle Elemente, die abc heißen, ein Attribut name mit dem Wert Herbert und ein Attribut frau mit dem Wert Gerlinde haben.
CSS unterstützen auch eine Selektierung nach dem Kontext, also danach, wo das Element steht:
buch > abschnitt {...}
Selektiert alle abschnitt-Elemente, die hierarchisch direkt unter einem buch-Element stehen.
buch abschnitt {...}
Selektiert alle abschnitt-Elemente, die hierarchisch irgendwo unter einem buch-Element stehen.
Als Wildcard wird das Sternchen unterstützt. Es steht für ein beliebiges Element:
* > * > * > abschnitt {...}
Selektiert alle abschnitt-Elemente, die hierarchisch gesehen in der vierten Ebene liegen.
Und wenn Sie etwas selektieren wollen, das gar kein Element ist?
abschnitt:first-child:first-letter {...}
Selektiert den ersten Buchstaben eines abschnitt-Elements: zuerst wird mit first-child der erste Knoten des Elements ausgewählt, der Text-Knoten (siehe dazu Das DOM-Objektmodell in unserem eBook). Von diesem wird dann mit first-letter der erste Buchstabe selektiert. Analog zu first-letter gibt es noch first-line (erste Linie), before (der Punkt vor dem Beginn des Elements) und after (der Punkt nach dem Ende des Elements). Die letzten beiden eignen sich besonders gut im Zusammenhang mit via CSS festgelegten Inhalten (siehe unten).
Regeln
Es wird immer das Stylesheet angewandt, dessen Selektor am exaktesten ist. abc.klasse2 {...} hat also eine höhere Priorität als abc {...}.
Zusätzlich dazu werden Eigenschaften vererbt. In folgendem Konstrukt würden die Formatierung von dem Element chef also auch auf mitarbeiter angewandt. Danach erst würden die mitarbeiter-eigenen Formatierungen aktiviert, natürlich mit höherer Priorität als die von chef geerbten.
<chef>
<mitarbeiter name="Hans" />
<mitarbeiter name="Heino" />
</chef>
Wesentliche CSS-Eigenschaften
Sie wissen nun, wie Selektoren funktionieren und nach welchen Regeln Formatierungen angewandt werden. Deswegen ist es nun an der Zeit für einige wesentliche Tipps.
Wenn Sie XML verwenden, gibt es, im Gegensatz zu HTML, kein Grundgerüst: wenn Sie in HTML ein <table>-Tag verwenden, weiß der Browser automatisch, dass die Tabelle einen gewissen Außenabstand hat und einen Zeilenumbruch auslöst. In XML müssen alle diese wesentlichen Eigenschaften für jedes Element definiert werden: so z.B. Position, ob das Element ein Block ist, Innenabstände, Außenabstände, Schriftarten.
Block?
Die display-Eigenschaft legt fest, ob ein Element einen viereckigen Block bildet oder in die aktuelle Zeile integriert wird. Mögliche Werte sind block (Beispiel in HTML: eine Tabelle), inline (HTML-Beispiel: <b>) und invisible für unsichtbare Elemente.
Außenabstand
Außenabstände können nur für Block-Elemente definiert werden. Sie geben den Abstand zwischen dem Rahmen des Blocks und den umgebenden Elementen an. Das entsprechende Attribut heißt margin bzw. margin-right, margin-left, margin-top und margin-bottom.
Beispiel:
elem {display: block; margin: 10px;}
Innenabstand
Innenabstände können nur für Block-Elemente definiert werden. Sie geben den Abstand zwischen dem Rahmen des Blocks und den umgebenden Inhalten des Blocks an. Das entsprechende Attribut heißt padding. Analog zu margin sind auch hier Angaben zu den einzelnen Seiten möglich.
Rahmen
Mehr Informationen dazu im Artikel Rahmen-Effekte.
Inhalt
Ein netter Effekt ist die automatische Festlegung des Inhalts. Die Eigenschaft dazu heißt content, der Wert gibt an, woher der Inhalt kommt. Folgendes Beispiel lädt eine URL:
elem {content: url(http://www.aboutwebdesign.de)}
Sonstige Attribute
... finden Sie in unseren CSS-Tutorials bzw. direkt auf der W3C-CSS-Homepage.
Ergebnisse ansehen
Ansehen können Sie sich CSS im Zusammenspiel mit XML z.B. im IE 5 oder im aktuellen Mozilla, denn diese unterstützen bereits die Formatierung von XML-Dokumenten mit CSS.
|
|
|
|
Sie wollen diese Seite ausdrucken? Dafür haben wir eine spezielle Druckversion ohne grafische Elemente entwickelt! |
|
|
Einführung in CSS bei HTMLWorld.
|
|
