Изменение цвета текста — один из самых основных вариантов форматирования при создании веб-страниц. По умолчанию текст на веб-странице черный. Однако вы можете изменить цвет текста на любой другой, чтобы он выделялся или соответствовал цветовой схеме вашего сайта.
Самый простой способ изменить цвет текста в HTML — использовать каскадные таблицы стилей (CSS). С помощью CSS вы можете использовать названия цветов, значения RGB, коды HEX, значения HSL и многое другое для настройки текста. Однако существуют также способы изменения цвета текста без CSS с помощью атрибутов и элементов HTML.
В этом руководстве объемом 4000 слов мы рассмотрим несколько методов изменения цвета текста в HTML без CSS, в том числе:
Мы предоставим примеры кода и наглядные демонстрации для каждого метода. К концу вы получите подробное представление о том, как использовать собственный HTML для настройки цвета текста на ваших веб-страницах.
Самый простой способ изменить цвет текста в HTML — использовать тег font вместе с атрибутом color. Тег шрифта позволяет вам указать стиль, размер и цвет шрифта.
Чтобы использовать его для изменения цвета текста, добавьте тег шрифта вокруг текста, который вы хотите стилизовать. Затем включите атрибут цвета со значением цвета:
“`html
Этот текст будет красным
“`
Это отобразит текст красным, например:
Этот текст будет красным
Тег шрифта устарел в HTML5, то есть он больше не рекомендуется. Тем не менее, он по-прежнему работает во всех основных браузерах.
Вы можете использовать любое из 140 поддерживаемых названий цветов, включая:
| Название цвета | Предварительный просмотр |
|---|---|
| красный | |
| зеленый | |
| синий |
Или вы можете использовать шестнадцатеричные значения, например:
“`html
Этот текст будет синим
“`
Этот текст будет синий
Значения RGB также работают:
“`html
Этот текст будет красным
“`
Этот текст будет красным
Тег шрифта ограничен тем, что он может применять только один цвет ко всему тексту внутри него. Чтобы раскрасить определенные слова или предложения, вам нужно добавить отдельный тег шрифта вокруг каждой части:
“`html
Этот текст будет разных цветов.
“`
Этот текст будет разных цветов.
Таким образом, тег шрифта обеспечивает вам базовое одноцветное форматирование текста, но становится утомительным, если вам нужен многоцветный текст.
Подобно тегу шрифта, тег basefont также позволяет изменять цвет текста с помощью атрибута цвета.
Однако есть два ключевых отличия:
Чтобы использовать basefont, добавьте его в раздел заголовка вашего HTML-документа:
“`html
Это сделает весь текст зеленым по умолчанию:
Весь текст после тега basefont унаследует зеленый цвет. Чтобы переопределить базовый цвет для определенного текста, используйте тег шрифта:
“`html
Этот текст будет синим, хотя базовый цвет зеленый.
“`
Этот текст будет синим, хотя базовый цвет зеленый.
Как и font, тег basefont устарел в HTML5. Но он все еще может быть полезен для быстрого изменения цвета текста по умолчанию на всем сайте.
Тег body также поддерживает атрибут color для установки цвета текста для всего тела документа.
Добавьте его в открывающий тег body:
“`html
Этот текст красный.
Это работает так же, как и basefont, делая весь текст внутри тела красным по умолчанию.
Вы можете переопределить его с помощью тегов шрифтов:
“`html
Этот текст синий
Этот текст синий
Атрибут text устарел, поэтому подход с тегом body обычно не используется. Но это полезно знать в качестве опции, если вы хотите задать цвет текста на всю страницу.
Вот необычный элемент HTML, который также поддерживает атрибуты цвета — тег bgsound.
Тег bgsound изначально использовался для добавления фонового звука на веб-страницу. Но он также позволяет вам задать атрибут цвета:
“`html
“`
Это сделает весь следующий текст фиолетовым:
Этот текст теперь фиолетовый, так как он находится после тега bgsound.
Как и другие теги, которые мы рассмотрели, bgsound устанавливает цвет текста по умолчанию на всю страницу. Вы можете переопределить его, заключив определенный текст в теги шрифтов:
“`html
Этот текст будет зеленым
“`
Этот текст будет зеленым
Тег bgsound устарел и больше не поддерживается в HTML5. Но он все еще может работать в некоторых браузерах как способ изменить цвет текста по умолчанию.
Теперь давайте рассмотрим вариант без CSS, который дает вам больше гибкости — встроенные стили.
С помощью встроенных стилей вы можете нацеливаться на определенные теги HTML или элементы и задавать цвет:
“`html
Этот текст абзаца будет красным
“`
Этот текст абзаца будет красным
Обратите внимание, что для встроенных стилей вам нужно использовать американское написание «color», а не «colour».
Вы можете использовать встроенные стили с любым тегом HTML и применять цвета несколькими способами:
**С названиями цветов:**
“`html
“`
**С шестнадцатеричными значениями:**
“`html
Фиолетовый абзац
“`
Фиолетовый абзац
**С RGB-значениями:**
“`html
Зеленый div“`
Зеленый div**С HSL-значениями:**
“`html
Текст голубого цвета
“`
Текст голубого цвета
Это делает встроенные стили гораздо более гибкие, чем предыдущие атрибуты цвета, которые мы рассмотрели.
Вы можете использовать их для нацеливания на заголовки, абзацы, div, span, ссылки и любые другие элементы HTML. И вы можете смешивать и подбирать цвета для разных элементов.
Недостатком является то, что встроенные стили применяются только к конкретному тегу, к которому они добавлены. Чтобы раскрасить больше текста, вам нужно добавить больше атрибутов стиля.
Давайте рассмотрим пример с несколькими цветами:
“`html
Красный абзац
Зеленый абзац
“`
Красный абзац
Зеленый абзац
Как видите, встроенные стили дают вам точный контроль над цветом текста без CSS.
Теперь, когда вы знаете, как изменить цвет текста с помощью чистого HTML, вот несколько советов по эффективному использованию этих методов:
Для одноцветных изменений текста тег шрифта работает быстро и легко. Но при необходимости для многоцветного форматирования текста больше полагайтесь на встроенные стили.
Также будьте осторожны при установке цветов по умолчанию с помощью тегов basefont или body. Дочерние элементы могут наследовать цвет непреднамеренными способами.
По возможности выбирайте именованные цвета, такие как «красный» и «зеленый», а не коды HEX или значения RGB. Это сделает ваш HTML более читабельным.
Будьте благоразумны при применении цвета, иначе вы рискуете снизить удобство использования. Используйте разные цвета только в тех случаях, когда они действительно помогают пониманию.
И убедитесь, что между цветами текста и фона достаточно контраста. Низкоконтрастный текст трудно читать.
При правильном подходе вы можете настроить цвет текста исключительно через HTML без CSS.
Изменение цвета текста с использованием рассмотренных нами методов HTML имеет некоторые недостатки, о которых следует помнить:
Альтернативы CSS для изменения цвета текста предоставляют вам более расширенные возможности:
Таким образом, хотя подходы, основанные только на HTML, работают в крайнем случае, CSS дает гораздо больше мощности и гибкости для стилизации текста.
Учитывая ограничения, следует ли менять цвета текста, используя только HTML вместо CSS?
Вот несколько случаев, когда это может иметь смысл:
Для сложных сайтов с расширенной функциональностью не рекомендуется использовать только HTML.
Но на страницах с очень базовыми потребностями в стилизации параметров HTML может быть достаточно.
В частности, HTML-код электронной почты может принести пользу, поскольку поддержка CSS различается в разных почтовых клиентах.
Использование HTML также обеспечивает запасной вариант, если CSS не загружается, сохраняя читаемость.
В некоторых средах разработки использование CSS может быть невозможно или нецелесообразно. Цвета HTML по-прежнему будут работать.
Устранение неполадок с цветом также может потребовать устранения переменных CSS. HTML изолирует проблему.
А понимание собственного стиля текста HTML создает основу перед добавлением CSS.
Поэтому в правильных случаях разумно придерживаться цветов текста HTML. Но CSS открывает гораздо больше возможностей.
Изменение цвета текста без CSS достижимо с помощью одного только HTML.
Теги font, basefont, body и bgsound допускают атрибуты цвета. Встроенные стили обеспечивают детальное управление цветом.
Однако стилизация цвета текста CSS более гибкая и поддерживаемая в долгосрочной перспективе.
Придерживаясь чистых методов цвета HTML имеет смысл в простых документах или средах, ограничивающих CSS.
Но для большинства надежных веб-сайтов и приложений CSS следует использовать для настройки цветов текста.
На этом наше руководство по изменению цвета текста в HTML без CSS завершается. Основные выводы включают в себя:
С помощью описанных здесь методов вы можете контролировать цвет текста, не выходя из HTML. Но используйте CSS, чтобы разблокировать гораздо более богатые возможности стилизации.