Как изменить цвет шрифта в HTML: 3 способа

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

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

Измените внешний вид магазина с помощью быстрых и гибких тем, разработанных специально для бизнеса. Добавьте опции оформления заказа, фирменный стиль, навигационные меню, рекомендации по продуктам, обзоры и многое другое, используя сотни тем на выбор.

Что такое HTML?

HTML (язык гипертекстовой разметки) - текстовый язык разметки, используемый для создания веб-страниц. Он указывает браузеру, как отображать текст и другие элементы, например выделять слова жирным шрифтом, изменять цвета или создавать списки. HTML использует теги для определения структуры страницы, помечая такие элементы HTML, как заголовки, абзацы и ссылки. Теги указывают браузеру, как отображать каждую часть содержимого.

Можете ли вы использовать HTML для изменения цвета шрифта? В прежние времена, да, но вам пришлось бы менять тег font и атрибуты цвета HTML на каждой странице продукта, что было очень неэффективно. Тег <font> использовался для настройки начертания, размера и изменения цвета шрифта, вот так:

<h1><font color="green"> Воспользуйтесь кодом 10 июня и получите скидку 10%!</font></h1>

Тег <font> и его атрибут color устарели в HTML5, последней версии HTML. Хотя браузеры по-прежнему могут отображать цвета шрифта, заданные таким образом, это не рекомендуется из-за проблем с совместимостью, плохой поисковой оптимизации (SEO) и сложности обслуживания веб-сайта. Вместо этого вы можете управлять стилизацией шрифтов с помощью CSS, который обеспечивает более чистый, эффективный и современный подход к веб-дизайну.

Что такое CSS?

CSS, или каскадные таблицы стилей - язык, используемый для определения визуального представления HTML-документа. Теги HTML определяют структуру веб-контента (заголовки, абзацы, изображения и т.д.), в то время как код CSS управляет оформлением этого контента. Например, html-тег <h1> помечает текстовый блок как заголовок 1-го уровня, но не определяет шрифт, размер или цвет текста. 

Вот тут-то и пригодится CSS. Используйте его, чтобы стилизовать внешний вид абзаца (шрифт, цвет, размер и т.д.). Например:

<h1 style="color: red">Это заголовок КРАСНОГО ЦВЕТА </h1>

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

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

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

3 способа изменить цвет шрифта в HTML

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

1. Внешние таблицы стилей

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

Чтобы создать ссылку на внешнюю таблицу стилей в формате HTML, поместите ссылку в заголовок вашего HTML-документа, который определяет общие параметры и метаданные, используемые браузерами и роботами-поисковиками для интерпретации страницы. (Браузеры не отображают этот заголовок для конечного пользователя).

Вот простой HTML-пример того, как можно создать ссылку на внешний CSS-файл в разделе <head> HTML-документа:

<head>

<title>My Emporium, используя внешний CSS</title>

<ссылка rel="таблица стилей", ссылка href="styles.css">

</head>

В этом примере тег link в разделе <head> ссылается на файл “styles.css”, который содержит все правила форматирования CSS для страницы.

Далее нужно создать файл CSS: styles.css. Вот несколько примеров кода, которые вы могли бы включить для определения цветов для различных элементов.:

/* styles.css */

body {цвет фона: #f0f0f0; /* Светло-серый фон */ цвет: #333; /* Темно-серый текст */}

h1 {цвет: синий;}

h2 {цвет: #555; /* Немного светлее серого */}

В приведенном выше примере код CSS изменяет цвет текста в тексте HTML-документа по умолчанию на темно-серый на светло-сером фоне. Он также присваивает определенные цвета заголовкам уровня 1 и 2.

2. Внутренние стили

Второй метод - внутренние стили, также известные как встроенный CSS. Вместо ссылки на внешний файл таблицы стилей, вы встраиваете правила CSS непосредственно в тег <style> в разделе <head> отдельного HTML-документа.

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

Этот html-код, например, изменяет цвет всех абзацев на этой конкретной веб-странице на фиолетовый:

<!DOCTYPE html>

<html>

<head>

<style>

p {цвет: фиолетовый;}

</style>

</head>

<body>

<p>Этот абзац будет окрашен в фиолетовый цвет.</p>

</body>

</html>

3. Встроенный CSS

Третий, более специализированный вариант - встроенный CSS, который применяет стили к отдельным элементам веб-страницы. Вместо того чтобы размещать стили в разделе <head> или во внешней таблице стилей, вы определяете атрибут стиля непосредственно внутри тега elements, который сообщает браузеру, какой контент находится внутри.

Например, вы хотите стилизовать только один абзац на странице в синий цвет. Вы можете использовать встроенный CSS для определения атрибута color прямо внутри тега <p>, например, так:

<p style="color: blue">Это синий текст.</p>

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

Здесь вступают в действие свойства каскадного порядка CSS. Когда несколько правил CSS нацелены на один и тот же элемент (например, тег <p> в приведенном выше примере), браузер определяет, какое правило имеет приоритет, исходя из специфики. Вот каскадный порядок приоритета.:

• Встроенные стили. Встроенные стили обладают наивысшей специфичностью и переопределяют стили, определенные во внутренних тегах <style>.
• Внутренние стили. Внутренние стили CSS (стили, определенные в разделе <head>) имеют приоритет над внешними таблицами стилей.
• Внешние стили. Внешние стили (связанные css-файлы) являются наименее специфичными и переопределяются как встроенными, так и внутренними стилями.

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

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

• Название цвета. Простое, понятное человеку название цвета, например “красный” или “синий”. Названия цветов просты в использовании. Поддерживается 140 названий цветов, включая синий, красный и зеленый. Однако ограниченный выбор может быть ограничивающим.
• Шестнадцатеричный код. Шестизначное шестнадцатеричное значение, например #FF0000, представляющее цвета с точки зрения интенсивности красного, зеленого и синего цветов. Первые два символа в шестнадцатеричном значении обозначают красный, следующие два - зеленый, а последние два - синий.
• Значение RGB. Набор из трех чисел, например rgb(255, 0, 0), определяющий интенсивность красного, зеленого и синего компонентов цвета. Каждое число находится в диапазоне от 0 до 255.
• Значение HSL или HSLA. HSL определяет цвет по оттенку, насыщенности и светлоте, как и hsl(0, 100%, 50%). Он определяет цвета на основе оттенка (градусы на цветовом круге), насыщенности (процент интенсивности цвета) и светлоты (процент белого или черного) — например, hsl(276, 100%, 50%). Значения HSLA добавляют альфа-значение для непрозрачности, контролируя прозрачность.