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

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

Метод 1

Метод 1 из 2:

Использование CSS

Загрузить PDF

1
Откройте файл HTML. Лучший способ изменить цвет текста — это воспользоваться CSS. Старый тег <font> больше не поддерживается в HTML5. Поэтому воспользуйтесь CSS, чтобы определить стиль элементов страницы.
- Этот метод также применим к внешним таблицам стилей (отдельным файлам CSS). Приведенные ниже примеры предназначены для файла HTML с внутренней таблицей стилей.
2
Размеcтите курсор внутри тега <head>. Стили определяются внутри этого тега, если используется внутренняя таблица стилей.
3
Введите <style>, чтобы создать внутреннюю таблицу стилей. Когда тег <style> находится внутри тега <head>, таблица стилей, которая находится внутри тега <style>, будет применена к любым элементам страницы. Таким образом, начало HTML-файла должно выглядеть следующим образом:^{[1]XИсточник информации}
```
<!DOCTYPE html><html><head><style></style></head>
```
4
Введите элемент, цвет текста которого нужно изменить. Используйте раздел <style>, чтобы определить внешний вид элементов страницы. Например, чтобы изменить стиль всего текста на странице, введите следующее:
```
<!DOCTYPE html><html><head><style>body {}</style></head>
```
5
В селекторе элемента введите атрибут color:. Этот атрибут определяет цвет текста выбранного элемента. В нашем примере этот атрибут изменит цвет основного текста, который является элементом, включающим весь текст на странице:
```
<!DOCTYPE html><html><head><style>body {color:}</style></head>
```
6
Введите цвет текста. Это можно сделать тремя способами: ввести имя, ввести шестнадцатеричное значение или ввести значение RGB. Например, чтобы сделать текст синим, введите blue, rgb(0, 0, 255) или #0000FF.
```
<!DOCTYPE html><html><head><style>body {color: red;}</style></head>
```

7

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

<!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>

8
Укажите стилевой класс CSS вместо того, чтобы менять элемент. Можно указать стилевой класс, а затем применить его к любому элементу страницы, чтобы изменить стиль элемента. Например, класс .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

Метод 2 из 2:

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

Загрузить PDF

1
Откройте файл HTML. Можно воспользоваться атрибутами встроенного стиля, чтобы изменить стиль одного элемента страницы. Это может быть полезно, если нужно внести одно-два изменения в стиль, но не рекомендуется для широкомасштабного применения. Чтобы полностью изменить стиль, используйте предыдущий метод.^{[2]XИсточник информации}
2
Найдите элемент, который нужно изменить. С помощью атрибутов встроенного стиля можно изменить цвет текста любого элемента страницы. Например, чтобы изменить цвет текста определенного заголовка, найдите его в файле:
```
<!DOCTYPE html><html><body><h1>Этот заголовок нужно изменить</h1></body></html>
```
3
К элементу добавьте атрибут стиля. Внутри открывающего тега изменяемого элемента введите style="":
```
<!DOCTYPE html><html><body><h1 style="">Этот заголовок нужно изменить</h1></body></html>
```

4

Внутри "" введите color:. Например:

<!DOCTYPE html><html><body><h1 style="color:">Этот заголовок нужно изменить </h1></body></html>

5
Введите цвет текста. Это можно сделать тремя способами: ввести имя, ввести шестнадцатеричное значение или ввести значение RGB. Например, чтобы сделать текст желтым, введите yellow;, rgb(255,255,0); или #FFFF00;:
```
<!DOCTYPE html><html><body><h1 style="color:#FFFF00;">Этот заголовок стал желтым</h1></body></html>
```
Реклама