Как задать цвет текста в HTML


Рассмотрим, как можно задать цвет текста в HTML. Текст различного цвета порой позволяет создать более привлекательную страницу, однако, здесь необходимо знать меру, поскольку очень важно сочетание цвета текста и фона. Некоторые веб-мастера порой совершенно забывают про «юзабилити» и пренебрегают хорошей читабельностью текстов на своем сайте.

Рассмотрим несколько способов, позволяющих изменить цвет текста в HTML.

Цвет текста непосредственно в html-коде страницы. Данный способ предполагает использовать HTML-теги, как раз предназначенные для решения данной задачи. Пример задания цвета текста:

1
<font color="red;">Это шрифт красного цвета</font>
Цвет текста в HTML

Как видите, мы использовали «словесное» обозначение цвета. Однако чаще всего применяется «шестнадцатеричный» код цветов, позволяющий создавать намного большее количество всевозможных цветов. Например, кодовое обозначение белого цвета будет таким:

#ffffff

а черного:

#000000.

В случае, если все 6 букв или цифр в коде одинаковы, то, чтобы задать цвет шрифта в html можно использовать сокращенную форму кода: #fff.

Использование css-свойств для изменения цвета текста в HTML.

Изменять цвет текста в html можно также через css-свойство «color». Например:

1
2
3
<p style="color:green;">Весь текст данного абзаца будет зеленого цвета, 
поскольку мы изменили его цвет через атрибут style, 
присвоив css-свойству color значение green</p>.
зеленый цвет текста

Задать цвет текста всей страницы можно, присвоив элементу body свойство color с нужным значением.

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="color:green;">
Весь цвет текста страницы будет зеленого цвета
</body>
</html>

Вместо атрибута style мы можем присвоить нужному элементу определенный класс, для которого в css-файле можно прописать необходимые свойства.

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
<p class="my_style">Весь цвет текста страницы будет зеленого цвета</p>
</body>
</html>

В файле style.css укажем свойство color для текста абзаца:

1
2
3
p .my_style{
   color: red;
}




Другие посты

Категория: HTML, Используем CSS

Оставить комментарий