ИНФОРМАЦИЯ,    ДИЗАЙН,    ПЕРЕВОДЫ,    РЕКЛАМА   .   .   .
w a p - с а й т
Информационный портал
Сегодня:  
admin@aranea.ru
+79068922256

  aranea.ru || Занятия по "Каскадным стилевым таблицам" | О визуальном форматировании

О визуальном форматировании

Модель визуального форматирования каскадных стилевых таблиц позволяет менять положение содержания блоков, накладывать их друг на друга, делать видимыми и не видимыми.

Материал, касающийся этой темы, очень подробно описан в спецификации CSS2 в нескольких разделах: "9. Модель визуального форматирования."; "10. Подробности модели визуального форматирования."; "11. Визуальные эффекты.".

Мы рассмотрим несколько интересных свойств, которые можно сразу применить на практике.

Position

Свойство position определяет алгоритм позиционирования блока. Мы будем использовать два значения: relative и absolute. Отличие относительного (relative) и абсолютного (absolute) позиционирования заключается в том, что содержание первого смещается относительно своего блока, а содержание второго смещается относительного всего основного объемлющего блока документа. Звучит сложно, но все не так страшно.

В нашем примере HTML-документа присутствует два анонимных блока, один указан явно фразой, "что он анонимный", а другой размещен в самом начале – "Название компании". Это название мы и будем позиционировать с помощью атрибута style элемента DIV.

Заключим фразу "Название компании" внутрь элемента DIV, и продублируем ее.

ПРИМЕР 14
<DIV>Название компании</DIV>
<DIV>Название компании</DIV>

Теперь наш анонимный блок стал блочным, и при просмотре документа обе фразы будут выводиться друг под другом.

Если вы просмотрели раздел 9.3. Схемы позиционирования., то знаете, что свойства top, left, right, bottom определяют координаты смещения относительно соответствующих краев документа.

Первый пример мы выполним для относительного позиционирования.

ПРИМЕР 15
<DIV style='position: relative;font-size: 50px;font-weight: bold; 
color: navy;z-index:2'>Название компании</DIV>

<DIV style='position: relative;font-size: 50px;font-weight: bold; 
Color: silver;top: -49; left:10; z-index: 1'>Название компании</DIV>

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

Сравните относительное позиционирование с абсолютным.

ПРИМЕР 16
<DIV style='position: absolute; font-size: 50px;font-weight: bold; 
color: navy;z-index:5; top=10; right: 10;'>Название компании</DIV>

<DIV style='position: absolute; font-size: 50px;font-weight: bold; 
Color: silver; z-index: 4; top=12; right: 12'>Название компании</DIV>

Абсолютное позиционирование не влияет на смещение соседних блоков.

← Назад | Вперед →
Copyright ©  aranea.ru