color

CSS-властивість color (укр. — “колір тексту”) використовується для задання кольору текстового вмісту елемента. Вона впливає лише на текст та деякі супутні декоративні елементи (наприклад, маркери списків).

Інтерактивний приклад використання

Випускники GoIT працюють у 2100+ ІТ-компаній України, Європи та США

Синтаксис

color: <color> | currentColor | transparent;

Значення

  • <color> — будь-яке значення кольору (іменований колір, hex, rgb, hsl, тощо)
  • currentColor — використовує поточний колір елемента (зручно для узгодження тексту і рамок/іконок)
  • transparent — робить текст прозорим

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням (для color це зазвичай чорний);
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • Властивість color успадковується (inherit за замовчуванням)
  • Впливає також на маркери списків (<li>), рамки деяких елементів форм та інші текстові елементи
  • Прозорі кольори (rgba, hsla, transparent) зручні для адаптивного дизайну
  • currentColor часто використовують для стилізації рамок, псевдоелементів і SVG-іконок, щоб вони відповідали кольору тексту
  • Підтримується всіма сучасними браузерами