Exclusives Webdesign fuer gehobene Ansprueche

Webdesign Agentur Bielefeld

Cascading Style Sheets

CSS ist eine Stylesheet-Sprache für strukturierte Dokumente. Sie wird mit HTML und XML eingesetzt. CSS soll dabei festlegen, wie ein besonders ausgezeichneter Inhalt dargestellt werden soll. Dazu ist es wichtig, das HTML oder XML so zu gestalten, dass die Abschnitte, deren Aussehen gleich sein soll, auch als Gruppe erkannt werden können. Man zeichnet im Dokument also die Bedeutung einzelner Abschnitte aus, während das Aussehen dieser ausgezeichneten Abschnitte im CSS festgelegt wird.

Ein wichtiges Prinzip von CSS ist die Vererbung der Eigenschaftswerte an untergeordnete Elemente und die Kombination verschiedener Stylesheets (Kaskade). Diese können dabei aus verschiedenen Quellen stammen: vom Autor des Stylesheets, dem Browser (User Agent) oder dem Benutzer.

CSS ermöglicht es, die Darstellung dem jeweiligen Ausgabemedium (zum Beispiel Bildschirm, Papier usw.) entsprechend anzupassen. Das ist nützlich, um zum Beispiel Hyperlinks beim Drucken extra aufzuführen, oder um für ein Anzeigemedium wie einen PDA oder ein Mobiltelefon mit geringerer Auflösung die Anzeige zu optimieren (geringere Seitenbreite und -höhe).

Neben diversen Fähigkeiten im Farb- und Schriftbereich bietet CSS die Möglichkeit, Elemente frei zu positionieren oder Hintergrundbilder festzulegen.

CSS gilt heutzutage als die Standard-Stylesheetsprache für das Web.

Geschichte und Versionen

Im Dezember 1996 wurde dann die CSS Level 1 Recommendation publiziert. Diese wird in aktuellen Browsern mittlerweile nahezu vollständig umgesetzt.

CSS Level 2 (CSS2) wurde im Mai 1998 veröffentlicht. Bis heute wird diese Empfehlung noch nicht hinreichend von allen verbreiteten Browsern implementiert. Manche Browser setzen den größten Teil von CSS2 korrekt um, andere hingegen bieten nur eine mangelhafte Unterstützung von wenigen Teiltechniken. Bei der praktischen Anwendung im Web ergeben sich daher oft unnötige Schwierigkeiten.

Momentan arbeitet das W3C an einer Zwischenversion CSS Level 2 Revision 1 (CSS 2.1), die die Erfahrungen mit CSS2 berücksichtigt, Unstimmigkeiten korrigiert und diejenigen Teiltechniken streicht, die bisher in verschiedenen Browsern nicht korrekt implementiert wurden. CSS 2.1 bringt selbst keine grundlegend neuen Fähigkeiten mit sich.

Gleichzeitig ist CSS Level 3 in der Entwicklung. Hier werden die Entwicklungen weiter vorangetrieben, die bereits bei CSS2 gestartet wurden.

Syntax

Definition des Syntaxschemas

Eine CSS-Regel hat folgendes Aussehen:

Selektor {   Eigenschaft-A: Wert-A;   Eigenschaft-B: Wert-B  }   /* Kommentar */

Ein Stylesheet darf beliebig viele solcher Regeln enthalten. Es gibt unter anderem folgende Selektoren, die jeweils Elemente auswählen. Im Wesentlichen sind dies die HTML-Tags:

Muster	Bedeutung
*	Selektiert jedes Element	Universal selector
E	Selektiert jedes Element vom Typ E	Type selectors
E F	Selektiert jedes Element F, das ein Nachfahre von Element E ist	Descendant selectors
E > F	Selektiert jedes Element F, das ein Kind von E ist	Child selectors
E:first-child	Selektiert ein Element E, wenn es das erste Kind des direkten Vorfahren ist	The :first-child pseudo-class
E[foo]	Selektiert jedes Element E, bei dem das „foo“-Attribut gesetzt ist (unabhängig vom Wert)	Attribute selectors
E[foo=bar]	Selektiert jedes Element E, bei dem das „foo“-Attribut mit dem Wert bar gesetzt ist	Attribute selectors
.c	Selektiert jedes Element der Klasse c	Class selectors
E.c	Selektiert alle Elemente E der Klasse c	Class selectors
#myid	Selektiert jedes Element mit der ID „myid“.	ID selectors
E#myid	Selektiert das Element E mit der ID „myid“.	ID selectors

Kombination mit HTML bzw. XHTML

Die am häufigsten vorkommende Kombination, nämlich mit HTML oder XHTML, kann an mehreren Orten geschehen, hier einige Beispiele:

Als externes Stylesheet für eine (X)HTML-Datei (link-Element): <link rel="stylesheet" type="text/css" href="beispiel.css" />

Als externes Stylesheet für eine XHTML-Datei (xml-stylesheet-Verarbeitungsanweisung): <?xml-stylesheet type="text/css" href="beispiel.css" ?>

Als internes Stylesheet in einer (X)HTML-Datei (style-Element); <head><title>Dokument mit Formatierungen</title>
<style type="text/css">
body { color: purple; background-color: #d8da3d }
</style></head>

Innerhalb von (X)HTML-Tags (style-Attribut): <span style="font-size: small;">Text</span>

Die Einbindung als externes Stylesheet ist dabei die am häufigsten verwendete Methode. Sie bietet den Vorteil, dass für mehrere Dokumente, die denselben Regelsatz benutzen, das Stylesheet nur einmal heruntergeladen werden muss. Auch vermeidet man so sich wiederholenden Code. CSS selbst ermöglicht durch die @import-Regel das Einbinden von weiteren externen Stylesheets.

Verschiedene separate Stylesheets für unterschiedliche Ausgabemedien

Bildschirm und Drucker sind unterschiedliche Ausgabemedien für ansprechend gestaltete Daten. Beide Ausgabemedien haben ihre eigenen Gesetze. Während am Bildschirm etwa helle Schriften auf dunklen Hintergründen attraktiv aussehen, ist das für die Ausgabe am Drucker keine gute Lösung. Bei der Druckerausgabe sehen dagegen Absatzeinzüge von mindestens 2cm besser aus, während durch entsprechende Angaben am Bildschirm möglicherweise kostbarer Präsentationsraum verschenkt wird. Deshalb können Sie für verschiedene Ausgabemedien verschiedene externe CSS-Dateien einbinden, die unterschiedliche Formatdefinitionen enthalten können. Die Software muss beim Präsentieren der Seiten entscheiden, welche der eingebundenen CSS-Dateien maßgeblich ist. Wenn der Web-Browser also beispielsweise die Seiten am Bildschirm anzeigt, sollte er die CSS-Datei verwenden, die Sie explizit für das Medium "Bildschirm" bestimmen, und wenn der Anwender eine Seite ausdruckt, sollte der Browser stattdessen die CSS-Datei verwenden, die Sie für das Medium "Drucker" angeben ist

In CSS2 werden folgende möglichen Angaben genannt:

Angabe	Bedeutung
media="all"	CSS-Datei gilt für alle Medientypen.
media="aural"	CSS-Datei gilt für computergesteuerte synthetische Sprachausgabe. Beachten Sie in diesem Zusammenhang auch die CSS-Eigenschaften für Sprachausgabe.
media="braille"	CSS-Datei gilt für Ausgabegeräte mit so genannter "Braille-Zeile". Dabei wird Text eine veränderbare Oberflächenstruktur des Materials der Braille-Zeile umgewandelt und über Abtasten mit dem Finger gelesen. Diese Form des Ausgabemediums ist für blinde Menschen gedacht.
media="embossed"	CSS-Datei gilt für Braille-Drucker. Dabei wird Text in Form von abtastbaren Oberflächenstrukturen in Papier oder ein vergleichbares Material gestanzt. Wie braille ist embossed für blinde Menschen gedacht.
media="handheld"	CSS-Datei gilt für die Anzeige auf tragbaren Kleinstcomputern. Web-fähige elektronische Organizer sind typische Vertreter dieser Gattung.
media="print"	CSS-Datei gilt für den Ausdruck auf Papier. Web-Browser sollten diese Formatdefinitionen verwenden, wenn der Anwender die Web-Seite ausdrucken möchte. Beachten Sie dazu auch die CSS-Eigenschaften für Printmedien.
media="projection"	CSS-Datei gilt für die Datenprojektion mit Beamern und ähnlichen Geräten.
media="screen"	CSS-Datei gilt für die Bildschirmanzeige.
media="tty"	CSS-Datei gilt für nicht-grafische Ausgabemedien mit fixer Zeichenbreite, beispielsweise Fernschreiber. Aber auch für text-orientierte Browser wie Lynx ist dieser Medientyp interessant.
media="tv"	CSS-Datei gilt für TV-ähnliche Ausgabegeräte, die sich durch grobe Bildschirmauflösung und mangelnde Unterstützung beim Scrollen in Text, dafür aber durch Sound-Unterstützung auszeichnen.

Der Internet Explorer interpretiert diese Angaben ab Version 4 zu einem gewissen Teil.

Der Medientyp aural wird in CSS 2.1 "missbilligt", da hierfür der neue Medientyp speech in CSS 3 vorgesehen ist.

Die Kaskade

Stylesheets können drei verschiedene Ursprünge haben: Autor, Benutzer und Benutzerprogramm.

Autor: Der Autor gibt Stylesheets für ein Quelldokument gemäß den Konventionen der Dokumentsprache an. In HTML beispielsweise können Stylesheets in das Dokument aufgenommen oder extern verknüpft werden.

Benutzer: Der Benutzer kann Stilinformationen für ein bestimmtes Dokument angeben. Beispielsweise kann der Benutzer eine Datei angeben, die ein Stylesheet enthält, oder das Benutzerprogramm kann eine Schnittstelle bereitstellen, die ein Benutzer-Stylesheet erzeugt (oder sich so verhält, als täte sie das).

Benutzerprogramm: Konforme Benutzerprogramme müssen vor allen anderen Stylesheets für ein Dokument ein Standard-Stylesheet anwenden (oder sich so verhalten, als ob sie das täten). Das Standard-Stylesheet eines Benutzerprogramms sollte die Elemente der Dokumentsprache so präsentieren, dass sie den allgemeinen Darstellungserwartungen für die Dokumentsprache entsprechen (z.B. wird das EM-Element in HTML bei visuellen Browsern unter Verwendung einer kursiven Schrift dargestellt). Ein empfohlenes Standard-Stylesheet für HTML 4.0-Dokumente finden Sie unter „Ein Beispiel-Stylesheet für HTML 4.0“ (Anhang A).; Beachten Sie, dass sich das Standard-Stylesheet ändern kann, wenn der Benutzer die Systemeinstellungen verändert (z.B. die Systemfarben) Aufgrund der Einschränkungen der internen Implementierung des Benutzerprogramms ist es jedoch unter Umständen nicht möglich, die Werte im Standard-Stylesheet zu ändern.

Stylesheets aus diesen drei Ursprüngen überlappen sich im Gültigkeitsbereich und arbeiten gemäß der Kaskade zusammen.

Die CSS-Kaskade ordnet jeder Stilregel eine Gewichtung zu. Gelten mehrere Regeln, setzt sich diejenige mit der höchsten Gewichtung durch.

Standardmäßig haben Regeln in Autoren-Stylesheets mehr Gewicht als Regeln in Benutzer-Stylesheets. Priorität haben jedoch immer „!important“-Regeln. Alle Benutzerregeln und Autorenregeln haben mehr Gewicht als die Regeln im Standard-Stylesheet des Benutzerprogramms.

Importierte Stylesheets sind ebenfalls kaskadenartig angeordnet, und ihre Gewichtung ist von ihrer Import-Reihenfolge abhängig. Regeln, die in einem bestimmten Stylesheet angegeben sind, überschreiben Regeln des gleichen Gewichts, die aus anderen Stylesheets importiert werden. Importierte Stylesheets können wiederum selbst importieren und andere Stylesheets überschreiben, was rekursiv erfolgt, und wofür dieselben Prioritätsregeln gelten.

Kaskaden-Reihenfolge

Um den Wert für eine Element/Eigenschaft-Kombination zu ermitteln, wenden die Benutzerprogramme die folgende Sortierreihenfolge an:

Es werden alle Deklarationen ermittelt, die sich auf das betreffende Element und die Eigenschaft für den Ziel-Medientyp beziehen. Deklarationen werden angewendet, wenn der entsprechenden Selektor mit dem betreffenden Element übereinstimmt.

Primär werden die Deklarationen nach Gewichtung und Ursprung sortiert: Für normale Deklarationen überschreiben Autor-Stylesheets die Benutzer-Stylesheets, die wiederum das Standard-Stylesheet überschreiben. Für „!important“-Deklarationen überschreiben Benutzer-Stylesheets Autor-Stylesheets, die wiederum das Standard-Stylesheet überschreiben. Eine „!important“-Deklaration überschreibt normale Deklarationen. Ein importiertes Stylesheet hat denselben Ursprung wie das Stylesheet, von dem es importiert wurde.

Die zweite Sortierung erfolgt nach der Spezifität des Selektors: Spezifischere Selektoren überschreiben allgemeinere Selektoren. Pseudo-Elemente und Pseudo-Klassen werden als normale Elemente bzw. Klassen betrachtet.

Schließlich werden sie nach der vorgegebenen Reihenfolge sortiert: Haben zwei Regeln dieselbe Gewichtung, denselben Ursprung und dieselbe Spezifität, erhält die jeweils zuletzt angegebene den Vorrang. Regeln in importierten Stylesheets werden als vor allen anderen Regeln im eigentlichen Stylesheet befindlich betrachtet.

Neben der Einstellung „!important“ für einzelne Deklarationen erteilt diese Strategie den Stylesheets des Autors eine höhere Gewichtung als denen des Lesers. Deshalb ist es wichtig, dass das Benutzerprogramm dem Benutzer die Möglichkeit gibt, die Beeinflussung durch ein bestimmtes Stylesheet zu deaktivieren, beispielsweise in einem Pulldown-Menü.

!important-Regeln

CSS versucht, einen Leistungsausgleich zwischen Stylesheets des Autors und des Benutzers herzustellen. Standardmäßig überschreiben die Regeln im Stylesheet eines Autors diejenigen aus dem Stylesheet eines Benutzers (siehe Kaskadenregel 3).

Des Ausgleichs halber erhält jedoch eine „!important“-Deklaration (die Schlüsselwörter „!“ und „important“ folgen der Deklaration) Priorität gegenüber einer normalen Deklaration. Sowohl Autor- als auch Benutzer-Stylesheets können „!important“-Deklarationen enthalten, und die „!important“-Regeln des Benutzers überschreiben die „!important“-Regeln des Autors. Dieses Funktionsmerkmal von CSS verbessert den Zugriff auf Dokumente, indem es Benutzern mit speziellen Anforderungen (große Schriften, Farbkombinationen usw.) die Kontrolle über die Darstellung erteilt.

Hinweis. Dies ist eine semantische Änderung gegenüber CSS1. In CSS1 hatten die „!important“-Regeln des Autors Priorität gegenüber den „!important“-Regeln des Benutzers.

Die Deklaration einer zusammenfassenden Eigenschaft (z.B. 'background') als „!important“ ist äquivalent zur Deklaration aller ihrer untergeordneten Eigenschaften als „!important“.

Berechnung der Spezifität eines Selektors

Die Spezifität eines Selektors wird wie folgt berechnet:

Zählen Sie die Anzahl der ID-Attribute im Selektor (= a)
Zählen Sie die Anzahl der Klassen und Pseudo-Klassen im Selektor (= b)
Zählen Sie die Anzahl der Elementnamen im Selektor (= c)
Pseudo-Elemente werden ignoriert.

Durch die Verknüpfung der drei Zahlen a, b und c (in einem Zahlensystem mit einer großen Basis) ergibt sich die Spezifität.

Beispiel

Einige Beispiele:

*             {}  /* a=0 b=0 c=0 -> Spezifität =   0 */
LI            {}  /* a=0 b=0 c=1 -> Spezifität =   1 */
UL LI         {}  /* a=0 b=0 c=2 -> Spezifität =   2 */
UL OL+LI      {}  /* a=0 b=0 c=3 -> Spezifität =   3 */
H1 + *[REL=up]{}  /* a=0 b=1 c=1 -> Spezifität =  11 */
UL OL LI.red  {}  /* a=0 b=1 c=3 -> Spezifität =  13 */ 
LI.red.level  {}  /* a=0 b=2 c=1 -> Spezifität =  21 */
#x34y         {}  /* a=1 b=0 c=0 -> Spezifität = 100 */

CSS2 Änderungen gegenüber CSS1

CSS2 baut auf CSS1 auf, und alle gültigen CSS1-Stylesheets sind auch gültige CSS2-Stylesheets. Die Änderungen zwischen der CSS1-Spezifikation und CSS2 können in drei Kategorien eingeteilt werden: neue Funktionen, aktualisierte Beschreibungen von CSS1-Funktionen und Änderungen an CSS1.

Neue Funktionen

Neben den Funktionen von CSS1 unterstützt CSS2:

Das Konzept der Medientypen
Den 'inherit'-Wert für alle Eigenschaften
Seitenmedien
Akustische Stylesheets
Mehrere Funktionsmerkmale im Bereich der Internationalisierung, unter anderem Stile für die Listennummerierung, Unterstützung bidirektionaler Texte und Unterstützung sprachabhängiger Anführungszeichen.
Einen erweiterten Mechanismus zur Schriftauswahl, unter anderem mit intelligentem Vergleich, Synthese und herunterladbaren Schriften. Darüber hinaus wurde das Konzept von Systemschriften eingeführt ebenso wie eine neue Eigenschaft namens 'font-size-adjust'.
Tabellen, unter anderem mit neuen Werten für 'display' und 'vertical-align'.
Relative und absolute Positionierung, inklusive feststehender Positionierung.
Neue Box-Typen (neben Block und Inline): Compact und Run-in.
Die Möglichkeit, den Überlauf, das Abschneiden und die Sichtbarkeit von Inhalt im visuellen Formatierungsmodell zu kontrollieren.
Die Möglichkeit, minimale und maximale Breiten und Höhen im visuellen Formatierungsmodell anzugeben.
Einen erweiterten Selektor-Mechanismus, unter anderem mit untergeordneten Selektoren, benachbarten Selektoren und Attribut-Selektoren.
Erzeugten Inhalt, Zähler und automatische Nummerierung sowie Markierungen.
Textschatten – durch die neue Eigenschaft 'text-shadow'.
Mehrere neue Pseudo-Klassen: :first-child, :hover, :focus und :lang.
Systemfarben und -schriften.
Cursor.
Dynamische Umrisse.

Aktualisierte Beschreibungen

Die CSS1-Spezifikation war kurz und präzise. Die CSS2 Spezifikation ist sehr viel umfassender und besser lesbar. Ein Großteil des ergänzten Inhalts beschreibt neuen Funktionsumfang, aber auch die CSS1-Funktionsmerkmale sind hier ausführlicher beschrieben. Außer in einigen nachfolgend beschriebenen Fällen bedeuten die umformulierten Beschreibungen keine Änderungen in Syntax oder Semantik.

Semantische Änderungen gegenüber CSS1

Alle CSS1-Stylesheets sind gültige CSS2-Stylesheets, aber es gibt einige Fälle, wo das CSS1-Stylesheet eine andere Bedeutung erhält, wenn es als CSS2-Stylesheet interpretiert wird. Die meisten Änderungen wurden aufgrund von Erfahrungen bei der Implementierung vorgenommen, die jetzt in die Spezifikation zurückfließen, aber es gibt auch ein paar Maßnahmen zur Fehlerkorrektur.

Die Bedeutung von „!important“ hat sich geändert. In CSS1 hatte „!important“ im Stylesheet eines Autors Priorität gegenüber „!important“ im Stylesheet eines Benutzers. Das wurde in CSS2 umgekehrt.
In CSS2 werden Farbwerte relativ zur Geräte-Skala abgeschnitten, nicht relativ zur sRGB-Skala, wie in CSS1.
CSS1 sagte einfach aus, dass 'margin-right' ignoriert wird, wenn sowohl 'margin-left' als auch 'width' vorgegeben waren. In CSS2 ist es von der Schreibrichtung abhängig, ob 'margin-right' oder 'margin-left' ignoriert wird.
In CSS1 hatten mehrere Eigenschaften (z.B. 'padding') Werte, die sich auf die Breite des übergeordneten Elements bezogen. Das war ein Fehler; der Wert sollte sich immer auf die Breite eines Elements auf Blockebene beziehen, und diese Spezifikation reflektiert dies durch Einführung des Begriffs „umschließender Block“.
Der Ausgangswert von 'display' ist in CSS2 'inline', nicht 'block' wie in CSS1.
In CSS1 wird die Eigenschaft 'clear' auf alle Elemente angewendet. Das war ein Fehler. In CSS2 wird die Eigenschaft nur auf Elemente auf Blockebene angewendet.
In CSS1 schlossen sich ':link', ':visited' und ':active' wechselseitig aus; in CSS2 kann ':active' gleichzeitig mit ':link' oder ':visited' gesetzt werden.
Der vorgeschlagene Skalierungsfaktor zwischen benachbarten 'font-size'-Indizies in der Tabelle der Schriftgrößen wurde von 1.5 auf 1.2 reduziert.
Der berechnete Wert von 'font-size' wird vererbt, nicht der tatsächliche Wert.
Die CSS1-Beschreibung von 'inside' (für 'list-style-position') erlaubte die Interpretation, dass der linke Rand des Texts gemeint war, und nicht die Position der Kugel-Markierung. In CSS2 wurde diese Interpretationsmöglichkeit entfernt.

zum Seitenanfang