cite {font-size:1.5em}

р {font-size:12pt}

Если применить эти правила для кода приведенного выше примера, Web-бра — узер выведет на экран текст абзаца (родительский элемент) размером 12 пунктов,

а текст цитаты выстой 18 пунктов, т. е. в 1.5 раза больше, чем размер родительс — кого элемента.

На рис. 4.7 показан пример использования следующего списка стилей для

форматирования четырех текстовых элементов (абзац, полужирный текст, эле — мент списка и цитата):



ycTaHOBKa размера текста с использованием пунктов,

Em и пикселей



р {font-family:helvetica,»times new roman»,courier;

font-size:12pt}

b {font-size:18pt}

cite {font-size:1.5em}

li {font-size:30px}





192 Глава 4. Каскадные списки стилей







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

С помощью каскадных списков стилей на Web-страницу можно внести некую

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





Глава 4. Каскадные списки стилей 19 3





Операторы позиционирования каскадных списков стилей позволяют создавать эффекты наложения элементов Web-страницы (например, текста, изображений и

ДРУГИХ Объектов). ГиперССЫЛКа «Что нового появилось в каскадных списках

стилей?» находится «за» четырьмя остальными гиперссылками, поскольку прави —

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

указателя мыши и гиперссылки при ее выделении.)

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





style=»position:relative: left:20px» src=»image2.jpg»>

Правило каскадного списка стилей во втором дескрипторе указывает

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



«П А ISYIJI/Wft Я



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