SELFHTML/Navigationshilfen CSS Stylesheets CSS-Formate definieren

	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:

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 am einen Bildschirm gut lesbar sind, in einer anderen Umgebung 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,  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 vielen Seiten zu hören bekommen, Ihre Seiten seien schwer lesbar.

Tip:

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

 Farbangaben

Farbangaben in Style-Sheets nach CSS-Syntax sind nach den Regeln zum  Definieren von Farben in HTML möglich. Sie können Farbwerte also hexadezimal nach dem Schema #XXXXXX angeben, aber auch die verbreiteten Farbnamen verwenden.

Eine weitere Möglichkeit, Farben zu definieren, stellt die CSS-Style-Sheet-Sprache 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. rrr ist der Rotwert, ggg der Grünwert und bbb der Blauwert der Farbe. 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); }
blockquote  { background-color:rgb(60%,90%,75%); }
//-->
</style>

 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 unterhalb des folgenden Beispiels erläutert.

Beispiele:

<style type="text/css">
<!--
h1 { color:windowtext; background-color:infobackground; }
body  { background-color:appworkspace; }
//-->
</style>

 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 Style-Sheet-Angabe text-align zur Ausrichtung von Text, die die gleichen Angaben erwartet, also left, center oder right.

Manche Style-Sheet-Angaben erwarten die Angabe eines Namens oder auch mehrerer Schlüsselwörter. So können Sie hinter der Style-Sheet-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. In solchen Fällen sind auch Anführungszeichen empfehlenswert.

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 Style-Sheet-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:

	Schriftformatierung
	HTML-Elemente direktformatieren

SELFHTML/Navigationshilfen CSS Stylesheets CSS-Formate definieren

© 2001  selfhtml@teamone.de