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

В этой статье мы познакомимся с возможностями 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>
<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 тегам.




Читайте также:

• Добавление счетчика посещений на сайт

• Как сделать выпадающие меню

• Как сделать favicon

• Вывод html с помощью AJAX

• Вывод html с помощью JavaScript

• Коды символов для HTML

• Добавление социальных кнопок на сайт


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

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.