В этом уроке мы рассмотрим последний атрибут тега <font>, который задает цвет текста. По умолчанию текст имеет черный цвет, который выводиться на белом фоне. Для того, чтобы изменить цвет текста в html, нужно применить атрибут color тега <font>:
<font color="цвет">
Для задания цвета достаточно указать его название, например: red, green, blue. Рассмотрим небольшой пример:
<html> <head> <title>Урок 6. Изменяем цвет текста</title> </head> <body> <p><font color="green">Текст зеленого цвета</font></p> <p><font color="red">Текст красного цвета</font></p> <p><font color="purple">Текст фиолетового цвета</font></p> </body> </html>
Посмотрим результат в браузере:
Текст в первом абзаце стал зеленым, во втором – красным, а в третьем – фиолетовым. Всего существует 16 названий основных цветов и 130 дополнительных. Полный список цветов вы можете посмотреть в таблице цветов html.
Этот способ обозначения цвета очень прост, но весьма ограничен. Поэтому для того чтобы изменить цвет в html – коде, чаще используют шестнадцатеричное число перед которым стоит знак решетки (#), например:
<font color="#5AFF00">
С помощью такого обозначения можно получить более 16 миллионов цветов и их оттенков! Получить код цвета можно с помощью конвертера цветов HEX, который имеется на сайте, или воспользовавшись палитрой цветов в том же Photoshop. Рассмотрим пример и запишем следующий код:
<html> <head> <title>Урок 6. Изменяем цвет текста</title> </head> <body> <p><font color="#008000">Текст зеленого цвета</font></p> <p><font color="#FF0000">Текст красного цвета</font></p> <p><font color="#800080">Текст фиолетового цвета</font></p> </body> </html>
Сохраним файл и посмотрим на результат:
Как вы видите, мы задали тексту те же цвета, как и в первом примере, только здесь мы воспользовались шестнадцатеричной системой исчисления или другими словами, мы задали цвет в формате HEX.
Теперь вы научились изменять цвет текста в html и в конце урока предлагаю повторить все атрибуты тега <font>, и задать тексту сразу несколько параметров, а именно: шрифт, размер и цвет. Запишите пример:
<html> <head> <title>Задаем тексту несколько параметров</title> </head> <body> <p> </p> <p align="center"><font face="courier" size="+2" color="#008000">Задаем тексту шрифт, размер и цвет</font></p> <p align="center"><font