Cascading Stylesheets Maaaannn XD check this out~
CSS Stylesheets
by Stefan Tihanyi, dem Prinzen des Remstals ^_^
Stylesheet ist in der Informationstechnik eine Beschreibungssprache.
Ein Stylesheet ist am ehesten mit einer Formatvorlage zu vergleichen. Grundidee hierbei ist die
Trennung von Information (Daten) und Darstellung. Das Stylesheet interpretiert die zugewiesenen
Daten (Text, Tabellen, Grafiken etc.) und formatiert sie (z.B. für die Bildschirmausgabe) entsprechend
der vorgegebenen Regeln. Mit Stylesheets ist in höherem Maße eine Arbeitsteilung möglich, als das
früher z. B. bei HTML und eingebetteten Formatierungsbefehlen möglich war.
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.
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.
thx für´s zuhören, euer Messias of Hell
( btw wer aufgehört hat sich zu freuen: FREITAGS FREI ALTER! )
by Stefan Tihanyi, dem Prinzen des Remstals ^_^
Stylesheet ist in der Informationstechnik eine Beschreibungssprache.
Ein Stylesheet ist am ehesten mit einer Formatvorlage zu vergleichen. Grundidee hierbei ist die
Trennung von Information (Daten) und Darstellung. Das Stylesheet interpretiert die zugewiesenen
Daten (Text, Tabellen, Grafiken etc.) und formatiert sie (z.B. für die Bildschirmausgabe) entsprechend
der vorgegebenen Regeln. Mit Stylesheets ist in höherem Maße eine Arbeitsteilung möglich, als das
früher z. B. bei HTML und eingebetteten Formatierungsbefehlen möglich war.
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.
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.
thx für´s zuhören, euer Messias of Hell
( btw wer aufgehört hat sich zu freuen: FREITAGS FREI ALTER! )
Tiha - 18. Okt, 18:23
