Bert Bos, Style
Activity LeiterCopyright © 1994–2025 W3C® Privacy policy
29 Februar 2000;
Zuletzt geupdatet So 16 Feb 2025 05:41:09 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 So 16 Feb 2025 05:41:09 UTC