В этой статье мы познакомимся с возможностями HTML и CSS по смене цвета текста на страницах сайта. Будет рассмотрено несколько вариантов. Для каждого отдельного случая удобен свой конкретный способ.
Для начала отметим, что цвета можно задавать в трех форматах:
- Название цвета (red, blue, green, ...);
- Шестнадцатеричный формат (#104A00, #0F0, ...);
- Формат rgba (rgba(0,0,0,0.5), ...);
Способ 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>
Классы primer1 и primer2 можно применить к любым другим html тегам.
