Kolor tła

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 25 z 76.

W CSS właściwość background-color służy do ustawiania koloru tła elementu HTML. Ta właściwość pozwala określić wartość koloru.

Oto podstawowa składnia użycia właściwości background-color:

selector {
    background-color: color-value;
}

Oto kilka popularnych sposobów określania wartości kolorów w CSS:

Kolory nazwane: Predefiniowane nazwy kolorów, takie jak red, blue, green, black, white itp.

Wartości szesnastkowe: Sześciocyfrowe kody kolorów poprzedzone symbolem krzyżyka (#), takie jak #FF0000 oznaczający czerwony.

Wartości RGB: Określają składowe czerwonej, zielonej i niebieskiej barwy za pomocą funkcji rgb(), przyjmując wartości od 0 do 255, na przykład rgb(255, 0, 0) dla czerwieni.

Na przykład:

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

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

W tym przykładzie kolor tła elementu <body> jest ustawiony na lightblue, wszystkie nagłówki <h1> mają czerwone tło (#FF0000), a wszystkie elementy <p> (akapity) mają niebieskie tło (rgb(0, 0, 255)).

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z nagłówkiem (<h1>), akapitem (<p>) i elementem div (<div>). Twoim zadaniem jest użycie właściwości background-color do stylizacji tych elementów. Wykonaj poniższe kroki:

Napisz regułę CSS, która dotyczy elementu <h1>. Ustaw background-color na yellow.
Napisz regułę CSS, która dotyczy elementu <p>. Ustaw background-color na #00FF00 (zielony).
Napisz regułę CSS, która dotyczy elementu <div>. Ustaw background-color na rgb(255, 0, 255) (magenta).

Spróbuj swoich sił

<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>