SELFHTML: Stylesheets / CSS-Formate definieren / Maßeinheiten, Farbangaben und Wertzuweisung
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Welche Regeln es bei der Wertzuweisung an CSS-Eigenschaften gibt.
Keywords: SELFHTML, CSS, Stylesheets, Cascading Stylesheets, CSS-Eigenschaften, Wertzuweisung, Werte, Einheiten, Pica, Punkt, Prozent, pt, pc, em, px, %, rgb, rrggbb, deg, grad, rad, ms, s, Hz, kHz, Maße, Maßangaben, relative Maßangaben, absolute Maßangaben, relative Einheiten, absolute Einheiten
Date: 2005-10-03T08:55:27+02:00

| # Maßeinheiten, Farbangaben und Wertzuweisung
| Numerische Angaben Farbangaben Erlaubte feste Werte und Zeichenkettenangaben Numerische Angaben für Sprachausgabe

## Numerische Angaben

Bei numerischen Angaben zu CSS-Eigenschaften, also etwa bei Schriftgrößen, Absatzabständen oder Rändern, stehen Ihnen die weit verbreiteten Maßeinheiten zur Verfügung. Dabei sind absolute Angaben (z.B. Millimeter) und relative Angaben (z.B. Prozent gegenüber "normal") möglich. Benutzen Sie für Ihre Angaben die folgenden Abkürzungen:

Abkürzung | Angabetyp | Bedeutung | Beispiele
--- | --- | --- | ---
`pt` | absolut | Steht für Punkt. Typografische Maßeinheit. 1 Punkt entspricht 1/72 Inches. | `font-size:12pt; line-height:14pt;`
`pc` | absolut | Steht für Pica. Typografische Maßeinheit. 1 Pica entspricht 12 Punkt. | `font-size:1pc; line-height:1.2pc;`
`in` | absolut | Steht für Inch. Allgemeines Längenmaß im angelsächsischen Raum. 1 Inch entspricht 2.54 Zentimetern. | `border-width:0.1in; margin-left:1in;`
`mm` | absolut | Steht für Millimeter. Allgemeines Längenmaß. 1000. Teil des Urmeters. | `margin-bottom:10mm; width:70mm;`
`cm` | absolut | Steht für Zentimeter. Allgemeines Längenmaß. 100. Teil des Urmeters. | `font-size:1cm; top:2.54cm;`
`px` | absolut/relativ | Steht für Pixel. Abhängig von der Pixeldichte des Ausgabegeräts, relativ also von Ausgabegerät zu Ausgabegerät, absolut dagegen auf ein und das selbe Ausgabegerät bezogen. | `border-width:3px; margin-right:60px;`
`em` | relativ | Steht für bezogen auf die Schriftgröße des Elements. Ausnahme: wenn die `font-size`-Eigenschaft (also die Schriftgröße) selbst mit dieser Maßangabe gesetzt wird, steht diese für bezogen auf die Schriftgröße des Elternelements. | `font-size:1.2em; line-height:1.5em;`
`ex` | relativ | Steht für bezogen auf die Höhe des Kleinbuchstaben x in diesem Element. Ausnahme: wenn die `font-size`-Eigenschaft (also die Schriftgröße) selbst mit dieser Maßangabe gesetzt wird, steht diese für bezogen auf die Höhe des Kleinbuchstaben x im Elternelement. | `text-transform:uppercase; font-size:1.3ex;`
`%` | relativ | Steht für Prozent. Je nach CSS-Eigenschaft relativ zur elementeigenen Größe, oder zu der des Elternelements, oder zu einem allgemeineren Kontext. Bei nebenstehendem Beispiel ist die Angabe zur Zeilenhöhe (`line-height`) relativ zur Schriftgröße (`font-size`) zu interpretieren. | `font-size:10pt; line-height:120%;`

Benutzen Sie bei numerischen Bruchzahlen stets den Punkt als Dezimalzeichen, nicht das deutsche Komma, also etwa 0.2cm und nicht 0,2cm. Auch Minuswerte sind bei einigen Wertzuweisungen möglich, markiert wie üblich durch das Minuszeichen.

Sie können also sehr exakte Angaben notieren, doch Web-Seiten werden in der Regel auf Bildschirmen ausgegeben, und Bildschirme bestehen heutzutage aus Pixeln, wobei die Pixeldichte der einzelnen Bildschirme sehr unterschiedlich sein kann. Der Computer muss Ihre Angaben für die Ausgabe am Bildschirm letztlich in Pixel umrechnen. Dabei kann es zu enttäuschenden Ergebnissen kommen. So erscheinen Schriftgrößen, die an einem Bildschirm gut lesbar sind, in einer anderen Umgebung eventuell als zu klein. Leider sind daran auch die unterschiedlichen Basiseinstellungen der Betriebssysteme mit schuld. So wird unter Windows-Systemen eine Berechnungsgrundlage von 96dpi (Dots per Inch) für die Darstellung von Schriftarten verwendet (bei der Einstellung "große Schriftarten" gar 120dpi), unter Systemen wie Linux und Macintosh sind es dagegen 72dpi. Deshalb erscheinen Schriftgrößen, die unter Windows sauber aussehen, unter den anderen genannten Systemen oft mickrig, während Schriftgrößen, die dort angenehm aussehen, unter Windows wiederum klobig wirken. Aber auch direkte Angaben in Pixeln lösen das Problem nicht unbedingt. Ein Pixel auf einem 13-Zoll-Notebook-Bildschirm mit 1024×768 Pixeln Bildschirmauflösung wirkt ganz anders als ein Pixel auf einem 19-Zoll-Desktop-Bildschirm mit der gleichen Bildschirmauflösung. Andere Angaben wie `em` oder Prozentwerte umgehen zwar das Problem der unterschiedlichen Bildschirmdarstellungen - aber erstens kann man bei einer Angabe wie `1.2em` kaum von "Formatierung" reden, und zweitens bereiten solche Angaben auch andere Probleme. So kann es beispielsweise durch das Prinzip der natürlichen Vererbung passieren, dass Schriftarten bei mehrfach verschachtelten Elementen (etwa bei Listen oder Tabellen) immer kleiner oder größer werden. CSS2 bietet zwar mit den erweiterten Möglichkeiten, Formate für verschachtelte Elemente zu definieren, Maßnahmen zur Abhilfe an, doch das nutzt vorläufig auch nichts, solange es in vielen noch verbreiteten Browsern nicht funktioniert.

Um die "richtigen" und "falschen" Maßangaben ist angesichts all dieser Probleme in einigen Kreisen schon ein richtiger Glaubenskrieg ausgebrochen. Die einen behaupten, man solle sich an Angaben wie `pt` halten, weil ein Punkt immer gleich groß zu sein hat, die anderen beschwören die `em`-Angabe wie einen Erlösergott. Fakt ist in jedem Fall, dass Sie niemals darauf vertrauen sollten, dass Größen, die auf Ihrem Bildschirm wunderbar aussehen, woanders genauso wunderbar wirken. Vermeiden Sie deshalb vor allem bei Angaben, die für die Leserlichkeit von Text relevant sind, "extreme" Werte, und reagieren Sie, wenn Sie von mehreren Stellen zu hören bekommen, Ihre Seiten seien schwer lesbar.

### Beachten Sie:

Wenn Sie zwischen einzelnen Maßen umrechnen wollen, können Sie den Punkt/Inch/Millimeter-Umrechner benutzen.

## Farbangaben

Farbangaben in Stylesheets nach CSS-Syntax sind nach den Regeln zum Definieren von Farben in HTML möglich. CSS1 und CSS2 nennen die 16 Farbnamen der VGA-Palette, CSS 2.1 ergänzt diese um den Wert `orange`, hexadezimal `#ffa500`.

Sie können Farbwerte also hexadezimal nach dem Schema `#RRGGBB` angeben; `R` ist der Rotwert, `G` der Grünwert und `B` der Blauwert der Farbe. Anders als in HTML existiert auch eine Kurzschreibweise der Form `#RGB`. Hier werden die einzelnen Farbangaben intern verdoppelt, `#08a` steht demnach für `#0088aa`. Die hexadezimale Schreibweise erlaubt Groß- und Kleinschreibung.

Eine weitere Möglichkeit, Farben zu definieren, stellt die Stylesheet-Sprache CSS jedoch auch noch zur Verfügung. Das Schema dazu lautet `rgb(rrr,ggg,bbb)`. Der Ausdruck `rgb(...)` ist dabei immer gleich. Innerhalb der Klammern müssen drei Dezimalwerte oder drei Prozentwerte stehen, durch Kommata voneinander getrennt. Für alle drei Werte sind entweder absolute Zahlen zwischen `0` (kein Anteil der entsprechenden Farbe) und `255` (maximaler Anteil der entsprechenden Farbe) oder Prozentwerte von `0%` (kein Anteil an der entsprechenden Farbe) bis `100%` (maximaler Anteil der entsprechenden Farbe) erlaubt.

### Beispiele:

    <style type="text/css">
    h1 { color:#FFCCDD; background-color:black }
    body  { background-color:rgb(51,0,102) }
    p { color:#223; background-color:#ddf }
    blockquote  { background-color:rgb(60%,90%,75%) }
    </style>

### Anwender-relative Farbwörter (Systemfarben)

Ab der CSS-Version 2.0 gibt es ferner die Möglichkeit, anwender-relative Farbwörter zu verwenden, hinter denen sich Farben verbergen, die der Anwender an seinem Rechner als Arbeitsumgebung eingestellt hat. Auf diese Weise können Sie zur Gestaltung Ihrer Inhalte Farben verwenden, die auf die Bildschirmumgebungsfarben des Anwenderrechners abgestimmt sind, ohne dass Sie diese Farben kennen. Die erlaubten anwender-relativen Farbwörter werden im Folgenden erläutert.

### Beispiel:

Anzeigebeispiel: So sieht's aus

Abkürzung | Bedeutung
--- | ---
`ActiveBorder` | Rahmenfarbe des aktiven Fensters.
`ActiveCaption` | Hintergrundfarbe der aktiven Fenstertitelzeile.
`AppWorkspace` | Farbe des Hintergrunds der aktiven Anwendung.
`Background` | Farbe des Desktop-Hintergrunds.
`ButtonFace` | Farbe von Buttons in Dialogfenstern.
`ButtonHighlight` | Farbe für 3D-Lichteffekt von Buttons in Dialogfenstern.
`ButtonShadow` | Farbe für 3D-Schatten von Buttons in Dialogfenstern.
`ButtonText` | Farbe von Texten beschrifteter Buttons in Dialogfenstern.
`CaptionText` | Farbe von Überschriften in Dialogfenstern.
`GrayText` | Farbe von deaktiviertem Text in Dialogfenstern.
`Highlight` | Farbe von ausgewählten Einträgen in Auswahllisten.
`HighlightText` | Farbe von selektiertem Text.
`InactiveBorder` | Rahmenfarbe eines nicht aktiven Fensters.
`InactiveCaption` | Hintergrundfarbe einer nicht aktiven Fenstertitelzeile.
`InactiveCaptionText` | Farbe der Überschrift in einer nicht aktiven Fenstertitelzeile.
`InfoBackground` | Farbe für Tooltips und Hints (kleine Popup-Hilfen).
`InfoText` | Textfarbe für Tooltips und Hints (kleine Popup-Hilfen).
`Menu` | Farbe für Menüleisten.
`MenuText` | Farbe für Menüeinträge.
`Scrollbar` | Farbe der Scroll-Leiste in Fenstern.
`ThreeDDarkShadow` | Dunkle Farbe bei Schatten von 3D-Elementen.
`ThreeDFace` | Farbe von 3D-Elementen.
`ThreeDHighlight` | Farbe von gerade angeklickten 3D-Elementen.
`ThreeDLightShadow` | Helle Farbe bei Schatten von 3D-Elementen.
`ThreeDShadow` | Dunkle Farbe bei Schatten von 3D-Elementen.
`Window` | Hintergrundfarbe von Dokumentfenstern.
`WindowFrame` | Farbe von Fensterrahmen.
`WindowText` | Farbe von normalem Text in Dokumentfenstern.

## Erlaubte feste Werte und Zeichenkettenangaben

Bei vielen CSS-Eigenschaften steht eine Auswahl erlaubter Werte zur Verfügung. Das ist nicht anders als bei vielen HTML-Attributen. Genau so, wie Sie etwa eine Überschrift oder einen Textabsatz in HTML mit den Angaben `align="left"`, `align="center"` oder `align="right"` ausrichten können, gibt es CSS-Eigenschaften, die bestimmte Schlüsselwörter erwarten. So gibt es etwa die Stylesheet-Angabe `text-align` zur Ausrichtung von Text, die die gleichen Angaben erwartet, also `left`, `center` oder `right`.

Manche Stylesheet-Angaben erwarten die Zuordnung eines Namens oder auch mehrerer Schlüsselwörter. So können Sie hinter der Stylesheet-Angabe `font-family` Namen von einer oder mehreren Schriftarten notieren, die Sie für die Formatierung verwenden möchten. Andere CSS-Eigenschaften sind Zusammenfassungen von Einzeleigenschaften. So gibt es beispielsweise die Angabe `border` (Rahmen), hinter der Sie eine Angabe wie `thin solid red` notieren können. Trennen Sie solche Angaben zu einer Sammeleigenschaft durch Leerzeichen. Wenn die Angaben selbst Leerzeichen enthalten können, wie etwa bei Namen von Schriftarten, können Sie Kommata zum Trennen verwenden. Für solche Fällen können auch Anführungszeichen empfohlen sein.

Bei Namen wie Schriftartangaben oder Angaben wie `left`, `center` usw. ist es zumindest bei der CSS-Anwendung auf HTML-Elemente egal, ob Sie die Angaben groß oder klein schreiben. Das gilt auch für die Stylesheet-Eigenschaften selbst. Wenn Sie CSS allerdings auf XHTML oder gültige XML-Dokumente anwenden, müssen Elementnamen, Attributnamen und Attributzuweisungen so geschrieben werden, wie es in der XML-DTD festgelegt ist. Bei XHTML muss alles klein geschrieben werden.

### Beispiele:

    <style type="text/css">
    p { font-family:"Comic Sans MS",Arial; text-align:center; }
    body  { border:thin dashed silver; background-color:black; }
    DIV.SPEZIAL { BORDER:THICK DOUBLE RGB(0,64,128); }
    blockquote[title="Zitat von Goethe"] { color:#000080; }
    </style>

## Numerische Angaben für Sprachausgabe

Für CSS-Eigenschaften der Sound-Kontrolle für Sprachausgabe, die von den Browsern jedoch bislang nicht unterstützt wird, werden die folgenden Maßangaben aus dem Bereich der Akustik und Zeitmessung verwendet:

Abkürzung | Bedeutung
--- | ---
`deg` | Kreisgrad, wobei der Kreis in 360 Grad aufgeteilt ist Ein rechter Winkel hat z.B. `90deg`
`grad` | Gradient, Maßangabe für Steigungen und Gefälle
`rad` | Radiant, geometrische Maßangabe
`ms` | Millisekunden, Maßangabe für Zeiteinheit
`s` | Sekunden, Maßangabe für Zeiteinheit
`Hz` | Hertz, Maßangabe für Frequenzen
`kHz` | kiloHertz, Maßangabe für Frequenzen

| Das Box-Modell
| Kaskade - Anwendung von Stylesheets auf Dokumente

© 2007 Impressum