Maßeinheiten

Dieses Kapitel beschäftigt sich mit den in CSS zur Verfügung stehenden Längeneinheiten, z.B. um bestimmten Elementen eine genau festgelegte Größe oder Position zu geben.

In CSS existieren zwei Typen von Längeneinheiten: absolute und relative Längenangaben.

Absolute Längeneinheiten

Die folgende Tabelle gibt eine Übersicht über die fünf absoluten Maßeinheiten:

Die meisten Browser unterstützen alle diese Angaben und sollten deshalb in allen Browser identisch aussehen. Leider kann jeder Benutzer in seinem Computer eigene Angaben zur Größendarstellung machen; vor allem bei Macintosh-Rechner sehen Point-Angaben oft viel zu klein aus.

P.klein { font-size: 1pc; }
P.gross { font-size: 18pt; }

Relative Längeneinheiten

Relative Maßangaben haben immer einen Punkt, auf den sie sich beziehen. Es gibt drei verschiedene Einheiten: em, ex und px. Die ersten beiden Einheiten stehen für “em-height” und “x-height”, was zwei bekannte typographische Maßangaben sind, die allerdings in CSS eine etwas andere Bedeutung haben. “px” steht für Pixel und ist deshalb eine relative Angabe, da die Größe von der Auflösung des Monitors bzw. Ausgabegerätes abhängt.

em- und ex-Einheiten

In CSS ist ein “em” der Wert der Schriftgröße für eine bestimmte Schriftart. Wenn die Schriftgröße 12 Points beträgt, bedeutet das für ein Bezugselement der Größe ein “em” ebenfalls eine Größe von 12 Points. Das folgende Beispiel zeigt die Verbindung zwischen Bezugsgröße (hier der Schriftgröße) und dem Abstand zum linken Rand:

H1 { font-size:24px; }
H2 { font-size:18px; }
P { font-size:12px; }
H1, H2, P { margin-left: 1em; }

SPAN.klein { font-size: 0.75em; }

<P>Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, <SPAN class="klein">quis nostrudexercitation ullamcorper suscipit lobortis</SPAN> nisl ut aliquip ex ea commodo consequat.</P>

Im Gegensatz zu “em” bezieht sich “ex” auf die Höhe eines kleinen x der jeweiligen Schriftart. Bei zwei Paragraphen mit der Größe 16 Points, aber zwei unterschiedlichen Schriftarten, hat eine Angabe von einem “ex” eine unterschiedliche Bedeutung.

Pixel Einheiten

Bei der Angabe in Pixeln wäre eigentlich anzunehmen, dass dies eine absolute, feste Einheit sei. Folgende Annahme zeigt das Problem von Pixel-Angaben: Bei einer Auflösung von 1024 mal 768 Pixeln (Breite x Höhe) und der Größe des Monitors von 14,22 mal 10,67 Inches ist ein Pixel exakt 1/72 Inch breit und hoch. Wie Sie leicht feststellen können, ist eine solche Konstellation sehr selten, besonders die Ausmaße eines solches Monitors sind schwierig zu finden. Bei vielen Monitoren ist die Anzahl der Pixel pro Inch deutlich höher (z.B. 120 ppi).

CSS nimmt 90 Pixel pro Inch an, so dass 90 Pixel ein Inch sind. Macht man nun Angaben in Pixel überlässt man es oft dem Browser wie diese Elemente dargestellt werden. Ein Browser wird zwar in den meisten Fällen die aktuelle Anzahl an Pixeln auf dem Bildschirm benutzen, sicher ist dies aber nicht; vor allem nicht bei anderen Ausgabegeräten wie z.B. Druckern.

Prozentuale Werte

Neben den absoluten im letzten Kapitel beschriebenen Längeneinheiten ist es möglich bestimmte Angaben in Prozent zu machen:

H1 { font-size: 18pt; }
H1.hoch { line-height: 150%; }

<H1>H1-Überschrift mit Standard "line-height"</H1>
<H1 class="hoch">H1-Überschrift mit erhöhter "line-height" (line-height: 150%)</H1>

Prozentuale Werte können prinzipiell negativ oder positiv sein, wobei manche Definitionen nur positive Werte erlauben. Oft entspricht die Angabe 0% oder 100% dem Standardwert.

CSS 2-Maßeinheiten

In CSS 2 wurden drei weitere Arten von Maßangaben hinzugefügt: Winkel-, Zeit- und Frequenz-Angaben. Auf diese Angaben wird hier nicht näher eingegangen.