Цвет текста CSS: как изменить цвет шрифта

Цвет текста CSS задает свойство color. Чтобы изменить цвет текста в CSS, добавьте его к селектору нужного элемента, например p { color: black; }. Вы можете изменить цвет всей страницы или отдельных элементов.

Как поменять цвет текста в CSS через отдельный файл

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

1. Создайте файл styles.css рядом с вашим HTML-документом.
2. Подключите файл внутри элемента <head> HTML-документа:

   <link rel="stylesheet" href="styles.css">

   Освойте основы типографики на курсах по типографике и создавайте визуально привлекательные текстовые элементы!
3. Добавьте абзац внутри элемента <body>:

   <p>Этот текст станет черным.</p>

4. Запишите в styles.css правило для абзацев:

   p { color: black; }

5. Сохраните оба файла и откройте HTML-документ в браузере. Элементы <p> на странице станут черными.

Здесь p – селектор, который выбирает абзацы страницы. В фигурных скобках свойство color получает значение black.

Атрибут style в этом способе не используется.

Чтобы отменить изменения, восстановите сохраненные файлы и обновите страницу.

Как задать цвет текста отдельному элементу

Селектор p выбирает все абзацы страницы. Если вы хотите выделить отдельный абзац, добавьте ему класс:

Класс в файле стилей

<p class="notice">Сообщение для посетителя.</p>
<p>Обычный текст страницы.</p>

В подключенном файле styles.css задайте цвет этому классу:

.notice { color: #2f5687; }

После сохранения файлов обновите страницу в браузере. Первый абзац станет синим, второй сохранит свой цвет.

Точка перед notice нужна только в CSS-селекторе.

Атрибут style в HTML

Inline-стиль задает цвет непосредственно в открывающем теге HTML-элемента. Для этого примера отдельный CSS-файл не нужен:

<p style="color: black;">Черный текст.</p>

Добавьте строку внутрь <body> и сохраните документ. В браузере этот абзац будет черным.

Удалите атрибут style, чтобы отменить такое назначение цвета.

Как выбрать формат записи цвета

Примеры форматов проверяйте по очереди: заменяйте прежнее правило для p новым. Правило .notice и атрибуты style удалите, чтобы они не задавали абзацам собственный цвет.

Названия цветов и HEX

Названия black и white обозначают черный и белый. Для конкретного оттенка используйте шестнадцатеричную запись, или HEX:

p { color: #2f5687; }

Значение #2f5687 придаст тексту серо-синий цвет. Черный цвет можно записать как #000000 или сокращенно #000.

RGB и RGBA

RGB задает цвет через красную, зеленую и синюю составляющие. В записи RGBA четвертое значение определяет непрозрачность:

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

Значение 1 означает полную непрозрачность, то есть 100%.

Современная запись RGB разделяет составляющие пробелами, а непрозрачность указывает после косой черты:

p { color: rgb(47 86 135 / 100%); }

Оба примера задают тот же серо-синий цвет. Замените 100% на 50%, чтобы сделать текст полупрозрачным.

HSL и HSLA

HSL описывает цвет через тон, насыщенность и светлоту. Такая запись удобна, когда вы подбираете светлоту оттенка:

p { color: hsl(210 50% 40%); }

Для полупрозрачного варианта добавьте значение после косой черты. Запись HSLA с запятыми тоже позволяет указать непрозрачность:

p { color: hsl(210 50% 40% / 50%); }

.notice { color: hsla(210, 50%, 40%, 0.5); }

Как изменить цвет текста всей страницы и ссылок

Для этого примера полностью замените содержимое учебного styles.css правилом для body. Удалите атрибуты style из HTML, если вы добавляли их при проверке примеров.

Свойство color работает не только с абзацами. Задайте его элементу body, чтобы потомки наследовали общий цвет:

body { color: #2f5687; }

Заголовки, абзацы и вложенный текст получат этот цвет, если собственные правила его не переопределяют.

У ссылок обычно есть собственный цвет из стилей браузера. Поэтому правило для body само по себе не перекрашивает ссылки. Добавьте отдельное правило в тот же CSS-файл:

body { color: #2f5687; }
a { color: #2f5687; }

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

Как управлять общей палитрой через CSS-переменные

CSS-переменная хранит значение цвета под выбранным вами именем.

Полностью замените содержимое учебного styles.css следующим кодом. В HTML оставьте элементы без атрибутов style, задающих цвет. Так правила для p и .notice из отдельных примеров не помешают наследованию.

Объявите --main-color в :root подключенного файла стилей. Через var(--main-color) используйте ее для текста и ссылок:

:root {
  --main-color: #2f5687;
}

body {
  color: var(--main-color);
}

a {
  color: var(--main-color);
}

Замените значение переменной на black и сохраните файл. После обновления страницы текст и ссылки станут черными.

Для возврата серо-синего цвета восстановите значение #2f5687.

Какой способ выбрать для вашей задачи

• Для общего цвета страницы задайте color у body.
• Для отдельных сообщений используйте класс в подключенном CSS-файле.
• Для повторяющегося цвета оформите переменную и обращайтесь к ней через var().
• Для одиночного примера подойдет атрибут style у HTML-тега.

Совет: после смены цвета посмотрите текст на фоне вашей страницы. Полупрозрачный оттенок особенно важно оценивать вместе с фоном.