Как изменить цвет текста в HTML

Настройте свою веб-страницу с красочным текстом

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

3 способа установить цвет текста

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

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

3 способа указать цвета

В HTML цвета можно указывать несколькими способами:

• Самое простое – использовать английское название цвета , например зеленый или голубой . Если ваша задача проста, это может помочь, но помните, что словарный запас HTML в этом отношении ограничен.
• Другой подход заключается в установке значения цвета RGB , где задаются три величины, по одной для интенсивности составного цвета красного, зеленого и синего соответственно. Используйте значения цвета RGB, чтобы отрегулировать затенение стандартного цвета или использовать точное значение для желаемого оттенка.
• Вы можете указать шестнадцатеричное значение цвета , которое представляет собой знак фунта, за которым следует шестизначное шестнадцатеричное число. Если вы хотите получить точные цвета, идите по этому пути.

Программы, необходимые для изменения цветов HTML

Минимальный набор инструментов для настройки цвета текста в HTML – это программа для редактирования самого HTML и браузер для его тестирования. Вы можете редактировать HTML в текстовом редакторе, простой программе, такой как «Блокнот», которая пишет чистый текст, или в редакторе кода, оптимизированном для обработки синтаксиса программирования. Вы не можете использовать текстовый процессор, такой как Microsoft Word, LibreOffice или Google Docs, потому что эти программы вставляют невидимое форматирование, называемое управляющими символами , которое несовместимо с HTML.

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

Способ 1: обернуть текст в теги с помощью цветовых стилей

Самый простой способ раскраски текста – добавить атрибут style и требуемое значение, состоящее из ключевого слова color и спецификации цвета (шестнадцатеричный код, код RGB или имя ), к тегу HTML, оборачивающему целевой текст.

Если вы хотите настроить текст, уже заключенный в тег, например тег

, перейдите к открывающему тегу и вставьте перед закрывающей угловой скобкой следующее: a пробел , слово style , знак равенства , а затем, все внутри одного набора кавычек, ключевое слово color , двоеточие , пробел и требуемая спецификация цвета.

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

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

Способ 2: добавление раздела стиля в заголовок документа HTML

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

Имена тегов HTML здесь те же, что указаны в разделе, но без угловых скобок. Например,

, указанный в поле просто p (не в кавычках). После каждого тега, который должен быть стилизован, и пробел – это подраздел, заключенный в фигурные скобки, содержащие ключевое слово color и спецификацию цвета.

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

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

с class в качестве атрибута и именем этого класса, без точки, но в кавычках, в качестве значения.

Способ 3: создать и связать отдельный документ CSS

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

Поместите ваши стили, отформатированные так же, как в разделе в разделе HTML, в отдельный документ с именем, заканчивающимся на .css . Затем добавьте автономный тег (без закрытия) внутри документа HTML с атрибутом href , значение которого заключено в кавычки в качестве имени документа CSS, и атрибут rel со значением «stylesheet» (в кавычках).