PassFront
  1. PassFront
  2. База знаний
  3. Продвинутые темы

Какие особенности свойства 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).

Другие вопросы раздела