Создание перекрывающегося текста

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

Рис. 4.8. Web-страница с перекрывающимся текстом различных типов шрифтов и размеров

Операторы позиционирования каскадных списков стилей позволяют создавать эффекты наложения элементов Web-страницы (например, текста, изображений и других объектов). Гиперссылка "Что нового появилось в каскадных списках стилей?" находится "за" четырьмя остальными гиперссылками, поскольку правила каскадного списка стилей указали Web-браузеру поместить дополнительный текст на место, в котором уже находится другой текст. Если вы для каждой гиперссылки меняется тип шрифта, его размер и цвет, посетитель будет знать, где щелкнуть указателем мыши для перехода по каждой ссылке. Кроме того, определение границ гиперссылок можно облегчить за счет изменения вида указателя мыши и/или стиля гиперссылки при подводе к ней указателя. (В последующих советах этой главы будет показано, каким образом можно изменять внешний вид указателя мыши и гиперссылки при ее выделении.)

Свойство position каскадных списков стилей указывает Web-браузеру место расположения элемента на Web-странице. Значение absolute позволяет располагать объекты по отношению к левому верхнему углу страницы, в то время как значение relative дает возможность указывать положение относительно места, в котором данный объект находился бы без задания свойства position. Например, если в HTML-коде Web-странице содержится два дескриптора <img>, один после другого, Web-браузер выведет на экран второе изображение справа от первого. С помощью позиционирования relative между двумя изображениями можно вставить поле:

<img srс="image1.jpg">

<img style="position:relative:left:20px" src="image2.jpg">

Правило каскадного списка стилей во втором дескрипторе <img> указывает браузеру сдвинуть элемент (image2.jpg) на 20 пикселей вправо от его нормального положения.

ПРАКТИКУМ

Для наложения элементов на Web-странице используется абсолютное (absolute) позиционирование. Один элемент можно поместить поверх другого и за счет указания отрицательного относительного (relative) положения. Тем не менее, применение абсолютного позиционирования элементов на странице позволяет достичь того же результата более простыми средствами. Например, следующие правила списка стилей при применении их к элементам Web-страницы указыва ют Web-браузеру поместить объект на расстоянии 50 пикселей от верхнего края страницы и на расстоянии 10 пикселей от левого края страницы:

.linkl {position:absolute;top:50px;left:10px}

В приведенном правиле можно использовать любые единицы измерения расстояний, допустимые для списков стилей: пункты (pt), дюймы (in), сантиметры (cm) и т.д. Например, для задания положения текстового элемента с использованием единицы измерения расстояния, соответствующем размеру шрифта, применяется единица em:

.link2 {color:#400040;

font-size:50px; font-style:italix; font-family:Georgia, serif;

position:absolute; top:2.5em; left:2em}

В приведенном примере указание абсолютного положения top:2.5em и left:2em заставляет Web-браузер поместить элемент на расстоянии 125 пикселей от верхнего края страницы и 100 пикселей от левой границы страницы (поскольку в этом случае значение единицы em составляет 50 пикселей, как указано в свойстве font-size).

После написания правил позиционирования объектов необходимо указать Web-браузеру применять эти правила для определенных элементов на Web-странице. Для позиционирования двух гиперссылок с помощью классов каскадных списков стилей, определенных в предыдущих примерах (link1 и link2), вставьте на Web-страницу следующий код:

<р><а class="link1"

href="Figure04-01b.htm">Чтo нового в области<br>

каскадных списков стилей?</а></р>

<р><а class="link2"

href="FigureO4-01c.htm">Изучение CSS...

Атрибут class указывает Web-браузеру, какие правила каскадного списка стилей применять к элементу (в приведенном примере к гиперссылке).

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