Добрый день.

Приятная новость - скоро на сайте появится раздел с подробным описанием всех элементов CSS. С этого выпуска в каждом номере рассылки будет публиковаться описание одного или нескольких необходимых параметров стилей. Сегодня начинаем с background.

Что-то мало людей высказалось по поводу размещения на сайте электронных книжек. Полагаю, что раздел с книжками никому не интересен. Если это не так, сообщите об этом в форум сайта, либо мне по почте vlad@htmlbook.ru

На сайте опубликована статья Поля у блочных элементов, в которой решается проблема отступов в разных браузерах. Адрес статьи на сайте - www.htmlbook.ru/content/?id=182

Поля у блочных элементов

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

В CSS существует параметр padding, который задает отступы для всех сторон блока. Однако браузеры по-разному понимают этот атрибут и показывают результат на веб-странице неодинаково.

Чтобы понять особенности и различия браузеров в использовании полей, создадим прямоугольник с помощью тега DIV и установим у него отступы параметром padding (пример 1).

Обязательно указывайте, в каких единицах измеряются поля (в примере – px). Хотя по умолчанию, если стоит просто число, всегда подразумеваются пиксели, браузер Opera требует, чтобы единицы измерения были заданы. В противном случае никаких полей не будет.

Параметр padding, если он у него указано только одно значение, устанавливает величину полей со всех сторон блока равными. Однако, как показано на рис. 1, результат действия примера в основных браузерах будет различаться.

Internet Explorer

Netscape Communicator

Opera

Рис. 1. Результат действия примера 1

Internet Explorer, сохраняя заданную ширину блока неизменной, управляет величиной полей от края до текста, как, собственно, и должно быть. Браузеры Opera и Netscape по какой-то странной прихоти увеличивают размер блока, добавляя к его ширине, заданной параметром width, еще и величину полей. Вертикальные отступы в разных браузерах тоже очень сильно разнятся, показывая совершенно противоречивый результат.

Чтобы добиться нужного результата, отступы следует устанавливать не у блочного элемента, а у дочернего, который размещен внутри него. Для примера 1 это будет тег параграфа P. Оставляя ширину и цвет фона для тега DIV неизменным, величину полей переносим в стиль параграфа (пример 2).

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

background

Описание
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту. Некоторые параметры не поддерживаются браузером Netscape 4.x. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметра отдельно.

Синтаксис
background: background-attachment || background-color || background-image || background-position || background-repeat

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

Значение по умолчанию
Нет.

Наследование
Значения, присвоенные данному параметру, не наследуются.

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById.elementID.style.background

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