Homepage > Catalog > Computer Science - Software

Cascading Style Sheets in Verbindung mit XML

Name: Cascading Style Sheets in Verbindung mit XML
Price: 15.99 EUR
Availability: InStock
Author: Daniel Wittwer
ISBN: 978-3-638-10724-2

Term Paper, 2001

35 Pages, Grade: 1,3

Daniel Wittwer (Author)

Excerpt

Inhaltsverzeichnis:

1. Einführung

2. Historie der Style Sheets in Verbindung zu Markup-Sprachen

3. Vor und Nachteile von Style Sheets
3.1. Vorteile von Style Sheets
3.2. Nachteile von Style Sheets

4. Vergleich der Darstellung in verschiedenen Browsern

5. Einbinden von Style Sheets
5.1. Wo befinden sich die Style Sheets?
5.2. Was bedeutet kaskadieren?
5.3. Wie funktioniert das Style Sheet?
5.4. Einsetzen von HTML-Tags

6. Schriftformatierung
6.1. Schriftfamilie
6.2. Schriftstil
6.3. Schriftvariante
6.4. Schriftgröße
6.5. Schriftgewicht
6.6. Schrifteinstellung gesammelt festlegen

7. Textformatierung
7.1. Zeichen und Wortabstand
7.2. Schriftdekoration
7.3. Schrifttransformation
7.4. Textausrichtung
7.4.1. Texteinzug
7.4.2. Horizontale Ausrichtung
7.4.3. Vertikale Ausrichtung
7.4.4. Positionierung von Elemente
7.4.5. Horizontale und Vertikale Ausrichtung von Elemente

8. Blockformatierung
8.1. Blockausrichtung des Elementes
8.2. Höhe und Breite von Elementen
8.3. Bildlaufleiste einbinden
8.4. Blockausrichtung innerhalb eines Elementes

9. Rahmen
9.1. Rahmenbreite
9.2. Rahmenfarbe
9.3. Rahmentyp oder Stilart

10. Grafische Darstellung von Elementen
10.1. Schriftfarbe
10.2. Hintergrund
10.2.1. Hintergrundfarbe festlegen
10.2.2. Hintergrundbild einbinden
10.2.3. Hintergrundbild mit Bildlaufleiste
10.2.4. Einfaches oder mehrfaches Hintergrundbild
10.2.5. Hintergrund gesammelt festlegen
10.3. Reihenfolge der Elemente festlegen

11. Vergleich XML in Verbindung mit CSS und XSL
11.1. Was ist XSL?
11.2. Aufbau XSL

12. Fazit

Anhang A
A Glossar
B Literaturverzeichnis
C Internetverzeichnis

1. Einführung

Im World Wide Web steht die Repräsentation von Information im Vordergrund. Dazu können die vorhandenen Daten zur Visualisierung mittels S tyle S heets formatiert werden. Style Sheets werden im deutschen Sprachraum auch als Format- oder Stilvorlagen bezeichnet. Sie sind in einer definierten Stilsprache geschriebene Dokumente, die angeben, wie eine Dokumentenseite gestaltet sein soll und wie bestimmte Elemente im Browser dargestellt werden. Style Sheets haben ihren Ursprung in der Entwicklung von Markup-Sprachen, daher gibt es auch verschiedene Möglichkeiten sie umzuwandeln. Markup-Sprachen sind Auszeichnungssprachen. Eine Auszeichnungssprache ist eine Syntax, mit deren Hilfe man die Struktur von Dokumenten kennzeichnen kann. Die bekanntesten Style Sheet Sprachen sind: D ocument S tyle S emantics and S pecification L anguage (DSSSL), C ascading S tyle S heets (CSS) und e X tensible S tyle Sheet L anguage (XSL). Diese Fallstudie wird auf die Anwendung von Cascading Style Sheets in Verbindung e X tensible M arkup L anguage (XML) ausgerichtet, da die Möglichkeiten von CSS im Vergleich zu Style Sheets Sprachen recht überschaubar sind. Aus diesem Grund geht der Fokus dieser Fallstudie darauf ausgerichtet.

2. Historie der Style Sheets in Verbindung zu Markup-Sprachen

Nicht erst seit dem Erfolg des World Wide Webs ist es wichtig, Informationen klar und übersichtlich darzustellen. Bereits im Jahre 1967 entwickelte William Turncliffe ein Konzept, das die Trennung von Information eines Dokumentes und dessen Layout vorsieht. Er legte damit zusammen mit Stanlye Riche „den Grundstein zur Entwicklung der Markup-Sprachen.“^[1]

1978 wurde das A merican N ational S tandards I nstitute (ANSI) gegründet. Anlass dazu war die Idee einen Standard zu entwickeln, der auf der von IBM 1969 entwickelten G eneralized M arkup L anguage (GML) basiert. Ergebnis dieser Entwicklung war die S tandardized G eneralized M arkup L anguage (SGML), eine Metasprache, die zur Beschreibung von Markup-Sprachen dient. „Auch XML ist eine Metasprache, die eng mit SGML und H yper t ext M arkup L anguage (HMTL) verwandt ist“^[2].

Abb.: 2-1 SGML, XML, HTML und ihre Komponenten

Abbildung in dieser Leseprobe nicht enthalten

Quelle: www.it.fht-esslingen.de

Die erste Sprache für die Stilbeschreibung war F ormating O utput S pecification I nstance (FOSI), die zum Teil erfolgreich im amerikanischen Verteidigungsministerium eingesetzt wurde, sich aber auf Grund ihrer Komplexität nie wirklich durchsetzen konnte.

Um zu einer Formatierung von Dokumenten zu gelangen, wurde ein Standard für die Druckformatierung eingeführt, die Document Style Semantics and Specification Language, welche Nachfolger von FOSI ist. Das Ziel von DSSSL war es, eine allgemeine Stilbeschreibung für alle möglichen Dokumente zu realisieren. Mit DSSSL steht eine extrem leistungsfähige Markup-Sprache zur Verfügung, die jedoch für Web-Anwendungen viel zu kompliziert ist. Um die Komplexität zu verringern, wurde eine abgespeckte Version angeboten, DSSSL-Lite. Sie wurde schließlich im Dezember 1995 als Internet-Variante DSSSL-o (o nline) veröffentlicht und im August 1996 verbessert. DSSSL-o wurde zur Grundlage der ersten e x tensible S tyle-Version (XS-Version). Diese ist heute unter dem Namen E x tensible S tyle sheet L anguage (XSL) ein Begriff. Der Mitherausgeber der XML-Sprachspezifikation, Jon Bosak stellte im Mai 1997 eine persönliche Skizzierung des Stilabschnitts für die XML-Spezifikation zur Verfügung. Im August 1997 erschien dann eine stark verbesserte Version von XS. Dabei handelte es sich um die erste XSL-Version, welche die gesamte DSSSL-o beinhaltet, jedoch auch neue Objekte und Eigenschaften, die die gesamte Funktionalität unterstützten.

Abb.: 2-2 Historie von Markup-Sprachen

Abbildung in dieser Leseprobe nicht enthalten

Quelle: XML-Magazin I, 2000 S.80

Trotz der fortschreitenden Entwicklung von XML sollte man nicht vergessen, dass HTML eine eigene Stilsprache besitzt, die C ascading S tyle S heets (CSS). Diese Stilsprache kann in den XML-Code implementiert werden. Cascading Style Sheets sind darauf ausgelegt, die Markup-Sprache im Browser auszugeben. Daher ist die Kombination XML und CCS besonders geeignet.

Es gibt zwei Versionen von Cascading Style Sheets. Am 17. Dezember 1996 wurde vom W orld W ide W eb C onsortium (W3C) die Empfehlung zu CSS Level 1 herausgegeben^[3]. Das W3C ist neben der I nternet E ngineering T ask F orce (IETF) eine der beiden Organisationen, die Standards für das Internet entwickeln. Das W3C hat den XML-Standard festgelegt. Bereits zwei Jahre darauf im Mai1998 gab das W3C die Version des CSS Level 2 frei^[4].

3. Vor und Nachteile von Style Sheets

3.1. Vorteile von Style Sheets

Stylesheets können für fast alle Markup-Sprachen genutzt werden. Das Grundkonzept von Style Sheets beruht auf der Trennung von Inhalt und Darstellung elektronisch gespeicherter (Hyper-) Textdokumente. Dadurch ergeben sich eine Reihe von Vorteilen aber auch ganz neue Möglichkeiten. Style Sheets sind in einem kompakten und vom W3C standardisiertem Code vorgegeben. Daraus resultiert, dass Formatangaben für gleichartige Elemente innerhalb eines Dokuments nur einmal angegeben werden müssen. Da der Inhalt und der Stil in den ausgegebenen Dokumenten sich von Zeit zu Zeit ändert, erreicht man durch den Einsatz von Stylesheets eine bessere Wartbarkeit. Anstatt wie ursprünglich bei traditionellen HTML-Dokumenten in jedem einzelnen Dokument der Seite die Codierung für das Layout zu ändern, müssen nur noch Änderungen an den Style Sheets vorgenommen werden. Das Erscheinungsbild kann somit mit einfachen Mitteln konsistent gehalten werden. Durch die Konzentration der Formatierungsanweisungen wird gewährleistet, dass auch alle Formatierungen einem Standard genügen und eine große Anzahl von Eingabefehlern vermieden werden. Dies ist insbesondere bei großen Websites sehr vorteilhaft. Dieser Vorteil gilt natürlich bei allen Dokumenten, die mit der Stilvorlagen verbunden sind. Die individuelle Anpassung von Style Sheets wird „Kaskadierung“ genannt, auf die später noch hingewiesen wird.

3.2. Nachteile von Style Sheets

Problem bei der Nutzung von Stylesheets können auch durch die verschiedenen Browsertypen auftreten. Selbst die aktuellen Browserversionen bieten noch keine vollständige und fehlerfreie Integration. Somit sehen die Seiten auf den verschiedenen Browsern noch sehr unterschiedlich aus. Einige Möglichkeiten können noch gar nicht genutzt werden. Von allen Style Sheets in Verbindung mit XML sind hierbei die Cascading Style Sheets diejenigen, die am weitesten browserkompatibel sind. Das CSS geht davon aus, dass Schriftzeichen in einer horizontalen Folge verwendet werden. Dadurch schließt es jedoch automatisch japanisch, chinesisch und andere vertikale Schriften aus.

4. Vergleich der Darstellung in verschiedenen Browsern

Abbildung in dieser Leseprobe nicht enthalten

5. Einbinden von Style Sheets

Um eine Trennung von Inhalt und Formatierungsinformationen in einem XML-Dokument zu erreichen, benutzt man in XML-Code zum einen C ascading S tyle S heets (CSS) und zum anderen die E x tended S tyle L anguage (XSL). Erst ab der Version CCS 2 wird das Einbinden für XML interessant, da in der vorherigen Version CSS 1 einige Attribute nicht funktionsfähig sind.

Abb.:5-1 Einbindung von CSS in die XML-Datei

Abbildung in dieser Leseprobe nicht enthalten

5.1. Wo befinden sich die Style Sheets?

Die CSS ist eine einzelne Datei die durch den Ausdruck

[?xml-Stylesheet href=“name.css“ type=“Text/CSS“?]

in die XML-Datei eingebunden wird und die Endung „css“ besitzt. Es können Verweise von mehreren Dokumenten zu diesem zentralen Style Sheet erfolgen. Dadurch können alle anderen Dokumente mit dem Verweis auf das ursprüngliche Style Sheet auch dessen Formatanweisungen übernehmen. Man spricht dann von kaskadiert.

5.2. Was bedeutet kaskadieren?

Den wahren Nutzen von Cascading Style Sheets erkennt man erst bei größeren Websites. Der kaskadierende Effekt von CSS kann hier Abhilfe schaffen, denn es wird möglich ein Style Sheet auszulagern. Man kann Style Sheets importieren, um es in ein anderes Dokument einzubringen. Diese Vorgehensweise ist die Grundlage für die kaskadierenden Style Sheets. Betrachtet man die Style Sheet-Hierarchie, steht an der Spitze ein Core Style Sheet^[5]. In diesem werden grundsätzliche Dinge wie Schrifttyp, Farben von Hintergrund und Text etc. definiert. Das Core Style Sheet gilt für alle nachfolgenden Style Sheets. Alle untergeordneten Style Sheets können aus dem Core Style Sheet Inhalte importieren und es um Formatanweisungen wie eine Tabelle, oder eine Anweisung zur Darstellung von farblich unterlegten Produktnamen erweitern. Diese Kette lässt sich theoretisch unendlich fortführen, wobei jede Veränderung in einem Style Sheet auf alle folgenden Style Sheets „abfärbt“, was somit Effektivitätssteigerung darstellt.

5.3. Wie funktioniert das Style Sheet?

Wie bereits erwähnt verweist die XML-Datei auf eine CSS. Erst durch diese Einbinden gibt der Browser das Dokument formatiert wieder. Eine CSS-Datei muss jedoch nicht bestehen. Fehlt die Einbindung, so wird das Dokument in seinem reinen Quellcode dargestellt. Betrachtet man folgendes Beispiel, so ist es leichter die Funktionsweisen von CSS zu verstehen.

Abbildung in dieser Leseprobe nicht enthalten

Abb.: 5-1 Syntax von CSS

Quelle: F. Harms/ D. Koch/ O. Kürten (Das große Buch XML, 2000) S.322

Absatz1{ background-color: #0000FF; font-weight: bold; font-size: 23; color: blue; position: absolute }

Diese Anweisung bedeutet, das jeder Text innerhalb des XML-Dokumentes, der von den „Absatz1“-Tags eingerahmt wird, diesen Formatanweisungen unterliegt. Kommen nun neue Dokumente zur Website hinzu, gilt es nur noch darauf zu achten, dass die Bezeichnungen der Tags gleich bleiben. Somit kann eine Anweisung für eine ganze Website genutzt werden.

5.4. Einsetzen von HTML-Tags

Es können ebenso HTML-Tags in XML-Dokumente eingesetzt werden, die der Browser versteht. Nutzbar sind nicht nur HTML-4.0-Standard-Tags, sondern auch einige spezifische Tags, wie z.B. <Marquee>, das jedoch nur im Internet Explorer funktioniert (Lauftext, der von links nach rechts durchläuft)^[6].

6. Schriftformatierung

6.1. Schriftfamilie

Die Schriftfamilie, auch als »font-family« bezeichnet, stellt den Zeichensatz dar, der in Form von generischen Schriftennamen oder Familiennamen dargestellt wird. Dieses Attribut lässt sich auf alle Elemente anwenden^[7], wobei die Darstellung des Zeichensatzes vom Browser abhängig ist. Daher ist es sinnvoll mehrere Schriftfamilien anzugeben, die durch ein Komma getrennt sind. Ist die erste Schriftfamilie nicht vorhanden, so wird die zweite font-family verwendet^[8].

Abb.: 6-1 Textformatierung

Abbildung in dieser Leseprobe nicht enthalten

Quelle: F. Harms/ D. Koch/ O. Kürten (Das große Buch XML, 2000) S.338

6.2. Schriftstil

Der Schriftstil wird durch das Attribut »font-style« festgelegt. Für font-style können nur drei Werte angegeben werden. Diese Werte sind Normal, Italic, Oblique.

Abb.: 6-2 Schriftstil

Abbildung in dieser Leseprobe nicht enthalten

Quelle: F. Harms/ D. Koch/ O. Kürten (Das große Buch XML, 2000) S.339

6.3. Schriftvariante

In dem Attribut »font-variant« werden alle kleinen Buchstaben in der gleichen Größe wie die Großbuchstaben über das Attribut »small-caps« dargestellt. Ansonsten wird über den Wert »normal« alles in der gewöhnlich Form dargestellt.

6.4. Schriftgröße

Mit dem Attribut »font-size« wird die Schriftgröße bestimmt. Sie wird exakt in pt (Punktgröße) angegeben. Beispiel: font-size: 25pt.

6.5. Schriftgewicht

Mit dem Attribut »font-weight« wird festgelegt, wie fett ein Buchstabe bzw. Text dargestellt werden soll. Mögliche relationale Werte sind: lighter, normal, bold, bolder. Mögliche Absolute Werte sind: 100, 200, 300, 400, 500, 600, 700, 800, 900. Das Attribute normal ist identisch mit 400 und bold mit 700. Werden die absoluten Werte nicht eingehalten, so stellt der Browser den Text in der Standardform dar.