Как в html изменить цвет текста — обзор всех вариантов

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

Для начала отметим, что цвета можно задавать в трех форматах:

Название цвета (red, blue, green, ...);
Шестнадцатеричный формат (#104A00, #0F0, ...);
Формат rgba (rgba(0,0,0,0.5), ...);

На нашем сайте представлена полная палитра и названия html цветов для сайта, где можно выбрать подходящий цвет.

Способ 1. Через html тег <font>

Самым простым способом изменить цвет текста в html является использование тега <font>. Он позволяет изменить цвет, размер и стиль текста. Для этого у него есть три атрибута. Синтаксис:

<font [color="Цвет"] [face="Шрифт"] [size="Размер"]>

Приведём пример:

<html>
<body>
	Обычный шрифт 
	<font color="blue">Синий шрифт</font>
	<font color="red" size="4">Красный шрифт большего размера</font>
</body>
</html>

На странице преобразуется в следующее:

Обычный шрифт. Синий шрифт. А это красный шрифт большего размера

Новая версия стандарта HTML5 не поддерживает тег <font>. Но все современные браузеры понимают и еще видимо будут долго понимать. Этот тег широко распространён в интернете. Что впрочем легко объяснить его доступностью и простотой.

Способ 2. Через атрибут style

Второй способ для изменения цвета шрифта через атрибут style, который можно применять к любым html тегам (<p>, <b>, <u>, <i>, <a>, <strong>, <ul>, <li>, <table>, <div>).

Приведём пример:

<html>
<body>
	<p style="color:#0000FF">Синий цвет текста</p>
	
	<div style="color:#00FF00">Зеленый цвет текста</div>
	
</body>
</html>

Синий цвет текста

Зеленый цвет текста

Если текст не изменяет свой цвет, то можно попробовать воспользоваться инструкцией декларацией !important:

<p style="color:#0000FF;!important">Синий цвет текста</p>

Стоит очищать кэш браузера после каждого внесения изменения в файлы стилей .css.

Способ 3. Через стили CSS

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

<html>
<head>
<style>
	.primer1{ 
	color: #FF00AA;
	}
	.primer2{ 
	color: #5511AA;
	}
</style>
</head>
<body>
	<div class="primer1">Пример №1. Значение color:#FF00AA;</div> 
	<div class="primer2">Пример №2. Значение color:#5511AA;</div>
</body>
</html>

Пример №1. Значение color:#FF00AA;

Пример №2. Значение color:#5511AA;

Классы primer1 и primer2 можно применить к любым другим html тегам.

← Перейти в каталог html уроков и советов

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

Способ 1. Через html тег <font>

Способ 2. Через атрибут style

Способ 3. Через стили CSS