Использование специальных стилей

Подавление вывода символов маркеров

Может понадобиться использование других, отличных от стандартных, символов маркеров перед элементами списка. В следующем примере свойство ) из шрифта Webdings (числовой символ "4" выводит символ правой стрелки в этом семействе шрифтов).

<style type="text/css">
  ul {list-style-type:none; margin-left:20px}
</style>

<ul>
  <li><span style="font-family:webdings">4</span> Элемент списка 1</li>
  <li><span style="font-family:webdings">4</span> Элемент списка 2</li>
  <li><span style="font-family:webdings">4</span> Элемент списка 3</li>
</ul>

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

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

<style type="text/css">
  ul {margin-left:20px}
</style>

<ul>
  <li><span style="font-family:webdings">4</span> Элемент списка 1</li>
  <li><span style="font-family:webdings">4</span> Элемент списка 2</li>
  <li><span style="font-family:webdings">4</span> Элемент списка 3</li>
</ul>

Когда в таблицу стилей добавляется list-style-type:none, то используемые по умолчанию символы в форме диска не выводятся; однако занимаемое этими символами пространство остается.

Чтобы переместить список, включая стрелки, влево, так чтобы он занял это пространство и сохранил нормальный отступ элементов списка, в таблицу стилей добавляют свойство margin-left. Левое поле шириной примерно 20 пикселей выравнивает символы правой стрелки в позиции, которую ранее занимали маркеры.

Использование графических изображений для неупорядоченных списков

Вместо использования текстовых символов для маркировки элементов списка можно применять графические изображения, задавая свойство list-style-image:url(url). Если изображение находится в том же каталоге, что и страница со списком, то url является просто именем графического файла. В следующем примере изображение с именем Bullet.gif используется для маркировки элементов списка. Вывод в браузере показан на рисунке 6.3.

<style type="text/css">
  ul {list-style-image:url(Bullet.gif); vertical-align:middle}
</style>

<ul>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
</ul>

В зависимости от размера изображения может потребоваться настроить вертикальное выравнивание элементов списка, чтобы выровнять их требуемым образом с изображением. Обычно текст выравнивается по нижней части изображения в строке. В этом примере для изображения применяется свойство vertical-align:middle, чтобы выровнять сопровождающий текст со серединой изображения. Можно также использовать значения text-top и text-bottom для вертикального выравнивания текста с верхним или нижним краем изображения.

Оформление упорядоченных списков

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

<ol>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
</ol>

1. Элемент списка 1
2. Элемент списка 2
3. Элемент списка 3

В таблице стилей можно задавать тип символов нумерации, которые будут стоять перед элементами списка. Для этого применяется свойство list-style-type со значениями, показанными в таблице 6.2. По умолчанию используется значение decimal.

list-style-type

decimal
upper-alpha
lower-alpha
upper-roman
lower-roman
none

Задание числовых символов

Следующий упорядоченный список нумеруется большими римскими цифрами ( upper-roman ). Вывод браузер показан в листинге 6.12.

<style type="text/css">
  ol {list-style-type:upper-roman}
</style>

<ol>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
</ol>

I. Элемент списка 1
II. Элемент списка 2
III. Элемент списка 3

Вложенные упорядоченные списки

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

<style type="text/css">
  ol#List1 {list-style-type:upper-roman}
  ol#List2 {list-style-type:lower-roman}
</style>

<ol id="List1">
  <li>Элемент списка 1</li>
  <li>Элемент списка 2
      <ol id="List2">
        <li>Элемент списка 2a</li>
        <li>Элемент списка 2b</li>
      </ol>
  </li>
  <li>Элемент списка 3</li>
</ol>

I. Элемент списка 1
 II. Элемент списка 2 
	 i. Элемент списка 2a
	ii. Элемент списка 2b
III. Элемент списка 3

Оформление списков определений

Список определений является рядом терминов и определений, отделенных от окружающего текста одиночной пустой строкой. Термины в списке выравниваются по левому полю; определения смещаются вправо и переносятся по словам на следующих строках.

Вспомните,что список определений заключается внутрь тегов <dl> и содержит один или несколько тегов <dt>, перечисляющих определяемые термины. Каждый термин имеет связанный с ним тег <dd>, окружающий его определение. Пример списка определений закодирован ниже и показан в листинге 6.16.

<dl>
  <dt>Term 1</dt>
    <dd>Это определение Term 1. Определяемый термин выводится в 
    отдельной строке, за которой следует блок текста  определения. Определение 
    смещается относительно определения вправо и переносится по словам.  
      </dd>
  <dt>Term 2</dt>
    <dd>Это определение Term 2. Определяемый термин выводится в 
    отдельной строке, за которой следует блок текста  определения. Определение 
    смещается относительно определения вправо и переносится по словам. 
</dd>
</dl>

Term 1
	Это определение Term 1. Определяемый термин выводится в отдельной строке, 
	за которой следует блок текста  определения. Определение смещается 
	относительно определения вправо и переносится по словам.  
Term 2
	Это определение Term 2. Определяемый термин выводится в отдельной строке, 
	за которой следует блок текста  определения. Определение смещается 
	относительно определения вправо и переносится по словам.

Не существует свойств стилей, специально созданных для списков определений. Однако можно применять к такому списку стили форматирования, чтобы придать ему другой вид и выравнивание. В следующем примере для приведенного выше списка задают дополнительные интервалы между элементами, используя настройки margin для тегов <dd>.

<style type="text/css">
  dd {margin-top:10px; margin-bottom:10px}
</style>

<dl>
  <dt>Term 1</dt>
    <dd>Это определение Term 1. Определяемый термин выводится в 
    отдельной строке, за которой следует блок текста  определения. Определение 
    смещается относительно определения вправо и переносится по словам.</dd>
  <dt>Term 2</dt>
    <dd>Это определение Term 2. Определяемый термин выводится в 
    отдельной строке, за которой следует блок текста  определения. Определение 
    смещается относительно определения вправо и переносится по словам.</dd>
</dl>

Term 1

      Это определение Term 1. Определяемый термин выводится в отдельной строке, 
      за которой следует блок текста  определения. Определение смещается 
      относительно определения вправо и переносится по словам.  

Term 2

      Это определение Term 2. Определяемый термин выводится в отдельной строке, 
      за которой следует блок текста  определения. Определение смещается 
      относительно определения вправо и переносится по словам.

Контекстные селекторы

Списочные структуры предоставляют хорошую возможность обсудить дополнительный метод - дополнение к селекторам ID - для применения выборочного оформления к элементам XHTML.

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

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

<style type="text/css">
  ul {color:red}
  ol {color:blue}
</style>

<ul>
  <li>Красный 1</li>
  <li>Красный 2</li>
  <li>Красный 3</li>
</ul>

<ol>
  <li>Синий 1</li>
  <li>Синий 2</li>
  <li>Синий 3</li>
</ol>

Список <ul> выводится красным цветом, а список <ol> - синим. Однако альтернативный способ состоит в использовании различных тегов <li> в двух списках. Тегу <li>, который выводится внутри тега <ul>, должен быть задан цвет, отличный от цвета тега <li>, который выводится в списке <ol>. Необходимо уметь различать теги <li>, появляющиеся в двух разных списках. Это различие реализуется с помощью таблицы стилей следующего вида.

<style type="text/css">
  ul li {color:red}
  ol li {color:blue}
</style>

Пары селекторов ul li и ol li описывают комбинацию тегов, которая должна возникнуть, чтобы был применен ассоциированный стиль. Эти контекстные селекторы - два или больше простых селекторов, разделенных пробелами - создают отношения тегов, которое должно возникнуть, прежде чем применяется стиль. Предыдущий код задает цвет как красный, когда тег <li> следует за тегом <ul> ; и он же задает синий цвет, когда тег <li> следует за тегом <ol>. То есть, тег <li> получает некоторый стиль в зависимости от своего контекста - от того, будет ли он ассоциироваться с тегом <ul> или с тегом <ol>.

Контекстные селекторы могут включать также селекторы ID для дополнительной дифференциации стилей. Следующий код использует значения id для различения двух неупорядоченных списков с целью применения различных стилей маркировки. В то же самое время двум множествам элементов списков присваиваются различные цвета, в зависимости от неупорядоченного списка, в котором они появляются.

<style type="text/css">
  ul#ListA    {list-style-type:disc}
  ul#ListB    {list-style-type:circle}
  ul#ListA li {color:red}
  ul#ListB li {color:blue}
</style>

<ul id="ListA">
  <li>Позиция 1</li>
  <li>Позиция 2</li>
  <li>Позиция 3</li>
</ul>

<ul id="ListB">
  <li>Позиция 1</li>
  <li>Позиция 2</li>
  <li>Позиция 3</li>
</ul>

Два списка различаются в таблице стилей значениями id, присвоенными их тегам <ul>. Первые две настройки стиля применяют различные стили маркеров для указанных селекторов ul. Две последние настройки стиля задают различный цвет для селектора li, в зависимости от того, в каком списке ul он содержится. Стиль цвета li зависит от контекста ul ID. Вывод в браузере этого кода показан на рисунке 6.5.

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

Границы и отступы

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

Стили границ

Стили границ включают свойства, назначенные типу границы, ее толщине и ее цвету. Эти свойства перечислены в следующей таблице.

border-style
border-top-style
border-right-style
border-bottom-style
border-left-style

dashed
dotted
double
groove
inset
none
outset
ridge
solid

border-width
border-top-width
border-right-width
border-bottom-width
border-left-width

thin
medium
thick
npx

border-color
border-top-color
border-right-color
border-bottom-color
border-left-color

#000000 - #FFFFFF
color name
rgb(r,g,b)

Border

border:style size color

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

border-style		- применяется ко всем четырем сторонам; 
border-top-style	- применяется только к верхнему краю; 
border-right-style	- применяется только к правому краю; 
border-bottom-style	- применяется только к нижнему краю; 
border-left-style	- применяется только к левому краю.

Когда спецификация границы применяется ко всем четырем сторонам элемента, то сокращенное свойство border объединяет значения стиля ( style ), толщины ( width ) и цвета ( color ), заданные в этом порядке и разделенные пробелами, в одном объявлении свойства. То есть вместо кодирования трех отдельных спецификаций

border-width:1px
border-style:solid
border-color:black

можно объединить эти настройки в одном свойстве границы:

border:solid 1 black

Не обязательно задавать все три эти значения, но присутствующие должны быть записаны в правильном порядке: border:solid 1px (неопределенный цвет).

На выбор существует восемь стилей границы ( solid dashed dotted double groove inset outset ridge ). Эти стили показаны на рисунке 6.6, с толщиной, равной 3 пикселям. Более тонкая граница не выводит некоторые из этих стилей.

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

Чтобы проиллюстрировать варианты оформления, следующий раздел <div> выводится с границей, которая имеет различные стили для всех четырех сторон. Раздел содержит параграф, который имеет свои собственные настройки границы и включает строку текста со своей собственной границей.

<style type="text/css">
div#A  {border-width:7px; 
        border-color:red; 
        border-top-style:solid; 
        border-right-style:dashed; 
        border-bottom-style:ridge; 
        border-left-style:double}

p#B    {border:dashed 3px blue}

span#C {border:solid 4px green}
</style>

<div id="A">
  <p id="B">This is a <span id="C">text string with borders</span> 
  inside a paragraph with borders inside a division with four different
  borders.</p>
</div>

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

Стили отступов

В приведенном выше примере оформления границы сжимаются вокруг текста, который они охватывают. В большинстве случаев для визуальной привлекательности и удобочитаемости желательно оставлять свободное пространство между текстом и его границей. Это реализуется введением внутри текстового контейнера отступов ( padding ). Отступ является величиной свободного пространства между границами контейнера и вложенным в него контентом.

Отступы добавляются в контейнеры с помощью свойств стиля оформления, показанных в таблице 6.4. Свойство padding задает свободное пространство вдоль всех четырех сторон контейнера; свойства padding-top, padding-right, padding-bottom и padding-left выборочно добавляют отступы к каждой из четырех сторон.

padding
padding-top
padding-right
padding-bottom
padding-left

npx

Следующий код повторяет предыдущий раздел <div> с отступами, добавленными в теги <div>, <p> и <span>, чтобы создать дополнительное пространство между текстом и окружающими его границами. Можно создавать различные эффекты, определяя различную величину отступов для каждой из четырех сторон.

<style type="text/css">
div#A  {padding:7px;
        border-width:7px; 
        border-color:red; 
        border-top-style:solid; 
        border-right-style:dashed; 
        border-bottom-style:ridge; 
        border-left-style:double}

p#B    {padding:7px; border:dashed 3px blue}

span#C {padding:2px; border:solid 4px green}
</style>

<div id="A">
  <p id="B">This is a <span id="C">text string with borders</span> 
  inside a paragraph with borders inside a division with four different
  borders.</p>
</div>

Границы изображений

Можно создавать границы вокруг изображений, задавая стиль границы. Следующий код создает границу ridge, толщиной 7 пикселей, как показано слева на рисунке 6.9.

<img src="Stonehenge.jpg" style="border:ridge 7"/>

Невозможно разделить границу и изображение, вводя отступ вокруг самого изображения. Однако, можно поместить изображение внутрь другого контейнера, например, тега <span>, и добавить отступы в этот контейнер. Этот прием закодирован ниже и показан справа на рисунке 6.9.

<span style="border:ridge 7; padding:10px"><img src="Stonehenge.jpg"/></span>

Поля, границы и отступы

Иллюстрация на рисунке 6.10 дает визуальное представление о таких компонентах элементов страницы, как поля ( margin ), границы ( border ) и отступы ( padding ). Для каждой из частей этих компонентов можно задавать одинаковый размер для всех четырех сторон контейнера, или отдельные стороны могут иметь различные значения. Вместе с размером контейнера и стилями размещения, рассматриваемыми далее, можно организовать и оформить контейнер с целью добиться более точного размещения и улучшения удобочитаемости содержимого страницы.

Задание размеров элементов

Если не задано другое оформление, то текстовые контейнеры, такие, как теги <div>, <p> и <span>, имеют размер в соответствии со своим содержимым. Часто необходимо иметь дополнительный контроль над размерами контейнерных тегов, что можно получить с помощью настроек стиля, показанных в таблице 6.5. Свойства height и width были рассмотрены ранее. Здесь они объединяются со свойством overflow для управления размером и визуальным представлением текстовых контейнеров.

Height

npx
n%
auto

Width

npx
n%
auto

Overflow

visible
hidden
scroll
auto

Ширина и высота контейнера

В предыдущих параграфах настройки ширины и высоты применялись для изображений и горизонтальных линеек для задания определенного размера. То же самое можно делать практически с любым тегом XHTML, включая текстовые контейнеры. Следующий параграф, например, имеет размер в 50% от ширины окна браузера, а не занимает, как по умолчанию, всю ширину страницы. Граница добавлена для того, чтобы визуально подчеркнуть результат, а отступы используются для размещения границы на удалении от текста. Вывод параграфа в браузере показан на рисунке 6.11.

<style type="text/css">
  p#Sized {width:50%; border:solid 1px; padding:10px}
</style>

<p id="Sized">Это параграф с шириной, равной 50% ширины 
окна браузера. Кроме того, текст переносится по словам в этих границах. Так 
как ширина задана в процентах, то параграф изменяет размер, чтобы 
оставаться в пределах 50% ширины страницы при изменении размера окна 
браузера.</p>

Ширина параграфа всегда остается равной 50%. Так как стиль height не задан, то высота параграфа увеличивается, чтобы охватить весь содержащийся в нем текст.

Переполнение контейнера

По умолчанию высота контейнера всегда увеличивается, чтобы показать содержащийся в нем текст, независимо от заданной величины height. Чтобы задать точную высоту контейнера, необходимо также указать, как обрабатывать "переполнение" текста, когда контейнер имеет недостаточный размер для вывода всего своего содержимого. То есть, требуется задать свойство overflow, чтобы контролировать потенциально "скрытый" текст, находящийся за границами контейнера.

Существует четыре возможных значения для свойства overflow, результат действия которых показан в следующих примерах оформления параграфа, с одним и тем же контентом (Перевод: "Контент страницы может появляться внутри контейнеров, а также перекрывать основной документ. Чтобы контент оставался внутри таких тегов, как <div>, <p>, и <span>, для этих элементов можно в случае необходимости задать различные значения высоты и ширины.")

Задание overflow:visible выводит весь контент, независимо от указанной высоты контейнера (значение по умолчанию); overflow:hidden использует указанную высоту, даже если часть текста остается скрытой; overflow:scroll выводит горизонтальную и вертикальную полосы прокрутки для просмотра скрытого текста; overflow:auto выводит вертикальную полосу прокрутки, если требуется для просмотра скрытого текста.

Стиль overflow:auto является обычно наиболее полезным и визуально привлекательным для вывода текста, потенциально переполняющего контейнер с указанными шириной и высотой. Код приведенного выше тега <p> с overflow:auto показан ниже.

<style type="text/css">
  p#OFLOW {overflow:auto; width:125px; height:100px; padding:5px;
           border:solid 1px}
</style>

<p id="OFLOW">Page content can appear within elements as well as flow 
throughout the main document. With tags such as <div>, <p>,
and <span> to contain content, these elements can, if so chosen, be 
sized to various heights and widths.</p>

Этот конкретный параграф имеет id="OFLOW", чтобы отличить его от трех других параграфов, которые имеют свои собственные значения id. Параграф имеет заданную ширину и высоту, что не позволяет вывести параграф полностью. Поэтому также задается стиль overflow:auto, чтобы для доступа к скрытому тексту появилась вертикальная полоса прокрутки.

Плавающие контейнеры

На рисунке 6.13 показан раздел врезки с шириной, равной 250 пикселей, и высотой 200 пикселей. Он имеет границу ridge толщиной 5 пикселей, отступ в 10 пикселей и цвет фона gray (серый). Раздел смещается на странице вправо. Его левое поле задано равным 20 пикселям, чтобы отделить его от текста на странице.

Так как весь текст невозможно вывести при заданной высоте и ширине, то разделу задается стиль overflow:auto для создания вертикальной полосы прокрутки.

Во многих случаях размер текстового контейнера задают меньшим, чем используемая по умолчанию ширина и высота для создания "врезанных" комментариев, то есть для вывода помещенного в поле текста, который появляется сбоку от основного текстового содержимого страницы. Раздел врезки показан на рисунке 6.13. Он смещается вправо, а основной текст обтекает его с переносом строк по словам.

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

<style type="text/css">
  .FLOAT {float:right; width:250px; height:200px; overflow:auto; color:white; 
          background-color:gray; margin-left:20px; padding:10px; border:
          ridge 5}
  h3     {text-align:center}
</style>

<div class="FLOAT">

<h3>Плавающие контейнеры</h3>

<p>Это раздел с шириной, заданной равной 250 пикселей, и высотой, 
равной 200 пикселей. Он имеет границу ridge толщиной 5 пикселей, отступ в 10 
пикселей и фоновый цвет gray. Раздел смещается на странице вправо. Его 
левое поле задано равным 20 пикселей для отделения от текста 
страницы.</p>

<p>Так как весь текст не помещается в контейнере указанной ширины и 
высоты, то разделу задается стиль overflow:auto для создания вертикальной 
полосы прокрутки.</p>

</div>

... обтекающий текст...

Отметим, что только около половины контента видно в разделе с заданной шириной и высотой. Поэтому свойство overflow:auto добавляется в таблицу стилей раздела, чтобы вывести вертикальную полосу прокрутки для доступа ко всему тексту. Граница добавляется для визуального выделения.

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

Позиционирование элементов

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

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

position

relative
absolute

left

npx
n%

top

npx
n%

z-index

n

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

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

Элементы на странице Web обычно появляются в позиции, которая задается относительно окружающих элементов на странице. То есть, они физически выводятся в том порядке, в котором кодируются. Именно так задается следующая строка заголовка <h1>. Она появляется по порядку вслед за предыдущим параграфом, так как ее код следует за ним в документе XHTML.

<p>Предыдущий параграф ...</p>

<h1>Заголовок </h1>

<p>Следующий параграф ...</p>

Обычно текст в строке не может перемещаться из своей используемой по умолчанию позиции на странице. Форматирование в строке, задаваемое тегом и его окружающими тегами, определяет, где будет расположено содержимое. Тег <h1> всегда выводит два интервала после предыдущего параграфа и два интервала над следующим параграфом. Однако, задавая для тега свойство position, можно изменить его положение на странице с точностью до пикселя.

Чтобы изменить позицию тега <h1> в приведенном выше примере, можно присвоить ему стиль position:relative. Затем, применяя свойство left и/или top, его можно переместить на определенное число пикселей из его исходной позиции. Следующий код изменяет позицию этого заголовка, определяя для тега свойство позиционирования.

<style type="text/css">
  h1 {position:relative; left:50px; top:-10px}
</style>

<p>Предыдущий параграф ...</p>

<h1>Заголовок </h1>

<p>Следующий параграф ...</p>

С помощью position:relative позицию тега можно изменить относительно его исходного положения. Свойство left задает расстояние в пикселях, на которое смещается элемент из своего обычного горизонтального положения; свойство top задает расстояние в пикселях, на которое смещается элемент из своего обычного вертикального положения. В приведенном выше примере заголовок смещается на 50 пикселей вправо из своего исходного положения и на 10 пикселей вверх.

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

В следующем примере каждое слово предложения заключено в отдельный контейнер <span>, чтобы оформить их по отдельности. Каждое слово затем с помощью свойства top получает смещение по вертикали относительно своей нормальной позиции в строке. Все слова содержатся в теге <div>, чтобы применить задание размера шрифта к группе слов.

<div style="font-size:24pt">
  <span style="position:relative; top:-15px">Words</span>
  <span style="position:relative; top:+10px">in</span>
  <span style="position:relative; top:-5px">a</span>
  <span style="position:relative; top:+5px">sentence.</span>
</div>

Каждый тег <span> имеет относительную позицию, так что можно применить его свойство top. Нет необходимости задавать позицию слов по горизонтали с помощью свойства left, так как теги <span>, по умолчанию, размещаются в строке рядом друг с другом. Изменяется положение слов только по вертикали относительно обычного вертикального выравнивания.

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

Разбиение элементов по слоям

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

Можно явно изменить используемое по умолчанию разбиение элементов страницы на слои, кодируя их свойство стиля z-index. Значение z-index является относительной величиной. Элементы с большими числовыми значениями появятся поверх элементов с меньшими значениями. Так, элемент с z-index:2 появится поверх элемента с z-index:1, элемент с z-index:20 появится поверх элемента с z-index:10. Абсолютное значение z-index не имеет значения. Важны только относительные величины z-index, присвоенные множеству разбитых по слоям элементов.

Цветные квадраты, показанные на рисунке 6.17, демонстрируют различные позиции и слои. В этом случае распределение по слоям задается исключительно порядком по умолчанию, в котором квадраты были закодированы: закодированные последними появляются поверх кодированных ранее.

<style type="text/css">
  .RED    {position:relative; width:100px; height:100px; left:0px; top:0px;
           background-color:red; border:solid 1px white; color:white; 
           text-align:right}
  .GREEN  {position:relative; width:100px; height:100px; left:-50px; top:25px;
           background-color:green; border:solid 1px white; color:white;
           text-align:right}
  .BLUE   {position:relative; width:100px; height:100px; left:-100px; top:50px;
           background-color:blue; border:solid 1px white; color:white; 
           text-align:right}
</style>

<div>
<span class="RED">Red</span>
<span class="GREEN">Green</span>
<span class="BLUE">Blue</span>
</div>

Красный квадрат был закодирован первым, поэтому он появляется под зеленым, который закодирован вторым, - зеленый появляется под синим квадратом, который закодирован последним. Отметим, что эти квадраты создаются с помощью тегов <span>, для которых заданы ширина, высота, цвет, цвет фона, и границы. Для создания этих слоев не требуется задание значения z-index. Однако, квадратам задаются параметры стиля left и top для смещения их по горизонтали и вертикали от их естественного положения бок-о-бок, чтобы они стали перекрывающимися и их распределение по слоям стало визуально очевидно.

Для приведенных выше квадратов можно изменить порядок слоев, просто присваивая им значения z-index. В следующем коде красному квадрату присвоено наибольшее значение (что делает его верхним), а синему квадрату - наименьшее (что делает его нижним). Порядок кодирования тегов <span> остается без изменения. Вывод этих квадратов показан на рисунке 6.18.

<style type="text/css">
  .RED    {position:relative; width:100px; height:100px; left:0px; top:0px;
           background-color:red; border:solid 1px white; color:white; 
           text-align:right; z-index:3}
  .GREEN  {position:relative; width:100px; height:100px; left:-50px; top:25px;
           background-color:green; border:solid 1px white; color:white;
           text-align:right; z-index:2}
  .BLUE   {position:relative; width:100px; height:100px; left:-100px; top:50px;
           background-color:blue; border:solid 1px white; color:white; 
           text-align:right; z-index:1}
</style>

Вспомните, что абсолютные значения z-index не имеют значения, пока различия по величине находятся в правильном соотношении. Значения 3, 2 и 1, использованные выше, можно было бы закодировать как 30, 20 и 10 ; или 300, 200 и 100 ; или 300, 200 и 1. Наибольшее значение будет наверху, а наименьшее значение - внизу, независимо от их абсолютной величины.

Изменение положения свободного пространства

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

<p>Предыдущий параграф....</p>

<p style="position:relative; top:25px; font-size:24pt">
  Перемещенный параграф.
</p>

<p>Следующий параграф ....</p>

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

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

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

В то время как position:relative размещает элемент относительно окружающих элементов, position:absolute помещает элемент относительно его контейнерного элемента. По умолчанию контейнерным элементом является сама страница Web, тег <body>. Поэтому элементы позиционируются абсолютно относительно верхнего левого угла страницы Web и, что важно, исключаются из обычного потока элементов страницы.

Абсолютное позиционирование показано в примере на рисунке 6.20, где слово "DRAFT" помещено в тег <div>, положение которого задается абсолютно. При таком позиционировании тег располагается относительно верхнего левого угла страницы. Он смещается на 50px от верхнего края и на 280px от левого края страницы, что помещает его ниже сопровождающего параграфа.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Позиционирование</title>
</head>
<body>

<div style="position:absolute; top:50px; left:280px; z-index:-1; 
font-family:impact; font-size:68pt; color:#D6D6D6">DRAFT</div>

<p>Размещенное под этим параграфом слово "DRAFT" 
определено показанным выше тегом <div>. Этот тег появляется в коде 
XHTML сразу перед этим параграфом. Он позиционирован абсолютно; поэтому 
он исключен из нормального потока элементов страницы. В связи с этим 
исключением тега из потока элементов страницы параграф смещается вверх, 
чтобы занять освободившееся пространство страницы, поэтому 
накладывается на слово. Таким образом, слово "DRAFT" занимает 
на странице абсолютное положение, независимо от того, что еще его окружает. 
Для него задано также значение z-index, равное -1, помещающее его на 
странице под слоем текста, чтобы слово не перекрывало текст. </p>

</body>
</html>

Слой текста страницы всегда имеет значение z-index, равное 0 (нулю). Поэтому тегу <div> задано значение z-index, равное -1, для размещения слова под слоем текста, чтобы оно не мешало восприятию.

Когда элемент страницы позиционируется абсолютно и для него заданы значения свойств left и top, то он исключается из нормального потока элементов страницы. В приведенном выше примере тег <div> удаляется из его нормального физического положения перед параграфом. Параграф затем перемещается вверх, чтобы занять освободившуюся позицию тега <div>. Это означает, что в действительности не имеет значения, где на странице кодируется элемент с абсолютным позиционированием. Независимо от его физического кодирования он все равно позиционируется относительно верхнего левого угла страницы. Единственный случай, где позиция кодирования имеет значение, - это когда элемент позиционируется только своим свойством left (но не top ). Если он не перемещается по вертикали, то он остается в своей закодированной позиции.

Определение позиционного расположения элементов страницы

Так как бывает трудно определить левую и верхнюю позицию страницы относительно длинной, прокручивающейся страницы Web, то элементы, которые позиционируются относительно друг друга, часто размещаются внутри другого контейнерного элемента. Этот контейнерный элемент позиционируется в соответствии с принципом сохранения его позиции в потоке элементов страницы; содержащиеся в нем элементы позиционируются абсолютно внутри контейнера. В этом случае значения абсолютной позиции задаются относительно контейнера, а не страницы. Контейнер становится легкоуправляемой координатной системой, в которой точно позиционируются вложенные элементы.

Хорошим общим решением для размещения элементов страницы относительно друг друга является следующее:

1. определите и задайте размер тега <div>, который будет охватывать размещенные элементы. Используйте для раздела <div> относительное позиционирование, размещая его тем самым в потоке контента страницы. Когда содержимое на странице добавляется или удаляется, то этот раздел по-прежнему сохраняет свое относительное расположение среди других элементов страницы. Он перемещается по странице вверх или вниз, когда изменяется содержимое страницы;

2. поместите элементы, которые будут находиться внутри раздела, используя абсолютное позиционирование. В этом случае значения left и top для размещаемых элементов всегда измеряются от верхнего левого угла раздела. Эта "локальная" система координат остается неизменной, даже если раздел изменяет положение в потоке элементов страницы.

Раздел, показанный на рисунке 6.21, использует относительное позиционирование, чтобы сохранять свое положение среди других элементов XHTML на странице. Он выводится с точечной границей ( dotted ), чтобы сделать его видимым. Вложенные квадраты позиционируются абсолютно, со значениями top и left, измеряемыми от верхнего левого угла этого раздела.

<style type="text/css">
  .DIV    {position:relative; width:300px; height:160px; border:dotted 1}

  .RED    {position:absolute; width:100px; height:100px; left:0px; top:0px;
           background-color:red; border:solid 1px white; color:white; 
           z-index:1; text-align:right}
  .GREEN  {position:absolute; width:100px; height:100px; left:50px; top:25px;
           background-color:green; border:solid 1px white; color:white; 
           z-index:2; text-align:right}
  .BLUE   {position:absolute; width:100px; height:100px; left:100px; top:50px;
           background-color:blue; border:solid 1px white; color:white; 
           z-index:3; text-align:right}
</style>

<div class="DIV">

  <span class="RED">Red </span>
  <span class="GREEN">Green </span>
  <span class="BLUE">Blue </span>

</div>

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

Следующий код применяет такую же стратегию для создания эффект падающей тени. Вывод браузер показан на рисунке 6.22.

<style type="text/css">
  div#CONTAIN {position:relative; height:45px; width:180px; border:dotted 1px}

  div#BLACK   {position:absolute; left:0px; top:0px; z-index:2; font-family:
               impact; font-size:24pt; color:black}
  div#SILVER  {position:absolute; left:+5px; top:+5px; z-index:1; font-family:
               impact; font-size:24pt; color:silver}
</style>

<div id="CONTAIN">
  <div id="SILVER">Drop Shadow</div>
  <div id="BLACK">Drop Shadow</div>
</div>

Охватывающий раздел (позиционированный относительно в потоке содержимого страницы) содержит два слоя элементов для размещения. Контейнерный раздел задан строчной границей ( dashed ), чтобы показать его размер и положение. Позиции слов и тени можно легко определить по их расстоянию от верхнего левого угла этого раздела ( left:0px; top:0px ); тень смещается от слов на 5 пикселей ( left:+5px; top:+5px ). Для слов значение z-index задается большим, чем для тени, чтобы вывести их сверху.

При размещении позиционируемого контента внутри раздела необходимо обычно задать ширину ( width ) и высоту ( height ) раздела. Позиционированный раздел имеет по умолчанию ширину, которая распространяется на всю ширину его контейнера - ширину страницы Web, если его контейнерным элементом является тег <body>. При желании можно задать ширину раздела, достаточную для охвата только вложенных элементов, как это делается для приведенного выше примера с падающей тенью. Позиционированный раздел имеет также по умолчанию высоту в 0 пикселей, независимо от его содержимого. Поэтому высоту необходимо задавать достаточно большой, чтобы зарезервировать вертикальное пространство страницы для вывода вложенного контента.

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

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

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

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Newsletter</title>

<style type="text/css">
div#OUTER {position:relative; width:500px; height:420px; border:dotted 1}
div#HEAD  {position:absolute; left:0px;   top:0px;   width:500px; height:40px;
           border:dotted 1; text-align:center; font-size:24pt}
div#COL1  {position:absolute; left:0px;   top:50px;  width:240px; height:260px;
           border:dotted 1}
div#COL2  {position:absolute; left:260px; top:50px;  width:240px; height:260px;
           border:dotted 1}
div#FOOT  {position:absolute; left:0px;   top:320px; width:500px; height:100px;
           border:dotted 1}
</style>

</head>
<body>

<div id="OUTER">

  <div id="HEAD">
    Newsletter Layout
  </div>
  
  <div id="COL1">
    First Column
  </div>
  
  <div id="COL2">
    Second Column
  </div>
  
  <div id="FOOT">
    Footer
  </div>

</div>

</body>
</html>

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