Bert Bos, Style Activity
LeiterCopyright © 1994–2013 W3C®
29 Februar 2000;
Zuletzt geupdatet Fr 15 Feb 2013 17:49:54 CET
Dies ist eine Übersetzung. Es ist möglich, daß sie Fehler enthält oder veraltet ist im Vergleich zur englischen Version. Übersetzer: A. Friedrich
Die CSS2 Empfehlungen enthalten eine kurze Einführung wie man CSS mit XML verwenden kann (lesen Sie auch § 2.2). Zu dem Zeitpunkt als CSS entwickelt wurde waren die Spezifikationen für XML Styles noch nicht fertig. Im Folgenden erhalten Sie nun ein entsprechendes Tutorial. Nehmen Sie bitte zur Kenntnis dass unsere Beispiele hier CSS verwenden, aber sich die Regeln in den meissten Fällen auch auf XSL anwenden lassen.
Tip: Testen Sie es in Ihrem Browser
HTML besitzt ein link
Element um externe Style Sheets zu verlinken, aber nicht jedes
XML-basierende Format besitzt solche Elemente. Existiert ein
solches nicht können Sie dennoch externe Style Sheets durch die
Nutzung von xml-stylesheet Verarbeitungs
Instruktionen (processing instructions) wie dieser verwenden:
<?xml-stylesheet href="my-style.css"?> ... der Rest des Dokumentes...
Diese processing instructions (PI) müssen vor dem ersten Tag des
Dokumentes verwendet werden. Ein type="text/css" ist
nicht notwendig, aber es hilft dem Browser: wenn er kein CSS
verarbeiten kann muss er nichts herunterladen.
Genau wie beim link Element in HTML können mehrere
xml-stylesheet PIs mit verschiedenen Attributen für
Typ, Medium und Titel verwendet werden.
Hier ist ein grösseres Beispiel. Nehmen wir an Sie haben drei Style Sheets, einen welcher den Basis Display Type eines jeden Elementes festlegt (inline, block, list-item, etc.) und zwei andere welche sich um die Farben und Abstände kümmern. Die zwei letzten sind gegenseitige Alternativen und der Leser des Dokumentes kann entscheiden welchen von Beiden er nutzen möchte. Mit Aussnahme dass das Dokument gedruckt werden soll, in diesem Fall wird immer der letzte Style genutzt. Hier ist der gemeinsame Style Sheet:
/* common.css */
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
Dies ist einer der alternativen Style Sheets, gespeichert in einer Datei namens “modern.css”:
ARTICLE { font-family: sans-serif;
background: white; color: black }
AUTHOR { margin: 1em; color: red }
HEADLINE { text-align: right;
margin-bottom: 2em }
PARA { line-height: 1.5;
margin-left: 15% }
INSTRUMENT { color: blue }
Und hier der Andere, genannt “classic.css”:
ARTICLE { font-family: serif;
background: white; color: #003 }
AUTHOR { font-size: large;
margin: 1em 0 }
HEADLINE { font-size: x-large;
margin-bottom: 1em }
PARA { text-indent: 1em;
text-align: justify }
INSTRUMENT { font-style: italic }
Das damit verbundene XML Dokument sieht folgendermassen aus:
<?xml-stylesheet href="common.css"?>
<?xml-stylesheet href="modern.css"
title="Modern" media="screen"
type="text/css"?>
<?xml-stylesheet href="classic.css"
alternate="yes" title="Classic"
media="screen, print" type="text/css"?>
<ARTICLE>
<HEADLINE>Fredrick the Great meets
Bach</HEADLINE>
<AUTHOR>Johann Nikolaus Forkel</AUTHOR>
<PARA>
One evening, just as he was
getting his
<INSTRUMENT>flute</INSTRUMENT>
ready and his musicians were
assembled, an officer brought him a
list of the strangers who had arrived.
</PARA>
</ARTICLE>
Für weitere Details lesen Sie bitte in den W3C Empfehlungen “Associating Style Sheets with XML documents”
Tip: Testen Sie es in Ihrem Browser
HTML besitzt ein style Element welches es erlaubt
Style Sheets direkt in der HTML Datei einzubinden. Ohne der
Notwendigkeit einer externen Datei. In manchen Fällen ist das der
eimfachere Weg, insbesondere dann wenn der Style Sheet speziell nur
für dieses Dokument verwendbar ist.
Die meissten XML-basierten Formate besitzen kein solches Element. Jedoch lässt dich die gleiche PI welche externe Style Sheets verlinkt auch zum Einbetten der Styles selbst im Dokument verwenden. Zum gegenwärtigen Zeitpunkt, Fabruar 2006, gibt es noch immer technische Probleme damit und es existiert keine formelle Spezifikation dafür. Zum Beispiel:
<?xml-stylesheet href="#style"
type="text/css"?>
<ARTICLE>
<EXTRAS id="style">
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA {
display: block }
EXTRAS { display: none }
</EXTRAS>
<HEADLINE>Fredrick the Great meets
Bach</HEADLINE>
...
</ARTICLE>
In diesem Fall muss ein type="text/css" Eintrag
vorhanden sein, ansonsten muss der Browser die Style Sheet Sprache
erraten. Die xml-stylesheet PI verweist nun nicht auf
eine externe Style Sheet Datei, sonden auf ein
xml-stylesheet Element im Dokument selbst. Dieses
Element wird von einem id Attribut idendifiziert
welches als Ziel für diese Verlinkung dient. (Je nach dem
verwendeten XML Format kann das id Attribut auch
woanders aufgerufen werden oder ganz und gar fehl am Platze sein.)
Die W3C Empfehlung “die Verwendung von Style Sheets mit XML Dokumenten” definiert nicht die Nutzung von eingebetteten Style Sheets im XML Dokument, obwohl es als eine sinnvolle Möglichkeit erscheint URL Fragmente (beginnend mit “#”) zu erlauben. Zum gegenwärtigen Zeitpunkt, Frühjahr 2006, existieren noch immer ungelöste Probleme ohne veröffentilchte Spezifikation. Es handelt sich dabei um die folgenden Probleme:
type Attribut notwendig. Es ist unklar was
passiet wenn dieses Attribut weggelassen wird: wird der Style
Sheet ignoriert? Wird angenommen es handele sich um CSS? Existiert
irgendein Algorithmus um die Sprache herauszufinden?
<ARTICLE> beginnt stellt kein korrektes CSS
dar. Es scheint also als würde eine Extraregel benötigt werden
welche ein Fragment Idendifikator in einem Style Sheet dafür
verwendet um auf den Inhalt eines Elementes mit Hilfe eines PI zu
verweisen.
type Attribut sagt nur etwas über den
Dokumententyp von einem der beiden Dokumente aus - somit kann der
Browser nicht wissen ob er den Style Sheet verarbeiten kann. Es
ist ja noch nicht einmal definiert ob das type
Attribut nun den Typ des externen Dokumentes oder den des da
eingebetteten Style Sheets definiert.
xml:id
und wenn das Dokument Attribute diesen Namens enthält dann ist es
sehr wahrscheinlich dass ein URL Fragment darauf verweisst.
Existiert ein solches Attribut jedoch nicht muss der Browser
selbst versuchen herauszubekommen welches Attribut als ID
verwendet wird. Wenn das Dokument einen DOCTYPE Eintrag am
Seitenanfang enthält kann die damit verbundene DTD
heruntergeladen werden in welcher die Attribute angegeben sind.
Aber Browser sind vielleicht nicht in der Lage die DTD
herunterzuladen oder es existiert kein DOCTYPE Verweis.
HTML erlaubt auch die Verwendung von Styles welche direkt
innerhalb eines Elementes verwendet werden können mit Hilfe des style
Attributes. Die meissten XML-basierten Formate besitzen kein
solches Attribut, auch wenn manche einige HTML-Möglichkeiten
(modules) innerhalb des Dokumentes gestatten.
Tip: Testen Sie es in Ihrem Browser
Das class
Attribute welches das Erzeugen von Klassen für Elemente
innerhalb des HTML Dokumentes erlaubt ist für den Grossteil der
XML basierten Formate nicht verfügbar. Natürlich ermöglichst CSS
die Auswahl von allen Attributen auch ohne das class
Attribut, die Verwendung ist aber dann wesentlich unbequemer.
Hier ein Beispiel. Existiert ein class Attribut und
das Dokumentenformat definiert dass das Ganze als HTML
interpretiert werden soll kann die Schreibweise mit dem Punkt
verwendet werden. (Von daher wird dieses spezielle Beispiel nicht
funktionieren da es in HTML kein <doc> Element gibt welchem
ein class Attribut zugewiesen werden könnte
<?xml-stylesheet href="#s1"
type="text/css"?>
<doc>
<s id="s1">
s { display: none }
p { display: block }
p.note { color: red }
</s>
<p>Some text... </p>
<p class="note">A note... </p>
</doc>
Wenn das Dokumenten Format nicht angegeben ist erzeugt
class eine Unterklasse und der längere Selektor
"[ ]" muss verwendet werden:
<?xml-stylesheet href="#s1"
type="text/css"?>
<doc>
<s id="s1">
s { display: none }
p { display: block }
p[class~=note] { color: red }
</s>
<p>Some text... </p>
<p class="note">A note... </p>
</doc>
Existiert kein class Attribut aber irgendetwas
anderes muss dennoch "[ ]" verwendet werden:
Testen Sie es in Ihrem Browser
<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
<s id="s1">
s { display: none }
p { display: block }
p[warning="yes"] { color: red }
</s>
<p>Some text... </p>
<p warning="yes">A note... </p>
</doc>