Hintergrundfarbe

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

In CSS wird die background-color-Eigenschaft verwendet, um die Hintergrundfarbe eines HTML-Elements festzulegen. Diese Eigenschaft ermöglicht es Ihnen, einen Farbwert anzugeben.

Hier ist die grundlegende Syntax für die Verwendung der background-color-Eigenschaft:

selector {
    background-color: color-value;
}

Hier sind einige gängige Möglichkeiten, Farbwerte in CSS anzugeben:

Benannte Farben: Vordefinierte Farbnamen, wie zum Beispiel red, blue, green, black, white, usw.

Hexadezimalwerte: Sechsstellige Farbcodes, denen ein Hash-Symbol (#) vorangestellt ist, wie zum Beispiel #FF0000 für Rot.

RGB-Werte: Gibt die Rot-, Grün- und Blaukomponenten einer Farbe unter Verwendung der rgb()-Funktion an, wobei die Werte von 0 bis 255 reichen, wie zum Beispiel rgb(255, 0, 0) für Rot.

Zum Beispiel:

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

p {
    background-color: rgb(0, 0, 255);
}

In diesem Beispiel wird die Hintergrundfarbe des <body> Elements auf lightblue festgelegt, alle <h1> Überschriften haben einen roten Hintergrund (#FF0000), alle <p> (Absatz-)Elemente haben einen blauen Hintergrund (rgb(0, 0, 255)).

Aufgabe

Einfach

Ihnen wird ein HTML-Dokument mit einer Überschrift (<h1>), einem Absatz (<p>) und einem Bereich (<div>) gegeben. Ihre Aufgabe ist es, die Eigenschaft background-color zu verwenden, um diese Elemente zu gestalten. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die auf das <h1>-Element abzielt. Setzen Sie die background-color auf yellow.
Schreiben Sie eine CSS-Regel, die auf das <p>-Element abzielt. Setzen Sie die background-color auf #00FF00 (Grün).
Schreiben Sie eine CSS-Regel, die auf das <div>-Element abzielt. Setzen Sie die background-color auf rgb(255, 0, 255) (Magenta).

Spickzettel

Die Eigenschaft background-color legt die Hintergrundfarbe eines HTML-Elements fest:

selector {
    background-color: color-value;
}

Farbwerte können wie folgt angegeben werden:

Benannte Farben: red, blue, green, black, white
Hexadezimalwerte: #FF0000 (Rot)
RGB-Werte: rgb(255, 0, 0) (Rot)

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

p {
    background-color: rgb(0, 0, 255);
}

Probier es selbst

<html>
<head>
    <title>Background Color</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>