SELFHTML/Navigationshilfen  Stylesheets
	Stylesheets und HTML
	Sinn und Zweck von Stylesheets  Stylesheet-Sprachen, Versionen und Informationen  Stylesheets, Web-Browser und Anwender  CSS-Formate und CSS-Eigenschaften

Sinn und Zweck von Stylesheets

Stylesheets sind eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente. Mit Hilfe von Stylesheets können Sie beispielsweise bestimmen, dass Überschriften 1. Ordnung einen großen Schriftgrad aufweisen, in der Schriftart Helvetica, aber nicht fett erscheinen und mit einem Abstand von 1,75 Zentimeter zum darauffolgenden Absatz versehen werden. Angaben dieser Art sind mit reinem HTML nicht möglich.

Das ist aber nur der Anfang. Stylesheets bieten noch viel mehr Möglichkeiten. So können Sie HTML-Elemente - egal ob Textabsätze, Listen, Tabellenzellen oder Formulare - mit einer eigenen Hintergrundfarbe, einem eigenen Hintergrundbild (Wallpaper) oder mit diversen Rahmen ausstatten. Sie können Elemente im Anzeigefenster des WWW-Browsers positionieren. Für Print-Layouts stehen Möglichkeiten zur Definition von Seiten-Layout und Textflusskontrolle bereit. Für die akustische Wiedergabe von Web-Seiten gibt es ein ganzes Arsenal an Eigenschaften, um die künstliche Sprachausgabe zu steuern. Einige CSS-Eigenschaften sind auch in der Lage, das Anzeigefenster des Browsers zu beeinflussen, so etwa das Aussehen des Cursors. Spezielle Filter schließlich, die allerdings rein Microsoft-spezifisch sind, erlauben Grafik-Effekte bei normalen Texten, die aus Grafikprogrammen wie Photoshop bekannt sind.

Ein weiteres wichtiges Leistungsmerkmal von CSS ist die Möglichkeit, zentrale Formate zu definieren. So können Sie beispielsweise im Kopf einer HTML-Datei zentrale Definitionen zum Aussehen eines Elements notieren. Alle Elemente der entsprechenden HTML-Datei erhalten dann die Formateigenschaften, die einmal zentral definiert sind. Das spart Kodierarbeit und macht die HTML-Dateien kleiner. Sie können Ihre Stylesheet-Definitionen sogar in separaten Dateien notieren. Die Stylesheet-Dateien können Sie in beliebig vielen HTML-Dateien referenzieren. Auf diese Weise können Sie für große Projekte einheitliche Layouts entwerfen. Mit ein paar kleinen Änderungen in einer zentralen Stylesheet-Datei können Sie dann für hunderte von HTML-Dateien ein anderes Aussehen bewirken.

Stylesheets unterstützen also die professionelle Gestaltung beim Web-Design und helfen beim Corporate Design für große Projekte oder für unternehmensspezifische Layouts.

Stylesheet-Sprachen, Versionen und Informationen

Genau wie HTML wird auch CSS vom W3-Konsortium normiert. Es handelt sich also um einen firmenunabhängigen, offen dokumentierten und frei verwendbaren Standard. Für CSS gibt es genau wie für HTML eine Arbeitsgruppe beim W3-Konsortium, die sich um die Weiterentwicklung der Sprache kümmert und sich dabei dem Regelwerk zur Entstehung der so genannten Recommendations (Empfehlungen) des W3-Konsortiums unterzieht.

Wie bei HTML, so gibt es auch bei CSS Sprachversionen, die auf den Neuauflagen der Recommendations basieren. Die Version 1.0 von CSS wurde bereits im Jahr 1996 herausgegeben und 1999 nochmals überarbeitet. 1998 erhielt die Version 2.0 den Status einer Empfehlung. Mittlerweile wird an den Versionen 2.1 und 3.0 gearbeitet. In der vorliegenden Dokumentation werden die beiden ersten Versionen berücksichtigt. Folgende Symbole werden zur Auszeichnung der Sprachversionen verwendet:

Symbol	Bedeutung
	Bestandteil der ersten CSS-Version.
	Bestandteil der zweiten CSS-Version.

Es gibt mehrere Sprachen zum Definieren von Stylesheets, CSS ist nur eine davon. Aber es ist diejenige Sprache, die speziell als Ergänzung für HTML geschaffen wurde und deshalb für HTML-basierte Web-Seiten optimiert ist. CSS steht für "Cascading Style Sheets". Andere Style-Sprachen sind die "Document Style Semantics and Specification Language" (DSSSL), die für SGML konzipiert wurde und ebenso wie SGML etwas "sophisticated" ist und die mittlerweile bekanntere "Extensible Stylesheet Language" (XSL), die als Formatierungssprache für XML entwickelt wurde (zu XSL siehe auch  Darstellung von XML-Daten).

Im Web können Sie die bisherige Entwicklung und die Weiterentwicklung von CSS auf den Seiten des W3-Konsortiums verfolgen:

 Einstiegsseite zu Stylesheets beim W3-Konsortium
Über diese Seite gelangen Sie zu Informationen über CSS, XSL und DSSSL sowie über Software-Projekte rund um Style-Unterstützung.

 Einstiegsseite zu CSS beim W3-Konsortium
Über diese Seite gelangen Sie direkt zu aktuellen Nachrichten und Informationen über CSS.

Stylesheets, Web-Browser und Anwender

Netscape 4.x interpretiert viele Eigenschaften der CSS-Version 1.0 und einen Teil der Eigenschaften der CSS-Version 2.0. Der Internet Explorer kennt weite Teile der CSS-Version 1.0 bereits seit seiner Produktversion 3.0 aus dem Jahr 1996. In der Version 4.0 interpretiert er einen Teil der CSS-Version 2.0 und einige spezielle, von Microsoft eingeführte Eigenschaften. Auf dem Niveau der 4er-Generation beider Browser ist die CSS-Implementierung jedoch noch unvollständig und recht unterschiedlich, und speziell beim 4er-Netscape gibt es zum Teil noch haarsträubende Fehler. Seit der 5er-Version des Internet Explorers ist die Situation zwar etwas besser geworden, allerdings weist der Microsoft-Browser bis einschließlich Version 6 viele Schwächen auf. Opera befindet sich in Sachen CSS spätestens seit seiner 5er-Version ebenfalls auf hohem Niveau. Die umfassendste Implementierung bieten derzeit die aus dem Mozilla-Projekt hervorgegangenen Browser (Mozilla, Firefox, Camino und Netscape ab Version 6) sowie Opera 7.

Das alles entbindet Sie beim Entwerfen von Stylesheets für Ihre Web-Seiten deshalb nicht davon, alle Formate mit verschiedenen Browsern auszutesten. Die CSS-Implementierungen der Browser sind einfach noch nicht so einheitlich, dass Sie darauf vertrauen können, dass alles in jedem Browser genauso aussieht wie bei dem, mit dem Sie bevorzugt arbeiten. Ferner sollte Ihnen bewusst sein, dass die optische Wirkung von Web-Seiten auch stark von der eingesetzten Hardware abhängig ist. Web-Seiten werden nun mal nicht nur auf High-End-PCs mit 19-Zoll-Bildschirmen und 16,7 Millionen Farben gelesen. Sie werden auch mit Sub-Notebooks und Handheld-Computern gelesen und mit veralteten PCs angezeigt. Gerade die unterschiedlichen Technologien, die heute im Bereich der Bildschirme auf dem Markt sind, sorgen für sehr unterschiedliche Wirkungen etwa von Farben. Was auf dem einen Bildschirm als beige wirkt, sieht auf dem nächsten aus wie schweinchenrosa. Zwar lassen sich Bildschirme kalibrieren, doch Sie können ja schlecht vom Anwender verlangen, dass er vor dem Betrachten Ihrer Web-Seiten erst seinen Bildschirm neu einstellt. Immerhin besteht ab CSS 2.0 die Möglichkeit, unterschiedliche CSS-Formate für unterschiedliche Ausgabemedien zu definieren. Doch alle Probleme lassen sich damit auch nicht beseitigen.

Bedauerlich ist weiterhin, dass Schriftgrößenangaben in CSS am Bildschirm leider nicht zu einheitlichen Ergebnissen führen. Während im Print-Bereich eine 10-Punkt-Schrift immer gleich groß ist, weil nun mal definiert ist, wie groß ein Punkt ist, werden solche Angaben am Bildschirm in Pixel umgerechnet. Dabei ist aber wiederum nicht festgelegt, wie groß ein Pixel ist. Und nicht einmal die Umrechnungsfaktoren sind die gleichen. So rechnet etwa Windows Schriftgrößenangaben anders in Pixel um als etwa grafische Oberflächen unter Linux oder als das Macintosh-Betriebssystem. Kurzum - vieles in CSS steht nur genau in der Datei, aber die Ergebnisse am Bildschirm können doch recht unterschiedlich und nicht selten unbefriedigend sein.

Ein ganz wichtiger Aspekt beim Entwerfen von Stylesheets für Web-Seiten sind aber auch die Menschen, die diese Web-Seiten als Besucher betrachten sollen. Es gibt nicht wenige Menschen, die Farben und Formen oder kleine Schrift aufgrund visueller Schwächen nur eingeschränkt wahrnehmen können. Was Sie beim Designen vielleicht als "edel" empfinden, empfinden solche Menschen nur noch als "unleserlich". Und "unleserlich" bedeutet: Sie haben wieder einen Besucher weniger auf Ihren Seiten. Stylesheets verführen aufgrund ihrer Möglichkeiten leicht zur Verwendung ungewöhnlicher Schriftarten oder zu Dingen wie Ton-in-Ton-Farbgebung. So "schön" das auch aussehen mag - es kann je nach Anzeigegerät und visuellem Auflösungsvermögen beim Betrachter schnell auf Kosten der "Usability" und damit der Zweckmäßigkeit gehen. Andererseits können Sie Stylesheets auch explizit dafür nutzen, um Seiten für sehschwache Menschen zu optimieren. Ordentliche Farbkontraste, Schriftarten im normalgroßen Bereich, übliche Schriftweiten und Zeilenhöhen, Vermeidung von kritischen Farbkombinationen wie rot/grün bei Hintergrund/Vordergrund - das sind Eigenschaften, die gut besuchte Web-Seiten aufweisen sollten.

Wenn Sie Web-Seiten gestalten, müssen Sie daraus Ihre eigenen Konsequenzen ziehen. Stylesheets erlauben Ihnen völlig neue Möglichkeiten beim Web-Seiten-Layout. Je intensiver Sie Ihre Layouts jedoch von ungewöhnlichen Stylesheet-Effekten abhängig machen, desto problematischer können die Seiten auf schwacher Hardware oder bei sehschwachen Menschen wirken. Zwar gibt es außer textbasierten Browsern wie Lynx kaum noch Browser mit nennenswerter Verbreitung, die Stylesheets gar nicht unterstützen. Doch bei den 4er-Versionen von Netscape, die durchaus noch verbreitet sind, ist leider eine verhängnisvolle Abhängigkeit einprogrammiert: wenn der Anwender dort JavaScript deaktiviert, zeigt der Browser auch keine Stylesheets an. Der Grund dafür ist, dass im Netscape-Browser CSS ursprünglich direkt vom JavaScript-Interpreter umgesetzt wurde, weshalb es in Netscape 4.x auch eine heute veraltete Zwitter-Syntax namens JSSS gibt, die CSS-Definitionen mittels JavaScript ermöglicht. Einen Vorteil hat diese Spezialität von Netscape 4.x andererseits: wenn Sie dort JavaScript deaktivieren, können Sie Ihre CSS-gestylten Web-Seiten ohne CSS-Unterstützung testen. Bei jüngeren Versionen von Netscape lässt sich CSS auch unabhängig von JavaScript deaktivieren. Zu diesem "Härtetest" sollten Sie sich auf jeden Fall zwingen.

CSS-Formate und CSS-Eigenschaften

Stylesheets bestehen aus Formaten, die Sie für bestimmte HTML-Elemente oder für eine bestimmte Auswahl von HTML-Elementen definieren. Zum Auswählen einer bestimmten Gruppe von HTML-Elementen, für die ein Format gelten soll, gibt es in CSS die Syntax der so genannten Selektoren. CSS-Formate lassen sich entweder in einem zentralen Style-Bereich definieren, in einer externen CSS-Datei oder direkt im einleitenden Tag eines HTML-Elements.

CSS-Formate bestehen aus einer oder mehreren Eigenschaften und Wertzuweisungen an diese Eigenschaften. So können Sie beispielsweise ein Format für Überschriften 3. Ordnung definieren, bei dem Sie für Eigenschaften wie Schriftgröße, Schriftfarbe und Absatz-Abstand entsprechende Werte bestimmen.

CSS-Begriffe

Die nachfolgende Regel setzt sich aus dem Selektor, der die gewünschten Elemente selektiert (auswählt) und einer Eigenschaft sowie dem ihr zugewiesenen Wert zusammen:

Selektor { Eigenschaft:Wert; }

Die Kombination aus Eigenschaft und Wert wird als Deklaration bezeichnet.

Im Kapitel  CSS-Formate definieren wird beschrieben, an welchen Stellen Sie CSS in HTML einbinden können, wie die Selektion von HTML-Elementen funktioniert und welche generellen Regeln für Format-Definitionen gelten. Das Kapitel  CSS-Eigenschaften beschreibt dagegen systematisch die einzelnen möglichen Eigenschaften für die Element-Formatierung, die Sie innerhalb von Formaten notieren können, und mögliche Wertzuweisungen für diese Eigenschaften. Im Kapitel  CSS-basierte Layouts schließlich wird gezeigt, wie die Möglichkeiten von CSS praktisch zur Gestaltung von Web-Seiten genutzt werden können.

	Stylesheets in HTML einbinden
	HTML-Varianten
SELFHTML/Navigationshilfen  Stylesheets

© 2005  Impressum

© 2005  Impressum