Самоучитель по креативному веб-дизайну. Книга 2, стр.21

19.05.2010

Допустимые значения свойства cursor и описания назначения каждого вида указателя мыши перечислены в таблице 4.2.

Глава 4. Каскадные списки стилей 229

Расположение элементов Web-страницы по слоям

При позиционировании элементов на Web-странице вы работаете только с

двумя размерностями. Например, для помещения формы на расстоянии 75 пик — селей от левого края и на расстоянии 50 пикселей от верхнего края страницы

будет использоваться дескриптор следующего вида:

form style=»position:absolute; left:75; top:50″>

Конечно, дескриптор

имеет такие дополнительные атрибуты, как

action и method (для примера приведем всего лишь два атрибута), которые ука — зывают Web-браузеру, соответственно, куда передавать результаты заполнения

формы и каким образом их форматировать перед передачей. Teii не менее, важ —

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

рования на Web-странице. Аналогично, относительное позиционирование озна —

чает, что указываемое вами положение элемента приводится относительно того положения, которое бы элемент занимал в Web-документе бе(з использования свойств позиционирования.

Фактически при указании положения элемента в двух размерностях Web-брау — зер автоматически добавляет третью размерность (глубину). Предположим, на — пример, что в HTML-коде страницы содержится следующий код:

23 0 Глава 4. Каскадные списки стилей

h2 style=»position:absolute; top:110px; left:75px;

background-color:yellow; border:solid 2px; font-size:25pt»> Текст заголовка уровня-2 text

hl style=»position:absolute; top:100px; left:50px;

background-color:yellow; border* solid 2px; font-size:35pt»>

Текст заголовка уровня-1 text

На страницу будут выведены только заголовки уровня 1. Web-браузер «не за — был» поместить на страницу заголовок уровня 2. Как раз наоборот, браузер сна —

чала помещает на страницу заголовок уровня 2 на расстоянии 100 пикселей от верхнего и на расстоянии 50 пикселей от левого края страницы. Затем поверх за —

головка уровня 2 Web-браузер поместит заголовок уровня 1. Таким образом, ког —

да стиль каскадного списка стиля заставляет браузер поместить элемент в поло- жение, где уже находится другой элемент страницы, браузер помещает новый элемент на слой поверх существующего элемента, если, конечно, заранее не уста- новить значение параметра z-index.

Свойство z-index каскадных списков стилей позволяет выбирать слой, в ко- торый Web-браузер поместит элемент. При написании HTML-кода можно быстро запутаться, если одновременно использовать свойства позиционирования каскад- ных списков стилей и свойство z-index, которое контролирует взаимное нало — жение элементов страницы.

Самоучитель по креативному веб-дизайну. Книга 2, стр.21

Оставить комментарий