Свойство color: цвет текста
Как задавать цвет текста, использовать наследование и currentColor.
Как это работает
color задаёт основной цвет текстового содержимого. Свойство наследуется: если определить цвет у контейнера, его потомки используют это значение, пока более конкретное правило не задаст другое. Это помогает оформить целый раздел без повторения одного объявления.
Цвет можно записать именем, HEX или функциональной нотацией. currentColor ссылается на вычисленное значение color текущего элемента и удобен для рамок и значков. Проверяйте контраст пары текста и фона, а не привлекательность цвета отдельно.
Пример в интерфейсе
.note { color: #11694e; border: 2px solid currentColor; padding: 18px; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| #11694e | Шестнадцатеричная запись RGB. |
| rgb(17 105 78) | Функциональная запись каналов. |
| currentColor | Текущий цвет текста элемента. |
| inherit | Явно взять значение родителя. |
На что обратить внимание
Не передавайте ошибку только красным цветом. Добавьте текст причины и способ исправления, чтобы сообщение оставалось понятным всем.
Проверьте на практике
Поменяйте color у .note и убедитесь, что рамка тоже меняет цвет благодаря currentColor.
Связанные темы: background, border.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.