Stil mit {stil}

Dez 2007

Webseiten mit CSS, XHTML und Javascript

Diese Dokumente stehen seit Erscheinen meines Buches »Stil mit Stil« seit 2003 online. Sie sind 2006, im Dezember 2007 und Oktober 2008 an die aktuelle Situation angepasst und überarbeitet worden.

Die CSS-Referenz des W3C fasst alle CSS-Stile und ihre Eigenschaften in Gruppen zusammen. Die Gruppierung soll dem Einsteiger helfen, einen Stil zu finden, der eine bestimmte Funktionalität bietet und schafft zugleich Module – z.B. für verschiedene Gerätetypen. Die Gruppe "aural" ist für die Sprachausgabe gedacht, die Gruppe "print media" für den Druck.

Die Beschreibung der Stile

IE4 M1 N4 O5 Sa1 CSS2 Erblich: Nein

(IE: Internet Explorer, M: Mozilla, N: Netscape, O: Opera, Sa: Safari)

Vor der Beschreibung einer Eigenschaft ist die Browserunterstützung aufgelistet, die sich hier nur auf „Mainstream“-Browser bezieht: Internet Explorer, Mozilla bzw. Firefox, Opera und Safari. Die Zahl hinter dem Kürzes eines Browsers besagt, ab welcher Version der Browser die jeweilige Eigenschaft unterstützt. Diese Angaben sind natürlich nicht verbindlich, denn viele Browserversionen ziehen an mir vorbei, ohne dass ich mitbekomme, dass ein Browser nun ein paar Verbesserungen eingebaut oder sich einen Bug eingefangen hat.

Die Angabe eines Browsers besagt auch nicht, dass der Browser den Stil mit allen Werten vollständig unterstützt. So kann IE zwar seit Version 4 positionierte Elemente darstellen, aber der Wert fixed für die feste Positionierung wird von IE erst ab Version 7 unterstützt. Eine vollständige und ausgetestete Liste, welcher Browser welche Stile korrekt unterstützt, kann es gar nicht geben: Die Elemente beeinflussen sich gegenseitig und immer wieder kann eine CSS-Regel in einer bestimmten Umgebung einen Fehler des Browsers an die Oberfläche bringen.

Browser für diese Seiten

Firefox eignet sich am besten, wenn Sie herausfinden wollen, wie ein Element mit einem besonderen Stil tatsächlich aussehen sollte. Aber auch Opera und Safari 3 sind Browser, die CSS vollständig unterstützen.

Auf ältere Browser nimmt diese Referenz keine Rücksicht. Da Browser ihrem Benutzer mitteilen, dass neue Versionen verfügbar sind und Windows nicht erlaubt, ältere Browser nachträglich zu installieren, fallen alte Browser heute viel schneller aus dem Rennen als dies früher der Fall war.

Die Beispiele

Die Beispiele sind häufig in eigenen Dokumenten untergebracht, damit die Stile dieser Kurzreferenz nicht mit den vorgestellten Stilen kollidieren. Mein Tipp: Sehen Sie sich auch den Quellcode dieser Beispiele an, wenn Sie bestimmte Stile nachvollziehen wollen.

Wie die Referenz zu interpretieren ist

position

position ist eine von zwei Eigenschaften für die Positionierung von Elementen auf einer Seite (die andere Eigenschaft ist float).

Werte

absolute | fixed | relative | static | inherit

Der Kurzbeschreibung einer Eigenschaft folgt eine Liste der möglichen Werte. Die Eigenschaft "position" wird im Stylesheet also in der Form position: fixed oder position: relative notiert. Wenn es einen vorgegebenen Wert für die Eigenschaft gibt, ist er kursiv geschrieben. position: static muss also nicht notiert werden.

Wenn "inherit" angegeben wird, soll das Element diese Eigenschaft von einem Elternelement erben.

Die Notation der Werte von CSS-Eigenschaften

Das Zeichen "|" steht für "oder". So weist die CSS-Eigenschaft position die folgende Werteliste auf:

absolute | fixed | relative | static | inherit

Die Eigenschaft position kann genau einen der Werte absolute, fixed, relative oder static annehmen.

"||" steht für "und/oder" und erlaubt, mehrere der angegebenen Werte aufzunehmen.

 

Das Zeichen "&|" symbolisiert ein "und/oder". Eine Eigenschaft kann eine Kombination aus mehreren der angegebenen Werte notieren.

Die möglichen Werte für die Eigenschaft"font-family":

[ [ family-name | generic-family ], ]* [ family-name | generic-family ] | inherit

Eckige Klammern erzeugen eine Gruppe von Werten. Eine Gruppe muss vollständig aufgenommen werden und sie kann wiederholt werden (symbolisiert durch das "*"-Zeichen). Die Eigenschaft font-family ist eine Liste von Namen von Schriftfamilien oder generischen Schriftnamen wie "sans-serif", wobei die Werte jeweils durch ein Komma getrennt sind. Das *-Zeichen symbolisiert die Wiederholung. Am Ende der Liste soll kein Komma stehen – darum ist am Ende [ family-name | generic-family ] notiert.

{1,4} Geschweifte Klammern können hinter Werten und Gruppen von Werten stehen und geben an, wieviele Werte minimal und maximal angegeben werden dürfen. Die Werte für die Eigenschaft "padding"

[ length | percentage ] {1,4}

Hier können eine, zwei, drei oder vier Breiten angeben werden.

 

integer integer

Werden Werte durch ein Leerzeichen voneinander getrennt aufgeführt, dann müssen beide Werte in dieser Reihenfolge benutzt werden.