Как поменять цвет текста CSS
Цвет текста задаёт тон всей странице, а CSS предоставляет гибкие инструменты для точной настройки. С его помощью можно быстро менять оттенки и применять единый стиль ко всем элементам текста.
Далее вы узнаете конкретные способы изменения цвета шрифта через CSS и научитесь правильно размещать стили для разных элементов. Вы освоите применение классов и селекторов, чтобы создавать аккуратный, управляемый дизайн, который легко поддерживать на любом сайте.
Как поменять цвет шрифта в CSS - добавляем стили
В этом примере понадобится веб-страница с разметкой и отдельный CSS-файл, подключаемый внутри HTML-кода.
В HTML-документе будет несколько элементов, но мы будем работать только параграфом. Вот так меняется цвет текста внутри тегов <p> при помощи внешней таблицы стилей.
Значения цветов можно указывать при помощи названий, RGB или шестнадцатеричных значений.
- Добавляем атрибут style к тегу <p>:
p { }- Добавляем свойство color:
p { color: }- Добавляем значение цвета после свойства:
p { color: black;}Элементы <p> на странице станут чёрными.
Перед тем, как изменить цвет текста в HTML, нужно понимать, что в данном примере используется название цвета black. Несмотря на то, что это один из способов указания цвета в CSS, он имеет определенные ограничения.
Нет ничего страшного в том, чтобы использовать названия black (чёрный) и white (белый). Но этот способ не позволяет указывать конкретные оттенки. Поэтому для указания цвета чаще используются шестнадцатеричные значения:
p { color: #000000; }Этот CSS-код также сделает элементы <p> чёрными, так как hex-код #000000 обозначает чёрный цвет. Также можно использовать сокращённый вариант #000, и результат будет тем же.
Как отмечалось ранее, hex-значения отлично подходят в тех случаях, когда необходимо использовать сложные цвета.
Например:
p { color: #2f5687; }Данное hex-значение придаст тексту синий цвет. Но в отличие от простого blue этот код позволяет указать конкретные оттенки синего. В данном примере получится тусклый серо-синий цвет.
Перейдём к RGBA-значениям. RGBA поддерживают все современные браузеры, так что этот метод можно использовать, не беспокоясь о запасных вариантах:
p { color: rgba(47,86,135,1); }Это RGBA-значение обеспечит всё тот же тусклый, серо-синий цвет. Первые три значения отвечают за красный, зелёный и синий, а последняя цифра - за уровень непрозрачности. «1» означает «100%». То есть, текст будет полностью непрозрачным.
Если сомневаетесь в поддержке браузерами, то цвета можно указывать следующим образом:
p {
color: #2f5687;
color: rgba(47,86,135,1);
}В этом синтаксисе сначала идет hex-значение, которое затем переписывается RGBA-значением. Это значит, что устаревшие браузеры, в которых нет поддержки RGBA, будут использовать первое значение и игнорировать второе. Современные браузеры будут использовать второе значение. Это нужно учитывать, чтобы знать, как поменять цвет текста в CSS.
Комментарии