DHTML И CSS by alex

Джейсон Кренфорд Тиге

DHTML И CSS БЫСТРЫЙ СТАРТ

ЧАСТЬ I

VISUAL QUICKSTART GUIDE

dhtml and css FOR THE WORLD WIDE WEB 2ND EDITION

Jason Cranford Teague

БЫСТРЫЙ СТАРТ

Dhtml и css Джейсон Кренфорд Тиге

Москва, 2003

УДК 004.738.5 ББК 32.973.26-018.2 Т39 Тиге Дж. К. Т39 DHTML и CSS: Пер. с англ. – М.: ДМК Пресс, 2003. – 560 с.: ил. (Быстрый старт). ISBN 5-94074-169-X В книге описывается использование динамического HTML (DHTML) и каскадных таблиц стилей (CSS) для построения сложных интерактивных Web-узлов. Данные технологии не требуют наличия специфического программного обеспечения на компьютерах посетителей сайта и работоспособны в большинстве распространенных браузеров. С помощью этой книги вы научитесь создавать динамически обновляющиеся Web-страницы, включающие различные текстовые и графические эффекты, манипулировать HTML-таблицами, размещать на своем сайте графику и анимацию. Рассматриваются способы применения каскадных таблиц стилей, проблемы реализации поддержки CSS в различных браузерах, использование JavaScript и объектной модели документа (DOM) для манипулирования содержимым страниц без их перезагрузки с сервера. Изложение материала сопровождается множеством примеров, даются советы по планированию структуры сайта и его дизайну. Кроме того, анализируются наиболее распространенные ошибки, допускаемые при программировании. Издание предназначено для разработчиков Web-страниц и всех, кто хотел бы создать собственный динамический Web-сайт. Authorized translation from the English language edition, entitled DHTML AND CSS FOR THE WORLD WIDE WEB: VISUAL QUICKSTART GUIDE, 2nd Edition by TEAGUE, JASON CRANFORD, published by Pearson Education, Inc, publishing as Peachpit Press, Copyright © 2001 TEAGUE, JASON CRANFORD. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any infomation storage retrieval system, without permission from Pearson Education, Inc. RUSSIAN language edition published by DMK Press, Copyright © 2003.

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

ISBN 0-201-73084-7 (англ.)

ISBN 5-94074-169-Х (рус.)

Посвящается Джоселин и Дэшиель – без них моя жизнь не была бы такой насыщенной

Благодарности Хочу выразить признательность Таре (Tara), своей супруге и лучшему критику; Ребекке (Rebecca), добившейся того, чтобы каждое предложение имело смысл; Ненси (Nancy), без которой этот проект не начался бы; Кэти (Kathy), нашедшей все ошибки; Конни (Connie), придавшей книге привлекательный вид; Симону (Simon), редактору первого издания; Бену (Ben), чье внимание к техническим деталям неоценимо. Благодарю родителей и Ненси (Nancy) за то, что с их помощью достиг своего сегодняшнего положения, Джонни (Johny) за постоянную поддержку и своих самых больших поклонников, Пэта (Pat) и Реда (Red). Огромное спасибо Чарльзу Доджсону (Charles Dodgson) – Льюису Кэрроллу (Lewis Carroll) – за то, что он написал «Алису в стране чудес», и Джону Тенниелу (John Tenniel) за прекрасные иллюстрации к этой книге. Джуди (Judy), Бойд (Boyd), доктору Г. (Dr. G.) и учителям Америки (The Teachers of America) желаю хорошей работы в дальнейшем. Хочу выразить признательность Набиху (Nabih) из компании Nabih’s Computer Systems за то, что он дважды за время создания этой книги спас жесткий диск моего компьютера. Благодарю Дугласа Адамса (Douglas Adams) за все его книги, а также The The, The Cure, Siouxsie and the Banshees, The Beatles, Blur, Cracker, Danielle Dax, Nine Inch Nails, KMFDM, The Pogues, The Ramones, New Model Army, The Cocteau Twins, The Cranes, The Systers of Mercy, The Smiths, Baubaus, Bad Religion, This Mortal Coil, Dead Can Dance за то, что они не дали мне сойти с ума, когда я работал над книгой.

Содержание Введение

Часть I. Глава 1.

................................................................................................................... 15

Каскадные таблицы стилей .......................................... 23 Введение в CSS ................................................................................ 24 Определение стиля ............................................................................... 26 Каскадные таблицы стилей ................................................................ 27 Версии CSS .............................................................................................. 30 Типы правил CSS ................................................................................... 32 Составляющие CSS-правил ................................................................ 33 Типы HTML-тэгов ................................................................................. 35

Глава 2. Основы CSS ......................................................................................... 37 Добавление CSS в HTML-тэг .............................................................. 38 Добавление CSS на Web-страницу .................................................... 40 Добавление CSS на Web-сайт ............................................................. 43 Переопределение HTML-тэга ............................................................ 49 Определение классов для создания тэгов ....................................... 51 Определение ID для идентификации объекта .............................. 54 Создание inline-тэгов ........................................................................... 56 Создание HTML-тэгов блок-уровня ................................................ 58 Определение тэгов с помощью одинаковых правил ................... 60 Определение тэгов в контексте ......................................................... 62 Значение !important .............................................................................. 64 Наследование родительских свойств .............................................. 66 Управление существующими или наследованными значениями свойств .............................................................................. 68 Определение каскадного порядка .................................................... 70 Настройка CSS для печати .................................................................. 72 Комментарии в CSS .............................................................................. 75 Стратегия создания таблиц стилей ................................................... 76

DHTML и CSS

Глава 3. Управление шрифтом ................................................................... 78 Оформление в Web .............................................................................. 79 Способы представления текста в Web ............................................. 80 Установка шрифта ............................................................................... 81 Загрузка шрифтов ................................................................................ 83 Шрифты в браузере .............................................................................. 85 Размер шрифта ...................................................................................... 87 Курсив ...................................................................................................... 89 Толщина шрифта .................................................................................. 91 Создание minicaps ................................................................................ 92 Определение нескольких значений шрифта одновременно .......... 94

Глава 4.

Управление текстом ...................................................................... 96 Кернинг .................................................................................................... 97 Интервал между словами ................................................................... 98 Межстрочные интервалы .................................................................... 99 Заглавные и строчные буквы ............................................................. 101 Выравнивание текста по правому, левому краю и по центру ............................................................................................. 102 Вертикальное выравнивание текста ................................................. 103 Выделение абзацев в тексте ............................................................... 104 Украшение текста ................................................................................. 106 Управление свойствами пробелов .................................................... 108 Установка разрыва страницы для печати ....................................... 110

Глава 5. Управление списками и указателем мыши ...................... 112 Списки ..................................................................................................... 113 Виды маркеров ...................................................................................... 115 Создание висячих отступов ................................................................ 116 Создание собственных маркеров ...................................................... 117 Форма указателя мыши ....................................................................... 119

Глава 6.

Управление цветами и фоном ................................................. 121 Установка отдельных свойств фона ................................................ 124 Установка цвета на переднем плане ................................................ 129

Глава 7.

Управление рамками и полями ............................................... 130 Что такое элемент ................................................................................ 131 Ширина и высота элемента ................................................................ 133 Поле элемента ....................................................................................... 135 Рамка элемента ...................................................................................... 137 Атрибуты рамки .................................................................................... 139 Внутренний отступ ............................................................................... 141

Содержание Поля и рамки в таблице ...................................................................... 142 Обтекание текстом ............................................................................... 144 Отмена обтекания текстом ................................................................ 146 Отображение элемента на экране ..................................................... 147

Глава 8. Управление позиционированием ........................................... 150 Что такое окно ....................................................................................... 151 Тип позиционирования ........................................................................ 152 Определение положения по отношению к левому верхнему углу ........................................................................................ 156 Определение положения по отношению к правому нижнему углу ......................................................................................... 159 Элементы в порядке стека (3D-позиционирование) ................... 161 Абсолютные элементы, встроенные в относительные ................ 163 Относительные элементы, встроенные в абсолютные ................ 164

Глава 9.

Управление видимостью элемента ...................................... 167 Определение видимости элемента ................................................... 167 Определение видимой части элемента ............................................ 169 Управление невидимой частью .......................................................... 171

Часть II.

Динамический HTML ............................................................. 173

Глава 10. Назначение DHTML ........................................................................ 174 Динамический HTML .......................................................................... 174 Особенности DHTML .......................................................................... 175 Причины использования DHTML ..................................................... 177 Flash и DHTML ....................................................................................... 178 Проблема выбора ................................................................................. 180

Глава 11. Объектная модель документа ................................................. 182 DOM – путеводитель по Web-странице .......................................... 183 Создание объекта .................................................................................. 185 Обработчики событий ......................................................................... 185 Обнаружение события ......................................................................... 188 Функционирование DOM ................................................................... 189 Определение возможностей браузера ............................................. 194 Определение типа DOM ...................................................................... 196 Построение общей DOM .................................................................... 198 Использование общей для браузеров DOM ................................... 201 Netscape 4 и встроенные слои ............................................................ 203

1 0 DHTML и CSS

Глава 12. Среда, в которой вы работаете .............................................. 207 Название и версия браузера ................................................................ 207 Тип операционной системы ............................................................... 210 Размеры экрана ...................................................................................... 212 Количество цветов ............................................................................... 214 Размеры окна браузера ........................................................................ 216 Размеры клиентской области окна ................................................... 217 Адрес и название страницы ................................................................ 219 Положение прокрутки страницы ..................................................... 220 Размеры объекта ................................................................................... 222 Левая и верхняя позиции объекта ..................................................... 224 Правая и нижняя позиции объекта ................................................... 226 Z-индекс объекта .................................................................................. 228 Состояние видимости объекта .......................................................... 230 Видимая область объекта ................................................................... 232

Глава 13. Основы динамических технологий ........................................ 236 Отображение и сокрытие объектов ................................................. 236 Перемещение объектов ....................................................................... 239 Перемещение объекта на заданное расстояние ............................ 241 Перемещение объектов в 3D ............................................................. 243 Прокрутка Web-страницы ................................................................. 246 Видимая область объекта ................................................................... 248

Глава 14. Развитые динамические технологии .................................. 250 Повторный запуск функции .............................................................. 250 Передача события в функцию ........................................................... 253 Глобальный обработчик событий ..................................................... 254 Анимационные объекты ..................................................................... 256 Нахождение положения указателя мыши ...................................... 259 Идентификация объекта на экране .................................................. 261 Управление содержанием во фреймах ............................................ 263 Позиционирование окна браузера .................................................... 266 Новое окно браузера ............................................................................ 268 Размеры окна ......................................................................................... 272

Глава 15. Динамические технологии CSS .............................................. 275 Изменение определения ...................................................................... 276 CSS-класс объекта ................................................................................ 278 Добавление нового правила ............................................................... 280 Отмена таблицы стилей ...................................................................... 281

Глава 16. Слои Netscape ................................................................................... 283 Что такое слой Netscape ...................................................................... 284 Создание слоя ........................................................................................ 285

Содержание 1 1 Импорт внешнего содержимого с помощью слоев Netscape ................................................................................................... 288 Доступ к слоям с помощью JavaScript ............................................. 290 Изменение слоев с помощью JavaScript .......................................... 293 Отображение содержимого слоев в браузерах, которые их не поддерживают ............................................................ 295

Глава 17. Internet Explorer для Windows .................................................. 297 Перетекание объектов ......................................................................... 298 Смена страниц ....................................................................................... 299 Эффект размытого изображения ...................................................... 301 Эффект волны ....................................................................................... 302

Часть III.

Использование инструментов для создания DHTML и CSS ............................................ 303

Глава 18. Знакомство с GoLive ...................................................................... 304 Интерфейс GoLive ................................................................................ 305 Внедрение CSS ........................................................................................ 308 Создание слоя ........................................................................................ 313 Создание DHTML-анимации ............................................................. 315

Глава 19. Введение в Dreamweaver ........................................................... 317 Интерфейс Dreamweaver .................................................................... 318 Внедрение CSS ........................................................................................ 321 CSS-редактор ......................................................................................... 323 Создание дополнительного слоя ....................................................... 325 Создание анимации .............................................................................. 327

Часть IV.

Динамические Web-сайты ............................................... 331

Глава 20. Понятие о динамических Web-сайтах ................................. 332 Отличительные черты динамического Web-сайта ....................... 333 Что такое гипертекст ........................................................................... 335 Динамический дизайн .......................................................................... 336 Размещение объектов на Web-странице ......................................... 337 Навигация: рекомендации и запреты ............................................... 340

Глава 21. Создание динамического Web-сайта ................................. 344 Шаг 1. Проектирование ....................................................................... 345 Шаг 2. Разработка .................................................................................. 348 Шаг 3. Реализация ................................................................................. 352

1 2 DHTML и CSS

Глава 22. Разметка Web-страницы ............................................................ 355 Устранение ошибки в Netscape CSS ................................................. 356 CSS и операционная система .............................................................. 358 Заголовки ................................................................................................ 361 Фиксированный заголовок ................................................................. 362 Боковое меню ........................................................................................ 364 Верхние и нижние колонтитулы ....................................................... 366 Границы фреймов ................................................................................. 369 Открытие и закрытие фреймов ......................................................... 371 Размещение страниц во фреймах ..................................................... 376 Отображение страницы на экране и при выводе на печать .................................................................................................. 379

Глава 23. Импорт внешнего содержимого ............................................ 381 Тэги <ilayer> и <iframe> ..................................................................... 382 Включения на стороне сервера .......................................................... 384 Внешний файл JavaScript ..................................................................... 385 Изучение работы других сайтов ....................................................... 387

Глава 24. Навигация Web-сайта .................................................................. 389 Определение стилей ссылок .............................................................. 390 Определение различных стилей для ссылок ................................. 393 Выпадающее меню ............................................................................... 395 Выдвижное меню .................................................................................. 400 Панель управления сайтом ................................................................. 403 Раскрывающееся меню ........................................................................ 407 Уточняющее меню ............................................................................... 410 Навигация для браузеров, не поддерживающих DHTML и CSS ......................................................................................................... 415 Дополнительные возможности .......................................................... 416

Глава 25. Средства управления ................................................................... 419 Полоса прокрутки ................................................................................ 420 Создание кнопки Back ......................................................................... 426 Организация слайд-шоу ...................................................................... 427 Всплывающий гипертекст .................................................................. 431 Использование формы ввода для создания динамических эффектов .................................................................... 434 Контекстная форма .............................................................................. 436 Перемещаемые объекты ..................................................................... 439 Свопинг изображений .......................................................................... 442 «Умное» меню ........................................................................................ 447

Содержание 1 3

Глава 26. Специальные эффекты ............................................................... 451 Буквица ................................................................................................... 452 Простая тень .......................................................................................... 454 Объемная тень ....................................................................................... 455 Фединг HTML-текста ........................................................................... 459 Отслеживание указателя мыши ........................................................ 463 Движущиеся объекты .......................................................................... 467 Прозрачная графика в формате PNG .............................................. 470 Создание часов ...................................................................................... 474

Глава 27. Мультимедиа ..................................................................................... 476 Использование звука в Web ................................................................ 477 Анимация в формате GIF .................................................................... 478 Назначение GIF-анимации .................................................................. 482 Flash-анимация ...................................................................................... 484 Видео в Internet ...................................................................................... 490 Добавление Java-апплетов .................................................................. 492

Глава 28. Отладка кода ..................................................................................... 494 Обнаружение ошибок CSS .................................................................. 495 Проверка CSS-правила ......................................................................... 497 Определение ошибок в коде JavaScript ........................................... 499 Различия между браузерами .............................................................. 502

Глава 29. Будущее динамического Internet ........................................... 504 Необходимость стандартов ............................................................... 505 Extensible Markup Language ................................................................ 507 Extensible Hypertext Markup Language ............................................. 509 Преобразование HTML в XHTML ..................................................... 510 Synchronized Multimedia Integration Language ............................... 512 Масштабируемая векторная графика ............................................. 513 CSS третьего уровня ............................................................................. 514

Приложения .................................................................................................................. 515 Приложение 1. Браузеры, поддерживающие DHTML и CSS ....... 516 Internet Explorer ......................................................................... 517 Netscape Navigator .................................................................... 518 Другие браузеры ....................................................................... 519

Приложение 2. Краткая справка о CSS .................................................... 520 Краткая справка ........................................................................ 521

1 4 DHTML и CSS

Приложение 3. Краткая справка о DHTML ............................................. 529 Служебные слова ...................................................................... 532

Приложение 4. Шрифты, поддерживаемые браузером ................. 534 Приложение 5. Дополнительные инструменты .................................. 539 Программное обеспечение .................................................... 539 В режиме реального времени ................................................ 542

Приложение 6. Дополнительные источники ......................................... 545 Web-сайты: технология и стандарты ................................... 545 Web-сайты: дизайн и теория .................................................. 549 Примеры Web-сайтов .............................................................. 551 Книги, журналы и другие публикации ................................ 552

Предметный указатель ....................................................................................... 554

введение Раньше создание Web-страниц было несложным делом. Вы написали несколько тегов, вставили несколько картинок, и страница готова. Теперь, с появлением потокового видео, JavaScript, CGI, Shockwave, Flash и Java создание Web-страниц может показаться трудной задачей для любого, кто не хочет стать программистом. Динамический HTML (Dynamyc HTML – DHTML) и каскадные таблицы стилей (Сascading Style Sheets – CSS) – технологии, позволяющие Web-дизайнеру добавлять новые элементы на страницу так же легко и быстро, как при помощи старого доброго HTML. При использовании DHTML не нужно задумываться о том, что у посетителя могут отсутствовать какие-либо дополнительные модули (Plug-in), или полагаться на сложные языки программирования (за исключением, быть может, JavaScript). В большей своей части DHTML похож на HTML и не требует специального программного обеспечения.

1 6 Введение

Содержание книги С того времени, как самые популярные браузеры Netscape Navigator и Internet Explorer начали поддерживать DHTML и CSS, Internet значительно изменился. Войны браузеров, взрыв dot-com (и последующее падение), огромный рост популярности Глобальной сети привели к сильному изменению технологий, которые обычно служили для создания Web-страниц. Но DHTML и CSS остаются теми двумя стандартами, которые применяются для создания лучших сайтов. В книге показан оптимальный путь использования DHTML и CSS, который позволит наиболее широкому кругу посетителей Всемирной сети видеть ваш сайт во всей красе. Книга разбита на четыре части:

в первой части детально описывается, как задействовать CSS для управления содержательным наполнением Webстраницы, показываются конкретные способы управления различными внешними видами Web-страницы; во второй части рассказывается об использовании объектной модели документа (Document Object Model – DOM) совместно с CSS и JavaScript для создания основных функций, обеспечивающих работу динамических (меняющих свои атрибуты) элементов страницы. Показано, как создать DOM, позволяющую запускать эти функции при помощи коротких программных кодов во многих браузерах; в третьей части описывается способ создания DHTML и CSS посредством двух наиболее популярных программ для редактирования Web-страниц – Adobe

GoLive и Macromedia Dreamweaver. Хотя для создания Web-сайтов при помощи DHTML и CSS и не обязательно применять эти программы, они все же могут значительно упростить вашу работу;

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

Читательская аудитория Если вы сразу обратили внимание на эту книгу, то вы, вероятно, уже хорошо знакомы с особенностями Всемирной паутины (World Wide Web). Для изучения представленного здесь материала нужно хоть немного знать HTML (HyperТext Markup Language – язык разметки гипертекста). Необязательно быть экспертом в данной области, но необходимо представлять, чем отличается тэг <p> от тэга <br>. При чтении некоторых глав вам также потребуется знание JavaScript. Таким образом, чем больше вы знаете о HTML и JavaScript, тем более полезной для вас будет книга.

Значения и единицы Для определения различных элементов вам понадобятся разные значения. В зависимости от элемента эти значения принимают различную форму. Некоторые из них просты и понятны, например числа, но другие требуют специальных единиц измерения.

Значения и единицы Каждый является Web-дизайнером В будущем каждый сможет стать Web-дизайнером. По мере того как растет Wеb, все большее количество людей используют эту среду для того, чтобы сообщить о себе миру в какой бы то ни было форме. Это может быть и кинолюбитель, восхваляющий какой-нибудь фильм, и многонациональная корпорация, рекламирующая свои продукты. Но все – и отдельные люди, и компании – считают Web способом рассказать о себе. Как пользователь, работающий с текстовым процессором, является в некотором смысле издателем, так с ростом популярности Internet каждый, кто не только пассивно просматривает страницы, является Web-дизайнером и должен знать, как они разрабатываются. Изучение DHTML и CSS – ваш следующий шаг в Web-дизайне.

Выражения в угловых скобках (<>) представляют собой возможные значения (табл. 1). Слова, написанные ìîíîøèðèííûì øðèôòîì, являются литералами и должны быть напечатаны соответствующим образом. Длина Размерности длин можно разделить на две части:

относительные длины, которые зависят от типа компьютера (табл. 2); абсолютные длины, которые одинаковы для любого типа компьютера и программного обеспечения (табл. 3).

Для наилучшего взаимодействия операционной системы и браузера при описании размера шрифтов рекомендуется использовать пикселы. Цвет Цвет на экране можно описать по-разному (табл. 4), но в основном это лишь различные способы объяснения компьютеру, сколько нужно взять красного, зеленого и синего, чтобы получить нужный цвет. Проценты Размерность многих элементов в этой книге – проценты. Процентные значения зависят от используемого элемента. URL URL (Uniform Resource Locator) – это уни-

кальный адрес какого-либо объекта в Web. Это может быть HTML-документ, графическое изображение, CSS-файл, файл JavaScript, аудио- или видеофайл, CGIскрипт или другие файлы. URL может быть локальным, то есть просто описывающим

1 8 Введение Таблица 1. Набор возможных значений Тип величины

Описание

Пример

Целое

1, 2, 3

Измерение расстояния или размера

1in

<color>

Цвет

red

Пропорция

35%

<URL>

Абсолютный или относительный путь к Internet-файлу

http://www.mySite.net/bob/ graphics/image1.gif

Таблица 2. Относительные длины Обозначение

Тип единицы

Описание

Пример

Em dash

Ширина буквы «М» для данного шрифта

3em

x-height

Высота маленькой буквы «х» для данного шрифта

5ex

Pixel

Базируется на разрешении монитора

125px

Таблица 3. Абсолютные длины Обозначение

Тип единицы

Описание

Пример

Пункты

Обычно используется для обозначения размера шрифта. 1 pt = 1/72 дюйма

12pt

Пики

Обычно применяется 3pc для описания размера шрифта. 1 pc ~ 12 pt

Миллиметры

25mm

Сантиметры

5.1cm

Дюймы

1 дюйм = 2,54 см

2.25in

Таблица 4. Цвет Обозначение

Описание

Пример

#RRGGBB

Шестнадцатеричный код красного, зеленого, синего цвета (00–99, AA–FF)

#CC33FF #C3F

rgb

Численные значения, соответствующие красному, зеленому, синему (#R, #G, #B) цвету (0–255)

rgb(204,51,255)

rgb(R%,G%,B%)

Процентное содержание красного, зеленого, синего цветов от 100% каждого цвета (0–100%)

rgb(81%,18%,100%)

name

Название цвета

Purple

Значения и единицы местоположение ресурса, относящегося к текущему документу, или глобальным, то есть описывающим абсолютное местоположение ресурса в Internet. Глобальный URL начинается с http://. Ссылки также используются в примерах программного кода, приведенных в книге. Для обозначения ссылок, которые могут указывать на любой URL, применяется знак решетки (#):

DHTML. В этом случае будет использоваться встроенная функция JavaScript void(): <a ->href="javascript: void('')">Link</a>. В таком написании функция определяет ссылку, которая никуда не ведет. Некоторые цвета всегда отображаются определенным образом на любом мониторе. Они называются цветами, которые сохраняет браузер. Их легко запомнить, потому что их числовые значения не меняются. В шестнадцатеричной системе можно использовать комбинации 00, 33, 66, 99, CC или FF. В качестве численных значений применяются 0, 51, 102, 153, 204, 255, а в качестве процентных – 0, 20, 40, 60, 80, 100.

С помощью такой ссылки мы попадаем в начало текущей страницы. Знак решетки (#) можно заменить любым другим адресом. Однако для некоторых ссылок размещение адресов в href определяется функциями

Таблица 5.7. Возможные свойства значения cursor Свойство CSS

Тип значения

Литерал (набирается как в примере)

Значение

Совместимость

IE4, N6, CSS2

<url>

CSS2

auto

IE4, N6, CSS2

none

IE4, N6, CSS2

Возможные значения свойства

Версия CSS, в которой добавлено это свойство

Версия Netscape Navigator, начиная с которой поддерживается это свойство

Версия Internet Explorer, начиная с которой поддерживается это свойство

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

2 0 Введение

Принятые обозначения В большинстве случаев текст, таблицы, рисунки, листинги не будут требовать дополнительных объяснений. Но все же необходимо ознакомиться с некоторыми обозначениями, которые помогут вам в освоении представленного материала. CSS-таблицы. Каждый раздел первой части, в котором описываются CSS-свойства, включает в себя таблицу, позволяющую быстро найти различные значения, которые используются как в данном свойстве, так и в браузерах и CSS-слоях, с которыми совместимы эти значения (рис. 1). В колонке совместимости отображена самая ранняя версия браузера (Netscape и Internet Explorer), где поддерживается представленное значение. В табл. 5 перечислены аббревиатуры. Листинги. В книге применяется несколько методов представления листингов. Это сделано для того, чтобы их можно было легко отличить от самого текста. Вот как выглядит код: <style> p { font-size: 12pt; } </style>

Все программные коды в книге набраны строчными буквами (см. «Код – заглавные или строчные буквы?»). К тому же в листингах всегда используются прямые кавычки (" или '), а не фигурные (“ ” или ’): программный код с фигурными кавычками просто не будет работать. Важные места в листингах, обсуждаемые на конкретной странице, выделены полужирным шрифтом. Когда вы набираете строку кода на компьютере, она может быть сколь угодно длинной, в то время как в книге, к сожалению, строка иногда просто не помещается

Таблица 5. Сокращенные названия браузеров Аббревиатура

Тип

браузера

IE3

Internet Explorer 3

IE4

Internet Explorer 4

IE5

Internet Explorer 5

IE6

Internet Explorer 6

Netscape 4

Netscape 6

Код – заглавные или строчные буквы? В этой книге все HTML-коды, свойства, значения пишутся строчными буквами. HTML-код может содержать как заглавные, так и строчные буквы, но стандарт XHTML требует, чтобы все коды писались строчными буквами (см. раздел «Extensible Hypertext Markup Language» в главе 29). Скорее всего, XHTML станет в будущем языком разметки Web-страниц. И чтобы уже сейчас начать переход к XHTML, в книге все программные коды написаны строчными буквами.

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

Web-сайт, посвященный книге

на странице. В таком случае ставится стрелка (– >), показывающая, что строка продолжается, например:

вам при выборе наиболее подходящей программы.

.title {font: bold 28pt/26pt times, –> serif; color: #FFF; background-color: –> #000; background-image: url(bg_ –> title.gif); }

Web-сайт, посвященный книге

Часто со строки кода будет начинаться какой-либо шаг. Это сделано, чтобы заострить ваше внимание на том, где именно в большой программе реализуется данный шаг. Полужирным шрифтом в тексте оформляются элементы интерфейса: названия окон, пунктов меню, команд, а также клавиш. Курсивом помечены базовые термины и определения.

Программное обеспечение DHTML, как и HTML, не требует какоголибо специального или дорогого программного обеспечения. Код DHTML – просто текст, и его можно редактировать с помощью обычной программы, например SimpleText (Mac OS) или NotePad (Windows). Но что действительно нужно для того, чтобы запускать код DHTML, – это браузер версии 4.0 или более поздней. В приложении 5 приведен список весьма полезных (а в большинстве случаев – бесплатных) программ, которые пригодятся при создании Web-сайтов. Несколько программ значительно упрощают работу с DHTML и CSS благодаря автоматизации многих часто повторяющихся задач Web-дизайна, решение которых весьма утомительно из-за набора большого количества кода. Я рекомендую использовать Adobe GoLive и Macromedia Dreamweaver. Третья часть книги поможет

Скорее всего, вы часто будете использовать примеры кода из этой книги, однако будьте внимательны: простое перепечатывание может привести к ошибкам. Некоторые книги продаются с CD, который содержит все необходимые листинги. Но как вы думаете, кто платит за такой диск? Конечно, вы. Купив эту книгу, вы получите доступ к огромному ресурсу знаний, который когда-либо существовал, – к Internet. И именно там вы сможете найти примеры из этой книги. Сайт www.webbedenvironments.com/dhtml/ для Visual QuickStart Guide (рис. 2) поддерживается автором данной книги. Здесь вы найдете примеры листингов, а также любые важные обновления и исправления. Представлены и статьи о Web, написанные автором этой книги. Некоторые из приведенных программных кодов не работают без дополнительных файлов, которые использовались для их создания. Но не волнуйтесь – на сайте вы найдете различные примеры, которые можно посмотреть в режиме on-line и сравнить результаты. Если у вас есть вопросы по DHTML, вы вправе задать их мне, отправив электронной почтой по адресу: vqs-dhtml@webbedenvironments.com. Обязательно посетите сайты издательств «Peachpit Press» (www.peachpit.com/vqs/ DHTML) и «ДМК Пресс» (www.dmkpress.ru).

2 2 Введение

Рис. 2. Web-сайт для Visual QuickStart Guide доступен 24 часа в сутки

Создан с использованием DHTML. На сайте www.webbedenvironments.com/dhtml/builtwith/ размещен список браузеров, поддерживающих DHTML. Вы можете задействовать эмблему «Создан с использованием DHTML»(Built with DHTML) как ссылку на этот сайт с вашей DHTML-страницы, чтобы помочь посетителям выбрать правильный браузер.

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

○ ○ ○ ○ ○ ○

○

Каскадные таблицы стилей

○

Часть I ГЛАВА 1 ГЛАВА 2 ГЛАВА 3 ГЛАВА 4 ГЛАВА 5 ГЛАВА 6 ГЛАВА 7 ГЛАВА 8 ГЛАВА 9

◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆

Введение в CSS ....................................................... 24 Основы CSS ............................................................. 37 Управление шрифтом ............................................. 78 Управление текстом ................................................ 96 Управление списками и указателем мыши ............ 112 Управление цветами и фоном ................................ 121 Управление рамками и полями .............................. 130 Управление позиционированием ........................... 150 Управление видимостью элемента ......................... 167

Введение в CSS HTML не является мечтой дизайнера, ставшей явью. Он неточен, непредсказуем и непостоянен, когда дело касается представления различных типов информации. Язык HTML не предназначался для работы со сложными графическими изображениями и мультимедиа. В действительности он никогда не был чем-то большим, нежели универсальным языком разметки текста, распространенным в Internet, и имел весьма ограниченные возможности. HTML – язык разметки, созданный, чтобы определять структуру документа для размещения его в Web. Это значит, что HTML предназначен не для работы со стилями, а для организации страницы. Со временем в HTML было добавлено много новых тэгов и технологий, позволяющих лучше контролировать структуру и вид документа. Появились таблицы, фреймы, инструменты выравнивания текста, язык JavaScript. Но страница не состоит из одного текста, дизайнерам приходится использовать различную графику. HTML – не самая лучшая система. Когда Web-разработчики стали требовать от World Wide Web Consortium добавления возможностей управления внешним видом Web-страниц, W3C, чтобы заполнить дыры в HTML, представил каскадные таблицы стилей (CSS) – рис. 1.1.

Рис. 1.1. Логотип CSS

Вы, наверное, подумали: «Вот здорово, только я выучил HTML, и все поменялось!» Не волнуйтесь, CSS так же просто изучать, как и HTML. На самом деле с CSS иногда даже проще работать, потому что здесь не вводятся новые тэги, а используются уже существующие.

Введение в CSS

Рис. 1.2. Домашняя страничка World Wide Web Consortium: www.w3.org

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

Что такое World Wide Web Consortium? World Wide Web Consortium (W3C) – организация, устанавливающая стандарты, которые используются создателями браузеров (рис. 1.2). Эта организация была создана в 1994 году. Ее цель можно сформулировать так: добиться развития Всемирной паутины с помощью разработки обычных протоколов, которые обеспечат эволюцию Web и взаимодействие в нем. В W3C входит более 400 организаций всего мира – поставщики технического и программного обеспечения, компании-поставщики контента (содержания), корпоративные пользователи, исследовательские лаборатории, органы управления и правительства разных стран. Согласно информации, опубликованной на сайте W3C, Консорциум ставит перед собой три задачи:

универсальный доступ. «Нужно сделать Internet доступным для всех, создавая технологии, в которых учитываются различия культурного, образовательного уровня пользователей, их материальный достаток и физические возможности»;

семантика Web. «Необходимо разработать программное обеспечение, которое позволит каждому пользователю применять ресурсы Web наилучшим образом»;

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

2 6 Введение в CSS

Определение стиля В настоящее время многие текстовые процессоры позволяют обрабатывать текст не только последовательно, то есть слово за словом, но и путем изменения всего документа с помощью стилей. В стиле (Style) собраны различные свойства текста, например шрифт и размер, которые можно использовать для похожих частей текста, скажем заголовков. Таким группам свойств дается обычное имя. Допустим, вы хотите, чтобы все заголовки разделов в документе были напечатаны полужирным курсивом, шрифтом Times размером 14 пунктов. Вы можете присвоить все эти свойства стилю «Заголовок раздела» (рис. 1.3). Каждый раз, когда вы вводите заголовок раздела, вам нужно воспользоваться данным стилем, и все описанные свойства сразу же применятся к тексту. А если потом вы решите поменять размер шрифта с 14 на 18 пунктов, достаточно внести изменения в описание стиля «Заголовок раздела». Текстовый процессор изменит все части текста, помеченные этим стилем в документе.

Рис. 1.3. Стили, которые применяются к заголовку раздела в тэге текстового процессора

Рис. 1.4. Применение стилей к HTML-тэгу

Каскадные таблицы стилей

Рис. 1.5. Использование CSS на HTML-странице для добавления картинки на задний план. Текст при этом форматируется, смещается вправо и вниз

Рис. 1.6. Тот же код представлен без использования CSS. На странице, в отличие от рис. 1.5, отсутствует форматирование

Каскадные таблицы стилей (Cascading Style Sheets – CSS) позволяют устанавливать стили за один раз, та же функция присутствует в большинстве текстовых процессоров. Вы можете создать каскадную таблицу стилей в главном документе, и ее действие распространится на все HTMLтэги на одной странице или на всем сайте. Несмотря на то что CSS работает с HTML, это не HTML. Более того, CSS представляет собой отдельный код, который расширяет возможности HTML, позволяя переопределять уже существующие HTMLтэги (рис. 1.4 и 1.5). Например, тэг, устанавливающий границы абзаца, <p>...</p>, в основном служит для выделения пространства между абзацами. Однако, используя CSS, несложно поменять природу этого тэга так, что текст внутри него будет выделяться полужирным курсивом, шрифтом Times размером 14 пунктов (рис. 1.6). Как и при работе со стилями текстового процессора, вы можете поменять определение тэга <p> и, следовательно, вид всех абзацев на Web-сайте. В табл. 1.1 перечислены некоторые свойства тегов, которые можно изменять с помощью CSS, а также главы, в которых об этом рассказывается.

2 8 Введение в CSS Достоинство CSS заключается в возможности смешивать и сопоставлять различные правила из разных источников, чтобы придать Web-странице вид, соответствующий ее конкретному назначению. Это напоминает программирование, что неудивительно, так как таблицы стилей создавались программистами, а не дизайнерами. Но как только вы привыкнете к CSS, работа с ними станет для вас столь же естественной, сколь и составление связного текста из отдельных предложений.

Рис. 1.7. Логотип W3C

Таблица 1.1. Свойства, которые можно изменять с помощью CSS Свойство

Объект управления

Описание в книге

Шрифт (font)

Форма и размер букв, жирный или курсив

Глава 3

Текст (text)

Кернинг, интервал между строками, выравнивание, регистр

Глава 4

Список и указатель мыши (list&mouse color)

Маркеры, отступ

Глава 5

Фон (background)

Задний план страницы или элемента

Глава 6

Рамка, поле (border&margins)

Рамки, поля, внутренний отступ ширина, высота

Глава 7

Позиционирование (positioning)

Точное положение на экране

Глава 8

Видимость (visibility)

Видимость на экране элемента или какой-либо его части

Глава 9

Кому принадлежат авторские права на CSS? 12 января 1999 года корпорация Microsoft получила патент № 5860073. Этот патент, озаглавленный «Таблицы стилей для систем публикации», определяет «использование таблиц стилей в электронных системах публикации». Звучит знакомо? Изобретатели, перечисленные в данном патенте, создали систему, с помощью которой «текст или другой элемент, например графическое изображение, появляются на экране». При этом применяются таблицы стилей, определенные как «сведения о формате, например шрифты и табуляция». Описанный патент частично совпадает, по-видимому, с понятиями, сформулированными в спецификациях W3C для CSS (рис. 1.7) и в языке XSL, разработка которого ведется по крайней мере с 1994 года.

Каскадные таблицы стилей

Кому принадлежат авторские права на CSS? (окончание) Это означает, что корпорация Microsoft теперь может утверждать, что ключевые понятия, лежащие в основе технологии Web-браузера, являются ее интеллектуальной собственностью. Теоретически, если вы хотите использовать эти или любые другие основанные на них технологии, вам нужно подписать лицензионное соглашение с Microsoft. Представьте себе картину: все сайты, разработанные с помощью CSS, DHTML, XSL, должны быть сертифицированы Microsoft. Однако этого может и не произойти. Корпорация Microsoft сообщила, что подпишет «свободное и взаимно обязывающее» соглашение с каждым, кто захочет применять «ее» технологию. Было добавлено, что еще не ясно, понадобится ли лицензия. Краткий анализ патента показывает, что в нем есть две ошибки, о которых уже заявили W3C и Web Standards Project (www.webstandards.org):

существование прецедента. Таблицы стилей были предложены лабораторией CERN одновременно с появлением первых Web-браузеров в 1994 году. На самом деле о таблицах стилей знают еще с 60-х годов, тогда их использовали в типографиях. В лучшем случае в Microsoft не изобрели, а просто сформулировали это понятие;

собственное лицензирование W3C гарантирует, что разработанные под их эгидой стандарты являются доступными и на них не накладываются отчисления владельцу патента. Так как W3C первым предложил понятие таблиц стилей, его лицензия должна быть прецедентом. Представители Microsoft есть в комиссии, создавшей эти стандарты, и в лицензии Microsoft имеются ссылки на документы, выпущенные W3C и касающиеся CSS. Поэтому маловероятно, что данный патент выдержит тщательную проверку. Джордж Олсен (George Olsen) из Web Standards Project выражает сомнение, будет ли такой патент выпущен, «поскольку существует ряд похожих технологий, которые появились раньше технологии Microsoft, включая первоначальное предложение CSS». Также предполагается, что любая организация, которая имеет представителей в W3C, в том числе и Microsoft, должна подробно рассказывать о текущих и будущих патентах, которые могут затронуть рассматриваемые стандарты W3C. В данном случае это не было сделано. В W3C узнали о патенте 4 февраля 1999 года, когда информация о нем появилась в печати. Какое это имеет к вам отношение? Возможно, никакого. W3C опубликовал CSS как открытый стандарт, джинн уже выпущен из бутылки. Пока не было ни одного случая, чтобы Microsoft запретила кому-нибудь использовать CSS для создания сайта. Все же цель данного открытого стандарта – позволить заинтересованным лицам вносить свой вклад в общее дело, причем это не должно касаться только одной компании. Будем надеяться, что патент не навредит будущим CSS-разработкам.

3 0 Введение в CSS

Версии CSS Под руководством W3C (на рис 1.8 представлена домашняя страница организации) CSS развивались на протяжении нескольких лет. Последняя версия получила название CSS Level 2 или CSS2 – CSS второго уровня. Большинство современных браузеров поддерживают поздние версии CSS, более старые браузеры – комбинацию ранних версий CSS. В приложении 2 указывается, какие браузеры совместимы с определенными CSS-свойствами. Ниже приводятся основные сведения об уровнях CSS:

CSS первого уровня (CSS Level 1 или CSS1). Первая официальная версия CSS была выпущена W3C в 1996 году. Она включает в себя основные возможности, такие как форматирование текста, выбор шрифта, установка полей. Netscape 4 и Internet Explorer 3/4 поддерживают этот уровень; позиционирование в CSS (CSS-P). Webдизайнерам нужен был специальный инструмент, чтобы точно располагать элементы на экране. Версия CSS1 уже вышла, а CSS2 еще не появилась, и W3С предложил временное решение – позиционирование в CSS. Этот стандарт представлял собой некое предложение, которое заинтересованные стороны могли бы обсуждать некоторое время, прежде чем оно получит официальный статус. Netscape и Microsoft спешно включили предварительные варианты в браузеры четвертой версии. Поддерживают ли Netscape и Microsoft CSS-P? Можно сказать, что это так. Несмотря на то что основные характеристики присутствуют в браузерах обеих фирмпроизводителей, некоторые моменты все же были упущены;

Рис. 1.8. Домашняя страничка CSS (www.w3.org/Style/CSS/)

CSS второго уровня (CSS Level 2 или CSS2). Эта версия CSS вышла в 1998 году. Второй уровень включает в себя все свойства двух предыдущих версий, особое внимание уделяется международному доступу и возможности определения медиа-особенностей CSS. Internet Explorer 5 и Netscape 6 поддерживают CSS2;

Версии CSS

Рис. 1.9. Домашняя страница HTML

Каскадные таблицы стилей не являются единственными таблицами стилей, доступными в Internet. Netscape 4 также поддерживает таблицы стилей JavaScript. Однако CSS используются чаще, и они одобрены W3C.

CSS третьего уровня (CSS Level 3 или CSS3). Эта версия еще находится в стадии разработки. Но даже после ее выпуска браузеры только через несколько лет начнут ее поддерживать. Самым важным отличием CSS3 от остальных версий, несомненно, станет масштабируемая векторная графика (Scalable Vector Graphics – SVG). Этот формат позволит добавлять формы (линии, круги, сплайны и т.д.) в векторном, а не в растровом представлении, то есть все преимущества векторной графики будут доступны в Web. О векторном и растровом представлении подробно рассказано в главе 3, раздел «Оформление в Web». Версия CSS3 более подробно описывается в главе 29.

CSS и HTML 4.01 В декабре 1999 года W3C выпустил последнюю версию языка разметки гипертекста – HTML 4.01. Эта версия включает в себя технологию таблиц стилей (до этого она поддерживалась как отдельный стандарт) как часть спецификации HTML (рис. 1.9). Сказанное не означает, что CSS и HTML – одно и то же. Но теперь HTML полагается на возможности CSS. Многие из HTML-тэгов, предназначенных для описания внешнего вида страниц, должны выйти из употребления, если это не противоречит новым стандартам HTML. W3C называет такую ситуацию «протестом». И хотя подобные тэги все еще работают, они скоро будут вытеснены CSS. W3C считает, что нужно использовать таблицы стилей, чтобы освободить HTML от задач представления. Это можно понять так: «Перестаньте просить новых тэгов для представления выходной информации. Применяйте вместо них таблицы стилей». Возможно, это неплохая идея: теперь каждый может работать с HTML-тэгами независимо от того, является он Web-дизайнером или нет, и переопределять их по своему усмотрению. Более подробную информацию об HTML можно найти на сайте www.w3.org/MarkUp/.

3 2 Введение в CSS

Типы правил CSS Каскадные таблицы стилей очень просто использовать. Для них не требуются модули расширения (plugins) или сложное программное обеспечение. CSS – всего лишь правила, которые определяют, как должен выглядеть HTML и как он должен реагировать на действия пользователя. Вы можете установить правила преобразования HTML или создать общие правила и применять их к тэгам по своему усмотрению. Существует три типа CSS-правил:

HTML-селектор – текстовая часть HTMLтэга. Например, h3 – селектор тэга <h3>. В правилах каскадных таблиц стилей селектор используется для переопределения результата действия тэга (см. раздел «Переопределение HTML-тэга» в главе 2). Пример: p { font: bold 12pt times; } класс представляет собой «свободное» правило, которое можно применять к любому HTML-тэгу. Классу разрешается дать любое имя (см. приложение 3). Так как класс применим ко множеству тэгов, он является самой гибкой разновидностью селектора (см. раздел

«Определение классов для создания тэгов» в главе 2). Пример: .myClass { font: bold 12pt times; }

правила ID могут так же, как и классы, применяться к любым HTML-тэгам. Однако селекторы ID обычно применяются к определенному HTML-тэгу на странице один раз – для использования в функции JavaScript (см. раздел «Определение ID для идентификации объекта» в главе 2). Пример: #object1 {position: absolute; top: 10px;} Не путайте селектор HTML-тэга с его атрибутами. В следующем примере img – селектор, а scr – атрибут. <img scr="picture.gif"> Хотя тэг <p>, выделяющий абзац, часто используется без закрывающего тэга </ p>, при определении в CSS закрывающий тэг обязательно нужно включать. CSS-правила будут применяться в общем случае только к тэгам, имеющим и закрывающий, и открывающий тэги. Но есть несколько исключений, например тэг <img>.

Составляющие CSS-правил

Составляющие CSS-правил Все правила, независимо от их местоположения и типа, состоят из трех частей:

Рис. 1.10. Основной синтаксис CSS-правила

Различие тэгов и селекторов HTML-селектор – текстовая часть HTML-тэга, которая сообщает браузеру о типе тэга. Когда вы определяете HTML-селектор, используя CSS, вы в действительности переопределяете HTML-тэг. Несмотря на схожесть, тэг и селектор – два разных элемента. Если вы напишете в CSS-правиле полный HTML-тэг, то есть скобки и буквы, тэг работать не будет. Поэтому данные понятия важно разделять.

селекторы представляют собой буквенные или численные символы, которые определяют правило. Селектор может быть селектором HTML-тэга, классом или ID; свойства описывают вводимый элемент. Существует несколько десятков свойств, каждое из которых отвечает за некий аспект оформления страницы и присутствующие на ней эффекты; значения определяют природу свойства. Значение может представлять собой ключевое слово, например «yes» или «no», число или проценты. Тип используемого значения зависит только от свойства, которому оно приписывается.

Кроме селектора, CSS-правило содержит свойства и значения, которые в совокупности называются определением. На рис. 1.10 представлен синтаксис правила.

3 4 Введение в CSS Несмотря на то что после последнего определения в списке не нужно ставить точку с запятой, как показывает опыт, ее все же лучше поставить, чтобы избежать неприятностей в будущем. Если вы решите добавить что-либо в определение и забудете поставить точку с запятой, вы можете полностью испортить правило. И не только одно конкретное определение, но и все другие определения в этом правиле перестанут работать (см. раздел «Обнаружение ошибок CSS» в главе 28). Хотя Netscape версии 4 и выше и Internet Explorer версии 3 и выше поддерживают CSS, ни один из этих браузеров не позволяет работать со всеми возможностями CSS, а число этих возможностей зависит от версии браузера. Поддерживается ли то или иное свойство в данной версии браузера, можно узнать в приложении 2.

Размещение CSS-правил Правила можно установить в трех местах:

в HTML-тэге внутри документа, чтобы изменить один тэг в документе. Такие правила часто называют inline-правилами (см. раздел «Добавление CSS в HTML-тэг» в главе 2);

в заголовке документа для применения ко всей странице. Такие правила называют встроенными (см. раздел «Добавление CSS на Web-страницу» в главе 2);

во внешнем документе, который связан с вашим или импортирован. В этом случае правила используются для всего сайта. Такие правила называются внешними (см. раздел «Добавление CSS на Web-сайт» в главе 2). Положение правила в документе и в других правилах определяет их общее влияние на документ (см. раздел «Определение каскадного порядка» в главе 2).

Типы HTML-тэгов Таблица 1.2. Селекторы для тэгов блок-уровня Селектор

Использование в HTML

blockquote

Тип кавычек

center

Выравнивание текста по центру

Описание определения

dfn

Определенный терм

dir

Список директорий

div

Логическое деление

Список определений

Терм определения

h1-7

Уровни заголовков 1–7

Элемент списка

Упорядоченный список

Абзац

table

Таблица

Данные таблицы

Заголовок таблицы

Строка таблицы

Неупорядоченный список

Типы HTML-тэгов Не каждое определение CSS подходит HTML-тэгу. Это полностью зависит от природы тэга. В большинстве случаев легко понять, какое свойство можно применять к данному тэгу, а какое – нет. Вам же не придет в голову применить свойство, связанное с выделением абзацев, к такому тэгу, как <b>. В приложении 2 рассказывается, какие свойства можно использовать с определенными типами тэгов.

Как записывать тэги: заглавными или строчными буквами? HTML-тэг не является зависимым от регистра. Браузер не делает различий между тэгами, написанными заглавными и строчными буквами. Многие предпочитают писать тэги заглавными буквами, выделяя их из основного текста. Я причислял себя к таким людям, пока не появился XHTML (см. раздел «XHTML» в главе 29). Важной особенностью этого языка является то, что он различает заглавные и строчные буквы, и все селекторы нужно писать строчными. Поэтому я начал использовать строчные буквы, чтобы быть готовым к возможным изменениям в HTML.

3 6 Введение в CSS Кроме тэга <body>, существует три основных типа HTML-тэгов:

тэги блок-уровня (block-level tags) выделяют элемент пустой строкой снизу и сверху. Селекторы тэгов этого типа перечислены в табл. 1.2; inline-тэги не вставляют пустые строки между элементами. Селекторы тэгов этого типа перечислены в табл. 1.3; замененные тэги (replaced tags) имеют установленный или вычисляемый размер. Селекторы тэгов этого типа перечислены в табл. 1.4. Netscape 4 не распознает CSS, которые применены напрямую к тэгам, перечисленным в табл. 1.4.

Таблица 1.3. Селекторы для inline-тэгов Селектор

Использование в HTML

Ссылка

Выделение жирным шрифтом

big

Текст большего размера

cite

Короткая цитата

code

Шрифт кода

Выделение

font

Вид шрифта

Курсив

pre

Переформатированный текст

span

Локализованное форматирование стиля

strike

Зачеркивание

strong

Усиленный шрифт

sub

Подпись снизу

sup

Подпись сверху

Рукописный шрифт

Подчеркнутый текст

Таблица 1.4. Селекторы для замененных тэгов Селектор

Использование в HTML

img

Изображение

input

Поле ввода

object

Объект

select

Выпадающий список

textarea

Многострочное поле ввода

основы css

Рис. 2.1. Использование CSS на HTML-странице для добавления картинки на задний план, при этом текст форматируется, смещается вправо и вниз

Рис. 2.2. Тот же самый код без использования CSS. Страница просматривается, но форматирование отсутствует

2 CSS позволяет контролировать вид документа. Преимущество CSS перед HTML заключается в следующем: вместо создания новых HTML-тэгов можно просто скорректировать определение одного правила, и вид всех тэгов, которые управляются этим правилом, изменится (рис. 2.1 и 2.2). Если правило расположено в заголовке документа, то изменения подействуют на всю страницу. Если оно представляет собой внешний файл, модификации коснутся всех страниц, связанных с этим файлом, то есть изменится весь сайт. Существуют браузеры, не распознающие CSS, но их осталось мало. К счастью, они просто игнорируют код CSS и отображают HTMLстраницу без искажений, но и без форматирования. Возможно, страница не будет выглядеть так же хорошо, как при использовании каскадных таблиц стилей, но она, по крайней мере, не станет хуже. Прочитав эту главу, вы узнаете, как создавать CSS и где их размещать для достижения разнообразных эффектов.

3 8 Основы CSS

Добавление CSS в HTML-тэг Хотя CSS обычно не применяется для изменения вида каждого тэга в отдельности, вы можете задавать стили для конкретных тэгов. Это особенно полезно, если вы хотите обойти другие установленные на странице стили. На рис. 2.3 показан общий синтаксис добавления стиля непосредственно в HTMLтэг, а на рис. 2.4 представлен результат.

Рис. 2.3. Общий синтаксис определения стилей непосредственно в HTML-тэге

Установка стилей для отдельного HTML-тэга 1. <h1style= Напишите слово style= в HTML-тэге, который вы хотите определить (листинг 2.1). 2. "font: small-caps bolditalic 2.5em ->'minion web', 'Georgia, 'Times New ->Roman',Times,serif;color:red;" В кавычках напишите определение стиля в формате property: value, поставьте точку с запятой, чтобы отделить разные определения друг от друга. Убедитесь, что вы закрыли кавычки. 3. >Alice'sAdventuresinWonderland</h1> После закрывающего тэга напишите тот текст, к которому нужно применить стиль. Затем закройте парный тэг, если это необходимо.

Рис. 2.4. Стили размещены непосредственно в тэге

Добавление CSS в HTML-тэг Листинг 2.1. С помощью атрибутов стиля каждый тэг определяет форматирование текста внутри него

<html> <body style="background:white ->url(alice23.gif) no-repeat; ->font-family:arial, ->helvetica,geneva,sans-serif; word ->spacing: 1px; position: relative; ->top:185px; left:165px; ->width:480px"> <br> <h1 style="font:small-caps bold ->italic 2.5em 'minion web', ->'Georgia', 'Times New roman', Times, ->serif">Alice's ->Adventures in Wonderland</h1> <h2 style="font: bold 1.5em 'minion ->web Georgia', 'Times New Roman', ->Times, serif">Lewis Carroll</h2> <p style="style: italic; font->family:monospace;">THE ->MILLENIUM FULCRUM EDITION 3.0</p> <h3>CHAPTER 1 <br>Down the Rabbit-Hole</h3> <p><span style="font: 300%/100% serif; ->color: #999999; margin-right: ->-3px">A</span> lice was beginning ->to get very tired of sitting by her ->sister on the bank...</p> <p>So she was considering in her own ->mind...</p> <p>There was nothing so<i>very</i> remarkable in that...</p> </body> </html>

Netscape поддерживает использование стилей в тэгах, но ошибка в Netscape 4 может привести к тому, что любые стили после тэга, в котором содержится непосредственно примененный стиль, будут игнорироваться. Когда вы ничего не выигрываете от изменения глобального определения стилей, очень удобно использовать CSS в отдельном тэге для перекрытия глобального определения (см. раздел «Определение каскадного порядка» в конце главы). В данном примере также показано, как определять тэг <body>, но будьте осторожны: это может привести к большим проблемам (см. ниже раздел «Управление существующими или наследованными значениями свойств»). Нужно отметить, что и Netscape, и Internet Explorer игнорируют многие, особенно позиционные, свойства внутри тэга. Чтобы не возникало проблем с браузером, рекомендую заключать список определений в двойные кавычки, а любые значения в этом списке, например названия шрифтов, состоящие из нескольких слов, – в одинарные. Помните, что знак равенства используется для того, чтобы приписать стилю атрибут, а при определении CSS нужно всегда ставить двоеточие. Обычные стили можно также применить ко всей странице (см. следующий раздел) и к нескольким Web-страницам (см. раздел «Добавление CSS на Web-сайт» этой главы).

4 0 Основы CSS

Добавление CSS на Web-страницу В основном CSS используются для определения стиля всего документа. Для этого нужно включить правила стиля в заголовок документа, который находится внутри содержания стиля (рис. 2.5). Если добавить стиль таким способом, то результат будет идентичен результату добавления стилей непосредственно в тэг (рис. 2.6). Однако этот метод позволяет легко поменять стили всего документа из одного места.

Рис. 2.5. Общий синтаксис стиля CSS, расположенного в тэге <head> HTML-документа

Рис. 2.6. Этот рисунок совпадает с рис. 2.4, но здесь СSS помещены в тэге <head>, а не в каждом отдельном тэге

Добавление CSS на Web-страницу Листинг 2.2. Результат работы этого кода (рис. 2.6) может показаться тем же самым, что и результат, получившийся на странице с рис. 2.4. Правила стиля собраны в теге <head> и распространяются на все тэги документа

<html> <head> <style type="text/css"> body { bacground: white ->url(alice23.gif) no-repeat; ->word-spacing: 1px; } #content { position: relative; top: 190px; left: 165px; width: 480px; font-family: ->arial,helvetica,geneva, ->sans serif; } h1 { font:small-caps bold italic ->2.5em 'minion web', 'Georgia', ->'Times New Roman', Times, serif; color: red;} h2 { font: bold 1.5em 'minion web', ->'Georgia', 'Times ->New Roman', Times, serif; font-size: 1.5em } .dropcap { font: 300%/100% serif; color: #999999; margin-right: -3px; } </style> </head> <body> <div id="content"> <br>

Установка стиля для тэгов в HTML-документе 1. <styletype="text/css> Напишите открывающий тэг <style> в тэге <head> вашего документа, задайте тип как "text/css". Это означает, что все последующие стили будут CSS-стилями (листинг 2.2). 2. h1 { Для определения правила введите селектор нужного тэга и открывающую фигурную скобку за ним. Селектор может принадлежать к одному из следующих типов: – селектор HTML-тэга (например, h1; см. «Переопределение HTML-тэга»); – селектор класса (например, myClass; см. «Определение классов для создания тэгов»); – ID-селектор (например, #object; см. «Определение ID для идентификации объекта»); – группа селекторов, разделенных запятой, то есть список определений (например, h1, h2, myClass; см. «Определение тэгов с помощью одинаковых правил»); – группа селекторов, разделенных пробелами, то есть контекстуальные определения (например, h1 myclass object; см. «Определение тэгов в контексте»). 3. font:small-caps bolditalic 2.5em ->'minion web','Georgia','TimesNew ->Roman',Times,serif; color:red; Напишите определения, которые нужно присвоить этому правилу в виде property: value и разделите различные определения в списке точкой с запятой. 4. Закройте правило фигурной скобкой (}).

4 2 Основы CSS 5. Повторите шаги 2–4 для всех селекторов, которые требуется определить. 6. Закройте тэг стиля, напечатав </style>. На первый взгляд кажется, что включать type="text/css" необязательно, так как браузер должен уметь определять тип стиля. Однако стоит записывать эту часть кода, чтобы браузеры, не поддерживающие данный тип стиля, могли проигнорировать его. Кроме того, любой человек может прочитать код и узнать, какой используется стиль. Рекомендуется применять тэг комментариев <!-...->, чтобы спрятать CSS от браузеров, их не распознающих. Иначе эти браузеры покажут таблицу стилей не в лучшем виде. Стили можно также применять непосредственно к одному тэгу (см. «Добавление CSS в HTML-тэг») или к нескольким Web-страницам (см. «Добавление CSS на Web-сайт»).

Форматирование CSS CSS допускается форматировать различными способами. Определения можно располагать на одной строке, а можно после точки с запятой начинать новую строку. Это не окажет влияние на функционирование CSS, если следовать общему синтаксису: Selector {property1: value; property2: ->value; property3: value;}

Разнообразие в написании в большинстве случаев полезно. Если отделять определения CSS пробелами, их легче будет отыскать. Кроме того, это помогает находить ошибки. Во многих программах HTML-редактирования, таких как Adobe GoLive, можно устанавливать вид форматирования CSS.

Листинг 2.2 (окончание)

<h1>Alice's Adventures in ->Wonderland</h1> <h2>Lewis Carroll</h2> <p style="style: italic; ->font-family: monospace;"> ->THE MILLENIUM FULSCREEN ->EDITION 3.0</p> <h3>CHAPTER 1 <br>Down the Rabbit-Hole</h3> <p><span class="dropcap">A</span> ->lice was beginning to ->get very tired of sitting by her ->sister on the bank...</p> <p>So she was considering in her ->own mind...</p> <p>There was nothing so <i>very -></i> remarkablein that...</p> </div> </body> </html>

Добавление CSS на Web-сайт

Добавление CSS на Web-сайт Преимущество CSS заключается в том, что их допустимо использовать не только в одном документе, но и на всем сайте в целом. Внешние таблицы стилей можно применить к сотне HTML-документов, и для этого не потребуется никакого дополнительного программного кода. Создание внешнего CSS-файла состоит из двух этапов. Сначала в текстовом файле устанавливаются правила. Затем он импортируется или связывается с HTML-документом при помощи операции @import и/или тэга <link> соответственно (рис. 2.7). Связанные или импортированные CSS-файлы работают так же, как если бы тот же код помещался в файле, в который они импортированы или с которым связаны.

Рис. 2.7. Внешние CSS-файлы разрешается не только использовать во множественных HTML-документах, как в случае с CSS2, их можно также импортировать (но не связывать) в другой CSS-файл, как в случае с CSS3

4 4 Основы CSS

Создание внешнего CSS-файла 1. Создайте новый файл с помощью текстового процессора или любой другой программы, которая позволяет создавать текстовые файлы. Например, можно использовать Notepad или SimpleText (листинг 2.3). Во внешнем CSS-файле нельзя применять тэг <style>, иначе такая таблица не будет функционировать во многих браузерах. 2. h1 { Добавьте на страницу правило CSS, написав селектор для определяемого тэга и открывающую фигурную скобку. Селектор может принадлежать к одному из следующих типов: – селектор HTML-тэга (например, h1; см. «Переопределение HTML-тэга»); – селектор класса (например, myClass; см. «Определение классов для создания тэгов»); – ID-селектор (например, #object; см. «Определение ID для идентификации объекта»); – группа селекторов, разделенных запятой, то есть список определений (например, h1,h2,myClass; см. «Определение тэгов с помощью одинаковых правил»); – группа селекторов, разделенных пробелами, то есть контекстуальные определения (например, h1 myclass object; см. «Определение тэгов в контексте»). Заметьте, что в данном случае тэг <style> не используется. Если бы он присутствовал в коде, HTML-документ не стал бы работать.

Листинг 2.3. Внешний CSS-файл filename.css содержит определения, которые будут использоваться для создания макета страницы в листинге 2.4 и 2.5

h1 { font: italic small-caps bold 2.5em ->'minion web', 'Georgia', ->'Times New Roman', Times, serif; color: red; } h2 { font: bold 1.5em 'minion web', ->'Georgia', 'Times New Roman',Times, ->serif; }

Добавление CSS на Web-сайт Листинг 2.4. Внешний CSS-файл filename2.css содержит дополнительные определения, которые служат для создания макета страницы в листинге 2.4 и 2.5. Вы можете назвать эти файлы любым именем, filename здесь приводится в качестве примера

body { bacground: white url(alice23.gif) ->no-repeat; word-spacing: 1px; } #content { font-family:arial,helvetica, ->geneva,sans-serif; position: relative; top: 190px; left: 165px; width: 480px; } .dropcap { font: 300%/100% serif; color: #999999; margin-right: -3px; }

Рис. 2.8. Общий синтаксис ссылки на внешнюю таблицу стилей

3. font:small-capsbolditalic 2.5em ->'minionweb','Georgia','TimesNew ->Roman',Times,serif;color:red;} Напишите определения, которые нужно присвоить правилу в виде property:value, и поставьте точку с запятой, чтобы разделить различные определения в списке. 4. Закройте правило фигурной скобкой (}). 5. Повторите шаги 2–4 для всех селекторов, которые требуется задать. 6. Сохраните документ как filename.css, где filename представляет собой имя файла, которое вы можете выбрать по своему усмотрению, а .css – расширение, указывающее тип файла. Допускается создавать множество CSS-файлов и ссылаться на них в дальнейшем (листинг 2.4). 7. Присоедините этот файл к HTML-файлу, используя тэг <link>, или импортируйте его в HTML-файл или другой CSSфайл посредством операции @import. Внешние файлы таблиц стилей можно соединять с любыми HTML-файлами при помощи тэга <link>. Если ввести стили непосредственно в заголовке документа, то эффект будет таким же, как и при использовании внешнего CSS-файла. На рис. 2.8 представлен общий синтаксис ссылки на таблицы стилей, а на рис. 2.9 – ее результат.

4 6 Основы CSS

Создание ссылки на внешний CSS-файл 1. <link> Внутри тэга <head>...</head> в HTMLдокументе откройте тэг <link>, а после него введите пробел (листинг 2.5). 2. rel="stylesheet" Эта запись сообщает браузеру, что далее встретится ссылка на таблицу стилей. Рис. 2.9. Эта страница выглядит так же, как и на рис. 2.6 и 2.4. Но в данном случае используются внешние CSS-файлы

Листинг 2.5. Большинство примененных в этом документе стилей определены во внешних CSS-файлах filename.css и filename2.css, представленных в листингах 2.3 и 2.4. Исключение составляет тэг <body>, который задается локально. Он помещает на задний план картинку (рис. 2.9)

<html> <head> <link rel="stylesheet" href="filename.css"> <link rel="stylesheet" href="filename2.css"> <style media="screen" type="text/css"> body { background: white url(alice23.gif) no-repeat;} </style> </head> <body> <div id="content"> <br> <h1>Alice's Adventures in Wonderland</h1> <h2>Lewis Carroll</h2> <p style="style: italic; font-family: monospace;">THE MILLENNIUM ->FULSCREEN EDITION 3.0</p> <h3>CHAPTER 1 <br>Down the rabbit-Hole</h3> <p><span class="dropcap">A</span> lice was beginning to get very tired of sitting ->by her sister on the bank...</p> <p>So she was considering in her own mind...</p> <p>There was nothing so <i>very</i> remarkablein that...</p> </div> </body> </html>

Добавление CSS на Web-сайт

Рис. 2.10. Общий синтаксис импортирования внешней таблицы стилей

Рис. 2.11. Для создания этой страницы используются те же CSS-файлы, что и для страницы на рис. 2.9, но в данном случае файлы импортированы, а в тэге <body> определено другое изображение

3. href="filename.css" Укажите путь, глобальный или локальный, к тому CSS-файлу, на который требуется создать ссылку. Здесь filename – полный путь и имя (включая расширение) вашего CSS-документа. 4. > Закройте тэг <link> с помощью закрывающей угловой скобки. 5. <linkrel="stylesheet"href= ->"filename2.css"> Повторите шаги 1–5 столько раз, сколько таблиц стилей вам понадобится. 6. <styletype="text/css">...</style> Используя тэг <style>, добавьте в заголовок любые стили. Тэг <style> можно расположить и перед тэгом <link>. Импортировать внешнюю таблицу стилей в документ допустимо при помощи директивы @import. Этот метод не поддерживается Netscape 4, но удобен для добавления внешних CSS-файлов как в HTML-документ, так и в другие CSS-файлы, если вы пользуетесь Internet Explorer и Netscape 6. На рис. 2.10 представлен общий синтаксис для директивы @import, а на рис. 2.11 – результат импортирования таблицы стилей.

4 8 Основы CSS

Импортирование внешнего CSS-файла 1. <styletype="text/css"> В заголовке HTML-документа откройте тэг <style> (листинг 2.6). 2. @importurl(filename.css); Импортируйте CSS-файл. Имя файла – это URL используемого CSS-документа. URL может быть глобальным и начинаться с http:// или локальным, указывающим на файл, который находится на том же компьютере. 3. @importurl(filename2.css); Повторите шаг 3 для всех внешних CSSдокументов, которые требуется импортировать. 4. body{background:white ->url(alice40.gif)no-repeat;} Здесь вы можете добавлять дополнительные CSS-правила, если это необходимо (см. предыдущий раздел). 5. </style> Закройте тэг стиля.

Листинг 2.6. Для импортирования CSS-файла в HTML-документ используется операция @import вместо тэга <link>. Конечный результат тот же, хотя операция импорта не поддерживается Netscape 4

<html> <head> <style media="screen" type="text/css"> @import url(filename.css); @import url(filename2.css); body { background: white ccurl(alice40.gif) no-repeat; } </style> </head> <body> <div id="content"> <br> <h2>CHAPTER 11<br> Who Stole the Tarts?</h2> <p><span class="dropcap">T</span> ->he King and Queen of Hearts were ->seated on there throne...</p> </div> </body> </html>

Тэг <link> можно поместить непосредственно во внешней таблице стилей. Тогда импортированный файл будет включен в документ как часть внешнего CSS-файла.

CSS-файл не должен содержать HTML-тэги (даже тэг <style>) или другую информацию, кроме комментариев и импортированных стилей.

Поскольку Netscape 4 не поддерживает операцию импорта, предпочтительней использовать тэг <link>. Однако директива @import вполне применима для Netscape 6.

При работе с CSS-файлами необязательно использовать расширение .css. Вы можете назвать файл просто filename, на его функционировании отсутствие расширения не отразится. Но все же лучше добавлять расширения, чтобы избежать путаницы.

Вы можете назвать внешний CSS-файл любым именем, однако рекомендуется, чтобы оно имело отношение к стилям, описанным в файле. Например, имя navigation.css скажет о содержании файла больше, чем css1.css.

Если при работе с Netscape 4 документ перезагружается из кэша, то таблицы стилей могут исчезнуть. Об этой проблеме рассказано в разделе «Исправление ошибки в Netscape CSS » главы 22.

Переопределение HTML-тэга

Рис. 2.12. Общий синтаксис для определения стилей в HTML-тэге

Рис. 2.13. Некоторые HTML-тэги были переопределены. Тэг <p> теперь применяет к тексту следующий стиль: серый цвет, шрифт Verdana, размер 12 пунктов, полуторный интервал между строками. Кроме того, картинки выравниваются по правому краю, то есть изменился тэг <img>, а тэг <i> придает шрифту полужирное начертание

У многих HTML-тэгов уже есть встроенные определения, например у тэга <bold>. Его встроенное свойство эквивалентно font-weight:bold. На рис. 2.12 представлен общий синтаксис полного CSS-правила с использованием HTML-селектора. Добавляя определения в b – селектор тэга <b>, – вы можете изменять действие этого парного тэга на его содержимое (рис. 2.13). HTML-селекторы можно определять внутри тэга <style>...</style> в заголовке документа (см. раздел «Добавление CSS на Web-страницу» ранее в этой главе) или во внешнем CSS-файле, который потом импортируется или связывается с HTML-документом (см. раздел «Добавление CSS на Web-сайт»).

Определение HTML-селектора 1. p{ Начните с HTML-селектора, свойства которого требуется определить, и добавьте открывающую круглую скобку, чтобы открыть правило (листинг 2.7). 2. color:#666666 font-size: 12px; line-height: 18px; font-family: Verdana, Arial, Helvetica, ->Geneva, sans-serif; Напишите определения свойств. Допускается добавлять столько определений, сколько потребуется, однако эти свойства должны работать с рассматриваемым HTML-тэгом. Например, нельзя использовать текстовый отступ для описания тэга <bold>. В приложении 2 сказано, какие свойства можно использовать для переопределения конкретных тэгов.

5 0 Основы CSS 3. } Список определений должен завершаться закрывающей фигурной скобкой. Если ее не поставить, можно испортить всю работу. Переопределение тэга автоматически переносится на все аналогичные тэги, которые встретятся в дальнейшем. Синтаксис слегка отличается от синтаксиса для переопределения отдельного HTMLтэга в документе (см. раздел «Добавление CSS в HTML-тэг»). Переопределение тэга не влияет на его первоначальные свойства. Следовательно, тэг <b> независимо от внесенных изменений будет придавать шрифту полужирное начертание (см. «Управление существующими или наследованными значениями свойств»). Таким способом можно переопределить и тэг <body>. Теоретически он действует как тэг блок-уровня (см. раздел «Типы HTMLтэгов» в главе 1), однако Internet Explorer для Windows не распознает позиционирование в данном тэге. Если вы хотите позиционировать все объекты на странице, нужно делать это на уровне CSS (см. раздел «Создание HTMLтэгов блок-уровня» ниже).

Листинг 2.7. Обычно тэг <p> просто оставляет пустые строки между абзацами. После добавления нескольких стилей этот тэг меняет цвет текста, шрифт, которым он набран, и размер шрифта, по-прежнему оставляя пустые строки (рис. 2.13)

<html> <head> <style type="text/css"> p{ color: #666666 font-size: 12px; line-height: 18px; font-family: Verdana, Arial, ->Helvetica, Geneva, sans-serif; } img { float: right; } i { font-weight: bold; } </style> </head> <body> <div align="left"> <h3>CHAPTER 5<br> Advice from a Caterpillar</h3> </div> <p><img scr="alice15.gif" width="200" ->height="264" border="0">The ->Caterpillar and Alice looked at ->each other for some time in ->silence: at last the Caterpillar ->toot the hookah out of his mouth, ->and adrressed her in a languid, ->sleepy voice.</p> <p>'Who are <i>you</i>?' said the ->Caterpillar.</p> </body> </html>

Определение классов для создания тэгов

Рис. 2.14. Общий синтаксис CSS-класса

Рис. 2.15. Общий синтаксис зависимого класса. Определения для этой версии copy будут работать только в том случае, если их применить к тэгу <blockquote>

Рис. 2.16. Класс copy применен ко всем тэгам <p>. Текст печатается шрифтом Trebuchet MS 12 пунктов с полуторным интервалом между строками. Тэг <blockquote> распознает copy как зависимый класс, текст печатается полужирным шрифтом Book Antiqua 14 пунктов, высота строки меньше, текст выровнен по центру

Использование селектора класса позволяет устанавливать независимые стили, которые потом можно применять к любому HTMLтэгу. На рис. 2.14 и 2.15 представлен общий синтаксис CSS-правила класса. HTML-селектор отличается от класса тем, что он автоматически определяет конкретный тип тэга, а классу дается уникальное имя, которое потом указывается в HTMLтэге или тэгах, используемых с атрибутом стиля (рис. 2.16). Правила класса можно определять внутри тэга <style>...</style> в заголовке документа (см. раздел «Добавление CSS на Web-страницу» ранее в этой главе) или во внешнем CSS-файле, который затем импортируется в HTML-документ или связывается с ним при помощи ссылки (см. выше раздел «Добавление CSS на Webсайт»).

5 2 Основы CSS

Определение селектора класса 1. .copy{ Введите имя класса с предваряющей его точкой (.), затем откройте определение с помощью фигурной скобки ({). Имя класса может быть любым, но оно должно содержать только буквы и цифры. Поскольку класс copy независимый, его можно использовать с любым HTML-тэгом, однако установленные для класса свойства должны поддерживаться типом применяемого тэга (листинг 2.8). 2. font-size:12px; line-height: 150%; font-family: “Trebuchet MS”, Arial, ->Helvetica, Geneva, sans-serif; Напишите определения этого класса и убедитесь, что они разделены точкой с запятой. 3. } Завершите правило закрывающей фигурной скобкой. Класс, не определенный внутри HTMLтэга документа, не будет работать.

Листинг 2.8. Стиль класса можно устанавливать и применять с любым HTML-тэгом, как в случае с copy, либо только с одним тэгом, как в случае с blockquote.copy

<html> <head> <style type="text/css"> .copy { font-size: 12px; line-height: 150%; font-family: "Trebuchet MS", Arial, ->Helvetica, Geneva,sans-serif; } blockquote.copy { font-weight: bold; font-size: 14px; line-height: 16px; font-family: "Book Antiqua", "Times ->New Roman", Georgia, Times, serif; text-align: center; } </style> </head> <body> <p class="copy">Alice glanced rather ->anxiously at the cook...</p> <p class="copy">'Oh, don't bother ->ME,'...</p> <blockquote class="copy"> <p> 'Speak roughly to your little boy, <br> And beat him when he sneezes:<br> He only does it to annoy,<br> Because he knows it teases.'<br><br> CHORUS</p> </blockquote> </body> </html>

Определение классов для создания тэгов

Применение класса к HTML-тэгу Зависимые классы Если класс непосредственно связан с HTML-тегом, такой класс называют зависимым. Это означает, что данный класс можно использовать только вместе с данным HTML-тэгом. На рис. 2.15 представлен синтаксис зависимого класса. Зачем привязывать класс к одному конкретному тэгу? С помощью зависимого класса можно добавлять существующие определения класса, которые будут работать только в том случае, если класс находится в конкретном тэге. Например, вы хотите, чтобы класс copy в общем случае придавал шрифту требуемый размер, но если этот класс находится внутри тэга <blockquote>, можно сделать так, что кроме увеличения размера он будет придавать тексту полужирное начертание.

1. <p class="copy">...</p> Добавьте class="classname" в тэг, к которому вы хотите применить класс. Заметьте, что хотя при определении класса внутри <style>...</style> вы и пишете точку, она не используется при ссылке на имя класса в тэге. Внутри HTML-тэга можно сочетать класс с ID или inline-правилами (см. разделы «Добавление CSS в HTML-тэг» и «Определение ID для идентификации объекта»). В качестве имени класса нельзя использовать зарезервированные слова JavaScript. Эти слова перечислены в приложении 3. Для создания собственных HTML-тэгов удобны классы с тэгами <div> и <span> (см. разделы «Создание inline-тэгов» и «Создание HTML-тэгов блок-уровня» этой главы).

5 4 Основы CSS

Определение ID для идентификации объекта Как и селектор класса, ID-селектор можно использовать для создания уникальных, независимых от конкретного HTML-тэга стилей. Таким образом, их легко приписать любому применяемому тэгу. На рис. 2.17 представлен общий синтаксис ID. ID – основное понятие динамического HTML (DHTML). С помощью ID функция JavaScript определяет уникальный объект на экране. Это означает, что в отличие от класса ID обычно используется на странице один раз и определяет один элемент как объект. Этим объектом затем можно управлять с помощью JavaScript (рис. 2.18). ID допускается определять внутри тэга <style>...</style> в заголовке документа (см. раздел «Добавление CSS на Webстраницу» ранее в этой главе) или во внешнем CSS-файле, который затем импортируется в HTML-документ или связывается с ним при помощи ссылки (см. выше раздел «Добавление CSS на Webсайт»). Чтобы определить ID, нужно выполнить следующие действия: 1. #area1{ ID-правила всегда начинаются со знака решетки (#), затем вводится имя ID. В качестве имени можно использовать любой набор букв и цифр (листинг 2.9). 2. color:red; margin-left:9em;position: ->relative; Через точку с запятой напишите определения этого класса.

Рис. 2.17. Общий синтаксис ID

Рис. 2.18. В результате установки левого поля слой area1 сдвинут вправо, а текст обтекает слой image1

ID можно использовать с любым типом свойств, но ID-селектор лучше всего применять при описании уникального объекта на экране. 3. } Закройте правило с помощью фигурной скобки (}). ID, не определенный внутри HTML-тэга документа, не будет работать.

Определение ID для идентификации объекта Листинг 2.9. ID area1 определяет границы изменяемой области в HTML-документе (рис. 2.18)

<html> <head> <style type="text/css"> #area1 { color: red; margin-left: 9em; position: relative; } #image1 {float: left; } </style> </head> <body> <p>'Well!' thought Alice to ->herself, 'after such a fall ->as this I shall think nothing of ->tumbling down stairs!...</p> <p id="area1"><img id="image1" ->scr="alice06.gif" ->width="163" height="200" ->border="0">Down, down, down. ->Would the fall <i>never</i> ->come to an end!...</p> <p>Presently she began again. 'I ->wonder if I shall fall right -><i>through</i> the earth!...</p> </body> </html>

Применение ID к HTML-тэгу 1. <p id="area1">...</p> Добавьте id="idName" в выбранный HTML-тэг, как показано в листинге 2.9. Как объяснялось ранее в этой главе, величина ID-атрибута является именем созданного вами ID-селектора. Заметьте, что хотя при определении ID вы и вводите символ решетки (#), она не используется при ссылке на ID в HTML-тэге. Внутри HTML-тэга можно сочетать ID с inline-правилами или правилами класса (см. разделы «Добавление CSS в HTMLтэг» и «Определение ID для идентификации объекта»). В качестве имени ID нельзя использовать зарезервированные слова JavaScript. Эти слова перечислены в приложении 3. Разница между ID и классами станет более очевидной после того, как вы познакомитесь с CSS-позиционированием и сами создадите CSS-слои с помощью ID. ID используются для того, чтобы присвоить каждому элементу на экране уникальное имя и идентификатор. Поэтому ID применяется в документе только один раз для элемента, который становится объектом, управляемым с помощью JavaScript.

5 6 Основы CSS

Создание inline-тэгов Вы уже узнали, как изменить HTML-тэги при работе с CSS. Почти все HTML-тэги содержат свойства, которые вы либо принимаете, либо переопределяете (см. раздел «Управление существующими или наследованными значениями свойств»). Например, тэг <b> функционирует так, как если бы имелось правило "font-weight: bold". Что делать, если вы хотите создать свой тэг? Нельзя создать собственный HTMLтэг за одну секунду, но все же для приближения к этой цели удобны тэги <span> или <div>, классы или ID. У тэга <span> нет наследованных свойств. Он своего рода чистый лист для создания вашего inline-тэга (рис. 2.19). В следующем примере установлены два стиля (листинг 2.10). Первый стиль – это класс, с помощью которого особо оформляется первая строка. Второй стиль делает фон позади текста розовым, тем самым как бы подсвечиваются смысловые выделения (рис. 2.19). CSS допустимо определять внутри тэга <style>...</style> в заголовке документа (см. раздел «Добавление CSS на Web-страницу») или во внешнем CSS-файле, который затем импортируется в HTML-документ либо связывается с ним (см. раздел «Добавление CSS на Web-сайт»).

Рис. 2.19. Первая строка текста особым образом выделена, а важные части помечены другим цветом

Листинг 2.10. Чтобы создать inline-тэг, нужно определить класс или ID и применить их к тэгу <span>. В примере ID используется для придания соответствующего вида первой строке, а класс – для подсветки отдельных частей текста

<html> <head> <style type="text/css"> #firstline { color: red; font: italic bold 14px/100% "Book ->Antiqua", "Times New Roman", Georgia, ->Times, serif; } span.highlight {background-color: ->#ffcccc; } </style> </head>

Создание inline-тэгов Листинг 2.10 (окончание)

<body> <h3>CHAPTER 4<br> The Rabbit Sends in a Little Bill</h3> <p><span id="firstline">It was the White ->Rabbit</span>,trotting slowly back ->again, and looking anxiously about as ->it went, as if it had lost something; ->and she heard it muttering to itself ->'The Duchess! The Duchess! Oh my dear ->paws! Oh my fur and whiskers! She'll ->get me executed, as sure as ferrets ->are ferrets! Where <i>can</i> I have ->dropped them, I wonder?' Alice guesses ->in a moment that it was looking for -><span class="highlight">the fan and the ->pair of white kid gloves</span>, and ->she very good naturedly began hunting ->about for them, ->but<span class="highlight"> ->they were nowhere to be seen</span>->everything seemed to have changed since ->her swim in the pool, and the great ->hall, with the glass table and the ->little door, had vanished completely. -></p> </body> </html>

Создание inline-тэга 1. #firstline{...} span.highlight{... } Создайте ID-правило стиля или правило стиля для класса (см. разделы «Определение классов для создания тэгов» и «Определение ID для идентификации объекта»). 2. <span id="firstline">...</span> <span id="highlight">...</span> В HTML добавьте ID-атрибут и/или атрибут класса в тэг <span> (см. раздел «Переопределение HTML-тэга»). Помните, что CSS-правила можно поместить как в заголовке документа, так и во внешнем файле, который потом импортируется в документ или связывается с ним. Заметьте, что в примере перед селектором класса стоит HTML-селектор span. Это ограничивает применение класса: данные определения действуют, только если класс используется в этом тэге. ID будет относиться к конкретному типу тэга, если его описать с помощью CSS2. К сожалению, Netscape 4 не поддерживает эту возможность и игнорирует ID.

5 8 Основы CSS

Создание HTML-тэгов блок-уровня В предыдущем разделе рассказывалось, как создавать с нуля собственные тэги, которые затем можно поместить в другие, то есть сформировать inline-тэги. Но иногда требуется создать блок, который отделялся бы от остального содержания документа (рис. 2.20). Единственное наследованное свойство тэга <div> заключается в том, что он оставляет промежуток до и после своего содержимого. Поэтому его удобно использовать для создания тэга, похожего на абзац, не прибегая к помощи тэга <p>. В следующем примере установлены два стиля (листинг 2.11). Первый стиль – это ID, с помощью которого определяется вид и местоположение на странице блока с названием. Второй стиль задает вид и положение блока остального текста страницы. CSS допустимо определять внутри тэга <style>...</style> в заголовке документа (см. раздел «Добавление CSS на Webстраницу») или во внешнем CSS-файле, который затем импортируется в HTMLдокумент либо связывается с ним (см. раздел «Добавление CSS на Web-сайт»).

Рис. 2.20. Название страницы написано красным цветом на черном фоне и помещено в блок, а содержание страницы находится в блоке с серым фоном

Листинг 2.11. Чтобы создать тэг блок-уровня, нужно сначала создать тэг класса или ID-тэг, которые применяются в тэге <div>. В этом примере ID используется для форматирования названия страницы, а класс – для изменения остального текста (рис. 2.20)

<html> <head> <style type="text/css"> #title9 { color: red; background-color: black; layer-background-color: #000000; padding: 5px; font: 1.45em Arial, Helvetica, Geneva, ->sans-serif; position: absolute; top: 10px; left:10px; width:200px; }

Создание HTML-тэгов блок-уровня Листинг 2.11 (окончание)

div.content { color: black; backcolor-color: #cccccc; layer-background-color: #cccccc; padding: 10px; font: 12px/14px "Book Antiqua", "Times ->New Roman", Georgia, Times, serif; position: absolute; top: 10px; left: 220px; width: 350px; } </head> <body> <div id="title9"> <h3>CHAPTER 9<br> The Mock Turtle's Story</h3> </div> <div class="content"> <p>'You can't think how glad I am to see ->you again, you dear old thing!' said ->the Duchess, as she tucked her arm ->affectionately into Alice's, and they ->walked off together.</p> </div> </body> </html>

Создание тэга блок-уровня 1. #title9{...} div.content {...} Создайте ID-правило стиля или правило стиля для класса (см. разделы «Определение классов для создания тэгов» и «Определение ID для идентификации объекта»). 2. <divid="title9">...</div> <div class="content">...</div> В HTML добавьте ID-атрибут и/или атрибут класса в тэг <div> (см. раздел «Переопределение HTML-тэга»). Помните, что CSS-правила можно поместить как в заголовке документа, так и во внешнем файле, который потом импортируется в документ или связывается с ним. Теоретически вместо тэга <div> можно использовать тэг <p>. Но обычно документ разбит на множество абзацев, а далеко не все браузеры способны применять позиционные стили к тэгу <p>. Прежде чем применять CSS и JavaScript для создания документов с динамическими эффектами, нужно хорошо ознакомиться с этими инструментами. DHTML основывается на слоях, созданных с помощью атрибута id внутри тэга <div>. Получающимися в результате объектами можно управлять посредством JavaScript.

6 0 Основы CSS

Определение тэгов с помощью одинаковых правил Если требуется, чтобы несколько селекторов имели одинаковое определение, запишите эти селекторы через запятую. Общий синтаксис для группы определений представлен на рис. 2.21. В списке можно определить качества, а затем добавить правила для каждого HTMLтэга отдельно (рис. 2.22). CSS допустимо определять внутри тэга <style>...</style> в заголовке документа (см. раздел «Добавление CSS на Web-страницу») или во внешнем CSS-файле, который затем импортируется в HTML-документ либо связывается с ним (см. раздел «Добавление CSS на Web-сайт»).

Рис. 2.21. Общий синтаксис для списка селекторов с одним и тем же определением

Рис. 2.22. Заголовки и абзацы напечатаны одним и тем же шрифтом и имеют одинаковые поля

Определение тэгов с помощью одинаковых правил Листинг 2.12. Определив для нескольких селекторов одно и то же правило, вы уменьшите время загрузки страницы (рис. 2.22)

<html> <head> <style type="text/css"> h1,h2,h3,p { font-family: "Book Antiqua", "Times ->New roman", Georgia, Times, serif; margin-left: 10px; font-variant: small-caps; } h1,h2,.dropcap { font-size: 1.5em; line-height: 100%; color: red; } h3 { margin-top: 25px; border-top: 2px solid black; } p { font variant: normal; } </style> </head> <body> <h1>Alice's Adventures in Wonderland -></h1> <h2>Lewis Carroll</h2> <h3>CHAPTER 1<br> Down the Rabbit-Hole</h3> <p><span class="dropcap">A</span> lice ->was beginning to get very tired of ->sitting by her sister on the bank...</p> </body> </html>

Создание группы определений 1. h1,h2,h3,p{...} Напишите несколько HTML-селекторов через запятую (листинг 2.12). Таким образом, у них будет одно и то же определение. 2. h3{...} При необходимости определение каждого селектора можно поменять. Если вы хотите перекрыть набор определений в группе правил, убедитесь, что в CSS эти правила идут после группы правил (см. раздел «Определение каскадного порядка»). В списке можно также определять ID и классы: h1,h2,.dropcap{...}.

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

6 2 Основы CSS

Определение тэгов в контексте Если один тэг окружен другими, такая комбинация называется набором тэгов. Здесь внешний тэг называется родительским (parent), а внутренний – дочерним (child). Чтобы создать правило для тэга, являющегося ребенком, можно использовать CSS. На рис. 2.23 представлен общий синтаксис для контекстуальных селекторов. В примере (листинг 2.13) тэг <link> переопределен таким образом, что он функционирует по-разному в зависимости от того, где находится, – в тэге <p> или в тэге <div> (рис. 2.24).

Рис. 2.23. Общий синтаксис контекстуального правила

Рис. 2.24. Во всех ссылках используется тэг <a>. Но на странице представлены два разных стиля, которые появляются в зависимости от расположения тэга <link>

Листинг 2.13. Контекстные CSS позволяют устанавливать стили HTML-тэгов в зависимости от их родительских характеристик. В этом примере для тэга <link> созданы два стиля. Один используется внутри абзаца, другой – если ссылка находится внутри тэга <div> с menu class

<html> <head> <style type="text/css"> p a:link { color: red; text-decoration: underline; }

Определение тэгов в контексте Листинг 2.13 (окончание)

div.menu a:link { color: #900; font-weight: bold; text-decoration: none; } div.menu { font: bold 16px "Trebuchet ->MS", Arial, Helvetica, Geneva, ->sans-serif; } p { font: 12px "Book Antiqua", "Times ->New Roman", Georgia, Times, serif; } </style> </head> <body> <div class="menu"> <a href="#">&lt; Previous Chapter</a> | -><a href="#">Next Chapter &gt</a> </div> <hr> <h3>CHAPTER 8<br> The Queen's Croquet-Ground</h3> <p>A large rose-tree stood near the ->entrance of the garden: the roses ->growing on it were white, but there ->were three gardeners at it, busily ->painting them red/ Alice thought ->this <a href="#">a very curious thing -></a>, and she went nearer to watch ->them, and just as she came up to them ->she heard one of them say, 'Look out ->now, Five! Don't go splashing paint ->over me like that!'</p> </body> </html>

Создание контекстуального селектора 1. pa:link{...} div.menu a:link{...} Введите HTML-селектор родительского тэга, затем нажмите клавишу пробела. Вы можете написать столько HTMLселекторов, сколько потребуется. Но именно последний селектор будет обладать всеми стилями, перечисленными в правиле. 2. <divclass="menu"><ahref="#">...</a> -><p><a href="#">...</a></p> Ссылка выделяется ярко-красным цветом только в том случае, если она находится внутри абзаца. Ссылка отмечается малиновым цветом и не подчеркивается, если она располагается в тэге <div> с указанным классом menu. Как и в случае с группой селекторов, в список контекстуальных селекторов наряду с HTML-селекторами допускается включать селекторы классов (зависимых или независимых) и/или ID-селекторы.

6 4 Основы CSS

Значение !important Значение !important служит для того, чтобы присвоить определению максимальный приоритет в каскадном порядке (см. раздел «Определение каскадного порядка»). На рис. 2.25 показано, как использовать это значение. В примере (листинг 2.14) тэг <p> переопределен, а определениям размера шрифта (font-size) и типа шрифта (font-family) присваивается значение !important. Также определен класс copy, который применяется к тэгу <p>, причем определению типа шрифта присвоен максимальный приоритет. В результате текст печатается шрифтом, размер которого зависит от правила тэга <p>, а тип – от правила класса copy (рис. 2.26). CSS допустимо определять внутри тэга <style>...</style> в заголовке документа (см. раздел «Добавление CSS на Web-страницу») или во внешнем CSS-файле, который затем импортируется в HTML-документ либо связывается с ним (см. раздел «Добавление CSS на Web-сайт»).

Присвоение значения !important 1. p{ Откройте CSS-правило с помощью селектора и фигурной скобки ({). Можно использовать HTML-селектор класса или ID.

Рис. 2.25. Общий синтаксис использования значения !important

Рис. 2.26. Из-за того что в тэге <p> размеру шрифта присваивается максимальный приоритет, предыдущее правило, определяющее размер шрифта в классе copy, перекрывается, и шрифт увеличивается до 16 пунктов вместо 10. Несмотря на то что и в тэге <p>, и в классе copy типу шрифта присваивается максимальный приоритет, определение класса имеет преимущество перед определением тэга (см. раздел «Определение каскадного порядка»), и текст печатается шрифтом Times, а не Arial

Значение !important Листинг 2.14. При выборе определений, которые нужно применить к HTML-документу, предпочтение отдается тем из них, которые помечены !important. В данном примере установлено два правила. В первом определяется размер, тип, цвет шрифта в тэге <p>. Во втором определяется класс copy, который затем используется в тэге <p>. Этот класс также меняет размер, тип и цвет шрифта. Правила класса должны перекрывать правила тэга, но все происходит как раз наоборот, потому что применяется значение !important

<html> <head> <style type="text/css"> p{ font-size: 16px !important; font-family: arial, helvetica, geneva, ->sans-serif !important; color: black; }

2. font-size:16px!important; Введите определение стиля, затем пробел и !important. Поставьте точку с запятой, чтобы закрыть правило. 3. font-family: arial, helvetica, geneva, sans-serif!important;color:black;} Добавьте в это определение любые нужные вам правила, которым также можно присвоить максимальный приоритет. Закройте правило с помощью фигурной скобки (}). 4. p.copy{...} Добавьте другие правила и присвойте их определениям максимальный приоритет, если это необходимо. Netscape 4 не поддерживает !important.

p.copy { font-size: 10px; font-family: "Times New Roman", Georgia, ->serif !important; color: red; }

Новички часто пишут в определении !important после точки с запятой. Это может привести к тому, что браузер проигнорирует определение, а возможно, и все правило.

</style> </head> <body> <h3>CHAPTER 10<br> The Lobster Quadrille</h3> <p class="copy">The Mock Turtle sighed ->deeply, and drew the back of one flapper ->across his eyes...</p> </body> </html>

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

6 6 Основы CSS

Наследование родительских свойств У всех HTML-тэгов, которыми можно управлять с помощью CSS, кроме тэга <body>, есть родитель, то есть тэг-контейнер, который его окружает. HTML-тэги обычно обладают теми же свойствами, что и их тэги-родители. Это так называемое наследование стилей. Например, набор цветов, описанный в тэге <body>, используется во всех тэгах, находящихся внутри него (листинг 2.15, рис. 2.27 и 2.28).

Рис. 2.27. Тэг <body> установлен для стиля шрифта Times. Это наследуется тэгом <b>, который назначает шрифту красный (red) цвет и полужирное (bold) начертание. Тэг <i> наследует все эти стили и добавляет свой стиль – курсив (italic)

Листинг 2.15. Тэг <body> устанавливает стиль шрифта и цвет фона. Стиль шрифта наследуется тэгом <p>, так как тэг <body> является его родителем, но <p> меняет цвет фона. Тэг <i> наследует стили <body>, но также определяет собственный цвет фона (рис. 2.28)

<html> <head> <style type="text/css"> body {font: 16pt/20pt times, serif; color: red; background-color: #999999;} p {background-color: #cccccc;} i {background-color: #ffffff;} </style> </head>

Наследование родительских свойств

Некоторые свойства не наследуются тэгами, например поля (margins), ширина (width), границы (border). Вам не составит труда выяснить, какое свойство наследуется, а какое – нет. В приложении 2 перечислены все существующие свойства, и для каждого из них указано, может ли это свойство наследоваться.

Рис. 2.28. Как тэг <p>, так и тэг <i> наследуют цвет и тип шрифта от тэга <body>. Но светлосерый цвет фона, установленный в тэге <p>, перекрывает цвет, заданный в <body>. А белый цвет фона, указанный в тэге <i>, отменяет светло-серый

Листинг 2.15 (окончание)

<body> <p>She waited for some time without hearing anything more: at last came a rumbling ->of little cartwheels, and the sound of a good many voices all talking together: she ->made out the words:<i> 'Where's the other ladder&–Why, I hadn't to bring but one; ->Bill's got the other–Bill! Fetch it here,lad!–Here, put 'em up at this corner–No, ->tie 'em together first–they don't reach half high enough yet–Oh! They'll do well ->enough; don't be particular–Here, Bill! Catch hold of his rope–Will the roof bear?– ->Mind that loose slate–Oh,it's coming down! Heads below!'</i> (a loud crash)–'Now, ->who did that?–It was Bill, I fancy–Who's to go down the chimney?–Nay, I shan't! You ->do it!–That I won't, then! Bill's to go down–Here, Bill! The master says you're to ->go down the chimney!'</p> </body> </html>

6 8 Основы CSS

Управление существующими или наследованными значениями свойств Если переопределить селектор, он не потеряет наследованные свойства. Тэг, переопределенный с помощью CSS, также сохраняет свои свойства. Все они действуют до тех пор, пока не поменяются существующие специфические свойства, которые задают вид страницы (рис. 2.29). С помощью CSS можно переопределить тэг <b> таким образом, чтобы он увеличил размер шрифта и выделил текст курсивом: b{font-size:larger;font-style:italic;} Текст будет оформляться полужирным начертанием, хотя это и не предусмотрено в CSS-определении. Однако можно сделать так, что тэг <b> не станет делать текст полужирным. Для этого нужно изменить свойство ширины шрифта (font-weight): p ->b{font-weght:normal;} Когда тэг <b> находится внутри абзаца, его обычное действие не учитывается (листинг 2.16).

Рис. 2.29. По странному стечению обстоятельств светлый шрифт превратился в полужирный и наоборот

Управление существующими или наследованными значениями свойств 6 9 Листинг 2.16. Тэг <p> придает шрифту полужирное начертание только при том условии, что текст не находится внутри тэга <b>. В этом случае присущее тэгу <b> свойство делать шрифт полужирным и то же свойство, наследованное им от тэга <p>, перекрываются

<html> <head> <style type="text/css"> p { font-weight: bold; } p b { font-weight: normal; } .nobold { font-weight: normal; } </style> </head> <body> <h3>CHAPTER 7<br> A Mad Tea-Party</h3> <p>There was a table set out under a tree ->in frontt of the house, and the March ->Hare and the Hatter were having tea at ->it: a<b>Dormoise was sitting between ->them, fast asleep, and the other two ->were using it as a cushion, resting ->there elbows on it, and talking over ->its head.</b> 'Very uncomfortable for ->the Dormouse,' thought Alice; 'only, ->as it's asleep, I suppose it doesn't ->mind.'</p> <p>The table was a large one, but the ->three were all crowded togetherat one ->cornerof it: "No room!' they cried ->outwhen they saw Alice coming. 'There's -><i>plenty</i> of room!' said Alice ->indignantly, and she sat down in a ->large arm chair at one end of the ->table.</p> <p class="nobold">'Have some wine" the ->March Hare saidin an encouriging ->tone.</p> </body> </html>

Наследованные свойства (см. предыдущий раздел) можно отменить. Для этого нужно просто удалить свойство из списка определений тэга-потомка, списка стилей заголовка или конкретного тэга. Например, в листинге 2.16 класс .nobold можно применить к тэгу <p>, и определение начертания шрифта (в примере это полужирный шрифт) перекроется. При использовании Netscape вы не сможете удалить существующие значения. Их разрешается переопределить, но не перекрыть. Если вы установите в тэге <b> обычное начертание шрифта, Netscape все равно отобразит текст полужирным.

7 0 Основы CSS

Определение каскадного порядка Таблицы стилей внутри одной Web-страницы могут быть связанными, импортированными, встроенными и даже inline-таблицами. Во многих браузерах пользователи могут создавать собственные таблицы стилей и задействовать их поверх ваших. Естественно, что при применении двух или более таблиц стилей одновременно появится проблема выбора определения, которое имеет больший приоритет. Какое важнее? Разгадка кроется в самом названии каскадных таблиц стилей. Каскадный порядок в подобных ситуациях определяется по следующим правилам:

существование атрибута !important. Определению присваивается максимальный приоритет, если этот атрибут в нем присутствует (см. раздел «Значение !important»). Многие браузеры позволяют пользователю создавать собственные таблицы стилей. Теоретически, если и автор страницы, и посетитель включили в определение значение !important, то преимущество получит определение автора. Однако все браузеры, протестированные мною, отдают предпочтение стилям пользователя; источник правил. Таблица стилей автора страницы должна перекрывать таблицу стилей пользователя, если последний не включил атрибут !important. На самом деле браузеры скорее отдадут предпочтение таблицам стилей пользователя, а не Web-дизайнера;

Листинг 2.17. Файл global.css. В этой версии на сайте используется CSS, которая определяется по умолчанию, а для тэга <h3> назначается правило

h3 { color: blue; }

Листинг 2.18. HTML-файл index.html связан с внешним файлом global.css. Цвет текста определяется в <h3>, но перекрывается в тэге <style>. Цвет, установленный в <h3>, перекрывает все другие определения цвета (рис. 2.30)

<html> <head> <link rel="stylesheet" href="global.css"> <style type="text/css"> h3 { color: lime; } </style> </head> <body> <h3 style="color: red">CHAPTER 10<br> The Lobster Quadrille</h3> <p>The Mock Turtle sighed ->deeply...</p> </body> </html>

Определение каскадного порядка

Рис. 2.30. Текст внутри тэга <h3> должен сначала отображаться синим, а затем лимонным цветом. Но цвет данного текста – красный, так как именно он был определен последним

специфичность. Чем специфичней правило, тем выше его каскадный приоритет. Значит, чем больше в правиле HTML-селекторов, ID-селекторов или селекторов класса, тем оно важнее. При определении приоритета ID-селекторы получают 100 очков, классы – 10, а HTML-селекторы – всего одно очко. Следовательно, селекторы OL OL OL.cool приобретают вес 13 (то есть 1+1+1+10), а вес P равен единице. Такая установка приоритета может показаться странной, но она позволяет присвоить больший вес контекстным и ID-правилам и гарантирует их использование; последний выигрывает. CSS считает более приоритетным последнее из перечисленных правил. Это особенно полезно, если вы включаете определение в строку, чтобы перекрыть установки стилей, перечисленные в заголовке;

существующие или наследованные свойства. Любые стили либо являются наследованными, либо присущи тэгу с самого начала. И те, и другие применяются на практике. Воспользовавшись этими правилами в листингах 2.17 и 2.18, мы получаем результат, представленный на рис. 2.30.

7 2 Основы CSS

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

Настройка таблицы стилей для конкретной среды 1. Создайте две внешние таблицы стилей. Одна будет использоваться на экране компьютера, а другая – относиться к принтеру (см. раздел «Добавление CSS на Web-сайт»). В примере (листинг 2.19) текст на экране отображается белым цветом на черном фоне. Это, безусловно, выглядит хорошо. Но если вы захотите распечатать эту страницу, результат вам не понравится, к тому же значительно пострадает картридж принтера. Версия для печати (листинг 2.20) содержит, наоборот, черный текст на белом фоне (бумаги).

Рис. 2.31. То, что вы видите на экране, не похоже...

Рис. 2.32. ...на то, что распечатал принтер

Настройка CSS для печати Листинг 2.19. Таблица стилей screen.css определяет вид HTML-страницы, описанной в листинге 2.21, на экране

body { color:white; font-family: arial, helvetica, geneva, ->sans-serif; background: black url(alice23.gif) ->nî-repeat; word-spacing: 1px; position: relative; top: 200px; left: 165px; width: 480px; }

2. <linkrel="stylesheet"href="print.css" ->media="print"> В заголовке HTML-документа напишите тэг <link>, который ссылается на версию CSS для печати и присваивает свойству media значение "print" (листинг 2.21). 3. <linkrel="stylesheet"href="screen.css" ->media="screen"> Сразу после тэга <link> для печатной версии введите тот же тэг для версии на экране и присвойте media="screen".

h1,h2 { font:small-caps bold italic 2.5em ->'minion web Georgia','Times New ->Roman', Times, serif; } h2 { font-style: normal; font-variant: normal; font-size: 1.5em; } .dropCap { font: 300%/100% serif; color: #999999; }

Листинг 2.20. Таблица стилей print.css определяет вид HTML-страницы, описанной в листинге 2.21, после печати

body { color: black; font-size: 10pt; line-weight: 12pt; font-family: "Book Antiqua", "Times ->New Roman", Georgia, Times, serif; background: white no-repeat; text-align: justify; position: relative; top: 10px; left: 40px; width: 575px; }

Листинг 2.20 (окончание)

h1,h2 { color: black; font: italic small-caps bold ->2.5em "minion web", "Georgia", ->"Times New Roman", Times, serif; } h2 { color: black; font-style: normal; font-variant; font-size: 1.5em; } .dropCap { color: #999999; font: 300%/100% serif; }

7 4 Основы CSS К сожалению, Netscape 4 не поддерживает CSS, основанные на использовании различных сред (media-based CSS). Можно установить ссылку на Web-страницу, содержащую версию для печати, и применить другой CSS-файл, в котором эта версия описывается (см. «Отображение страницы на экране и при выводе на печать» в главе 22). Не забывайте о каскадном порядке стилей. Важно учитывать порядок, в котором CSSфайлы добавляются в документ. Если браузер не распознает значение свойства media, он использует обе таблицы стилей. Доступные в настоящее время типы сред, такие как устная (речь), Брайль (рельефные специальные шрифты для слепых), проекция изображения, не поддерживаются существующими версиями браузеров. Листинг 2.21. Таким образом, страница index.html ссылается на два различных CSS-файла. Один используется при выводе страницы на экран, другой – для печати. На рис. 2.31 представлен результат на экране компьютера, а на рис. 2.32 – та же страница после печати

<html> <head> <link rel="stylesheet" href="print.css" media="print"> <link rel="stylesheet" href="screen.css" media="screen"> </head> <body> <br> <h1>Alice's Adventures in Wonderland</h1> <h2>Lewis Carroll</h2> <p style="font-family: monospace;">THE MILLENIUM FULSCREEN EDITION 3.0</p> <h3>CHAPTER 1 <br>Down the Rabbit-Hole</h3> <p><span class="dropCap">A</span>lice was beginning to get ->very tired of sitting by her sister on the bank...</p> <p>So she was considering in her own mind...</P. <p>There was nothing so <i>very</i> remarkable in that...</p> </body> </html>

Комментарии в CSS Листинг 2.22. Чтобы добавить полезные замечания, можно использовать комментарии. Это никак не повлияет на работу программы

// Óñòàíàâëèâàåò îáùèé âèä òýãîâ code. code { font-family: monaco,courier,monospace; font-size: 10pt; line-height: 12pt; margin-left: 2em; } /*Óñòàíàâëèâàåò êîíêðåòíûé âèä òýãà: selector=HTML-òýãè, rule=CSS-ïðàâèëî, îïðåäåëÿþùåå âèä ñòðàíèöû, comment=êîììåíòàðèè â ýòîé CSS.*/ code.selector { color: #009900;} code.rule { color: #990099;} code.comment { color: #cc0000;}

Комментарии нельзя представлять в форме вложений.

Комментарии в CSS Как и в других частях HTML-документа, в CSS могут содержаться комментарии. Комментарий не влияет на программный код, он служит своего рода проводником для любого читающего вашу программу. Комментарии можно включать как в заголовок документа, так и во внешний CSSфайл (листинг 2.22). Формат комментария, который занимает только одну строку, немного отличается от обычного формата.

Вставка в таблицу стилей однострочного комментария 1. // Начните комментарий с двух слэшей (//). 2. Óñòàíàâëèâàåòîáùèéâèäòýãîâcode. Введите комментарий. В этом формате можно использовать буквы, цифры, любые символы, но нельзя переходить на следующую строку.

Вставка в таблицу стилей многострочного комментария Двойной слэш проще заметить при быстром просмотре документа. Следовательно, комментарии длиной в одну строку проще найти. К двойному можно добавить сколько угодно слэшей: //////Êîììåíòàðèé!

1. /* Начните комментарий со слэша (/) и звездочки (*). 2. tag=HTML-òýãè. Введите комментарий. Здесь можно использовать любые буквы, цифры, символы, а также переходить на другую строку (клавиша Enter или Return). 3. */ Закройте комментарий, написав звездочку и слэш.

7 6 Основы CSS

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

стили лучше помещать во внешние таблицы стилей всегда, когда это возможно (см. раздел «Добавление CSS на Web-сайт»); достоинством CSS является то, что их легко поместить в одном конкретном месте и оттуда менять весь сайт (рис. 2.33); на верхнем уровне сайта можно определить таблицу global.css, которая по умолчанию будет применяться ко всему сайту. Это очень удобно, если, например, необходимо, чтобы все заголовки первого уровня имели один и тот же шрифт и размер (рис. 2.34); с помощью таблицы стилей section.css улучшают стили на подуровнях. Таким образом, каждый раздел можно менять или добавлять в глобальную таблицу стилей. Например, вы установили тип и размер шрифта в глобальной таблице стилей для заголовков первого уровня, но хотите поменять цвет заголовков в разделе. С помощью таблицы section.css допустимо установить цвет для каждого раздела в отдельности;

Рис. 2.33. Обычная структура связанного файла, которая позволяет различным HTML-страницам применять глобальную CSS и прикреплять стили к конкретным разделам с помощью section.css. Заметьте, что оба раздела используют один файл section.css, а не два разных – section1.css и section2.css. Это позволяет перемещать HTML-файлы из раздела в раздел, не меняя URL, служащий для связывания с документом или при импортировании

Стратегия создания таблиц стилей

Рис. 2.34. На диаграмме показано, как различные HTML-файлы можно связать с соответствующими CSS-файлами. Файл global.css связан со всеми тремя файлами, а с каждым конкретным связан section.css

для различных целей лучше использовать разные файлы CSS. Если вы разместите все CSS в одном файле, он будет огромным и его загрузка займет гораздо больше времени, чем загрузка отдельных файлов. Лучше разбить CSS на несколько файлов и импортировать их на каждую страницу только при необходимости; следует располагать стили в тэге <head> после JavaScript. Несмотря на то что тэг <style>...</style> можно поместить в любой части заголовка документа, лучше отвести для него определенное место: так его будет проще найти. Я обычно помещаю его в конце. Но где бы вы ни написали этот тэг, будьте последовательны, не меняйте его местоположение от файла к файлу; лучше не использовать стили в тэгах без особой на то причины. Достоинством CSS является то, что стили можно применять сразу к нескольким тэгам и менять сразу на всем сайте. Если определить стиль непосредственно в тэге, этот плюс исчезнет.

управление шрифтом

Рис. 3.1. На сайте www.typographic.rsub.com можно многое узнать об оформлении

Рис. 3.2. Сайт www.studiomotiv.com/counterspace оформлен при помощи Flash. Здесь также представлена информация о различных эффектах

Оформление – один из самых мощных способов донести идеи создателя сайта до посетителя. Правильно оформленный текст (заголовки, смысловые выделения, подбор цветов) позволяет читателю не только получить эстетическое удовольствие, но и быстрее разобраться в содержании сайта. Шрифт – неотъемлемая часть любого документа. Такие эффекты, как курсивное или полужирное начертание, позволяют дизайнерам выделить важные места в документе и обратить на них внимание посетителя (рис. 3.1 и 3.2). На Web-страницах с помощью CSS можно не просто менять тип шрифта или придавать ему полужирное или курсивное начертание, как в случае с HTML-тэгами. Таблицы стилей позволяют задавать общий тип шрифта, устанавливать различную толщину букв, тип курсива и размер шрифта, используя стандартные обозначения, заимствованные из области книгопечатания.

Оформление в Web

Оформление в Web Семейство шрифтов (font family) – это набор шрифтов с похожими характеристиками. В Web существует пять основных типов шрифта (рис. 3.3):

Рис. 3.3. Некоторые типы шрифта

Cursive. Курсив имитирует письмо от руки, его лучше всего использовать для украшения текста или смысловых выделений. Большие же объемы текста, набранные курсивом, сложно читать; Fantasy. Шрифты, служащие для украшения и не входящие ни в одну из перечисленных категорий, называются шрифтами fantasy. Они весьма декоративны, а шрифт Dingbats представляет собой простые картинки или иконки. Как и курсив, их лучше всего использовать в качестве украшений. Однако не следует увлекаться шрифтами fantasy, даже если вы хотите усилить впечатление, производимое вашей страницей на посетителя.

Serif. На концах линий, составляющих буквы, есть маленькие черточки (засечки). Засечки – наследие тех времен, когда для письма использовались перья. Такое написание позволяло выделять отдельные буквы. Этот тип шрифта подходит для представления текстов большего кегля или для текстов, набранных маленьким кеглем и предназначенных для распечатки. На экране буквы будут неясными, если размер шрифта маленький; Sans-serif. Буквы данного семейства шрифтов не имеют засечек. И хотя символы sans-serif менее отчетливы, они больше подходят для текстов, отображаемых на экране и набранных шрифтом меньшего размера; Monospace. Все символы этого типа шрифта одинаковы по ширине. Например, в других шрифтах строчная буква «l» занимает в строке гораздо меньше места, чем заглавная «M». Но в моноширинном шрифте увеличивается межсимвольный интервал справа и слева от этой буквы (стоит отметить, что данный интервал является частью буквы и неотделим от нее), и, таким образом, она занимает столько же места, сколько и буква M. Шрифт этого типа идеально подходит для текстов, в которых важна каждая буква (при этом не обязательно быстро их читать), например для программного кода, опечатки в котором могут привести к серьезным ошибкам;

80 Управление шрифтом

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

HTML-текст. Текст, который вы набираете в HTML-документе, практически ничем не отличается от текста, набранного в любом текстовом редакторе. Но у HTML-текста есть свои преимущества. Во-первых, его проще редактировать. Во-вторых, HTML-текст «подстраивается» под ширину экрана. Однако возможности этого типа текста несколько ограничены. В большинстве случаев текстом управляет браузер посетителя страницы. Например, вы не можете расположить текст вертикально. Более того, браузер посетителя часто имеет ограниченное число шрифтов (см. далее раздел «Шрифты в браузере»). Если вы выбрали для представления текста какой-либо шрифт, это не означает, что любой посетитель вашей страницы увидит текст именно таким. С помощью CSS дизайнеры могут лучше управлять текстовыми элементами (например, строками и межсимвольным интервалом). Но даже в этом случае возможности HTML-текста ограничены, особенно в отношении спецэффектов. Поэтому дизайнеры предпочитают использовать текст в графическом представлении; графический текст. В отличие от HTMLтекста, графический текст представляет собой графическое изображение (GIF или JPEG), элементами которого является

текст. Это значит, что вы можете использовать любой шрифт независимо от того, есть ли он на компьютере посетителя страницы. Но и у такого формата есть свои недостатки. Графический файл имеет большой размер и медленнее загружается, а текст сложно редактировать. Изображение с фиксированными размерами может просто не поместиться на экране посетителя; векторный текст. Этот формат сочетает в себе лучшие свойства предыдущих. Векторный текст легко редактировать, он «подстраивается» под размеры экрана, что делает его похожим на HTMLтекст. Здесь, как и в графическом формате, можно применять спецэффекты (правда, есть небольшие ограничения) и использовать любой шрифт. В настоящее время поместить векторный текст на сайт позволяет только Macromedia Flash. W3C разрабатывает новые стандарты, с помощью которых Web-дизайнеры смогут работать с векторным текстом (и графикой) так же просто, как и с HTML-текстом. Ожидается появление нового формата – масштабируемой векторной графики (SVG). В настоящее время этот формат является стандартом W3C, его рекламирует главный разработчик SVG, Adobe Systems Inc. Несмотря на то что SVG позволяет, подобно Flash, использовать встроенную в HTML-документ векторную графику, для представления на экране данный формат использует специальный модуль расширения браузера (plug-in). Так как модуль расширения для отображения Flash распространяется уже три года, сами можете догадаться, что предпочтут пользователи.

Установка шрифта

Установка шрифта Удобочитаемость текста в значительной степени зависит от применяемого типа шрифта. Некоторые шрифты воспринимаются лучше при чтении с экрана, другие – когда текст напечатан на бумаге. Выбирая определенный шрифт, вы можете повлиять на восприятие посетителем вашей страницы. В примере (листинг 3.1 и рис. 3.4) заголовок первого уровня набран шрифтом Times.

Определение типа шрифта Рис. 3.4. Шрифт, определенный для заголовка, подзаголовка и текста, перекрывает настройки браузера, использующиеся по умолчанию

1. font-family: Введите название свойства и поставьте двоеточие. 2. times Укажите название шрифта, который будете использовать.

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

<html> <head> <style type="text/css"> h1 {font-family: times, "Times New Roman", palatino, serif;} h3 {font-family: "Courier New", Courier, Monaco, monospace;} .copy {font-family: Arial, Helvetica, Geneva, sans serif; } </style> </head> <body> <hr> <h1>ALICE'S ADVENTURES IN WONDERLAND </h1> <h3>Lewis Carroll</h3> <hr> <h3>CHAPTER 1<br> Down the Rabbit-Hole</h3> <p class="copy">Alice was beginning...</p> <p class="copy">So she was considering...</p> <p class="copy">There was nothing...</p> </body> </html>

82 Управление шрифтом 3. ,"TimesNewRoman",palatino Вы можете написать несколько типов шрифтов через запятую. 4. ,serif; После последней запятой укажите семейство шрифтов, к которому относится используемый шрифт. В табл. 3.1 перечислены значения, общие для всех типов шрифтов. Хотя данные значения применять необязательно, не стоит о них забывать. Из всех перечисленных в списке шрифтов браузер выбирает первый. Если этот тип шрифта ему не доступен, браузер просматривает список далее до тех пор, пока не найдет шрифт, имеющийся на компьютере пользователя. Если в списке нет подходящего шрифта, используется шрифт, установленный в браузере посетителя по умолчанию. Если вы определите семейство шрифта, браузер найдет максимально похожий шрифт, даже когда конкретные шрифты из списка не доступны (например, при определении семейства serif будет использоваться шрифт без засечек). Далее в разделе «Шрифты в браузере» перечислены шрифты, которые обычно доступны в браузерах.

Таблица 3.1. Значения типов шрифтов Значение

Совместимость

<family-name>

IE3, N4, CSS1

<generic-family>

IE3, N4, CSS1

Serif

IE3, N4, CSS1

sans-serif

IE3*, N4, CSS1

cursive

IE4, N4, CSS1

fantasy

IE4, N4, CSS1

monospace

IE4, N4, CSS1

* IE4 для MacOS.

CSS или тэг <font> Обычно шрифт устанавливается с помощью тэга <font> (например, <font face="arial,helvetica">...</font>). Вероятно, этот способ скоро выйдет из употребления; так как в последних версиях HTML, соответствующих стандартам W3C, тэг <font> отсутствует, его рекомендуется заменять CSS. Основные проблемы, возникающие при использовании тэга <font>, заключаются в следующем:

Названия шрифтов, состоящие из нескольких слов, нужно заключать в кавычки (например, "New York").

Теоретически Internet Explorer и Netscape позволяют загружать на компьютер посетителя конкретный шрифт, который затем определяется с помощью свойства family-name. Более подробно об этом рассказано в следующем разделе.

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

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

Загрузка шрифтов Листинг 3.2. При использовании директивы @font-face определяется название и местоположение шрифта, который будет загружаться на компьютер пользователя

<html> <head> <style type="text/css"> @font-face {font-family: Garamond; ->src: url(Garamond.eot); } h2 {font-family: Garamond, "Times ->New Roman", Georgia, Times, ->serif; } </style> </head> <body> <h2>Chapter 8<br>The Queen's Croquet->Ground</h2> <p class="copy">A large rose-tree...</p> </body> <html>

Рис. 3.5. Текст набран шрифтом Garamond, который не был установлен на компьютере пользователя и поэтому был загружен так же, как и картинки

Загрузка шрифтов Несомненным достоинством Internet является загрузка шрифтов. Вместо того чтобы рассчитывать на ограниченное количество шрифтов браузера или создавать графические изображения с использованием нужного шрифта, можно автоматически загрузить шрифт на компьютер пользователя. CSS второго уровня предоставляет такую возможность. В рассматриваемом примере (листинг 3.2 и рис. 3.5) загружается шрифт Garamond, который затем применяется в заголовке второго уровня.

Загрузка требуемого шрифта 1. @font-face{ Напишите @font-face. 2. font-family:Garamond; Введите font-family и название шрифта. 3. scr:url(Garamond.eot);} Укажите путь к файлу, содержащему шрифт. 4. h2 {font-family: Garamond, "Times New Roman",Georgia,Times,serif;} Создайте ссылку на шрифт, описанный в шаге 2. Рекомендуется включать в список другие альтернативные шрифты на случай, если нужный шрифт не загрузится.

84 Управление шрифтом Невозможно загрузить файл шрифтов старого формата. Шрифты нужно специальным образом обрабатывать, и этот процесс протекает по-разному в Internet Explorer и Netscape. Протестировав Netscape 4, я пришел к выводу, что если файл со шрифтом не загрузился, то браузер игнорирует остальные шрифты в списке и использует тот шрифт, который установлен в нем по умолчанию.

Где же шрифты? Часто при загрузке шрифтов возникают следующие проблемы:

многие шрифты не являются бесплатными. Создатели шрифтов обеспокоены тем, что они не получают компенсации за распространение их шрифтов в Web. Это значит, что посетители загружают шрифты, а потом пользуются ими совершенно бесплатно; шрифты Windows и Mac несовместимы между собой. Для каждой из платформ нужно включать отдельную версию; файлы со шрифтами бывают большими, и их загрузка может занять некоторое время.

Netscape и Internet Explorer предложили решение перечисленных проблем. Шрифт нельзя загрузить, как графическое изображение. Необходимо сначала обработать его для Web. К сожалению, Microsoft и Netscape предложили несовместимые друг с другом, сложные системы для создания подобных шрифтов. При работе с Internet Explorer вам придется перевести шрифты в формат EOT. Для этого служит программа WEFT (www.microsoft.com/typography/web/embedding/ weft2/), которая работает только под Windows. А при использовании Netscape вам потребуется перевести шрифты в формат TrueDoc (www.truedoc.com), для чего придется купить программу, выпущенную Bitstream Inc. По утверждениям представителей Bitstream, этот формат работает, хотя и нестабильно, как в Netscape, так и в Internet Explorer. Итак, придется использовать шрифты браузера до тех пор, пока не будут созданы шрифты, совместимые со всеми браузерами и платформами, и при этом их загрузка не займет много времени.

Шрифты в браузере Таблица 3.2. Шрифты в системе Mac Название шрифта

Поддерживаемые стили

Apple Chancery* Capitals* Charcoal Chicago Courier

Полужирный, полужирный курсив, курсив

Gadget* Geneva Helvetica

Полужирный, полужирный курсив, курсив

Hoefler Text*

Полужирный, полужирный курсив, курсив

Monaco New York Palatino

Полужирный, полужирный курсив, курсив

Sand* Skia* Symbol Techno* Textile* Times

Полужирный, полужирный курсив, курсив

* Для MacOS 8.5 и выше.

Шрифты в браузере В настоящее время в Internet используется всего два шрифта: Helvetica и Times. Такая ситуация вполне объяснима: эти шрифты или их варианты установлены на каждом компьютере. Безусловно, указанные шрифты весьма удобны. Но ведь существуют и другие. Однако в Web применяется Times для шрифтов serif и Helvetica/Arial для шрифтов sans-serif, и все страницы выглядят одинаково. Чем же можно их заменить? Все зависит от компьютера посетителя вашего сайта. На компьютерах Mac и Windows изначально присутствуют определенные стандартные шрифты. Также несколько обычных шрифтов включено в Internet Explorer, который имеется почти на всех компьютерах. Шрифты, установленные в браузерах по умолчанию, представлены в табл. 3.2–3.4. Итак, в действительности браузер располагает не только шрифтами Helvetica и Times, но и множеством других. Все они перечислены в приложении 4; там же показано, как они выглядят.

86 Управление шрифтом Таблица 3.3. Шрифты в системе Windows Название шрифта

Поддерживаемые стили

Abadi MT Condensed Light*

Таблица 3.4. Шрифты в Internet Explorer (Windows/Mac) Название шрифта

Поддерживаемые стили

Andale Mono

Arial Black*

Полужирный, полужирный курсив, курсив

Arial Black Comic Sans MS

Полужирный

Book Antiqua*

Полужирный, полужирный курсив, курсив

Georgia*

Полужирный, полужирный курсив, курсив

Calisto MT*

Полужирный, курсив

Centure Gothic*

Полужирный, полужирный курсив, курсив

Impact Minion Web*

Полужирный, курсив

Trebuchet MS*

Полужирный, полужирный курсив, курсив

Copperplate Gothic Bold

Verdana

Полужирный, полужирный курсив, курсив

Copperplate Gothic Light

Webdings*

Comic Sans MS*

Courier New

Полужирный

Полужирный, полужирный курсив, курсив

* Для IE5 и IE6.

Lucid Console* Lucida Handwriting Italic* Lucida Sans Unicode*

Курсив

New Gothic MT*

Полужирный, курсив

OCR A Extended* Symbol Tahoma*

Полужирный

Times New Roman

Полужирный, полужирный курсив, курсив

Verdana*

Полужирный, полужирный курсив, курсив

Webdings* Wingdings * Для Windows 98 и выше.

Internet Explorer устанавливает эти шрифты, поэтому они могут быть недоступны пользователям Netscape. Но поскольку на многих компьютерах изначально имеется IE, весьма вероятно, что данные шрифты на компьютере присутствуют.

Размер шрифта

Размер шрифта Рис. 3.6. Размеры шрифта

Листинг 3.3. Размер шрифта устанавливается в классе copy. Текст, заключенный в тэг <blockquote>, печатается с отступом 2em. Размер заголовка третьего уровня больше, чем размер основного текста, установленный браузером по умолчанию

<html> <head> <style type="text/css"> .copy { font-size: 12px; } blockquote { font-size: 2em; } h3 {font-size: large; } </style> </head> <body> <h3>CHAPTER 2<br> The Pool of Tears</h3> <p class="copy">"Curiouser and ->curiouser!'...<p> <blockquote> ALICE'S RIGHT FOOT, ESQ.<br> HEARTHRUG,<br> NEAR THE FENDER,<br> (WITH ALICE'S LOVE). </blockquote> </body> </html>

В HTML есть семь различных размеров шрифта, но все они связаны с размером, установленным по умолчанию посетителем страницы. С помощью CSS можно изменять размер текста на экране несколькими способами, включая традиционное изменение размера в точках, проценты, абсолютный размер и даже размер, зависящий от окружающего текста. На рис. 3.6 показано, как выглядит на экране текст разного размера. В рассматриваемом примере (листинг 3.3 и рис. 3.7) используется класс copy, в котором определяется шрифт размером 12 пунктов. Этим шрифтом затем печатается весь текст документа.

Рис. 3.7. Шрифт определенного размера помогает выделить текст. Размер заголовков обычно больше, чем размер текста, но к некоторым из них нужно привлечь особое внимание

88 Управление шрифтом

Определение размера шрифта 1. font-size: Введите font-size и поставьте двоеточие. 2. 12px; Укажите размер шрифта одним из следующих способов: – в единицах длины (измеряется в пунктах); – используя абсолютное выражение, например xx-small, x-small, small, medium, large, x-large, xx-large; – smaller или larger описывает размер по отношению к размеру родительского элемента (см. раздел «Наследование родительских свойств» в главе 2); – в процентах, определяющих размер шрифта пропорционально размеру шрифта родительского элемента (например, 75%). В табл. 3.5 перечислены возможные значения размера шрифта и браузеры, работающие с этими значениями. Максимальный размер шрифта зависит от компьютера пользователя. Однако лучше не устанавливать размер больше, чем 50 пунктов. Не старайтесь использовать в HTML шрифты только маленького размера. CSS позволяет создавать заголовки, состоящие из больших букв, и это не повлияет на скорость загрузки текста.

Таблица 3.5. Возможные значения свойства font-size Значение

Совместимость

IE4, N4, CSS1

IE4, N4, CSS1

smaller

IE4, N4, CSS1

larger

IE4, N4, CSS1

xx-small

IE4, N4, CSS1

x-small

IE4, N4, CSS1

small

IE4, N4, CSS1

medium

IE4, N4, CSS1

large

IE4, N4, CSS1

x-large

IE4, N4, CSS1

xx-large

IE4, N4, CSS1

Пикселы и пункты Аббревиатура pt обозначает пункт. Это один из способов указания размера шрифта. Обычно используется шрифт 12pt, который удобен для большинства читателей. Как правило, размер шрифта определяется с помощью pt. Но размер пунктов зависит от используемой операционной системы. Например, в Windows текст размером 12pt выглядит большим, чем тот же текст в Mac. Я использую pt для определения размера шрифта в тех случаях, когда создаю версию для печати. Гораздо лучше измерять шрифт в пикселах (px). Пикселы не всегда надежны, но результат их использования более точен. Между пикселами и пунктами не существует взаимно однозначного соответствия, но можно считать, что размер 12px примерно совпадает с 12pt.

Курсив

Курсив Рис. 3.8. Курсивное и наклонное начертание Листинг 3.4. Текст внутри тэга <blockquote> и текст в классе booktitle выделяются курсивом, а текст внутри тэга <i> остается обычным

<html> <head> <style type="text/css"> .booktitle, blockquote p { font-style: ->italic; } i { font-style: normal; } </style> </head> <body> <h1>An excert from <span ->class="booktitle">Alice in ->Wonderland</span></h1> <p><i>How doth the little–</i>&quot;' and ->she crossed her hands on her lap...</p> <blockquote> <p>'How doth the little crocodile</p> <p>Improve his shining tail,</p> </blockquote> </body> </html>

Рис. 3.9. Название книги и цитата выделены курсивом

Часто путают два типа стилей – курсив (italic) и наклонный (oblique). Курсивом называется более декоративный тип шрифта с наклоном вправо. Наклонный шрифт представляет собой обычный шрифт, без каких-либо стилизованных «рукописных» украшений, с небольшим наклоном (рис. 3.8). С помощью элемента font-style можно выделить текст курсивом, сделать шрифт наклонным или оставить его начертание обычным (normal). Если установлен курсив, но данный тип шрифта не имеет такого свойства, текст автоматически становится наклонным. В приведенном примере (листинг 3.4 и рис. 3.9) курсив определяется в классе booktitle, поэтому данным начертанием выделяется весь текст документа. В то же время тэг <i> оставляет текст, размещенный внутри него, обычным.

90 Управление шрифтом

Установка стиля шрифта в HTML-тэге 1. font-style: Введите имя свойства font-style и поставьте двоеточие. 2. italic; Чтобы определить стиль шрифта в свойстве font-style, используйте следующие значения (табл. 3.6): – italic. Текст выделяется курсивом; – oblique. Текст наклоняется вправо; – normal. Этот атрибут отменяет все другие.

Многие Web-дизайнеры подчеркивают слова, чтобы привлечь к ним внимание. Но лучше выделять текст курсивом или делать его наклонным, так как подчеркивание загромождает страницу. К тому же такой текст можно перепутать со ссылкой. Текст, выделенный курсивом, обычно занимает меньше места, чем обычный текст (roman). Поэтому курсив можно использовать в целях экономии места. Однако следует учесть, что читать выделенный курсивом текст, который набран при этом шрифтом маленького размера, довольно трудно.

Таблица 3.6. Возможные значения свойства font-style Значение

Совместимость

normal

IE4, N4, CSS1

italic

IE4, N4, CSS1

oblique

IE4, N6, CSS1

Толщина шрифта

Толщина шрифта Рис. 3.10. Разница между обычным и полужирным шрифтом очевидна

В стандартном HTML шрифт может быть либо полужирным, либо обычным. CSS позволяет установить несколько уровней «жирности» шрифта, используя способность многих шрифтов иметь различную толщину (рис. 3.10). В рассматриваемом примере (листинг 3.5 и рис. 3.11) создается класс bolder, который делает линии шрифта толще.

Рис. 3.11. Весь текст, кроме текста внутри тэга <i>, выделен полужирным шрифтом Листинг 3.5. Класс bolder используется для выделения текста полужирным шрифтом. Тэг <i> внутри абзаца оставляет начертание обычным

<html> <head> <style type="text/css"> .bolder { font-weight: bolder; } p i { font-weight: normal; } </style> </head> <body> <b>More from <i>Alice in Wonderland</i></b> <p><span class="bolder">'I wish I hadn't cried so much!'...</span></p> <p><span class="bolder">Just then she heard<i>something</i> ->splashing about in the pool a little way off...</span></p> <p><span class="bolder">'Would it be of any use,now,'</span></p> <p><span class="bolder">'Perhaps it doesn't understand English,'</span></p> <p><span class="bolder">'Not like cats!'</span></p> </body> </html>

92 Управление шрифтом

Выделение текста полужирным шрифтом 1. font-weight: Введите свойство font-weight и поставьте двоеточие. 2. bolder; Укажите толщину шрифта в свойстве font-weight при помощи следующих значений (табл. 3.7): – bold. Текст выделяется полужирным; – bolder или lighter. Увеличивается толщина шрифта по сравнению с родительским элементом; – значение от 100 до 900 с шагом 100 увеличивает толщину шрифта, основываясь на разных доступных версиях шрифта; – normal. Этот атрибут перекрывает все другие.

Таблица 3.7. Возможные значения свойства font-weight Значение

Совместимость

normal

IE4, N4, CSS1

bold

IE3, N4, CSS1

lighter

IE3, N6, CSS1

bolder

IE3, N6, CSS1

100-900

IE4*, N4*, CSS1

* Зависит от доступной толщины шрифта.

Рис. 3.12. Все буквы заглавные, но первая – больше остальных

Не увлекайтесь использованием свойства font-weight для выделения важных мест в тексте. Вы не добьетесь нужного эффекта, если весь текст будет выделен полужирным.

Численные значения толщины шрифта.

Создание minicaps Minicaps применяется для выделения заголовков. С помощью minicap строчные буквы переводятся в заглавные, размер которых меньше, чем у обычных прописных букв (рис. 3.12). В приведенном ниже примере (листинг 3.6 и рис. 3.13) тэг <h2> используется для выделения названия книги с помощью minicaps.

Не все шрифты имеют девять разновидностей толщины. Если вы определите невозможное значение font-weight, вместо него будет использоваться другое, которое выбирается по следующему правилу:

от 100 до 300. Применяется соседнее доступное значение толщины; 400 и 500 взаимозаменяемы; от 600 до 900. Используется соседнее доступное значение толщины.

Создание minicaps Листинг 3.6. Тэг заголовка второго уровня отображает текст маленькими заглавными буквами (small caps)

<html> <head> <style type="text/css"> h2 { font-variant: small-caps; } </style> </head. <body> <h2>Chapter 3<br> A Caucus-Race and a Long Tale</h2> <p>They were indeed a queer-looking ->party...</p> <p>The first question of course was, ->how to get dry again...</p> <p>At last the Mouse...</p> <p>'Ahem!' said the Mouse...</p> <p>'Ugh!' said the Lory, with a ->shiver.</p> <p>'I beg your pardon!'...</p> <p>'Not I!' said the Lory hastily.</p> </body> </html>

Создание правила для minicaps 1. font-variant: Введите свойство font-variant и поставьте двоеточие. 2. small-caps; Укажите значение свойства font-variant, выбрав его из следующих величин (табл. 3.8): – small-caps. Строчные буквы преобразуются в заглавные, размер которых меньше, чем размер обычных прописных букв; – normal. Этот атрибут перекрывает все остальные наследованные значения font-variant. Minicaps лучше всего подходит для заголовков или подобных элементов страницы. Текст меньшего размера, набранный с помощью этого стиля, трудно читать.

Таблица 3.8. Возможные значения свойства font-variant Рис. 3.13. Созданный с помощью minicaps заголовок выглядит элегантно и отличается от остального текста

Значение

Совместимость

normal

IE4, N6, CSS1

small-caps

IE4, N6, CSS1

94 Управление шрифтом

Определение нескольких значений шрифта одновременно Свойства шрифта можно определять независимо, но лучше записать все элементы шрифта в одном определении, используя свойство font. В рассматриваемом примере (листинг 3.7 и рис. 3.14) определяется заголовок первого уровня и класс copy, который затем применяется к абзацам в тексте. С помощью специального стиля описывается тэг заголовка третьего уровня (см. раздел «Использование стилей посетителя»).

Рис. 3.14. Все свойства шрифта (а также высоту строки) допускается устанавливать в одном определении. Можно также указать для страницы использование стилей, заданных посетителем

Листинг 3.7. Различные стили для тэга <h1> и класса copy устанавливаются одновременно, а в тэге <h3> используется стиль caption

<html> <head> <style type="text/css"> h1 { font: italic small-caps bold 26px/ ->32px "minion web","Times New Roman", ->Times, serif; } h3 { font: caption; } .copy {font: 10px/20px Arial, Helvetica, ->Geneva, sans-serif;} </style> </head. <body> <hr> <h1>Alice's Adventures in<br> Wonderland<h1> <h3>Lewis Carroll</h3> <hr> <h3>Chapter 1<br> Down the Rabbit-Hole</h3> <p class="copy">Alice was beginning... -></p> <p class="copy>So she was ->considering...</p> <p class="copy">There was nothing so -><i>very</i>...</p> </body> </html>

Определение нескольких значений шрифта одновременно Таблица 3.9. Возможные значения свойства font Значение

Совместимость

<font-family>

IE4, N4, CSS1

<font-style>

IE4, N4, CSS1

<font-variant>

IE4, N4, CSS1

<font-weight>

IE4, N4, CSS1

<font-size>

IE4, N4, CSS1

<font-height>

IE4, N4, CSS1

<visitor-style>

IE5, N6, CSS1

Использование стилей посетителя Было бы удобно, если бы стили шрифта, которые использует посетитель страницы, совпадали с вашими стилями. Этого можно добиться при работе с Internet Explorer 5/6 и Netscape 6, определив стиль шрифта с помощью ключевых слов (например, font: icon;):

Caption используется для написания текста на кнопках; Icon применяется для текста на иконках; Menu выводится в выплывающих меню и списках меню; Message-box применяется в диалоговых окнах; Small-Caption удобен для подписей под элементами управления; Status-bar задействуется в строке состояния.

Определение в правиле нескольких атрибутов 1. font: Введите свойство font и поставьте двоеточие. Затем укажите значения в следующем порядке (табл. 3.9). 2. italic Укажите значение font-style и нажмите клавишу пробела (см. раздел «Курсив»). 3. small-caps Определите значение font-variant и нажмите клавишу пробела (см. раздел «Создание minicaps»). 4. bold Укажите значение font-weight и нажмите клавишу пробела (см. раздел «Толщина шрифта»). 5. 26px Введите значение font-size (см. раздел «Размер шрифта»). 6. /32px Напишите прямой слэш (/), значение line-height и нажмите клавишу пробела (см. раздел «Межстрочные интервалы» в главе 4). 7. "minion web", "Times New Roman", Times, serif Укажите значение font-family (см. раздел «Установка шрифта»). Если вы не хотите определять какой-либо атрибут, просто не включайте его в список. Вместо него браузер воспользуется значением, установленным по умолчанию. Определение атрибутов шрифта помогает сэкономить время. WYSIWYG-программы, такие как GoLive и Dreamweaver, обычно используют отдельные атрибуты по умолчанию.

управление текстом

Текст окружает нас повсюду. Мы используем буквы и для того, чтобы написать меню, и для того, чтобы сочинить оду. Это лучший способ, изобретенный человечеством для выражения собственных мыслей. Многие думают, что текст – просто способ записи слов. Однако текст можно по-разному оформить: изменить форму и размер букв (шрифта), расстояние между словами, строками и абзацами. В Internet оформление используется для представления текста на экране, выделения смысловых блоков и создания визуальных образов. К сожалению, многие из задач, которые решаются в Web с помощью оформления текста, возникли в результате попыток обойти ограничения этой среды. В данной главе рассказывается, как отображать текст с помощью CSS, сделать его удобочитаемым и стильно оформленным.

Кернинг Листинг 4.1. В слове «stretching» буквы разделены пробелами

<html> <head> <style type="text/css"> .stretch { letter-spacing: 2em; } </style> </head> <body> An enormous puppy was looking down at ->her with large round eyes, and feebly -><span class="stretch">stretching -></span>out one paw, trying to touch ->her. 'Poor little thing!' said Alice, ->in a coaxing tone, and she tried hard ->to whistle to it; but she was terribly ->frightened all the time at the thought ->that it might be hungry, in which case ->it would be very likely to eat her up ->in spite of all her coaxing. </body> </html>

Рис. 4.1. Результат применения класса stretch Таблица 4.1. Возможные значения свойства letter-spacing Значение

Совместимость

normal

IE4*, N6, CSS1

IE4*, N6, CSS1

* Только в Mac OS, в Windows недоступно.

Кернинг Понятие кернинг используется для определения расстояния между буквами в слове. Увеличение этого расстояния повышает читабельность текста. С другой стороны, слишком большое расстояние между буквами в слове мешает воспринимать текст, так как слова становится труднее отличить друг от друга. В приведенном ниже примере (листинг 4.1 и рис. 4.1) увеличено расстояние между буквами в слове «stretching» (вытягивание).

Определение кернинга 1. letter-spacing: Напишите letter-spacing в списке CSSопределений и поставьте двоеточие. 2. 2em; Укажите значение свойства letter-spacing (табл. 4.1): – длину, например 2em. Таким образом устанавливается постоянная величина межсимвольного интервала; – normal. Этот атрибут перекрывает все другие наследованные атрибуты. Положительное значение letter-spacing увеличивает обычное расстояние между буквами, а отрицательное – уменьшает. Значение, равное нулю, не изменяет расстояние между буквами, но при его использовании исчезает выравнивание текста (см. раздел «Выравнивание текста по правому, левому краю и по центру» далее в этой главе).

98 Управление текстом

Интервал между словами Подобно кернингу, интервалы между словами (word spacing) могут как улучшать, так и ухудшать восприятие текста. Текст, в котором между словами небольшие пробелы, легче читать. Однако если пробелы слишком велики, чтение значительно затрудняется. В рассматриваемом примере (листинг 4.2 и рис. 4.2) некоторые слова стоят слишком близко друг к другу, а другие разделены большими пробелами.

Рис. 4.2. Интервалы между словами слегка увеличены, чтобы облегчить восприятие текста. Но слова в нижней части экрана сдвинуты друг к другу, что мешает чтению

Листинг 4.2. Чтобы разделить слова (и буквы) пробелами, следует определить класс. В тэге <p> используется отрицательное значение, поэтому текст сжимается. В тэге <p> класса copy, наоборот, вводится положительное значение, что перекрывает предыдущие установки

<html> <head> <style type="text/css"> .title { word-spacing: 8px; letter-spacing: 4px; } p { word-spacing: -8px; } p.copy { word-spacing: 4px; letter-spacing: 1px; } </style> </head> <body> Yet more<span class"title>Alice in ->Wonderland</span> <p>'We indeed!' cried the Mouse, who ->was trembling down to the end of his ->tail. 'As if I would talk on such a ->subject! Our family always <i>hated -></i> cats: nasty,low, vulgar things! ->Don't let me hear the name ->again!'</p> <p class="copy">'I won't indeed!' said ->Alice...</p> <p>So she called softly after it...</p> <p>It was high time to go...</p> </body> </html>

Межстрочные интервалы Таблица 4.2. Возможные значения свойства word-spacing Значение

Совместимость

normal

IE4*, N6, CSS1

IE4*, N6, CSS1

* Только в MacOS, в Windows недоступно.

Листинг 4.3. В тексте, расположенном внутри класса copy, двойной интервал между строками, а внутри тэга <cite> – интервал меньше обычного

<html> <head> <style class="text/css"> .copy { line-height: 2; font-size: 12px; } p.cite { line-height: 14px; font-size: 12px; } </style> </head> <body> <p class="copy">After a time she heard ->a little pattering of...</p> <p><cite>Alice took up the fan and ->gloves...</cite></p> <p class="copy">"I'm sure I'm not ->Ada...</p> </body> </html>

Определение интервалов между словами 1. word-spacing: В списке CSS-определений напишите word-spacing и поставьте двоеточие. 2. 8px; Укажите величину интервала между словами. Для этого можно использовать следующие значения (табл. 4.2): – длину, определяющую величину интервала между словами (например, 8px); – normal. Этот атрибут перекрывает все наследованные значения. Положительное значение word-spacing увеличивает обычное расстояние между словами, а отрицательное – уменьшает. Значение, равное нулю, не изменяет расстояние между словами, но при его использовании исчезает выравнивание текста (см. раздел «Выравнивание текста по правому, левому краю и по центру»).

Межстрочные интервалы Каждый, кто хоть раз в жизни писал курсовую работу, знает, что обычно в текстах такого рода используется двойной интервал между строками. Это позволяет лучше воспринимать текст, а также записывать комментарии. Межстрочный интервал (leading) легко изменить при помощи свойства line-height. В приведенном примере (листинг 4.3 и рис. 4.3) класс copy увеличивает междустрочный интервал в два раза, при этом высота строки цитаты немного больше размера шрифта.

100 Управление текстом

Определение интервала между строками 1. line-height: В списке CSS-определений введите название свойства и поставьте двоеточие. 2. Укажите значение высоты строки. Можно использовать следующие значения (табл. 4.3): – число, на которое нужно умножить размер шрифта, чтобы получить величину интервала (например, 2 для двойного интервала); – длину, например 24px. Независимо от размера шрифта интервал для каждой строки текста устанавливается с помощью этой единицы. Так, если размер шрифта равен 12px, а высота строки – 24px, интервал между строками будет двойным; – проценты. Высота строки пропорциональна размеру шрифта; – normal. Этот атрибут перекрывает все наследованные значения межстрочного интервала.

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

Таблица 4.3. Возможные значения свойства line-height Значение

Совместимость

normal

IE3, N4, CSS1

IE4, N4, CSS1

IE3, N4, CSS1

IE3, N4, CSS1

Увеличение межстрочного интервала улучшает восприятие текста, особенно если текст занимает весь экран. Для большинства текстов подходит полуторный или двойной интервал. Чтобы получить двойной интервал, нужно присвоить свойству line-height значение 2 или 200%, тройной – 3 или 300%. Чтобы уменьшить расстояние между строками, можно использовать отрицательные значения. Такой текст займет меньше места, но, вероятно, не понравится читателям.

Высоту строки допустимо определить в свойстве font (см. раздел «Определение нескольких значений шрифта одновременно» в главе 3).

Заглавные и строчные буквы 101 Листинг 4.4. Использование класса позволяет писать слова с заглавной буквы

<html> <head> <style="text/css"> .name { text-transform: capitalize; } h2 { text-transform: uppercase; } </style> </head> <body> <h2>Dramatis Personae</h2> <p class="name">alice</p> <p class="name">the rabbit</p> <p class="name">the queen of ->hearts</p> <p class="name">cheshire cat</p> <p class="name">the mad hatter</p> <p class="name">the march hare</p> <p class="name">the dormouse</p> </body> </html>

Рис. 4.4. Несмотря на то что слова в HTML набраны строчными буквами, на экране они начинаются с прописных Таблица 4.4. Возможные значения свойства text-transform Значение

Совместимость

capitalize

IE4, N4, CSS1

uppercase

IE4, N4, CSS1

lowercase

IE4, N4, CSS1

none

IE4, N4, CSS1

Заглавные и строчные буквы При работе с динамическим текстом нельзя заранее угадать, в каком виде он появится на экране, какими буквами будет набран – заглавными или строчными. Но с помощью свойства text-transform это упущение можно исправить. В рассматриваемом примере (листинг 4.4) имена героев набраны строчными буквами, однако на экране (рис. 4.4) они начинаются, как и положено, с заглавной буквы.

Определение регистра 1. text-transform: В списке CSS-определений напишите text-transform и поставьте двоеточие. 2. capitalize Чтобы определить вид текста, введите одно из следующих значений (табл. 4.4): – capitalize преобразует первую букву слова в заглавную; – uppercase меняет все буквы на заглавные; – lowercase понижает регистр всех букв в слове; – none перекрывает все наследованные значения этого свойства и оставляет текст без изменений. Если вы хотите, чтобы определенная часть текста была написана заглавными буквами, лучше так ее и напечатать, поскольку старые версии браузеров могут не поддерживать перечисленные свойства. Свойство text-transform удобно для форматирования динамического текста. Например, с помощью text-transform все названия при выводе содержимого базы данных, набранные заглавными буквами, можно сделать более понятными на экране.

102 Управление текстом

Выравнивание текста по правому, левому краю и по центру Обычно текст выравнивается по левому краю или по ширине (так называемый газетный стиль, когда текст выравнивается и по правому, и по левому краю). Чтобы привлечь к тексту внимание, его выравнивают по центру или по правому краю. С помощью свойства text-align можно управлять выравниванием текста (рис. 4.5).

Установка выравнивания текста 1. text-align: В списке CSS-определений напишите название свойства и поставьте двоеточие (листинг 4.5). 2. left; Установите один из стилей выравнивания (табл. 4.5): – left– по левому краю; – right– по правому краю; – center– по центру; – justify– по ширине. Выровненный по ширине текст может не очень удачно выглядеть на экране. Это происходит из-за того, что в коротких строках увеличивается расстояние между словами, ведь все строки должны быть одной длины. К тому же до сих пор не ясно, улучшается или ухудшается восприятие текста, выровненного по ширине. Таблица 4.5. Возможные значения свойства text-align Значение

Совместимость

left

IE3, N4, CSS1

right

IE3, N4, CSS1

center

IE3, N4, CSS1

justify

IE3, N4, CSS1

Рис. 4.5. Выравнивание текста по левому краю, по правому краю, по центру и по ширине Листинг 4.5. Для каждого типа выравнивания определен свой класс <html> <head> <style type="text/css"> .left { text-align: left; } .justify { text-align: justify; } .center { text-align: center; } .right { text-align: right; } </style> </head> <body> <h2 class="left">Left</h2> <p class="left"<i>'You are old, Father ->William...</i></p> <hr> <h2 class="right">Right</h2> <p class="right"><i>'In my youth... -></i></p> <hr> <h2 class="center">Center</h2> <p class="center"><i>'You are old,' ->said the youth...</i></p> <hr> <h2 class="justify">Justified</h2> <p class="justify">Hardly knowing what ->she did...</p> </body> </html>

Вертикальное выравнивание текста 103

Вертикальное выравнивание текста С помощью свойства vertical-align можно определить положение элемента в строке по отношению к окружающему тексту, то есть поместить его выше или ниже базовой линии строки. Данное свойство работает только в inline-селекторах, тэгах, которые не окружены пробелами. Например, тэги <a>, <img>, <b>, <i>. На рис. 4.6 представлены разные типы вертикального выравнивания.

Установка вертикального выравнивания Рис. 4.6. Выравнивать текст по отношению к базовой линии строки можно разными способами

Листинг 4.6. Для каждого типа вертикального выравнивания определен свой класс

<html> <head> <style type="text/css"> .superscript { vertical-align: super; font-size: 12px; } .baseline { vertical-align: baseline; font-size: 12px; } .subscript { vertical-align: sub; font-size: 12px; } .top { vertical-align: top; font-size: 12px; } .middle { font-size: 12px; vertical-align: middle; } .bottom { vertical-align: bottom; font-size: 12px; }

1. vertical-align: В списке CSS-определений напишите название свойства и поставьте двоеточие (листинг 4.6). 2. super; Установите один из стилей вертикального выравнивания (табл. 4.6): – super оформляет текст верхним индексом; – sub оформляет текст нижним индексом; – baseline помещает текст на базовой линии строки (обычное положение); – относительное значение из табл. 4.7 выравнивает текст по отношению к родительскому элементу. Например, чтобы выровнять верхнюю часть текста по отношению к верхней части родительского элемента, введите top-text; – процентное значение поднимает или опускает элемент пропорционально размеру шрифта его родительского элемента (например, 25%).

104 Управление текстом Верхние и нижние индексы используются в научных текстах. Например, они понадобятся для того, чтобы записать теорему Пифагора: a2 + b2 = c2 – или химическую формулу, скажем формулу молекулы воды: H2O. Верхние индексы также применяются в сносках, с помощью которых добавляется ссылка на важные замечания в конце страницы или на другой Web-странице. Таблица 4.6. Возможные значения свойства vertical-align Значение

Совместимость

Super

IE4, N6, CSS1

Sub

IE4, N6, CSS1

Baseline

IE4, N6, CSS1

IE5*, N6, CSS1

IE5**, N6, CSS1

* IE5.5 и IE6 в Windows.

** Только в MacOS, в Windows недоступно.

Выделение абзацев в тексте Internet предоставляет различные возможности выделения абзацев в тексте. Самый известный способ начать новый абзац – красная строка. Однако раньше выделять абзацы таким образом было невозможно, потому что браузеры преобразовывали несколько пробелов в один. Абзацы же отделялись друг от друга пустой строкой. Теперь дополнительные пробелы в начале строки добавляют с помощью свойства text-indent (рис. 4.7).

Листинг 4.6 (окончание)

.texttop { vertical-align: texttop; font-size: 12px; } .textbottom { vertical-align: text-bottom; font-size: 12px; } .normal { font-weight: bold; font-size: 24px; } </style> </head> <body> <p class="normal">Alice <span class= ->"baseline">Baseline</span></p> <p class="normal">Alice <span class= ->"superscript">Superscript</span></p> <p class="normal">Alice <span class= ->"subscript">Subscript</span></p> <p class="normal">Alice <span class= ->"top">Top</span></p> <p class="normal">Alice <span class= ->"middle">Middle</span></p> <p class="normal">Alice <span class= ->"bottom">Bottom</span></p> <p class="normal">Alice <span class= ->"texttop">Text-Top</span></p> <p class="normal">Alice <span class= ->"textbottom">Text-Bottom</span></p> </body> </html>

Таблица 4.7. Определение позиции элемента по отношению к родительскому элементу Значение

Тип выравнивания

top

Над самым высоким элементом в строке

middle

В середине строки родительского элемента

bottom

На уровне нижней части строки

text-top

Над строкой родительского элемента

text-bottom

Под строкой родительского элемента

Выделение абзацев в тексте 105

Установка отступа первой строки

Рис. 4.7. Абзацы выглядят лучше, когда они выделяются Листинг 4.7. В классе copy устанавливается отступ, равный 10% от ширины экрана. Чем шире экран, тем больше отступ

<html> <head> <style type="text/css"> p.copy { text-indent: 10%; } </style> </head> <body> <h3>CHAPTER 4<br> The Rabbit Sends in a Little Bill -></h3> <br> <p class="copy">'But then,' thought ->Alice...</p> <p class="copy">'Oh, you foolish ->Alice!'...</p> <p class="copy">And so she went ->on...</p> <p class="copy">'Mary Ann! Mary ->Ann!'...</p> <p class="copy">Presently the Rabbit ->came up to the door...</p> <p class="copy">'<i>That</i> you ->won't' thought Alice...</p> <p class="copy">Next came an angry ->voice...</p> </body> </html>

1. text-indent: В списке CSS-определений напишите название свойства и поставьте двоеточие (листинг 4.7). 2. 10%; Чтобы указать величину отступа, введите одно из следующих значений (табл. 4.8): – длину, например 2em. Такой отступ хорошо выглядит на экране; – процентное значение, определяющее длину отступа пропорционально ширине абзаца (например, 10%). Вы можете обнулить значение поля абзаца. Тогда между абзацами не будет пустой строки, которая обычно появляется при использовании тэга <p>. Обычно отступы применяются при отображении текста на бумаге, поэтому их лучше устанавливать только в версиях страницы, предназначенных для печати (см. раздел «Отображение страницы на экране и при выводе на печать» в главе 22).

Таблица 4.8. Возможные значения свойства text-indent Значение

Совместимость

IE3, N4, CSS1

IE3, N4, CSS1

106 Управление текстом

Украшение текста С помощью свойства text-decoration можно декорировать текст четырьмя различными способами. Эти украшения используются для привлечения внимания читателя к важным фрагментам текста (рис. 4.8).

Добавление в текст декоративного элемента 1. text-decoration: В списке CSS-определений напишите название свойства и поставьте двоеточие (листинг 4.8). Рис. 4.8. На рисунке представлены разные способы украшения текста, однако самым полезным из них является подчеркивание. Чтобы выделить текст, который будет удален, можно использовать зачеркивание

Листинг 4.8. Важные фрагменты текста подчеркнуты, если они не находятся внутри тэга <em>. В противном случае текст перечеркнут, и над ним проходит линия, так как эти свойства наследуются от тэга <p>

<html> <head> <style type="text/css"> em { text-decoration: underline; } p em { text-decoration: line-through; } p {text-decoration: overline; } </style> </head> <body> <em>CHAPTER 4<br> The Rabbit Sends in a Little Bill</em> <p>It was the White Rabbit, trotting slowly back again, and looking anxiously about ->as it went, as if it had lost something; and she heard it muttering to itself<em> ->'The Duchess! Oh my dear paws! Oh my fur and whiskers! She'll get me executed, ->as sure as ferrets are ferrets! Where <i>can</i> I have dropped them, I wonder?' -></em>Alice guessed in a moment...</p> </body> </html>

Украшение текста 107 Таблица 4.9. Возможные значения свойства text-decoration Значение

Совместимость

none

IE4, N4, CSS1

underline

IE3, N4, CSS1

overline

IE4, N6, CSS1

line-through

IE3, N4, CSS1

blink

IE4, N4, CSS1

2. underline; Чтобы указать стиль украшения, используйте следующие значения (табл. 4.9): – underline помещает линию под текстом; – overline располагает линию над текстом; – line-through перечеркивает текст; – blink делает текст мигающим; – none снимает все установленные ранее декоративные стили. В список определений можно включить несколько декоративных стилей при условии, что первый в списке не none. Стили нужно разделить пробелами: underline overline underline blink. Многим посетителям, особенно тем, кто находится на сайте долго, не нравится мигающий текст. Поэтому не стоит увлекаться стилем blink. Зачеркивание удобно в online-каталогах: старая цена товара зачеркивается, а новая остается без изменений. Если назначить свойству text-decoration значение none, то во многих браузерах может исчезнуть подчеркивание ссылок. Многие посетители находят ссылки в остальном тексте именно по подчеркиванию. Однако я считаю, что выделение ссылок таким образом загромождает страницу, к тому же ссылки можно отметить и другими способами. Тем не менее посетители предпочитают традиционное подчеркивание.

108 Управление текстом

Управление свойствами пробелов Как упоминалось в разделе «Выделение абзацев в тексте», многие браузеры раньше заменяли несколько пробелов одним, если не использовался тэг <pre>, указывающий браузеру, что текст уже отформатирован. С помощью CSS можно как запрещать, так и разрешать объединение пробелов. Также допускается указывать, когда текст должен прерываться пробелом, а когда – нет (сравните с HTML-тэгом <nobr>). В данном примере (листинг 4.9 и рис. 4.9) текст с пробелами выглядит не слишком красиво. Однако они исчезнут, если не определить атрибут white-space (рис. 4.10).

Листинг 4.9. В тэг <p> добавлено свойство white-space: pre, в результате все пробелы отображаются на экране. Но если используется класс .collapse, пробелы между символами исчезают

<html> <head> <style type="text/css"> p { white-space: pre; } .collapse {white-space: normal;} </style> </head> <body> <p>A L I C E 'S RIGH TFOOT, ES Q.</p> <p class="collapse">H E ->A R T H R UG , </p> <p>(WI T H ->A L I C E ' ->S L O V E). <img scr="alice08.gif" width="200" ->height="131"> </p> </body> </html>

Рис. 4.9. Использование пробелов позволяет отображать текст именно так, как вы хотите. Заметьте, что пробелы вытеснили картинку

Управление свойствами пробелов 109

Установка свойств пробелов в селекторе

Рис. 4.10. Пробелы исчезают, если стиль не определен

1. white-space: В списке CSS-определений напишите название свойства и поставьте двоеточие (листинг 4.9). 2. pre Чтобы определить способ управления пробелами в тексте, введите одно из следующих значений (табл. 4.10): – pre сохраняет несколько пробелов; – nowrap не прерывает строку до тех пор, пока не доходит до тэга <br>; – normal позволяет браузеру определять, как управлять пробелами. Обычно при этом несколько пробелов преобразуются в один.

Таблица 4.10. Возможные значения свойства white-space Значение

Совместимость

normal

IE5*, N4, CSS1

pre

IE5*, N4, CSS1

nowrap

IE5*, N6, CSS1

* IE5.5 и IE6 для Windows.

Если в тэге определено значение nowrap, то строка не прерывается независимо от ширины экрана. Чтобы прочитать текст, пользователю придется подвинуть страницу, а это не всем нравится. Значение nowrap удобно в таблицах, если требуется, чтобы строка в ячейке не прерывалась.

110 Управление текстом

Установка разрыва страницы для печати Когда вам потребуется распечатать Webстраницу, вы можете столкнуться со следующей проблемой. Нельзя точно сказать, где закончится страница. Web-страница обычно состоит из нескольких печатных страниц. Может случиться так, что заголовок раздела окажется в конце страницы, а текст – в начале следующей. Такая проблема решается добавлением в HTML-тэг определенного программного кода (см. раздел «Добавление CSS в HTML-тэг» в главе 2). В рассматриваемом примере (рис. 4.11) новая глава начинается со второй страницы. Когда вы распечатываете Web-страницу, заголовок может попасть в любое место печатного листа. Но если добавить разрыв страницы в тэг <h3> (листинг 4.10), легко добиться того, что заголовок при печати окажется на новой странице (рис. 4.12).

Рис. 4.11. На экране за одним разделом сразу идет следующий

Листинг 4.10. В тэге <h3> определен разрыв страницы при печати

<html> <body> <p>Once more she found herself in the ->long hall...</p> <hr> <h3 style="page-break-before: ->always;">CHAPTER 8<br> The Queen's Croquet-Ground</h3> <p>A large rose-tree stood near...</p> </body> </html>

Установка разрыва страницы для печати 111

Установка разрыва страницы

Рис. 4.12. При печати каждый раздел начинается с новой страницы

Таблица 4.11. Возможные значения свойства page-break-before Значение

Совместимость

always

IE4, N6, CSS2

auto

IE4, N6, CSS2

1. style=" Это CSS-свойство функционирует только в составе атрибута style в HTML-тэге. 2. page-break-before: В списке CSS-определений напишите название свойства и поставьте двоеточие (листинг 4.10). 3. always; Чтобы определить способ управления разрывами страницы, введите одно из следующих значений (табл. 4.11): – always помещает разрыв страницы перед элементом; – auto позволяет браузеру определить положение разрыва страницы. 4. " Добавьте другие стили и закройте атрибут style с помощью кавычек ("). Помните, что если этот атрибут включить в CSS-правило, он не будет работать: его нужно вводить непосредственно в тэг с атрибутом style. То же самое относится и к свойству page-break-after, но разрыв страницы помещается после тэга. О том, как правильно устанавливать разрыв страницы, рассказывается в разделе «Отображение страницы на экране и при выводе на печать» в главе 22.

Управление списками и указателем мыши

HTML позволяет автоматически устанавливать нумерованные и маркированные списки. Вы задаете список, а остальные действия выполняет браузер. При добавлении пункта его вид автоматически определяется, и он отображается на экране маркированным или нумерованным в зависимости от вида предыдущего элемента. Однако в HTML ограничен выбор вида списка. В CSS представлено гораздо больше вариантов. Допускается менять вид маркера, который используется для обозначения пункта списка (буква, цифра или точка), или создавать собственные маркеры и списки с висячими отступами. Но Netscape 4 и Internet Explorer 4 не поддерживают многие из этих свойств. Даже если какое-либо из них и доступно в Netscape 4, вы все равно не сможете использовать любой HTML-тэг, поскольку разрешается лишь переопределять тэг <li>. В этой главе рассказывается, как с помощью CSS придать спискам нужный вам вид, а также описывается, как различными способами менять форму указателя мыши.

Списки 113 Листинг 5.1. Все параметры списка определяются одновременно

<html> <head> <style type="text/css"> li {list-style: url(bullet1.gif) ->circle inside; } </style> </head> <body> <h3>Places to go</h3> <ul> <li>london <li>paris <li>tokyo <li>new york <li>slippery creek </ul> </body> </html>

Рис. 5.1. Определяйте списки с помощью CSS

Списки С помощью свойства list-style можно описать все параметры списка в одной строке. Допустимо использовать свойства list-style-type, list-style-position и list-style-image. В данном примере (листинг 5.1) приведен список городов, которые я хотел бы когда-нибудь посетить. В нем применяются необычные маркеры (рис. 5.1).

Определение в селекторе нескольких параметров списка 1. li{ Установите селектор элемента списка, который нужно переопределить. Из-за ограничений Netscape 4 лучше использовать тэг <li>. 2. list-style: Введите свойство list-style и поставьте двоеточие. Укажите значения свойства list-style (табл. 5.1). 3. circle Задайте значение свойства list-styletype (табл. 5.2) и нажмите клавишу пробела. Если вы не хотите использовать маркеры, установите значение none (см. следующий раздел). 4. inside Введите значение свойства list-styleposition и нажмите клавишу пробела. Допустимы следующие значения: – inside. Строки выравниваются по маркеру; – outside. Строки выравниваются по первой букве в первой строке текста. Дополнительную информацию вы найдете далее, в разделе «Создание висячих отступов».

114 Управление списками и указателем мыши 5. url(bullet1.gif) Впишите свойство list-style-image. Чтобы использовать собственный маркер, сначала нужно создать его графическое изображение (рис. 5.2), а затем указать путь к нему. Путь может быть либо полным Web-адресом, либо локальным именем файла (см. далее раздел «Создание собственных маркеров»). 6. ;} Закройте определение с помощью точки с запятой. Затем запишите в этом правиле другие определения. Закройте правило фигурной скобкой (}). Все значения, указанные в предыдущем примере, различны. Чтобы обеспечить работу правила, необязательно включать каждое из них в определение. Недостающие значения будут присвоены по умолчанию. Например, определение list-style: inside; будет работать. Если посетитель отключил отображение графики в браузере или графический маркер по какой-либо причине не загружается, используется свойство list-styletype, установленное по умолчанию.

Таблица 5.1. Значения свойства list-style Значение

Совместимость

<list-style-type>

IE4, N4, CSS1

<list-style-position> IE4, N6, CSS1 <list-style-image>

IE4, N6, CSS1

Таблица 5.2. Маркеры list-style Название

Вид (зависит от системы)

disc

circle

{

square

decimal

upper-roman

lower-roman

upper-alpha

lower-alpha

Рис. 5.2. Маркер-стрелка

Виды маркеров 115 Листинг 5.2. Создаются два класса: в одном в качестве маркера используется закрашенный кружок, в другом – квадрат

<html> <head> <style type="text/css"> li.grocery {list-style-type: disc;} li.computer {list-style-type: ->square;} </style> </head> <body> <h3>Shopping list</h3> <ul> <li class="grocery">Butter <li class="grocery">Milk <li class="grocery">Cereal <li class="computer">5GB Hard Drive <li class="grocery">Orange Juice <li class="grocery">Cat Food <li class="computer">64MB RAM <li class="grocery">Soup </ul> </body> </html>

Рис. 5.3. Пункты, относящиеся к компьютеру, помечены другим маркером Таблица 5.3. Значения свойства list-style-type Значение

Совместимость

IE4, N4, CSS1

none

IE4, N4, CSS1

Виды маркеров С помощью свойства list-style можно изменять вид маркера, который используется в списке. Маркером может быть закрашенный кружок (disc), пустой кружок (circle), квадрат (square), а также буквы, цифры и точки. В данном примере (листинг 5.2) определен список покупок. Для различных типов элементов применяются разные виды маркеров (рис. 5.3).

Определение вида маркера 1. li.grocery{ Запишите селектор, который следует определить. В данном примере объявляется класс grocery, относящийся к тэгу <li>. Важно помнить, что в Netscape с помощью этих свойств можно менять только этот тэг. 2. list-style-type: Введите свойство list-style-type и поставьте двоеточие. Задайте значения свойства list-style-type, используя перечисленные в табл. 5.3. 3. disc Укажите название маркера (табл. 5.2). Если вы не хотите применять маркеры, установите значение none. 4. ;} Закройте определение с помощью фигурной скобки (}). В Netscape 4 свойство list-style-type можно использовать только с тэгом <li>. Это противоречит стандарту CSS, в котором говорится, что для создания списка подходит любой тэг, если в нем есть определение display.

116 Управление списками и указателем мыши

Создание висячих отступов Часто текст в элементе маркированного списка занимает несколько строк. С помощью свойства list-style-position можно определить положение текста по отношению к маркеру. Если текст выравнивается по первой букве первой строки, такой отступ называется висячим. В рассматриваемом примере (листинг 5.3) устанавливается два вида отступа: висячий и тот, в котором текст выравнивается по маркеру (рис. 5.4).

Установка отступа в списке 1. li.inside{ Введите селектор. В этом примере создается независимый класс inside. Если он используется в тэге <li>, то текст выравнивается по маркеру. 2. list-style-position: Укажите свойство list-style-position и поставьте двоеточие. 3. inside Чтобы определить вид отступа, введите одно из следующих ключевых слов (табл. 5.4): – inside. Строки выравниваются по маркеру; – outside. Строки выравниваются по первой букве в первой строке текста. 4. ;} Закройте определение с помощью точки с запятой и фигурной скобки (}).

Листинг 5.3. Висячий отступ используется по умолчанию. Выровнять текст по маркеру позволяет класс inside

<html> <head> <style type="text/css"> li {list-style-position: ->outside; width="200px"} li.inside { list-style-position: ->inside;} </style> </head> <body> <ul> <li>'A knot!' said Alice, always ->ready to make herself useful, and ->looking anxiously about her. 'Oh, ->do let me help to undo it!' <li class="inside">'I shall do ->nothing of the sort,' said the ->Mouse, getting up and walking ->away. 'You insult me by talking ->such nonsense!' <li>'I didn't mean it!' pleaded poor ->Alice. 'But you're so easily ->offended, you know!' <li>The Mouse only growled in reply. </ul> </body> </html>

Маркированные списки с висячим отступом (outside) обычно выглядят лучше, чем списки без отступа (inside).

Рис. 5.4. Два вида отступа

Создание собственных маркеров 117 Таблица 5.4. Возможные значения свойства list-style-position Значение

Совместимость

inside outside

IE4, N6, CSS1 IE4, N6, CSS1

Листинг 5.4. Вместо обычного маркера в этом списке используется графическое изображение

<html> <head> <style type="text/css"> li {list-type-image: ->url(bullet1.gif); ->margin-left: 20px;} </style> </head> <body> <h2>Things to do</h2> <ul> <li>write book <li>make examples <li>edit book <li>take holidays in bahammas <li>drink pina colladas </ul> </body> </html>

Создание собственных маркеров Маркеры, поддерживаемые браузерами по умолчанию, можно использовать неограниченно (см. выше раздел «Виды маркеров»). В качестве маркеров также применяют графические изображения в формате GIF, JPEG и PNG, если браузер поддерживает такую возможность. В данном примере (листинг 5.4) приводится список дел, которые нужно выполнить в ближайшее время (рис. 5.5), а маркером служит созданная ранее стрелка (рис. 5.2).

Определение собственного маркера 1. li{ Введите селектор списка. 2. list-style-image: Укажите свойство list-style-image и поставьте двоеточие. 3. url(bullet1.gif); Чтобы маркировать список созданным вами графическим объектом, нужно указать в браузере путь к нему. Путь может быть либо полным Web-адресом, либо локальным именем файла. В этом примере bullet1.gif представляет собой локальный файл.

118 Управление списками и указателем мыши Если вы не хотите добавлять свой маркер, укажите значение none. В этом случае браузер проигнорирует все наследованные маркеры (табл. 5.5). 4. ;} Закройте определение с помощью точки с запятой. Затем впишите в правило другие определения и завершите его фигурной скобкой (}). Netscape 4 не поддерживает свойство list-style-image. Поэтому рекомендуется включать в определение также и liststyle-type на тот случай, если нельзя будет использовать картинку. Применение графических маркеров улучшает вид страницы, но увеличивает время ее загрузки. Учтите, что графические маркеры иногда занимают больше места, чем обычные. При использовании высоких изображений пространство между отдельными маркерами увеличивается. Если же применяются широкие изображения, текст сдвигается вправо.

Рис. 5.5. Не ограничивайтесь использованием имеющихся в браузере маркеров – создавайте новые с помощью CSS

Таблица 5.5. Возможные значения свойства list-style-image Значение

Совместимость

<url>

IE4, N6, CSS1

none

IE4, N6, CSS1

Форма указателя мыши 119 Листинг 5.5. Для определения формы указателя используется класс help, так как ссылка относится к слову «help». Указатель, находящийся над картинкой, определяется как move. Для других элементов страницы используется указатель, который обычно появляется в левом верхнем углу экрана при изменении размеров окна

<html> <head> <style type="text/css"> .help {cursor: help;} body {cursor: nw-resize;} img {cursor: move;} </style> </head> <body> <h3>CHAPTER 8<br> The Queen's Croquet-Ground</h3> <p><img src="alice30.gif" width="200" ->height="272" border="0" align="left"> ->A large rose-tree stood near the ->entrance of the garden...</p> <p>'I couldn't <a class="help" ->href="#">help</a> it,' said Five, in ->a sulky tone; 'Seven jogged my ->elbow."</p> </body> </html>

Рис. 5.6. Указатель имеет форму стрелки, но все же отличается от обычного

Форма указателя мыши Обычно форма указателя мыши устанавливается браузером, при этом указатель меняется в зависимости от того, в каком месте страницы он находится. Например, указатель, наведенный на текст, становится текстовым курсором. Если же страница недоступна, указатель приобретает форму песочных часов, таким образом подавая сигнал посетителю, что нужно подождать. Однако не всегда следует рассчитывать на браузер, иногда необходимо самим описывать формы указателя. В приведенном примере (листинг 5.5) определяются различные формы указателя. Выбор формы зависит от элемента страницы, над которым находится указатель (рис. 5.6, 5.7 и 5.8).

Рис. 5.7. При наведении на ссылку указатель превращается в знак вопроса

120 Управление списками и указателем мыши

Определение формы указателя мыши 1. cursor: В списке CSS-определений напишите слово cursor и поставьте двоеточие. 2. help Укажите одно из названий формы указателя (табл. 5.6) или установите значение auto, если вы хотите оставить выбор формы указателя за браузером (табл. 5.7). Стандарты CSS позволяют создавать указатель мыши с помощью Web-графики: cursor: url(myPointer.gif); К сожалению, ни один браузер не поддерживает данную функцию. Менять форму указателя мыши – интересное занятие, но протестировав эту возможность на своем сайте, я пришел к выводу, что не всем посетителям это нравится. Многие присылают сообщения по электронной почте с просьбой вернуть обычный указатель. Пользователи уже привыкли к традиционным указателям и знают, что обозначает та или иная форма. Изменение этих стандартов может запутать людей.

Рис. 5.8. Когда указатель мыши находится над картинкой, он становится указателем изменения размера. Эта возможность пригодится нам в будущем (см. главу 25)

Таблица 5.6. Формы указателя Название

Вид (зависит от системы)

crosshair hand* pointer move n-resize ne-resize e-resize se-resize

Таблица 5.7. Возможные значения свойства cursor

s-resize sw-resize w-resize

Значение

Совместимость

nw-resize

IE4, N6, CSS2

text

<url>

CSS2

wait

auto

IE4, N6, CSS2

help

none

IE4, N6, CSS2

* Только в IE, совпадает с pointer.

I ?

управление цветами и фоном

В HTML всегда существовала возможность менять цвет фона и графики. Однако изменить фон всей Web-страницы было очень сложно. Допускалось менять фон в ячейках таблицы, но и эта функция была ограничена. CSS позволяет работать с цветом фона и графикой в каждом отдельном элементе страницы, что значительно разнообразит дизайн Web-страницы. В действительности эта возможность – наиболее важная из всех предлагаемых CSS.

Рис. 6.1. Справа появляется фон страницы (растущая Алиса). У заголовка есть свой фон: твердая текстура присутствует только слева, остальная часть выделяется серым цветом

Фон Чтобы определить цвет фона или поместить картинку на задний план, используется свойство background. Изменить цвет фона можно как на всей странице, так и позади отдельного элемента. Таким же образом добавляется картинка (рис. 6.1 и листинг 6.1).

122 Управление цветами и фоном

Установка фона 1. background: Введите свойство background и поставьте двоеточие. Укажите значения свойства background (табл. 6.1). 2. white Задайте цвет фона и нажмите клавишу пробела. Это значение может быть названием цвета, шестнадцатеричным кодом или RGB. Если вы введете значение transparent, то браузер выберет цвет, установленный по умолчанию. 3. url(alice05.gif) Укажите URL картинки, которую требуется поместить на заднем плане, и нажмите клавишу пробела. Путь к файлу с этим изображением (GIF, JPEG или PNG) может быть как полным Web-адресом, так и локальным именем файла. Вместо URL можно указать значение none. В этом случае на заднем плане не будет картинки. 4. no-repeat Запишите ключевое слово, которое определяет повторяемость фона, и нажмите клавишу пробела. Значения ключевого слова: – repeat. Браузер размножит графическое изображение, заполнив весь фон элемента; – repeat-x. Изображение повторяется вдоль горизонтальной линии, исходящей из вершины элемента (ось Х); – repeat-y. Изображение дублируется вдоль вертикальной линии, проходящей по левой стороне элемента (ось Y); – no-repeat. Изображение появится только один раз.

Листинг 6.1. Внутри тэга <body> устанавливается цвет фона страницы. Картинка зафиксирована справа и не повторяется. В тэге <h3> определяется фон заголовка, рисунок которого повторяется сверху вниз на левой стороне элемента

<html> <head> <style type="text/css"> body {background: white url ->(alice05.gif) no-repeat fixed ->right top;} h3 { background: #999999 url ->(background_rough.gif) ->repeat-y left top; color: white; width: 60%; padding: 20px; } p {width: 60%;} </style> </head> <body> <h3>CHAPTER 2<BR> The Pool of Tears</h3> <p>'Curiouser and curiouser!' cried ->Alice...</p> <p>And went on planning...</p> <p>Oh dear, what nonsense I'm ->talking!'</p> <p>Just then her head struck...</p> <p>Poor Alice!...</p> <p>'You ought to be ashamed of ->yourself...</p> <p>After a time she heard a little ->pattering...</p> </body> </html> Таблица 6.1. Возможные значения свойства background Значение

Совместимость

<background-color>

IE4, N4, CSS1

<background-image>

IE4, N4, CSS1

<background-repeat>

IE4, N4, CSS1

<background-attachment>

IE4, N6, CSS1

<background-position>

IE4, N6, CSS1

Фон 123

Рис. 6.2. Текст переместился, а изображение на заднем плане осталось на месте

Что нужно знать о фоне Netscape и Internet Explorer по-разному повторяют фон элемента. В Internet Explorer фон распространяется по всему экрану, в Netscape – только до конечной точки элемента. Чтобы решить эту проблему, установите ширину элемента в пикселах или процентах. Тогда оба браузера будут ориентироваться на соответствующую ширину элемента (см. раздел «Ширина и высота элемента» в главе 7).

5. fixed Введите ключевое слово, которое определяет поведение фона при прокрутке страницы, и нажмите клавишу пробела. Ключевое слово может быть следующим: – fixed. Браузер не будет перемещать фон вместе с остальными элементами (рис. 6.2); – scroll. Фон передвинется вместе с элементом. 6. righttop; Чтобы определить место по отношению к левому верхнему углу элемента, где должен появиться фон, укажите две величины, разделенные пробелом. Они могут принимать следующие значения: – длина, например –10px. Значение может быть как положительным, так и отрицательным. Первое число – это расстояние от элемента до левого края его родительского элемента. Второе число задает расстояние от верхнего края элемента; – проценты, например 25%. Первое число определяет горизонтальную пропорцию по отношению к размеру родительского элемента, второе – вертикальную. Возможность помещать фоновую графику независимо от текста – мощный инструмент, который используется в дизайне Web-страницы. Благодаря ему не нужно создавать новые изображения каждый раз, когда меняется текст. Комбинируя возможности HTML-текста и графики, вы получите потрясающие результаты. Атрибут background позволяет определять все свойства фона сразу. В следующем разделе рассказывается, как установить каждый атрибут отдельно.

124 Управление цветами и фоном

Установка отдельных свойств фона Атрибут background позволяет устанавливать все свойства фона сразу (см. предыдущий раздел), однако можно определить каждое свойство отдельно.

Цвет фона С цветом фона HTML-страницы можно было работать еще в первых Web-браузерах. CSS позволяет устанавливать цвет фона не только всей страницы, но и отдельного элемента (листинг 6.2 и рис. 6.3). Рис. 6.3. Все элементы страницы имеют свой цвет фона. Картинка помещена на розовом фоне. Этот цвет виден там, где изображение прозрачно

Листинг 6.2. Цвет фона страницы – серый. Однако другие CSS-определения (<img>, <h3>, <p>, использующие класс copy и highlight) меняют его

<html> <head> <style type="text/css"> body {background-color: #cccccc;} img {background-color: #ff9999;} h3 {position: relative; background-color: #ff9999; layer-background-color: ->#ff9999; padding: 10px;} p.copy {position: relative; background-color:rbg(100%, 100%, 100%); ->layer-background-color: rbg(100%, 100%, 100%); padding: 10px;} .highlight {background-color: black; color: white;} </style> </head> <body> <h3>CHAPTER 6<br> Pig and Pepper</h3> <p class="copy">For a minute or two she stood looking at the house, and ->wondering...</p> <img scr="alice21.gif" width="300" height="248" border="0"> </body> </html>

Установка отдельных свойств фона 125 Таблица 6.2. Возможные значения свойства background-color Значение

Совместимость

<color>

IE4, N4, CSS1

transparent

IE4, N4, CSS1

Определение фона элемента 1. background-color: Напишите название свойства и поставьте двоеточие. 2. #cccccc Укажите цвет фона (табл. 6.2). Эта величина может быть названием цвета, шестнадцатеричным кодом или RGB. Если вы хотите использовать цвет, установленный браузером по умолчанию, введите значение transparent. По умолчанию фону элемента присваивается значение none. Таким образом, если для элемента не установить конкретный цвет фона или не поместить картинку на задний план, то в качестве фона будет использоваться фон родительского элемента.

Рис. 6.4. Несмотря на установку цвета фона, между элементом и его рамкой (вверху) появляется белый отступ. Чтобы закрасить отступ, используется свойство layerbackground-color, но цвет выходит за рамку элемента (внизу)

Цвет фона в Netscape При установке цвета фона в Netscape возникает ошибка. Между элементом и его рамкой появляется белый отступ (рис. 6.4). Проблему легко решить, добавив атрибут layer-background-color: black;. При помощи этого кода, если задано точное положение элемента, отступ также окрашивается цветом фона (см. раздел «Определение положения элемента» в главе 8). Однако и при использовании данного кода возможны ошибки. Цвет иногда выходит за рамку элемента, что выглядит довольно странно (рис. 6.4). Скорее всего, с этим недостатком придется смириться.

126 Управление цветами и фоном

Изображение на заднем плане С помощью CSS можно не только поместить изображение на задний план элемента или сделать фоном страницы, но и определить его положение на экране, а также то, каким образом картинка будет повторяться (листинг 6.3 и рис. 6.5).

Рис. 6.5. Изображение, помещенное на задний план, появляется слева, а текст сдвигается вправо Листинг 6.3. В этом примере изображение, которое помещается на задний план, определяется в тэге <body>. Изображение фиксируется при помощи отрицательных величин, оно не повторяется, но может двигаться вверх и влево. В тэге <h3> определяется повторяющееся изображение на заднем плане заголовка. Расстояние между текстом и картинкой равно 200px, поэтому текст не накладывается на картинку

<html> <head> <style type="text/css"> body { background-image: url(alice05.gif); background-repeat: no-reapeat; background-attachment: fixed; background-position: -10px –5px: } h3 { background-image: url(background_rough.gif); background-repeat: repeat-x; background-position: -20px –2px; margin-left: 200px; padding: 10px; } .copy {margin-left: 200px;} </style> </head> <body> <h3>CHAPTER 2<br> The Pool of Tears</h3> <p>'Curiouser and curiouser!' cried Alice...</p> </body> </html>

Установка отдельных свойств фона 127 Таблица 6.3. Возможные значения свойства background-image Значение

Совместимость

<url>

IE4, N4, CSS1

none

IE4, N4, CSS1

Таблица 6.4. Возможные значения свойства background-repeat Значение

Совместимость

repeat

IE4, N4, CSS1

repeat-x

IE4, N4, CSS1

repeat-y

IE4, N4, CSS1

no-repeat

IE4, N4, CSS1

Таблица 6.5. Возможные значения свойства background-attachment Значение

Совместимость

scroll

IE4, N6, CSS1

fixed

IE4, N6, CSS1

Рис. 6.6. Текст переместился, а изображение на заднем плане осталось на месте

Определение положения картинки на заднем плане 1. background-image:url(alice05.gif); Напишите название свойства backgroundimage и укажите URL, определяющий путь к файлу с картинкой (GIF, JPEG, PNG). Путь может быть как полным Web-адресом, так и локальным именем файла. Если вы не хотите использовать графическое изображение, вместо URL введите значение none (табл. 6.3). 2. background-repeat:no-repeat; Укажите свойство background-repeat и поставьте двоеточие. Чтобы определить повторяемость фона, задайте одно из следующих ключевых слов (табл. 6.4): – repeat. Браузер размножит графическое изображение, заполнив весь фон элемента; – repeat-x. Изображение повторяется вдоль горизонтальной линии, проходящей по вершине элемента; – repeat-y. Изображение дублируется вдоль вертикальной линии, проходящей по левой стороне элемента; – no-repeat. Изображение появится только один раз. 3. background-attachment:fixed; Введите атрибут background-attachment и поставьте двоеточие. Чтобы определить положение фона при прокрутке страницы, выберите одно из следующих ключевых слов (табл. 6.5): – fixed. Браузер не будет перемещать фон вместе с остальными элементами (рис. 6.6); – scroll. Фон переместится вместе с элементом.

128 Управление цветами и фоном 4. background-position:-10px–5px; Напишите название свойства backgroundposition и поставьте двоеточие. Чтобы определить место по отношению к левому верхнему углу элемента, где должен появиться фон, введите две величины, разделенные пробелом. Они могут принимать следующие значения (табл. 6.6): – длина, например –10px. Значение может быть как положительным, так и отрицательным. Первое число – это расстояние от элемента до левого края его родительского элемента. Второе число задает расстояние от верхнего края элемента; – проценты, например 25%. Первое число определяет горизонтальную пропорцию по отношению к размеру родительского элемента, второе – вертикальную; – ключевое слово (см. раздел «Позиционирование с помощью ключевых слов»). Иногда повторяющийся фон может появляться в неожиданных местах или распространяться не в том направлении. С помощью CSS-свойства background-repeat фоном можно управлять. Проценты и длину допустимо использовать в определении background-position одновременно, однако их нельзя применять вместе с ключевыми словами. Пространство на заднем плане, на котором нет картинки, заполняется цветом фона (см. раздел «Установка отдельных свойств фона»).

Таблица 6.6. Возможные значения свойства values Значение

Совместимость

IE4, N6, CSS2

IE4, N6, CSS2

top

IE4, N6, CSS2

center

IE4, N6, CSS2

bottom

IE4, N6, CSS2

left

IE4, N6, CSS2

right

IE4, N6, CSS2

Позиционирование с помощью ключевых слов Определять положение графического изображения можно с помощью ключевых слов, например background: center top;. Для определения положения картинки на экране используются следующие ключевые слова:

left, center, right задают горизонтальное положение; top, center, bottom указывают вертикальное положение.

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

Установка цвета на переднем плане 129

Установка цвета на переднем плане С помощью свойства color определяется цвет элемента (листинг 6.4). Первоначальное назначение этого свойства – менять цвет текста. Но в Internet Explorer и Netscape 6 оно также используется в формах (рис. 6.7).

Рис. 6.7. Заголовок текста напечатан красным цветом. Этим цветом выделен также текст в форме Листинг 6.4. Тэг <h2> окрашивает текст в красный цвет

<html> <head> <style type="text/css"> h2 { color: red; } form { color: #990000; } input { color: rgb(100%, 0%, 0%); } .copy { color: rgb(102,102,102); } </style> </head> <body. <h2>CHAPTER 5<br> Advice from a Caterpillar</h2> <p class="copy">The Caterpillar and ->Alice looked at each other...</p> <p class="copy">'Who are you?' said ->the Caterpillar...</p> <p class="copy">This was not an ->encouraging opening for a ->conversation...</p> <form name="FormName" action="#" ->method="get">Enter your advice here: <input type="text" ->name="textfieldName" ->size="48"><br> <input type="submit" name="advice" ->value="Give Advice"> </form> </body> </html>

Определение цвета на переднем плане 1. color: В списке CSS-определений напишите название свойства color и поставьте двоеточие. 2. red; Укажите цвет элемента (табл. 6.7). Это значение может быть названием цвета, шестнадцатеричным кодом или RGB (см. раздел «Значения и единицы» во введении). Если вы определите цвет у нескольких элементов, он будет меняться неожиданно. Самый простой пример – определение цвета в тэге <body>. Internet Explorer 4/5/6 и Netscape 6 изменит цвет всех элементов в данном тэге. Следите за тем, какой тэг вы переопределяете и как это может повлиять на другие тэги (см. раздел «Наследование родительских свойств» в главе 2). С помощью свойства color можно установить цвет рамки, но его легко заменить цветом, установленным с помощью свойства border-color (см. раздел «Атрибуты рамки» в главе 7).

Таблица 6.7. Возможные значения свойства color Значение

Совместимость

<color>

IE3, N4, CSS1

управление рамками и полями

Из физики известно, что все тела состоят из атомов, а каждый атом обладает рядом характеристик. Атомы образуют молекулы, свойства которых отличаются от свойств атомов. Так и Web-страница состоит из HTMLтэгов. У каждого тэга есть свои возможности. Тэги разрешается комбинировать, создавая Web-страницу. В итоге она представляет собой объект, гораздо больший, чем ее составляющие. Каждый тэг представляет собой самостоятельный элемент на экране, независимо от того, является он отдельным тэгом или определен внутри других. И этим тэгом можно управлять с помощью CSS. Чтобы описать все эффекты, применяемые к HTML-элементам, рассмотрим его как объект, имеющий несколько свойств: поля, рамки, внутренний отступ, ширину и высоту. CSS позволяет работать со всеми этими свойствами. В данной главе рассказывается, как управлять элементом и его свойствами.

Что такое элемент 131

Что такое элемент Термин «элемент» относится к различным частям HTML-документа, которые определяются с помощью тэгов-контейнеров. Например, <p>Alice</p> представляет собой HTML-элемент. Выражение <div><p><b> Alice<imgscr="alice11.gif"></b></p></div> также является HTML-элементом. В первом примере элемент создан с помощью одного тэга. Во втором он представляет собой набор вложенных тэгов, каждый из которых, в свою очередь, является отдельным элементом. Помните, что вложенные тэги называются тэгами-потомками по отношению к тем тэгам, внутри которых они находятся. Последние называются тэгами-родителями (см. раздел «Наследование родительских свойств» в главе 2). В следующих разделах подробно описываются составляющие элемента.

Рис. 7.1. У элемента есть поле, рамка, расстояние от рамки до основного содержимого. Можно задать ширину и высоту элемента или оставить определение этих величин за браузером. Начальная точка элемента всегда находится в левом верхнем углу

132 Управление рамками и полями

Составляющие элемента У HTML-элемента есть четыре стороны: левая, правая, верхняя и нижняя (рис. 7.1). Они являются составляющими элемента, и к ним можно применять CSS-свойства. У каждой стороны элемента есть следующие свойства:

ширина и высота (width, height) – длины сторон элемента. Ширина относится к верхней и нижней части, а высота – к левой и правой стороне. Длина параллельных сторон (левая/правая и верхняя/нижняя) одинакова. Если вы не определите ширину и высоту элемента, это сделает браузер (см. следующий раздел); поле (margin) – пространство между рамкой и элементом и другими элементами окна (см. раздел «Поле элемента»); рамка (border) – линия, очерченная вокруг элемента. Рамка остается невидимой до тех пор, пока не определен ее цвет, ширина и стиль, например сплошная или пунктирная линия (см. раздел «Рамка элемента»); внутренний отступ (padding) представляет собой пространство между рамкой и содержимым элемента (см. раздел «Внутренний отступ»).

Элементы могут располагаться друг вокруг друга, а также встраиваться (см. раздел «Обтекание текстом»).

Тэги или контейнеры? Как вы, наверное, заметили, термин «HTML-тэг» часто используется не только в этой книге, но и в Internet. В HTML-тэге содержатся необходимые «инструкции» для браузера, определяющие его действия (например, тэг <blockquote>). У многих тэгов есть закрывающие тэги, которые начинаются со слэша (/). Например, тэг </blockquote> является закрывающим для тэга <blockquote>. Появление закрывающего тэга означает, что действие основного прекращается. Такие тэги называются контейнерами. Но часто тэгом является весь контейнер.

Содержимое элемента В центре элемента находится его содержимое (content). К этой области применяются все остальные CSS-свойства (шрифт, текст, цвет, фон и списки). Заметьте, что свойство «фон» относится и к заполненной части элемента. Содержимое включает в себя текст, списки, формы и изображения.

Ширина и высота элемента 133

Ширина и высота элемента С помощью свойств width и height можно определить ширину и высоту замененных элементов и элементов блок-уровня (см. раздел «Типы HTML-тэгов» в главе 1). Обычно браузер автоматически определяет ширину и высоту элемента. По умолчанию ширина совпадает с максимально допустимой, а высота может быть сколь угодно большой. Однако можно использовать CSS, чтобы установить оба эти свойства (листинг 7.1 и рис. 7.2).

Определение ширины элемента Рис. 7.2. Установлены ширина и высота изображения (которое выглядит неестественно сжатым) и текста. Форма элемента согласуется с шириной и высотой, а для текста, по-видимому, определена лишь ширина. Если вы не зададите свойство overflow, высота будет проигнорирована (см. раздел «Определение свойства overflow» в главе 9)

1. width: В списке CSS-определений напишите название свойства width и поставьте двоеточие.

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

<html> <head> <style type="text/css"> textarea {width: 225px; height: 100px;} .copy {width: 225px; height: 100px;} img {width: 5cm; height: 12cm} </style> </head> <body> <form action="#" method="get"> <textarea align="left" name="content" cols="40" rows="4">Alice remained looking ->thoughtfully at the mushroom... </textarea> </form> <img scr="alice11.gif" border="0" align="left"> <p class="copy"> Alice remained looking thoughtfully at the mushroom...</p> </body> </html>

134 Управление рамками и полями 2. 225px; Чтобы указать ширину элемента, используйте следующие значения (табл. 7.1): – длину; – процентную величину, которая определяет ширину элемента по отношению к ширине родительского элемента; – auto. Ширина элемента задается браузером. Обычно это максимальная длина, на которую можно растянуть элемент, чтобы он не вышел за края окна или родительского элемента.

Таблица 7.1. Возможные значения свойства width Значение

Совместимость

IE4, N4, CSS1

IE4, N4, CSS1

auto

IE4, N4, CSS1

Таблица 7.2. Возможные значения свойства height Значение

Совместимость

IE4, N6, CSS1

IE4, N6, CSS1

auto

IE4, N6, CSS1

Определение высоты элемента 1. height: Напишите название свойства height и поставьте двоеточие. 2. 100px; Чтобы указать высоту элемента, используйте следующие значения (табл. 7.2): – длину; – процентную величину, которая определяет высоту элемента по отношению к высоте родительского элемента; – auto. Высота элемента задается браузером. Она может быть сколь угодно большой в зависимости от размеров содержимого элемента. С помощью свойств width и height изменяют размер изображения (GIF или JPEG), определенный в тэге <img>. Скорее всего, изображение сильно исказится, но иногда таким образом можно добиться неплохого результата. При помощи свойств width и height поддерживается размер форм и кнопок.

Вы можете установить свойство height для любого элемента, но оно будет использоваться только в замененных тэгах (см. раздел «Типы HTML-тэгов» в главе 1). Другие тэги проигнорируют это свойство, если только вы не определите поведение перекрываемого содержимого элемента (см. раздел «Определение свойства overflow» в главе 9). Internet Explorer и Netscape понимают величину auto width по-разному. Internet Explorer растягивает элемент до границы с его родительским элементом, а Netscape – на ширину содержимого. При определении ширины элемента в Netscape 4 возникают ошибки. Если содержимое элемента не заполняет все пространство, то независимо от установленной ширины Netscape использует величину auto.

Поле элемента 135 Листинг 7.2. Поля можно устанавливать как в одном определении, так и в разных. В этом примере каждое поле указывается отдельно. В определение можно внести и стороны элемента

<html> <head> <style type="text/css"> p.paragraphtwo {margin: 5em;} h2 {margin: 1em;} p.copy { margin-top: 5em; margin-bottom: 10%; margin-left: 8em; margin-right: 200px; } </style> </head> <body> <h2>CHAPTER 7<br> A Mad Tea-Party</h2> <p class="copy">There was a table set ->out under a tree in front of the ->house...</p> <p class="paragraphtwo">The table was a large one...</p> </body> </html>

Поле элемента С помощью свойства margin определяется пространство между элементом и соседними элементами в окне. Для этого необходимо указать от одной до четырех величин (листинг 7.2), которые соответствуют всем сторонам элемента одновременно (парам «левая/правая» и «верхняя/нижняя») или каждой стороне в отдельности (рис. 7.3).

Определение полей элемента 1. margin: В списке определений напишите название свойства margin и поставьте двоеточие. 2. 5em; Чтобы указать размер поля, воспользуйтесь следующими значениями (табл. 7.3): – длиной; – процентной величиной, которая определяет поле по отношению к ширине родительского элемента; – auto. Размер поля задается браузером.

Таблица 7.3. Возможные значения свойства margin

Рис. 7.3. Поля первого текстового блока определены по отношению к рабочей области экрана

Значение

Совместимость

IE3, N4, CSS1

IE3, N4, CSS1

auto

IE3, N4, CSS1

136 Управление рамками и полями Поле с каждой стороны можно указать независимо от других (см. раздел «Поле с одной стороны»). Следует осторожно определять отрицательные поля вокруг ссылки. Если поле какого-либо элемента заходит на ссылку, она не будет работать. Поля также можно установить в тэге <body>. Таким образом задается расстояние между вложенными элементами и верхней и левой частями окна браузера. В Netscape 4 для верхнего и нижнего полей можно устанавливать только отрицательные значения. При определении полей с помощью процентных величин нельзя забывать о том, что результат зависит также и от размера окна пользователя. То, что хорошо смотрится при разрешении 640×480, может выглядеть плохо на экране большего размера. В Netscape 4 возникает ошибка: все элементы с полями работают как тэги блокуровня (см. «Типы HTML-тэгов» в главе 1).

Отрицательные поля Отрицательные поля можно использовать для получения интересных результатов, например перекрывания частей текста. Однако этот метод не всегда хорош, так как различные браузеры работают с ним по-разному. margin: -5em; Чтобы получить эффект перекрывания текста, лучше всего воспользоваться CSSпозиционированием (см. главу 8).

Поле с одной стороны Если вы хотите определить несколько полей, можно указать от одного до четырех значений, разделив их пробелами: margin: 5em auto 5em 25%

одно значение задает поле для всех четырех сторон; два значения устанавливают верхнее/ нижнее и левое/правое поле; три значения определяют верхнее, левое и правое/нижнее поле соответственно; четыре значения задают каждое поле индивидуально: верхнее, правое, нижнее, левое.

Можно указать поле только для одной стороны, не задумываясь о других трех. Это особенно полезно при использовании inline-стиля, который заменяет все определенные ранее поля. Чтобы установить поле для стороны, введите расположение стороны и величину поля: margin-top: 5em; margin-bottom: 10%; margin-left: 8em; margin-right: 200px; В Internet Explorer 4 и Netscape 4 свойствам margin-left и margin-right нельзя присвоить величину auto.

Рамка элемента 137 Листинг 7.3. Все атрибуты рамки для четырех сторон можно указать в одном определении или отдельно

<html> <head> <style type="text/css"> p{ width: 230px; border: 20px double #990000; padding: 5px; } .frame { width: 230px; border-top: 1mm dotted #990000; border-bottom: 3px dashed #990000; border-left: 3pt solid #990000; border-right: 2pc inset #990000; } </style> </head> <body> <div class="frame"><img ->scr="alice14.gif"></div> <p>This time Alice waited patiently ->until it chose to speak again...</p> </body> </html>

Рамка элемента С помощью свойства border можно одновременно определить все атрибуты рамки для четырех сторон элемента (листинг 7.3). Свойство border используется для установки ширины, стиля и/или цвета рамки (рис. 7.4). Допустимо также задать рамку для каждой стороны в отдельности (см. раздел «Рамка с одной стороны»).

Рамка с одной стороны Свойства рамки можно установить отдельно для каждой стороны: border-top: 1mm dotted #990000; border-bottom: 3px dashed #990000; border-left: 3pt solid #990000; border-right: 2pc inset #990000; Этот метод больше всего подходит для замены значений, установленных в свойстве border. К сожалению, Netscape 4 не поддерживает эти свойства. Для каждого стиля нужно определять свойства отдельно (см. следующий раздел).

Рис. 7.4. Картинка окружена рамкой, стороны которой различны. Текст обведен двойной рамкой

138 Управление рамками и полями

Установка рамки 1. border: В списке CSS-определений напишите название свойства border и поставьте двоеточие. 2. 20px Укажите значение свойства border-width и нажмите клавишу пробела. В качестве значения могут использоваться следующие величины (табл. 7.4): – длина. Если длина равна 0, то рамка не появится; – ключевое слово relative-size, например thin, medium, thick. 3. double Укажите стиль рамки. В табл. 7.5 перечислены все доступные стили. Если вы не хотите, чтобы у элемента была рамка, введите значение none. 4. #990000; Укажите цвет рамки. Эта величина может быть названием цвета, шестнадцатеричным кодом или RGB. Многие браузеры поддерживают свойство border, но не работают с остальными свойствами, определяющими вид рамки. В Netscape 4 возникает ошибка: все элементы, у которых есть рамка, работают как тэги блок-уровня (см. раздел «Типы HTML-тэгов» в главе 1).

Таблица 7.4. Возможные значения свойства border Значение

Совместимость

<border-width>

IE4, N4, CSS1

<border-style>

IE4, N4, CSS1

<border-color>

IE4, N4, CSS1

Таблица 7.5. Возможные значения свойства border-style Значение

Вид

Совместимость

None

IE4, N4, CSS1

Dotted

IE4*, N6, CSS1

Dashed

IE4*, N6, CSS1

Solid

IE4, N4, CSS1

Double

IE4, N4, CSS1

Groove

IE4, N4, CSS1

Ridge

IE4, N4, CSS1

Inset

IE4, N4, CSS1

Outset

IE4, N4, CSS1

* IE5.5 и IE6 для Windows.

Атрибуты рамки 139 Листинг 7.4. Все атрибуты рамки для четырех сторон можно указать в одном определении или отдельно

<html> <head> <style type="text/css"> .frame { border-style: inset; border-color: #ff0000; border-width: 10px; } p.frame { border-style: inset; border-color: red; border-top-width: 1px; border-bottom-width: 2px; border-left-width: 4px; border-right-width: 8px; padding: 5px; } </style> </head> <body> <div class="frame"> <img scr="alice06.gif" width="200" ->height="2445"> </div> <p class="frame">Alice was not a bit ->hurt? and she jumped up on to her ->feet in a moment...</p> </body> </html>

Атрибуты рамки Атрибуты рамки (стиль, цвет и ширина) определяются при помощи свойства border (см. предыдущий раздел). Однако каждый из этих атрибутов можно указать отдельно для элемента (листинг 7.4 и рис. 7.5) и даже для одной стороны (рис. 7.6).

Определение вида рамки 1. border-style:inset; Напишите название свойства borderstyle и укажите его величину (табл. 7.5). Если вы не хотите, чтобы у элемента была рамка, введите значение none. 2. border-color:#ff0000; Укажите цвет рамки (табл. 7.6). Это значение может быть названием цвета, шестнадцатеричным кодом или RGB (см. раздел «Значения и единицы» во введении).

Таблица 7.6. Возможные значения свойства border-color Значение

Совместимость

<color>

IE4, N4, CSS1

Рис. 7.5. Атрибуты рамки разные, но их общий вид совпадает

140 Управление рамками и полями 3. border-width:10px; Напишите название свойства borderwidth и укажите его значение (табл. 7.7): – длину. Если ширина равна 0, то рамка не появится; – ключевое слово thin, medium, thick. Необязательно включать в определение все атрибуты рамки. Если вы не введете какое-либо значение, оно будет установлено по умолчанию (см. приложение 2). В Netscape 4 возникает ошибка: все элементы с рамкой функционируют как тэги блокуровня (см. раздел «Типы HTML-тэгов» в главе 1). Таблица 7.7. Возможные значения свойства border-width Значение

Совместимость

thin

IE4, N4, CSS1

medium

IE4, N4, CSS1

thick

IE4, N4, CSS1

IE4, N4, CSS1

Рис. 7.6. На самом деле рамка выглядит весьма красиво, но это трудно оценить на черно-белом рисунке

Определение вида рамки для одной стороны Допускается устанавливать разные атрибуты рамки для сторон элемента. С помощью CSS можно определять вид рамки последовательно: border-style: ridge double dotted dashed; border-width: 20px 15px 10px 5px; border-color: red green blue purple; Чтобы задать свойства рамки отдельно для каждой стороны, нужно написать от одного до четырех значений (табл. 7.6): одно значение устанавливает ширину рамки для всех четырех сторон; два значения указывают ширину рамки для верхней/нижней и левой/правой сторон; три значения определяют ширину рамки для верхней, левой и правой/нижней стороны соответственно; четыре величины описывают ширину рамки для каждой стороны отдельно: верхней, правой, нижней, левой.

Внутренний отступ 141

Внутренний отступ Может показаться, что внутренний отступ (padding) и определение полей приводят к одному и тому же результату – появляется свободное пространство вокруг содержимого элемента. Разница же заключается в том, что внутренний отступ располагается между содержимым элемента и рамкой, а не между различными элементами на экране (листинг 7.5 и рис. 7.7).

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

Листинг 7.5. В зависимости от того, с какой стороны требуется пустое пространство, можно использовать одно, два, три или четыре значения

<html> <head> <style type="text/css"> .chpttitle { padding: 10% 1cm 10px 5em; border: dashed silver 1px; } img { padding-top: 25px; } </style> </head> <body> <h3 class="chpttitle">CHAPTER 4<br> The Rabbit Sends in a Little Bill</h3> <p> <img scr="alice12.gif" width="200" height="287" border="0" align="right">It was the ->White Rabbit...</p> <p>Very soon the Rabbit noticed Alice...</p> <p>'He tookme for his housemaid,'...</p> </body> </html>

142 Управление рамками и полями

Установка внутреннего отступа 1. padding; Напишите название свойства padding и поставьте двоеточие. 2. 10%1cm 10px5em; Укажите значение свойства (табл. 7.8): – длину; – процентную величину, которая определяет внутренний отступ по отношению к ширине родительского элемента. Одно значение устанавливает внутренний отступ со всех сторон; два – с верхней/ нижней и с левой/правой сторон; четыре – для каждой стороны отдельно.

Поля и рамки в таблице Таблицы давно стали главной составляющей Web-дизайна. Для управления страницами они используются практически на всех Web-сайтах, хотя изначально предназначались только для представления табличных данных. Но без таблиц Internet никогда бы не стал той средой мультимедиа, которую выбирают миллионы пользователей во всем мире. Сейчас это трудно представить, но многие были недовольны тем, что Netscape ввел таблицы в Navigator 1, так как таблицы не входили в HTML-стандарты W3C. С тех пор каждый Web-дизайнер использует таблицы, чтобы не помещать на странице объемные тексты и графику. Применение CSS в таблицах весьма удобно: все обычные атрибуты можно установить один раз и затем менять их в одном месте, а не в каждом из тэгов <table>, <tr>, <td> отдельно.

Таблица 7.8. Возможные значения свойства padding Значение

Совместимость

IE4, N4, CSS1

IE4, N4, CSS1

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

Внутренний отступ 143 Листинг 7.6. С помощью CSS можно значительно упростить работу с таблицами

<html> <head> <style type="text/css"> table { border: 2px solid red; font: 75px "arial black"; } td { width: 150px; border: 8px inset red; align: center; text-align: center; } td.lightBG { background-color: #cccccc; } td.darkBG { background-color: #666666; } </style> </head> <body> <table> <tr> <td class="darkBG">X</td> <td class="lightBG">O</td> <td class="darkBG">X</td> </tr> <tr> <td class="lightBG">X</td> <td class="darkBG">X</td> <td class="lightBG">O</td> </tr> <tr> <td class="darkBG">O</td> <td class="lightBG">O</td> <td class="darkBG"><br></td> </tr> </table> </body> </html>

С помощью CSS значительно упрощается работа с таблицами. В листинге 7.6 показано, как задать в таблице CSS-атрибуты рамки (рис. 7.8). Несмотря на то что для определения таблицы можно использовать CSS, остаются в силе все ограничения, существующие в браузерах по отношению к таблицам. В Netscape 4 нельзя определять ширину, высоту и рамку таблицы с помощью CSS. Однако можно менять фон, а также применять к содержимому ячеек другие CSSсвойства. Для этого нужно определить тэги <table>, <tr>, <td>.

Рис. 7.8. Таблицей управляют с помощью CSS, работать с которым проще, чем с громоздкими атрибутами тэгов

144 Управление рамками и полями

Обтекание текстом Когда в HTML, в самом начале его развития, была добавлена возможность располагать текст вокруг изображения (wrapping), дизайнерам это нововведение чрезвычайно понравилось. Но в CSS данное свойство усовершенствовано: текст может обтекать не только графические изображения, но и другой текст, а также таблицы (рис. 7.9). Для этого используется свойство float (листинг 7.7).

Рис. 7.9. Текст располагается вокруг картинки

Листинг 7.7. С помощью свойства float можно определить обтекание текстом как графического изображения, так и другого текста. В этом примере текст обтекает картинки слева

<html> <body> <style type="text/css"> img { float: right; } </style> </head> <body> <h2>CHAPTER 7<br> A Mad Tea-Party</h2> <p class="copy">There was a table set out...</p> <img scr="alice25.gif" width="288" height="219" border="0"> <p>The table was a large one...</p> <p>'Have some wine,' the March Hare said in an encouraging tone.</p> <p>Alice looked all round the table...</p> <p>'There isn't any,' said the March Hare.</p> <p>'Then it wasn't very civil of you to offer it,' said Alice angrily.</p> <p>'It wasn't very civil or you to sit down without being invited,' said the ->March Hare.</p> </body> </html>

Обтекание текстом 145 Таблица 7.9. Возможные значения свойства float Значение

Совместимость

left

IE4, N4, CSS1

right

IE4, N4, CSS1

none

IE4, N4, CSS1

Определение обтекания в селекторе 1. float: Напишите название свойства float и поставьте двоеточие (табл. 7.9). 2. right Введите ключевое слово, определяющее, по какой стороне экрана выравнивается элемент: – right. Элемент выравнивается по правой стороне, причем остальные элементы обтекают его слева; – left. Элемент выравнивается по левой стороне, причем остальные элементы обтекают его справа; – none. По умолчанию устанавливается такое же выравнивание, как и в родительском элементе. В этом примере float применяется к картинке, это приводит к тому же результату, что и использование align в тэге <img>. Свойство float можно применять не только к тэгу <img>, но и к любому другому. Например, можно задать обтекание текста другим текстом.

146 Управление рамками и полями

Отмена обтекания текстом Иногда необходимо прервать действие свойства float (рис. 7.10). Как и атрибут clear в HTML-тэге <br>, CSS-свойство clear определяет, когда нужно отменить обтекание элемента текстом.

Запрет обтекания текстом 1. clear: Напишите название свойства clear и поставьте двоеточие (листинг 7.8).

Рис. 7.10. Текст, который был определен с помощью класса nowrap, не обтекает картинку, а начинается после нее Листинг 7.8. Текст, который был определен с помощью класса nowrap, не обтекает картинку, а начинается после нее

<html> <head> <style type="text/css"> img {float: right; } .nowrap { clear: right; } </style> </head> <body> <h2>CHAPTER 7<BR> a Mad Tea-Party</h2> <p>There was a table set out...</p> <img scr="alice25.gif" width="288" height="219" border="0"> <p>The table was a large one...</p> <p class="nowrap">'Have some wine,' the March Hare said >in an encouraging ->tone.</p> <p class="nowrap">Alice looked all round the table...</p> <p class="nowrap">'There isn't any,' said the March Hare.</p> <p class="nowrap">'Then it wasn't very civil of you to offer it,' said Alice ->angrily.</p> <p>'It wasn't very civil or you to sit down without being invited,' said the ->March Hare.</p> </body> </html>

Отображение элемента на экране 147 Таблица 7.10. Возможные значения свойства clear Значение

Совместимость

left

IE4, N4, CSS1

right

IE4, N4, CSS1

both

IE4, N4, CSS1

none

IE4, N4, CSS1

2. left Выберите сторону или стороны элемента, по отношению к которым требуется отменить обтекание. Задайте значение left, right или both (табл. 7.10). Чтобы перекрыть другие свойства clear, введите значение none. 3. <pclass="nowrap">...</p> Теперь, в каком бы тэге вы не применили этот класс, текст не будет обтекать другие тэги, независимо от того, какое свойство float было установлено. Рекомендуется определять заголовки и названия так, чтобы они не располагались вокруг других объектов.

Отображение элемента на экране С помощью свойства display можно определить, будет строка разрываться до или после элемента, как элемент расположится по отношению к другим, станет ли он частью списка (листинг 7.9. и рис. 7.11) или вообще не будет отображаться на экране.

Рис. 7.11. Чтобы было легче проследить путь королевской процессии, этапы ее передвижения записаны в виде нумерованного списка

148 Управление рамками и полями

Определение отображения на экране 1. display: В списке CSS-определений напишите название свойства display и поставьте двоеточие. 2. list-item Введите ключевое слово, определяющее вид элемента на экране (табл. 7.11):

Таблица 7.11. Возможные значения свойства display Значение

Совместимость

list-item

IE5*, N4, CSS1

Block

IE4, N4, CSS1

Inline

IE5, N4, CSS1

None

IE4, N4, CSS1

* Только в MacOS.

– list-item. На первой строке помещается маркер списка, отступ сверху и снизу. Элемент становится частью списка; – block. Тэг определяется как тэг блокуровня, устанавливается разрыв строки над и под элементом; Листинг 7.9. Свойство display можно использовать для разных целей. В этом примере с его помощью абзацы преобразуются в элементы нумерованного списка, где описываются члены процессии

<html> <head> <style type="text/css"> .list { display: list-item; } img { display: none; } </style> </head> <body> <img scr="alice29.gif" width="200" height="236" border="0" align="right"> <ol> <p class="list">First came ten soldiers carring clubs...</p> <p class="list">next the ten courtiers...</p> <p class="list">After this came the royal children...</p> <p class="list">Next came the guests...</p> <p class="list">Then followed the Knave of Hearts...</p> <p class="list">last of all this grand prossesion, came THE KING AND QUEEN OF ->HEARTS.</p> </ol> </body> </html>

Отображение элемента на экране 149 Предварительная загрузка изображений Если на вашем сайте есть графические изображения больших размеров, для ускорения их загрузки можно использовать свойство display. Допустим, на первой странице сайта размещено мало изображений, но их много на второй. В этом случае можно включить в первую страницу тэг <img> из второй и установить display: none. Изображения загрузятся на первой странице, но они не будут отображаться на экране. При появлении в браузере второй страницы эти изображения загрузятся из кэш-памяти, что гораздо быстрее. Однако не переусердствуйте с размещением на первой странице дополнительных изображений, иначе может случиться так, что на второй странице появятся лишь частично загруженные картинки. Используйте только те изображения, которые должны появиться на странице в первую очередь. Тогда создастся впечатление, что страница загружается быстро, хотя на ней много графических объектов.

– inline. Тэг определяется как inlineтэг, разрыв строки исчезает; – none. Элемент не отображается в браузерах, поддерживающих CSS. 3. <ol><pclass="list">...</p> Добавьте класс в тэг. В этом примере в тэг <p>, который находится внутри тэга <ol>, введен класс list. Таким образом, каждый абзац становится элементом нумерованного списка. Браузер, поддерживающий CSS, проигнорирует все элементы, которым присвоено значение none. Однако задавать это значение нужно осторожно. Несмотря на то что none не является наследуемым значением, при его использовании с экрана исчезает не только сам элемент, но и его потомки. Не следует путать свойство display и visibility (см. раздел «Определение видимости элемента» в главе 9). Свойство visibility оставляет пространство для элемента, а display: none; полностью убирает элемент с экрана, хотя он продолжает загружаться. С помощью JavaScript можно создавать простые выпадающие меню, изменяя значение свойства display. Если вы зададите значение inline, меню появится, а если none – исчезнет (см. главу 24).

управление позиционированием

Многие пользователи жалуются на слишком низкую скорость соединений с Internet. Некоторые говорят в шутку, что WWW означает World Wide Wait – всемирное ожидание. Одной из причин невысокой скорости загрузки является использование графики для создания текста, который располагался бы на странице в запланированных дизайнером местах. На скорость загрузки страницы влияет также применение таблиц для распределения элементов в окне браузера или для размещения изображений, состоящих из нескольких отдельных картинок. Для загрузки таблицы требуется больше времени, чем для загрузки текста, при форматировании которого не использовались таблицы. Чем больше таблиц, тем медленнее загружается страница. CSS позволяет более точно позиционировать элемент и, следовательно, значительно ускорить загрузку страницы. Вы уже знаете, как с помощью CSS создавать поля и рамки (глава 7). Кроме того, посредством CSS можно размещать элементы в любом выбранном вами месте страницы (абсолютное положение) или задавать местоположение относительно других элементов на экране (относительное положение).

Что такое окно 151 В этой главе рассказывается, как с помощью CSS позиционировать элементы на странице и располагать их друг над другом.

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

Что такое окно Web-страницы отображаются в окне браузера (browser window). Можно открывать несколько окон, менять их размер, перемещать по экрану и даже преобразовывать в более маленькие окна, называемые фреймами (frames). Все, что вы хотите продемонстрировать посетителю вашей страницы, так или иначе отображается в окне браузера (рис. 8.1). В главе 12 подробно рассказывается о том, из чего состоит окно и окружающее его пространство, от каких значений зависит

как и у всех элементов, содержащихся в окне, у окна браузера есть ширина, высота, а также верхняя и нижняя части, правая и левая стороны (см. раздел «Что такое элемент» в главе 7). Окно можно рассматривать как главный элемент Web-дизайна, являющийся родительским по отношению ко всем остальным элементам; у окна браузера есть два значения ширины и два значения высоты. Ширина и высота окна браузера включает в себя все элементы управления. Ширина и высота действительной, или клиентской, части окна (live browser window) охватывает

Рис. 8.1. Окно браузера. Координаты верхнего левого угла элемента на сером фоне составляют (190px,130px)

152 Управление позиционированием

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

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

Тип позиционирования Объявляя атрибуты в селекторе HTMLтэга в CSS, вы определяете содержимое тэга как уникальный объект в окне (см. раздел «Что такое элемент» в главе 7), которым затем можно управлять с помощью CSS-позиционирования. Положение элемента может быть статическим, относительным, абсолютным или фиксированным, но в большинстве браузеров доступны лишь три первых варианта (листинг 8.1). Браузер размещает элемент в окне, используя определенный тип его положения (рис. 8.2).

Рис. 8.2. Позиционирование элементов в окне. Заметьте, что элементы, находящиеся внутри элемента с относительным положением, размещены относительно родительского элемента. Таким образом достигается эффект «лестницы»

Тип позиционирования 153 Листинг 8.1. В настоящее время существует три способа расположения элемента в окне: статический, относительный и абсолютный. В некоторых браузерах можно установить фиксированное положение элемента

<html> <head> <style type="text/css"> .stat {position: static; font: bold 28pt ->courier; color:#cccccc;} .abs {position: absolute; top: 25px; ->left: 375px; width: 100px; font: bold ->35pt helvetica; color: #666666;} .rel {position: relative; top: 70px; ->left: 25px; font: bold 12 pt times; ->color: #000000;} </style> </head> <body> <div class="stat">'Oh my years and ->whiskers, how late it's getting!' -></div> <div class="abs">'Oh my years and ->whiskers, how late it's getting!' -></div> <div class="srel">'Oh my years and -><span class="rel">whis<span ->class="rel>kers</span></span>, ->how late it's getting!'</div> </body> </html>

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

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

Абсолютное позиционирование С помощью абсолютного позиционирования создается независимый, существующий автономно от остальных частей документа элемент, в который можно помещать любое HTML-содержимое. Определенный таким образом элемент находится в точно заданной точке окна, то есть указываются его координаты по осям X и Y. Началом координат считается левый верхний угол окна или расположенного в нем элемента (координаты этой точки 0,0). При движении элемента вправо увеличивается значение x, а при движении вниз – значение y.

154 Управление позиционированием

Фиксированное позиционирование В настоящее время фиксированное позиционирование не поддерживается многими браузерами, например Netscape 4/6 и Internet Explorer для Windows. Internet Explorer 5 для Mac поддерживает данный вид позиционирования, но и в этом браузере возникают ошибки. Результат применения фиксированного позиционирования практически совпадает с результатом применения абсолютного. Элемент находится в определенном положении, он не зависит от других элементов страницы. Разница же заключается в том, что при прокрутке страницы фиксированные элементы остаются на своем месте.

Определение положения элемента 1. position: Напишите в HTML-тэге название свойства position в определении правила или в атрибуте style. 2. relative; Укажите значение свойства (табл. 8.1): – static. Статическое позиционирование; положение элемента нельзя изменить с помощью атрибутов top и left или с помощью JavaScript; – relative. Элемент располагается относительно родительского, положение элемента по отношению к обычному можно изменять посредством атрибутов top и left или с помощью JavaScript;

Таблица 8.1. Возможные значения свойства position Значение

Совместимость

static

IE4, N4, CSS2

relative

IE4, N4, CSS2

absolute

IE4, N4, CSS2

fixed

IE5*, CSS2

* Недоступно в Windows.

Фиксированное позиционирование Фиксированное позиционирование было введено в CSS второго уровня. Это весьма перспективное направление, особенно в области разработки фиксированных меню, всегда доступных посетителю страницы. Однако при использовании данного вида позиционирования возникает несколько проблем:

Netscape и Internet Explorer для Windows не поддерживают значение fixed. Несмотря на то что нельзя определить два типа позиционирования для одного элемента, возможно создание двух разных таблиц стилей для каждого браузера (см. раздел «CSS и операционная система» в главе 22); Internet Explorer 5 для Mac поддерживает значение fixed, однако и здесь возникает ошибка. При прокрутке страницы ссылки в фиксированном элементе не стоят на месте, то есть графика и текст ссылки остаются неподвижными, а невидимая область, которая отвечает за работу ссылки, перемещается.

Тип позиционирования 155 – absolute. Положение элемента в его родительском не зависит от других элементов. Если элемент не вложен в другой, то его положение определяется по отношению к телу документа; – fixed. Положение элемента в его родительском не зависит от других элементов, как и в предыдущем случае. Но в отличие от элемента с абсолютным положением, фиксированный элемент остается на своем месте при прокрутке страницы. (Помните, что значение fixed не поддерживается многими браузерами). 3. top:70px; После того как тип позиционирования установлен, можно задать действительное положение элемента (см. разделы «Определение положения по отношению к левому верхнему углу» и «Определение положения по отношению к правому нижнему углу»). Элементы можно располагать в порядке стека (stacking order – см. раздел «Элементы в порядке стека (3D-позиционирование)»), определять их видимость (visibility – см. раздел «Определение видимости элемента» в главе 9), отсекать конкретные части (clipping – см. «Определение видимой части элемента» в главе 9). В Internet Explorer нельзя управлять положением элемента, если он находится в тэге <body>. Если вы хотите определить положение тела Web-страницы, заключите ее содержимое в тэг <div> и применяйте позиционирование к нему (см. раздел «Относительные элементы, встроенные в абсолютные»).

Если элемент уже размещен в окне, его можно передвигать, скрывать или отображать на экране с помощью JavaScript или других языков (об этом подробно рассказывается в части 2). Netscape Mac/Windows и Internet Explorer для Windows не поддерживают значение fixed. Более того, в Internet Explorer для Mac возникает грубая ошибка, из-за которой в окне нельзя создать меню (см. раздел «Фиксированное позиционирование»). Если браузер не распознает атрибут fixed, то по умолчанию выбирается статический тип позиционирования. Если вы имеете представление о слоях Netscape (см. раздел «Слои Netscape» в главе 16), то вам должно быть знакомо и позиционирование. Однако в общем DHTML-браузере для создания слоев используется CSS, а не тэг <layer> (см. раздел «Создание объекта» в главе 11).

156 Управление позиционированием

Определение положения по отношению к левому верхнему углу Наряду с полями, которые задаются как часть свойств элемента (см. раздел «Поле элемента» в главе 7), позиционированному элементу можно присваивать значения top и left (листинг 8.2). Они используются для указания положения элемента по отношению к левой и верхней сторонам родительского элемента или по отношению к обычному положению (рис. 8.3–8.5).

Определение верхнего и левого поля 1. position:absolute; Чтобы установить положение элемента с помощью свойств top и left, нужно включить в то же правило свойство position. 2. left: В списке CSS-определений или в атрибуте style в HTML-тэге напишите название свойства left и поставьте двоеточие. 3. 9em; Укажите расстояние, на которое вы хотите переместить элемент вправо, используя следующие значения (табл. 8.2): – длину. Определяется расстояние от левого края элемента до левого края окна или родительского элемента; – проценты, например 55%. Перемещение задается относительно ширины родительского элемента; – auto. Расстояние вычисляется браузером, если элемент является абсолютным. Иначе left приравнивается к нулю.

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

<html> <head> <style type="text/css"> #object1 { position: absolute; top: 125px; left: 12em; border: silver solid 2px; } .changeplace { position: relative; top: 1cm; left: 1cm; background-color: #ffcccc; } </style> </head> <body> <div id="object1"> <img scr="alice27.gif" width="250" ->height="225" border="0" ->align="left"> <p>'I want a<span class= ->"changeplace"> clean cup</span>,' ->interrupted the Hatter: 'let's all ->move one place on.'</p> <p>He moved on as he spoke, and the ->Dormouse followed him...</p> <p>Alice didn't wish to offend the ->Dormouse again...</p> <p>'You can draw water out of a ->water-well...</p> </div> </body> </html> Таблица 8.2. Возможные значения свойств top и left Значение

Совместимость

IE4, N4, CSS2

IE4, N4, CSS2

auto

IE4, N4, CSS2

Определение положения по отношению к левому верхнему углу 157 4. top: В списке CSS-определений или в атрибуте style в HTML-тэге напишите название свойства top. 5. 125px; Укажите расстояние, на которое вы хотите переместить элемент вниз, используя следующие значения (табл. 8.2):

Рис. 8.3. Положение элемента определяется как абсолютное по отношению к левому верхнему углу окна, а фраза «clean cup» переместилась из своего обычного положения вниз и вправо

– длину. Определяется расстояние от верхнего края элемента до верхнего края окна или родительского элемента; – проценты, например 55%. Перемещение задается относительно ширины окна или родительского элемента; – auto. Если элемент является абсолютным, то значение перемещения вычисляется браузером. Иначе top приравнивается к нулю.

Рис. 8.4. На этом рисунке показано изначальное положение элементов

158 Управление позиционированием Необязательно включать в правило сразу оба определения left и top. Чтобы перемещать элемент вверх или вправо, можно использовать отрицательные значения. Если элемент имеет относительное положение, то при применении свойств left и top его поля не меняются. Следовательно, определение левых и верхних полей может привести к тому, что содержимое элемента выйдет за рамки своего обычного положения и закроет какой-либо другой элемент. Несмотря на то что свойства left и top не наследуются, вложенные элементы переместятся вместе с родительским.

Рис. 8.5. Положение элемента определяется как абсолютное по отношению к правому нижнему углу окна, а фраза «clean cup» переместилась из своего обычного положения вверх и влево

Рис. 8.6. На этом рисунке показано изначальное положение элементов

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

<html> <head> <style type="text/css"> #object1 { position: absolute; bottom: 125px; right: 12em; border: silver solid 2px; } .changeplace { position: relative; bottom: 1cm; right: 1cm; background-color: #ffcccc; } </style> </head> <body> <div id="object1"> <img scr="alice27.gif" width="250" ->height="225" border="0" ->align="left"> <p>'I want a<span ->class="changeplace"> clean ->cup</span>,' interrupted the ->Hatter: 'let's all move ->one place on.'</p> <p>He moved on as he spoke, and the ->Dormouse followed him...</p> <p>Alice didn't wish to offend the ->Dormouse again...</p> <p>'You can draw water out of a ->water-well...</p> </div> </body> </html>

Определение положения по отношению к правому нижнему углу Наряду с позиционированием верхней и левой стороны элемента можно позиционировать правую и нижнюю стороны (листинг 8.3). CSS второго уровня позволяет размещать элемент относительно его нижнего и правого края или родительского элемента (рис. 8.5 и 8.6). В настоящее время эти атрибуты доступны лишь в Netscape 6 и Internet Explorer 5/6.

Определение нижнего и правого поля 1. position:absolute; Чтобы определить положение элемента с помощью свойств bottom и right, нужно включить в то же правило свойство position. 2. right: Введите название свойства right и поставьте двоеточие. 3. 12em; Укажите расстояние, на которое вы хотите переместить элемент влево, используя следующие значения (табл. 8.3): – длину. Определяется расстояние от левого края элемента до правого края окна или родительского элемента; – проценты, например 55%. Перемещение задается относительно ширины родительского элемента; – auto. Значение перемещения вычисляется браузером, если элемент является абсолютным. Иначе right приравнивается к нулю.

160 Управление позиционированием 4. bottom: Введите название свойства bottom и поставьте двоеточие. 5. 125px; Укажите расстояние, на которое вы хотите поднять элемент, используя следующие значения (табл. 8.3): – длину. Определяется расстояние от нижнего края элемента до нижнего края окна или родительского элемента; – проценты, например 55%. Перемещение указывается относительно ширины окна или родительского элемента; – auto. Значение перемещения вычисляется браузером, если элемент является абсолютным. Иначе bottom приравнивается к нулю. Netscape и Internet Explorer версий 4 не поддерживают свойства bottom и right. Свойства left и right можно комбинировать с bottom и top. Каков будет результат, если для одного элемента установить значения top/left и bottom/right? Это зависит от браузера. В Internet Explorer по умолчанию используются свойства top и left. Допустим, определено свойство bottom, а высота элемента больше высоты станицы. Обычно нижняя часть элемента «уходит» за край страницы, и ее можно увидеть, прокрутив страницу вниз. Но если не видна верхняя часть элемента, таким образом ее увидеть не удастся. Поэтому использовать свойство bottom нужно осторожно.

Таблица 8.3. Возможные значения свойства bottom и right Значение

Совместимость

IE5, N6, CSS2

IE5, N6, CSS2

auto

IE5, N6, CSS2

Элементы в порядке стека (3D-позиционирование) 161 Листинг 8.4. Каждый элемент расположен чуть ниже предыдущего. Свойство z-index используется для того, чтобы поместить элемент с номером 1 над элементом с номером 2 и т.д.

<html> <head> <style type="text/css"> #element1 { position: absolute; z-index: 3; top: 175px; left: 255px; } #element2 { position: absolute; z-index: 2; top: 100px; left: 170px; } #element3 { position: absolute; z-index: 1; top: 65px; left: 85px; } #element4 { position: absolute; z-index: 0; top: 5px; left: 5px; } </style> </head> <body> <span id="element1"> <img scr="alice22.gif" width="100" ->height="147"><br clear="all"> Element 1 </span> <span id="element2"> <img scr="alice32.gif" width="140" ->height="201"><br clear="all"> Element 2 </span> <span id="element3"> <img scr="alice15.gif" width="150" ->height="198"><br clear="all"> Element 3 </span>

Элементы в порядке стека (3D-позиционирование) Несмотря на то что экран представляет собой двухмерное пространство, позиционированным элементам можно задать и третью размерность, то есть расположить их по отношению друг к другу в порядке стека. Позиционируемым элементам в порядке их появления автоматически присваивается номер: 0, 1, 2, 3, ... Номер выбирается по отношению к родительскому элементу и другим его потомкам. Такая система называется z-индекс. Номер z-индекса элемента определяет его 3D-отношение к другим элементам окна. Если элементы накладываются друг на друга, то на переднем плане появляется тот, чей номер больше. Обычный порядок элементов на странице можно изменить (листинг 8.4), определив свойство z–index (рис. 8.7 и 8.8).

Листинг 8.4 (окончание)

<span id="element4"> <img scr="alice29.gif" width="200" ->height="236"><br clear="all"> Element 4 </span> </body> </html>

162 Управление позиционированием

Определение z-индекса элемента 1. position:absolute; Чтобы установить уровень элемента в окне, нужно задать значение свойства position (см. раздел «Тип позиционирования»). 2. z-index: В том же списке определений напишите название свойства z-index и поставьте двоеточие. 3. 3; Укажите целое число. На этом шаге определяется z-индекс элемента по отношению к его соседям. 0 означает, что элемент будет находиться на том же уровне (табл. 8.4). Если вы хотите, чтобы z-индекс был выведен браузером, задайте значение auto. 4. top:5px;left:5px; Установите положение элемента.

Рис. 8.7. Результат использования z-индекса. Несмотря на то что элемент 1 должен находиться внизу, он появляется на переднем плане, так как его z-индекс равен 3

Использование отрицательного z-индекса приводит к тому, что элемент помещается на заданное количество уровней вниз от родительского элемента, а не вверх. С помощью JavaScript можно изменить порядок элементов в стеке (см. раздел «Перемещение объектов в 3D» в главе 13).

Рис. 8.8. Та же самая страница, что и на рис. 8.7, но здесь не применялось свойство z-index. Элементы появляются в обычном порядке стека. Элемент 1 теперь находится внизу, так как его обычный z-индекс равен 0 Таблица 8.4. Возможные значения свойства z-index Значение

Совместимость

IE4, N4, CSS2

auto

IE4, N4, CSS2

Абсолютные элементы, встроенные в относительные 163

Абсолютные элементы, встроенные в относительные Теперь вы знаете, как определять точное (абсолютное) положение элемента в окне. Элемент с абсолютным положением можно встроить в относительный элемент (листинг 8.5). При этом началом координат для абсолютного элемента считается левый верхний угол относительного элемента, а не окна (рис. 8.9). Рис. 8.9. Фон является абсолютным элементом, который встроен в относительный. Поэтому он не появляется в верхней части страницы, а сдвигается вниз на 75 пикселов вместе с родительским (относительным) элементом Листинг 8.5. В этом примере создаются два класса, один для относительного позиционирования, другой – для абсолютного. Тэг <div>, используемый относительным классом, встроен в абсолютный класс. Таким образом, абсолютный элемент является фоном для относительного и перемещается вместе с ним. Чтобы текст появлялся над абсолютным элементом, в тэге <p> определяется z-индекс

<html> <head> <style type="text/css"> .relElement { position: relative; top: 75px; } .absElement { position: absolute; z-index: 0; top: 0px; left: 0px; font-size: 36pt; color: #cccccc; } p{ position: relative; z-index: 100; } </style>

Определение абсолютного элемента внутри относительного 1. .relElement{...} Создайте относительно позиционированный класс. В примере элементы этого класса находятся на расстоянии 75px от верхней стороны окна. 2. .absElement{...} Создайте абсолютно позиционированный класс. Элементы данного класса появятся в левом верхнем углу родительского элемента, текст будет большого размера и серого цвета. 3. p{...} В примере относительный элемент появится над абсолютным, причем его z-индекс настолько велик, что этот элемент будет располагаться и над всеми остальными элементами на странице. 4. <divclass="relElement"> <divclass="absElement">...</div></div> Теперь в теле документа поместите абсолютные элементы в тэг с помощью класса relElement. Название книги имеет абсолютное положение по отношению к своему родительскому элементу, а не к окну.

164 Управление позиционированием Если вы хотите определить положение одного или нескольких абсолютных элементов по отношению друг к другу, а не к окну или другим элементам, то лучше всего использовать описанный выше метод комбинирования абсолютных и относительных элементов. Например, он очень удобен для создания тени (см. раздел «Простая тень» в главе 26).

Относительные элементы, встроенные в абсолютные Несомненное достоинство каскадных таблиц стилей – возможность точного позиционирования элемента в окне. Когда элемент с абсолютным положением встраивается в относительный элемент, началом координат считается левый верхний угол родительского элемента. Аналогично, когда относительный элемент встраивается в абсолютный (листинг 8.6), первый перемещается вместе с ним (рис. 8.10).

Листинг 8.5 (окончание)

</head> <body> <div class="relElement"> <div class="absElement"> Alice in Wonderland <br><img scr="alice03.gif" ->width="300" height="284" ->border="0"> </div> <p>Alice opened the door and found ->that it led into a small ->passage...</p> <p>There seemed to be no use in ->waiting by the little door...</p> <p>It was all very well to say ->'Drink me,'...</p> <p>However, this bottle was -><i>not</i> marked 'poison,'...</p> </div> </body> </html>

Определение относительного элемента внутри абсолютного 1. .absElement{...} Создайте абсолютно позиционированный класс. В данном примере элементы этого класса находятся на расстоянии 100px от левой стороны окна и окружены тонкой непрерывной границей слева. 2. .relElement{...} Создайте относительно позиционированный класс. Элементы этого класса появятся справа, текст будет выделен полужирным, заполнение пробелами – 1em, ширина элемента равна 215px.

Рис. 8.10. Относительный элемент имеет абсолютное положение в окне. Этот способ позволяет точно позиционировать элемент

Относительные элементы, встроенные в абсолютные 165 Листинг 8.6. В этом примере создаются два класса, один для абсолютного позиционирования, другой – для относительного. Относительный класс затем применяется в тэге <p>, который встроен в тэг <div>, использующий абсолютный класс. Таким образом, все содержимое страницы передвигается вправо. Заметьте, что строка из тэгов <br> находится вне абсолютного элемента. Это позволяет избежать ошибки в Internet Explorer, из-за которой не появляется полоса прокрутки

<html> <head> <style type="text/css"> .absElement { position: absolute; left: 100px; border-style: none none none solid; border-width: 0px 0px 0px 1px; border-color: #000000; padding: 10px; } .relElement { position: relative; float: right; font-weight: bold; padding: 1em; width: 275px; } </style> </head> <body> <div class="absElement"> <p class="relElement"> <img scr="alice37.gif" width="100" height="136" ->align="right">One of the jurors ->had a pencil that squeaked...</p> <p>The King and Queen of Hearts were seated on their throne when they ->arrived...</p> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -><br><br><br><br><br><br><br><br><br>><br><br><br><br><br><br><br><br><br><br><br> -><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html>

166 Управление позиционированием 3. <divclass="absElement"> <divclass="relElement">...</div></div> Теперь в теле документа поместите тэг <div> с абсолютным классом. Затем внутри тэга <div> введите относительный класс. Если большинство элементов являются абсолютно позиционированными, то при первой загрузке страницы Internet Explorer не зарегистрирует высоту элемента. В результате, даже если элемент не поместится на странице, полоса прокрутки не появится и посетитель будет вынужден использовать стрелки на клавиатуре для просмотра страницы. Полоса прокрутки отобразится, если пользователь изменит размер страницы. Чтобы полоса наверняка появилась, поместите тэги <br> в конце документа.

управление видимостью элемента

Динамический HTML позволяет отображать и скрывать элементы или их части, а CSS – устанавливать их видимость (visibility). Но сначала нужно научится менять видимость элемента с помощью JavaScript (см. главу 13), иначе управление видимостью не принесет ощутимого результата.

Определение видимости элемента Рис. 9.1. В этой версии свойство visibility не определяется. Это значит, что по умолчанию устанавливается значение visible

Рис. 9.2. На этом рисунке представлен результат применения кода. Свойству visibility присвоено значение hidden, а на месте элемента появляется пустое пространство

C помощью свойства visibility определяется видимость элемента при первом просмотре страницы. Если этому свойству присвоено значение hidden, то элемент не виден на экране, но занимает в документе определенное место. На экране область, занимаемая таким элементом, выглядит пустой (рис. 9.1 и 9.2).

168 Управление видимостью элемента

Установка видимости элемента 1. position:relative; Установите абсолютное или относительное положение элемента с помощью свойства position (листинг 9.1). 2. visibility: В CSS-определении элемента укажите название свойства visibility и поставьте двоеточие (табл. 9.1). 3. hidden Введите одно из ключевых слов, задающих видимость элемента на экране: – hidden. Элемент становится невидимым, хотя первоначально отображался; – visible. Элемент виден на экране; – inherit. Элемент наследует видимость своего родительского элемента. На первый взгляд кажется, что свойства visibility и display похожи, но на самом деле они кардинально отличаются друг от друга. Если свойству display присвоена величина none, то элемент удаляется из документа и пространство для него не выделяется. В CSS2 для свойства visibility определяется только три значения. Но в Netscape 4 добавлены еще два: show и hide. Netscape 4 распознает значения CSS2, но переводит их на свой язык, а это может создать проблемы, если вы хотите выяснить состояние видимости объекта с помощью JavaScript (см. раздел «Состояние видимости объекта» в главе 12). Кроме того, эти значения не поддерживаются Netscape 6. Для определения видимости отдельного элемента, если ее значение visible, рекомендуется указывать элемент с помощью его ID.

Листинг 9.1. Для класса hide определяется свойство visibility, элемент становится невидимым

<html> <head> <style type="text/css"> .hide { position: relative; visibility: hidden; } </style> </head> <body> <span class="hide"> <img scr="alice24.gif" width="350" ->height="238" align="right"> </span> <p>'I thought it would,' said the ->Cat, and vanished again.</p> <p>Alice waited a little, half ->expecting to see it again...</p> </body> </html>

Таблица 9.1. Возможные значения свойства visibility Значение

Совместимость

hide

N4*

hidden

IE4, N4, CSS2

show

N4*

visible

IE4, N4, CSS2

inherit

IE4, N4, CSS2

* Только N4, в N6 недоступно.

Определение видимой части элемента 169

Определение видимой части элемента Определяя ширину и высоту элемента, вы управляете его размерами (см. главу 7), а обрезая элемент (clipping), определяете, какая его часть будет видна на экране. Оставшаяся часть не удаляется, она просто становится невидимой и занимает на экране определенное место, которое отображается как пустое пространство (рис. 9.3).

Определение видимой части элемента Рис. 9.3. Из всего изображения мы видим только голову Чеширского кота. Король, Королева и Джек невидимы

Листинг 9.2. Видимая область определяется в классе clipInHalf, который затем применяется к элементу в HTML-коде

<html> <head> <style type="text/css"> .clipInHalf { position: absolute; clip: rect(15 350 195 50); top: 0px; left: 0px; } </style> </head> <body> <div class="clipInHalf"> <img scr="alice31.gif" width="379" ->height="480" align="left"> </div> </body> </html>

1. position:absolute; Установите абсолютное или относительное положение элемента (листинг 9.2). 2. clip: Введите название свойства clip и поставьте двоеточие. 3. rect(15 35019550) Чтобы определить форму видимой области, напишите rect (прямоугольник), откройте круглые скобки, укажите четыре значения, разделенных пробелами, и закройте скобки. Числа задают длину верхней, правой, нижней и левой сторон видимой области. Эти значения представляют собой расстояние от начала элемента (левого верхнего угла), а не от какой-либо стороны (рис. 9.4). Каждое значение может быть числом, которое переводится в пикселы, или auto, тогда размер видимой области определяется браузером (обычно 100%).

170 Управление видимостью элемента В табл. 9.2 перечислены эти значения и браузеры, которые их поддерживают. Границы и заполнение пробелами «вырезаются» вместе с элементом. В Netscape при определении видимой области возникают ошибки сразу в нескольких тэгах, включая и тэг <img>. Поэтому в таких случаях лучше всего использовать тэги <div> и <span>.

Таблица 9.2. Возможные значения свойства clip Значение

Совместимость

rect(<topLength>, <rightLengt>, <bottomLength>, <leftLength>)

IE4, N4, CSS2

auto

IE4, N4, CSS2

В настоящее время видимые области элемента могут иметь только форму прямоугольника, но в дальнейшем в CSS будут доступны и другие формы.

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

Управление невидимой частью 171

Управление невидимой частью Иногда не все содержимое элемента отображается на экране. Это происходит в том случае, когда выделяется видимая область элемента, у которой ширина и/или высота меньше, чем необходимая для элемента область. С помощью свойства overflow можно определить, каким образом будет работать браузер с этой не поместившейся на экране частью элемента (рис. 9.5). Рис. 9.5. Чтобы увидеть не поместившееся на экране изображение, можно использовать полосу прокрутки

Определение свойства overflow

Листинг 9.3. В классе illustration определяется ширина и высота, равные 200px, свойству overflow (часть элемента, которая не будет видна в этой области) присваивается значение auto. Полоса прокрутки будет располагаться там, где это необходимо для просмотра не поместившейся на экране части элемента. Класс затем применяется к элементу в HTML-коде

1. width:200px;height:200px; Укажите ширину и/или высоту области, ограничивающей элемент (листинг 9.3). Также можно установить видимую область элемента с помощью значений, указанных в табл. 9.3 (см. раздел «Определение видимости элемента»). 2. overflow: Введите название свойства overflow и поставьте двоеточие. 3. auto; Укажите одно из ключевых слов, задающих работу браузера с невидимой частью (табл. 9.3):

<html> <head> <style type="text/css"> .illustration { width: 200px; height: 200px; overflow: auto; float: right; margin: 5px; } </style> </head> <body> <div class="illustration"> <img> scr="alice35.gif" width="401" ->height="480"> </div>

– scroll. Рядом с видимой областью элемента помещается полоса прокрутки. Таким образом посетитель Таблица 9.3. Возможные значения свойства overflow Значение

Совместимость

scroll

IE4, N6, CSS2

hidden

IE4, N6, CSS2

visible

IE4, N6, CSS2

inherit

IE4, N6, CSS2

172 Управление видимостью элемента сможет увидеть не поместившуюся на экране часть элемента; – hidden. Оставшаяся часть элемента скрывается, а полоса прокрутки не появляется; – visible. Оставшаяся часть элемента отображается на экране. Это ключевое слово сообщает браузеру, что нужно проигнорировать определенную ранее видимую область; – auto. Это значение позволяет браузеру понять, как обращаться с оставшейся частью элемента. Если свойство overflow не определено, многие браузеры проигнорируют свойство, установленное для элемента height. Свойство overflow также используется для описания того, что делать с видимой частью элемента, когда она становится невидимой.

Листинг 9.3 (окончание)

<h3>CHAPTER 9<br>The Mock Turtle's ->Story</h3> <p>'You can't think how glad...</p> <p>Alice was very glad to find her... -></p> <p>'When <i>I'm</i> a Duchess,' she ->said to herself...</p> <p>She quite forgotten the Duchess by ->this time...</p> </body> </html>

○ ○ ○ ○ ○ ○

○

Динамический HTML

○

Часть II ГЛАВА 10 ГЛАВА 11 ГЛАВА 12 ГЛАВА 13 ГЛАВА 14 ГЛАВА 15 ГЛАВА 16 ГЛАВА 17

◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆

Назначение DHTML .................................................. 174 Объек тная мо дель документа ................................. 182 Объектная модель Среда, в которой вы работаете ............................... 207 Основы динамических технологий ......................... 236 Развитые динамические технологии ....................... 250 Динамические технологии CSS .............................. 275 Слои Netscape ......................................................... 283 Internet Explorer для Windows ................................. 297

назначение DHTML Каким должен быть DHTML Не существует официального и даже стандартного определения DHTML, но есть несколько бесспорных положений:

DHTML использует HTML-тэги и языки написания сценариев, не требуя модулей расширения или какого-либо программного обеспечения, кроме браузера; как и HTML, DHTML работает (или есть такая возможность) во всех браузерах и на всех платформах; DHTML расширяет интерактивные и визуальные возможности Webстраниц.

Каким бы мощным инструментом ни являлись каскадные таблицы стилей, они по сути своей не динамичны. CSS позволяют определять, как будет выглядеть документ при первой его загрузке, но не более. Свойства Web-страниц, созданных с помощью CSS, можно менять динамически посредством языка JavaScript. Динамические возможности Netscape и Internet Explorer различны, что приводит к взаимной несовместимости браузеров. Однако у них все же есть общие функции, позволяющие использовать те преимущества, которые дает DHTML. В этой главе рассказывается о назначении и составляющих DHTML.

Динамический HTML На самом деле языка DHTML нет, по крайней мере его существование не похоже на существование HTML и JavaScript, которые представляют собой определенные технологии для Internet. Динамический HTML – это коммерческий термин, придуманный Netscape и Microsoft для описания ряда технологий, которые были введены в четвертой версии Web-браузеров и предназначались для расширения их динамических возможностей.

Особенности DHTML 175

Рис. 10.1. Положения Netscape

Эти технологии были созданы или добавлены для того, чтобы обойти те ограничения, которые, как полагали, существовали при разработке Web-страниц при помощи HTML. Internet хорошо взаимодействовал как с текстом, так и с графикой, но люди, привыкшие к мультимедиа, ждали большего. Созданная на основе DHTML страница может изменяться, не обращаясь к серверу за дополнительными данными. Программисты называют такой код клиентским, или кодом на стороне клиента (client-side code).

Особенности DHTML

Рис. 10.2. Положения Microsoft

Рис. 10.3. На пересечении версий Netscape и Microsoft схематически представлен общий DHTML, включающий CSS, JavaScript и DOM

К сожалению, представления Microsoft (рис. 10.1) и Netscape (рис. 10.2) о технологиях DHTML различны. Однако стандарты названных компаний имеют общие черты (рис. 10.3), именно они и обсуждаются в этой книге. Почему? Потому что Web основывается на простом соображении: вид Web-документов не должен зависеть от используемого программного обеспечения. Чтобы идти в ногу со временем, в новые браузеры приходилось включать технологии, которые не поддерживались официальными (старыми) версиями. Однако при работе с этими технологиями необходимо помнить один важный принцип: каждый пользователь должен иметь доступ к информации независимо от того, какой двоичный код применяется в его программном обеспечении.

176 Назначение DHTML

DHTML в Netscape Стараясь сделать Web-страницы более динамическими, Netscape разработала несколько новых технологий. К сожалению, они никогда не станут стандартами, так как практически не отличаются от CSS, которые одобрены W3C. В качестве альтернативы CSS в Netscape были введены таблицы стилей JavaScript (JSS). Как и в CSS, с помощью JSS можно определять функционирование HTML-тэга, но в JSS применяется синтаксис JavaScript. Netscape 4 – единственный браузер, который совместим с JSS. Эта устаревшая технология не поддерживается последней версией Netscape (N6), поэтому я не рекомендую использовать JSS. Netscape также ввела слои (layers), которые являются прототипом CSS-позиционирования. С помощью слоев, как и с помощью CSS-позиционирования, можно управлять положением и видимостью элементов на экране. Но, как и в случае с JSS, они поддерживаются только в Netscape 4, а в Netscape 6 вместо них уже используется CSS-позиционирование, поэтому не рекомендуется включать в Web-страницы слои Netscape.

поддерживают, в том числе и Internet Explorer, поэтому их также не стоит использовать.

Общий DHTML Что же представляет собой DHTML, поддерживаемый и Netscape, и Internet Explorer? К счастью, DHTML включает в себя гораздо больше возможностей, чем было описано в предыдущем разделе. В настоящее время многие браузеры позволяют работать со следующими технологиями:

DHTML в Microsoft Многое в версии Microsoft, например технология ActiveX, основано на запатентованном этой корпорацией программном обеспечении. ActiveX принадлежит Microsoft, и маловероятно, что она войдет в область пересечения, показанную на рис. 10.3. Я не советую использовать эту технологию. С помощью визуальных фильтров к тексту и графике документа можно создавать различные эффекты. Если вы когда-либо имели дело с фильтрами Photoshop, принцип работы визуальных фильтров будет вам понятен. Однако эти фильтры не являются стандартными, многие браузеры их не

каскадные таблицы стилей (CSS). С помощью CSS определяются свойства элемента на странице. Более старые версии браузеров (Netscape 4 и Internet Explorer 4) поддерживают CSS первого уровня и CSS-позиционирование, браузеры последнего поколения (Netscape 6 и Internet Explorer 6) – CSS второго уровня; JavaScript. С помощью JavaScript создаются простые программные коды, которые управляют функционированием объектов Web-страницы. В Netscape и Internet Explorer не всегда применяются одинаковые программные коды JavaScript, однако они имеют много общего, что позволяет использовать их, несмотря на несовместимость этих браузеров; объектная модель документа (DOM). Во всех браузерах, поддерживающих DHTML, есть какая-либо версия DOM, с помощью которой можно получить доступ к любому объекту в окне браузера. Однако W3C до сих пор не стандартизировал DOM. Чтобы страницы, созданные на основе DHTML, правильно отображались во всех браузерах, DHTML должен работать с DOM, поддерживаемой Netscape 4 и Internet Explorer 4.

Причины использования DHTML 177

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

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

DHTML поддерживает большинство браузеров – Netscape 4/6 и Internet Explorer 4/5/6, которые используются основной частью посетителей. Такие браузеры, как Opera и iCab, частично поддерживают DHTML; небольшой размер файлов. Как и HTML, DHTML создается с помощью текстовых файлов, размеры которых меньше, чем у графических. Текстовые файлы загружаются быстрее, чем Flash и Java; не требуется модулей расширения (plugin). Если браузер поддерживает HTML, CSS, JavaScript и DOM, то он поддерживает и DHTML; DHTML просто изучить. Если вы знаете HTML и JavaScript, вы легко освоите и DHTML; быстрота разработки. Многое из того, что Web-дизайнеры создают с помощью графики и JavaScript, можно гораздо быстрее сделать, используя DHTML;

быстрота загрузки. DHTML удобен для того, чтобы скрывать, отображать и менять элементы страницы, не загружая новые. Это увеличивает скорость работы Web-сайта, так как количество обращений к серверу уменьшается;

отсутствие Java-программирования. Хотя DHTML выполняет в основном те же функции, что и Java, для работы с ним вам не придется в полной мере изучать этот язык (однако знание основ JavaScript все же потребуется).

Недостатки DHTML Но не все так просто. Чтобы использовать DHTML, нужно знать как его сильные, так и слабые стороны :

несовместимость браузера и операционной системы. Страницы, созданные при помощи CSS, JavaScript и DOM, выглядят по-разному в разных браузерах, но иногда и в одинаковых, работающих в разных операционных системах. В этой книге представлены различные решения подобных вопросов, однако некоторых проблем все-таки не избежать (см. раздел «Различия между браузерами» в главе 28);

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

ошибки в браузерах. Во многих браузерах возникают ошибки, приводящие к тому, что DHTML перестает работать,

178 Назначение DHTML но затем его работа внезапно возобновляется. Одним из примеров может служить ошибка, возникающая в Netscape и относящаяся к изменениям размера страницы. Если вы изменяете размер окна в Netscape, а в это время на экране отображается страница, использующая CSS (см. раздел «Добавление CSS на Web-сайт» в главе 2), то при перерисовывании страницы таблица стилей не будет применяться до тех пор, пока страницу не перезагрузят (см. раздел «Исправление ошибки в Netscape CSS» в главе 22). Далеко не все ошибки можно исправить или обойти.

Flash и DHTML Macromedia Flash и DHTML появились почти одновременно около четырех лет назад. И с тех пор при добавлении элементов интерактивности на сайт Web-дизайнерам приходится делать выбор: Macromedia Flash или DHTML. DHTML позволяет работать с интерактивностью при помощи HTML, CSS и Java-Script. Flash представляет собой некоторый объект, встраиваемый в HTML-страницу, и является отдельной Internet-технологией (см. раздел «Что такое Flash»). Далее рассказывается о достоинствах и недостатках главного конкурента DHTML – это поможет вам выбрать наиболее подходящую технологию.

Что такое Flash В 1997 году компания Macromedia приобрела программу FutureSplash Animator, добавила в нее интерактивные функции и возможность написания сценариев, переименовала программу в Flash и предложила ее как способ создания динамической графики для Internet. До этого момента графика в Web оставляла желать лучшего. Единственным способом добавить движение в окно браузера были анимационные картинки в формате GIF или PNG. Ситуация изменилась с появлением Flash, позволившего Web-дизайнерам управлять видом и функционированием элементов страницы. Важно помнить, что Flash одновременно является и программой (Flash, Macromedia Inc.), и файловым форматом (расширение .swf, произносится «свиф»). Файловый формат в настоящее время считается открытым. Корпорация Adobe Systems Inc. разработала программу для создания движущихся картинок Flash – LiveMotion.

Flash и DHTML 179

Преимущества Flash

Недостатки Flash

Flash становится все более популярным среди дизайнеров, и этому есть несколько причин:

Наряду с преимуществами, у Flash есть и недостатки:

платформенная независимость. Страницы, созданные при помощи Flash, выглядят примерно одинаково и в Internet Explorer 5 под Mac, и в Netscape 4 под Windows. В отличие от HTML, JavaScript и CSS, которые разрабатывались различными компаниями, производящими браузеры, Flash создан в одной корпорации. Таким образом, не существует взаимной несовместимости браузеров и операционных систем; повсеместность. По словам представителей компании Macromedia, у 95% пользователей Web установлена какая-либо из версий проигрывателя Flash. Возможно, эти цифры завышены, но вероятность того, что посетители вашего Webсайта смогут увидеть его Flash-содержимое, велика; привлекательность. Flash предоставляет дизайнерам огромное количество инструментов. К тому же многие из дизайнерских наград получены за разработку Web-сайтов с использованием Flash; небольшой размер. Если Flash-файлы созданы правильно, они не занимают много места и достаточно быстро загружаются.

Flash трудно изучать и создавать с его помощью Web-страницы. Программные коды HTML, CSS и JavaScript можно записывать в простом текстовом редакторе, но чтобы создавать Flash-файлы, необходимо купить и изучить Macromedia Flash или Adobe LiveMotion. Обе эти программы сложны; несовместимость. У многих пользователей имеется проигрыватель Flash, но не самой последней версии. Таким образом, не все смогут посмотреть графику Flash. Чтобы увидеть ваш сайт, пользователю придется загрузить последнюю версию Flash. То же верно и в отношении браузеров, но обычно посетители Web не любят загружать различные модули расширения; неправильное использование. С помощью Flash создают более гибкий интерфейс, чем с помощью HTML. Но стандартный Web-интерфейс на основе Flash может только запутать пользователя; долгая загрузка. Очень трудно уменьшить размер графических файлов Flash. Многие дизайнеры забывают о небольшой скорости модемной связи с Internet и о том, что загрузка больших файлов займет некоторое время.

180 Назначение DHTML

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

программное обеспечение посетителей. Поддерживают ли их браузеры DHTML, установлена ли у них текущая версия Flash plug-in, возможна ли несовместимость с plug-in? Первое правило Webдизайна: «Знай своих посетителей»;

денежные вложения. Затраты на DHTML не превосходят затрат на HTML. Flash

Рис. 10.4. Выбирая между Flash и DHTML, нужно иметь в виду следующие факторы: доступные технологии, стоимость, уровень мультимедиа, содержание сайта, необходимое для создания сайта время

Проблема выбора 181 Удобство и простота Главный специалист по Web-usability Якоб Ниелсен (Jakob Nielsen) активно выступает против Flash. В своей статье «Flash плох в 99%» (www.useit.com/ alertbox/20001029.html) он рассказывает о том, что Web-дизайнеры со стажем ломают традиции, а это может запутать пользователя. В ответ на эти заявления Macromedia создала сайт (www.macromedia.com/go/ usability), на котором находятся статьи об удобстве использования Flash.

же требует покупки программного обеспечения (Flash или LiveMotion). Цена этих программ достигает нескольких сотен долларов без учета стоимости обучения; использование на сайте эффектов мультимедиа. Для создания и представления мультимедийного содержания больше подходит Flash, а не DHTML; текстовое содержание сайта. Для представления большого количества текстов больше подходит DHTML и HTML. Несмотря на большие успехи Flash в использовании технологий печати страниц, он все же не может заменить HTML; время, отпущенное на разработку сайта. Как правило, сайт на основе DHTML создается быстрее, но это зависит от того, какую технологию вы знаете лучше; предполагаемая аудитория. Если посетители хотят увидеть фейерверки, то вам понадобится Flash. Если же требуется простой сайт, выбирайте DHTML.

объектная модель документа

Рис. 11.1. Определение объектной модели документа на сайте W3C (www.w3.org/DOM)

С помощью объектной модели документа (Document Object Model – DOM) можно динамически менять Web-страницу, используя язык написания сценариев. DOM ставит в соответствие каждому элементу, определенному с помощью атрибута ID, то есть объекту, функцию JavaScript. Таким образом, вы вправе менять любое свойство, которым можно управлять с помощью CSS. К сожалению, в браузерах Netscape 4 и Internet Explorer 4 используются разные технологии DOM. Но в последних версиях этих браузеров применяется DOM, описанная в стандартах W3C (рис. 11.1). В этой главе описывается, как работают наследованные и стандартизированные DOM, как создать модель, совместимую с любым браузером, который поддерживает DHTML. Вы также познакомитесь с обработчиками событий, которые используются для запуска события с помощью DOM.

DOM – путеводитель по Web-странице 183 Какой атрибут лучше использовать: name или id? Чтобы идентифицировать картинку и использовать ее вместе с DOM в браузере, можно применить атрибут name: <imgname="button1"scr= ->"button_off.png"> Другие элементы нужно идентифицировать с помощью атрибута id: <divid="layer1"></div> Теоретически id полезен и для идентификации картинки. Этот метод работает в Netscape, но Internet Explorer распознает только те картинки, которые определены с помощью атрибута

DOM – путеводитель по Web-странице Написав письмо, вы указываете на конверте страну, город, улицу, номер дома адресата и, конечно, его имя. Примерно так выглядел бы этот процесс в JavaScript: usa.newyork.sesameST.123.ernie. Затем сообщение отсылается получателю. Почтальон прочитает адрес и найдет на карте точное местоположение адресата. В Нью-Йорке на улице Сезам в доме № 123 живет только один Эрни, поэтому вы можете быть уверены, что письмо дойдет до адресата. Если вы хотите послать письмо кому-то, чей адрес совпадает с адресом Эрни, вам нужно лишь изменить имя: usa.newyork.sesameST.123.bert. Эти два адреса очень похожи, но все же они уникальны. DOM – это своеобразный адрес, определяющий местоположение объекта на HTMLстранице. Используя такой адрес, можно послать сообщение объекту с помощью JavaScript. Каждый элемент в окне или, по крайней мере, элемент внутри HTML-тэга легко идентифицировать с помощью атрибутов name или id, при этом элементу присваивается уникальный адрес, из простого элемента он превращается в объект. DOM описывает путь, который начинается в окне и проходит через различные объекты на Web-странице. В примере описана объектная модель документа для картинки button1: window.document.images.button1. В данном случае DOM – адрес картинки, которая находится в документе в текущем окне и называется button1. Если вы хотите получить доступ к картинке button2, воспользуйтесь DOM: window.document.images.button2.

184 Объектная модель документа Например, для того, чтобы функция JavaScript послала объекту сообщение о том, какую картинку он должен отобразить (scr) или какой CSS-стиль использовать (style), следует указать путь: window.document.images.button1.scr= ->"button_on.gif" Этот метод неплохо работает при доступе к картинкам. К сожалению, Netscape 4 и Internet Explorer 4 имеют разные карты объектов, определенных с помощью CSS. В этих браузерах существуют различные форматы создания адресов элементов на Web-странице, что можно сравнить с двумя системами улиц, которые используются для достижения одного адресата. Недавно W3C выпустил стандарт DOM, которого придерживаются как Netscape 6, так и Internet Explorer 5/6. Свойства Web-страниц, созданных с помощью CSS, можно изменять даже в тот момент, когда они находятся на экране, то есть динамически, используя язык написания сценариев и DOM (табл. 11.1). Многие в качестве языка написания сценариев применяют JavaScript, так как этот язык максимально доступен. Однако на CSS можно влиять и с помощью других языков, которые поддерживает ваш браузер. Например, в Internet Explorer используется язык VBScript. Когда вы посылаете письмо адресату, находящемуся в вашей же стране, необязательно указывать ее название. Так же происходит при определении окна, на которое вы хотите ссылаться с помощью DOM. Предполагается, что это будет окно, в котором находится код. Таким образом, DOM начинается с document.

Таблица 11.1. Возможности, предоставляемые DOM Возможность

Совместимость

Изменение CSS-свойств элемента, когда он находится на экране

IE4, N6

Изменение z-индекса элементов

IE4, N4

Возможность скрывать IE4, N4 элементы или показывать их на экране Управление положением IE4, N4 элементов в зависимости от установок пользователя Перемещение элементов на экране

IE4, N4

Перемещение элементов на экране посетителем

IE4, N4

Изменение видимой области элемента

IE5, N4

CSS-слои Часто объекты, которые используют ID, называются слоями. Это может привести к путанице, так как термин «слой» предназначен для описания похожей технологии в Netscape (см. главу 16). HTML-тэг легко превратить в CSS-слой, добавив атрибут ID. Тот же результат достигается в Netscape при использовании тэга <layer>. Термин «слой», по-видимому, относится к CSS-объектам. Слои Netscape скоро уйдут в прошлое, так как последняя версия Netscape (6) их не поддерживает. Чтобы избежать путаницы, в этой книге под слоями понимаются CSSслои. Если же возникнет необходимость ссылаться на слои Netscape, они так и будут называться.

Создание текста 185

Создание объекта Объект – это HTML-элемент (см. раздел «Что такое элемент» в главе 7), который определен с помощью ID (или, если это картинка, с помощью атрибута name). У HTMLэлемента есть уникальный адрес в окне браузера, который позволяет обращаться к нему с помощью DOM. Определяя HTML-элемент (рис. 11.2) как объект, вы получаете возможность менять любые его свойства, по крайней мере те, что позволит вам изменить браузер.

Определение объекта Рис. 11.2. С помощью JavaScript и DOM можно динамически воздействовать на слои

Листинг 11.1. CSS-слой устанавливается с помощью определения тэга с ID, положение которого может быть абсолютным или относительным

<html> <head> <style type="text/css"> #object1 { position: absolute; top: 100px; left: 150px; visibility: visible; width: 210px; } </style> </head> <body> <div id="object1"> <h3>This is Object 1</h3> <img scr="alice04.gif" width="200" ->height="298" border="0"> </div> </body> </html>

1. #object1{position:absolute;} Добавьте ID-правило в CSS, установите абсолютное или относительное положение элемента (см. «Определение ID для идентификации объекта» в главе 2). Вы можете ввести и другие определения, но сначала нужно задать этот слой как CSS-слой (листинг 11.1). 2. <divid="object1">...</div> Примените ID к HTML-тэгу. Для слоев с абсолютным положением лучше использовать тэг <div>, а с относительным – тэг <span> (см. разделы «Создание inline-тэгов» и «Создание HTML-тэгов блок-уровня» в главе 2).

Обработчики событий В мире JavaScript событиями называются какие-либо действия в окне браузера, инициатором которых обычно является посетитель. Например, если посетитель наводит указатель мыши на ссылку, то происходит событие mouseover.

186 Объектная модель документа События происходят, когда браузер выполняет какое-либо действие, например загружает новый документ (load) или покидает Web-страницу (unload). Обработчик события (event handler), синтаксис которого – название события с предшествующим ему словом «on» (onload), позволяет определять действия, связанные с каким-либо событием (рис. 11.3). В табл. 11.2 перечислены обработчики событий, которые используются чаще всего. Посетите сайт www.webbedenvironments.com/ dhtml/eventhandlers/, чтобы увидеть все эти события на одной странице. Она создана мной, чтобы продемонстрировать работу обработчиков событий (рис. 11.4).

Рис. 11.3. Синтаксис обработчика события

Рис. 11.4. На сайте www.webbedenvironments.com/ dhtml/eventhandlers/ представлены все примеры событий, которые обсуждаются в этой главе Таблица 11.2. Обработчики событий Событие

Когда происходит

На что влияет

onLoad

После загрузки объекта

Документы и картинки

onUnload

При выгрузке объекта

Документы и картинки

onFocus

При получении элементом фокуса

Документы и формы

onBlur

При потере элементом фокуса

Документы и формы

onMouseOver

Указатель мыши проходит над областью

Ссылки и области картинок

onMouseOut

Указатель мыши выходит из области

Все*

onClick

При щелчке мышью на области

Все*

onMouseDown

Кнопка мыши нажата

Все*

onMouseUp

Кнопка мыши отпущена

Все*

onMouseMove

Мышь двигается

Документ

onKeyDown

Клавиша на клавиатуре нажата

Формы

onKeyUp

Клавиша на клавиатуре отпущена

Формы

onKeyPress

Клавиша нажата и сразу же отпущена

Формы

onResize**

Изменяются размеры окна браузера или фрейма

Документ

onMove***

Окно браузера перемещается

Документ

* Картинки и области картинок только в Netscape 4. ** Не поддерживается в IE4. *** Не поддерживается в IE4/5 и Netscape 6.

Обработчики событий 187

Обработчики событий и DOM Размещение обработчиков событий Во многих примерах данной книги обработчики событий находятся в тэгах <body>, <form> или <a>. Это сделано изза взаимной совместимости браузеров, так как только в этих тэгах в Netscape 4 можно создать событие. В Netscape 6 и Internet Explorer 4/5/6 события разрешается создавать в любом элементе окна браузера. Таким образом, любой обработчик событий можно разместить с помощью соответствующего ему тэга. Например, тэг <p> используется для создания события onmouseover. Этот недостаток Netscape 4 приводит к большим ограничениям общего DHTML. Когда данный браузер выйдет из употребления, DHTML будет употребляться в Web повсеместно.

Большинство изменений стилей объекта, которые производятся с помощью DOM, должны начинаться с запуска обработчика событий. Но иногда JavaScript начинает работать только после того, как событие произойдет. Я потерял много времени, пытаясь выяснить, почему не функционирует JavaScript, пока не понял, что просто забыл запустить сценарий из события. Это не значит, что нельзя запустить JavaScript, если в этот момент не происходит никакого события. Многие функции JavaScript динамически работают со страницей или с окном, и для этого не требуется никакого события. Может показаться, что атрибут href действует как обработчик события onClick, но это не так. Если запустить DHTML-код из данного события, он, возможно, не будет выполняться. Если вы хотите, чтобы при возникновении одного события выполнялось много задач, добавьте через точку с запятой дополнительные действия JavaScript, заключив их в кавычки: onClick="action1;action2; action3" Обработчик событий может выполнять функции JavaScript, но код JavaScript следует включать непосредственно в кавычки. На первый взгляд кажется, что onClick и onMouseUp выполняют одну и ту же функцию. Событие click происходит после того, как кнопка мыши нажата и отпущена. События mouseDown и mouseUp разбивают его на два отдельных события, с каждым из которых ассоциируется свое действие.

188 Объектная модель документа

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

Связывание обработчика с событием 1. <ahref="#" Напишите тэг, в который требуется добавить обработчик события. Обычно это тэг <a> или один из тэгов форм (листинг 11.2). 2. onmouseover= Введите в этот тэг название нужного события (табл. 11.2) и поставьте знак равенства. 3. "document.images.button1.scr= ->'b_on.gif';" Поставьте открывающую кавычку, потом – код JavaScript, который будет выполняться, когда произойдет событие, и закройте кавычки. Код JavaScript может быть любым, в том числе включать вызов функций. Если вы хотите, чтобы в одном обработчике событий выполнялось несколько строк JavaScript, разделите их точкой с запятой, но не используйте клавишу Enter. 4. Повторив шаги 2 и 3, вы можете добавить столько обработчиков событий, сколько потребуется. 5. > Напишите закрывающую угловую скобку, чтобы завершить тэг шага 1.

Рис. 11.5. Первоначальное состояние рисунка

Рис. 11.6. Рисунок, на который наведен указатель мыши

Листинг 11.2. Когда посетитель проводит указателем мыши по области ссылки с картинкой b_off.gif, эта картинка заменяется другой (b_on.gif)

<html> <body> <a href="#" onmouseover= ->"document.images.button1.scr= ->'b_on.gif'"> <img scr="b_off.gif" name="button1" ->border="0"> </a> </body> </html>

6. <imgscr="button_off.gif"name= ->"button1"> Добавьте картинку, текст или любое другое HTML-содержимое, с которого должно начаться событие. 7. </a> Введите закрывающий тэг ссылки или формы.

Обнаружение события 189

Функционирование DOM Если вы использовали на HTML-странице какой-либо язык написания сценариев, то наверняка видели, как работает DOM. В DOM описывается путь от функции JavaScript к элементу на экране, и в ответ на действие, произошедшее в окне браузера, возникает событие (рис. 11.7).

Установка DOM В следующей DOM описан путь от текущего документа до картинок, которые в нем находятся, и источника картинки button1: document.images.button1.scr. Эту DOM можно использовать вместе с обработчиком событий, например onmouseover, чтобы изменить источник картинки, который служит для определения местоположения button1. В результате при наведении указателя мыши браузер заменяет одну

Рис. 11.7. Процесс начинается с действия пользователя (mouseover) и заканчивается реакцией браузера. Браузер распознает событие, запускает функцию и использует DOM, чтобы заменить изображение

190 Объектная модель документа картинку другой. Динамическая подмена картинок (image swapping или rollover) часто применяется в Web. Однако изменение CSS-свойств объекта немного отличается от изменения источника изображения. В обоих случаях используется объектная модель документа, но DOM для стилей меняется в зависимости от браузера. В следующих разделах описаны три вида DOM, которые служат для изменения CSSстилей (табл. 11.3):

Таблица 11.3. Браузеры, поддерживающие DHTML Браузер Netscape Internet Explorer

Opera

Версия

DOM

Layer

All

Netscape Layer DOM применяется только в Netscape 4; Internet Explorer All DOM поддерживается в Internet Explorer 4 и доступна в Internet Explorer 5/6; W3C ID DOM используется в Netscape 6 и Internet Explorer 5/6.

Netscape Layer DOM Netscape Layer DOM (рис. 11.8) позволяет писать сценарии для управления элементами, созданными посредством тэга <layer> (см. главу 16) и CSS-позиционирования. Эта DOM разрешает изменять положение, видимость элемента, вырезать его части. Изменения, произведенные в данных свойствах с помощью слоев или CSS-позиционирования, сразу же отображаются на экране. В листинге 11.3 и на рис. 11.9 показано, как работает Layer DOM. Netscape, в отличие от Internet Explorer, не предоставляет доступа к CSS-свойствам, кроме управления позиционированием. Таким образом, в Netscape 4 нельзя изменять шрифт, текст, вид списка, указатель мыши, цвет, фон, границу или поле объекта после загрузки страницы. Это можно сделать, только перезагрузив страницу.

Рис. 11.8. Netscape Layer DOM для доступа к CSS

Поток объектов Объекты JavaScript связаны между собой иерархически, причем на верхней ступени находится окно, а на нижней – свойство. Эта иерархия поможет вам определить порядок, в котором нужно помещать объекты в DOM. В приложении 3 представлен полный список потока объектов.

Функционирование DOM 191 Листинг 11.3. Функция JavaScript использует Netscape Layer DOM, которая описывает путь к определенному положению элемента и затем изменяет это положение

<html> <head> <script> function NAVmoveElement (objectID) { document.layers[objectID].left = 120; document.layers[objectID].top = 200; } </script> <style type="text/css"> #object1 { position: absolute; top: 10px; left: 10px; visibility: visible; } </style> </head> <body> <div id="object1"> <a href="#" onmouseOver= ->"NAVmoveElement('object1')"> This script will run in Netscape 4 ->and compatible browsers only.<br> <img scr="alice04.gif" width="200" ->height="298" border="0"> </a> </div> </body> </html>

Netscape Layer DOM не работает в Netscape 6. Когда в Netscape планировалось создание браузера нового поколения (под кодовым названием Mozilla), было решено, что он должен отвечать всем стандартам. К сожалению, это означало, что игнорируются все технологии, которые никогда не станут стандартами, включая тэг <layer> и Layer DOM. Во многих случаях можно обойтись без тэга <layer>. Но если вы хотите, чтобы ваш код работал в Netscape 4, то вам придется использовать Layer DOM и смириться с многочисленными ограничениями, возникающими при этом. При непосредственном обращении к встроенным объектам в Netscape 4 возникают ошибки (см. раздел «Netscape 4 и встроенные слои»).

Рис. 11.9. В результате работы функции картинка перемещается по экрану. Но не забывайте, что эта функция поддерживается только Netscape 4

192 Объектная модель документа

Internet Explorer All DOM Internet Explorer All DOM (рис. 11.10) позволяет писать сценарии, с помощью которых можно получить доступ к любому элементу на экране, по крайней мере к тем из них, которые распознает Internet Explorer. Эти элементы включают в себя CSS-свойства, созданные для управления их видом, положением и видимостью на экране. Все изменения сразу же отображаются. Таким образом, изменения указателя мыши, шрифта, цвета, фона, положения, видимости объекта, а также изменения, произведенные в тексте, списке, границе или поле, немедленно появляются на экране. В листинге 11.4 и на рис. 11.11 показано, как работает Internet Explorer DOM.

Рис. 11.11. В результате работы функции картинка перемещается по экрану. Эта функция поддерживается только Internet Explorer 4 и более поздними его версиями

Рис. 11.10. Internet Explorer All DOM для доступа к CSS

Листинг 11.4. Функция JavaScript использует Internet Explorer All DOM, которая описывает путь к определенному положению элемента и затем изменяет это положение

<html> <head> <script> function IEmoveElement () { document.all('object1').style.left = 120; document.all('object1').style.top = 200; } </script> <style type="text/css"> #object1 { position: absolute; top: 50px; left: 10px; visibility: visible; } </style> </head> <body> <div id="object1"> <a href="#" ->onmouseOver="IEmoveElement()"> This script will run in Internet ->Explorer 4, 5, 6 and compatible ->browsers only.<br> <img scr="alice04.gif" width="200" ->height="298" border="0"> </a> </div> </body> </html>

Функционирование DOM 193

W3C ID DOM

Рис. 11.12. W3C DOM для доступа к CSS

Листинг 11.4. Функция JavaScript использует W3C DOM, которая описывает путь к определенному положению элемента и затем изменяет это положение

<html> <head> <script> function W3CmoveElement () { document.getElementById('object1'). ->style.left = 120; document.getElementById('object1'). ->style.top = 60; } </script> <style type="text/css"> #object1 { position: absolute; top: 10px; left: 10px; visibility: visible; } </style> </head> <body> <div id="object1"> <a href="#" ->onmouseOver="W3CmoveElement()"> This script will run in any browser ->that uses the W3C's standard -><br>for DOM, including Internet ->Explorer 5, 6 and Netscape 6.<br> <img scr="alice04.gif" width="200" ->height="298" border="0"> </a> </div> </body> </html>

В W3C понимали, что необходимо связать языки написания сценариев с объектами Web-страницы, поэтому началась усердная работа по созданию наилучшего метода. К сожалению, производители браузеров не могли ждать и выпустили свои DOM до того, как появился единый стандарт. Но в конце концов W3C представил стандартизированную DOM (рис. 11.12), и производители воспользовались этим предложением. W3C ID DOM, или стандартизированная DOM, позволяет писать сценарии, с помощью которых можно получить доступ к элементу на экране. Эти элементы включают в себя CSS-свойства, созданные для управления их видом, положением и видимостью на экране. Таким образом, изменения указателя мыши, шрифта, цвета, фона, положения или видимости объекта, а также изменения, произведенные в тексте, списке, границе или поле, немедленно отображаются. В листинге 11.5 и на рис. 11.13 показано, как работает стандартизированная DOM.

Рис. 11.13. В результате работы функции картинка перемещается по экрану. Функция поддерживается только Internet Explorer 5/6 и Netscape 6 или более поздними версиями браузеров

194 Объектная модель документа

Определение возможностей браузера Лучший способ определить, есть ли у браузера, в котором работает ваш сценарий, возможности для выполнения конкретной работы, – это спросить у него самого. Узнать, обладает ли браузер необходимыми вам характеристиками, гораздо проще, чем кажется. Для этого нужно всего лишь дописать одну строчку в каждой функции. В большинстве случаев используется метод определения возможностей браузера, а не метод определения браузера (см. раздел «Название и версия браузера» в главе 12). Допустим, текущая версия браузера не позволяет запускать ваш сценарий. Не исключено, что вскоре появится новая версия, которая разрешит это сделать. Метод определения характеристик дает возможность любому браузеру, в котором способен работать сценарий, запускать его (рис. 11.14 и 11.15).

Рис. 11.14. Этот браузер может менять картинки

Рис. 11.15. Во многих старых браузерах, таких как Internet Explorer 3, не предусмотрена возможность изменения картинок. На экране отображается соответствующее сообщение

Определение возможностей браузера 195 Листинг 11.6. В этом примере проверяется, доступен ли объект document.images в браузере

<html> <body> <script language="Javascript"> if (document.images) { document.writeln("Yes, I can change ->images."); } else { document.writeln("Sorry. I can't ->change images."); } </script> </body> </html>

Доступ браузера к какой-либо возможности JavaScript 1. if(document.images) Внутри контейнера JavaScript напишите условие, как показано в листинге 11.6. В скобках после if введите DOM для требуемой функции JavaScript. В этом примере проверяется, может ли браузер работать с графическими изображениями. 2. {document.writeln("Yes, I can change images.");} В фигурных скобках поместите код JavaScript, который будет выполняться, если данная возможность поддерживается браузером. 3. else {document.writeln("Sorry. I can't changeimages.");} Можно добавить ветвь else, определив код, который будет выполняться, если проверяемая возможность JavaScript недоступна.

196 Объектная модель документа

Определение типа DOM С помощью метода определения возможностей браузера можно узнать, какой тип DOM используется в этом браузере (рис. 11.16–11.18).

Установление типа DOM 1. varisID=0; Создайте четыре переменные (isID, isALL, isLayers, isDHTML) и присвойте им значение 0 (false). В первых трех переменных запоминается тип DOM как определенный, а в четвертой запоминается, присутствует ли DOM и поддерживает ли браузер DHTML (листинг 11.7). 2. if (document.getElementByID) {isID=1; isDHTML=1;} Определите каждую DOM и присвойте соответствующей переменной значение 1 (true), если эта модель работает в браузере. Если обнаружена одна DOM, существование других не проверяется. Это позволяет вам использовать наилучшую из всех моделей, которые доступны в браузере. 3. if(isID){...} Описанные выше значения служат для того, чтобы привязать страницу к доступной DOM. Для обнаружения Layer DOM в Netscape 4 можно использовать метод определения возможностей, но если вы поместите JavaScript во внешний файл, возникнет ошибка, из-за которой применение этого метода станет нереальным (см. раздел «Использование общей для браузеров DOM»).

Рис. 11.16. DHTML-браузер использует Netscape Layer DOM

Рис. 11.17. DHTML-браузер использует Internet Explorer All DOM

Рис. 11.18. DHTML-браузер использует W3C ID DOM

Определение типа DOM 197 Листинг 11.7. С помощью этого кода выясняется, какая DOM применяется в браузере. Соответствующей переменной присваивается значение 1 (true). Если обнаружена какая-либо DOM, то переменной isDHTML также присваивается значение true

<html> <head> <script> var isDHTML = 0; var isLayers = 0; var isAll = 0; var isID = 0; if (document.getElementByID) {isID=1; isDHTML=1;} else { if (document.layers) {isLayers=1; isDHTML=1;} else { if (document.all) {isAll=1; isDHTML=1;} }} </script> </head> <body> <script> if (isDHTML) {document.write('This is a DHTML capable browser using ');} if (isID) {document.write('The World Wide Web Consortium\'s "ID" DOM.');} else { if (isLayers) {document.write('Netscape\'s "Layer" DOM.');} else { if (isAll) {document.write('Internet Explorer\'s "all" DOM.');} else {document.write('This is not a DHTML capable browser...so what are you waiting for?');} }} </script> </body> </html>

198 Объектная модель документа

Построение общей DOM Информация, возвращаемая при определении типа DOM в браузере, позволяет создать DOM для каждого объекта Web-страницы, отображаемой браузером. Основная идея – включить методы определения всех трех типов DOM в функцию findDOM(), в которой для задания типа DOM применяется оператор if. DHTML-функция использует затем findDOM, чтобы построить DOM для каждого объекта и получить доступ к его свойствам (рис. 11.19).

Создание общей DOM

Рис. 11.19. В первом предупреждении показан ID объекта, во втором – расстояние от объекта до верхней стороны экрана в пикселах

1. varisDHTML=0; Скопируйте код JavaScript из предыдущего раздела (листинг 11.8).

Листинг 11.8. Чтобы установить тип DOM, используется метод определения возможностей браузера. Затем с помощью функции указывается DOM для конкретного объекта

<html> <head> <script> var isDHTML = 0; var isLayers = 0; var isAll = 0; var isID = 0; if (document.getElementByID) {isID=1; isDHTML=1;} else { if (document.all) {isAll=1; isDHTML=1;} else { browserVersion = parseInt(navigator.appVersion); if ((navigator.appName.index0f('Netscape') !=-1) && (browserVersion == 4)) ->{isLayers = 1; isDHTML = 1;} }} function findDOM(objectID,withStyle) { if (withStyle == 1) { if (isID) { return (document.getElementById(objectID).style); }

Построение общей DOM 199 Листинг 11.8 (окончание)

else { if (isAll) {return ->(document.all ->[objectID].style); } else { if (isLayers) {return ->(document.layers [objectID]); } };} } else { if (isID) { return (document. ->getElementsById (objectID));} else { if (isAll) { return -> (documnet.layers[objectID]);} };} } } function whoAmI(objectID) { domStyle = findDOM(objectID,1) dom = findDOM(objectID,0); if (domStyle.pixelTop != null) ->{ alert(domStyle.pixelTop); } else { alert(domStyle.top); } alert(dom.id); } </script> <style type="text/css"> #object1 { position: absolute; visibility: show; top: 10px; left: 10px; } </style> </head> <body onLoad="whoAmI('object1')"> <div id="object1"> This is an Object<br> <img scr="alice14.gif" ->width="407" height="480" ->border="0"> </div> </body> </html>

2. functionfindDOM(objectID,withStyle) ->{...} Добавьте в код JavaScript функцию findDOM. Ее аргументом является ID требуемого объекта, а результатом – DOM в используемом браузере. Затем с помощью данной функции можно изменять стиль объекта (if withStyle=1) или другие его свойства (if withStyle=0). 3. if(isID){return(document. ->getElementById(objectID).style);} Каждый тип DOM проверяется для того, чтобы выяснить, какой из них используется в этом браузере. Если isID=1 (true), то условие выполняется и для определения положения объекта на Web-странице применяется W3C ID DOM. Итак, различные DOM переведены на один общий язык. Теперь можно задействовать его для управления элементами на экране с помощью функций JavaScript.

200 Объектная модель документа

Получение доступа к общей DOM 1. functionwhoAmI(objectID){...} В код JavaScript введите функцию, которая вызывает функцию findDOM(). В этом примере определены две переменные. Переменная domStyle запоминает DOM со стилем: domStyle=findDOM(objectID,1). Переменная dom запоминает DOM без стиля: dom=findDOM(objectID,0). Эти переменные нужны для того, чтобы определить ID объекта и его положение по отношению к верхней стороне экрана (см. раздел «Верхняя и левая позиции объекта» в главе 12). 2. <bodyonLoad="whoAmI('object1')"> Чтобы запустить функцию, определенную на шаге 1, используется обработчик событий. Помните, что все DHTMLфункции запускаются с помощью такого обработчика. Переменную dom можно назвать как угодно. Я предпочитаю использовать domStyle в тех случаях, когда нужно получить доступ к стилям объекта, и dom – если требуется доступ к любому другому свойству объекта.

Результаты могут быть различными В разных браузерах результаты, показанные в предупреждениях, различны. Например, в Internet Explorer 5 для Windows в обоих предупреждениях будет написано [object]. Многие браузеры отобразят переменную, которая применяется при доступе к рассматриваемому объекту, а не настоящую величину. Однако не стоит волноваться, так как в этой переменной содержится та же информация.

Использование общей для браузеров DOM 201 Листинг 11.9. Файл findDOM.js можно импортировать в любой HTML-документ, чтобы создавать DHTML-функции. Не забывайте об этом файле, он будет использоваться в книге и далее

Использование общей для браузеров DOM Во многих динамических функциях, представленных в этой книге, используется общая для браузеров DOM, которая была описана в предыдущем разделе. Чтобы не переписывать этот код каждый раз, когда он потребуется, можно поместить его во внешний текстовый файл, а затем импортировать файл в HTML-страницу (см. раздел «Внешний файл JavaScript» в главе 23).

Применение общей DOM на Web-странице 1. findDOM.js Откройте новый текстовый файл и запишите в него код для общей DOM, описанный в листинге 11.8 (см. раздел «Построение общей DOM», где объясняется работа этого кода). Сохраните файл как findDOM.js. Далее в книге он упоминается под названием «функция findDOM» (листинг 11.9). 2. index.html Создайте новую HTML-страницу и сохраните ее в той же папке, что и файл findDOM.js (листинг 11.10). 3. <scriptscr="findDOM.js"></script> В тэге <head> добавьте ссылку на внешний файл, описанный на шаге 1. 4. functionmoveObject(objectID){...} В коде JavaScript определите динамическую функцию, которая в качестве переменной использует ID объекта.

202 Объектная модель документа 5. domStyle=findDOM(objectID,1); В функции, которая была создана на шаге 4, вызовите функцию findDOM() и передайте ей значение objectID. Добавьте 1, если требуется получить доступ к стилям объекта, или 0, если необходим доступ к любому другому свойству. В этом коде величина DOM (включая стиль) хранится в переменной domStyle. 6. domStyle.left=120;domStyle.top=200; Написав переменную domStyle, точку и затем атрибут стиля, вы можете получить доступ к любому стилю объекта. В этом примере изменяются положения top и left объекта. 7. onload="moveObject('object1') Не забудьте запустить функцию из события. В этом примере функция moveObject вызывается сразу после загрузки страницы в окне браузера (рис. 11.20). Переменную dom можно назвать как угодно. Я предпочитаю использовать domStyle в тех случаях, когда нужно получить доступ к стилям объекта, и dom – если нужно получить доступ к любому другому свойству объекта.

Рис. 11.20. Перемещение изображения Алисы

Листинг 11.10. В файл index.html импортируется файл findDOM.js. Функция findDOM используется в этом коде, чтобы создать DOM, с помощью которой перемещается изображение Алисы, то есть изменяется его верхнее и левое положения

<html> <head> <script scr="findDOM.js"></script> <script> function moveObject (objectID) { domStyle=findDOM(objectID,1); domStyle.left=120; domStyle.top=200; } </script> <style type="text/css"> #object1 { position: absolute; visibility: show; top: 10px; left: 10px; } </style> </head> <body onLoad="moveObject('object1')"> <div id="object1"> This script will run in any Netscape 4 ->and above, Internet Explorer 4 and ->above, or W3C compatible browsers.<br> <img scr="alice04.gif" width="200" ->height="298" border="0"> </div> </body> </html>

Netscape 4 и встроенные слои 203

Netscape 4 и встроенные слои Рис. 11.21. Чтобы получить доступ к CSS-уровню в этом коде...

Рис. 11.22. ...нужно использовать следующую DOM в Netscape 4

При получении доступа к слоям, встроенным в другие (Netscape- или CSS-слои), недостаточно знать ID конечного уровня, к которому нужно обращаться. В Netscape 4 необходимо включать ID всех объектов. Допустим, объект object2 встроен в объект object1 (рис. 11.21). С помощью DOM Internet Explorer 4/5 и Netscape 6 могут обращаться непосредственно к object2. Однако в Netscape 4 в путь DOM нужно также включить и object1. Чтобы избежать этой ошибки, вам нужно воспользоваться специальной версией findDOM (см. раздел «Использование общей для браузеров DOM»), переписанной для Netscape 4 (рис. 11.22).

Как обнаружить слои Netscape 4 Вы заметите, что в коде findDOM, описанном в этом разделе, для обнаружения Netscape Layer DOM используется метод определения браузера (см. раздел «Название и версия браузера» в главе 12), а не метод определения его возможностей (см. ранее «Определение типа DOM»). Теоретически метод определения возможностей браузера должен устанавливать, используется ли в браузере Layer DOM. Возникающая в Netscape 4 ошибка приводит к тому, что этот метод перестает работать, но только в том случае, если он был импортирован из внешнего JavaScript-файла, а документ первым загружается на страницу в новом окне браузера. Если код для определения возможностей браузера находится непосредственно в HTML-странице, то он действует всегда, как и в том случае, когда внешний файл загружается не первым. Таким образом, чтобы пользоваться внешним файлом для создания и обнаружения Netscape DOM, нужно прибегать к методу определения браузера (который работает всегда).

204 Объектная модель документа

Установка встроенной DOM в Netscape 4 1. findDOMNested.js Откройте новый текстовый файл и запишите код общей DOM, указанный в листинге 11.11. Этот код практически совпадает с кодом функции findDOM из предыдущего раздела. Он также позволяет обращаться к объекту, встроенному в другой объект, в Netscape 4. Листинг 11.11. С помощью этой версии кода findDOM (findDOMNested.js) Netscape распознает встроенные CSS-слои

Netscape 4 и встроенные слои 205 Листинг 11.11 (окончание)

else { if (isLayers) if (objectID1) {return ->(document.layers[objectID1]. ->layers[objectID2]);} else { return ->(document.layers[objectID2]); } } };} }

5. Рис. 11.23. При нажатии на ссылку или картинку появляется ID объекта

Чтобы добавить и другие встроенные уровни, просто напишите дополнительные операторы if: if (objectID1) {return ->(document.layers[objectID1]. ->layers [objectID2]. ->layers[objectI3]);} if (objectID2) {return ->(document.layers[objectID2]. ->layers[objectID3]);} else { return (document.layers ->[objectID3]); }

Эта версия функции findDOM() позволяет включать два ID уровня. Идентификатор objectID1 является родительским по отношению к objectID2, который применяется в Netscape 4 для построения DOM. Однако в Internet Explorer 4/5/6 и Netscape 6 можно использовать только objectID2. Сохраните файл как findDOMNested.js. Далее в книге этот файл упоминается под названием «листинг findDOMNested». index.html Создайте новую HTML-страницу и сохраните ее в той же папке, что и файл findDOM.js (листинг 11.12). functionwhoAmI(objectID1,objectID2){...} Создайте функцию, которая вызывает исправленную функцию findDOM(). Ей нужно передать два ID объектов. onClick="whoAmI('object1','object2');" Запустите функцию, описанную в шаге 3, с помощью обработчика событий и передайте ей ID объекта и его родительского элемента. onClick="whoAmI('','object2');" Если объект не является встроенным, при вызове функции место первого объекта можно оставить пустым (даже не нажимать клавишу пробела) – рис. 11.23. Версию findDOM() со встроенными объектами рекомендуется использовать только в том случае, когда действительно необходимо встраивать CSS-слои.

206 Объектная модель документа Листинг 11.12. В этом примере object2 встроен в object1, что делает его труднодоступным для Netscape 4. Поэтому приходится немного изменить функцию findDOM()

<html> <head> <script scr="findDOMNested.js"></script> <script> function whoAmI(objectID1,objectID2) { domStyle=findDOM(objectID1,objectID2,0); alert(dom,id); } </script> <style type="text/css"> #object1 { position: relative; visibility: show;} #object2 { position: relative; visibility: show; float: right;} </style> </head> <body> <div id="object1"> <a href="#" onClick="whoAmI('','object2');">'We indeed!' cried the Mouse, who was ->trembling down to the end of his tail</a> <div id="object2"> <a href="#" onClick="whoAmI('object1','object2');"> <img scr="alice14.gif" width="200" height="236" border="0"> </a> </div> <p>'As if I would talk...</p> <p>'I won't indeed!'...</p> <p>So she called softly...</p> <p>It was high time to go...</p> </div> </body> </html>

среда, в которой вы работаете

Рис. 12.1. Этот код работает в Internet Explorer 5.5 под Windows. Обозначение браузера состоит из (compatible; MSIE 5.5; Windows 95). Но оказывается, что это Internet Explorer 4, и в нем можно запускать более старые версии кода JavaScript

«Познай себя, прежде чем изменять мир». Возможно, это старая поговорка, а может быть, я придумал ее сам, но данное высказывание как нельзя лучше подходит для DHTML. Чтобы использовать многие функции, описанные в последующих главах, необходимо твердо знать, где какие тэги находятся, каковы их размеры и какие действия они выполняют. В первой части данной главы рассказывается о том, что можно узнать, обращаясь непосредственно к браузеру, например размер экрана или окна браузера (DOM в таком случае не используется). Во второй описывается, какие свойства объектов, которые вы собираетесь изменять, например положение, высоту, ширину, определяются с помощью DOM.

Название и версия браузера Чтобы узнать, какие функции браузер может выполнять, а какие – нет, лучше всего воспользоваться методом определения возможностей браузера (см. раздел «Определение возможностей браузера» в главе 11). Но иногда необходимо задать действия, зависящие от типа и версии браузе-

208 Среда, в которой вы работаете ра, в котором будет отображаться Webстраница (рис. 12.1–12.3). Первоначально информация приходит в виде двух больших объектов программы (листинг 12.1). В первом из них содержится название браузера (navigator.appName). Во втором – версия браузера, информация о его совместимости и используемая операционная система (navigator.appVersion). Сведения о названии и версии полезны, но они занимают много места в коде. Чтобы получить необходимые данные, можно применять эти программы, но затем их лучше хранить в переменных, которые потребуются в дальнейшем.

Рис. 12.2. Этот код работает в Netscape 6 для Mac. Заметьте, что браузер выдает себя за Netscape 5

Определение типа и версии браузера 1. varisNS=0; Создайте три переменные (isIE, isNS, isOtherBrowser) на JavaScript. В них будет запоминаться информация о том, в каком браузере работает код. Сначала этим переменным присваивается значение 0 (false). При нахождении типа браузера соответствующей переменной присваивается значение 1 (true). 2. if (navigator.appName.index0f ->('Netscape')!=-1) {isNS=1;} Проверьте название браузера для того, чтобы переопределить переменные из шага 1. В этом коде в appName проводится поиск слов «Netscape» и «Microsoft Internet Explorer». Если браузер не относится ни к Netscape, ни к Internet Explorer, то переменной isOtherBrowser присваивается значение 1. 3. parseInt(navigator.appVersion);

Рис. 12.3. Код, определяющий браузер, работает в Opera 5, а на экране написано Internet Explorer. Многие коды JavaScript «узнают» только Internet Explorer и Netscape, а другие браузеры исключаются. Браузеры Opera воспринимаются как Internet Explorer. Таким образом, код будет функционировать и в Opera

Название и версия браузера 209 Листинг 12.1. Сначала на странице появляется полное описание браузера. Затем эта информация используется для определения названия и номера версии браузера, и на экран выводится правильное сообщение

<html> <head> <body> <script> document.write('<b>This browser\'s ->designation is:</b>'); document.write(navigator.appName + ' '); document.write(navigator.appVersion); var isNS = 0; var isIE= = 0; var isOtherBrowser = 0; if (navigator.appName.index0f('Netscape') ->!=-1) {isNS = 1;} else { if (navigator.appName.index0f ->('Microsoft Internet ->Explorer') !=-1) {isIE = 1;} else {isOtherBrowser = 1;} } browserVersion = parseInt ->(navigator.appVersion); document.write('<br><br>'); if (isNS) {document.write('This Browser ->is compatible with Netscape version ');} else { if (isIE) {document.write('This ->Browser is compatible with Internet ->Explorer version ');} else { if (isOtherBrowser) {document.write ->('I do not recognize this browser ->type. Version = ');} }} document.write(browserVersion +'.'); </script> </body> </html>

Номер версии браузера присваивается переменной browserVersion. 4. if (isNS) {...} Теперь в переменных, определенных на шагах 1–3, хранится информация об имени и версии браузера. Конечно, количество браузеров не ограничивается двумя. Но большинство браузеров определяются как Netscape или Internet Explorer в зависимости от того, с каким из них они совместимы в большей степени. Так происходит с браузером Opera. Он не исключается, хотя Web-сайты, способные определять тип браузера, можно просмат-

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

210 Среда, в которой вы работаете ривать только в конкретных браузерах.

Тип операционной системы В объекте версии приложения (appVersion) находится информация не только о номере версии браузера (см. предыдущий раздел), но и о типе операционной системы, которую браузер использует для просмотра страницы (рис. 12.4 и 12.5). Эта информация может быть весьма полезной, особенно если нужно преодолеть проблемы, связанные с типом операционной системы (например, несоответствие в размере шрифта).

Рис. 12.4. Код работает в Windows 95

Определение вида операционной системы 1. varisMac=0; Создайте три переменные (isMac, isWin, isOtherOS) на JavaScript. В них будет запоминаться информация о типе операционной системы, используемой браузером. Сначала этим переменным присваивается значение 0 (false). При нахождении типа операционной системы соответствующей переменной присваивается значение 1 (true) – листинг 12.2. 2. i f (navigator.appVersion.index0f('Mac') !=-1){isMac=1;} Проверьте название операционной системы для того, чтобы переопределить переменные из шага 1. В этом коде производится поиск слов «Mac» и «Win». Если ОС не относится к перечисленным типам, присвойте переменной isOtherOS значение 1. 3. if (isMac) {...}

Рис. 12.5. Тот же код работает в Mас

Тип операционной системы 211 Теперь переменные, определенные на шаге 1 и 2, можно использовать для выбора кода для конкретной ОС. Чаще всего метод определения операционной системы служит для преодоления различий в размере шрифта и цвете между Mac и Windows (см. раздел «CSS и операционная система» в главе 22). Конечно, операционных систем гораздо

Листинг 12.2. Сначала на странице появляется полное описание браузера. Затем эта информация применяется для определения типа операционной системы, и на экран выводится правильное сообщение

<html> <head> <body> <script> document.write('<b>This browser\'s designation is:</b>'); document.write(navigator.appName + ' '); document.write(navigator.appVersion); var isMac = 0; var isWin= = 0; var isOtherOS = 0; if (navigator.appName.index0f('Mac') !=-1) {isMac = 1;} else { if (navigator.appName.index0f('Win') !=-1) {isWin = 1;} else {isOtherOS = 1;} } document.write('<br><br>'); if (isMac) {document.write('This Browser is running in the Mac OS ');} else { if (isWin) {document.write('This Browser is running in the Microsoft ->Windows OS ');} else { if (isOtherOS) {document.write('RESISTANCE IS FUTILE...YOU WILL BE ->ASSIMULATED');} }} </script> </body> </html>

212 Среда, в которой вы работаете больше, и их количество не ограничивается названными типами. Приобретает популярность ОС Linux, но ее использует всего 1% посетителей сайтов.

Размеры экрана Удивительный мир Internet возникает именно на экране компьютера. Можно попытаться создать сайт с помощью азбуки Морзе, перфокарт или других устаревших методов, но, поверьте, электронно-лучевая трубка лучше подходит для отображения Web-сайтов (рис. 12.6 и 12.7). К сожалению, невозможно заранее узнать размер области, в которой будет отобра-

Рис. 12.8. Код отображает полные размеры экрана и размеры действительной области моего компьютера

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

Рис. 12.7. Размеры экрана в Mac. В действительную область включено все, кроме верхней полосы меню; длины правой и левой сторон этой области приблизительно равны шести пикселам. В ОС Mac полоса меню всегда располагается сверху

Размеры экрана 213 Листинг 12.3. Определяются и полные, и действительные размеры окна; эти значения присваиваются переменным, с помощью которых они выводятся на экран

<html> <body> <script> var screenHeight=screen.height; var screenWidth=screen.width; var liveScreenHeight=screen.availHeight; var liveScreenWidth=screen.availWidth; document.writeln('Your total screen ->height is ' + screenHeight + 'px -><br><br>'); document.writeln('Your total screen width ->is ' + screenWidth + 'px <br><br>'); document.writeln('Your live screen height ->is ' + liveScreenHeight + 'px -><br><br>'); document.writeln('Your live screen width ->is ' + liveScreenWidth + 'px -><br><br>'); </script> </body> </html>

жаться страница, и сколько места на самом деле будет доступно. Поэтому лучше определить размер экрана заранее (рис. 12.8).

Определение размеров экрана 1. varscreenHeight=screen.height; Создайте переменные screenHeight и screenWidth на JavaScript и присвойте им значения screen.height и screen.width соответственно. В этих переменных будет храниться полная высота и ширина экрана в пикселах (листинг 12.3). 2. v a r liveScreenHeight=screen.availHeight; В сценарий JavaScript добавьте переменные liveScreenHeight и l i v e S c r e e n W i d t h и присвойте им значения screen.availHeight и screen.availWidth соответственно. В этих переменных будет хра-

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

Количество цветов Раньше цвет был тем свойством, которое дизайнер использовал с крайней осторожностью. Все компьютеры по-разному воспроизводят цвета. На профессиональном компьютере вы создадите прекрасную Webстраницу, разноцветную, с отбрасываемыми тенями, со сглаженным шрифтом и трехмерными кнопками (рис. 12.9). Но на компьютерах большинства посетителей эта страница будет выглядеть как цветная фотография, которую оставили на солнце (рис. 12.10). Проблема заключается в том, что некоторые компьютеры поддерживают миллионы цветов, в то время как другие – лишь несколько тысяч, сотен или даже меньше. Таким образом, полезно иметь представление о том, сколько цветов есть на компьютере человека, который просматривает ваш сайт. Однако в последние годы

Рис. 12.9. Изображение на основе 32-битной палитры

Рис. 12.10. То же изображение в 8-битной графике. Исчезли плавные переходы между цветами

Рис. 12.11. Код отображает цветовой диапазон монитора, в данном случае 32-битный

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

Определение количества цветов Рис. 12.12. Код отображает цветовой диапазон монитора, в данном случае 8-битный Листинг 12.4. Функция findColors возвращает одно из значений, перечисленных в табл. 12.1, в зависимости от количества доступных цветов на компьютере пользователя

<html> <body> <script> function findColors() { return (screen.colorDepth); } document.write('Your screen is currently ->using ' + findColors() + 'bit color.'); </script> </body> </html>

Таблица 12.1. Значения свойства colorDepth Количество битов

Количество цветов

256

65536

16,7 млн

1. screen.colorDepth

216 Среда, в которой вы работаете Значение, определяющее количество цветов на компьютере пользователя, содержится в свойстве colorDepth объекта screen (листинг 12.4). В результате работы этого кода возвращается значение глубины цвета – количество бит на пискел (табл. 12.1).

Размеры окна браузера В Netscape можно определить текущую высоту и ширину браузера. (Данный код не работает в Internet Explorer). Это полная ширина и высота окна браузера в пикселах, включая все элементы управлен и я в видимой области (рис. 12.13).

Выяснение размеров окна браузера 1. window.outerHeight Создайте функцию, которая возвращает внешнюю высоту окна. Это значение измеряется в пикселах (листинг 12.5). 2. window.outerWidth

Листинг 12.5. Функции findBrowserHeight и findBrowserWidth возвращают размеры окна браузера в пикселах

<html> <head> <script> function findBrowserHeight() { if (window.outerHeight != null) return window.outerHeight; return null; }

Рис. 12.13. Код отображает размеры окна браузера в Netscape

Листинг 12.5 (окончание)

Размеры клиентской области окна 217 Создайте функцию, которая возвращает внешнюю ширину окна. Данное значение также измеряется в пикселах. В Internet Explorer нельзя определить общие размеры окна браузера.

Размеры клиентской области окна браузера можно задать как в Internet Explorer, так и в Netscape (см. следующий раздел).

Рис. 12.14. После щелчка по картинке появляется сообщение, в котором указаны размеры клиентской области окна браузера

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

Определение размеров Листинг 12.6. Функции findLivePageHeight() и findLivePageWidth() возвращают размеры клиентской области окна браузера

<html> <head> <script> function findLivePageHeight () { if (window.innerHeight != null) return window.innerHeight; if (document.body.clientHeight != null) return document.body.clientHeight; return null; } function findLivePageWidth () { if (window.innerWidth != null) return window.innerWidth; if (document.body.clientWidth != null) return document.body.clientWidth; return null; }

218 Среда, в которой вы работаете

клиентской области 1. functionfindLivePageHeight() {...} В сценарий JavaScript добавьте функцию findLivePageHeight, использующую метод определения возможностей браузера. Таким образом указывается, как браузер определяет высоту клиентской области окна, функция возвращает это значение. В Netscape используется значение window.innerHeight, а в

Листинг 12.6 (окончание)

</script> </head> <body> <script> function pageDim() { livePageHeight = findLivePageHeight (); livePageWidth = findLivePageWidth (); alert ('Visible Page Width: is ' + ->livePageWidth + 'px; Visible Page ->Height: ' + livePageHeight + 'px'); } </script> Click here to find the windows live ->dimensions and the Webpage's total ->size. <br> <a href="#" onClick="pageDim()"> <img scr="alice17.gif" width="640" ->height="480" border="0"> </a> </body> </html>

Какой размер экрана лучше использовать? Стандартное разрешение экрана, на которое ориентируются Web-дизайнеры, – 800×600. Но все сайты должны поддерживать размер 640×480, даже если в этом случае понадобится горизонтальная полоса прокрутки. Хотя данный размер используется менее чем 13% посетителей Web-сайтов и по сообщениям StatMarket (www.statmarket.com) эта цифра уменьшается, нужно, чтобы любой сайт можно было просматривать и на маленьких экранах. Значимую информацию и элементы дизайна следует размещать так, чтобы их было видно без вертикальной прокрутки. Важные элементы пользовательского интерфейса должны отображаться на экране 800×600 без горизонтальной прокрутки. Помните, что размер 800×600 – максимально доступный. На самом деле на экране такого размера клиентская область, в которой отображается сайт, занимает гораздо меньше места. Максимальный ее размер может быть разным. Это зависит от разрешения монитора, типа ОС, браузера и действительных размеров окна браузера, которые устанавливает пользователь.

Адрес и название страницы 219

Рис. 12.15. Название страницы и ее URL

Листинг 12.7. Переменные pageURI и pageTitle определяются и затем отображаются на странице. URI также используется для создания ссылки на нее. Ссылка срабатывает, когда пользователь щелкает мышью по названию

<html> <body> <script> var pageURI = self.location; var pageTitle = document.title; document.writeln('The location of the ->page titled <i><a href="' + pageURI + ->'">' + pageTitle + '</a></i> is:<br>'); document.writeln(pageURI); </script> </body> </html>

Internet Explorer – document.body.clientHeight (листинг 12.6). 2. function findLivePageWidth() {...} В сценарий JavaScript добавьте функцию findLivePageWidth, использующую метод определения возможностей браузера. В ней выясняется, как браузер хранит ширину клиентской области окна, и функция возвращает это значение. В Netscape ширина клиентской области окна браузера находится в свойстве window.innerWidth, а в Internet Explorer – в document.body.clientWidth.

Адрес и название страницы URL Web-страницы представляет собой ее уникальный адрес в Web. Название – это обозначение, которое вы присваиваете странице и которое находится внутри тэга <title> в заголовке документа. Эту информацию можно легко отобразить на Web-странице (рис. 12.15).

220 Среда, в которой вы работаете

Определение адреса и названия страницы 1. varpageURI=self.location; В сценарий JavaScript добавьте переменную pageURI и присвойте ей значение self.location, которое является адресом вашей Web-страницы (листинг 12.7). 2. varpageTitle=document.title; В код JavaScript добавьте переменную pageTitle и присвойте ей значение document.title, которое является названием вашего документа, то есть содержимым тэга <title>. Теперь эти переменные можно использовать для различных целей. В частности, написать их на странице, как в данном примере. Адрес страницы применяется как обратная ссылка.

URI или URL? Для хранения информации о местоположении страницы применялась переменная pageURI, а не pageURL. URL расшифровывается как Universal Resource Locator, а URI – как Universal Resource Identifier. Чем же они отличаются? В действительности, немногим. Но W3C по какимто причинам решил, что URL, используемый чаще, представляет собой особый термин, и вместо него было решено применять URI. Замечу, что это абсолютно ни на что не влияет. Но стоит ли включать URI вместо URL? Только если вы хотите запутать

В Netscape 4 для Mac при определении названия страницы возникают ошибки: вместо названия страницы возвращается название файла или DOM.

Положение прокрутки страницы CSS-позиционирование основано на смещении объекта от верхнего левого угла страницы во время ее загрузки. При прокрутке страницы ее начало (левый верхний угол) перемещается вместе с содер-

Рис. 12.16. Предупреждение указывает, на сколько пикселов переместилась страница

Положение прокрутки страницы 221 жимым страницы. К счастью, у браузера можно узнать, насколько была передвинута страница, то есть определить положение прокрутки (scrolling position) – рис. 12.16.

Определение положения прокрутки

В сценарий JavaScript добавьте функцию findScrollLeft(), использующую метод определения возможностей браузера. Таким образом устанавливается, как браузер выясняет положение прокрутки по горизонтали. В Netscape применяется значение window.pageXOffset, а

1. function findScrollLeft() {...}

Листинг 12.8. Функции findScrollLeft() и findScrollRight() определяют положение прокрутки страницы. Такие функции применяют в Web-странице по-разному: непосредственно отобразить результат работы функции (как в данном примере) или присвоить эти значения переменным, которые можно будет использовать и изменять в дальнейшем

<html> <head> <script> function findScrollLeft() { if (window.pageXOffset != null) return window.pageXOffset; if (document.body.scrollHeight != null) return document.body.scrollLeft; return (null); } function findScrollTop() { if (window.pageYOffset != null) return window.pageYOffset; if (document.body.scrollWidth != null) return document.body.scrollTop; return (null); } </script> </head> <body> Scroll the window and then click the image to find your current scroll position.<br> <a href="javascript:alert ('Scrolled From Top: '+ findScrollTop() + 'px; Scrolled ->From Left: ' + findScrollLeft() + 'px');"> <img scr="alice16.gif" width="640" height="477" border="0"> </a> </body> </html>

222 Среда, в которой вы работаете в Internet Explorer – document.body.scrollLeft(листинг 12.8). 2. function findScrollTop() {...} В сценарий JavaScript добавьте функцию findScrollTop(), использующую метод определения возможностей браузера. Таким образом устанавливается, как браузер выясняет положение прокрутки по вертикали. В Netscape применяется значение window.pageYOffset, а в Internet Explorer – document.body.scrollTop. Netscape 4 (Wiindows) и Netscape 6 (все ОС) ведут себя непонятным образом, когда прокрутке фрейма присвоено значение no. Полоса прокрутки исчезает, при этом весь фрейм также нельзя прокручивать, даже если используется показанный выше код JavaScript.

Размеры объекта Информацию о среде, описываемую ранее в этой главе, например размер экрана, мы узнавали от браузера, задавая ему вопросы. Далее мы будем получать сведения от самих объектов, находящихся в окне браузера, задавая вопросы им. Чтобы выяснить размеры объекта, его положение, видимость, 3D-позицию, нужно воспользоваться общей DOM. У каждого объекта есть ширина и высота, которые и определяют его размеры (см. раздел «Что такое элемент» в главе 7). Если размеры объекта известны (рис. 12.17), то его легко перемещать и позиционировать таким образом, чтобы он не выходил за края экрана. Это особенно важно при создании полосы прокрутки (см. раздел «Полоса прокрутки» в главе 25).

Рис. 12.17. В предупреждении указаны размеры объекта. В данном случае внутри объекта находится изображение

Листинг 12.9. Функции findWidth() и findHeight() определяют размеры отдельного объекта на странице. Их можно применять в Web-странице по-разному: непосредственно отобразить результат работы функции (как в данном примере) или присвоить эти значения переменным, которые можно будет использовать и изменять в дальнейшем

<html> <head> <script scr="findDOM.js"></script> <script> function findWidth(objectID) { var dom = findDOM(objectID,0); if (dom.offsetWidth) return dom.offsetWidth; if (dom.clip.width) return dom.clip.width; return (null); } function findHeight(objectID) { var dom = findDOM(objectID,0);

Размеры объекта 223 Листинг 12.9 (окончание)

if (dom.offsetHeight) return dom.offsetHeight; if (dom.clip.height) return dom.clip.height; return (null); } </script> <style type="text/css"> #object1 { position: absolute; top: 50px; width: 402px; left: 100px; border: 2px gray solid; visibility: visible; } </style> </head> <body> <script> function showDim(objectID) { widthObj = findWidth(objectID); heightObj = findHeight(objectID); alert('Width: ' + widthObj + 'px; ->Height: ' + heightObj + 'px' ); } </script> Click me to find my Width and ->Height!<br><br> <div id="object1"> <a href="#" ->onClick="showDim('object1')"> <img scr="alice20.gif" ->width="398" height="480" ->border="0"> </a> </div> </body> </html>

Выяснение ширины и высоты объекта 1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, нужно включить код findDOM. Добавьте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет применяться (см. раздел «Использование общей для браузеров DOM» в главе 11 и листинг 12.9). 2. function findWidth(objectID) {...} В сценарий JavaScript добавьте функцию findWidth(). При обращении к объекту она задействует его ID, который передается в функцию как переменная objectID. Таким образом создается DOM (см. раздел «Построение общей DOM» в главе 11). Затем в этой функции применяется метод определения возможностей браузера. Так можно установить, как браузер выясняет ширину объекта. В Netscape 4 используется значение clip.width, а в Netscape 6 и Internet Explorer 4/5/6 – offsetWidth. 3. function findHeight(objectID) {...} В сценарий JavaScript добавьте функцию findHeight(). Она задействует ID объекта, к которому обращается. ID передается в функцию как переменная objectID. Таким образом создается DOM (см. раздел «Построение общей DOM» в главе 11). Затем в этой функции применяется метод определения возможностей браузера. Так устанавливается, как браузер выясняет высоту объекта. В Netscape 4 используется значение clip.height, а в Netscape 6 и Internet Explorer 4/5/6 – offsetHeight. 4. #object1 {...}

224 Среда, в которой вы работаете С помощью значений position, left и top установите ID объектов. 5. function showDim(objectID) {...} Добавьте функцию JavaScript, в которой используются функции, определенные на шаге 2 и 3. В этом примере функция showDim() просто присваивает значения, возвращаемые функциями findWidth() и fingHeight(), переменным и затем отображает их значения в предупреждении. 6. onClick="showDim('object1')" Чтобы запустить функцию, созданную на шаге 5, добавьте обработчик событий и передайте ему ID объекта, к которому хотите обратиться. Протестировав этот код на разных браузерах, вы заметите, что размеры объекта в них немного отличаются. Это происходит из-за того, что в одних браузерах (например, Internet Explorer) учитывается ширина и высота элемента вместе с границей, а в других (Netscape 4) граница не включается.

Левая и верхняя позиции объекта В основном DHTML используется для перемещения объектов на странице (см. раздел «Перемещение объекта на заданное расстояние» в главе 13). Но прежде чем передвинуть объект, необходимо выяснить его текущее положение (рис. 12.18). Верхнее и левое положение элемента можно установить с помощью CSS (см. раздел «Определение положения по отнош е н и ю к левому верхнему углу» в главе 8). Затем,

Рис. 12.18. В предупреждении указаны левая и верхняя позиции объекта

Листинг 12.10. Функции findLeft() и findRight() определяют положение отдельного объекта на странице. Их можно применять в Webстранице по-разному: непосредственно отобразить результат работы функции (как в данном примере) или присвоить эти значения переменным, которые можно будет использовать и изменять в дальнейшем

<html> <head> <script scr="findDOM.js"></script> <script> function findLeft(objectID) { var domStyle = findDOM(objectID,1); var dom = findDOM(objectID,0); if (domStyle.left) return domStyle.left; if (domStyle.pixelLeft) return domStyle.pixelLeft; if (domStyle.offsetLeft) return domStyle.offsetLeft; return (null); }

Левая и верхняя позиции объекта 225 Листинг 12.10 (окончание)

чтобы определить эту позицию, можно использовать JavaScript (листинг 12.10).

Определение левого и верхнего положения объекта 1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, нужно включать код findDOM. Это можно сделать, добавив внешний текстовый файл и затем импортировав его на ту страницу, где он будет применяться (см. раздел «Использование общей для браузеров DOM» в главе 11). 2. function findLeft(objectID) {...} В JavaScript следует добавить функцию findLeft(). При обращении к объекту она задействует его ID, который пер е д а е т с я в функцию как переменная objectID. Таким образом создается DOM. В этой функции применяется метод определения возможностей браузера. Так устанавливается, как браузер выясняет левое положение объекта. Затем функция возвращает это значение. В Netscape 4 используется значение left, а в Netscape 6 и Internet Explorer 4/5/6 – offsetLeft и pixelLeft соответственно. 3. function findTop(objectID) {...} В сценарий JavaScript добавьте функцию findTop(). Она задействует ID о б ъ е к т а , к которому обращается. ID передается в функцию как переменная objectID. Таким образом создается DOM (см. раздел «Построение общей DOM» в главе 1 1 ) . В этой функции применяется метод

226 Среда, в которой вы работаете определения возможностей браузера. Так устанавливается, как браузер выясняет верхнее положение объекта. Затем функция возвращает это значен и е . В Netscape 4 используется значение top, а в Netscape 6 и Internet Explorer 4/5/6 – offsetTop и pixelTop соответственно. 4. #object1 {...} Создайте ID правило и опишите в нем положение объекта с помощью свойств position, left и top. 5. function showPos(objectID) {...} Создайте функцию JavaScript, в которой используются функции, определенные на шаге 2 и 3. В этом примере функция showPos() просто присваивает значения, возвращаемые функциями findLeft() и findTop(), переменным и затем отображает эти значения в предупреждении. 6. onClick="showPos('object1')" Чтобы запустить функцию, созданную на шаге 5, добавьте обработчик событий и передайте ему ID объекта, к которому хотите обратиться. Вы можете заметить небольшое несоответствие между положением объекта в Internet Explorer и Netscape 4 и положением объекта в Netscape 6. В последнем случае положение задается по отношению к внутренней стороне рамки объекта, другие же браузеры определяют положение объекта по отношению к внешней стороне рамки.

Правая и нижняя позиции объекта С помощью JavaScript можно определить также правое и нижнее положение объекта (рис. 12.19). Однако этого нельзя добиться за один шаг. Сначала находится левое и верхнее положение элемента, его

Рис. 12.19. В предупреждении указаны нижняя и правая позиции объекта Листинг 12.11. Функции findRight() и findBottom() определяют положение отдельного объекта на странице. Их можно применять в Webстранице по-разному: непосредственно отобразить результат работы функции (как в данном примере) или присвоить эти значения переменным, которые можно будет использовать и изменять в дальнейшем

<html> <head> <script scr="findDOM.js"></script> <script> function findRight(objectID) { var domStyle = findDOM(objectID,1); var dom = findDOM(objectID,0); if (dom.left) return (domStyle.left + ->domStyle.clip.width); if (domStyle.pixelLeft) return (domStyle.pixelLeft + ->dom.offsetWidth); if (dom.offsetLeft) return (domStyle.offsetLeft + ->dom.offsetWidth); return (null); }

Правая и нижняя позиции объекта 227 Листинг 12.11 (окончание)

ширина и высота, затем соответствующие величины складываются (листинг 12.11).

Определение правого и нижнего положения объекта 1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, следует включить код findDOM. Это можно сделать, добавив внешний текстовый файл и затем импортировав его на ту страницу, где он будет применяться (см. раздел «Использование общей для браузеров DOM» в главе 11). 2. function findRight(objectID) {...} В сценарий JavaScript добавьте функцию findRight(). При обращении к объекту она задействует его ID, который передается в функцию как переменная objectID. Таким образом создается DOM. В данной функции применяется метод определения возможностей браузера. Это позволяет установить, как браузер выясняет левое положение объекта и его ширину. Затем функция возвращает сумму указанных величин (см. разделы «Размеры объекта» и «Определение левого и верхнего положения объекта»). 3. function findBottom(objectID) {...} В сценарий JavaScript добавьте функцию findBottom(). Она задействует ID объекта, к которому обращается. ID

228 Среда, в которой вы работаете передается в функцию как переменная objectID. Таким образом создается DOM. В этой функции применяется метод определения возможностей браузера. Устанавливается, как браузер выясняет верхнее положение объекта и его высоту. Затем функция возвращает сумму этих значений. 4. #object1 {...} С помощью значений position, left и top установите ID объектов. 5. function showPos(objectID) {...} Создайте функцию JavaScript, в которой используются функции, определенные на шаге 2 и 3. В этом примере функция showPos() просто присваивает значения, возвращаемые функциями findRight() и findBottom(), переменным и затем отображает эти значения в предупреждении. 6. onClick="showPos('object1')" Чтобы запустить функцию, созданную на шаге 5, добавьте обработчик событий и передайте ему ID объекта, к которому хотите обратиться. Вы можете заметить небольшое несоответствие между найденными значениями в Internet Explorer и Netscape 4 и аналогичными величинами Netscape 6. В последнем случае положение объекта задается по отношению к внутренней стороне рамки объекта, другие же браузеры определяют эти значения по отношению к внешней стороне рамки.

Z-индекс объекта CSS-атрибут z-index позволяет размещать позиционированные элементы в порядке стека в 3D (см. раздел «Элементы в поряд-

Рис. 12.20. В предупреждении указан номер слоя, на котором находится объект Листинг 12.12. Функция findLayer() определяет z-индекс отдельного объекта на странице

<html> <head> <script scr="findDOM.js"></script> <script> function setLayer(objectID,layerNum) { var domStyle = findDOM(objectID,1); domStyle.zIndex = layerNum; } function findLayer(objectID) { var domStyle = findDOM(objectID,1); if (domStyle.zIndex != null) return domStyle.zIndex; return (null); } </script> <style type="text/css"> #object1 { position: absolute; z-index: ->3; top: 175px; left:255px } #object2 { position: absolute; z-index: ->2; top: 100px; left:170px }

Z-индекс объекта 229 Листинг 12.12 (окончание)

#object3 { position: absolute; z-index: ->1; top: 65px; left: 85px } #object4 { position: absolute; z-index: ->0; top: 5px; left:5px } </style> </head> <body onLoad="setLayer('object1',3); ->setLayer('object2',2); ->setLayer('object3',1); ->setLayer('object4',0);"> <script> function whichLayer(objectID) { layerNum = findLayer(objectID); alert('Layer: ' + layerNum ); } </script> <div id="object1"> <a href="#" ->onClick="whichLayer('object1')"> <img scr="alice22.gif" ->width="100" height="147" ->border="0"></a><br clear="all"> </div> <div id="object2"> <a href="#" ->onClick="whichLayer('object2')"> <img scr="alice32.gif" ->width="140" height="201" ->border="0"></a><br clear="all"> </div> <div id="object3"> <a href="#" ->onClick="whichLayer('object3')"> <img scr="alice15.gif" ->width="150" height="198" ->border="0"></a><br clear="all"> </div> <div id="object4"> <a href="#" ->onClick="whichLayer('object4')"> <img scr="alice29.gif" ->width="200" height="236" ->border="0"></a><br clear="all"> </div> </body> </html>

ке стека (3D-позиционирование)» в главе 8 ) . С помощью JavaScript можно определить z-индекс отдельного объекта на экране (рис. 12.20). Однако если z-индекс не установлен динамически, Internet Explorer 4/5/6 и Netscape 6 его не распознают. Чтобы избежать этой ошибки, для определения z-индекса объекта при первой загрузке страницы приходится использовать JavaScript (листинг 12.12).

Определение z-индекса объекта 1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, нужно включить код findDOM. Для этого добавьте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет использоваться.

230 Среда, в которой вы работаете 2. function setLayer(objectID,layerNum) {...} В сценарий JavaScript добавьте функцию setLayer().Она устанавливает zиндекс объектов при первой загрузке станицы. Это позволяет обойти ограничения Internet Explorer 4/5/6 и Netscape 6. 3. functionfindLayer(objectID) {...} В код JavaScript добавьте функцию findLayer(). Она применяет ID объекта, к которому обращается. ID передается в функцию как переменная objectID. Таким образом создается DOM (см. раздел «Построение общей DOM» в главе 11). Затем функция использует ID для доступа к свойству z-index и возвращает это значение. 4. #object1 {...} Создайте ID правило и опишите положение объекта с помощью свойств position, type и z-index. 5. onLoad="..." Чтобы инициализировать z-индекс нужных объектов, используйте в тэге <body> функцию setLayer(). 6. function whichLayer(objectID) {...} Создайте функцию JavaScript, в которой применяются функции, определенные на шаге 2 и 3. В этом примере функция whichLayer() просто присваивает значения, возвращаемые функцией findLayer(), переменным и затем отображает их значения в предупреждении. 7. onClick="whichLayer('object1')" Чтобы запустить функцию, созданную на шаге 6, добавьте обработчик событий и передайте ему ID объекта, к которому хотите обратиться.

Рис. 12.21. Сколько времени мы будем видеть Чеширского кота?

Листинг 12.13. Функция findVisibility() определяет текущее состояние видимости отдельного объекта на странице, которое может иметь значение visible или hidden

<html> <head> <script scr="findDOM.js"></script> <script> function setVisibility(objectID,state) { var dom = findDOM(objectID,1); domvisibility.zIndex = state; } function findVisibility(objectID) { var dom = findDOM(objectID,1); if (dom.visibility == 'show') || ->(dom.visibility == 'visible')) {return 'visible';} return 'hidden'; } </script> <style type="text/css">

Состояние видимости объекта 231 Листинг 12.13 (окончание)

#object1 { position: relative; top: 5px; left: 5px width: 640px; visibility: visible; } </style> </head> <body onLoad="setVisibility ->('object1','visible');"> <script> function showVisibility(objectID) { var thisVis = findVisibility(objectID); alert('Visibility Status: ' + thisVis ); } </script> <br><br> <a href="#" onClick=" ->showVisibility('object1')"> Where is the Cheshire cat? </a> <div id="object1"> <img scr="alice24.gif" width="640" ->height="435" border="0"> </div> </body> </html>

Состояние видимости объекта У всех элементов с установленным положением есть также состояние видимости – hidden или visible (см. раздел «Определение видимости элемента» в главе 9). По умолчанию это состояние указывается как visible (рис. 12.21), но его можно поменять с помощью JavaScript (см. раздел «Отображение и сокрытие объектов» в главе 13). К сожалению, в Netscape 6 и Internet Explorer 4/5/6 нельзя получить доступ к состоянию видимости, которое изначально установлено в CSS. Это можно сделать, только если состояние определено динамически (листинг 12.13).

Выяснение состояния видимости объекта 1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, нужно включить код findDOM. Для этого добавьте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет использоваться. 2. f u n c t i o n setVisibility(objectID,state){...} В сценарий JavaScript добавьте функцию setVisibility(). Она устанавливает начальную видимость объектов при первой загрузке станицы. Это позволяет обойти ограничения Internet Explorer 4/5/6 и Netscape 6.

232 Среда, в которой вы работаете 3. function findVisibility(objectID) {...} В JavaScript добавьте функцию findVisibility(), которая применяет ID объекта, к которому обращается. ID пер е д а е т с я в функцию как переменная objectID. Таким образом создается DOM. Затем функция использует этот ID для доступа к текущему свойству видимости, установленному для объекта. В зависимости от полученного значения функция возвращает либо visible, либо hidden. 4. #object1 {...} С помощью значений position, type и visibility установите ID объектов. 5. onLoad="..." Чтобы инициализировать видимость нужных объектов, используйте в тэге <body> функцию setVisibility(). 6. function ShowVisibility(objectID) {...} Создайте функцию JavaScript, в которой применяются функции, определенные на шаге 3. В этом примере функция ShowVisibility() просто присваивает значения, возвращаемые функцией findVisibility(), переменным и затем отображает их значения в предупреждении. 7. onClick=" ShowVisibility ('object1')" Чтобы запустить функцию, созданную на шаге 6, добавьте обработчик событий и передайте ему ID объекта, к которому хотите обратиться. Если свойству visibility присвоено значение visible, то Netscape 4 распознает это свойство, хотя он хранит это значение как show, что является эквивалентом зна-

Рис. 12.22. В предупреждении указано положение верхнего края вырезанной области

Листинг 12.14. Функции findClipTop(), findClipRight(), findClipBottom(), findClipLeft(), findClipWidth() и findClipHeight() определяют отсекаемую область и границы отдельного объекта на странице

<html> <head> <script scr="findDOM.js"></script> <script> function setClip(objectID, clipTop, ->ClipRight, clipBottom,clipLeft) { var dom = findDOM(objectID,1); if (dom.clip.left) { dom.clip.top = clipTop; dom.clip.right = clipRight; dom.clip.bottom = clipBottom; dom.clip.left = clipLeft; } dom.clip = 'rect(' + clipTop + ' ' + ->clipRight + ' ' + clipBottom + ' ' ->+ clipLeft +')'; } function findClipTop(objectID) { var dom = findDOM(objectID,1);

Видимая область объекта 233 Листинг 12.14 (продолжение)

if (dom.clip.top) return dom.clip.top; if (dom.clip !=null) { var clip = findClipArray(dom.clip); return (clip[0]); } return (null); } function findClipRight(objectID) { var dom = findDOM(objectID,1); if (dom.clip.right) return dom.clip.right; if (dom.clip !=null) { var clip = findClipArray(dom.clip); return (clip[1]); } return (null); } function findClipBottom(objectID) { var dom = findDOM(objectID,1); if (dom.clip.Bottom) return dom.clip.Bottom; if (dom.clip !=null) { var clip = findClipArray(dom.clip); return (clip[2]); } return (null); } function findClipLeft(objectID) { var dom = findDOM(objectID,1); if (dom.clip.Left) return dom.clip.left; if (dom.clip !=null) { var clip = findClipArray(dom.clip); return (clip[3]); } return (null); } function findClipWidth(objectID) { var dom = findDOM(objectID,1); if (dom.clip.width) return dom.clip.width;

чения visible. Таким образом, при определении состояния видимости объекта нужно также искать и значение show, чтобы код работал во всех браузерах.

Видимая область объекта Зная высоту и ширину элемента, можно определить максимальную область, которую он занимает на экране (см. раздел «Размеры объекта»). Когда какая-либо часть элемента отсекается (см. раздел «Определение видимой части элемента» в главе 9), максимальная область сокращается, и на экране отображается лишь часть видимой области. С помощью JavaScript можно выяснить не только ширину и высоту видимой области, но и координаты верхнего, нижнего, левого и правого края отсекаемой части (рис. 12.22). Как и в случае с другими CSS-свойствами видимости, в Netscape 6 и Internet Explorer возникают трудности при чтении значений, связанных с отсекаемой частью, если они не установлены динамически. В листинге 12.14 и в разделе «Видимая область объекта» главы 13 показано, как избежать этих проблем и получить возможность менять отсекаемую часть объекта.

Обнаружение видимой области и границ объекта 1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, нужно включить код findDOM. Для этого добавьте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет использоваться. 2. functionsetClip(objectID,state){...}

234 Среда, в которой вы работаете В сценарий JavaScript добавьте функцию setClip(), которая устанавливает начальную отсекаемую область объектов при первой загрузке станицы. Это позволяет обойти ограничения Internet Explorer 4/5/6 и Netscape 6. 3. function findClipArray(str){...} В сценарий JavaScript добавьте функцию findClipArray(). Она используется Internet Explorer, который хранит размеры отсекаемой области в символьном виде, а не в виде чисел. Функция переводит строку символов в масЛистинг 12.14 (продолжение) сив чисел, каждое число в массиве соответствует одному из размеров отсеобласти. ifкаемой (dom.clip !=null) { 4. function findClipTop(objectID) {...} var clip = findClipArray(dom.clip); return функции (clip[1] –findClipTop(), clip[3]); Добавьте } findClipRight(), findClipBottom(), return (null); } findClipLeft(). Все они выполняют о д н и и те же действия на разных сторонах function findClipHeight(objectID) { объекта ID объекта, к коvar dom и= используют findDOM(objectID,1); if (dom.clip.height) торому обращаются. ID передается в returnкак dom.clip.height; функцию переменная objectID. Таif (dom.clip { DOM. Затем ким образом !=null) создается var clip = findClipArray(dom.clip); функция использует DOM, чтобы поreturn (clip[2] – clip[0]); лучить размер отсекаемой области. Для } этого в (null); Netscape применяются свойства return clip.top, clip.left, clip.bottom, } clip.right. С помощью findClipArray() функции определяют function findClipArray(clipStr) { var clip = new Array(); отсекаемую область, затем они получаvarдоступ i; ют к массиву, используя 0, 1, 2, clipStr.index0f('('); 3i =для верхней, левой, нижней parseInt(clipStr.substring(i + 1, clipStr.length), 10); иclip[0] правой=сторон соответственно. i = clipStr.index0f('', i + 1); 5. function {...} + 1, clipStr.length), 10); clip[1] findClipWidth(objectID) = parseInt(clipStr.substring(i i = clipStr.index0f('', i + 1); В сценарий JavaScript добавьте функции clip[2] = parseInt(clipStr.substring(i findClipWidth() и findClipHeight(). + 1, clipStr.length), 10); i = clipStr.index0f('', i +они 1); задейПри обращении к объекту clip[3] = parseInt(clipStr.substring(i +1, clipStr.length), 10); ствуют его ID, который передается в return clip; функцию как переменная objectID. Та} ким образом создается DOM. Затем с помощью DOM функция получает высоту и ширину видимой области. Для

Видимая область объекта 235 Листинг 12.14 (окончание)

</script> <style type="text/css"> #object1 { position: absolute; top: 60px; left: 0px overflow: hidden; clip: rect(15 350 195 50); } </style> </head> <body onLoad="setClip('object1',15,350,195,50);"> <br><br>Clip Dimension || <a href="#" onClick="alert('Click on Top: ' + findClipTop('object1') + 'px')"> Top</a> | <a href="#" onClick="alert('Click on Left: ' + findClipLeft('object1') + 'px')"> Left</a> | <a href="#" onClick="alert('Click on Bottom: ' + findClipBottom('object1') + 'px')"> Bottom</a> | <a href="#" onClick="alert('Click on Right: ' + findClipRight('object1') + 'px')"> Right</a> | <a href="#" onClick="alert('Click on Width: ' + findClipWidth('object1') + 'px')"> Width</a> | <a href="#" onClick="alert('Click on Height: ' + findClipHeight('object1') + 'px')"> Height </a> <div id="object1"> <img scr="alice31.gif" width="379" height="480" border="0"> </div> </body> </html>