Какие особенности свойства color у элемента важно учитывать на практике и почему?
Продвинутые темы
Особенности свойства `color`: оно наследуется потомками, задаёт цвет текста и `currentColor`, зависит от специфичности и каскада, поддерживает разные форматы (hex, rgb, hsl, именованные).
Особенности
Наследуется
color наследуется потомками — если у ребёнка не задан, берётся от родителя:
.parent { color: red; }
.child { } /* унаследует red */currentColor
Значение color доступно как currentColor для других свойств (границы, фон, SVG):
.box {
color: blue;
border: 1px solid currentColor; /* синяя граница */
}Удобно для иконок/границ в цвет текста.
Зависит от каскада и специфичности
Применяемый цвет определяется каскадом: специфичность селектора, !important, порядок правил, инлайн-стили могут переопределить.
Форматы значений
color: red; /* именованный */
color: #ff0000; /* hex */
color: rgb(255, 0, 0); /* rgb */
color: rgba(255,0,0,0.5); /* с прозрачностью */
color: hsl(0, 100%, 50%); /* hsl */Применяется к тексту
color задаёт цвет текста (и text-decoration, маркеров списка), не фона (для фона — background-color).
Нюансы
- Наследование можно прервать (
color: initial) или явно унаследовать (inherit). - SVG-иконки часто красят через
currentColorдля наследования цвета текста.
Коротко для собеседования
Особенности color: наследуется потомками (унаследует от родителя, если не задан), доступен как currentColor для других свойств (границы/SVG в цвет текста), зависит от каскада/специфичности (может переопределяться), поддерживает форматы (hex, rgb/rgba, hsl, именованные), красит текст (не фон — для фона background-color).