Серёжа СыроежкинСерёжа СыроежкинКопирайтер

Цвет шрифта HTML

теги: html, шрифты

Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font. По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.

Тег font применяется следующим образом:

<p>Конструктор сайтов <font>"Нубекс"</font></p>

Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font:

Конструктор сайтов <font color="blue">"Нубекс"</font>

Здесь задается синий цвет для слова, обрамленного тегом font.

Но помимо параметра color, тег имеет и другие атрибуты.

Атрибуты тега FONT

Тег font имеет всего три атрибута:

  • color – задает цвет текста;
  • size – устанавливает размер текста;
  • face – задает семейство шрифтов.

Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).

Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута – “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.

Рассмотрим применение этих атрибутов на нашем примере:

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Меняем цвет шрифта при помощи HTML</title>
 </head>
 <body>
 <p>Конструктор сайтов <font size="6" color="#fa8e47" face="serif">"Нубекс"</font></p>
 </body>
</html>

Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.

Задание цвета текста при помощи CSS

Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Меняем цвет шрифта при помощи CSS</title>
  <style>
 .nubex {
  color:#fa8e47;
  font-size: 150%;
  }
  .constructor {
  color: blue;
  }
  .saitov {
  color: green;
  font-size: 125%;
  }
  </style>
 </head>
 <body>
 <p><span class="constructor">Конструктор</span> <span class="saitov">сайтов</span> <span class="nubex">"Нубекс"</span></p>
 </body>
</html>

Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».

Комментарии 0