www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Основы ШТМЛ > Цвет фона

Цвет фона

контентовая версия  

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

Цвет фона web-страницы задается с использованием параметра bgcolor тега <BODY>.

Пример 1. Изменение цвета фона

Валидный код
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Цвет фона</title>
</head>
<body bgcolor="#c0c0c0">
<p>...</p>
</body>
</html>

Цвет можно указывать в шестнадцатеричном значении или по его имени.

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

Фоновый рисунок

В качестве фона можно использовать любое подходящее для этого изображение. Фон не должен отвлекать внимание от контента, при этом должен хорошо сочетаться с цветовой гаммой web-страницы и быть маленьким по размеру, чтобы быстро загружаться. Если после перечисленного вы все еще хотите добавляем фоновый рисунок на страницу, следует применить параметром background тега <BODY>.

Пример 2. Добавление фонового рисунка

Валидный код
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Фоновый рисунок</title>
</head>
<body background="image/samplebg.gif">
<p>...</p>
</body>
</html>

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

Поскольку фоновый рисунок загружается медленнее, чем цвет фона, может получиться, что контент не будет читаться некоторое время, пока не произойдет загрузка рисунков. То же самое может случиться и при отключенных в браузере рисунках. Поэтому рекомендуется всегда задавать цвет фона наряду с фоновым рисунком (пример 3).

Пример 3. Использование фонового рисунка и цвета фона

Валидный код
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Цвет фона</title>
</head>
<body bgcolor="#c0c0c0" background="image/samplebg.gif">


<p>...</p>
</body>
</html>

Фиксированный фон

По умолчанию, при использовании полосы прокрутки, фоновый рисунок перемещается вместе с содержимым web-страницы. Internet Эксплорер позволяет сделать фон неподвижным с помощью параметра bgproperties="fixed" тега <BODY>.

Пример 4. Задание фиксированного фона

Валидный код
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Фон</title>
</head>
<body bgcolor="#c0c0c0" background="image/samplebg.gif" bgproperties="fixed">
<p>...</p>
</body>
</html>

При указании параметра bgproperties, как показано в примере 4, фоновый рисунок на web-странице будет оставаться неподвижным, а контент, рисунки и другие элементы станут перемещаться вместе с полосой прокрутки.

Статья опубликована: 04.09.2009 Последнее обновление: 07.02.2009
Поиск по сайту
Основы ШТМЛ
Разделы
Теги по теме

BODY
Элемент BODY предназначен для хранения содержания web-страницы (контента), отображаемого в окне браузера.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект