CSS2Визуальное представление документа. Блок. Контейнер.Введение.
Как было написано ранее, под блокообразующие HTML-элементы при выводе документа отводятся
стилевые блоки, обладающие определенными визуальными свойствами (отступы, границы, поля).
Под строковые HTML-элементы такие блоки не выделяются. Все строковые элементы входят в состав
блокообразующих элементов и отображаются в их информативной области. Блокообразующим элементом
самого высокого уровня является элемент
С точки зрения структуры использование блоков выглядит не совсем так. В CSS2 каждый HTML-элемент,
присутствующий в дереве документа (элемент <p> Текст абзаца Текст абзаца <pre> Отформатированный текст абзаца Отформатированный текст абзаца Отформатированный текст абзаца </pre> <p>
В этом примере главный структурный блок содержит в себе некий текст абзаца, а также дочерний структурный
блок (тоже главный), порожденный элементом
В сооветствии с вышеприведенным положением CSS2 этого быть не должно. Выход из создавшегося положения
заключается в том, что под текст абзаца выделяется безымянный структурный блок. И, таким образом, главный
структурный блок, порожденный элементом Строковые элементы, не образующие новых структурных единиц текста, заключаются в строковые структурные блоки. Например: <p> Пример армейского юмора: <strong> Приказ командира </strong> <em> Всем отсутствующим построиться в отдельную шеренгу </em> </p>
Элемент
Такая блоковая структура позволяет наиболее полно и просто представлять структуру документа в рамках его блочной модели. Что касается практики, то на первый взгляд может показаться, что достаточно было бы главных блоков, обладающих индивидуальным стилевым оформлением (поля, границы, отступы). Однако помимо декоративного оформления, благодаря блоковой организации всего документа осуществляется задание месторасположения (позиционирование) отдельных фрагментов информации в пределах документа. Это означает, что, например, положение фрагмента текста на Web-странице задается положением структурного блока, которому он принадлежит. Причем этим фрагментом текста может быть как структурное подразделение текста (абзац), так и отдельная его строка или даже слово. В CSS2 положение и размеры блоков определяются относительно краев определенной области прямоугольной формы. Эта область называется контейнером. Контейнером для любого структурного блока является пространство, отведенное для информативной области его родительского структурного блока. При этом говорят, что родительский блок назначает контейнер своему потомку. Стоит отметить, что относительно контейнера задается положение дочернего блока, но размеры последнего никоим образом не ограничиваются размерами контейнера, назначенного родительским блоком. Другими словами, структурный блок может выходить за рамки своего контейнера.
Ввиду всего вышесказанного становится понятным, что начальный контейнер назначается корневым HTML-элементом
дерева документа, т.е. либо элементом Теперь рассмотрим, где, как и в какой последовательности могут отображаться структурные блоки в рамках визуального представления документа. Если язык HTML позволял осуществлять только последовательный вывод (содержимое элементов располагается на странице друг за другом в том порядке, в котором заданы сами HTML-элементы), то язык CSS2 позволяет реализовать более широкие возможности позиционирования. Нормальный поток.В этом параграфе будет произведено описание потока или, другими словами, последовательности вывода содержимого HTML-документа, являющейся обычной и используемой по умолчанию. Именно нормальный поток вывода осуществляется обычными средствами языка HTML. В этом случае информация отображается в том же порядке, в котором она задана в HTML-коде документа.
Рассмотрим нормальный поток через призму языка CSS2 и его блочную организацию документа. При нормальном
потоке структурные блоки располагаются друг за другом вертикально, начиная с верхнего края своего
контейнера, назначенного родительским блоком, в порядке, в котором они указаны в HTML-документе.
Вертикальное расстояние между двумя сестринскими блоками определяется размером их полей (свойство
Если имеет место направленность текста справа-налево, то соприкасаются правые поля и края. Строковый блок выводится одной строкой. Шириной строкового блока является ширина назначенного ему контейнера. Несколько идущих подряд строковых структурных блоков также выводятся одной строкой. Рис. . Пример отображения содержимого элементов в нормальном потоке.Схемы позиционирования. Свойство position.Средствами языка CSS2 структурный блок может быть вынут из нормального потока отображения документа. В этом случае его месторасположение на Web-странице перестает зависеть от его положения в очередности задания блоков, то есть не зависит от того, в каком месте HTML-кода документа задан элемент. Теперь его визуальное расположение на странице может быть задано независимо от других блоков. Причем он может перекрывать ранее отображенные блоки. Такая схема позиционирования называется абсолютной. К тому же положение блока может быть задано относительно его обычного положения в нормальном потоке. В этом случае будет иметь место схема относительного позиционирования.
Схема, соответствующая нормальному потоку, называется схемой статического позиционирования.
Задание схемы, согласно которой будет позиционироваться блок, осуществляется свойством
Абсолютное позиционирование.Структурный блок, для которого указана абсолютная схема позиционирования, изымается вместе со всеми своими потомками из нормального потока. Его положение задается относительно контейнера, назначенного ближайшим родителем с абсолютной или относительной схемой позиционирования. Если такого родителя не имеется, то положение структурного блока будет задаваться относительно начального контейнера. Абсолютно позиционированные блоки не влияют на размещение последующих сестринских блоков. Они могут перекрывать ранее отображенные блоки, а также перекрывать блоки нормального потока, задаваемыми после них. Это значит, что при отображении Web-страницы абсолютно позиционируемый блок может быть перекрыт только другим абсолютно или относительно позиционируемым блоком, заданным после него (рис. 3.1).
Надо также отметить, что поля абсолютно позиционируемых главных блоков не перекрываются никакими другими полями. Положение такого блока задается:
Эти расстояния задаются с помощью CSS-свойств:
Значения этих свойств задаются в стандартных единицах длины, определенных для языка CSS2. Также может
быть использовано ключевое слово
Использование свойств
Совместное применение свойств <html> <head> <title> Пример использования блоков с абсолютным позиционированием </title> <style type="text/css"> p { position: absolute; top: 60; left: 100; background-color: lightgrey; border: thin solid black; margin: 10; padding: 50 } img { position: absolute; top: 140; left: 350 } pre { position: absolute ; top: 200; left: 250; background-color: lightblue; border: thin solid black; padding: 20 } </style> </head> <body bgcolor=white> <h3 align=center> Пример использования блоков с абсолютным позиционированием </h3> текст текст текст текст текст текст текст текст текст текст текст ................................................................. текст текст текст текст текст текст текст текст текст текст текст <p> текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца </p> <img src="lilies.jpg" width=350> <pre> отформатироаванныи текст отформатироаванныи текст отформатироаванныи текст отформатироаванныи текст </pre> </body> </html>
Допускается указание отрицательных значений для свойств <html> <head> <title> Пример абсолютно позиционируемого блока, выходящего за пределы своего контейнера </title> <style type="text/css"> div { position: absolute; top: 150; left: 150; background-color: lightgrey; border: thin solid black; margin: 10; padding: 50 } img { position: absolute; top: -50; left: 100 } </style> </head> <body bgcolor=white> <h3 align=center> Пример абсолютно позиционируемого блока, выходящего за пределы своего контейнера </h3> текст текст текст текст текст текст текст текст текст текст текст ................................................................. текст текст текст текст текст текст текст текст текст текст текст <div> <img src="lilies.jpg" width=200> родительский контейнер родительский контейнер родительский контейнер родительский контейнер родительский контейнер родительский контейнер родительский контейнер родительский контейнер родительский контейнер </div> </body> </html>
Если отрицательные координаты заданы относительно начального контейнера, то это приводит к утрате той части позиционируемого блока, которая выходит за пределы этого контейнера. Относительное позиционирование.При относительном позиционировании блок сначала размещается на Web-странице в соотвествии с нормальным потоком. Затем он может быть смещен относительно своего исходного положения в нормальном потоке. При этом все остальные сестринские структурные блоки располагаются на странице так, как будто относительно позиционированный блок не был перемещен. Т.е. на месте последнего в нормальном потоке отображается пустое пространство, соответствующее его геометрическим размерам. <html> <head> <title> Все содержимое документа выводится в нормальном потоке </title> <style type="text/css"> p.static { background-color: lightblue; border: thin solid black; margin: 20; padding: 20 } p.relative { position: relative; top: 50; left: 50; background-color: lightblue; border: thin solid black; margin: 20; padding: 20 } </style> </head> <body bgcolor=white> <h3 align=center> Все содержимое документа выводится в нормальном потоке </h3> <p> B уездном городе N было так много парикмахерских заведений и бюро похоронных процессий, что казалось, жители города рождаются лишь затем, чтобы побриться, остричься, освежить голову вежеталем и сразу же умереть. А на самом деле в уездном городе N люди рождались, брились и умирали довольно редко. Жизнь города N была тишайшей. </p> <p class="static"> Вопросы любви и смерти не волновали Ипполита Матвеевича Воробьянинова, хотя этими вопросами по роду своей службы он ведал с девяти утра до пяти вечера ежедневно с получасовым перерывом для завтрака. </p> <p> Хотя похоронных депо было множество, но клиентура у них была небогатая. "Милости просим" лопнуло еще за три года до того, как Ипполит Матвеевич осел в городе N, а мастер Безенчук пил горькую и даже однажды пытался заложить в ломбарде свой лучший выставочный гроб. </p> <p> Люди в городе N умирали редко, и Ипполит Матвеевич знал это лучше кого бы то ни было, потому что служил в загсе, где ведал столом регистрации смертей и браков. </p> </body> </html>
HTML-элемент порождает относительно позиционированный блок, если для его свойства
Потомки относительно позиционируемого блока смещаются вместе с ним, так как вместе с родительским
блоком смещается их контейнер. Смещение блока относительно его нормального положения задается с
помощью свойств
Задание значений свойствам Перемещаемые блоки. Свойство float.Абсолютно позиционируемый блок располагается поверх блоков нормального потока, а также поверх ранее отпозиционированных блоков. Обычно это воспринимается как их положительное качество. Однако могут быть случаи, когда мало просто расположить определенным образом какой-либо блок на Web-странице, а надо, чтобы и окружающие блоки учли его положение и разместились таким образом, чтобы не перекрывать друг друга. Средства языка CSS2 позволяют реализовать некоторые возможности в данном направлении, указав блок как перемещаемый.
Блок является перемещаемым, если для него определено свойство
Близкой аналогией свойства
Очень удобно в качестве перемещаемого объекта задавать буквицы для абзацев. В соответствие со своим
назначением свойство
Свойство Многослойный вывод. Свойство Z-index.
В предыдущих разделах особое внимание было уделено перекрываемости структурных блоков при их отображении.
В общем случае для языка CSS2 каждый структурный блок располагается в трехмерном пространстве. При этом
помимо горизонтальных и вертикальных координат, характеризующих положение в плоскости, блоки имеют
координату вдоль оси Z, располагаясь один поверх другого. Указание Z-координаты позволяет разработчику
явно указывать, какой структурный блок должен располагаться поверх другого. В языке CSS2 эта воможность
реализуется с помощью свойства <html> <head> <title> Демонстрация использования CSS-свойства Z-index </title> <style type ="text/css"> p { position: absolute;: top: 50; left: 15; margin: 10; padding: 5; border: thin solid gray; background-color: lightblue; } #lilies { position: absolute; top: 80; left: 100; Z-index: 2 } #forest { position: absolute; top: 110; left: 300; Z-index: 3 body { Z-index: 100 } </style> </head> <body> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст <img id="lilies" src="lilies.jpg" width="400"> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст <p> текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца текст абзаца </p> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст <img id="forest" src="forest.jpg" width="300"> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </body> </html> При выводе этого документа на экран монитора будет соблюдаться очередность отображения, представленная на рис. 3.5.
Внимательно просмотрев код документа и порядок его слоев, можно заметить, что, хотя элементу
В качестве значения свойству |
||||||||||||||||||||||