Absolute und relative Maßeinheiten
Maßeinheiten sind in CSS sehr wichtig. Durch sie wird nicht nur die Größe von Elementen definiert sondern auch deren Position auf der Webseite. Maßeinheiten können in css entweder absolut oder relativ angegeben werden. Achtung: Bei numerischen Werten benutzt man einen Punkt, nicht ein Komma: also 1.75cm und nicht 1,75cm.
Absolute Werte definieren eine Größe, die von deren Umgebung unabhängig ist. Die folgenden absoluten Maßeinheiten werden von allen gängigen Browsern unterstützt:
| cm | Zentimeter | font-size:2cm; top:3,5cm; |
| in | Inch (1 Inch = 2.54 Zentimeter) | border-width:0.5in margin-left:5in; |
| mm | Millimeter | margin-bottom:7mm; width:50mm; |
| pc | Pica (1 Pica = 12 Punkt) | font-size:3pc; line-height:2.3pc; |
| pt | Punkt (1 Punkt = 1/72 Inch) | font-size:14pt; line-height:17pt; |
Relative Werte definieren eine Größe, die von deren Umgebung abhängig ist. Die folgenden relativen Maßeinheiten werden von allen gängigen Browsern unterstützt:
| em | Der Wert bezieht sich auf die Schriftgröße des jeweiligen Elements. Außer dieser hat die gleiche Maßangabe, dann richtet sich der Wert nach dem übergeordneten Element und dessen Größe. | font-size:2.3em; line-height:2.8em; |
| ex | Dieser Wert bezieht sich auf die Höhe des Kleinbuchstaben x des jeweiligen Elements. Außer die font-size-Eigenschaft hat die gleiche Maßangabe, dann richtet es sich nach dem übergeordneten Element und dessen Höhe des Kleinbuchstaben x. | font-size:1.3ex; |
| px | px steht für Pixel. Die Darstellung ist abhängig von der Pixeldichte des Ausgabegeräts. Das heißt relativ also von Ausgabegerät zu Ausgabegerät und absolut ist es auf ein und das selbe Ausgabegerät bezogen. | font-size:13px; line-height:17px; |
| % | % steht für Prozent und verhält sich relativ zur im Element definierten Größe, zu der des Elternelements oder zu der obersten Definition. Bei dem Beispiel bezieht sich die Zeilenhöhe (line-height) relativ zur Schriftgröße (font-size). | font-size:16pt; line-height:120%; |
Verschaff Dir einen Überblick
Wissenswertes, Hilfestellung und Lösungen rund um das Thema CSS:A
Absolute und relative MaßeAbgerundete Ecken
Anordnung
B
background-attachmentbackground-position
C
cm (Zentimeter)Color
Contextual Selectors
CSS Formatierungen
CSS-Sprites
D
Definition mehrerer TagsE
Ebenen / LayerEcke / Eckenrundung
Einbindung CSS
em
ex
Externe CSS-Datei
F
FarbenFarbcodes
Farbnamen
Farbverlauf
Fixierter, fester Hintergrund
G
GradientGrundlagen
H
HintergrundbildHintergrundbild Positionierung
Hover-Effekt über Hintergrundbild
I
IDsin (Inch)
Interne CSS-Datei
K
KlassenKlassifizierung
L
Layer / EbenenListen
P
pcPosition
Positionierung Hintergrundbild
pt (Pica)
px (Pixel)
R
Rahmen FormatierungReihenfolge von Elementen
Relative und absolute Maße
repeat Möglichkeiten
Runde Ecken
S
SchriftformatierungScrollbarer Hintergrund
Sichtbarkeit
Sprites
Stylesheet
T
TextflussTextgestaltung
U
Überhängende InhalteÜbereinander liegende Elemente
V
VererbungVerlauf / Verläufe















