Eigenschaften und deren Werte I

Größenangaben

Größenangaben erfolgen entweder relativ oder absolut.
Für absolute Angaben gibt es verschiedene Einheiten, jedoch hat sich hier die Verwendung von px für Pixel = Bildpunkte etabliert.
Für relative Angaben werden häufig verwendet:

• % für prozentuale Angaben, relativ zum Elternelement
• em für relative Schriftgrößen
• vw relativ zu 1% der Breite des Viewports
• vh relativ zu 1% der Höhe des Viewports

Farbwerte

Farbwerte können auf unterschiedliche Weise angegeben werden.

• Farbnamen Zum Teil einfach weil intuitiv für die Grundfarben, z.B. white, red, blue, für alles weitere aber nicht sehr präzise (vgl. »rosybrown« ??)
• Hexadezimal Format #RRGGBB mit R = Rot, G = Grün, B = Blau.
  Die möglichen Werte reichen von 0-9,A-F.
  Wenn die beiden Werte für Rot, Grün und Blau jeweils gleich sind, kann auch die Kurzschreibweise verwendet werden, z.B. #F90 anstatt #FF9900
• RGB Format rgb(R, G, B) mit R = Rot, G = Grün, B = Blau.
  Die möglichen Werte reichen von 0 - 255, z.B. rgb(255, 128, 0)
• RGBA Format rgb(R, G, B, A) mit R = Rot, G = Grün, B = Blau, A = Alpha.
  Die möglichen Werte reichen von 0 - 255 für R, G, B und 0 - 1 für die Transparenz Alpha, z.B. rgb(255, 128, 0, 0.4)

Abstände innen/außen

• margin Außenabstand
• padding Innenabstand

Für beide Elemente kann eine einzige Angabe gemacht oder zusätzlich zwischen rechts/links und oben/unten unterschieden werden. Über anhängen von -right, -left, -top, -bottom können so konkret die einzelnen Seiten angesprochen werden.

Damit man nicht unendlich viel notieren muss, gibt es für margin & padding eine Kurzschreibweise, die es entweder erlaubt, die Werte für oben/unten und rechts/links zusammenzufassen, oder alle 4 einzeln in der Reihenfolge oben rechts unten links aufzuführen, z.B.
padding: .5em 1em; margin: 1em 0 2em 2em;