готипа компании или «водяных Знаков».



ПРАКТИКУМ

Первый шаг на пути создания текстурного фона — рисование или загрузка не — большого изображения в формате GIF (файла текстуры), которое будет использо — ваться для формирования фона Web-страницы. Для создания вашего собственно —

го элемента текстуры можно воспользоваться таким графическим редактором, как

Photoshop. Кроме того, можно взять готовое изображение из галереи картинок,

поставляемой вместе с пакетом Microsoft Office, или выгрузить его из таких Web —

сайтов, как Microsoft Design Gallery Live (http://dgi. microsoft. com). После по —

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





лучения требуемого изображения сохраните его в каталоге изображений Web-сай —

та (например, в каталоге images). Далее, вставьте на страницу следующее прави — ло каскадного списка стилей:



body {background-image:url(images/marbleTile. gif)}



Web-браузер создаст мозаику (т. е. выведет на экран копии) изображения, со —

держащегося в файле, адрес которого указывается в скобках после ur l в правиле

каскадного списка стилей в объявлении свойства background-image. В приведен- ном примере Web-браузер заполнит фон Web-страниц текстурой из файла

marbieTiie. gif, как показано на рис. 4.17. Для изменения типа текстуры заме —

ните images/marbleTile. gif относительным путем и именем файла, в котором содержится изображение выбранной текстуры.





«Водяной знак» напоминает текстурный фон в том, что он также представляет собой графическое изображение, выводимое позади другого содержимого Web — страницы. Тем не менее, «водяной знак» выводится на страницу только один раз

и не копируется с целью заполнения всего фона Web-страницы. Более того, при пролистывании содержимого страницы в окне браузера желательно, чтобы «водя- ной знак» оставался на месте. К счастью, каскадные списки стилей предоставля — ют свойства фона, которые позволяют расположить на странице одну копию «во — дяного знака» и удерживать его на одном месте во время пролистывания содержимого страницы.

В отличие от квадратного изображения размерами 50×50 пикселей, которое использовалось для создания текстурного фона, изображение «водяного знака»

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

быть таким, каким оно должно выводиться на странице (см. рис. 4.18).

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





Рис. 4.18. Web-страница с логотипом компании (лампочкой) в качестве «водяного знака»

Для помещения «водяного знака» в центр фона Web-страницы добавьте в спи- сок стилей следующее правило:

body {background-image:URL(images/LightBulb. gif) ;

background-repeat:no-repeat;

background-position:center;

background-attachment:fixed} . . ,

Как и в случае с текстурным фоном из предыдущего примера, свойство

background-image устанавливает имя файла графического изображения, которое будет использоваться в качестве «водяного знака». В приведенном выше примере Web-браузер будет выводить на экран изображение из файла LightBulb. gif. Если вы хотите поместить на страницу другое изображение, замените images/ LightBulb. gif относительным адресом и именем файла изображения своего «во —

дяного знака». Значение no-repeat свойства background-repeat указывает Web — браузеру выводить на страницу только одну копию изображения. Свойство background-position используется для задания положения изображения на

странице, а значение fixed свойства background-attachment позволяет удержи — вать «водяной знак» во время пролистывания содержимого страницы.

Как вы, наверное, догадываетесь, «водяной знак» можно размещать не только

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

с использованием единиц длины и процентных значений. Для позиционирова — ния «водяного знака» с помощью ключевого слова применяются значения top, bottom, left, righ t и (как было продемонстрировано в примере) center. Таким

образом, для помещения «водяного знака» (фактически любого графического

изображения) в нижний левый угол фона Web-страницы необходимо следующим —

образом установить СВОЙСТВО background-position:



background-position:bottom right;



Использование единиц длины для позиционирования «водяного знака» пре —

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

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





ваться любыми единицами длины, имеющимися в каскадных списках стилей.

Например, для вывода «водяного знака» на экран на расстоянии 70 пикселей от левого края и на расстоянии 100 пикселей от верхнего края страницы можно

ВОСПОЛЬЗОВатЬСЯ СЛедуЮЩИМ Объявлением СВОЙСТВа background-position. *



background-position:7Ор х ЮОрх;

Обратите внимание, что сначала указывается расстояние от левого, а затем от верхнего края страницы.

Процентные значения, используемые для позиционирования фоновых изоб —

ражений, аналогичны по своей функции единицам длины. Тем не менее, вместо точного задания положения верхнего левого угла изображения, указывается рас — стояние между изображениями и краями страницы в процентах от соответствую- щих размеров окна Web-браузера. Например, для помещения изображения на расстоянии 25% ширины окна от левого края страницы и 50% высоты окна от верх- него края страницы объявите свойство background-position следующим образом:



background-position:25% 50%



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



Плавающие изображения и текст

На большинстве Web-страницы присутствуют как текст, так и изображения. Несмотря на то что старая поговорка о том, что одна картина может стоить ты — сячи слов, справедлива и сейчас, тем не менее, в сети Web изображения пока еще не заменили слов. Фактически страница, содержащая только изображения,

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

прошлом дизайнеры имели в своем распоряжении только атрибут align, кото — рый при использовании его с дескриптором заставлял Web-браузер обте- кать изображение текстом слева или справа. Теперь появилось свойство floa t каскадных списков стилей, которое позволяет задавать обтекание текстом не только изображений, но, как показано на рис. 4.19, и других элементов Web-страницы.



ПРАКТИКУМ

При применении свойства floa t каскадных списков стилей к элементу вы изы —

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

, за которым следует текст абзаца. В «нормальном» режиме Web-браузер по — местит на страницу изображение, а затем перед выводом на экран текста перей — дет на следующую строку. Чтобы изображение «плавало» слева от текста абзаца (как показано на рис. 4.19) задайте в дескрипторе свойство float, как по — казано в следующем примере:

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





Аналогично, чтобы текст абзаца находился слева от изображения, укажите

Web-браузеру, что изображение должно «плавать» справа от следующего элемента

HTML-кода:



src=»images/Shakespeare. gif» widths»110″ height=»132″>

Как уже упоминалось, атрибут floa t можно использовать с любым элементом Web-страницы, а не только с изображениями. Например, для изменения стиля заголовка 6, чтобы он находился слева от текста абзаца (как показано на рис.

4.19) вставьте в список стилей страницы следующее правило:

h6 {float:left}

Фактически плавающим можно сделать любой контейнер и объект, помещенный

в контейнер. Предположим, например, что необходимо создать начальную заглав — ную букву, скажем, ш, с которой начинается последний абзац на странице, показан — ной на рис. 4.19. Для этого создадим следующий класс каскадного списка стилей:

.fancyLetter { font-size:Зет;

font-style:bold;

color:yellow;

background-color:blue;

border-style:solid;

border-width:6px;

border-color:gray; float:left)

Затем поместим требуемую букву в контейнерный дескриптор :



MeiccnHpoBCKHe Сонеты



представляют собой 154 котортких поэмы, объединенные в одну поэму под названием…

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



Настройка внешнего вида списков

HTML-код предоставляет возможность использования двух типов списков:

упорядоченного (нумерованного) и ненумерованного (маркированного). Упорядо —

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

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

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



ПРАКТИКУМ

Для форматирования маркеров элементов списков используется свойство list —

styie-typ e списков стилей. Допустимые значения свойства перечислены ниже:





Для применения стиля к маркерам элементов списка используется атрибут

styl e в начальном дескрипторе списка. Например, для нумерации элементов упорядоченного (т. е. нумерованного) списка с помощью римских цифр в верхнем

регистре используется следующий дескриптор :

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







Аналогично, для маркировки элементов неупорядоченного списка с помощью

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



style=»list-style-type:square»>

При работе с неупорядоченными списками для использования в качестве маркера не стандартного символа, а графического изображения, можно прибег — нуть к услугам свойства list-style-image. Например, следующий дескриптор

заставляет браузер в качестве маркера неупорядоченного списка использо — вать изображение ИЗ файла FancyDot. gif:

И, наконец, свойство list-style-positio n используется для контроля поло — жения маркера элемента списка по отношению к тексту элемента списка. Свой —

ство list-style-positio n МОЖеТ принимать ОДНО ИЗ Двух Значений: insid e И outside. Значение outside используется при необходимости вставки маркеров списка вне текста элемента списка. Как показано в первом и третьем списке на

рис. 4.20, при установке значения свойства list-style-positio n равным

outside весь текст элемента списка будет находиться правее маркера* даже если текст занимает несколько строк.

И, наоборот, при установке значения свойства list-style-positio n равным inside, как показано в следующем примере, маркер элемента списка становить —

ся его частью:









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





Свойство list-style-typ e во втором списке, показанном на рис. 4.20, уста —

новлено равным inside. Обратите внимание, что маркеры (графические точки)

во втором списке выравниваются по первым буквам элементов фрвого и третьего

списков. Причиной сдвига вправо явилось то, что Web-браузер визуализирует

маркеры элементов списка внутри (т. е. в качестве части) каждого элемента списка.

Несмотря на то что примеры в этом совете показывают, 4to стили списков

можно задавать в самих дескрипторах списков, тем не менеЬ, рекомендуется пользоваться форматированием списков одновременно для всех страниц сайта.

Вместо индивидуального форматирования каждого неупорядоченного и упорядо- ченного списка выберите единственный формат, который будет самым подходя —

щим для вашего сайта. Затем напишите правила списка стилей, которое будет

одинаковым образом форматировать все списки. Например, еф и вам нравится,

как выглядит список при установке значения свойства list-styjie-positio n рав —

ным inside, И, при ЭТОМ ХОТИТе ИСПОЛЬЗОВаТЬ маркеры ИЗ фай|та FancyDot. gif, напишите следующее правило:



ul {list-style:url(images/FancyDot. gif) inside}

. . .

Обратите внимание, что синтаксис каскадных списков стилей позволяет ис —

пользовать сокращения. Если значения, объявленные в правил^, являются уни —

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

приведенном выше примере, в развернутом виде может быть Записана следую — щим образом:

ul {list-style-image:url(images/FancyDot. gif)

list-style-position:inside}



Создание эффектов текста и изображений

с помощью фильтров

При создании эффекта отбрасывания тени с помощью текста вместо исполь — зования графических изображений Web-браузер может загружать и выводить на

экран Web-страницу несколько быстрее. К сожалению, некоторое Web-браузеры

еще не поддерживают каскадные списки стилей. Как результат, |при использова —

нии таких средств списков стилей, как абсолютное позиционирование, некото —

рые посетители не будут видеть созданных вами эффектов. Фактически, в зави —

симости от свойств каскадных списков стилей, используемых для создания

эффекта, отдельные посетители увидят часть Web-страницы в в^де перекрываю —

щегося текста. Другим словами, эффекты на основе каскадных Списков стилей в

браузерах, не поддерживающих списков, не исчезают бесследно.

Компания Microsoft расширила каскадные списки стилей зр счет введения

свойств фильтрации, которые позволяют браузерам Internet Explorer (версии 4 и

выше) визуализировать эффекты как на основе графики, так и цг основе текста.

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

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





то, что Web-страница будет выглядеть не так, как предполагалось, тем не менее,

даже посетители с браузерам, не поддерживающими фильтров, смогут просмат — ривать ее содержимое.

„

ПРАКТИКУМ

Для создания эффекта с помощью свойства filte r примените его подобно любому другому стилю кас — кадных списков стилей. Например, для создания гиперссылки с эффектом свечения, показанной на рис. 4.21, можно воспользоваться следующим свой — ством стиля в дескрипторе привязки:





font-size:30pt; text-decoration:none»

href=»http://

www. NVBizNet. сот»>Свечение



ПРИМЕЧАНИЕ Фильтры не будут работать (т.’е. не бу- дут производить ожидаемого от них эффекта), если не ус- тановить свойство widt h элемента. Для графических элементов установите значение свойства widt h равным фактической ширине изображения, а для текстовых эле — ментов — равным 100% ширины элемента.









Позволяет сделать элемент частично или полностью прозрачным.

Размывает элемент, как если бы он перемещался с большой скоростью. Делает прозрачным указанный цвет в элементе.

Отражает элемент в горизонтальном направлении. Отражает элемент в вертикальном направлении.

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

Визуализирует элемент с обратным цветом и значением яркости. Проецирует на элемент источник света.

Визуализирует элемент с указанным цветом фона и прозрачным цве — том переднего плана.

Визуализирует элемент с тенью.

Визуализирует элемент, отбрасывающий тень.

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

Визуализирует элемент в черно-белых тонах с обратным цветом и значением яркости.

Синтаксис объявления фильтров, который должен соблюдаться при использо — вании их в дескрипторах элементов Web-страницы, показан в таблице 4.1. Не следует забывать, что свойство filte r будет работать только в том случае, когда установлено свойство widt h элемента.

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





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



Выравнивание надписей с элементами формы и

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

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

В общем случае, элементы ввода формы от формы к форме выглядят одинаково.

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



ПРАКТИКУМ

Для присвоения форме цвета фона, который будет выделять ее от другого содер —

жимого страницы, поместите форму в элемент , как показано в следующем примере:



Здесь дескриптор определяет область шириной 475 пикселей, в кото- рой находятся элементы формы. Несмотря на то что ширина элемента разделе — ния фиксирована (475 пикселей), длина формы (а, следовательно, и длина эле — мента разделения) определяется количеством, размерами и расположением элементов формы.

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

в списке стилей три класса:



div. row {clear:both; padding-top:5px; font-size:12pt}

div. row {clear:both; padding-top:12px}

div. row span. label {float:left; width:110px; text-align:right}

div. row span. element {float:right; width:375px; text-align:left}

Свойство floa t в классах style, labe l и styl e. element указывает Web-брау —

зеру, как располагать элементы внутри контейнера. Форматирование и позицио —

нирование текстовых элементов (т. е. надписей) с помощью класса style. labe l

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





приводит к их выравниванию по левому краю других находящиеся в контейнере

объектов. Применение же класса style. elemen t для форматирования и позици —

онирования элементов формы выравнивает их по правому Kpaip других находя —

щихся в контейнере объектов.

Для форматирования и позиционирования дескрипторов и , со — держащих надписи и элементы ввода формы, используются классы div. row,

span. label и span. element, определенные в предыдущем примере:





border:limegreen lpx solid; padding:5px»>

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

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





зом, вам удастся вывести десять фотографий за то же время, что выводится одна

полноэкранная фотография. Если посетители) понравиться описание одного их домов, он может загрузить его полноэкранную фотографию.

Если для выравнивания миниатюр изображений и надписей к ним использу —

ется HTML-таблица, браузер не сможет варьировать количество йакетов, выводи — мых в одной строке, основываясь исключительно на размере окна браузера. Если, например, вы создали таблицу с 10 столбцами, браузер должен будет все —

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

Как результат, в этом случае посетителю для просмотра всех миниатюр придется

пролистывать содержимое Web-страницы в горизонтальном направлении. С по —

мощью каскадных списков стилей вы можете варьировать количество миниатюр, выводимых в окне Web-браузера, в зависимости от его ширины.| Таким образом,

требования к нашей галерее миниатюр достаточно просты. В IjTML-документе

напишите код, который будет вставлять изображение, за ним Поместите деск —

риптор и текстовое описание, центрируемое под изображением.



Для указания Web-браузеру автоматически определять количество выводимых в

строке изображений, поместите каждое изображение (и его заголовок) в отдель —

ный контейнер И выровняйте каждый такой контейнер 1ю левому краю.

Кроме того, установите стиль элемента абзаца таким образом, чтобы-браузер

центрировал текст абзаца между левым и правым краем контейнера, как показа — но в следующем коде;

div. fLeft {float:left; padding-left:5рх; padding-right:$px}

div. fLeft p {text-align:center}

Первое правило создает класс fLeft, который можно применить к контейне —

ру для выравнивания контейнера (и его содержимого) по л|евому краю эле —

мента, расположенного на Web-странице после контейнера. Если в окне браузера нет места для вывода контейнера на экран в текущей строке, браузер

перейдет в Строку под текущим контейнером и выровшяет следующий

контейнер по левому краю Web-страницы. Второе правило указывает браузеру цент — рировать текст абзаца между левым и правым краями контейнера, формати —

рование и позиционирование которого осуществляется с помощью класса fLeft.

Таким образом, код для вывода на экран переменного количества макетов и

заголовков к ним в одной строке будет выглядеть следующим образом:



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





Для правильной работы код этого примера требует, чтобы каждый заголовок

макета содержал одно и то же количество строк, а длина каждой строки не пре- вышала ширины макета, под которым заголовок находится. Если одна или не — сколько строк длиннее миниатюры, Web-браузер, как и раньше, будет центриро — вать текст заголовка относительно краев контейнера. Тем не менее, миниатюра окажется слева, а не по центру над текстом. Для вставки полей между миниатю — рой и левым и правим краями контейнера, как показано на рис. 4.23, воспользуйтесь объявлениями padding-left и padding-right в определении

класса div. fLeft.

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





Отцентрируйте изображение в контейнере за счет введения полей между

изображением и левым и правым краем контейнера. Пр^ этом Web-брау —

зер отцентрирует текст под изображением, конечно, если общая ц|ирина изображе —

ния и полей с обеих сторон изображения больше, чем длина строкк заголовка.



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

Помимо управления внешним видом текста на Web-странице, правила каскад — ных списков стилей позволяют заставлять Web-браузер выводить на экран указа —

тель мыши определенного вида. Как правило, вид указателя мы|пи определяется

автоматически на основании типа содержимого, которое в данный момент вре —

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

указатель в виде руки. Изменение вида указателя позволяет посетителю понять,

что под указателем находится не простой текст или изображение.

Тем не менее, иногда Web-браузер не изменяет вид указателя, даже если на

Web-странице находится специальный элемент, который посетитель может ис —

пользовать. Например, в несколько HTML-дескрипторов можно включить атри —

бут title. При наличии атрибута titl e Web-браузер при наве)цении указателя мыши на соответствующий элемент Web-страницы выводит на экран короткую

подсказку. Предположим, например, что HTML-страница содержит следующий код:



Web Design Tips and Techniques»> HWDTT предлагает прекрасный набор советов, которые можно

использовать при исследовании Web-технологий.

Если посетитель подведет указатель мыши к слову «HWDTT» В предложении

«HWDTT предлагает прекрасный набор советов, которые можно использо —

вать при исследовании web-технологий», Web-браузер выведет на экран на не —

сколько секунд подсказку «Книга HTML & Web Desig n Tip s an

ПРАКТИКУМ

К сожалению, Web-браузеры не имеют никаких средств для сообщения посетите —

лю о наличии подсказок, определенных с помощью атрибута titjie. Для предос —

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

Web-страницы. Например, для изменения внешнего вида указателя на знак воп — роса при подведении его к элементам, определенным с помощью дескрипторов

, , ИЛИ Любым Другим Элементом, ОТМечеННЫМ КЛаССОМ help,

включите в каскадный список стилей на странице следующий код:



abbr, acronym, .help {border-bottom:Ipx dotted black; cursor:help}

Правило списка стилей в данном примере фактически предоставляет два ви — зуальных ориентира, как показано на рис. 4.24.

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





Рис. 4.24. Web-страница с всплывающими подсказками. Элементы, для которых определены

всплывающие подсказки, отмечены пунктирным подчеркиванием

За счет подчеркивания текста пунктирной линией (не сплошной) вы отмечае —

те аббревиатуры, сокращения и справочную информацию, находящиеся на стра- нице. (Текст, подчеркнутый черной пунктирной линией, означает, что для него

имеется дополнительная информация.) Более того, чтобы посетитель не перепу- тал подчеркивание, означающее наличие справочной информации, с подчерки- ванием, обозначающим гиперссылки, правило указывает, что при наведении ука — зателя мыши на аббревиатуры и сокращения, объявленные с использованием атрибута title, Web-браузер должен использовать указатель в виде знака вопроса

(указатель справки). *

А теперь, давайте предположим, что код из предыдущего примера будет пере — писан следующим образом:

Книга Web Design Tips and Techniques’^ HTWDT предлагает исключительно полезные советы

на все случаи использования

class=»help» title=»tables, forms, CSS, ASP, Graphics»>

Web-технологий

В этом случае Web-браузер поместит пунктирное подчеркивание под словами

«HWDTT» и «Web-технологии», что позволит посетителю понять, что для этих слов имеется дополнительная информация. При наведении указателя мыши на любой из этих элементов текста Web-браузер изменит внешний вид указателя, использующийся по умолчанию, на знак вопроса. Кроме того, если посетитель оставит указатель на месте на несколько секунд, на экране появиться всплываю — щая подсказка, текст которой определен в атрибуте titl e в HTML-коде Web — страницы.

Допустимые значения свойства cursor и описания назначения каждого вида указателя мыши перечислены в таблице 4.2.

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





Расположение элементов Web-страницы по слоям

При позиционировании элементов на Web-странице вы работаете только с

двумя размерностями. Например, для помещения формы на расстоянии 75 пик — селей от левого края и на расстоянии 50 пикселей от верхнего края страницы

будет использоваться дескриптор следующего вида:



form style=»position:absolute; left:75; top:50″>



Конечно, дескриптор
имеет такие дополнительные атрибуты, как

action и method (для примера приведем всего лишь два атрибута), которые ука — зывают Web-браузеру, соответственно, куда передавать результаты заполнения

формы и каким образом их форматировать перед передачей. Teii не менее, важ —

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

рования на Web-странице. Аналогично, относительное позиционирование озна —

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

Фактически при указании положения элемента в двух размерностях Web-брау — зер автоматически добавляет третью размерность (глубину). Предположим, на — пример, что в HTML-коде страницы содержится следующий код:

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





h2 style=»position:absolute; top:110px; left:75px;

background-color:yellow; border:solid 2px; font-size:25pt»> Текст заголовка уровня-2 text

hl style=»position:absolute; top:100px; left:50px;

background-color:yellow; border* solid 2px; font-size:35pt»>

Текст заголовка уровня-1 text

На страницу будут выведены только заголовки уровня 1. Web-браузер «не за — был» поместить на страницу заголовок уровня 2. Как раз наоборот, браузер сна —

чала помещает на страницу заголовок уровня 2 на расстоянии 100 пикселей от верхнего и на расстоянии 50 пикселей от левого края страницы. Затем поверх за —

головка уровня 2 Web-браузер поместит заголовок уровня 1. Таким образом, ког —

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

Свойство z-index каскадных списков стилей позволяет выбирать слой, в ко- торый Web-браузер поместит элемент. При написании HTML-кода можно быстро запутаться, если одновременно использовать свойства позиционирования каскад- ных списков стилей и свойство z-index, которое контролирует взаимное нало — жение элементов страницы.