Цвета документа и фоновые изображения

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

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

Атрибут bgcolor
Стандартный (но уже объявленный нежелательным) способ изменить принятый по умолчанию цвет фона состоит в использовании атрибута bgcolor для тега . Как и для атрибута color тега , обязательное значение bgcolor может быть выражено одним из двух способов – с помощью указания красного, зеленого и синего (RGB) компонентов выбранного цвета или его стандартного наименования. Приложение G содержит RGB-кодировки цветов вместе с таблицей наименований, которые следует применять в качестве значений атрибута bgcolor.Установить цвет фона легко.


Чтобы получить ярко-красный фон, используя RGB-кодировку, попробуйте написать:

(body bgcolor="#FF0000")

А более нежный фон, персикового цвета, так:

(body bgcolor="peach")

Атрибут background
Если однотонный фон вас не устраивает, то с помощью атрибута background тега можно поместить на его место изображение. Обязательным значением атрибута background является URL изображения. Броузер автоматически повторяет (в виде мозаики) картинку
по вертикали и по горизонтали, заполняя все окно.

Обычно следует выбирать маленькое не слишком яркое изображение, чтобы создать интересный, но не навязчивый тип фона. Кроме того, маленькая простая картинка загружается из сети гораздо быстрее, чем сложное полноэкранное изображение.
Рис. 5.20 и 5.21 показывают, как расширенный броузер использует картинку деревянной панели, создавая покрытие стенки, служащей фоном документа:

(body)

Сравните:

(body background="pics/wood_panel.gif")

Фоновые изображения разных размеров и пропорций создают интересные горизонтальные и вертикальные эффекты на странице.


К примеру, высокая узкая картинка может выделять заголовок документа:

Kumquat Lore


For centuries, many myths and legends have arisen around the kumquat.
...

Если vertical_fountain.gif – это узкое, вытянутое вверх изображение, которое постепенно светлеет к своему основанию и длина которого превосходит длину тела документа, то в результате получится что-то.

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

Атрибут background нежелателен в HTML 4 и XHTML, поскольку аналогичные эффекты могут достигаться с применением таблиц стилей.

Атрибут bgproperties
Популярные броузеры больше не поддерживают атрибут-расширение bgproperties для тега . Он работает только вместе с атрибутом background. Атрибут bgproperties имеет лишь одно значение, fixed. Оно «замораживает» фоновое изображение, которое перестает прокручиваться вместе с другим содержимым окна. И, следовательно, фоновое изображение H2Omark.gif может служить для документа гербовой бумагой с водяными знаками:

(body background="pics/H2Omark.gif" bgproperties="fixed")

Атрибут text
Изменив цвет фона или установив фоновое изображение, следует, вероятно, поменять цвет текста, чтобы документ можно было прочесть.


Атрибут text для тега , включенный в стандарты HTML и XHTML, делает именно это – определяет цвет текста во всем документе, кроме якорей гиперссылок.

Присваивайте атрибуту text цветовое значение, как это делалось при определении цвета фона, используя триплет RGB или его название в соответствии с приложением G. Например, чтобы создать документ с синим текстом на бледно-желтом фоне, напишите:

(body bgcolor="#777700" text="blue")

Разумеется, лучше выбрать цвет текста, контрастирующий с фоном. Атрибут text нежелателен в стандартах HTML 4 и XHTML, поскольку подобного эффекта можно достигнуть с помощью таблиц стилей.

Атрибуты link, vlink и alink
Атрибуты link, vlink и alink тега управляют цветом гиперссылок (текст внутри тега a) в документе. Все они принимают значения, определяющие цвет в виде RGB-триплета или его названия, так же как атрибуты text и bgcolor.

Атрибут link определяет цвет всех гиперссылок, по которым пользователь еще не «ходил». Атрибут vlink устанавливает цвет посещенных ссылок, а атрибут alink назначает цвет активной гиперссылки, т. е. той, что выбрана пользователем и находится под курсором мыши при ее нажатой кнопке.

Как и в случае текста, следует позаботиться о том, чтобы окраска ссылок позволяла прочесть их на выбранном фоне.


Кроме того, цвета ссылок в различных состояниях должны отличаться и от тональности основного текста и друг от друга. Эти атрибуты нежелательны в стандартах HTML 4 и XHTML, поскольку подобного эффекта можно достигнуть с помощью таблиц стилей.

Атрибут leftmargin
Свойственный только Internet Explorer атрибут leftmargin тега позволяет отодвинуть левый край текста от левого края окна броузера, создав подобие поля на бумажной странице. Другие броузеры игнорируют этот атрибут и обычно выравнивают текст по левому краю окна броузера. Значение атрибута leftmargin представляет собой целое число пикселов, составляющее ширину левого поля. По умолчанию принимается значение, равное 10. Поле заполняется фоновым цветом или изображением.

Исполняя следующий пример исходного текста, Internet Explorer выводит текст, выровненный по левому полю, имеющему ширину отступа 50 пикселов.

(body leftmargin=50)
Modern browsers let you indent the

<--left margin

away from the left edge of the window.
(/body)

Атрибут topmargin
Подобен leftmargin атрибут topmargin, но в настоящее время он поддерживается не только в Internet Explorer, но и во всех популярных броузерах.


Его можно включить в тег , чтобы установить ширину верхнего поля в документе. Пространство поля заполняется фоновыми цветом или изображением.

К примеру, Opera выводит следующий текст по меньшей мере на 50 пикселов ниже верхнего края окна броузера.

(body topmargin=50)

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Modern browsers give your documents
a little extra headroom with topmargin.
(/body)

Содержимое тела начинает отображаться ниже на целое число пикселов, которое указывается в качестве значения атрибута topmargin. По умолчанию принимается значение 0.5.3.1.8. Атрибуты style и class Также можно устанавливать различные относящиеся к стилю свойства тела при помощи CSS. Но хотя для оформления всего содержимого тела
можно включить атрибут style в тег , мы рекомендуем устанавливать стили для всего тела на уровне документа (используя тег