HTML: Популярный самоучитель - Александр Чиртик
Шрифт:
Интервал:
Закладка:
11.7. Свободное позиционирование
При использовании таблиц стилей появляется еще одна возможность, о которой веб‑дизайнеры до CSS не могли даже мечтать. Установка определенных свойств в таблицах стилей позволяет задавать произвольное положение и размер практически любого элемента страницы. На рис. 11.8 наглядно показано, что представляет собой свободное позиционирование таких элементов, как изображения и текст абзаца.
Рис. 11.8. Свободное позиционирование элементов страницы
В примере 11.4 приведен текст HTML‑документа, в котором реализуется показанное на рисунке свободное позиционирование элементов.
Пример 11.4. Использование свободного позиционирования<TITLE>Свободное позиционирование</TITLE>
<BODY>
<IMG src = "right.gif" border = "1">
<IMG src = "right.gif" style = "position: absolute;
left: 30; top: 30" border = "1">
<IMG src = "right.gif" style = "position: absolute;
left: 60; top: 60" border = "1">
<IMG src = "right.gif" style = "position: absolute;
left: 90; top: 90" border = "1">
<IMG src = "right.gif" style = "position: absolute;
left: 120; top: 120" border = "1">
<P style = "position: absolute; left: 45; top: 45;
font-size: x-large">А это свободно позиционированный текст абзаца
</BODY>
Возможность свободного позиционирования предоставляет не только много свободы при оформлении статичных HTML‑документов, но и позволяет создавать разнообразные довольно интересные визуальные эффекты с использованием сценариев. Примеры таких эффектов приведены в гл. 13. Сейчас же мы более подробно рассмотрим свойства CSS, дающие возможность свободно позиционировать элементы страницы. Начнем с использованного в примере 11.4 свойства position, которое позволяет указать браузеру, как выполнить позиционирование элемента страницы.
Свойство position принимает три значения:
• static – обычное позиционирование в соответствии с порядком следования элементов в документе (значение по умолчанию);
• absolute – задает свободное позиционирование, координаты элемента задаются относительно родительского элемента;
• relative – задает свободное позиционирование, координаты элемента задают смещение от того места, где был бы выведен элемент, будь значение свойства position равным static.
Без задания координат элемента использование свойств позиционирования становится бессмысленным, потому кратко остановимся на свойствах, позволяющих задать положение и размер свободно позиционированных элементов. Итак, для задания положения элемента доступны следующие свойства:
• left и top – горизонтальная и вертикальная координаты левого верхнего угла элемента;
• right и bottom – горизонтальная и вертикальная координаты правого нижнего угла элемента.
Значения координат могут задаваться в любых единицах измерения длины CSS, а также в процентах от ширины или высоты родительского элемента. Когда размер элемента фиксирован, то можно ограничиться только заданием координат левого верхнего угла элемента. Если же нужно точно указать, какую область должен занимать элемент, то вместо задания координат правого нижнего угла можно использовать также свойства CSS width (ширина элемента) и height (высота элемента).
Еще одно свойство, которое используется для свободно позиционированных элементов, – z-index. С его помощью указывается порядок перекрытия элементов. Когда один элемент перекрывает другой, это выглядит как расположение одного элемента поверх другого. Значения свойства z-index:
• auto – порядок перекрытия элементов определяется порядком их следования в документе (значение по умолчанию);
• положительное или отрицательное целое число – элементы с большими значениями z-index перекрывают элементы с меньшим значением этого свойства.
На рис. 11.8 хорошо видно, как выглядит перекрытие элементов страницы. Поскольку для элементов в примере 11.4 явно не задается свойство z-index, то элементы перекрываются в порядке следования в документе. И на самом верху среди всех свободно позиционированных элементов показано содержимое элемента P, так как он следует в тексте документа последним.
Кроме того, при использовании свободно позиционированных элементов в сочетании со сценариями часто используется свойство CSS, позволяющее скрывать и показывать элементы, – visibility, принимающее значения:
• visible – делает элемент страницы видимым;
• hidden – скрывает элемент страницы;
• inherit – наследует значение свойства от родительского элемента (значение по умолчанию).
11.8. Использование элементов DIV и SPAN
Использование HTML‑элементов SPAN и DIV позволяет в некоторых случаях значительно облегчить применение стилей к нужным фрагментам документа. С помощью HTML‑элемента SPAN можно, например, изменить цвет шрифта в отрывке текста только с помощью таблиц стилей (без использования HTML‑элемента FONT с атрибутом color):
...
<P>Слово <SPAN style = "color: green">зеленый</SPAN> отображается соответствующим цветом
...
Элемент SPAN применяется для создания встроенных элементов, как в предыдущем примере. Чаще всего этот элемент применяется потому, что надо где‑то указать значение style, class или id для участка текста.
В отличие от SPAN, HTML‑элемент DIV позволяет создавать блочные элементы. При этом можно объединять несколько элементов (в том числе и блочных) в один блочный элемент. Это удобно во многих случаях, например, когда нужно обвести рамкой или свободно позиционировать группу элементов, задать общий фон для группы элементов.
Использование HTML‑элементов DIV и SPAN отражено в примере 11.5.
Пример 11.5. Использование элементов DIV и SPAN<HTML>
<HEAD>
<TITLE>Использование элементов DIV и SPAN</TITLE>
<STYLE>
.person {border-style: solid; border-width: 1;
background-color: fuchsia; width: 80%; padding: 3}
.person2 {border-style: solid; border-width: 1;
background-color: fuchsia; width: 80%; padding: 3;
left: 20%; position: relative}
.ptitle {font-weight: bold}
</STYLE>
</HEAD>
<BODY>
<H1>Список сотрудников</H1>
<P>
<DIV class = "person">
<P><SPAN class = "ptitle">Имя: </SPAN>Василий
<BR><SPAN class = "ptitle">Фамилия: </SPAN>Пупкин
<P><SPAN class = "ptitle">Должность: </SPAN>Директор
<BR><SPAN class = "ptitle">Телефон: </SPAN>123-45-01 (секретарь)
</DIV>
<P>
<DIV class = "person2">
<P><SPAN class = "ptitle">Имя: </SPAN>Владимир
<BR><SPAN class = "ptitle">Фамилия: </SPAN>Замахов
<P><SPAN class = "ptitle">Должность: </SPAN>Зам. директора
<BR><SPAN class = "ptitle">Телефон: </SPAN>123-45-02
</DIV>
<P>
<DIV class = "person">
<P><SPAN class = "ptitle">Имя: </SPAN>Мария
<BR><SPAN class = "ptitle">Фамилия: </SPAN>Иванова
<P><SPAN class = "ptitle">Должность: </SPAN>Секретарь
<BR><SPAN class = "ptitle">Телефон: </SPAN>123-45-01
</DIV>
<P>...
</BODY>
</HTML>
Приведенный HTML‑документ выглядит так, как показано на рис. 11.9.
Рис. 11.9. Использование элементов DIV и SPAN
Обратите внимание, что каждый элемент DIV имеет ширину 80 % от ширины окна браузера, а каждый четный элемент смещен на 20 % от ширины окна вправо. Главным в этом примере является то, что содержимое элемента DIV позиционируется как единое целое, а с помощью элемента SPAN удалось отделить текст с названием поля, описывающего данные сотрудника, от данных, соответствующих этому полю. Вообще, такого же эффекта можно добиться применением обычных таблиц, однако пришлось бы приложить гораздо больше усилий.
11.9. Псевдоклассы гиперссылок
Помните, как в самом начале книги мы задавали параметры отображения гиперссылок документа при помощи атрибутов HTML‑элемента BODY? С использованием CSS можно сделать то же самое. Но при этом нужно использовать предопределенные названия стилевых классов элемента A: A:link (непосещенная гиперссылка), A:visited (посещенная ссылка), A:active (активная гиперссылка, проявляется, например, при перемещении по гиперссылкам при помощи табуляции) и A:hover (состояние при наведении указателя мыши на гиперссылку).
Псевдоклассы так называются потому, что они явно не задаются в теле HTML‑документа (не могут быть заданы вообще). Но в частности в примере с гиперссылками сам браузер при показе документа обладает информацией, по каким гиперссылкам переходит пользователь, а по каким нет, где находится указатель мыши и какая часть документа получила фокус ввода. По этим признакам элементы документа можно объединить в виртуальные группы – псевдоклассы, на которые можно ссылаться из таблицы стилей.
Задание параметров каждого вида гиперссылок в остальном полностью аналогично заданию этих параметров для обычного текста. Например:
<STYLE>
A:link {text-decoration: none}
A:hover {font-style: italic}
A:active {color: red}
A:visited {color: green; font-weight: bold}
</STYLE>
В документе, содержащем приведенную таблицу стилей, все непосещенные гиперссылки не будут подчеркнуты. Посещенные будут отображаться полужирным подчеркнутым шрифтом зеленого цвета. Активные (но еще не посещенные) гиперссылки будут иметь красный цвет, а при наведении указателя мыши начертание шрифта всех типов гиперссылок будет становиться курсивным.
11.10. Псевдоклассы текста
