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

Допустимые значения свойства 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, которое контролирует взаимное нало — жение элементов страницы.

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

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

Вы должны авторизоваться для отправки комментария.

Полезные ссылки
Случайные записи
  • 14.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.62
  • 22.03.2011">Руководство по actionscript. часть 2, стр. 006
  • 24.02.2011">Руководство по actionscript. часть 7, стр. 003
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.45
  • 19.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.31
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.96
  • 13.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.94
  • 12.03.2011">Руководство по actionscript. часть 3, стр. 118
  • 28.02.2011">Руководство по actionscript. часть 6, стр. 001
  • 17.03.2011">Руководство по actionscript. часть 2, стр. 145
  • 23.08.2011">ACER Ferrari ONE 200
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.65
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.102
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 028
  • 12.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.109
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...