Zurück: Kaskade, Vererbung und Überschreibung
Weiter: Farben und Hintergründe

Werte

Die folgenden Seiten sind alle ähnlich aufgebaut. Ich stelle Ihnen einzelne Eigenschaften und deren erlaubte Werte vor. Dazu folgt dann jeweils eine Erläuterung, zumeist mit einem oder mehreren Beispielen.

Für die Aufzählung der Werte gilt: Der zuerst aufgeführte Wert ist der Initialwert. Das ist der Wert, der vom Browser gewählt wird, wenn Sie diese Eigenschaft nicht explizit angeben oder kein anderer Wert an das Element weitervererbt wird. Bei einigen Eigenschaften ist das nicht so, dann werde ich Sie explizit darauf hinweisen.

Bei den meisten Eigenschaften habe ich einige mögliche Werte in Gruppen zusammengefasst und nur die jeweiligen Schlüsselwörter aufgeführt. Was diese Schlüsselwörter bedeuten, möchte ich Ihnen hier kurz erläutern.

<Farbe>

In CSS können Sie Farben auf vier Arten angeben, zum Beispiel die Farbe Weiß:

color: white;
Hier wird der Farbname direkt angegeben. Es gibt insgesamt 16 Farbnamen. Folgende Tabelle zeigt Ihnen den Farbnamen neben dem dazugehörigen Farbfeld, das den hexadezimalen Wert (siehe unten) enthält.
Black#000000 Olive#808000
Gray#808080 Yellow#FFFF00
Silver#C0C0C0 Green#008000
White#FFFFFF Lime#00FF00
Purple#800080 Navy#000080
Fuchsia#FF00FF Blue#0000FF
Maroon#800000 Teal#008080
Red#FF0000 Aqua#00FFFF
  • In CSS 2.1 wird voraussichtlich eine Farbe hinzukommen: Orange wurde anscheinend so oft fälschlicherweise angegeben, dass die CSS Working Group sich erbarmt hat, auch wenn der Farbwert nicht so recht ins Schema passt.
    Orange#FFA500
color: rgb(255,255,255)
Ein Monitor arbeitet mit drei Spektralfarben: Rot, Grün und Blau. Jedes Pixel der Desktop-Fläche kann in einer der drei Spektralfarben leuchten. Die einzelnen Pixel nehmen Sie jedoch nicht mehr wahr, da sie klein genug sind, um sich optisch zu vermischen, sodass unterschiedliche Farben und Helligkeiten wahrgenommen werden.
RGB-Werte setzen sich aus Rot-, Grün- und Blauanteilen zusammen. Pro Kanal sind 256 Werte möglich (0 - 255). Der Farbwert rgb(255,0,0) zum Beispiel ergibt ein reines Rot. Teilen Sie jedem Kanal den höchsten Wert zu (jeweils 255), erhalten Sie die Farbe Weiß.
color: rgb(100%,100%,100%)
Die Schreibweise in Prozentwerten. Es wird dabei auf den entsprechenden RGB-Wert gerundet.
color: #ffffff;
Dies ist eine Angabe des hexadezimalen Farbwertes.
  • Hexadezimale Werte haben nicht nur die 10 Ziffern des Dezimalsystems, sondern bestehen aus 16 Ziffern. Zusätzlich zu den Ziffern 0 bis 9 gibt es hier noch die Ziffern A bis F, was den dezimalen Zahlen 10 bis 15 entspricht.
So wird aus der Dezimalzahl 255 die Hexadezimalzahl FF. Diese Umrechnung ist gewöhnungsbedürftig. Eine Angabe wie zum Beispiel #ffffff bedeutet nichts anderes als FF Anteile Rot, FF Anteile Grün und FF Anteile Blau, ergibt somit ein reines Weiß.
Der Farbwert wird in sechs Stellen angegeben, jeweils zwei für Rot, Grün und Blau, jedoch lassen sich die Angaben für jede einzelne Farbe (also paarweise) zusammenfassen, wenn sie jeweils gleich sind. Aus #ffddee wird dann #fde, aus #ffffff wird #fff.
  • Styling für Webseiten
    Die deutsche Übersetzung von Dave Raggetts kurzer CSS-Einführung »Adding a touch of style«. Sie finden darauf eine übersichtliche Aufstellung aller browsersicheren Farben (und eine Erklärung, was das eigentlich ist), sowie einen Umrechner von HEX in RGB.
inherit

Mit dem Wert inherit können Sie explizit angeben, dass eine Eigenschaft eines Elementes den Wert des Elternelementes erben soll.

<URI>

Das Schlüsselwort »<uri>« steht für die Adressierung einer Ressource, zumeist einer Grafik, in der Form url() bzw. url("") oder url(''). Innerhalb der Klammern bzw. Anführungszeichen kann ein relativer oder absoluter Verweis stehen. Der relative Verweis geht vom Stylesheet aus, nicht von dem Dokument, in das das Stylesheet eingebunden wurde. Die Implementierung des NN4 ist diesbezüglich fehlerhaft. Um dieses Problem zu vermeiden, verweisen Sie am besten relativ zum Root, wie in folgendem Beispiel:

body { background-image: url(/images/background.png); }
<Prozent>

Prozentangaben bestehen aus einem optionalen Vorzeichen, einer <Zahl> und dem Prozentzeichen %. Prozentangaben beziehen sich auf einen anderen Wert, zum Beispiel eine Länge.

#navigation { width: 50%; }
<Länge>

Längenangaben bestehen aus einem optionalen Vorzeichen, einer <Zahl> und einer Einheit. Die Einheit ist nur hinter der Zahl 0 optional. Einige Eigenschaften erlauben negative Längenangaben.

  • Die »richtige« Schriftgröße
    Im WWW gibt es bisher keinen aktuelleren und gleichzeitig besseren oder zumindest gleich guten Text über Schriftgrößen als diesen im Rahmen der <dciwam/>-FAQ erschienene Artikel von Björn Höhrmann. Dort werden alle Möglichkeiten, absolute sowie relative Schriftgrößen anzugeben, aufgeführt und erläutert. Leider ist der Text etwas veraltet, das sehen Sie unter anderem daran, dass stellenweise noch mit Browsern der dritten Generation argumentiert wird. Man kann dem zu Anfang vorgestellten Fazit »Benutze Pixel oder gib gar nichts an« in dieser Form natürlich nicht (mehr) zustimmen. Ansonsten ist der Text natürlich weiterhin sehr lesenswert.
  • Dynamische Schriftgröße mit PHP und CSS
    In diesem Artikel, der in gekürzter Form in der Internet Professional 12/2003 erschienen ist, zeigt Mario Müller eine flexible Möglichkeit, mit der Ihre Besucher die Schriftgröße selber für die Webseite ändern können.
<Integer>
Das Schlüsselwort <Integer> steht für eine ganze Zahl von ein oder mehreren Ziffern von 0 bis 9 (zum Beispiel 0, 17, 4911).
<Zahl>
Das Schlüsselwort <Zahl> steht für eine reelle Zahl. Diese kann entweder ein <Integer> sein oder aus ein oder mehreren Ziffern bestehen, gefolgt von einem Punkt und einer weiteren Ziffer oder mehreren weiteren Ziffern (zum Beispiel 0, 0.5, 111.111). Sowohl den ganzen als auch den reellen Zahlen kann ein Vorzeichen vorgestellt werden.
<Zeichenkette>

Zeichenketten bestehen aus fast beliebigen Zeichen, Wörtern und Sätzen. Sie werden immer in doppelten oder einfachen Anführungszeichen notiert. Innerhalb von doppelten Anführungszeichen darf kein weiteres doppeltes Anführungszeichen vorkommen, sonst muss es mit \" maskiert werden. Entsprechend auch für einfache Anführungszeichen.

Zurück: Kaskade, Vererbung und Überschreibung
Weiter: Farben und Hintergründe
Zum Seitenanfang