Farben, Einheiten und Werte

Diese Lektion behandelt die Darstellung von Farben sowie die wichtigsten Einheiten und Wertetypen in CSS. Diese Konzepte sind zentral für Layout, Lesbarkeit und responsives Design.

1. Farben in CSS

Definition.
Farben in CSS beschreiben die visuelle Darstellung von Text, Hintergründen, Rahmen und anderen Elementen.

1.1 Farbname

p {
    color: red;
}

Farbnamen sind einfach, aber begrenzt und nicht exakt.

1.2 Hexadezimale Farben

Hex-Farben bestehen aus drei Paaren hexadezimaler Ziffern: Rot, Grün und Blau.

h1 {
    color: #2b7cff;
}

#000000 – schwarz
#ffffff – weiß
#ff0000 – rot

1.3 RGB und RGBA

RGB beschreibt Farben durch Intensitäten von Rot, Grün und Blau im Bereich von 0 bis 255.

div {
    background-color: rgb(43, 124, 255);
}

RGBA erlaubt zusätzlich Transparenz (Alpha-Kanal).

.overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

1.4 HSL und HSLA

HSL steht für Hue (Farbton), Saturation (Sättigung) und Lightness (Helligkeit).

p {
    color: hsl(210, 80%, 50%);
}

HSL ist oft intuitiver als RGB, besonders bei Design-Anpassungen.

2. Absolute Einheiten

Absolute Einheiten haben feste Größen unabhängig vom Kontext.

px – Pixel (am häufigsten)
cm, mm
in, pt

h1 {
    font-size: 32px;
}

Absolute Einheiten sind für Druck geeignet, aber eingeschränkt flexibel.

3. Relative Einheiten

Relative Einheiten passen sich an Kontext oder Bildschirmgröße an.

% – relativ zum Elternelement
em – relativ zur Schriftgröße des Elternelements
rem – relativ zur Schriftgröße des Root-Elements

p {
    font-size: 1.2em;
}

rem wird für skalierbare Layouts bevorzugt.

4. Viewport-Einheiten

Viewport-Einheiten beziehen sich auf die Größe des Browserfensters.

vw – 1% der Viewport-Breite
vh – 1% der Viewport-Höhe
vmin, vmax

section {
    min-height: 100vh;
}

5. Zahlen, Schlüsselwörter und Funktionen

CSS-Werte können unterschiedliche Typen haben.

Zahlen: 0, 1.5
Schlüsselwörter: auto, inherit, none
Funktionen: rgb(), calc()

.box {
    width: calc(100% - 2rem);
}

6. Zusammenfassung

Farben: Name, Hex, RGB(A), HSL(A)
Absolute vs. relative Einheiten
Viewport-Einheiten für responsives Design
CSS-Werte können Zahlen, Keywords oder Funktionen sein

Die richtige Wahl von Farben und Einheiten ist entscheidend für modernes, responsives Webdesign.