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

Здравствуйте, дороге друзья!

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

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

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

Изменения цвета текста средствами HTML

К счастью в HTML есть специальный тег с атрибутом color, в котором можно указать нужный цвет текста.

PHP

1 <font color=»red»>Красный текст</font>

Значение цвета можно задавать несколькими способами:

Более подробно о способах задания цветов и перечень их значений описан в этой статье: Изменение цвета шрифта в CSS. Коды цветов HTML и CSS Если вы ещё не знаете как определить значение цвета на сайте, то вам сюда

Таким образом вы можете изменить цвет у целого абзаца, слова или одной буквы, обернув то что вам нужно в тег <font>

Как изменить цвет текста в HTML с использованием CSS?

Для изменения цвета текста для определённого абзаца или слова можно присвоить ему класс, а затем в CSS файле задать для этого класса свойство color.

Выглядеть это будет так:

PHP

1 <p class=”color-text”>Пример текста</div>

CSS

PHP

1 2 3 .color-text { color:#555555; }

Вместо color-text вы можете указать свой класс.

Если вам нужно изменить цвет текста для элемента на сайте у которого уже есть класс или идентификатор, то можно вычислить его название и указать в CSS. Как вычислить класс или идентификатор рассказано в этой статье: Как определить ID и класс элемента на странице?

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

Для этого:

Этот способ подходит если вам нужно изменить цвет сразу для нескольких элементов на сайте.

Если же такой элемент один, то можно задать или изменить цвет текста прямо в HTML коде.

Изменяем цвет в HTML коде при помощи атрибута style

Для этого добавляем к тегу для которого нам нужно изменить цвет текста атрибут style.

PHP

1 <p style=”color:red;”>Пример</p>

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

PHP

1 <p style=”color:red; font-size:20px; font-weight:bolder;”>Пример</p>

Лично я обычно использую вариант с заданием стилей в CSS файле, но если вам нужно изменить цвет текста для какого то одного-двух элементов, то не обязательно присваивать им класс и потом открывать CSS файл и там дописывать слили. Проще это сделать прямо в HTML при помощи тега <font> или артибута style.

Так же вы должны знать, что есть такое понятие как приоритет стилей. Так вот когда вы задаёте цвет текста или другие стили в html при помощи атрибута style, то у этих стилей приоритет будет выше чем если вы их зададите в CSS файле (при условии что там не использовалось правило !important)

Чтобы изменить цвет текста отдельного слова, фразы или буквы мы можем обернуть их в тег span и задать ему нужный цвет.

Например:

PHP

1 <p>Пример <span style=”color:#2F73B6;”> текста</span></p>

В итог получится вот так:

Пример текста

Что делать если внесённые изменения не меняются?

Казалось бы, изменение цвета – одна из простейших операций при оформлении текста, ну что здесь может пойти не так?

Однако и здесь есть свои нюансы, которые нужно учитывать:

  1. 1.Приоритет стилей, о котором я писала выше. Если задавать цвет текста прямо в HTML то приоритет будет выше. Если вы задали его при помощи атрибута style, а он всё равно не изменилcя, то попробуйте добавить к нему правило !important;
    PHP
    1 <p style=”color:#fff!important;”>…</p>
  2. 2.Особенности тегов. Если вы зададите цвет текста для абзаца внутри которого есть ссылка, то он изменится для всего абзаца кроме ссылки. Чтобы изменился цвет ссылки нужно задавать его именно для тега ссылки.

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

  3. 3.Кеширование. Часто современные браузеры кешируют стили сайта и даже после внесения изменений в код они ещё какое то время отображают старую версию стилей. Для решения проблемы можно обновлять страницу при помощи сочетания клавиш CTRL+F5.
    Так же у вас на сайте может стоять плагин для кеширования, из-за которого вы так же можете не видеть внесённых изменений на сайте.

Более подробно об этом я писала в отдельной статье: Почему не работают CSS-стили?

В этом уроке мы рассмотрим последний атрибут тега <font>, который задает цвет текста. По умолчанию текст имеет черный цвет, который выводиться на белом фоне. Для того, чтобы изменить цвет текста в html, нужно применить атрибут color тега <font>:

<font color=»цвет»>

Для задания цвета достаточно указать его название, например: red, green, blue. Рассмотрим небольшой пример:

<html> <head> <title>Урок 6. Изменяем цвет текста</title> </head> <body> <p><font color=»green»>Текст зеленого цвета</font></p> <p><font color=»red»>Текст красного цвета</font></p> <p><font color=»purple»>Текст фиолетового цвета</font></p> </body> </html>

Посмотрим результат в браузере:

Текст в первом абзаце стал зеленым, во втором – красным, а в третьем – фиолетовым. Всего существует 16 названий основных цветов и 130 дополнительных. Полный список цветов вы можете посмотреть в таблице цветов html.

Этот способ обозначения цвета очень прост, но весьма ограничен. Поэтому для того чтобы изменить цвет в html – коде, чаще используют шестнадцатеричное число перед которым стоит знак решетки (#), например:

<font color=»#5AFF00″>

С помощью такого обозначения можно получить более 16 миллионов цветов и их оттенков! Получить код цвета можно с помощью конвертера цветов HEX, который имеется на сайте, или воспользовавшись палитрой цветов в том же Photoshop. Рассмотрим пример и запишем следующий код:

<html> <head> <title>Урок 6. Изменяем цвет текста</title> </head> <body> <p><font color=»#008000″>Текст зеленого цвета</font></p> <p><font color=»#FF0000″>Текст красного цвета</font></p> <p><font color=»#800080″>Текст фиолетового цвета</font></p> </body> </html>

Сохраним файл и посмотрим на результат:

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

Теперь вы научились изменять цвет текста в html и в конце урока предлагаю повторить все атрибуты тега <font>, и задать тексту сразу несколько параметров, а именно: шрифт, размер и цвет. Запишите пример:

<html> <head> <title>Задаем тексту несколько параметров</title> </head> <body> <p>&nbsp</p> <p align=»center»><font face=»courier» size=»+2″ color=»#008000″>Задаем тексту шрифт, размер и цвет</font></p> <p align=»center»><font face=»arial» size=»+3″ color=»#00FF02″>Задаем тексту шрифт, размер и цвет</font></p> <p align=»center»><font face=»comic sans ms» size=»+4″ color=»#FF002E»>Задаем тексту шрифт, размер и цвет</font></p> </body> </html>

Как всегда не забудем сохранить файл и посмотрим результат:

Тексту применились все параметры, которые мы задали и все отображается корректно. Сам код думаю пояснять не стоит, так как все теги и атрибуты мы рассматривали в предыдущих уроках, и вы их уже знаете.

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *