07. Цвет фона и цвет шрифта

На этой странице:

В самых первых опытах (“Улучшенный HTML-документ”) мы никак не задавали ни цвет фона страницы, ни цвет шрифта, которым отображался текст. Тем не менее, и фон, и шрифт не были бесцветными при просмотре страницы в браузере.

Вероятно, вы видели чёрный шрифт на белом фоне. Но это совсем не обязательно. Всё зависит от настроек браузера. Когда в HTML-программе цвета явно не заданы, браузер использует свои установки по умолчанию.

В моём браузере Internet Explorer в разделе Цвета включена опция Использовать стандартные цвета Windows, и я вижу чёрные буквы на белом фоне. Можно выключить эту опцию и установить в качестве цветов, используемых браузером по умолчанию, свои цвета.

Правила дизайна

Чтобы документ смотрелся так, как вы задумали, не полагайтесь на режимы умолчания браузера, а задавайте параметры явно.

Как задавать цвета для фона и текста рассказано ниже.

Вверх Задание цвета в HTML-коде

Цвета для фона и текста на всем протяжении документа можно задать при помощи атрибутов bgcolor и text тега <BODY>.

Проверьте работу этих атрибутов на испытательном стенде:

Испытатель

Атрибуты bgcolor и text тега <BODY>

Вход в испытатель

Цвета, заданные в теге <BODY>, действуют до парного тега </BODY>, т. е. до конца документа.

С цветом фона ничего уже не поделаешь — его в HTML можно задавать только один раз, а цвет текста можно менять внутри документа многократно, при помощи тега <FONT>. Установка цвета выполняется при помощи атрибута color. (Заметим в скобках, что цвет фона любого элемента можно установить при помощи CSS, равно как и цвет текста, как и массу других свойств, недоступных через атрибуты тегов.)

Испытатель

Атрибут color тега <FONT>

Вход в испытатель

В HTML действует общее важное правило: конструкции языка могут быть вложенными, т. е. внутри одного элемента могут располагаться другие. Указания вложенного элемента могут изменять указания внешних элементов, но когда вложенный элемент заканчивается, восстанавливаются полномочия внешнего элемента.

Вложенность элементов HTML

С помощью элемента FONT можно переопределить не только цвет шрифта, но также его размер и внешний вид. Однако использовать соответствующие атрибуты не рекомендуется.

Работать со шрифтами (как и с любыми другими визуальными свойствами элементов) гораздо удобнее и правильнее через CSS, но и здесь, нужно быть осторожными — ведь указанного шрифта может не оказаться на компьютере пользователя.

Самое лучшее — не задавать шрифт вовсе. Тогда браузер будет показывать документ шрифтом “по умолчанию”, заведомо установленным у пользователя.

Для изменения размеров шрифта есть специальные элементы, более подходящие для сохранения единого стиля оформления документа: BIG для укрупнения и SMALL для уменьшения.

На самом деле не рекомендуется задавать и цвет шрифта при помощи FONT, равно как и вовсе использовать этот элемент! Задавать визуальные свойства лучше при помощи стилевых указаний на языке CSS, с которым мы познакомимся в теме 2.

То есть в будущем постараемся не использовать в своих HTML-кодах визуальные элементы подобные FONT и визуальные атрибуты, подобные color и size. Посмотрите, как был задан на CSS красный цвет для текста, расположенного в подцитате:

  
Посмотреть


Вверх Кодирование цвета

Задать цвета можно, используя шестнадцатеричный трёхбайтовый код, например, #00FFFF — голубой цвет (aqua). Перед кодом цвета в HTML ставится символ “#”. Записи bgcolor="#00FFFF" и bgcolor="aqua" эквивалентны.

Кодирование цвета выполняется по распространённой системе RGB (Red, Green, Blue):

#FF0000 Red (красная составляющая)
#00FF00 Green (зелёная составляющая)
#0000FF Blue (синяя составляющая)

Известно, что любой цвет можно представить смешением трёх основных цветов (красного, зелёного и синего). В зависимости от “веса” составляющих результирующий цвет меняется в широких пределах.

Число цветов, которое можно получить, смешивая красный, зелёный и синий, зависит от ширины диапазона, в котором может меняться каждая из трёх основных составляющих.

В системе кодирования цвета, принятой в HTML, каждая из основных составляющих задаётся одним байтом, т. е. может принимать 256 разных значений. Тогда число всех цветов в этой кодировке: 256×256×256 = 16 777 216.

Мнемонические имена и коды основных (стандартных) цветов представлены в таблице:

Цвет Имя Код Описание
  black #000000; Чёрный
  silver #C0C0C0; Серебряный
  gray #808080; Серый
  white #FFFFFF; Белый
  maroon #800000; Коричневый
  red #FF0000; Красный
  purple #800080; Тёмно-сиреневый
  fuchsia #FF00FF; Сиреневый
  green #008000; Зелёный
  lime #00FF00; Светло-зелёный
  olive #808000; Оливковый
  yellow #FFFF00; Жёлтый
  navy #000080; Темно-синий
  blue #0000FF; Синий
  teal #008080; Петроль
  aqua #00FFFF; Голубой

Вверх вверх