Skip to content

CSS: Farben

Bei einer Website-Gestaltung kommen oft verschiedene Farben an verschiedenen Orten in den Einsatz. In dieser Aufgabe untersuchen wir die unterschiedlichen Arten und schauen uns die unterschiedlichen Deklarationen zum Thema «Farben» an.

Ziel(e)

  • Ich kenne die drei verschiedenen Arten Farben im CSS anzugeben.

  • Ich kann RGB-Farbwerte in HEX-Farbwert umwandeln.

  • Ich kann CSS-Deklarationen zum Thema «Farbe» einsetzen.

Aufgabe

Farben im Web

Farben können im CSS auf drei verschiedene Weisen festgelegt werden:

  • RGB-Werte

  • HEX-Codes

  • Farbnamen

Informiere dich im Internet über diese drei Weise und suche Beispiele dazu. Versuche zusätzlich folgende Fragen zu beantworten:

  1. Mit welcher Farbangabe kann ich z.B. einen Hintergrund in grün einfärben, aber nur 80% deckend?

  2. Wie wandle ich einen RGB-Wert in einen Hex-Code um?

Farb-CSS-Deklarationen

Recherchiere im Internet die folgenden «wichtigen» CSS-Deklarationen:

Eigenschaft Mögliche Werte
color RGB-Wert, HEX-Code, Farbname
background-color RGB-Wert, RGB-Wert mit Deckkraft HEX-Code, Farbname

Erstelle dir zusätzlich eine HTML + CSS-Datei und probiere die CSS-Deklaration aus oder arbeite mit Live-Beispielen im Internet. Entscheide dich für diese Variante, wo du mehr lernst.

Vergiss nicht, alle neu gewonnen Informationen in deinem Projektjournal festzuhalten. Verwende hierzu einen aussagekräftigen Titel im Bereich «freie Gliederung».