Jede in CSS verwendete Eigenschaft hat einen Wertetyp, der die für diese Eigenschaft zulässigen Werte definiert. Ein Blick auf eine beliebige Eigenschaftsseite in unserer CSS-Referenz hilft, die Werte zu verstehen, die mit einem Wertetyp verbunden und für eine bestimmte Eigenschaft gültig sind. In diesem Eintrag werfen wir einen Blick auf einige der am häufigsten verwendeten Wertetypen und ihre häufigsten Werte und Einheiten:

Zahlen, Längen und Prozentsätze

Es gibt verschiedene numerische Wertetypen, die Sie in CSS verwenden können. Die folgenden sind alle als numerisch klassifiziert:

Data typeDescription
<integer>Eine ganze Zahl wie 1024 oder -55.
<number>Eine Dezimalzahl. Sie kann einen Dezimalpunkt mit einer Bruchkomponente haben oder nicht. Zum Beispiel: 0,255, 128 oder -1,2.
<dimension>Eine Dimension ist eine Zahl, der eine Einheit zugeordnet ist. Zum Beispiel 45deg, 5s oder 10px. Dimension ist eine übergeordnete Kategorie, die die Typen Länge, Winkel, Zeit und Auflösung umfasst.
<percentage>Stellt einen Bruchteil eines anderen Wertes dar. Zum Beispiel: 50%. Prozentuale Werte sind immer relativ zu einer anderen Größe. Zum Beispiel ist die Länge eines Elements relativ zur Länge des übergeordneten Elements.

Längen

Der numerische Typ, dem man am häufigsten begegnet, ist die Länge. Zum Beispiel 10px (Pixel) oder 30em. Es gibt zwei Arten von Längen, die in CSS verwendet werden: relativ und absolut. Es ist wichtig, den Unterschied zu kennen, um zu verstehen, wie groß die Dinge werden.

Absolute Längeneinheiten

Bei den folgenden Angaben handelt es sich um absolute Längeneinheiten, d. h. sie sind nicht relativ zu etwas anderem und werden im Allgemeinen immer als gleich groß angesehen:

EinheitBezeichnungÄquivalent zu
cmZentimeter1cm = 37.8px = 25.2/64in
mmMillimeter1mm = 1/10th of 1cm
QViertelmillimeter1Q = 1/40th of 1cm
inInch1in = 2.54cm = 96px
pcPica1pc = 1/6th of 1in
ptPunkt1pt = 1/72th of 1in
pxPixel1px = 1/96th of 1in

Die meisten dieser Einheiten sind eher für den Druck als für die Bildschirmausgabe geeignet. Zum Beispiel verwenden wir auf dem Bildschirm normalerweise nicht cm (Zentimeter). Der einzige Wert, den man im Web üblicherweise verwendet, ist px (Pixel).

Relative Längeneinheiten

Relative Längeneinheiten beziehen sich stets auf etwas anderes, z. B. auf die Größe der Schriftart des übergeordneten Elements oder auf die Größe des Ansichtsfensters (viewport). Der Vorteil der Verwendung relativer Einheiten besteht darin, dass man bei sorgfältiger Planung dafür sorgen kann, dass die Größe von Text oder anderen Elementen relativ zu allem anderen auf der Seite skaliert (das sogenannte responsive Design).

Einige der nützlichsten Einheiten für die Webentwicklung sind in der folgenden Tabelle aufgeführt:

EinheitRelativ zu
emSchriftgröße des übergeordneten Elements, wenn es sich um typografische Eigenschaften wie font-size handelt, und Schriftgröße des Elements selbst, wenn es sich um andere Eigenschaften wie width handelt.
exx-Höhe der Schrift des Elements.
chDas Vorlaufmaß (Breite) der Glyphe „0“ der Schriftart des Elements.
remSchriftgröße des Wurzelelements <body>
lhZeilenhöhe des Elements.
vw1 % der Breite des Ansichtsfensters.
vh1 % der Höhe des Ansichtsfensters.
vmin1 % der kleineren Abmessung (Höhe oder Breite) des Ansichtsfensters.
vmax1 % der größeren Abmessung (Höhe oder Breite) des Ansichtsfensters.