Bert Bos,
Style Activity LeiterCopyright © 1994–2022 W3C® Privacy policy
29 Februar 2000;
Zuletzt geupdatet Fr 01 Apr 2022 14:39:50 UTC
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>
Bert Bos,
Style Activity Leiter29 Februar 2000;
Zuletzt geupdatet Fr 01 Apr 2022 14:39:50 UTC