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:

1
2
3
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

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