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

В HTML цвет текста меняется с помощью тега font, но в HTML5 этот метод не поддерживается, Чтобы задать цвет фона HTML для различных элементов страницы, вместо указанного тега нужно использовать CSS. Использование CSS гарантирует, что веб-страница будет совместима с любым браузером.

Метод 1: Использование CSS

aid157292-900px-157292-1
  1. Откройте HTML-файл. Лучший способ изменить цвет текста – это воспользоваться CSS. Тег <font> не поддерживается в HTML5. Поэтому воспользуйтесь CSS, чтобы определить стиль элементов страницы.
  • Этот метод также работает с внешними таблицами стилей (отдельными файлами CSS). Приведенные ниже примеры предназначены для HTML-файла с внутренней таблицей стилей:
aid157292-900px-157292-2
  1. Поместите курсор внутри тега <head>. Стили определяются внутри этого тега, если используется внутренняя таблица стилей:
aid157292-900px-157292-3
  1. Введите <style>, чтобы создать внутреннюю таблицу стилей. Когда тег <style> находится внутри <head>, таблица стилей будет применена к любым элементам страницы. Перед тем, как сделать цвет фона в HTML, начало его разметки должно выглядеть следующим образом:
<!DOCTYPE html>
<html>
<head>
<style> 
</style>
</head>
aid157292-900px-157292-4
  1. Введите элемент, цвет текста которого нужно изменить. Используйте раздел <style>, чтобы определить внешний вид элементов страницы. Например, чтобы изменить стиль всего текста на странице, введите следующее:
<!DOCTYPE html>
<html>
<head>
<style>
body { 
}
</style>
</head>
aid157292-900px-157292-5
  1. В селекторе элемента введите атрибут color:. Это свойство определяет цвет текста выбранного элемента. За HTML цвет фона текста отвечает свойство background-color. В нашем примере этот атрибут изменит цвет основного текста, который является элементом, включающим весь текст на странице:
<!DOCTYPE html>
<html>
<head>
<style>
body {
        color:
}
</style>
</head>
aid157292-900px-157292-6
  1. Введите цвет текста. Это можно сделать тремя способами: ввести название, шестнадцатеричное значение или значение RGB. Например, чтобы сделать текст синим, введите blue, rgb(0, 0, 255) или #0000FF:
<!DOCTYPE html>
<html>
<head>
<style>
body {
        color: red;
}
</style>
</head>
aid157292-900px-157292-7
  1. Добавьте другие селекторы, чтобы изменить цвет различных элементов. Чтобы поменять цвет текста у разных элементов страницы или HTML цвет фона текста, можно использовать различные селекторы:
<!DOCTYPE html>
<html>
<head>
<style>
body {
        color: red;
}
h1 {
        color: #00FF00;
}
p {
        color: rgb(0,0,255)
}
</style>
</head>
<body> 
<h1>Этот заголовок будет зеленым.</h1> 
<p>Этот параграф будет синим.</p> 
Этот основной текст будет  красным.
</body>
</html>
aid157292-900px-157292-8
  1. Укажите стилевой класс CSS вместо того, чтобы менять элемент. Перед тем, как сделать цвет фона в HTML или изменить стиль элемента, можно указать стилевой класс, а затем применить его к любому элементу страницы. Например, класс .redtext окрасит текст элемента в красный цвет:
<!DOCTYPE html>
<html>
<head>
<style>
.redtext {
        color: red;
}
</style>
</head>
<body> 
<h1 class="redtext">Этот заголовок будет красным</h1>
<p>Этот параграф будет стандартным.</p>
<p class="redtext">Этот параграф будет красным</p> 
</body>
</html>

Метод 2: Использование атрибутов встроенного стиля

aid157292-900px-157292-9
  1. Откройте HTML-файл. Чтобы изменить стиль одного элемента страницы или цвет фона HTML, можно воспользоваться атрибутами встроенного стиля. Это может быть полезно, если нужно внести одно-два изменения, но не рекомендуется для масштабного применения. Чтобы полностью изменить стиль, воспользуйтесь предыдущим методом:
aid157292-900px-157292-10
  1. Найдите элемент, который нужно изменить. С помощью атрибутов встроенного стиля можно изменить цвет текста любого элемента страницы. Например, чтобы изменить цвет текста определенного заголовка, найдите его в файле:
<!DOCTYPE html>
<html>
<body> 
<h1>Этот заголовок нужно заменить</h1> 
</body>
</html>
aid157292-900px-157292-11
  1. Добавьте к элементу атрибут стиля. Внутри открывающегося тега изменяемого элемента введите style="":
<!DOCTYPE html>
<html>
<body> 
<h1 style=""> Этот заголовок нужно заменить </h1> 
</body>
</html>
aid157292-900px-157292-12
  1. Внутри "" введите color: или цвет фона HTML. Например:
<!DOCTYPE html>
<html>
<body> 
<h1 style="color:"> Этот заголовок нужно заменить </h1> 
</body>
</html>
aid157292-900px-157292-13
  1. Введите цвет текста. Это можно сделать тремя способами: ввести имя, шестнадцатеричное значение или значение RGB. Например, чтобы сделать текст желтым, введите yellow;, rgb(255,255,0); или #FFFF00:
<!DOCTYPE html>
<html>
<body> 
<h1 style="color:#FFFF00;">Этот заголовок стал желтым</h1> 
</body>
</html>

Перевод статьи “How to Change Text Color in HTML” был подготовлен дружной командой проекта Сайтостроение от А до Я.

14 января 2017 в 10:10
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок