Свойства цвета в CSS
В прошлой лекции мы научились задавать цвет разными способами: именами, HEX, RGB, HSL. Теперь посмотрим, к каким свойствам CSS эти цвета можно применять.
1. Цвет текста — color
Свойство color задаёт цвет текста внутри элемента.
p {
color: red;
}
h1 {
color: #530899;
}
.special {
color: rgb(0, 0, 255);
}Пример в браузере:
Красный текст (color: red)
Фиолетовый текст (color: #530899)
Синий текст (color: rgb(0, 0, 255))
2. Цвет фона — background-color
Свойство background-color задаёт цвет фона элемента.
div {
background-color: #f0f0f0;
}
.warning {
background-color: rgba(255, 0, 0, 0.2);
}
.header {
background-color: #530899;
}Пример в браузере:
Светло-серый фон (background-color: #f0f0f0)
Полупрозрачный красный фон (background-color: rgba(255, 0, 0, 0.2))
Фиолетовый фон (background-color: #530899)
📌 Важно:
background-color заливает фон только внутри элемента, включая область padding (внутренние отступы).
3. Сочетание цвета текста и фона
Один элемент может одновременно иметь и цвет текста, и цвет фона. Главное — обеспечить контраст, чтобы текст был читаем.
.card {
color: white;
background-color: #530899;
padding: 20px;
border-radius: 16px;
}Пример в браузере:
Белый текст на фиолетовом фоне
📌 О границах: Цвет границы (
border-color) и другие свойства рамок мы рассмотрим в отдельной лекции, посвящённой блочной модели и границам.
📓 Из тетради: «Цвет — это язык дизайна. Текст читается, фон создаёт настроение. Используйте цвет осознанно: контраст должен быть, а глаз — не уставать».