Задаем цвет текста. Атрибут color тега font

В этом уроке мы рассмотрим последний атрибут тега <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>&nbsp</p>
    <p align="center"><font face="courier" size="+2" color="#008000">Задаем тексту шрифт, размер и цвет</font></p>
    <p align="center"><font face="arial" size="+3" color="#00FF02">Задаем тексту шрифт, размер и цвет</font></p>
    <p align="center"><font face="comic sans ms" size="+4" color="#FF002E">Задаем тексту шрифт, размер и цвет</font></p>
  </body>
</html> 
              

Как всегда не забудем сохранить файл и посмотрим результат:

Тексту применились все параметры, которые мы задали и все отображается корректно. Сам код думаю пояснять не стоит, так как все теги и атрибуты мы рассматривали в предыдущих уроках, и вы их уже знаете.