Werte

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

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, erläutere ich in diesem Abschnitt.

Zum Seitenanfang

<Farbe>

In CSS können Sie Farben auf zwei Arten angeben: als RGB(A)-Farbwert oder über ein Schlüsselwort.

RGB-Farbwert

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 255 Werte möglich (0 bis 255). So ergibt die CSS-Deklaration color: rgb(255,0,0); ein reines Rot. Teilen Sie jedem Kanal den höchsten Wert zu (jeweils 255), erhalten Sie die Farbe Weiß.

RGB-Farbwerte lassen sich in hexadezimaler oder funktionaler Notation angeben.

Das Format eines RGB-Werts in hexadezimaler Notation ist ein #, unmittelbar gefolgt von sechs oder drei Hexadezimalzeichen. Hexadezimale Werte haben nicht nur die zehn 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, die den dezimalen Zahlen 10 bis 15 entsprechen. So wird aus der Dezimalzahl 255 die Hexadezimalzahl FF. Diese Umrechnung ist gewöhnungsbedürftig. Eine Angabe wie beispielsweise #FFFFFF bedeutet nichts anderes als FF Anteile Rot, FF Anteile Grün und FF Anteile Blau; sie ergibt folglich ein reines Weiß. Zwischen Groß- und Kleinschreibung wird nicht unterschieden. Anstatt #FFFFFF können Sie auch #ffffff schreiben.

Der Farbwert wird im Allgemeinen mit 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.

Das Format eines RGB-Werts in der funktionalen Notation ist die Zeichenkette rgb(, gefolgt von einer Liste mit durch Kommata voneinander getrennten Einträgen der drei numerischen Werte (entweder drei ganzzahlige Werte oder drei Prozentwerte), gefolgt von ). Der ganzzahlige Wert 255 entspricht 100% und F oder FF in der hexadezimalen Notation. Die folgenden Angaben ergeben jeweils reines Weiß.

color: #FFF;
color: #FFFFFF;
color: rgb(255,255,255);
color: rgb(100%, 100%, 100%);

RGBA

RGBA ist eine Erweiterung des RBG-Modells durch einen (vierten) Alphawert. Dieser bestimmt die Transparenz der angegebenen Farbe und liegt zwischen 0.0 (völlige Transparenz) und 1.0 (völlige Deckkraft). Ein Element E mit der Deklaration

E { background-color: rgba(255, 255, 255, 0.6); }

hat einen weißen Hintergrund mit 60 % Deckkraft. Genauso ist es möglich, teiltransparente Schrift (Eigenschaft color) oder Rahmen (Eigenschaft border-color) zu erzeugen.

RGBA ist nicht Bestandteil von CSS bis Version 2.1, sondern wird in der noch nicht verabschiedeten W3C-Empfehlung CSS Color Module Level 3 definiert, die mit hoher Wahrscheinlichkeit Teil des CSS-3-Standards werden wird. Daher können nur aktuelle Browser mit RGBA-Farbangaben umgehen. Der Internet Explorer bis Version 8 beispielsweise stellt bei obiger Regel überhaupt keine Hintergrundfarbe dar. Dennoch müssen Sie ältere Browser natürlich berücksichtigen. Wenn Sie mit transparenten Flächen arbeiten möchten, dann empfehle ich Ihnen die Lektüre des Artikel Cross-Browser rgba() von Eric Eggert, der zeigt, wie Sie Transparenz mittels einiger Tricks browserübergreifend implementieren können.

Schlüsselwörter

CSS 2 kennt Schlüsselwörter für 16 Farbnamen. Der aktuelle CSS 2.1-Arbeitsentwurf führt noch eine weitere auf. Orange wurde anscheinend so häufig fälschlicherweise angegeben, dass die CSS-Arbeitsgruppe sich erbarmt hat, die Farbe aufzunehmen, auch wenn der Farbwert nicht so recht ins Schema passt. Tabelle 7.1 führt alle 17 Farbnamen und deren Farbwerte in hexadezimaler und funktionaler Notation auf.

Anwenderdefinierte Farben

Bei anwenderorientierten Farben handelt es sich um Schlüsselwörter, die sich auf die grafische Umgebung des Benutzers, das heißt dessen Systemfarben beziehen. Damit lässt sich eine Website individuell an das vom Nutzer eingerichtete Look & Feel anpassen, das den Gewohnheiten und speziellen Bedürfnissen des Nutzers womöglich mehr entgegenkommt, als es ein Webautor vermag.

Tabelle 7.2 führt alle anwenderdefinierten Farbnamen auf, die in CSS 2.1 definiert sind.

Zum Seitenanfang

<Integer>

Das Schlüsselwort <Integer> steht für eine ganze Zahl aus einer oder mehreren Ziffern von 0 bis 9 (zum Beispiel 0, 17, 4911).

Zum Seitenanfang

<Zahl>

Das Schlüsselwort <Zahl> steht für eine reelle Zahl. Diese kann entweder ein <Integer> sein oder aus einer Ziffer oder mehreren Ziffern bestehen, gefolgt von einem Punkt (.) und einer weiteren Ziffer oder mehreren weiteren Ziffern (zum Beispiel 0 oder 3.14). Sowohl den ganzen als auch den reellen Zahlen kann ein Vorzeichen vorangestellt werden.

Zum Seitenanfang

<Länge>

Längenangaben stellen horizontale oder vertikale Maße dar und bestehen entweder aus einem Schlüsselwort oder einem optionalen Vorzeichen (+ oder –), einer <Zahl> und einer Einheit. Die Einheit ist nur hinter der Zahl 0 optional. Einige Eigenschaften erlauben negative Längenangaben. Man unterscheidet zwischen absoluten und relativen Längenangaben.

Absolute Längen

Absolute Längen sollten Sie nur dann verwenden, wenn die physikalischen Gegebenheiten des Ausgabemediums genau bekannt sind, also zum Beispiel die Ausmaße eines Blatt Papiers.

Punkt (pt) und Pica (pc)

Punkt und Pica sind typografische Maßeinheiten, die besonders im Printdesign verwendet werden. 1 Punkt entspricht 1/72 Zoll (1 Zoll = 2,54 Zentimeter), 1 Pica entspricht 12 Punkten.

Bildschirmmaße berechnen sich jedoch nicht in Punkten oder Pica, sondern in Pixeln. Angaben in beiden Einheiten müssen folglich entsprechend umgerechnet werden. Dies geschieht anhand der ppi-Zahl (pixel per inch, Pixel pro Zoll), die jedoch von System zu System unterschiedlich sein kann. Auf Windows-Systemen sind es 96 ppi, wenn Sie kleine Schriftarten eingestellt haben, und 120 ppi, wenn Sie große Schriftarten verwenden. Auf Macintosh-Betriebssystemen sind es nur 72 ppi. Eine 9 Punkt große Schrift würde auf einem Mac 9 Pixel groß sein, auf einem Windows-Betriebssystem hingegen 12 oder 15 Pixel. Dies bedeutet, dass ein auf einem Windows-System noch gut lesbarer Text auf einem Macintosh im schlimmsten Fall nicht mehr zu entziffern ist. Aus diesem Grund eignen sich beide Einheiten ausschließlich bei der Verwendung in Stylesheets für die Ausgabe auf Printmedien.

Zentimeter (cm) und Millimeter (mm)

Auch Angaben in cm oder mm müssen für die Bildschirmdarstellung in Pixelwerte umgerechnet werden. Kann das nicht exakt erfolgen, muss gerundet werden. Für diese Einheiten gilt im Prinzip dasselbe wie für Punkt und Pica: Die tatsächliche Länge kann sich von System zu System deutlich unterscheiden, daher sind beide Einheiten für die Darstellung auf dem Screen ebenfalls nicht wirklich zu gebrauchen.

Schlüsselwörter

Es gibt sieben Schlüsselwörter für absolute Größen:

• xx-small: winzig
• x-small: sehr klein
• small: klein
• medium: mittel
• large: groß
• x-large: sehr groß
• xx-large: riesig

Die CSS 2-Empfehlung sieht vor, dass sich die Größen bei der Ausgabe auf Computerbildschirmen jeweils um den Faktor 1.2 voneinander unterscheiden.

Abb. 7.1: Darstellung der Schlüsselwörter im Firefox; die Darstellung in anderen aktuellen Browsern ist vergleichbar

Relative Längen

Relative Längen eignen sich für die Bildschirmdarstellung besser als absolute Einheiten, da sie »von Natur aus« skalierbar sind. Das bedeutet, Nutzer können die Ausgabe an ihre eigenen Bedürfnisse anpassen, etwa die Schrift vergrößern, wenn sie durch eine Sehschwäche so sehr eingeschränkt sind, dass sie Texte in Standardschriftgröße auf dem Bildschirm nicht oder nur sehr mühevoll lesen können.

X-Höhe (ex)

Die Größe der Einheit ex wird durch die Höhe des Kleinbuchstabens »x« der verwendeten Schrift bestimmt.

Geviertbreite (em)

Die Einheit em ist gleich dem berechneten Wert der Eigenschaft font-size des Elements, auf das sie angewendet wird. Wird em für font-size selbst verwendet, bezieht es sich auf die Schriftgröße des übergeordneten Elements; ist keine solche vorgegeben, ist die Angabe 1em gleich der vom Benutzer eingestellten Schriftgröße. Diese entspricht im Allgemeinen 16 Pixeln. Die Regel

h1 { line-height: 1.5em; }

bedeutet, dass die Zeilenhöhe von Elementen vom Typ h1 um 50 Prozent größer ist als deren Schriftgröße. Hingegen legt

h1 { font-size: 1.5em; }

fest, dass die Schriftgröße von Elementen vom Typ h1 um 50 Prozent größer ist als die berechnete (vererbte) Schriftgröße ihrer Elternelemente.

Schlüsselwörter

Es gibt zwei Schlüsselwörter für relative Größen:

• larger: größer als das Elternelement
• smaller: kleiner als das Elternelement

Die Schrift wird relativ zur Schriftgröße des Elternelements um den Faktor 1.2 vergrößert beziehungsweise verkleinert.

Pixel (px)

Pixel nehmen eine Sonderstellung ein: Sie verhalten sich nicht relativ zur eingestellten Schrift oder anderen (vererbten) Größen, sondern sind relativ zur Auflösung des Anzeigegeräts. Verändern Sie die Auflösung Ihres Monitors beispielsweise von SVGA (Super Video Graphics Array, 800 x 600 Bildpunkte) auf UXGA (Ultra Extended Graphics Array, 1.600 x 1.200 Bildpunkte), erscheinen alle Pixellängen nur noch halb so groß.

Berechnete Werte

Untergeordnete Elemente erben nicht die für ihre Vorfahrenelemente angegebenen relativen Werte, sondern die berechneten Werte. Folgendes Beispiel soll dies demonstrieren:

body {
  font-size: 20px;
  text-indent: 2em;
}

p { font-size: 30px; }

Das Element p erbt den berechneten Wert der Eigenschaft text-indent, wird also nicht um 60 Pixel eingerückt (2 x 30 Pixel), sondern nur um 40 Pixel (2 x 20 Pixel).

Zum Seitenanfang

<Prozent>

Prozentwerte bestehen aus einem optionalen Vorzeichen (+ oder –), einer <Zahl> und der Einheit %. Sie sind immer relativ zu einem anderen Wert und verhalten sich in etwa so wie Werte mit der Einheit em.

Zum Seitenanfang

<URI>

Das Schlüsselwort <URI> steht für die Adressierung einer Ressource, zumeist einer Grafik. Das Format ist url(, gefolgt vom eigentlichen URI, gefolgt von ). Der URI kann ein relativer oder absoluter Verweis sein und in einfachen (') oder doppelten (") Anführungszeichen stehen.

Relative Verweise gehen vom Stylesheet aus, nicht von dem Dokument, das das Stylesheet einbindet. Die Regel

body { background-image: url(images/bg.png); }

in einem Stylesheet mit dem URI http://www.example.org/stylesheets/default.css verweist auf ein Hintergrundbild mit der Adresse http://www.example.org/stylesheets/images/bg.png.

Zum Seitenanfang

<Zeichenkette>

Zeichenketten bestehen aus fast beliebigen Zeichen, Wörtern oder 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 einem Escape-Zeichen (\) maskiert werden. Entsprechendes gilt auch für einfache Anführungszeichen.

li.linkliste a[href^="http://"]:before,
li.linkliste a[href^="https://"]:before {
  content: "Externer Link: ";
}

Zum Seitenanfang

<inherit>

Mit dem Wert inherit können Sie explizit angeben, dass eine Eigenschaft eines Elements den (berechneten) Wert des Elternelements erben soll.