Согласно спецификации CSS2.1, фон занимает все пространство элемента, очерченное рамкой - то есть единственная часть, где фон отсутствует - это отступы. Однако IE6.0 не отображал фон под рамкой. Отображение под рамкой - прямое требование спецификации CSS2.1 и легко наблюдается для рамок, чей стиль предполагает прозрачные участки, такие как «double» или «dotted».
Для того что бы получить возможность явно выбирать область, к которой будет применяться фон, в рекомендации CSS3.0 введено свойство
background-origin. Mozilla и Safary поддерживают собственные свойства
-moz-background-origin и
-webkit-background-origin, реализующие сходный функционал.
Фоновое изображение
В качестве фона может использоваться не только цвет, но и изображение. Для того что бы задать фоновое изображение необходимо использовать свойство
background-image. В том случае, когда описание css стилей вынесено в отдельный файл, необходимо помнить, что согласно спецификации CSS2.1 относительные адреса задаются по отношению к этому файлу, а не странице.
Когда фоновое изображение задано - оно располагается непосредственно после содержимого, но поверх фонового цвета, если последний задан (при помощи свойства
background-color). Если фоновое изображение содержит участки с полной или частичной прозрачностью - то фоновый цвет будет просматриваться сквозь эти участки.
Размножение фонового изображения
По умолчанию изображение, заданное свойством background-image для блочных элементов (то есть формирующих собственный «блок» разметки) распространяется по всей области фона, начиная с верхнего левого угла. Если изображение оказывается меньше области фона, то изображение дублируется по горизонтали и вертикали с шагом, равным длине и высоте изображения соответственно.
Однако спецификация CSS2.1 предоставляет свойство
background-repeat, позволяющее указать направления, в которых фоновое изображение будет дублироваться или подавить дублирование совсем. В последнем случае фоновой изображение окажется в единственном числе.
Строчные элементы
К сожалению, спецификация CSS2.1 не указывает, как именно должно размножаться и позиционироваться фоновое изображение для строчных элементов. Существует несколько возможных путей наложения фона на строчный элемент, состоящий из нескольких строк.
Каждая строка может рассматриваться как отдельный блок, к которому свойства фона будут применяться независимо от остальных строк.
Фон может накладываться на строчный элемент до разбития на отдельные строки. После чего строчный элемент разбивается на строки, но расположение фона не изменяется.
Элемент разбивается на строки, после чего вычисляется наименьший прямоугольник, охватывающий все строки, на который разбит строчный элемент. Именно этот прямоугольник будет использоваться как размножения фонового изображения, но отображаться фон будет только в строках фонового изображения.
Opera, Mozilla и Chrome используют по умолчанию второй вариант. Однако Mozilla поддерживает специальное частное свойство
-moz-background-inline-policy, позволяющее выбирать между этими вариантами поведения. Internet Explorer применяет третий вариант. В спецификации CSS3 для решения этой проблемы введено свойство
box-decoration-break, позволяющее выбрать между первым и вторым вариантом.
Положение фонового изображения
По умолчанию левый верхний угол фонового изображения (которое впоследствии может быть размножено) совпадает с левым верхним углом элемента, в котором отображается фон. Для того, что передвинуть фоновое изображение необходимо оспользоваться свойством
background-position. Данное свойство поддерживает два режима для задания положения фонового изображения.
Во-первых, для свойства background-position может быть указано смещение в единицах длины (пикселях, сантиметрах и так далее). В этом случае задается смещение левого верхнего угла фонового изображения от верхнего левого угла прямоугольника.
Во-вторых, для того же свойства background-position может быть указано значение в процентах. В данном случае указывается не смещение фонового рисунка. Вместо этого для области фона и фонового рисунка вычисляются точки, отстоящие от их верхнего левого края на указанное количество процентов их собственной ширины и высоты, после чего эти точки совмещаются.
При размножении фонового изображения (смотри пункт "Размножение изображений") положение фонового изображения так же учитывается. Именно от этого положения начинается копирование фонового изображения. Поэтому изменение положения исходного фонового изображения сдвигает и все копии.
Фиксированный фон
По умолчанию координатная сетка для свойства
background-position привязана к элементу. Поэтому при прокрутке фоновое изображение и содержимое элемента перемещаются окне просмотра слитно. В тоже время, используя свойство
background-attachment можно заставить браузер привязать координатную сетку фона к окну просмотра. В этом случае фон окажется неподвижным относительно окна браузера, в то время как содержание документа будет прокручиваться.
Спецификация CSS2.1 позволяет разработчикам браузеров игнорировать данное свойство для всех элементов кроме HTML и BODY, однако все распространенные браузеры (IE, Opera, Mozilla, Chrome) поддерживают это свойство и для остальных элементов.
Элементы с фиксированным фоном отображают именно свой фон, а не задают фон для окна просмотра. При этом сохраняют свое действие друге свойства фона, такие как background-image, background-repeat. Это позволяет добиваться интересных дизайнерских эффектов при прокрутке страницы, сочетая слои с фиксированным и свободным фоном.
Расширяемый язык разметки (Extensible Markup Language, XML) является самой интересной разработкой, относящейся к Интернету, с тех пор как язык разметки гипертекста (Hypertext Markup Language, HTML) привел к появлению системы World Wide Web. XML и родственные технологии совершенствуют систему обмена данных сети Web, способствуя превращению Интернета в мощную среду для структурированного обмена данными. XML позволяет различным системам обмениваться данными посредством общих структур и спецификаций. XML выходит
за пределы статичных, линейных документов, вводя объектную модель, которая дает возможность сортировать, выбирать данные и манипулировать ими в документе — как на сервере, так и на компьютере клиента.
В этой книге показано, как встроить XML и родственные технологии в многоуровневые приложения Web для осуществления широкого обмена. Рассмотрены основные возможности XML и способы их применения в типовом примере разработки конкретного приложения. Наша цель — снять завесу тайны и абстракции вокруг языка XML и показать, как применять его в реальном мире.
Вот список вопросов, ответы на которые вы можете найти в этой книге:
- Что такое блоги? Почему они так популярны. Примеры блогов.
– Что такое Wordpress, почему именно он и где его скачать?
– Как установить Wordpress на удаленный и локальный компьютер?
– Что такое администраторская панель и зачем она нужна?
– Какие настройки нужно произвести, чтобы блог работал так, как нужно?
– Как за 3 минуты полностью поменять дизайн блога?
– и другие вопросы.
Всего через 1 день и в Вашей собственности будет блог на самом современном блоговом “движке” Wordpress и Вам останется лишь заполнять его контентом и продвигать в поисковые системы, увеличивая Ваши доходы каждый день.
"Энциклопедия веб-мастера:
Создание сайта от А до Я!" (DVD) Всё для создания стильного современного веб-сайта! На этом диске Вы найдете всё необходимое для успешного веб-мастеринга – профессиональные шаблоны сайтов, функциональные скрипты (более 1000), актуальный веб-мастерский софт (более 2.5 Гб) и учебную литературу по всем популярным языкам веб-программирования (более 100 иллюстрированных книг по HTML, CSS, Flash, XML, AJAX, Java, PHP, Perl).
"2000+ шаблонов сайтов всех стилей и тематик" (DVD) Огромная коллекция шаблонов сайтов. Больше Вам не нужно тратить время и деньги на разработку дизайна и навигации для сайта. С помощью этой коллекции Вы сможете реализовать любой веб-сайт от простой визитки до интернет-магазина, от домашней страницы до информационного портала, от дорвея до корпоративного сайта.
"PHP от А до Я: Всё для создания динамичного веб-сайта" (CD) На диске "PHP от А до Я: всё для создания динамичного веб-сайта" вы найдете огромное количество готовых php-скриптов (1800!), способных решить практически любую задачу - от создания формы обратной связи, гостевой книги, форума до построения сложного интернет-портала или электронного магазина. А тщательно подобранный софт для PHP сделает вашу работу
максимально комфортной и эффективной, независимо от вашего уровня подготовки.
Надеюсь, что вам понравился этот выпуск рассылки и вы узнали что-то новое и полезное для себя. Если у вас есть пожелания или предложения как сделать рассылку лучше, присылайте их на наш e-mail:
admin@wm-zone.info
