Die Trennung von Stileigenschaften und Inhalt ist ein grundlegendes Konzept bei XML. Stilanweisungen können XML-Dokumenten auf verschiedene Weise zugeordnet werden, um eine Darstellung im Browser zu ermöglichen. Eine Art und Weise besteht darin, Cascading Style Sheets mit Ihren XML-Dokumenten zu verbinden, eine Methode, die ursprünglich dazu gedacht war, die Präsentation bei HTML zu verbessern. Heute lernen Sie:
Eines der grundlegenden Ziele beim XML-Design ist die Trennung des Inhalts von allen Formen der Dokumentanzeige. Sie haben am 1. und 2. Tag gelernt, dass diese Trennung einer der charakteristischen Unterschiede zwischen XML und HTML ist. HTML vermischt Inhalt und Präsentation in der gleichen Auszeichnung. Das <H1>-Tag in HTML zum Beispiel identifiziert nicht nur Daten, die als Überschrift betrachtet werden, sondern weist den Browser auch an, die Daten in einer großen Schrift wiederzugeben. Genauso teilt das <I>-Tag bei HTML einem Browser mit, dass die Daten, die es auszeichnet, in Kursivschrift wiedergegeben werden sollen. Wie Sie wissen, besteht XML aus Auszeichnungen, die den Dateninhalt beschreiben, ohne darauf zu achten, wie sie in einem Browser, auf einer gedruckten Seite oder durch einen anderen Client wiedergegeben werden.
Ein Client ist eine Software, die die Zeichen in einem Dokument gemäß vorgegebener Regeln nach Datenzeichen und Auszeichnungen parst. Es werden verschiedene Clients in verschiedenen Geräten wie Computern, webfähigen Handys, Webbrowsern usw. implementiert.
Da Sie in XML Ihre eigenen Elementtypen erzeugen können, hat ein Client keinen eingebauten Anweisungssatz, der bestimmt, wie die Daten dieser Elemente angezeigt werden sollen. Wenn Sie Ihre XML-Daten mit einem Browser anzeigen wollen, müssen Sie Anzeigeanweisungen angeben, die der Browser für die Aufbereitung der Daten verwendet. Sie können dies auf zwei Arten tun: mit Cascading Style Sheets (CSS) und mit der XML Stylesheet Language (XSL). Heute untersuchen wir CSS, morgen werden Sie Gelegenheit erhalten, den XSL-Ansatz zu verwenden und damit zu vergleichen.
HTML war nicht ursprünglich als Sprache für die Ausgabe in Browsern gedacht, sondern für eine Auszeichnung von Daten, die auf eine Art und Weise erfolgte, dass mehrere Netzwerke und verschiedene Plattformen sie gemeinsam nutzen konnten. Seit den frühesten Neuauflagen wurden jedoch spezielle Tags eingefügt, die eine typografische Bedeutung haben, wie etwa <I> für Kursivschrift, <B> für Fettschrift, <BR> für Zeilenumbrüche usw. Obwohl diese speziellen Tags eingeschlossen wurden, war HTML niemals wirklich dazu in der Lage, die Anzeige der Daten zu kontrollieren. Vor der Entwicklung von CSS mussten Webdesigner unorthodoxe Methoden einsetzen, um einige Stileffekte zu erreichen. Um etwa den Anfang eines Absatzes in einer Webseite einzurücken, fügten viele Entwickler ein »unsichtbares gif-Bild«, ein so genanntes clearpixel ein; welches eine Bilddatei war, die die gewünschte horizontale Länge, aber eine Höhe von null Pixeln hatte. Das Bild war für diejenigen, die über die Seite browsten, nicht sichtbar, aber es erzwang, dass der Text unter Berücksichtigung der horizontalen Bildgröße nach rechts rückte.
Wenn Sie sich für weitere solcher Techniken interessieren, können Sie diese auf der Website »Stupid HTML Indent Tricks« unter http://www.jbarchuk. com/indent/ nachlesen.
Die Cascading Style Sheets entstanden als eine Methode, die eine robuste Formatierung für HTML-Seiten zulässt, ohne ständig Informationen in die Tags eingeben zu müssen. Stylesheets können mit einem einfachen Texteditor wie dem Windows-Editor Notepad geschrieben und mit der Dateierweiterung .css abgespeichert werden. Es stehen mehrere Versionen von CSS zur Verfügung. Das W3C hat einen Satz von Stilkonventionen definiert, der als Cascading Style Sheets Level 1 (CSS1) bekannt ist. CSS2, das auch vom W3C definiert wird, ist eine neuere Version, die viele Features enthält, die im Wesentlichen eine Übermenge von CSS1 darstellen. CSS3 wird gerade entwickelt, aber von Clients nur minimal unterstützt.
Eines der grundlegenden Features von CSS ist, dass die Stylesheets kaskadieren. Man kann Stileigenschaften innerhalb eines Dokuments, in einem Element oder in einem externen Dokument programmieren. Für eine vorgegebene Dokument-Instanz können aber auch alle drei Standorte Stileigenschaften enthalten. Diese Flexibilität beim Standort für den Style wird aus Gründen der Modularität und Design-Flexibilität zur Verfügung gestellt. Es gibt Regeln dafür, wie die verschiedenen Stileigenschaften untereinander zusammenspielen, und wenn sie in Konflikt miteinander geraten, überschreiben sie sich gegenseitig. Die vollständigen Regeln für das Überschreiben finden Sie unter http:// www.w3.org/TR/ REC-CSS1. Eine externe .css-Datei etwa (die Erweiterung wird einem CSS-Dokument angefügt) kann den Inhalt eines Elements als kursiv stilisieren. Im Dokument kann ein globaler Stil, der dieses Element umfasst, das Element auf Fettschrift setzen. Die Einstellung für Fettschrift überschreibt in dieser Kaskade die externe Einstellung auf Kursivschrift. Kurz gesagt, ein Inline-Stil auf Elementebene überschreibt jeden Stil, der global in einem Dokument gesetzt ist; dieser wiederum überschreibt alle Stile, die in einer externen CSS-Datei gesetzt sind. Heute werden Sie externe CSS- Dokumente erstellen, um XML-Instanzen zu stilisieren.
Wenn Sie bereits mit HTML im Web programmiert haben, kennen Sie CSS vielleicht schon. CSS für XML funktioniert genauso: es bietet eine Methode, den Stil für Elemente zu spezifizieren, um zu definieren, wie ein Client diese Elemente handhabt. Heute erzeugen Sie Cascading Style Sheets für XML-Dokumente und verbinden beide. Das ist eine Methode, um einen Browser anzuweisen, wie er jedes der Elemente in Ihrem XML- Dokument aufzubereiten hat.
Die Verwendung von Stylesheets zur unterschiedlichen Aufbereitung von Elementen ist eine rein clientseitige Implementierung. Es überrascht nicht, dass CSS von Browsern verschiedener Plattformen unterschiedlich unterstützt wird. Tabelle 14.1 fasst die Unterstützung verschiedener Browser-Implementierungen für CSS1 zusammen. Die Unterstützung für CSS2 und CSS3 variiert stärker und ist derzeit keine allgemein übliche Praxis. Sie können mehr über die Unterstützung für CSS2 und CSS3 unter http:// www.w3.org/Style/CSS erfahren.
Da CSS recht breit unterstützt wird, wenn auch auf unterschiedliche Weise, können einige Browser ein XML-Dokument mit einem angefügten Stylesheet direkt öffnen. Die Methode des direkten Öffnens erfordert nicht, dass HTML die Daten aufbereitet. Jedoch hat diese Form der Verarbeitung ihren Preis. Da dieser Ansatz von einer ungleichen Browserunterstützung begleitet wird, können Sie nicht mit absoluter Sicherheit dafür garantieren, dass ein Anwender die Daten auf die Art und Weise sieht, die Sie beabsichtigen. Sie werden am 16. Tag verlässlichere Ansätze kennen lernen, XML-Daten darzustellen, wenn Sie die Extensible Language Transformations (XSLT) verwenden, und am 17. Tag, wenn Sie XML-Dateninseln auf HTML-Seiten einbauen.
Bei XML - ebenso wie bei HTML - verbessert die Trennung von Stil und Inhalt die Flexibilität der Datenpräsentation am Ende und vereinfacht die Wartung. Die XML- Datenquelle muss nicht verändert werden, wenn das Aussehen der Datenpräsentation geändert werden soll; es genügt, einfach die verbundenen CSS anzupassen. Genauso können Sie nach dem Erstellen eines Stylesheets, der die Daten im erwünschten Stil präsentiert, neue XML-Dokumente hinzufügen, die mit dem gleichen CSS verbunden werden, wodurch die Beständigkeit der Präsentation auf einer Website sichergestellt wird.
Wenn Sie mehrere Stylesheets erstellen, können Sie ein System entwickeln, das einheitliche Daten an verschiedene Clients übermittelt. Stellen Sie sich zum Beispiel vor, Sie wollen die gleichen XML-Daten an alle Besucher Ihrer Website übermitteln, egal welcher Browser zum Zugriff auf Ihre Informationen verwendet wird. Sie können ein Script schreiben, das den Browser des Anwenders austestet und so einen passenden CSS bestimmen, der optimale Ausgaberesultate erzielt. Diese Technik ist als Browserschnüffeln bekannt und wird bei Websites häufig eingesetzt. Sie können den Client des Anwenders auf unterschiedliche Weise ermitteln, aber die einfachste Methode ist vielleicht, im JavaScript einfach nach der navigator.appName-Eigenschaft zu fragen. Ein einfaches Script, das diesen Ansatz verwendet, der beinahe überall auf einer HTML-Seite eingefügt werden kann, sieht so aus:
1: <script language="JavaScript">
2: <!--
3: document.write("Der ermittelte Browser ist " + navigator.appName);
4: // -->
5: </script>
Dieses einfache JavaScript gibt dem Bildschirm (document.write) über den Ausgabestrom einen zusammengefügten String zurück, der den Namen (navigator.appName) des Browsers einschließt, der das Script ausführt. Das setzt natürlich voraus, dass der Browser JavaScript unterstützt, eine zunehmend verlässlicher werdende Annahme im Web. Wenn der Browser kein JavaScript unterstützt, ignoriert er Zeile 3 vollständig wegen der charakteristischen HTML-Kommentare (<!-- -->), die um sie herum platziert sind (Zeilen 2 und 4).
Viele andere client- und serverseitigen Methoden können ermitteln, welche Art Client verwendet wird, um auf die Daten zuzugreifen. Wenn dies geschehen ist, kann ein passender Stylesheet verwendet werden, der sicherstellt, dass die angezeigten Daten so aussehen, wie Sie es wollen.
Das Konzept der mehrfachen Stylesheets, das verwendet wird, um ähnliche Daten für eine Reihe von Aufbereitungen zu präsentieren, ist für das Webdesign sehr wichtig. Mit dieser Herangehensweise erreichen Sie:
Morgen werden Sie ein einfaches Script erstellen, das einem Anwender gestattet, ein Extensible Stylesheet Language (XSL)-Stylesheet zu verwenden, um Daten auf unterschiedliche Arten anzuzeigen. Sie werden einige Ähnlichkeiten zwischen CSS und XSL feststellen können.
Ein Cascading Style Sheet ist eine Textdatei, die normalerweise mit einer .css- Erweiterung gespeichert wird. Es kann mit einem einfachen Texteditor oder einem beliebigen Editor mit eingebauter CSS-Unterstützung erzeugt werden. Die Datei enthält Regeln, die die parsende Anwendung in einem Client anweisen, wie die Elementdaten angezeigt werden sollen. Die Regeln setzen sich aus Selektoren und Deklarationen zusammen, die die Anzeige der Daten definieren. Selektoren beziehen sich normalerweise auf einzelne XML-Elemente und die Deklarationen bestimmen, wie jedes ausgewählte Element angezeigt werden soll. Die Deklarationen enthalten Eigenschafts-/Werte-Paare. Jeder Eigenschaft wird ein definierter Wert zugewiesen, wie etwa Blockschrift, 10-pt- Schriftgröße oder Fettschrift. Die Syntax einer CSS-Regel ist die folgende:
Selektor { eigenschaft:wert; eigenschaft:wert; ...}
Erzeugen Sie zunächst eine XML-Dokument-Instanz unter Verwendung des bekannten nachricht.xml-Szenarios der vergangenen beiden Wochen, das anschließend mit einer verbundenen CSS-Datei stilisiert wird. Da CSS Ihnen nur gestattet, Elemente mit Stileigenschaften zu belegen, nicht Attribute, müssen Sie eine XML-Instanz mit mehreren unterschiedlichen Elementen erzeugen, jedes mit Inhalt, die im aufbereiteten Resultat angezeigt werden soll. Erzeugen Sie eine XML-Dokument-Instanz, die so ähnlich aussieht wie die in Listing 14.1. Speichern Sie das Dokument unter nachricht01_14.xml. Sie werden es in den kommenden Übungen für mehrere Stylesheets verwenden.
Listing 14.1: Ein XML-Dokument, das stilisiert werden soll - nachricht01_14.xml
1: <?xml version="1.0"?>
2: <!-- listing 14.1 - nachricht01_14.xml -->
3:
4: <notiz>
5: <nchr>
6: <id>m1</id>
7: <von>Kathy Shepherd</von>
8: <nachricht>Denke daran, auf dem Nachhauseweg von der Arbeit Milch zu kaufen</nachricht>
9: </nchr>
10:
11: <nchr>
12: <id>m2</id>
13: <von>Greg Shepherd</von>
14: <nachricht> Ich brauche ein wenig Hilfe bei den Hausaufgaben</nachricht>
15: </nchr>
16:
17: <nchr>
18: <id>m3</id>
19: <von>Kristen Shepherd</von>
20: <nachricht> Bitte spiele heute Abend Scribble mit mir</nachricht>
21: </nchr>
22: </notiz>
Dieses XML-Dokument hat ein Wurzelelement notiz, das abgeleitete nchr-Elemente enthält. Jedes nchr-Element enthält abgeleitete id-, von- und nachricht-Elemente.
Nehmen wir an, Sie wollen das XML-Instanzdokument so wiedergeben, dass der Inhalt aller id-Elemente in Kursivschrift, der Inhalt der von-Elemente in Fettschrift und der nachricht-Text in blauer Schrift angezeigt wird. Sie können für jedes der Elemente CSS- Regeln durch Deklarationen erzeugen, die das gewünschte Eigenschafts-/Werte-Paar enthalten, um das gewollte Resultat zu erzielen.
Sie müssen die Namen der Eigenschaften und ihre entsprechenden Werte für jeden dieser Effekte kennen. Für diesen Regelsatz benötigen Sie folgende Eigenschaften und Werte:
Eine komplexere Auflistung weiterer nützlicher Eigenschaften finden Sie in Kürze, zusammen mit den jeweils passenden Werten. Erinnern Sie sich an die Syntax, die wir vorhin gezeigt haben; das CSS, der die beschriebenen Effekte erzielt, sieht aus wie in Listing 14.2. Erstellen Sie eine solche CSS-Datei und speichern Sie sie unter style01.css.
Listing 14.2: Ein einfaches Cascading Style Sheet - style01.css
1: /* listing 14.2 style01.css */
2:
3: id
4: { font-style:italic}
5:
6: von
7: { font-weight:bold}
8:
9: nachricht
10: { color:blue}
Die Zeile 1 zeigt die Syntax für einen Kommentar in einer CSS-Datei. Kommentare werden in CSS durch die Zeichen /* und */ eingeschlossen. Der Regelsatz für das id-Element (Zeilen 3-4) deklariert, dass der Inhalt des Elements in Kursivschrift angezeigt wird ({font-style:italic}). Das von-Element (Zeile 6) wird in Fettschrift wiedergegeben ({font-weight:bold}). Der nachricht-Text wird in blauer Farbe angezeigt ({color:blue}).
Sie haben jetzt eine CSS-Datei und müssen sie mit dem XML-Dokument verbinden. Sie können dazu einfach eine Verarbeitungsanweisung (PI) hinzufügen, die das reservierte Schlüsselwort xml-stylesheet und zwei obligatorische Attribute einschließt. Die Syntax der PI lautet wie folgt:
<?xml-stylesheet type="text/css" href="meineDatei.css"?>
Das type-Attribut ist erforderlich, um den Typ des Stylesheets zu identifizieren, den Sie mit dem XML-Dokument verbinden. Für ein Cascading Style Sheet lautet der passende Wert für dieses Attribut immer "text/css". Der text-Abschnitt des Attributswerts ist als MIME- oder Media-Typ bekannt. Auch wenn die exakte Natur eines MIME-Typs über den Rahmen der heutigen Lektion hinausgeht, sollten Sie wissen, dass alle Stylesheets, die Sie erzeugen, aus Text bestehen, nicht aus anderen kodierten Typen wie Anwendungen, Multiparts, Nachrichten usw. Der css-Abschnitt wird Sub-Typ genannt und deklariert in diesem Fall, dass Sie ein Cascading Style Sheet erzeugen, im Gegensatz zu einem Extensible Stylesheet Language (XSL)-Stylesheet, Volltext, durch Tabs getrennte oder andere Werte.
Sie müssen auch ein href-Attribut mit einer gültigen URL einfügen, die als Wert auf die verbundene CSS-Datei zeigt. Der Wert für das href-Attribut kann eine voll qualifizierte URL sein, die auf irgendeine Stelle im Internet zeigt, oder es kann sich einfach um eine partielle URL handeln, die den relativen Standort einer lokal verfügbaren CSS-Datei anzeigt. Die Syntax der verbindenden PI, die die CSS-Datei zuweist, die Sie vorhin erzeugt haben, lautet:
<?xml-stylesheet type="text/css" href="style01.css"?>
Fügen Sie Ihrem XML-Dokument diese PI direkt vor dem Wurzelelement hinzu und speichern Sie das Resultat unter nachricht02_14.xml. Ihr XML-Dokument müsste jetzt aussehen wie das in Listing 14.3 gezeigte.
Listing 14.3: Ein XML-Dokument verbunden mit einer CSS-Datei - nachricht02_14.xml
1: <?xml version="1.0"?>
2: <!-- listing 14.3 - nachricht02_14.xml -->
3:
4: <?xml-stylesheet type="text/css" href="style01.css"?>
5:
6: <notiz>
7: <nchr>
8: <id>m1</id>
9: <von>Kathy Shepherd</von>
10: <nachricht> Denke daran, auf dem Nachhauseweg von der Arbeit Milch zu kaufen </nachricht>
11: </nchr>
12:
13: <nchr>
14: <id>m2</id>
15: <von>Greg Shepherd</von>
16: <nachricht> Ich brauche ein wenig Hilfe bei den Hausaufgaben</nachricht>
17: </nchr>
18:
19: <nchr>
20: <id>m3</id>
21: <von>Kristen Shepherd</von>
22: <nachricht> Bitte spiele heute Abend Scribble mit mir</nachricht>
23: </nchr>
24: </notiz>
Die Verarbeitungsanweisung (<?xml-stylesheet type="text/css" href= "style01.css"?>) wurde hinzugefügt (Zeile 4), um ein Stylesheet des Typs text/css zuzuordnen, das unter style01.css lokalisiert ist, dem gleichen Unterverzeichnis wie die nachricht02_14.xml-Datei auf Ihrer Festplatte.
Abbildung 14.1: nachricht02_14.xml, nach den Regeln in style01.css stilisiert, wird mit IE 6 angezeigt.
Wenn Sie die Übungen mitgemacht haben, können Sie sich nachricht02_14.xml in einem Browser ansehen, der CSS Level 1 unterstützt und Sie sollten dabei eine Ausgabe wie die in Abbildung 14.1 erhalten.
Es würde den Rahmen dieses Buchs sprengen, alle möglichen CSS-Eigenschaften anzeigen zu wollen; aber einige der beliebtesten Stileigenschaften wollen wir besprechen und in Tabellen anzeigen. Eine komplette Eigenschaftsliste finden Sie an zahlreichen Referenzorten im Web. Eine alphabetische Liste steht unter http://www.blooberry.com/ indexdot/css/propindex/all.htm zur Verfügung. Eine vollständige Liste mit Querverweisen zur Browserkompatibilität finden Sie unter http://www.webreview.com/ style/css1/charts/mastergrid.shtml. Die beste Art und Weise, die Verwendung dieser Styles zu erlernen, ist das Experimentieren mit Eigenschaften und Werten. Probieren Sie die Beispiele aus, die anhand des nachricht02_14.xml-Dokuments beschrieben werden und modifizieren Sie das Dokument style01.css, während Sie in Ihrer Lektüre voranschreiten. Am Ende dieses Abschnitts können Sie Ihr endgültiges CSS-Dokument und die aufbereitete Ausgabe mit den Beispielen im Buch vergleichen.
Die Textstyle-Eigenschaften beeinflussen die Darstellung von Text auf einer Seite. Diese Eigenschaften wirken sich auf die Textausrichtung, die Zeilenhöhe, die Leerräume zwischen den Buchstaben usw. aus. Nehmen wir zum Beispiel an, Sie wollen den Text im nachricht-Element im Browserfenster linksbündig ausrichten und unterstreichen. Wenn Sie die zuvor erzeugte CSS-Datei erneut verwenden, sieht Ihre neue CSS-Regel so aus:
nachricht
{ color:blue;
text-align:left;
text-decoration:underline}
Wenn Sie mit einer CSS-Regel mehrere Eigenschaften für ein Element festlegen, trennen Sie die einzelnen Deklarationen mit einem Semikolon voneinander ab. Die Tabelle 14.2 fasst eine Auswahl nützlicher CSS-Textstyles zusammen.
Tabelle 14.2: Ausgewählte CSS-Textstyle-Eigenschaften
Die Font-Eigenschaften, die CSS anbietet, statten Sie mit einem umfangreichen Steuersatz zum Aussehen der Zeichen aus, die verwendet werden, um den Inhalt der ausgewählten Elemente wiederzugeben. Als Sie Ihre erste CSS-Datei erzeugten, verwendeten Sie die Eigenschaften font-style und font-weight. Sie haben den Inhalt des id-Elements auf eine Wiedergabe in Kursivschrift gesetzt und den Inhalt des von-Elements auf Fettschrift. Versuchen Sie, Ihre CSS-Datei so abzuändern, dass die id-Daten in einer Kursivschrift wiedergegeben werden, die 250% der normalen Zeichenhöhe ausmacht. Um dies zu erreichen, können Sie die folgende CSS-Regel für das id-Element verwenden:
id
{ font-style:italic;
font-size:250%}
Tabelle 14.3 fasst einige der Font-Eigenschaften zusammen, die CSS zur Verfügung stellt.
Browser entscheidet (Standard) | ||
Tabelle 14.3: Ausgewählte CSS-Font-Eigenschaften
Diese Eigenschaften statten Sie mit Steuermöglichkeiten zur Schriftfarbe, zur Hintergrundfarbe und zum Einschluss von Bildern aus. Als Sie Ihre CSS-Datei in der ersten Übung heute erzeugten, haben Sie die Farbeigenschaft verwendet, um den Inhalt des nachricht-Elements in Blau wiederzugeben. Wenn Sie es nicht geändert haben, wird das von-Element fett wiedergegeben. Fügen Sie dem von-Element eine CSS-Regel hinzu, um den Inhalt des Hintergrunds auf hellblau zu setzen, was so aussieht:
von
{ font-weight:bold;
background-color:aqua}
Einige andere Hintergrund- und Farb-Eigenschaften werden in Tabelle 14.4 zusammengefasst.
0% 0% (Standard)-Position | ||
Lässt verschiedene Muster für die Hintergrundwiederholung zu | ||
Tabelle 14.4: Ausgewählte CSS-Farb- und Hintergrund-Eigenschaften
Es ist möglich, mit CSS einen Browser sichtbare Grenzlinien um den Inhalt ausgewählter Elemente zeichnen zu lassen. Fügen Sie eine CSS-Regel ein, die eine Grenzlinie um den Inhalt des von-Elements wiedergibt, die aus einer doppelten Linie besteht. Wenn Sie bei den bisherigen Beispielen mitgemacht haben, sieht Ihre CSS-Regel für das von-Element jetzt so aus:
von
{font-weight:bold;
background-color:aqua;
border-style:double}
Tabelle 14.5 fasst ausgewählte CSS-Grenzlinien-Eigenschaften zusammen.
Definiert, ob ein Abschnitt andere Abschnitte an seiner Seite verbietet | ||
Tabelle 14.5: Ausgewählte CSS-Grenzlinien-Eigenschaften
Diese Eigenschaften stellen spezielle Anweisungen an den Browser zur Verfügung, mit denen verschiedene Aspekte des Spacings und Anzeigemerkmale gesteuert werden können. Die Eigenschaft z-index zum Beispiel ist eine besondere Eigenschaft, mit der die Anordnung der Elemente gesteuert wird, wenn sie übereinander gestapelt werden. Der Stapeleffekt kann durch relative und absolute Positionierung von Elementen in CSS erreicht werden. Das Konzept der Positionierung geht über den Rahmen der heutigen Übungen hinaus, aber Sie können über die kontrollierte Positionierung von Elementen unter Verwendung von CSS bei http://www.w3.org/TR/REC-CSS2/ mehr nachlesen.
Das display:block-Eigenschafts-/Werte-Paar ist für die Stilisierung bei XML nützlich. Der Wert block weist einen Browser an, einen Zeilenumbruch vor und nach dem Elementtext durchzuführen. Erzeugen Sie in Ihrer CSS-Datei eine Regel, die veranlasst, dass alle nchr- Elemente in einem separaten Block angezeigt werden, wobei vor und nach jedem Element ein Zeilenumbruch stattfindet. Ihre neue Regel sieht so aus:
nchr
{display:block}
Wenn Sie die Übungen in diesem Abschnitt mitgemacht haben, sieht Ihr CSS-Dokument jetzt so aus wie in Listing 14.4.
Listing 14.4: Das vollständige Style-Sheet-Beispiel - style02.css
1: /* listing 14.4 style02.css */
2:
3: id
4: {font-style:italic;
5: font-size:250%}
6:
7: von
8: {font-weight:bold;
9: background-color:aqua;
10: border-style:double}
11:
12: nachricht
13: {color:blue;
14: text-align:left;
15: text-decoration:underline}
16:
17: nchr
18: {display:block}
Wenn dieses Stylesheet mit dem XML-Nachricht-Dokument verbunden wird, das Sie vorher erzeugt haben, sieht die zu erwartende Wiedergabe so ähnlich aus wie in Abbildung 14.2.
Abbildung 14.2: Das resultierende Nachricht-Dokument mit CSS-Styles, wiedergegeben vom Microsoft Internet Explorer 5.5
Wenn Sie mehrere Elemente auf die gleiche Art stilisieren wollen, können Sie alle Elemente durch Kommata getrennt als Selektor-Auflistung angeben. Wenn Sie zum Beispiel die Farbe für den Inhalt der Elemente id und von auf Rot setzen wollen, können Sie einen CSS-Regelsatz wie folgt erzeugen:
id, von
{color:red}
Sie haben gesehen, dass CSS viele Wiedergabe-Eigenschaften steuern können und recht einfache, aber effektive Resultate im Browser erzeugen. Dennoch hat der CSS-Ansatz einige Beschränkungen. Jon Bosak, Redner bei einem vom W3C gesponserten Treffen von Webentwicklern, das am 11. April 1997 abgehalten wurde, hat diese Beschränkungen festgestellt:
(Quelle: http://www.webreview.com/1997/11_28/webauthors/11_28_97_5.shtml)
Viele dieser Beschränkungen wurden durch XSL, das Thema des 15. Tages, angegangen.
Heute haben Sie einfache Cascading Style Sheets erstellt und sie verwendet, um XML für die Browserwiedergabe zu formatieren. Das ist ein Ansatz, der von den meisten wichtigen Browsern unterstützt wird und eine clientseitige Wiedergabe-Option darstellt, die relativ flexibel und einfach zu erlernen ist. Sie haben gelernt, dass CSS-Regeln als Deklarationen ausgedrückt werden, die Eigenschafts-/Werte-Paare umfassen, mit denen definiert wird, wie ein Client den Elementinhalt anzeigen soll.
Frage:
Spielt die XML-Gültigkeit eine Rolle in Hinsicht auf die Verwendung von CSS?
Antwort:
Cascading Style Sheets funktionieren beim Stilisieren aller XML-Instanzen, die
zumindest wohl geformt sind. Wenn die Dokument-Instanz ein Schema enthält,
muss dieses Dokument auch gültig sein. Das ist keine Anforderung, die CSS stellt,
sondern eine vom XML-Prozessor oder Browser kommende, der versucht, das
Dokument zu validieren, wenn es ein Schema enthält. Deshalb spielt die
Gültigkeit keine große Rolle in Hinsicht auf CSS, sie kann aber dennoch von
Bedeutung sein.
Frage:
Inwiefern erspart die Verwendung von CSS Aufwand bei der Website-Verwaltung?
Antwort:
Wenn Sie eine Website mit mehreren Dokumenten haben, die alle ähnlich
aussehen sollen, können Sie einen einzigen Stylesheet einfügen, um sie alle
identisch zu formatieren. Wenn der Seitenstil allgemein verändert werden soll,
kann man die Stylesheets manipulieren und braucht die ursprünglichen
Datendokumente nicht anzutasten. Alle neuen Dokumente, die hinzugefügt
werden, können mit dem Master-Style-Sheet verbunden werden, um ein
beständiges Aussehen die ganze Site hindurch sicherzustellen.
Die Übung soll Ihre Kenntnis dessen, was Sie heute gelernt haben, überprüfen. Die Lösungen finden Sie in Anhang A.
Stilisieren Sie Ihr Dokument cd.xml mit den Eigenschaften, die Sie heute gelernt haben, sodass es aussieht wie das in Abbildung 14.3 gezeigte.
Abbildung 14.3: Das stilisierte cd.xml-Dokument - cd14.xml - mit einem verbundenen Stylesheet - cd14.css
Um ein Resultat zu erzielen, das dem in Abbildung 14.3 ähnelt, müssen Sie einige weitere Details wissen. Diese finden Sie in der folgenden Auflistung:
