Как изменить цвет шрифта HTML

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

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

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

Зачем менять цвет шрифта HTML?

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

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

После этого давайте посмотрим, как вы можете определить и изменить цвет шрифта HTML.

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

Способы определения цвета

Существует несколько способов определения цвета в веб-дизайне, включая имя, значения RGB, шестнадцатеричные коды и значения HSL. Давайте посмотрим, как они работают.

Название цвета

Имена цветов — это самый простой способ определить цвет в стилях CSS. Название цвета относится к конкретному имени цвета HTML. В настоящее время поддерживается 140 названий цветов, и вы можете использовать любой из этих цветов в своих стилях. Например, вы можете использовать «синий», чтобы установить синий цвет для отдельного элемента.

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

Значения RGB и RGBA

Далее у нас есть значения RGB и RGBA. RGB означает красный, зеленый и синий. Он определяет цвет, смешивая значения красного, зеленого и синего, подобно тому, как вы смешиваете цвета на реальной палитре.

Значение RGB выглядит так: RGB(153,0,255). Первое число определяет ввод красного цвета, второе — зеленого цвета, а третье — синего.

Значение каждого входного цвета может варьироваться от 0 до 255, где 0 означает, что цвет отсутствует вообще, а 255 означает, что конкретный цвет имеет максимальную интенсивность.

Значение RGBA добавляет к смеси еще одно значение, и это значение альфа-канала, которое представляет непрозрачность. Он варьируется от 0 (непрозрачный) до 1 (полностью прозрачный).

Шестнадцатеричное значение

Шестнадцатеричные коды цветов работают аналогично кодам RGB. Они состоят из цифр от 0 до 9 и букв от A до F. Шестнадцатеричный код выглядит так: #800080. Первые две буквы определяют интенсивность красного цвета, две средние цифры определяют интенсивность зеленого цвета, а последние две устанавливают интенсивность синего цвета.

Значения HSL и HSLA

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

Оттенок использует градусы от 0 до 360. На стандартном цветовом круге красный — около 0/360, зеленый — 120, а синий — 240.

Насыщенность использует проценты, чтобы определить, насколько насыщенным является цвет. 0 соответствует черно-белому изображению, а 100 — полному цвету.

Наконец, яркость использует проценты аналогично насыщенности. В этом случае 0% соответствует черному цвету, а 100% — белому.

Например, фиолетовый цвет, который мы использовали в этой статье, будет выглядеть в HSL следующим образом: hsl(276, 100%, 50%) .

HSL, как и RGB, поддерживает непрозрачность. В этом случае вы должны использовать значение HSLA, где A означает альфа и определяется числом от 0 до 1. Если бы мы хотели уменьшить непрозрачность фиолетового примера, мы использовали бы этот код: hsl(276, 100%, 50%, .85) .

Теперь, когда вы знаете, как определить цвет, давайте рассмотрим различные способы изменения цвета шрифта HTML.

Старый: Теги <font>

До того, как HTML5 был введен и установлен в качестве стандарта кодирования, вы могли изменить цвет шрифта с помощью тегов шрифта. В частности, вы должны использовать тег шрифта с атрибутом цвета, чтобы установить цвет текста. color указывался либо по его названию, либо по шестнадцатеричному коду.

Вот пример того, как этот код выглядел с шестнадцатеричным цветовым кодом:

 <font color="#800080">This text is purple.</font>

И вот как вы можете установить фиолетовый цвет текста, используя имя цвета.

 <font color="purple">This text is purple.</font>

Однако <font> устарел в HTML5 и больше не используется. Изменение цвета шрифта — это дизайнерское решение, а дизайн не является основной целью HTML. Поэтому имеет смысл, что теги <font> больше не поддерживаются в HTML5.

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

Новое: стили CSS

Чтобы изменить цвет шрифта HTML с помощью CSS, вы будете использовать свойство цвета CSS в сочетании с соответствующим селектором. CSS позволяет использовать имена цветов, значения RGB, шестнадцатеричные значения и значения HSL для указания цвета. Существует три способа использования CSS для изменения цвета шрифта.

Встроенный CSS

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

 <p>This is a purple paragraph.</p>

Если вы хотите использовать шестнадцатеричное значение, ваш код будет выглядеть так:

 <p>This is a purple paragraph.</p>

Если вы собираетесь использовать значение RGB, напишите его так:

 <p>This is a purple paragraph.</p>

Наконец, используя значения HSL, вы должны использовать этот код:

 <p>This is a purple paragraph.</p>

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

Например, замена приведенного выше тега <p> на <h2> изменит цвет текста этого заголовка, а замена его тегом <a> изменит цвет этой ссылки. Вы также можете использовать элемент <span> для окрашивания любого объема текста.

Подпишитесь на рассылку новостей

Хотите знать, как мы увеличили наш трафик более чем на 1000%?

Присоединяйтесь к более чем 20 000 других пользователей, которые получают нашу еженедельную рассылку с советами по WordPress, посвященными инсайдерской информации!

Подпишись сейчас

Если вы хотите изменить цвет фона всего абзаца или заголовка, это очень похоже на изменение цвета шрифта. Вместо этого вы должны использовать атрибут background-color и использовать имя цвета, шестнадцатеричные значения, RGB или HSL для установки цвета. Вот пример:

<p>

Встроенный CSS

Встроенный CSS находится внутри тегов <style> и помещается между тегами заголовка вашего HTML-документа.

Код будет выглядеть так, если вы хотите использовать название цвета:

 <!DOCTYPE html> <html> <head> <style> <p> { color: purple; } </style> </head>

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

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

 <!DOCTYPE html> <html> <head> <style> <p> { color: #800080; } </style> </head>

В приведенном ниже примере используются значения RBGA, поэтому вы можете увидеть пример настройки непрозрачности:

 <!DOCTYPE html> <html> <head> <style> <p> { color: RGB(153,0,255,0.75), } </style> </head>

И код HSL будет выглядеть так:

 <!DOCTYPE html> <html> <head> <style> <p> { color: hsl(276, 100%, 50%), } </style> </head>

Внешний CSS

Наконец, вы можете использовать внешний CSS для изменения цвета шрифта на вашем сайте. Внешний CSS — это CSS, помещенный в отдельный файл таблицы стилей, обычно называемый style.css или stylesheet.css.

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

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

 body {color: purple;}

Помните, что вы можете использовать значения RGB, hex и HSL, а не только названия цветов, чтобы изменить цвет шрифта. Если вы хотите отредактировать таблицу стилей, рекомендуется сделать это в редакторе кода.

Встроенный, встроенный или внешний?

Итак, теперь вы знаете, как можно использовать CSS для изменения цвета шрифта. Но какой метод следует использовать?

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

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

Встроенный CSS размещается между тегами <head> и внутри тегов <style>. Как и встроенный CSS, он удобен для быстрых исправлений и переопределения стилей, указанных во внешней таблице стилей.

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

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

Имейте в виду, что встроенные и встроенные стили могут переопределять стили, установленные во внешней таблице стилей.

Теги шрифтов или стили CSS: плюсы и минусы

Два основных метода изменения цвета шрифта HTML — использование тега шрифта или стилей CSS. Оба этих метода имеют свои плюсы и минусы.

Плюсы и минусы тегов HTML-шрифтов

Тег шрифта HTML прост в использовании, так что это преимущество в его пользу. Как правило, CSS сложнее, и его изучение занимает больше времени, чем ввод <font color="purple"> . Если у вас есть старый веб-сайт, на котором не используется HTML5, то тег шрифта является жизнеспособным методом изменения цвета шрифта.

Несмотря на то, что тег font прост в использовании, вам не следует использовать его, если ваш веб-сайт использует HTML. Как упоминалось ранее, тег font устарел в HTML5. Следует избегать использования устаревшего кода, так как браузеры могут прекратить его поддержку в любое время. Это может привести к тому, что ваш веб-сайт сломается и не будет работать должным образом или, что еще хуже, вообще не будет отображаться для ваших посетителей.

Плюсы и минусы CSS

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

Как упоминалось ранее, он отделяет представление от дизайна, что упрощает управление и поддержку вашего кода.

С другой стороны, CSS и HTML5 могут потребовать времени для изучения и правильного написания кода по сравнению со старым способом написания кода.

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

Советы по изменению цвета шрифта HTML

Теперь, когда вы знаете, как изменить цвет шрифта HTML, вот несколько советов, которые вам помогут.

Используйте палитру цветов

Вместо того, чтобы выбирать цвета случайным образом, используйте палитры цветов, чтобы выбрать правильные цвета. Преимущество палитры цветов заключается в том, что она даст вам имя цвета и правильные значения hex, RGB и HSL, которые вам нужно использовать в коде.

Проверьте контраст

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

Найдите цвет, используя метод проверки

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

Хотите изменить цвет шрифта на своем сайте? Это просто! Это руководство поможет вам начать работу ️ Нажмите, чтобы твитнуть

Резюме

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

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

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

Что вы думаете об изменении цвета шрифта с помощью CSS и тега шрифта? Дайте нам знать в разделе комментариев!