Webdesign, Tutorials und mehr - Webmasterpro.de

Webmasterpro » Artikel » Entwicklung » CSS » Referenz » CSS Einheiten (CSS Referenz)

CSS Einheiten (CSS Referenz)

Da der Großteil der Style-Definitionen über Längen, Breiten und Größen angegeben wird ist es wichtig die richtigen Einheiten zu wählen. Der folgende Artikel gibt über ebendiese Aufschluss.

Längeneinheiten

Es gibt mehrer Längeneinheiten für verschiedene Ausgabemedien (Bildschirm, Druck) ausgelegt sind. Desweiteren kann zwischen absoluten und relativen Einheiten unterschieden werden. "Absolut" bedeutet hierbei, dass die Einheit einer physikalischen Größe entspricht.

Relative Einheiten

Relative Einheiten eignen sich am Besten für die Darstellung im Web.

Einheit	Eigenschaft
px	Länge in Pixeln
em	Längeneinheit entspricht der aktuellen Schriftart und Schriftgröße
ex	Längeneinheit entspricht der höhe des Buchstaben x in der aktuellen Schriftart und Schriftgröße

Pixel, eine relative Einheit?

Pixel werden auf dem Display relativ zur dpi-Zahl des Monitors dargestellt. Je nach Monitor ist eine Pixelangabe also unterschiedlich groß und damit die Einheit px relativ zum verwendeten Monitor. Deswegen spricht man auch bei px von einer relativen Einheit. Da der CSS-Pixel oft einen absoluten Charakter hat, da er auf ein und demselben Ausgabegerät einer absoluten Größe entspricht, wird er gerne mit einer absoluten Einheit verwechselt.

Moderne Bildschirme erreichen inzwischen dpi-Zahlen, bei der ein Display-Pixel sehr klein wird. Dementsprechend werden Webseiten schnell unleserlich dargestellt, wenn mit px gearbeitet wird. Deswegen arbeiten viele Browser heutzutage mit einer Skalierung des CSS-Pixels (px). Hierbei wird der Pixel bei hoher dpi-Zahl mit ganzzahligen Faktoren skaliert. Der verwendete Faktor ist von einer physikalischen Einheit abhängig (beispielsweise wird im Firefox versucht einen Pixel nahe an 1/96-Inch zu halten), wodurch der Pixel einer absoluten Einheit ähnlicher wird. Da die Skalierung mit ganzzahligen Faktoren arbeitet, also nicht linear ist, kann man aber weiterhin nicht von einer absoluten Einheit sprechen.

Auf heute üblichen Bildschirmen (50-100dpi) entspricht 1px (ein CSS-Pixel) weiterhin einem Display-Pixel, erst bei hochauflösenderen Geräten kommt die Skalierung zum Tragen. Beim Apples iPhone (Display mit 160dpi) kann beispielsweise 1px als zwei Display-Pixel dargestellt werden.

absolute Einheiten

Absolute Einheiten werden am Besten für die Druckausgabe benutzt, da sie sich auf physikalische Größen beziehen.

Einheit	Bedeutung
cm	Zentimeter
mm	Millimeter
in	Zoll (engl: Inch)
pt	Punkt (1pt = 1/72in)
pc	Picas (1pc = 12pt)

Prozentuale Einheiten (%)

Prozentuale Einheiten (%) beziehen sich immer auf eine andere Einheit. Auf was genau sich die Einheit bezieht, kann aber oft unterschiedlich sein und hängt von der CSS-Eigenschaft ab, in der die Einheit benutzt wird. Hier ein nicht vollständiger Überblick:

Eigenschaft	bezieht sich auf
font-size	die Schriftgröße des Elternelements
text-indent	die Breite des Elternelements
line-height	die Schriftgröße des Elements selbst
margin, padding, width, right	die Größe des Elternelements
border	nicht verfügbar
background-position	Größe des Elements

CSS3

Winkel

Einheit	Bedeutung
deg
grad
rad	Radius
turn

Zeit

Einheit	Bedeutung
ms	Millisekunden
s	Sekunden

Frequenzen

Einheit	Bedeutung
Hz	Hertz
kHz	Kilohertz

weitere CSS3 Einheiten

Einheit	Bedeutung
dpi	dots per inch
dpcm	dots per centimetre
dppx	dots per pixel
gd
fr
rem	Größe des root Elements
vw	Breite des Viewport
vh	Höhe des Viewport
vm	kleinere Breite / Höhe des Viewport
ch
gr

Links

Pixel in EMs umrechnen: EmChart Converter

Kommentare: CSS Einheiten (CSS Referenz)