Maßeinheiten

Regeln für Maßeinheiten

• Kein Leerzeichen zwischen Zahl und der Maßeinheit
  9px nicht 9 px
• Komma wird als Punkt geschrieben
  1.2em nicht 1,2em
• Bei Dezimalzahlen darf eine führende Null entfallen
  font-site:.6em;
• Werte von 0 werden ohne Maßeinheit notiert
  border:0;
• Negative Zahlen werden durch einen Bindestrich markiert
  -17px

Maßeinheiten

Relative Maßeinheiten

• orientieren sich an anderen Werten
• gut geeignet für Bildschirmdarstellung
• Beispiel: Pixel (px), Prozent (%)

Absolute Maßeinheiten

• stehen für sich
• gut geeignet für Druckausgaben
• Beispiel: Millimeter (mm) oder Punkt (pt)

Maßeinheiten - relativ

Maßeinheit	Beschreibung
px	Pixel. Größe abhängig von der Bildschirmauflösung
em	Höhe des Großen „M“ der gewählten Schriftart
ex	Höhe des kleinen „x“ der gewählten Schriftart
%	Prozent, abhängig vom übergeordneten Element

Maßeinheiten - absolut

Maßeinheit	Beschreibung	in mm
mm	Millimeter	1,000
cm	Zentimeter	10,000
in	Inch (Zoll)	25,399
pt	Pica Point	0,351
pc	Pica	4,217

Maßeinheiten

• px
• für Darstellung am Bildschirm
• verbreitet für Bilder und eingebettete Objekte
• bezogen auf die Auflösung des Geräts
• pt, pc, cm, mm, in
• für Druckausgabe mit fester Papiergröße
• pt üblich für Schriften
• cm, mm, in für Positionen und Abstände

Prozent (%) bezogen auf

• font-size - Schriftgröße des umschließenden Blocks
• width, height - Breite/Höhe des umschließenden Blocks
• margin, padding - Breite/Höhe des eigenen Blocks

em, ex bezogen auf

• font-size - Schriftgröße des umschließenden Blocks
• andere Attribute - Schriftgröße des Elements

Empfehlung

• Schriftgröße in % oder em (einstellbar im Browser)
• Ränder, Außen- und Innenabstände in em (passend zur Schrift)
• Bilder in em (passend zur Schrift)
• Größe von Blöcken
• fensterabhängig in % (falls Umbruch möglich) oder
• schriftabhängig in em (falls zu klein für Umbruch)
• Position von Blöcken
• vorzugsweise fließend
• abwägen: fensterabhängig in % oder schriftabhängig in em
• möglichst nicht absolut positionieren

Angabe von Farbwerten

Notationen für Farbwerte

• rgb(255,140,0) - Farbanteile rot, grün, blau im Bereich 0…255
• rgb(100%,55%,0%) - Farbanteile im Bereich 0%…100%
• #FF8C00 - Farbanteile hexadezimal (00…FF)
• benannte Farben: black, white, olive, …

Erweiterungen durch CSS3

• hsl(0, 100%, 50%) - HSL (hue saturation lightness) Farbraum
• Angabe eines Alpha-Kanals als vierten Wert rgb(255,140,0,0.5)

Benannte CSS-Grundfarben

Farbe	Name	Hex	Dezimal
	black	#000000	0,0,0
	silver	#C0C0C0	192,192,192
	gray	#808080	128,128,128
	white	#FFFFFF	255,255,255
	maroon	#800000	128,0,0
	red	#FF0000	255,0,0
	purple	#800080	128,0,128
	fuchsia	#FF00FF	255,0,255
	green	#008000	0,128,0

Farbe	Name	Hex	Dezimal
	lime	#00FF00	0,255,0
	olive	#808000	128,128,0
	yellow	#FFFF00	255,255,0
	navy	#000080	0,0,128
	blue	#0000FF	0,0,255
	teal	#008080	0,128,128
	aqua	#00FFFF	0,255,255