HEX-Farben

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 26 von 76.

Hex-Farben sind eine Möglichkeit, Farben mithilfe von Hexadezimalwerten anzugeben. Ein hexadezimaler Farbcode ist ein sechsstelliger Code, dem ein Raute-Symbol (#) vorangestellt ist und der die Menge an rotem, grünem und blauem Licht darstellt, aus der eine Farbe besteht.

Jedes Ziffernpaar im Code repräsentiert die Intensität einer dieser Primärfarben, im Bereich von 00 (keine Intensität) bis FF (volle Intensität). Hex-Farben bieten eine breite Palette an Farbmöglichkeiten und sind im Webdesign weit verbreitet.

Hier ist die grundlegende Syntax für die Verwendung von Hex-Farben in CSS:

selector {
    color: #RRGGBB;
    background-color: #RRGGBB;
}

Zum Beispiel:

p {
    color: #FF0000; /* Rot */
    background-color: #00FF00; /* Grün */
}

Sie können auch die Kurzschreibweise für Hex-Farben verwenden, wenn beide Ziffern in jedem Paar gleich sind. Zum Beispiel:

p {
    color: #F00; /* Rot (entspricht #FF0000) */
    background-color: #0F0; /* Grün (entspricht #00FF00) */
}

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit zwei Überschriften (<h1> und <h2>) und einem Absatz (<p>). Ihre Aufgabe ist es, hexadezimale Farbcodes für Hintergrundfarben zu verwenden. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel für das <h1>-Element. Setzen Sie die Hintergrundfarbe auf electric purple unter Verwendung des Hex-Farbcodes #BF00FF.
Schreiben Sie eine CSS-Regel für das <h2>-Element. Setzen Sie die Hintergrundfarbe auf neon green unter Verwendung von #39FF14.
Schreiben Sie eine CSS-Regel für alle <p>-Elemente. Setzen Sie die Hintergrundfarbe auf light gray unter Verwendung von #D3D3D3.

Spickzettel

Hex-Farben verwenden einen sechsstelligen Hexadezimalcode, dem ein Raute-Symbol (#) vorangestellt ist, um Farben zu spezifizieren. Jedes Ziffernpaar repräsentiert die Intensität von rotem, grünem und blauem Licht, reichend von 00 (keine Intensität) bis FF (volle Intensität).

Grundlegende Syntax:

selector {
    color: #RRGGBB;
    background-color: #RRGGBB;
}

Beispiel:

p {
    color: #FF0000; /* Rot */
    background-color: #00FF00; /* Grün */
}

Die Kurzschreibweise kann verwendet werden, wenn beide Ziffern in jedem Paar identisch sind:

p {
    color: #F00; /* Rot (entspricht #FF0000) */
    background-color: #0F0; /* Grün (entspricht #00FF00) */
}

Probier es selbst

<html>
<head>
    <title>HEX Colors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This heading has an electric purple background!</h1>
    <h2>This heading has a neon green background.</h2>
    <p>This paragraph has a light gray background.</p>
</body>
</html>