Цвет фона

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 25 из 76.

В CSS свойство background-color используется для установки цвета фона HTML-элемента. Это свойство позволяет указать значение цвета.

Вот базовый синтаксис для использования свойства background-color:

selector {
    background-color: color-value;
}

Вот несколько распространенных способов задания значений цвета в CSS:

Именованные цвета: Предопределенные названия цветов, такие как red, blue, green, black, white и т. д.

Шестнадцатеричные значения: Шестизначные цветовые коды, перед которыми стоит символ решетки (#), такие как #FF0000 для красного.

Значения RGB: Задает красную, зеленую и синюю составляющие цвета с помощью функции rgb(), со значениями в диапазоне от 0 до 255, например rgb(255, 0, 0) для красного цвета.

Например:

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

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

В этом примере цвет фона элемента <body> установлен как lightblue, все заголовки <h1> имеют красный фон (#FF0000), а все элементы <p> (абзацы) имеют синий фон (rgb(0, 0, 255)).

Задание

Легко

Вам дан HTML-документ с заголовком (<h1>), абзацем (<p>) и блоком (<div>). Ваша задача — использовать свойство background-color для стилизации этих элементов. Выполните следующие шаги:

Напишите CSS-правило для элемента <h1>. Установите background-color в значение yellow.
Напишите CSS-правило для элемента <p>. Установите background-color в значение #00FF00 (зеленый).
Напишите CSS-правило для элемента <div>. Установите background-color в значение rgb(255, 0, 255) (пурпурный).

Шпаргалка

Свойство background-color устанавливает цвет фона HTML-элемента:

selector {
    background-color: color-value;
}

Значения цвета могут быть указаны с помощью:

Именованных цветов: red, blue, green, black, white
Шестнадцатеричных значений: #FF0000 (красный)
Значений RGB: rgb(255, 0, 0) (красный)

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

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

Попробуйте сами

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