color
– одно из самых базовых CSS-свойств, которое отвечает за цвет текста и текста в элементах (например, градиентных фонах и SVG).
p {
color: red;
}
CSS позволяет задавать цвета несколькими способами
Наследование
color
наследуется потомками по умолчанию, в отличие от многих других свойств CSS (например, background
). body {
color: blue;
}
p {
color: inherit; /* Явное наследование */
}
currentColor
— скрытое золотоЭто специальное значение, которое означает "используй текущее значение
color
". Очень полезно для стилизации border
, box-shadow
, outline
и SVG. button {
color: red;
border: 2px solid currentColor; /* Использует color */
}
transparent
— особый цветp {
color: transparent;
}
Когда
rgba()
или hsla()
лучшеp {
color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный */
}
color
и mix-blend-mode
Можно заставить текст взаимодействовать с фоном с помощью
mix-blend-mode
h1 {
color: white;
mix-blend-mode: difference;
}
color
в ::selection
и ::placeholder
Некоторые элементы (например, выделенный текст или placeholder в input) требуют отдельного указания
color
::selection {
background: blue;
color: white;
}
input::placeholder {
color: gray;
}
Ставь 👍 и забирай 📚 Базу знаний