Интернет программирование стр.19

Фоновый рисунок может быть помещен в качестве подложки в одном месте документа, а за пределами рисунка фон останется прежним, с предустановленным цветом фона. Но рисунок можно регулярно повторять по горизонтали, вертикали или в обоих направлениях сразу. Для этого применяется параметр background-repeat. Как мы помним, по умолчанию фоновый рисунок повторяется по горизонтали и вертикали сразу, создавая иллюзию текстуры. Кстати, для этих целей лучше всего применять рисунки с регулярной структурой, чтобы границы между копиями рисунка были не слишком заметны. Если необходимо использовать подобный вариант множественного рисунка, применяется значение repeat. Если планируется размножить рисунок только по горизонтали или только по вертикали, применяются значения repeat-x и repeat-y соответственно. В том случае, если фоновый рисунок должен быть отображен всего один раз, необходимо использовать значение no-repeat.

Параметр background-position позволяет указывать расположение фона. Если необходимо точно позиционировать фоновый рисунок, то в качестве значения параметра указываются координаты его верхнего левого угла в пикселах или процентах от размеров окна просмотра браузера. Если же планируется использовать не абсолютное, а относительное позиционирование, то применяются следующие тройки значений: top, center, bottom для позиционирования по вертикали, left, center, right — по горизонтали. Значение top прижимает фоновый рисунок к верхней границе окна просмотра, bottom прижимает его к нижней границе, left — сдвигает влево, right — вправо, а значение center — центрирует его, причем как по вертикали, так и по горизонтали (в зависимости от контекста). Так, для установки рисунка в верхний левый угол окна просмотра можно использовать конструкцию background-position: о% 0%. Как видно, в качестве значения параметра может применяться пара элементов. Точно такая же ситуация и с относительным позиционированием. Конструкция background-position: center left центрирует фоновый рисунок по вертикали и прижимает его к левой границе окна просмотра.

Средствами CSS можно установить реакцию фонового рисунка на прокручивание HTML-документа в окне просмотра браузера. Рисунок может двигаться вместе с текстом или оставаться при прокрутке на месте. Регулируется эта возможность при помощи параметра background-attachment. Значение scroll заставляет рисунок двигаться при прокрутке HTML-документа, а значение fixed принудительно оставляет его на месте.

Поля для всего документа устанавливаются при помощи параметра margin, в котором можно указать все поля сразу, или при помощи отдельных параметров. Рассмотрим их.

Параметры margin-left и margin-right позволяют задавать правое и левое поля документа, a margin-top и margin-bottom, соответственно, верхнее и нижнее поля. В качестве значений этих параметров могут использоваться как прямые указания абсолютных размеров (например, lin — 1 дюйм) так и процентное соотношение. Впрочем, есть и третий вариант. В качестве значения можно использовать зарезервированное слово auto, и браузер выставит размеры полей автоматически. Но, как мы уже упоминали выше, все поля можно установить при помощи всего одного параметра margin. При этом в нем просто указываются размеры всех полей. Порядок следования значений следующий: величина верхнего поля, затем правого, потом нижнего, и, наконец, левого.


⇐ вернуться назад| |читать дальше ⇒


*