Как поменять цвет текста CSS

Опубликовано: 27 июля 2025

Обновлено: 4 января 2026

Изменить цвет текста через CSS — вроде бы мелочь, а спотыкаются об неё даже те, кто уверенно пишет на HTML и сверстал уже не один лендинг. Как задать color, почему :hover иногда не срабатывает, и что вообще выбрать — hex, rgb или тот самый rgba? Мы не будем грузить теорией. Лучше покажем на конкретных примерах, как всё это работает на деле — от базовых до чуть более хитрых случаев. Без воды, но с чувством.

3771 просмотров

3 мин. чтения

Содержание

Цвет текста в HTML можно изменить с помощью CSS-стилизации, но выбор способа напрямую влияет на качество и удобство поддержки кода. Наиболее предпочтительным считается использование внешних таблиц стилей, так как они позволяют централизованно управлять оформлением и обеспечивают лучшую масштабируемость проекта.

Альтернативный способ — внутренние стили, размещаемые в блоке <style> внутри секции <head>. Такой подход уместен для простых или одностраничных ресурсов, где нет необходимости в модульности или повторном использовании кода. Однако в контексте крупных проектов внутренние стили нецелесообразны: они затрудняют сопровождение и нарушают принцип разделения структуры и оформления.

Что касается инлайновых (строчных) стилей — они добавляются напрямую к каждому HTML-элементу через атрибут style. Такой метод считается устаревшим и не рекомендуется к применению, так как ведёт к избыточности и фрагментированию логики отображения. Это сопоставимо с устаревшим использованием тега <font>, который ранее применялся для ручного задания шрифта и цвета текста.

В этом материале мы разберём, как правильно задавать цвет текста с помощью CSS, а также рассмотрим стилизацию элемента <p> как одного из базовых текстовых блоков в HTML-разметке.

В CSS для задания цвета текста используется свойство color. Оно может применяться к любому HTML-элементу и поддерживает различные форматы записи:

1. Шестнадцатеричный формат

Цвет задаётся с помощью кода, начинающегося с символа #, за которым следуют 6 символов: #0d6efd, #d63384 и т.д.

Для подбора подходящего цвета удобно использовать онлайн-инструменты, такие как HTML COLOR CODES.

2. Именованные цвета

Можно использовать стандартные названия цветов, например: red, green, blue. Полный перечень имён доступен на сайте W3C.

3. Формат RGB

Функция rgb() принимает три параметра: значения красного, зелёного и синего цветов, например: rgb(255, 87, 51).

Пример: белый текст

 <style>
.text-white {
color: white;
}
</style>

<p class="text-white">Я белый текст</p>
.text-white {
  color: white;
}

Я белый текст

Интересная статья Сервисы для работы с семантическим ядром

Наследование свойства color

Свойство color наследуется. Это означает, что если задать цвет для родительского блока, он применится ко всем вложенным текстовым элементам, если у них не указан собственный цвет.

Пример: оранжевый текст

<style>

.text-orange {
color: rgb(255, 87, 51);
}
</style>
<div class="text-orange">
  <p>Я оранжевый текст</p>
  <p>И я оранжевый текст</p>
</div>
.text-orange {
  color: rgb(255, 87, 51);
}

Я оранжевый текст

И я оранжевый текст

Пример нестандартного оттенка синего

Шестнадцатеричные значения позволяют точно задавать нестандартные цвета. Например:

p {
  color: #2f5687;
}

Этот текст имеет серо-синий оттенок, определённый через hex-код.

RGBA: цвет и прозрачность

Формат rgba() предоставляет возможность не только определить цвет, но и управлять прозрачностью:

p {
  color: rgba(47, 86, 135, 1);
}

Этот абзац имеет тот же оттенок синего, но с полной непрозрачностью (alpha = 1).

Комбинированная запись для кросс-браузерной совместимости

Для обеспечения поддержки в старых браузерах рекомендуется сначала указывать hex-значение, а затем — rgba. Современные браузеры применят вторую строку:

p {
  color: #2f5687;
  color: rgba(47, 86, 135, 1);
}

Этот текст стилизован с учётом совместимости: сначала указан hex-код, затем rgba.

Выводы

Менять цвет текста в CSS — задача вроде простая, но с нюансами. color, :hover, rgba, кастомные переменные — всё это становится понятным, когда видишь реальные примеры. Не бойтесь экспериментировать: задать свой стиль — это не только про визуал, но и про логику кода. Пара строк — и страница уже говорит на вашем языке. И да, если что-то не работает, проверь сначала селектор. Чаще всего дело в нём.

#HTML/CSS #Сайты

Реклама. Информация о рекламодателе по ссылкам в статье.