SELFHTML

Maßeinheiten, Farbangaben und Wertzuweisung

Informationsseite

nach unten Numerische Angaben
nach unten Farbangaben
nach unten Erlaubte feste Werte und Zeichenkettenangaben
nach unten Numerische Angaben für Sprachausgabe

 nach unten 

CSS 1.0Netscape 4.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 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. CSS 2.0 bietet zwar mit den erweiterten Möglichkeiten, Seite 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.

Tip:

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

nach obennach unten

CSS 1.0Netscape 4.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 Farbangaben

Farbangaben in Stylesheets nach CSS-Syntax sind nach den Regeln zum Seite Definieren von Farben in HTML möglich. Sie können Farbwerte also hexadezimal nach dem Schema #RRGGBB angeben, aber auch die verbreiteten Farbnamen verwenden. 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>

CSS 2.0 Anwender-relative Farbwörter

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:

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.

Beispiele:

<style type="text/css">
h1 { color:WindowText; background-color:InfoBackground; }
body  { background-color:AppWorkspace; }
</style>

 

nach obennach unten

CSS 1.0Netscape 4.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 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>

 

nach obennach unten

CSS 2.0 Numerische Angaben für Sprachausgabe

Für CSS-Eigenschaften der Seite 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

 
 nach oben
weiter Seite Das Box-Modell
zurück Seite Kaskade - Anwendung von Stylesheets auf Dokumente
 

© 2005 Seite Impressum