6.2.15 Exkurs – Eigenschaftswerte: Längenmaße, Farben, Schlüsselwörter

In den vorherigen Abschnitten und im folgenden Kapitel nennen wir immer wieder Anwendungsbeispiele. Es ist wichtig, dass wir zumindest die gängigsten Eigenschaftswerte wie Längenmaße, Farbangaben und Schlüsselwörter kennen. Diese stellen wir im Folgenden tabellarisch vor.

Absolute und relative Längenmaße

Längenmaße drücken wir in positiven oder negativen Zahlenwerten aus. Unmittelbar danach (ohne Leerzeichen) folgt die Einheitsbezeichnung. Ist der Wert 0, kann die Einheitsbezeichnung entfallen. Absolute Einheiten bezeichnen immer feststehende Werte, während relative Einheiten sich im Verhältnis zu anderen Elementen verhalten.

Tabelle: Längenmaße

Längenmaß	Bedeutung	Beispiel
`cm`	allgemeines Längenmaß; 2,54 cm sind 1 Inch	`font-size: 1cm;` `top: 2.54cm;`
`em`	bezieht sich auf die Höhe der Schriftart	`font-size: 1.2em;` `line-height: 1.5em;`
`in`	allgemeines Längenmaß im angelsächsischen Raum	`border-width: 0.1in;` `margin-left: 1in;`
`mm`	10 mm = 1 cm	`margin-bottom: 10mm;` `width: 70mm;`
`pc`	typographische Maßeinheit; 1pc = 12pt	`font-size: 1pc;` `line-height: 1.2pc;`
`pt`	typographische Maßeinheit; 72pt = 1 Inch	`font-size: 12pt;` `line-height: 14pt;`
`px`	ein Bildschirmpunkt; abhängig von der Pixeldichte	`border-width: 3px;` `margin-right: 60px;`

Prozentwerte und Viewport-Werte

Prozentwerte geben wir als positive oder negative Zahlenwerte mit einem Prozentzeichen (%) an. Prozentangaben sind relativ zu anderen CSS-Eigenschaften. Beispiel:

font-size: 10pt;
line-height: 120%;

Viewport-Werte (vh, vw) beziehen sich auf die Abmessungen des Ansichtsfensters. Zusätzliche Einheiten wie vmin und vmax beziehen sich auf die kleinere oder größere Seite des Viewports. Beispiele:

width: 80vw;
height: 25vh;
font-size: 10vmin;

Farbangaben

In CSS definieren wir Farben auf verschiedene Arten. Beispiele:

Notation	Erklärung
`#RRGGBB`	Hexadezimale Paarwert-Notation (`00` bis `FF`)
`#RGB`	Kurzschreibweise; jede Stelle wird verdoppelt
`rgb(rrr%,ggg%,bbb%)`	RGB-Werte von `0%` bis `100%`
`rgb(rrr,ggg,bbb)`	RGB-Werte innerhalb einer Spanne von `0` bis `255`
`rgba(r, g, b, a)`	RGB-Werte plus Alphakanal für Transparenz; `a` liegt zwischen `0` und `1`
`hsl(h, s%, l%)`	HSL-Farbraum: Farbton (0–360), Sättigung und Helligkeit
`hsla(h, s%, l%, a)`	HSL plus Alphakanal
Schlüsselwörter	Über 160 benannte Farben, z. B. `red`, `blue`, `lightseagreen`, `rebeccapurple` Link zur vollständigen Liste der benannten Farben

Schlüsselwörter

Schlüsselwörter sind Werte, die wir nur für bestimmte Eigenschaften verwenden können, z. B.:

solid für border-style
left, right, center für text-align

Beispiel: Verwendung von Schlüsselwörtern

h1 {
  text-align: center; /* Zentrierter Text */
  border-style: solid; /* Einfache Linie */
}