Как изменить цвета шрифта веб-сайта с помощью CSS

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

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

Значения цвета могут быть выражены как ключевые слова цвета, шестнадцатеричные числа цвета или числа цветов RGB. Для этого урока вам понадобится HTML-документ, чтобы увидеть изменения CSS и отдельный файл CSS, прикрепленный к этому документу. Мы собираемся конкретно рассмотреть элемент абзаца.

Используйте ключевые слова для изменения цвета шрифта

Чтобы изменить цвет текста для каждого абзаца в вашем HTML-файле, перейдите во внешнюю таблицу стилей и введите п { }. Поместите цвет свойство в стиле, за которым следует двоеточие, например п {цвет:}. Затем добавьте значение цвета после свойства, завершив его точкой с запятой. В этом примере текст абзаца изменен на черный цвет:

п {
черный цвет;
}

Используйте шестнадцатеричные значения для изменения цвета шрифта

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

Этот стиль CSS можно использовать для окрашивания ваших абзацев в черный цвет, потому что шестнадцатеричный код # 000000 переводится в черный. Вы даже можете использовать сокращение с этим шестнадцатеричным значением и записать его как # 000 с теми же результатами.

п {
цвет: # 000000;
}

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

п {
цвет: # 2f5687;
}

Hex работает, устанавливая значения RGB (красный, зеленый, синий) цвета отдельно с базовыми шестнадцатью значениями. Вот почему они содержат буквы А через F в дополнение к цифрам 0 через 9.

Каждый цвет, красный, зеленый и синий, получает свое собственное двузначное значение. 00 это наименьшее возможное значение, в то время как FF самый высокий. Цвета перечислены в порядке RGB в шестнадцатеричном формате, поэтому первые две цифры представляют значение красного цвета и так далее.

Использование значений цвета RGBA для изменения цвета шрифта

Наконец, вы можете использовать значения цвета RGBA для редактирования цветов шрифта. RGCA поддерживается во всех современных браузерах, поэтому вы можете использовать эти значения с уверенностью, что они будут работать для большинства зрителей, но вы также можете установить простой запасной вариант.

Это значение RGBA совпадает с указанным выше грифельно-синим цветом:

п {
цвет: rgba (47,86,135,1);
}

Первые три значения задают значения красного, зеленого и синего цветов, а последнее число - альфа-канал для прозрачности. Параметр альфа установлен на 1, что означает 100 процентов, поэтому этот цвет не имеет прозрачности. Если вы установите для этого значения десятичное число, например 0,85, оно преобразуется в 85-процентную непрозрачность, и цвет будет слегка прозрачным.

Если вы хотите защитить свои цветовые значения от пули, скопируйте этот код CSS:

п {
цвет: # 2f5687;
цвет: rgba (47,86,135,1);
}

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

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

a {
цвет: # 16c616;
}

Это также работает с несколькими элементами одновременно. Вы можете установить каждый уровень заголовка одновременно. Например, при этом все элементы заголовка будут окрашены в темно-синий цвет:

h1, h2, h3, h4, h5, h6 {
цвет: # 020833;
}

Придумать шестнадцатеричные значения или значения RGBA для ваших цветов не всегда легко. Большинство веб-дизайнеров будут использовать программу редактирования изображений, такую ​​как Photoshop или GIMP, для создания точных кодов. Вы также можете найти удобные инструменты для выбора цвета в Интернете, например это из w3schools.

Другие способы стилизации HTML-страницы

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

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