Skip to main content

CSS zum Stilisieren von XML-Dokumenten verwenden

Javascript Tutorial - Custom File Upload Button | HTML + CSS (Juni 2025)

Javascript Tutorial - Custom File Upload Button | HTML + CSS (Juni 2025)
Anonim

Das Erstellen eines XML-Dokuments, das Schreiben der DTD und das Analysieren mit einem Browser ist in Ordnung, aber wie wird das Dokument angezeigt, wenn Sie es anzeigen? XML ist keine Anzeigesprache. Dokumente, die mit XML geschrieben wurden, haben überhaupt keine Formatierung.

Wie kann ich mein XML anzeigen?

Der Schlüssel zum Anzeigen von XML in einem Browser sind Cascading Style Sheets. Mit Stylesheets können Sie jeden Aspekt Ihres XML-Dokuments definieren, von der Größe und Farbe Ihres Texts bis zum Hintergrund und der Position Ihrer Nicht-Textobjekte.

Angenommen, Sie haben ein XML-Dokument:

>

Judy

Layard

Jennifer

Brendan

Wenn Sie dieses Dokument in einem XML-fähigen Browser wie Internet Explorer anzeigen möchten, wird Folgendes angezeigt:

Judy Layard Jennifer Brendan

Aber was wäre, wenn Sie zwischen den übergeordneten und untergeordneten Elementen unterscheiden wollten? Oder machen Sie sogar eine visuelle Unterscheidung zwischen allen Elementen im Dokument. Mit XML ist das nicht möglich, und es ist keine Sprache, die zur Anzeige verwendet werden soll.

Glücklicherweise ist es jedoch einfach, Cascading Style Sheets oder CSS in XML-Dokumenten zu verwenden, um zu definieren, wie diese Dokumente und Anwendungen angezeigt werden sollen, wenn sie in einem Browser angezeigt werden. Für das obige Dokument können Sie den Stil jedes Tags auf dieselbe Weise wie ein HTML-Dokument definieren.

In HTML möchten Sie beispielsweise den gesamten Text innerhalb von Absatz-Tags () mit der Schriftart "Verdana", "Genf" oder "Helvetica" und der Hintergrundfarbe Grün definieren. Um dies in einem Stylesheet so zu definieren, dass alle Absätze so aussehen, schreiben Sie:

p {

Schriftfamilie: Verdana, Genf, Helvetica;

Hintergrundfarbe: # 00ff00;

}

Die gleichen Regeln gelten für XML-Dokumente. Jedes Tag in XML kann im XML-Dokument definiert werden:

Familie {

Farbe: # 000000;

}

Elternteil

Schriftfamilie: Arial Black;

Farbe: # ff0000;

Grenze: fest 5px;

Breite: 300px;

}

Kind {

Schriftfamilie: Verdana, Helvetica;

Farbe: # cc0000;

Grenze: fest 5px;

Rahmenfarbe: # cc0000;

}

Nachdem Sie Ihr XML-Dokument erstellt und Ihr Stylesheet geschrieben haben, müssen Sie sie zusammenstellen. Ähnlich wie der Linkbefehl in HTML setzen Sie eine Zeile oben in Ihr XML-Dokument (unter der XML-Deklaration) und teilen dem XML-Parser mit, wo das Stylesheet zu finden ist. Zum Beispiel:

Wie oben erwähnt, sollte diese Zeile unterhalb der Deklaration <? Xml?>, Jedoch vor einem der Elemente im XML-Dokument stehen.

Zusammenfassend würde Ihr XML-Dokument lauten:

>

Judy

Layard

Jennifer

Brendan