HTML  CSS  PHP и MySQL  Регулярные выражения  Введение в SQL  Учебник SQL

Добро пожаловать!
Здесь вы можете найти ответ на интересующий вас вопрос в отрасли сайтостроения, познакомится ближе с web технологиями и web стандартами.

CSS2

Визуальное представление документа. Блок. Контейнер.

Введение.

Как было написано ранее, под блокообразующие HTML-элементы при выводе документа отводятся стилевые блоки, обладающие определенными визуальными свойствами (отступы, границы, поля). Под строковые HTML-элементы такие блоки не выделяются. Все строковые элементы входят в состав блокообразующих элементов и отображаются в их информативной области. Блокообразующим элементом самого высокого уровня является элемент body.

С точки зрения структуры использование блоков выглядит не совсем так. В CSS2 каждый HTML-элемент, присутствующий в дереве документа (элемент <br>, например, не присутствует), помещается в структурный блок. Структурные блоки блокообразующих HTML-элементов называются главными. Таким образом, только главные структурные блоки могут иметь свое, индивидуальное стилевое оформление (отступы, границы, поля). Именно они и их параметры, используются при форматировании (компоновке) документа. Главный блок может содержать либо структурную единицу текста (например, абзац), либо несколько структурных блоков, являющихся его потомками (например, несколько абзацев). Вообще, все структурные блоки, имеющие внутри себя хотя бы один дочерний структурный блок, ничего, кроме структурных блоков, содержать не могут. Рассмотрим это положение на примере:

<p>
Текст абзаца
Текст абзаца
<pre>
Отформатированный текст абзаца
Отформатированный текст абзаца
Отформатированный текст абзаца
</pre>
<p>

В этом примере главный структурный блок содержит в себе некий текст абзаца, а также дочерний структурный блок (тоже главный), порожденный элементом pre.

В сооветствии с вышеприведенным положением CSS2 этого быть не должно. Выход из создавшегося положения заключается в том, что под текст абзаца выделяется безымянный структурный блок. И, таким образом, главный структурный блок, порожденный элементом <p>, становится обладателем двух дочерних структурных блоков и ничего более, чем и достигается соблюдение требований языка CSS2.

Строковые элементы, не образующие новых структурных единиц текста, заключаются в строковые структурные блоки. Например:

<p>
Пример армейского юмора:
<strong> Приказ командира </strong>
<em> Всем отсутствующим построиться в отдельную шеренгу </em>
</p>

Элемент <p> порождает главный структурный блок, который содержит несколько строковых структурных блоков:

• безымянный строковый блок ("Пример армейского юмора");
• строковый структурный блок, порожденный элементом strong ("Приказ командира");
• строковый структурный блок, порожденный элементом em ("Всем отсутствующим построиться в отдельную шеренгу").

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

В CSS2 положение и размеры блоков определяются относительно краев определенной области прямоугольной формы. Эта область называется контейнером. Контейнером для любого структурного блока является пространство, отведенное для информативной области его родительского структурного блока. При этом говорят, что родительский блок назначает контейнер своему потомку.

Стоит отметить, что относительно контейнера задается положение дочернего блока, но размеры последнего никоим образом не ограничиваются размерами контейнера, назначенного родительским блоком. Другими словами, структурный блок может выходить за рамки своего контейнера.

Ввиду всего вышесказанного становится понятным, что начальный контейнер назначается корневым HTML-элементом дерева документа, т.е. либо элементом body, либо элементом frameset. Именно начальный контейнер является контейнером самого высокого уровня. Его нельзя позиционировать (задавать его положение в контексте других блоков) и перемещать. Это значит, что применительно к нему игнорируются соответствующие CSS2-свойства position и float, описываемые далее. Можно задавать только геометрические размеры начального контейнера, указав атрибуты width и height корневого HTML-элемента. Дочерние блоки всех поколений не могут выходить за рамки начального контейнера.

Теперь рассмотрим, где, как и в какой последовательности могут отображаться структурные блоки в рамках визуального представления документа. Если язык HTML позволял осуществлять только последовательный вывод (содержимое элементов располагается на странице друг за другом в том порядке, в котором заданы сами HTML-элементы), то язык CSS2 позволяет реализовать более широкие возможности позиционирования.

Нормальный поток.

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

Рассмотрим нормальный поток через призму языка CSS2 и его блочную организацию документа. При нормальном потоке структурные блоки располагаются друг за другом вертикально, начиная с верхнего края своего контейнера, назначенного родительским блоком, в порядке, в котором они указаны в HTML-документе. Вертикальное расстояние между двумя сестринскими блоками определяется размером их полей (свойство margin). Причем поля соседних блоков перекрываются и за расстояние между последними принимается размер наибольшего поля. Если по вертикали соприкасаются главный и строковый структурный блоки, то расстояние между ними определяется размером поля главного блока, т.к. строковый блок вообще не имеет поля. Левое поле каждого главного блока или левый край строкового блока соприкасается с левым краем своего контейнера. Наглядно это можно увидеть на рисунке .

Если имеет место направленность текста справа-налево, то соприкасаются правые поля и края. Строковый блок выводится одной строкой.

Шириной строкового блока является ширина назначенного ему контейнера. Несколько идущих подряд строковых структурных блоков также выводятся одной строкой.

Схемы позиционирования. Свойство position.

Средствами языка CSS2 структурный блок может быть вынут из нормального потока отображения документа. В этом случае его месторасположение на Web-странице перестает зависеть от его положения в очередности задания блоков, то есть не зависит от того, в каком месте HTML-кода документа задан элемент. Теперь его визуальное расположение на странице может быть задано независимо от других блоков. Причем он может перекрывать ранее отображенные блоки. Такая схема позиционирования называется абсолютной.

К тому же положение блока может быть задано относительно его обычного положения в нормальном потоке. В этом случае будет иметь место схема относительного позиционирования.

Схема, соответствующая нормальному потоку, называется схемой статического позиционирования. Задание схемы, согласно которой будет позиционироваться блок, осуществляется свойством position. В соответствие со своим назначением оно может принимать следующие значения:

• static — указывает на то, что текущий блок является обычным, располагающимся в соответствии с нормальным потоком блоков, другими словами, задает статическую схему позиционирования для данного блока;
• relative — указывает относительную схему позиционирования для данного блока;
• absolute — задает абсолютную схему позиционирования для данного блока.

Абсолютное позиционирование.

Структурный блок, для которого указана абсолютная схема позиционирования, изымается вместе со всеми своими потомками из нормального потока. Его положение задается относительно контейнера, назначенного ближайшим родителем с абсолютной или относительной схемой позиционирования. Если такого родителя не имеется, то положение структурного блока будет задаваться относительно начального контейнера.

Абсолютно позиционированные блоки не влияют на размещение последующих сестринских блоков. Они могут перекрывать ранее отображенные блоки, а также перекрывать блоки нормального потока, задаваемыми после них. Это значит, что при отображении Web-страницы абсолютно позиционируемый блок может быть перекрыт только другим абсолютно или относительно позиционируемым блоком, заданным после него (рис. 3.1).

Рис. 3.1	Пример отображения абсолютно позиционируемых блоков и демонстрация наложения их друг на друга.

Надо также отметить, что поля абсолютно позиционируемых главных блоков не перекрываются никакими другими полями. Положение такого блока задается:

• по вертикали — расстоянием между верхним краем контейнера и верхним краем структурного блока или расстоянием между нижними краями;
• по горизонтали — расстоянием между левым краем контейнера и левым краем структурного блока или расстоянием между правыми краями. Например:
  img { position: absolute; top: 30рх; left: 100рх }

Эти расстояния задаются с помощью CSS-свойств:

• top — своим значением указывает величину смещения верхнего края блока относительно верхнего края контейнера;
• bottom — задает расстояние между нижними краями блока и контейнера;
• left — задает смещение левого края блока относительно левого края контейнера;
• right — задает смещение правого края блока относительно правого края контейнера.

Значения этих свойств задаются в стандартных единицах длины, определенных для языка CSS2. Также может быть использовано ключевое слово auto. Использование этого слова в качестве значения для свойства left приведет к тому, что левый край блока будет совпадать с левым краем контейнера. Если свойство top выставлено в значении auto, то совпадать будут верхние края блока и контейнера. По умолчанию оба этих атрибута используются в значении auto.

Использование свойств right и bottom имеет свои особенности:

• если для одного абсолютно позиционируемого блока указаны два свойства left и right, и оба в числовом значении, то свойство left перекрывает свойство right независимо от порядка следования;
• если оба свойства right и left выставлены в значении auto, то свойство left опять же перекрывает свойство right;
• если для одного из них указано значение auto, а для другого числовое значение, то последнее свойство перекрывает свойство со значением auto.

Совместное применение свойств top и bottom аналогично вышеописанному применению left и right. Только вместо left надо подставить top, а вместо right — bottom. В качестве примера приведен код документа, отображенного на рис. 3.1.

<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>

Допускается указание отрицательных значений для свойств top, bottom, right, left. В этом случае блок будет выходить за рамки своего контейнера (рис. 3.2).

<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>

Рис. 3.2	Пример абсолютно позиционируемого блока, выходящего за пределы своего контейнера.

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

Относительное позиционирование.

При относительном позиционировании блок сначала размещается на 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>

Рис. 3.3	Абзац выводится в нормальном потоке.

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

Потомки относительно позиционируемого блока смещаются вместе с ним, так как вместе с родительским блоком смещается их контейнер. Смещение блока относительно его нормального положения задается с помощью свойств top и left, которые характеризуют верикальную и горизонтальную составляющие смещения соответственно.

Рис. 3.4	Относительное позиционирование абзаца.

Задание значений свойствам top и left для относительно позиционированного блока аналогично заданию этих свойств для абсолютно позиционируемых блоков. Допускается использование отрицательных значений (в этом случае блок выходит за рамки своего контейнера).

Перемещаемые блоки. Свойство float.

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

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

Блок является перемещаемым, если для него определено свойство float. С помощью этого свойства можно сместить блок либо к левой, либо к правой границе его контейнера. Если, например, блок задан как перемещаемый влево (float: left), то он смещается к левой границе контейнера, а все блоки, которые до этого находились левее его, теперь будут располагаться правее. Другими словами, нормальный поток будет обтекать его справа.

Близкой аналогией свойства float является прикрепление таблиц и изображений к краям документа с помощью задания атрибута align, благодаря чему достигается обтекание их текстом.

Очень удобно в качестве перемещаемого объекта задавать буквицы для абзацев. В соответствие со своим назначением свойство float может принимать следующие значения:

• left — структурный блок задается как перемещаемый влево;
• right — структурный блок задается как перемещаемый вправо;
• none — структурный блок никуда не перемещается.

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

Многослойный вывод. Свойство Z-index.

В предыдущих разделах особое внимание было уделено перекрываемости структурных блоков при их отображении. В общем случае для языка CSS2 каждый структурный блок располагается в трехмерном пространстве. При этом помимо горизонтальных и вертикальных координат, характеризующих положение в плоскости, блоки имеют координату вдоль оси Z, располагаясь один поверх другого. Указание Z-координаты позволяет разработчику явно указывать, какой структурный блок должен располагаться поверх другого. В языке CSS2 эта воможность реализуется с помощью свойства Z-index. Значением этого свойства является целое число, показывающее позиционный уровень блока. Структурный блок с более высоким позиционным уровнем перекрывает блок с более низким позиционным уровнем. Допускается использование отрицательных значений. Каждый родительский блок назначает позиционный контекст своим потомкам, на котором они отображаются.

<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.

Рис. 3.5	Демонстрация многослойной структуры документа.

Внимательно просмотрев код документа и порядок его слоев, можно заметить, что, хотя элементу body был присвоен самый большой Z-index, его содержимое отображается на заднем плане. Объясняется это тем, что элемент body является родительским элементом по отношению ко всем другим элементам. Поэтому он задает позиционный контекст им всем. Это означает, что Z-индексы всех дочерних элементов берутся относительно Z-индекса родителя, поэтому ясно, что задание свойства Z-index для элемента body не влечет никаких последствий, то есть бессмысленно.

В качестве значения свойству Z-index можно указывать ключевое слово auto. При этом любой структурный блок с числовым значением Z-index всегда будет перекрывать блок, значением свойства Z-index которого является ключевое слово auto. Для всех элементов, для которых не указано свойство Z-index, по умолчанию используется значение auto. В вышеприведенном примере демонстрацией этого служит элемент <p>, для которого не определено свойство Z-index.