Как изменить цвет фона
Короткий ответ
Цвет фона задаёт background-color:
<div style="background-color: lightyellow; padding: 12px;">A yellow note</div>Как записать цвет
Один и тот же цвет можно записать по-разному — выберите удобный формат:
<style>
.s { padding: 6px 10px; margin-bottom: 4px; color: white; }
</style>
<div class="s" style="background-color: teal;">Name: teal</div>
<div class="s" style="background-color: #008080;">Hex: #008080</div>
<div class="s" style="background-color: rgb(0 128 128);">RGB: rgb(0 128 128)</div>
<div class="s" style="background-color: hsl(180 100% 25%);">HSL: hsl(180 100% 25%)</div>В hsl() удобно подбирать оттенки: меняете последнее число — цвет становится светлее или темнее.
Фон всей страницы
Задайте фон элементу body:
body { background-color: #f5f5f0; }Короткое свойство background тоже задаёт цвет, но заодно сбрасывает картинку, размер и другие настройки фона. Если меняете только цвет — пишите background-color.
Частая ошибка
Меняют фон и забывают про цвет текста: тёмный текст на тёмно-синем фоне не прочитать. Всегда задавайте color в паре с фоном и проверяйте контраст — в инструментах разработчика он показан рядом с цветом.
Функции из этого ответа
- background-color — Цвет фона элемента.
- background — Сокращённая запись всех свойств фона: цвета, картинки, положения, размера и повторения.
- color — Цвет текста (а также цвет рамок и SVG-значков по умолчанию).
- rgb() — Цвет из красной, зелёной и синей составляющих, по желанию с прозрачностью.