Самоучитель по креативному веб-дизайну. Книга 1, стр.163



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 пикселей от верхнего края

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

Оставить комментарий

Вы должны авторизоваться для отправки комментария.

Полезные ссылки
Случайные записи
  • 06.08.2011">Сайты знакомств помогают соединять сердца
  • 11.03.2011">Руководство по actionscript. часть 3, стр. 144
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 064
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.43
  • 14.08.2011">Купи билет через интернет
  • 14.07.2011">Бюджетные ноутбуки Acer
  • 28.02.2011">Руководство по actionscript. часть 6, стр. 018
  • 07.03.2011">Руководство по actionscript. часть 4, стр. 109
  • 15.03.2011">Руководство по actionscript. часть 3, стр. 061
  • 01.03.2011">Руководство по actionscript. часть 5, стр. 121
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.91
  • 19.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.25
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.57
  • 15.11.2011">Обзор ноутбука Lenovo
  • 24.03.2013">Чартерные рейсы на Мальдивы
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...