|
Lehrer Nussbaumer - XML, XSL et cetera |
|---|
XMLXSLAnwendungenEditorenParser u.a.Schnittstellen----------------- letzte änderung: 09 December 2021 ----------------- Lehrer Nussbaumers Seite ... in Arbeit ... |
CSSCSS (Cascading Style Sheets) erlauben die Gestaltung für die Ausgabe von XML-Dokumenten (bzw. ursprünglich die Gestaltung von HTML-Seiten). Die Grundidee ist, dass Inhalt (die Daten oder der Text) und Gestaltung (Schriftgröße, -farbe, -ausrichtung u.v.a.m.) getrennt sein sollten.
WebSites mit CSS gestaltenDie Eigenschaften der vorliegenden WebSite werden mit Hilfe einer externen CSS-Datei festgelegt. Dies hat mehrere Vorteile, etwa:
Der Pfad und der Name einer externen CSS-Datei wird im <head>-Teil der HTML-Datei angegeben: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Lehrer Nussbaumer - XML, XSL et cetera</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="../flessinf.css" /> <meta name="generator" content="made by hand" /> ... </head> In der CSS-Datei ("../flessinf.css") muss für jedes verwendete HTML-Element eine entsprechende Definition vorliegen: /* CSS für Informatikseiten informatik.. */
/* Alfred Nussbaumer, Stiftsgymnasium Melk */
/* Februar 2002 */
/* flessinf.css */
body {
font-family:Arial, Helvetica;
font-size:11pt;
color:#000044;
background-color:#ffffff;
}
h1, h2, h3 {
font-family:Arial, Helvetica;
color:#000000;
background-color:#eeeeee;
}
h1 { font-size:30pt }
h2 { font-size:20pt }
h3 { font-size:14pt }
h4 { font-size:12pt;
color:#000000;
background-color:#eeeeee;
font-weight:bold;
text-align:left;
text-indent:5mm;
}
table {
width:100%;
cellspacing:0;
cellpadding:0;
}
table.header {
width:100%;
font-size:20pt;
background-color:#eeeeee;
}
table.normal {
width:100%;
font-size:14pt;
}
...
Die letzten Zeilen im obigen Beispiel zeigen die Definition von "Klassen": Damit kann das Aussehen der Tabelle für die Klasse "header" und für die Klasse "normal" verschieden deklariert werden. Im HTML-Code werden diese Klassen auf folgende Weise verwendet: <table class="header">
<tr>
<th>Lehrer Nussbaumer - XML, XSL et cetera</th>
</tr>
...
</table>
XML-Daten mit CSS ausgebenXML-Daten können ähnlich zur Vorgangsweise für HTML-Dateien mit Hilfe von CSS ausgegeben werden. Für die im Abschnitt Grundlagen angegebene XML-Datei vewenden wir beispielsweise die folgende CSS-Datei: vorname {
font-family:Arial, Helvetica;
font-size:12pt;
color:blue;
}
famname {
font-family:Arial, Helvetica;
font-size:12pt;
font-weight:bold;
color:red;
}
Die XML-Datei muss noch die folgende Processing-Instruction erhalten: <?xml version = "1.0" encoding = "UTF-8"?>
<?xml-stylesheet type="text/css" href="schule.css"?>
<schule xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation = "file:///home/alfred/xml/schule.xsd"
name = "Stiftsgymnasium Melk">
...
</schule>
Damit erhalten wir diese Anzeige. Für eine Web-konforme Darstellung der XML-Daten ist allerdings die Darstellung mit Hilfe von XSL-Transformationen notwendig... Einige Grundbegriffe zu CSSStylesheets bestehen aus einer bestimmten Anzahl von Anweisungen der folgenden Form: Selektor1 {
Attribut1:Wert1;
Attribut2:Wert2;
...
}
Selektor2 {
Attribut1:Wert1;
Attribut2:Wert2;
...
}
Für HTML-Dateien entsprechen die Attribut-Namen den Attribut-Namen des durch den jeweiligen Selektor ausgewählten Elementes (vgl. obiges Beispiel). Als Werte kommen beispielsweise in Frage:
Für die Selektoren gelten u.a. die folgenden Regeln:
|