CSS Einheiten (CSS Referenz)

0 | 17084 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "CSS Einheiten (CSS Referenz)" mit Ihrem Wissen!

Anzeige Hier werben

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.

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unbekannt12Unbekannt
1+Unterstützt
Safari4Unterstützt5Unterstützt
px, pt, pc, cm, mm, in, em, ex, %

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

Firefox3.6Unterstützt4+Unterstützt
IE7Unbekannt8Unbekannt9Unbekannt
Opera11Unbekannt12Unbekannt
1+Unbekannt
Safari4Unterstützt5Unterstützt
deg, grad, rad
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

Pixel in EMs umrechnen: EmChart Converter


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 5 Personen an der Seite "CSS Einheiten (CSS Referenz)" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "CSS Einheiten (CSS Referenz)" hier bearbeiten.

Mitarbeiter