Большая книга CSS Part 001 by Sergey Asf

css Second Edition

David Sawyer McFarland

POGUE PRESS'"

O'REILLY@ Beijing • Cambridge • Farnham • Kбln • Paris • Sebastopol • Taipei • Tokyo

БОЛЬШАЯ КНИГА

css

Дэвид Макфарланд

~nnTEPФ Москва

Санкт-Петербург

Ростов-на-Дону

Нижний Новгород

Екатеринбург

Киев

Харьков

2012

· ·

Самара Минск

Воронеж

Новосибирск

ББК УДК

32.988.02 004.738.5

М17

Макфарланд Д. М17

Большая книга селлеры

CSS. O'Reilly» ).

2-е иэд.- СПб.: Питер,

2012.-560

с.: ил.- (Серия ((Бест

ISBN 978-5-459-01560-7 Современные технологии веб-дизайна активно развиваются. Если раньше процесс графического оформления сайта представлял собой скрупулезную работу в

HTML,

то сегодня

CSS

позволяет без лиш

них усилий сощавать действительно уникальные, удобные и функциональные сайты.

CSS

(каскадные

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

CSS,

можно в полном объеме управлять внешним видом

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

самых современных интернет-технологий, а также актуальных и анонсируемых обновлений

CSS. ББК УДК

32.988.02 004.738.5

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

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

ISBN 978-5-459-01560-7 ISBN 978-0596802448 (англ.)

Sawyeг

McFarland

©Перевод на русский язык 000 Издательство <<Питер», © Издание на русском языке, оформление

000

Издательство <<Питер»,

2012

Краткое содержание

Об авторе

.............................................. . 12

О творческой команде &пагодарности Введение

................................... 13

......................................... 14

......................................- ........ 15

От иэдатепьства

........................................28 Часть

новый подход к

Основы

CSS

Глава

1. CSS -

Глава

Соэдание стилей и таблиц стилей

Глава

Селекторы: определение элементов стилизации

Глава

4. Механизм наследования стилей .......................96

Глава

5. Управление сложной структурой стилей: каскадность ..... 106 Часть

HTML .........................30 .................... .44

Применение

............ 63

CSS

Глава

Форматирование текста

............................ 126

Глава

Поля, отступы, границы

............................ 165

Глава

Добавление графики на веб-страницы

....... / ......... 203

Глава

Приводим в порядок навигацию сайта

................. 243

Глава

10.

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

........... : ........ 290

Краткое содержание

Часть Глава Глава

Глава Глава Глава

Глава

Макет страницы

11. Введение в разметку CSS .......................... 318 12. Разметка страницы на основе плавающих элементов ..... 329 13. Позиционирование элементов на веб-странице ......... 376 14. CSS для распечатываемых веб-страниц ............... 417 15. Совершенствуем навыки в CSS ...................... 437 16. CSS 3 - на гребне волны .......................... 460 Приложения

Приложеине

Справочник свойств

Приложеине

2. CSS

Приложеине

CSS ..................... 482

Dreamweaver CS4 ...................... 510

Ресурсы по

Алфавитный указатель

CSS ............................ 541

................................. 549

Оглавление

Об авторе

................................................. 12

О творческой команде &пагодарносrи

.................................... 13

............................................ 14

Введение .................................................. 15 Как работает

CSS ........................................... CSS ............ -.............................. Что необходимо знать ....................................... HTML: структура языка ...................................... Как работают НТМL-теги ..................................... XHTML: современный HTML ................................... HTML 5 - новый виток ...................................... Программное обеспечение для CSS ............................. Об этой книге ............................................. Основные разделы книги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Примеры программнаго кода на CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . О сайте MissiпgMaпuals.com ................................... Основная терминология ...................................... О стрелках ................................................ Соглашения, использованные в данной книге ..................... Технология Safari® ...................... : . .................. Преимущества

15 16 16 17 17 19 20 21 22 24 24 25 25 26 26 27

От издательства . .......................................... 28

Оглавление

Часть Глава

Основы

CSS.

1. CSS - новый подход к HTML ........................ 30

HTML:

.................................. Написание НТМL-кода для CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Важность doctype. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Долгожданный Iпterпet Explorer 8 .............................. Глава

прошлое и настоящее

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

.................... 44

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

Глава

30 33 40 42

Селекторы: определение элементов стилизации

45 47 48 49 52

........ 63

Селекторы типов: дизайн Страницы ............................. 63

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

Глава

65 67 70 71 75 80 85

4. Механизм наrnедования стилей ...................... 96

Что такое наследование? .....................................

96 .................... 98 Ограничения наследования . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Обучающий урок: наследование ........................... ; . . 100

Упрощение таблиц стилей через наследование

Глава

5. Управление rnожной структурой стилей: каскадность . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Каскаднасть стилей

........................................ .. Управление каскадностью . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Начинаем с чистого листа ................................... Обучающий урок: механизм каскадности в действии ............... Особенности механизма каскадности: какие стили имеют преимущества

106 111 114 117 119

Оглавление

Часть Глава

Применение

Форматирование текста

............................ 126

.............. Установка размера шрифта . . . . . . . Форматирование символов и слов . . Форматирование абзацев текста . . . Стилизация списков. . . . . . . . . . . . . Стилизация текста

........ ........ ........ ........ ........

Обучающий урок: форматирование текста

Глава

Поля, отступы, границы

CSS

. . . . .

.................. .................. .................. .................. .................. в действии . . . . . . . . . . . . . .

............................ 165

Понятие блочной модели ....................................

Управление размерами полей и отступов

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

CSS

Добавление графики на веб-страницы

и тег

<img> .......................................... ..................................... Управление повтором фоновых изображений. . . . . . . . . . . . . . . . . . . . . Позиционирование фоновых изображений . . . . . . . . . . . . . . . . . . . . . . . Сокращенный вариант свойства background . . . . . . . . . . . . . . . . . . . . . . Обучающий урок 1: совершенствуем изображения. . . . . . . . . . . . . . . . . Обучающий урок 2: создание фотогалереи ...................... Обучающий урок 3: использование фоновых изображений ........... Двигаемся дальше .........................................

Приводим в порядок навигацию сайта

165 167 175 179 180 185 191 202

............... 203

Фоновые изображения.

Глава

126 133 138 142 149 154

203 204 209 210 216 218 224 231 241

............... 243

Выборка стилизуемых ссылок ............................ ~

.... Стилизация ссылок . . . . . . . . . . . . . . . . . . . .. : . . . . . . . . . . . . . . . . . . Создание панелей навигации . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Современные методы стилизации ссылок. . . . . . . . . . . . . . . . . . . . . . . . Обучающий урок 1: стилизация ссылок ............ : ............ Обучающий урок 2: создание панели навигации ..................

243 246 253 263 272 278

10 Глава

Оглавление

10.

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

Правильное использование таблиц

...................

290

. . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

Создание стилей для таблиц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293 Создание стилей для форм . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299 Обучающий урок 1: создание стилей для таблиц . . . . . . . . . . . . . . . . . . 304 Обучающий урок 2: создание стилей для форм ................... 311

Часть Глава

11.

Введение в разметку

Типы разметок веб-страницы

Как работает СSS-разметка Стратегии разметки

Глава

12.

Макет страницы

CSS .........................

318

......... , ....................... 318

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320

........................................ 323

Разметка страницы на основе плавающих

элементов

.............................................

Использование плавающих элементов в разметках.

Преодоление проблем перемещения

Обработка ошибок в

329

. . . . . . . . . . . . . . . . 332

. . . . . . . . . . . . . . . . . . . . . . . . . . . 342

Internet Explorer б . . . . . . . . . . . . . . . . . . . . . . . . . 353

Обучающий урок 1: разметки с множеством столбцов . . . . . . . . . . . . . . 360 Обучающий урок 2: разметка с отрицательными полями ............ 368

Глава

13.

Позиционирование элементов

на веб-странице

........................................

376

Как работают свойства позиционирования. . . . . . . . . . . . . . . . . . . . . . . 376 Мощные стратегии позиционирования

. . . . . . . . . . . . . . . . . . . . . . . . . . 390

Обучающий урок: позиционирование элементов страницы. . . . . . . . . . . 403

Глава

14. CSS для

распечатываемых веб-страниц ............. 417

Как работают аппаратно-зависимые таблицы стилей ............... 417 Как добавлять аппаратно-зависимые таблицы стилей .............. 420 Создание таблиц стилей для печати ............................ 421 Обучающий урок: создание таблицы стилей для печати ............. 429

Глава

15.

Совершенствуем навыки в

CSS ....................

437

Добавление комментариев ...................................

437

Организация стилей и таблиц стилей ........................... 438

Оглавление

Устранение столкновений стилей в браузере ..................... 446 Использование селекторов потомков

Управление браузером Iпternet

Глава

16. CSS 3 -

. . . . . . . . . . . . . . . . . . . . . . . . . . . 450

Explorer . . . . . . . . . . . . . . . . . . . . . . . . . 455

на гребне волны

.........................

460

Обзор CSS 3 .............................................. 461 Селекторы в

CSS 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462

Прозрачность RGВА-цвет

............................................ 467

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468

Тень для текста

........................................... 472

Свобода для шрифтов ...................................... 474 Генерируемое содержимое страницы

........................... 477

Приложения Приложение

Справочник свойств

Приложение

2. CSS

Приложение

CSS ....................

482

Dreamweaver CS4 .....................

510

Ресурсы по

CSS ............................

541

Алфавитный указатель . .................................. 549

Об авторе Дэвид Сойер Макфарлаид (David Sawyer McFarland) явля ется президентом Sawyer McFarland Media, Inc., компании по обучению и разработке интернет-приложений в Портленде, штат Орегон. Он создает сайты с

1995 года:

именно тогда

Дэвид разработал свой первый проект- онлайн-журнал для специалистов в области коммуникаций. Он работал веб-мас тером в Калифорнийском университете в Беркли и в Центре

мультимедийных исследований Беркли (Berkeley Multimedia

Research Center), а также участвовал в проектировании и соз дании огромного количества сайтов для всевозможных кли-

ентов, включая

Macworld.com.

Кроме всего прочего, Дэвид является писателем, тренером и инструктором .

Он преподавал веб-дизайн в Высшей школе журналистики в Беркли, Центре элек тронного искусства

(Electronic Art),

Колледже искусств, Центре новой прессы

и Государственном университете Портленда. Им написаны статьи о Сети для журналов Practical Web

Design, МХ Developer's]ournal и Macworld, а также для пор

тала CreativePro.com. Дэвид также является автором книг Dreamweaver: Тhе Missing Manual и]avaScript:

Тhе

Missing Manual.

С автором вы можете связаться по электронной почте:

missing@sawmac.com

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

3).

О творческой команде Нэн Барбер

(Nan BarЬer)

(редактор) на9ала работать с серией

Missing Manual еще

в прошлом тысяЧелетии. Живет в Массачусетсе вместе со своим мужем и является

владелицей компьютера

Macintosh G4. Ее электронный адрес: nanьarЬer@oreilly.com. (Nellie McKesson) (выпускающий редактор)- проживает в Бриrтоне. Коротает свободное время, играя в музыкальной группе Dr. & Mrs. Van der Trampp (http://mysapce.com/drmrsvandertrampp) и делая футболки для своих дру НеJШи Маккессон

зей

(http://mattsaundersbynellie.etsy.com). Ее электронный адрес: nellie@oreilly.com. Марсия Симмоне

(Marcia Simmons) (литературный редактор) -

писатель и ре

дактор. Проживает в Сан-Франциско. В собственном блоге Мария рассказывает о технологических новинках и делится рецептами коктейлей

Анджела Говард

(Angela Howard)

(www.smartkitty.org).

(составитель алфавитного указателя)- за

нимается составлением указателей более

10 лет,

по большей части для компью

терной литературы, но время от времени интересуется и другими темами: путе

шествиями, альтернативной медициной и леопардовыми ящерицами. Живет в Калифорнии вместе с мужем, дочерью и двумя кошками.

Тони Раско

(Tony Ruscoe)

(технический редактор)- неб-разработчик. Живет

в Шеффилде, Англия. Первая его программа была написана для компьютера

Spectrum на языке BASIC еще в середине

1980-х годов. С

ZX 1997 года он занимается

разработкой сайтов и других веб-приложений, используя в ходе работы различные технологии. Сейчас он ведет свой персональный сайт http://ruscoe.net/ и сайт, по священный исследованиям: http://ruscoe.name/.

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

CSS Cookbook. New Architect и сайтов А List Apart, Digital W еЬ и W еЬ

Reference. Кристофер является основателем небольшой издательской компании, которая также занимается дизайном и была удостоена за это награды. Кроме того, К рис соведущий Adobe Task F orce - проекта по стандартизации Сети (W aSP, W еЬ Standards Project). Его сайт: http://www.cristopherschmitt.com/.

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

редакторов, Кристофера Шмидта и Тони Раско, которые предостерегли меня от

сбивающих с толку ошибок, а также Зое Гилленуотер (Zoe Gillenwater)- за ее бесценный вклад в первое издание книги. Кроме того, мы все в долгу перед неб-ди зайнерами, которые стали новаторами, используя

CSS

с творческим подходом,

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

Наконец, спасибо Дэвиду Погу (David

Pogue), чей неувядающий энтузиазм и вы - за очистку моих рукописей и прочую помощь в написании этой книги; моей жене Сколле (Scholle) -за любовь и поддерж ку; моему сыну Грэхему (Graham), который убеждал меня в том, что я закончу эту носливость ободряли меня; Нэп Барбер

книгу гораздо быстрее, если в каждой главе буду писать «Тра-ля-ля!~; моей чудес

ной дочке Кейт (Kate), чья улыбка всегда меня воодушевляла, и всей моей семье: маме, Дугу (Doug), Мари (Магу), Дэвиду (David), Марисе (Marisa), Тессе (Tessa), Филис

(Phyllis), Лес (Les), Дел (Del),

Патриции

(Patricia) и

Майку

(Mike).

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

Cascading Style Sheets (CSS), обеспечивают твор

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

Можно точно разместить и позиционировать изображения, создать столбцы и баннеры, выделить текстовые ссылки динамическими эффектами. Вы думаете, что все это довольно сложно? Напротив! Цель

CSS как раз и состо

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

CSS.

Как работает

CSS

Если вы пользавались стилями в программах обработки текста, например Microsoft W ord, или разметки веб-страниц, например Adobe InDesign, то язык CSS покажет ся знакомым. Стиль

- это правило, описывающее форматирование отдельного

фрагмента веб-страницы. Таблица стиля

- ряд определений стилей. CSS отличается от HTML тем, что это совершенно другой язык. HTML струк

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

CSS

тесно взаимодействует с браузером, чтобы

оформление НТМL-документа имело совершенный вид. Другими словами, язык

HTML отвечает за содержание,

CSS -

за внешний вид веб-страниц.

Например, вы могли бы использовать

HTML,

чтобы превратить фразу в заго

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

CSS для фор

матирования заголовка, скажем, большим полужирным красным шрифтом с пози ционированием на расстоянии

50 пикселов

от левого края окна.

повсеместно для изменения и улучшения отображения

CSS

требуется

HTML.

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

ком

50 пикселов.

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

Можно также создать стили для определенных НТМL-тегов так, чтобы, напри мер, все заголовки первого уровня (теги <hl>) на вашем сайте были отображены

в одинаковом стиле, независимо от того, где они размещенЫ.

Введение

Преимущества

CSS

.]о появления

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

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

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

CSS, напротив,

имеют следующие преимущества.

О Больше возможностей форматирования, нежели в

HTML.

CSS

вы можете

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

О При использовании

CSS вы решаете, каким образом добавить фоновое изобра

жение на страницу. Оно может отображаться в виде неперекрывающейся мо заики, повторяться и т. д.

О Еще более значимо то, что стили форматирующие команды

CSS занимают намного меньше места, чем HTML. Например, тег <font>. Применяя CSS, вы

можете уменьшить размер веб-страниц. В результате они будут стильно выгля деть и быстрее загружаться. О Стилевые таблицы также облегчают обновление сайта. Можно собрать все сти ли в единственный внешний файл и связать его со всеми страницами сайта. Когда вы редактируете стиль, изменения моментально затрагивают все элемен

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

таблицы стилей. ПРИМЕЧАНИЕ----------------------------------------------- НТМL уже настолько умудрен опытом и преуспел в пренебрежении требованиями Консорциума

Всемирной паутины - Woгld Wide Web Coпsortium (WЗС), ответственного эа определение стандар WWW, что большое количество тегов, используемых исключительно для форматирования внеш

тов

него вида

HTML (тег

<foпt>, например), уже устарело.

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

www.codehelp.co.uk/html/

depгecated.html.

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

ете небольшой опыт работы с

CSS).

HTML (и,

возможно, име

Подразумевается, что вы создали пару сайтов

(или по крайней мере несколько веб-страниц) и знакомы с основными тегами, такими как

<html>, <р>, <hl>, <tаЫе> и т. д., составляющими основу языка гипертек CSS бесполезен без HTML, поэтому, чтобы продол-

стовой разметки документов.

Как работают НТМL-теги

жать изучение

CSS,

вы должны знать, как создать простейшую веб-страницу с ис

пользованием основных НТМL-тегов.

Если вы раньше создавали веб-страницы на

HTML,

но чувствуете, что знания

требуется освежить, вам поможет следующий раздел книги. ПРИМЕЧАНИЕ-----------------------------------------------

Если вы только знакомитесь с HTML и возможностями применения его на практике,· то посетите сайты бесплатного обучения:

HTML Dog

(www.htmldog.com/guides/htmiЬegiппer/) и WЗSchools (www.

wЗschools.com/html/). Если вам больше нравится читать книги, обратитесь к руководствам по соз

данию сайтов: Creatiпg

Web Sites: Тhе Missiпg Maпual Мзтью Макдональда (Matthew MacDoпald) или Head First HTML with CSS & XHTML Элизабет Фриман (EiisaЬeth Freemaп) и Эрика Фримана (Eric Freemaп) издательства O'Reilly.

HTML:

структура языка

В языке гипертекстовой разметки

HTML используются простые команды, имену - фрагментов. Ниже приведен

емые тегами, для определения различных частей

код

HTML простой веб-страницы:

<!ООСТУРЕ

HTML PUBLIC html4/strict.dtd"> <html> <head>

"-//WЗC//DTD

HTML 4.01//EN"

"http://www.wЗ.org/ТR/

<title>Этo заголовок веб-страницы</titlе>

</head> <body> <р>А это содержимое страницы</р>

</Pody> </html> Конечно, пример очень простой, но демонстрирует все основные элементы, не

обходимые обычной веб-странице. В нем вы заметите то, что называется обьявле нием типа документа,- DOCTYPE, за ним следует тег html (в угловых скоб ках-< и>), потом

а в нем

head («голова~. заголовок), следом body («тело~. тело документа),

непосредственно содержимое веб-страницы. Все это завершается закры

вающим тегом

</html >.

Как работают НТМL-теги В пр иведенном выше примере, как и в НТМL-коде любой веб-страницы, большин ство команд-тегов используются парами, начиная и завершая какой-то фрагмент

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

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

мым слэшем (/)после первого символа скобки(<).

Введение

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

О Самая первая строка примера содержит объявление типа документа

DОСТУРЕ.

Это объявление - не совсем настоящий НТМL-тег: такая строка сообщает брау зеру о том, с каким именно типом НТМL-страницы ему придется встретиться.

Подобных типов существует не так много. Один из них

XHTML -

веб-страни

ца, основанная на языке разметки XML. Об XHTML вы узнаете в следующем разделе. Конечно, можно и не использовать объявление типа документа, но это считается дурным тоном. Кроме того, далее вы узнаете, что

DOCTYPE -

это

один из основных элементов, необходимых для того, чтобы быть уверенным, что ваше СSS-оформление будет работать во всех браузерах. О Тег <htm l > требуется в начале веб-страницы и (с добавленным слешем) в конце. Этот тег говорит браузеру, что документ является программным кодом на язы кеНТМL. Все содержимое страницы, включая остальные теги, находится между откры вающим и закрывающим

<html >.

Если представить веб-страницу в виде дерева, то <html> будет его стволом. Две основные части любой веб-страницы

заголовок и тело

представляют

собой ветви. О Заголовок веб-страницы, заключенный в теги <head>, содержит название. Здесь также может содержаться другая информация, невидимая при просмотре веб

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

Кроме того, заголовок может содержать информацию, используемую браузером для правильного отображения веб-страницы и для придания ей интерактивно сти. В заголовке документа можно разместить, например, таблицы стилей, а так же сценарииjаvаSсгiрt, функции, определения переменных.

О Тело веб-страницы, следующее непосредственно за заголовком и заключенное

в теги <body>, содержит все, что должно появиться в окне браузера: заголовки, текст, изображения и т. д. Внутри

•

<р> -

<body>,

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

открывающий тег начинает абзац, а закрывающий </р> -

заканчи

вает;

•

<strong>- выделяет текст полужирным шрифтом; например, фрагмент <strong>Warni ng! </strong> сообщит браузеру о том, что слово Warning! долж но быть выделено;

•

<а>, или тег привязки (якорный), -создает гиперссылку, при щелчке на кото

рой можно переместиться в другое место веб-страницы или на другой сайт (нужно указать браузеру эту ссьmку путем размещения ее внутри <а>, например, можно набрать <а href="http: 1/www.mi ssingmanual s. соm/">Нажмите здесь !</а>). Браузер знает, что при щелчке кнопкой мыши на ссылке со словами Нажми

те эдесь! посетитель вашей страницы должен перейти на сайт с адресом

http://

www.missingmanuals.com. Часть тега а - слово href- называют атрибутом, а URL

XHTML: современный HTML

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

бута

URL) явля http: 1lwww .mi ssi ngmanual s. com- значение атри

href.

XHTML: современный HTML Множество яэыков продолжают сражаться за титул лучшего языка для Всемирной паутины. Язык

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

непривередлив: строчные или прописные буквы в тегах или вообще их смесь (на пример, теги <body>, <BODY>, <BoDy> абсолютно идентичны), наличие возможности опускать закрывающие теги (например, можно создать абзац, используя только открываЮщий тег <р>, а закрывающий </ р> даже и не указывать). С одной стороны, подобная гибкость позволяет создавать сайты гораздо быстрее, но с другой

она

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

гих мест, где у вас есть возможность использовать свои веб-страницы. Появление

XHTML 1.0-

это новая жизнь

использования. Если вам знаком

HTML, но уже для HTML, не волнуйтесь: XHTML -

повсеместного это не револю

ционно новый язык, на изучение которого уйдут годы. Это обычный основанный на возможностях

XML.

Как и

HTML

язык

XML

HTML,

но

использует теги,

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

но ею обмениваться. Однако в отличие от

HTML язык XHTML не ограничен конкретным набором тегов. На самом деле XML позволя'ет вам задавать свои соб ственные теги, используя для этого определенные правила. XML вообще дает воз можность делать очень многое, начиная от создания RSS-потоков новостей и за канчивая созданием списков воспроизведения для

Прекрасный способ узнать, что лучше-

iTunes. HTML 4.01 или XHTML 1.0,-

вести

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

HTML 4.01 вы можете сделать прекрас

ный и функциональный сайт, который будет работать еще очень и очень долго. Что ж, если вы хотите продолжать использовать

дуйте рекомендациям, предложенным в гл.

HTML,

то внимательно сле

Например, вы обязательно должны

объявлять тип документа для своих НТМL-страниц, иначе ваши СSS-стили могут перестать работать в некоторых браузерах. Кроме того, вам необходимо валидиро вать вашу страницу (то есть проверить ее на соответствие всем нормам и правилам

для данного типа

HTML),

чтобы быть уверенными в том, что в ней нет никаких

типологических или других ошибок, которые могут повлиять на ее внешний вид. То же самое вам нужно проделывать и с ХНТМL-страницами, правила валидации которых значительно строже. К примеру, если для НТМL-документов указывать

DOCTYPE не обязательно, то для XHTML это непременное условие. ПРИМЕЧАНИЕ----------------------------------------------- Если вы действительно хотите разобраться в структуре XHTML, зайдите на обучающий сайт WЗSchools ХНТМL по адресу www.wЗschools.com/xhtml/default.asp.

введение

Код страницы

HTML,

показанный в начале книги, в

XHTML будет выглядеть

так:

<!DОСТУРЕ html PUBLIC "-//WЗC//DTD XHTML 1.0 Tran5itional//EN" TR/xhtmll/DTD/xhtmll-tran5itional .dtd"> <html xmln5="http://www.w3.org/1999/xhtтl"> <head>

"http://www.wЗ.org/

<title>Этo название веб-страницы.</titlе>

<теtа

http-equiv="Content-Type"

content="text/htтl:

char5et=utf-8" />

</head> <body> <р>Это содержимое веб-страницы.</р>

</body> </htтl>

Как видите, этот код очень походит на НТМL-код. Чтобы ХНТМL-файл соот ветствовал стандартам

XML,

нужно придерживаться некоторых правил.

О СтраJПЩа должна начинаться с объявлеiПiя ТШiа документа (DОСТУРЕ). Это две самые первые строки кода. Можно подумать, что они ничем не отличаются

от ~ех, что представлены в примере ранее: здесь объявляется тип XHTML 1.0 Transitional для ХНТМL-документа. Чуть больше об этом, а также о важности этих типов для CSS вы узнаете из гл. 1. О Tem и их атрибутъ1 должны быть написаны в нижнем реmстре. Это же каса ется и <body>. О Для атрибутов тегов требуются кавычки. Например, ссылка <а href=http: 11 www. mi 55 i ngтanua l 5. сот> правилька в HTML, но не будет работать в XHTML. Вы должны заключить значение атрибута href в кавычки: <а href="http: 11 www. тi ssi ngтanua l s. сот">. О Все теm (даже пусТЪiе) должНъ1 быть закрыты. Например, абзац в XHTML

должен начинаться с <р> и заканчиваться </р>. Проблема в том, что некоторые теги не имеют пар (пустые), то есть у них нет завершающего тега. Таков, напри

мер, тег разрыва строки. Чтобы закрыть его, нужно вписать в конце тега, перед закрывающей скобкой, символ обратного слэша:

HTML 5 -

<br/>.

новый виток

Всемирная паутина не ограничивается языками

XML

или

XHTML.

2006

году,

на момент выхода первого издания этой книги, Консорциум WЗС (Консорциум

Всемирной паутины, World Wide Web Consortium) работал над языком XHTML

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

Mozilla (Firefox) и Apple (Safari), отказались делать браузеры, поддержива XHTML 2, WЗС сменил направление деятельности и сформировал группу разработчиков для очередного нового стандарта, которым стал HTML 5. ющие

Программное обеспечение для

CSS

Итак,

HTML собирается вновь быть у руля. Но, по правде говоря, случится это 2022 года. Иными словами, не беспокойтесь пока о том, что вам изучать: HTML или XHTML. В данный момент вы можете свободно использовать как HTML 4.01, так и XHTML 1.0. Все браузеры понимают эти языки. В гл. 1 я вас познакомлю со спо собами, которые укрепят связку HTML (или XHTML) и CSS. не раньше

ПРИМЕЧАНИЕ----------------------------------------------- Если вы не очень хорошо знакомы с созданием веб-страниц, то многое покажется сложным и не

совсем понятным. Не волнуйтесь, в гл. 1 мы поговорим о таком современном инструменте, как WЗС Validator, который служит для того, чтобы проверить правильность кода XHTML. Кроме того, он проверяет правильностъ вашей страницы и сообщает, все ли в порядке.

Программное обеспечение для

CSS

Чтобы создавать неб-страницы на языках HTML и

CSS, вполне достаточно обычного Macintosh. После набора нескольких сотен строк кода HTML или CSS вы, наверное, захотите пользо текстового редактора, такого как Блокнот в Windows или Text Edit в

ваться программ ой, более подходящей для работы с неб-страницами. В этом разделе

перечислены некоторые из них. Одни бесплатные, другие придется приобрести. ПРИМЕЧАНИЕ----------------------------------------------- Существуют буквально сотни программ, которые могут помочь вам в создании веб-страниц, поэто му здесь приводится неполный список. Все же это самые популярные программы, которыми поль зуются любители

CSS

на сегодняшний день.

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

попробовать одну из нижеприведенных программ.

jEdit (Windows, Мае, Linux, http://jedit.org/). Бесплатный текстовый редактор, использующийjаvа, работает практически на всех компьютерах. В нем вы най

дете большинство тех функций, которые доступны в коммерческих программах, О

включая подеветку синтаксиса для CSS. Notepad++ (Windows, http://notepad-plus.sourceforge.net/).

Множество людей

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

HTML- и

СSS-кода, включая подеветку синтаксиса,

теги и другие ключевые

слова имеют собственные цвета, что значительно облегчает их поиск среди дру гих элементов

HTML и CSS. О НТМL-Кit (Windows, www.chami.com/html-kit/). Этот мощный редактор HTML/ XHTML предоставляет множество полезных средств для создания неб-страниц. Среди них: предварительный просмотр неб-страницы непосредственно в про грамме (поэтому вам не придется переключаться между браузером и редакто ром), ярлыки для добавления НТМL-тегов и т. д.

22 О

Введение

TextWrangler (Macintosh, www.barebones.com/products/textwranglerl). Эта бес платная программа - практически облегченная версия текстового редактора BBEdit для Macintosh. У TextWrangler нет встроенных средств, облегчающих редактирование HTML, но он обеспечивает цветовую подеветку синтаксиса (имеется в виду, что теги и атрибуты просто подсвечиваются разными цветами

для удобного просмотра стран'ицы и определения ее фрагментов), имеется под держка протокола

FTP

(вы можете загружать файлы на сервер) и др.

Коммерческое программное обеспечение Существует множество коммерческих программ для создания сайтов: от недорогих тектовых редакторов до мощных конструкторов.

EditPlus (Windows, www.editplus.com)-

недорогой текстовый редактор, который

включает подеветку синтаксиса, поддержку

FTP, автозавершение ввода и дру

гие функции.

skEdit (Macintosh, www.skti.org)- дешевый редактор неб-страниц, полная под FTP/SFTP, подсказка команд и другие полезные функции. Coda (Мае, www.panic.com/codal). Многофункциональное средство для создания

держка

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

FTP- и

SFТР-клиент и графический интерфейс для созда

ния СSS-стилей.

Dreamweaver (Macintosh и Windows, www.macromedia.com/software,ldreamweaver) визуальный редактор неб-страниц. Он позволяет видеть, как ваша страница вы глядит в браузере. Программа также включает мощный текстовый редактор и превосходные инструменты создания кода

тацию (например, мою книгу

CSS. Смотрите полную докумен Dreamweaver: The Missing Manual, O'Reilly) для

эффективного использования этой мощной программы.

Expression Web 2 (Windows, www.microsoft.com/expression)- новая программа Microsoft для неб-дизайна. Она заменяет FrontPage и включает много профее сианальных инструментов неб-дизайна, а также хорошую поддержку создания кода

CSS.

ПРИМЕЧАНИЕ-------------------------------------------------

Здесь речь идет о программах, которые позволяют редактировать код, написанный на НТМL/ХНТМL и С55. Вам достаточно изучить всего одну из них для создания веб-страниц. Если у вас уже есть любимый редактор

HTML/XHTML, которым постоянно пользуетесь, но средства которого не позво ляют редактировать код С55, то можете найти (55-ориентированный редактор. Их список приведен в приложении

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

ского пользователя. Зайдите на сайт www.w3.org{ТR/CSS21/, чтобы осознать, может ли это быть понятно обычному человеку.

Об этой книге

Не существует никакого официального руководства для изучения

CSS. Люди,

только начинающие заниматься этим, как правило, не знают, с чего начать. Цель этой книги

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

вые инструкции для создания красивых веб-страниц с использованием языка CSS.

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

МаКСИМалЬНОЙ ПОЛЬЗЫ ИЗ даННОГО материала ВЫ обязатеЛЬНО ДОЛЖНЫ УЧИТЬСЯ На приведеиных примерах

HTML и CSS.

Если же вы никогда раньше не создавали

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

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

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

если у вас имеется большой опыт создания веб-страниц, то не обращайте внимания на эти врезки. Они содержат подсказки, nриемы и методы для компьютерных поль зователей, но не для опытных программистов. ИНФОРМАЦИЯДЛЯНОВИЧКОВ

Разновидности CSS Как производители операционных систем и уаройав

И все-таки CSS 2.1 мало чем отличается от CSS 2, и боль

iPods, так и создатели CSS nоаоянно выnускают новые версии своих nрограммных nродуктов. CSS 1, nоявив

шинаво браузеров давно адаnтированы nод лу версию.

шмйся в1996 году, стал основой для дальнейшего

чего вы найдете в книге много nримеров обходных

совершенавования языка каскадных таблиц стилей.

nутей nравильного отображения веб-страниц с ис

CSS были введе

nользованием CSS 2.1 в различных версиях браузера.

В этой самой nервой версии языка

Исключение составляет lnternet Explorer 6, всnедавие

lnternet Explorer 7 ис

ны основные nонятия и команды: Структура таблиц

К счастью, в версии браузера

стилей, nонятие идентификатора элемента (см. гл. 3)

nравлено большинаво недостатков nредыдущих вер·

и большая часть свойав CSS.

сий, а версия lntemet Explorer 8наконец обрабатывает nрактически все nравила CSS 2.1 верно.

В версии

CSS 2были добавлены новые возможности,

мониторами и другими устройствами. Здесь также

Версия CSS 3 готовится к выnуску. Хотя Консорциум World Wide Web (WЗС) еще не утвердил пот стандарт,

добавипись новые оnределения идентификаторов

nроизводители некоторых браузеров уже адаnтируют

злементов и сnособность точно nозиционировать зле

свои nрограммные nродукты с учетом рекомендаций

менты на веб-араницах.

м особенноетем нового стандарта. Технология Safari

включая совместимость с различными принтерами,

нового

CSS 3 nредостав.nяет возможность добавлять

Данная книга nолностыо оnисывает версию языка CSS 2.1,

несколько изображений в фон одного элемента.

которая на сегодняшний день является стандартом

д вообще, очень много нововведений CSS 3 уже раб<r

языка каскадныхтаблиц стилей. Она унаследовала все

тают в современных браузерах, так что вся глава 16

возможности и особенности

посвящена именно им. Лучшим ресурсом,вниматель·

CSS 1. Сюда добавлены

некоторые новые свойава, а также исnравлены не

но следящим за развитием нового стандарта

точности nредыдущих версий.

является сайт CSSЗ.info (http://www.cssЗ.info).

CSS 3,

ПРИМЕЧАНИЕ------------------------------------------------

этой книге я периодически рекомендую nользоваться другой литературой по

достаточно развернуто освещены в данном руководстве.

CSS, если темы

не

Введение

Основные разделы книги Книга разделена на четыре части, каждая из которых содержит несколько глав.

О Часть

Основы

CSS.

Здесь описано соэдание каскадных таблиц стилей в це

лом и дан краткий обзор ключевых понятий, таких как наследоuание, иден тификаторы элементов, свойство каскадмости таблиц стилей. Попутно с изуче нием

CSS

вы получите основные навыки написания кода

HTML/XHTML.

Четыре обучающие программы закрепят полученные знания и дадут почув

ствовать мощь каскадных таблиц стилей. О Часть

2. Применеине CSS. Перенесет вас в реальный мир веб-дизайна. Вы изу CSS и их использование для форматирования

чите наиболее важные свойства

текста, попрактикуетесь в создании полезных инструментов навигации и смо

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

тываемых веб-страниц и как создавать красивые таблицы и фqрмы.

О Часть

Макет страницы. Поможет вам разобраться с самым запутанным, но

очень полезным аспектом

CSS: управлением размещения элементов на страни

це. Вы познакомитесь со схемами дизайна (размещение разделов в два и три

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

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

танном виде. Описаны также методы еще более эффективного применения

CSS. CSS, а также научитесь CSS 3, работающие уже сего

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

О Приложения. Справочник свойств

CSS

описывает каждое свойство в отдель

ности в простой и доступной для понимания форме, служит для быстрого по

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

CSS.

В остальных двух прило

жениях находится описание инструментов и средств для создания и примене

ния каскадных таблиц стилей: от приемов создания кода

Dreamweaver до

CSS

в программе

перечия полезных сайтов и книг.

Примеры программнога кода на

CSS

Эта книга создана для того, чтобы организовать быструю и профессиональную работу с вашими веб-проектами. По ходу чтения книги вы будете находить примеры пошаzовых обучающих про грамм, которые сможете выполнять, используя исходные данные (графические

образы и неэаконченные веб-страницы),'эагруженные с сайта www.sawmac.com/ css2e/. Вы немногому научитесь, если просто прочтете эти уроки, отвлекаясь на еще

что-нибудь. Однако если не будете торопиться, а станете терпеливо работать над

Основная терминология

примерами на компьютере, то это даст реальное понимание того, как проектиров

щики-профессионалы создают веб-страницы.

В обуЧающих уроках вы также найдете

URL законченных страниц, чтобы сравнить

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

О сайте На сайте

MissingManuals.com

www.missingmanuals.com

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

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

правлениям, касающимся содержания, и уЧИтываю их. Книга претерпевает изме нения всякий-раз, когда мы выпускаем очередной ее тираж, вносим уточняющие

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

Основная термин_ология При чтении данной книги и выполнении примеров на компьютере вы должны быть знакомы с некоторыми терминами и понятиями.

О Щелчок кнопкой мыпm. Пользуясь манипулятором типа ~мышь>.> вашего ком пьютера, вы можете выполнить три действия. Щелчок кнопкой мыши означает,

что нужно навести указате.т.rь мыши на какой-либо объект на экране монитора, а затем, не перемешая указатель, нажать и отпустить левую кнопку мыши. Двой

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

Если говорится, что нужно выполнить щелчок кнопкой мыши на Macintosh или Сtгl-щелчок на РС, то вы просто щелкаете кнопкой мыши, предварительно

нажав клавишу Х или

Ctrl (две клавиши Ctrl находятся по обе стороны от кла

виши Пробел).

О Ме100. Это строка с кнопками, находящаяся вверху вашего экрана или окна:

(Файл),

Edit (Редактирование)

File

и т. д. Чтобы появился список команд, соответ

ствующих каждому конкретному пункту меню, нужно просто щелкнуть кноп

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

О ОперациоiПIЫе системы. В книге подразумевается, что вы знаете, как открывать программы, просматривать страницы в Интернете, загружать файлы. Вы долж

ны знать, как пользоваться меню Пуск в Windows или • -меню в Macintosh, а так же Панелью управления в Windows или Системными настройками в Macintosh OS. Если вы владеете всей этой информацией, то у вас есть необходимая техниче ская основа для того, чтобы попробовать себя в программировании и насладить ся возможностями языка

CSS,

читая это руководство.

Веедеtiие

Остреnках В этой книге вы будете находить текст такого рода: •Откройте папку

System ~ Library ~ Fonts (Система~ Библиотека~ Шрифты)~. Это сокращение ряда цепочки команд, которые вы должны выnолнить, чтобы открыть nоследовательно три вло женные папки. Это означает: • На жестком диске найдите папку под названием

System (Система). Откройте ее. В окне системной nаnки есть nапка под названием Library (Библиотека); дважды щелкните кнопкой мыши, чтобы открыть ее. В этой nапке находится папка с названием Fonts (Шрифты). Дважды щелкните кноnкой мыши и также откройте ее~ . Точно такие же сокращенные команды помогут вам открыть нужный пункт

меню, как показано на рис.

0.1.

Page S!turce

CtrliU

E<J!Sal!en

F11

XieW Sooxce O>art

Рмс. 0.1. Такой способ перехода по стрелкам уnрощает выnолнение команд меню

Например, выбор меню View ~

Text Size ~ Increase (Вид

~ Размер шрифта ~ Увели

чить)- более компактный способ сказать: • В nункте меню View (Вид) выберите под пункт Text Size (Размер шрифта), а затем выберите подпункт Inaease (Увеличить)~.

Соглашения, использованные в данной книге Здесь приводится список соглашений, использованных в данной книге. Шрифт для названий

Применяется для отображения

URL, а также названий папок и выводимой на

экран информации.

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

Например, путь будет выглядеть так:

/Oeve 1oper 1Арр 1i cat i ons.

Технология SafariФ

Шрифт с nостоянной шириной

Применяется для отображения примеров исходного кода и содержимого фай лов.

Пол)'llирный wрифт с постоянной wириной

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

ПРИМЕЧАН ИЕ----------------------------------------------- Это подсказка, пожелание, заметка общего типа. Содержит nолезную nрикладную информацию рассматриваемой теме.

ВНИМАНИЕ--------------------------------------------------- Это предостережение или указание, говорящее о том, что вам необходимо быть внимательным. Оно часто указывает на то, что ваши деньги или ваша частная информация могут оказаться под угро зой.

СОВЕТ -----------------------------------------------------Это совет. Советы содержат полезную информацию no рассматриваемой теме, зачастую выделяя важные концепции или лучшие практические решения .

Технология

Safari®

Salari·

ВООК8

ONLINE ENABLED

Когда вы видите рисунок

Safari®EnaЫed на обложке своей

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

тронной библиотеки

O' Reilly Safari. Safari предлагает более продвинутую систему, чем элек

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

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

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

http://my.safa riЬooksonline.com.

От издательства Ваши замечания, предложения и вопросы отправляйте по адресу электронной поч ты

halickaya@minsk.piter.com

(издательство ~литер!>, компьютерная редакция).

Мы будем рады узнать ваше мнение!

На сайте издательства о наших книгах.

http://www.piter.com

вы найдете подробную информацию

ЧАСТЬ

Основы

новый подход к

CSS

Глава

1. CSS-

Глава

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

Глава

Селекторы: определение элементов стилизации

Глава

Механизм наследования стилей

Глава

Управление сложной структурой стилей: каскаднесть

HTML

css -

новый подход

кНТМL

Ваша неб-страница должна иметь грамотно написанный НТМL-код, чтобы можно

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

CSS. Из этой гла CSS. Если

вы вы узнаете, как писать НТМL-код, хорошо адаптированный под нужды

вы используете на своих неб-страницах

CSS, то фактически становится ле?:Че писать

НТМL-код. Больше не нужно применять средства НТМLдля создания и улучшения

дизайна страниц (собственно, HTML для этого никогда и не предназначался). Все, что связано с графическим дизайном страниц, обеспечивается с помощью CSS. Соответственно, работа над основным кодом неб-страниц на языке

HTML упроща CSS, имеют

ется, поскольку НТМL-страницы, написанные для совместной работы с

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

Посмотрите на рис.

1.1. Дизайн обеих страниц одинаков, однако верхняя созда CSS, а нижняя- только с помощью HTML. Размер НТМL-файла верхней страницы всего 4 Кбайт, в то время как его размер для ниж ней страницы, полностью написанной на HTML, - почти в четыре раза больше (14 Кбайт). Подход к написанию неб-страниц с применением исключительно HTML требует намного большего объема кода, чтобы достичь практически тех же визуальных эффектов: 213 строк НТМL-кода по сравнению с 71 строкой для вер сии с применением CSS. на лишь с использованием

HTML:

прошлое и настоящее

Как говорилось во введении,

HTML или XHTML на сегодняшний день являются

основой для написания любой неб-страницы во Всемирной паутине. При исполь зовании

CSS написание кода на языке HTML коренным образом меняется. Забудь

те про НТМL-теги, которые совсем не подходят для создания дизайна страниц

и достижения визуальных эффектов. Особенно это касается НТМL-тегов типа В следуюЩих разделах я объясню почему.

<font>.

ПРИМЕЧАНИЕ------------------------------------------------

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

CSS

о версии

HTML/XHTML,

на котором написаны

HTML:

прошлое и настоящее

......, .........

8 Saucy Succutents to Splce Up Your ledroom loгem ipsum dolor sit omet,lorem ipsum dolor slt omet. sed dlom nonummy nJЬh eulsmod tfncldunt ut. lfADIМEЯ08Y

Lorem ipNm dolor ~i t e o"...t.

Lorem ipsum dotor ~i1e omei,

lrtdoor urwt.s: sod or sнd?

8 Saucy Succulents to Splce Up Your Bedroom lorem fpsum doloг s!t amet,lorem ipsum dolor sll amet, sed

DolorSИAmet

IIUDnt8SТCМIY

Рмс.

Прошлое Когда

L'O'fё'm' ipsum dolor site

2!!l!1 Lorem iotviТ' dolor site

1.1. Веб-диэайн с применением CSS делает написание НТМL-кода проще

HTML:

все выглядело прилично

rpynna ученых создала

Интернет, 'который первоначально предмазначался

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

HTML

нужен был только для структурирования информации и представления

Глава

1. CSS- новый подход к НТМL

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

<hl>. Он выде <h2> создает подзаголовок с меньшим разме ром шрифта. Другой широко используемый тег -<о 1> ( ordered list - «упорядочен ный список~) - создает нумерованный список для перечислений типа: «Десять

:тяет в тексте важный заголовок, а тег

причин не играть с медузой~.

Когда язык

HTML стали применять не только ученые,

но и обычные пользова

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

структурированию данных. Например, вы можете

применить тег <Ь 1ockquote> (предназначен для цитирования материала из другого

источника) к любому тексту, который нужно выделить небольшим отступом вправо. Вы можете пользоваться тегами заголовков, чтобы выделить любой текст полу жирным шрифтом большего размера, независимо от того, заголовок это или нет. Достаточно сложный способ применеимя тега <tab 1е> был придуман веб-дизай нерами, чтобы создать колонки текста, а также точно позиционировать изображе ния и текст на странице.

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

щикам пришлось упражняться в применении тега <tab 1е> самыми необычными

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

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

<font> позволяет определять цвет, Irачертания и один

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

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

гов, широкого употребления изображений и т. д. для изменения дизайна страниц НТМL-код разрастался до неузнаваемости.

Настоящее

HTML:

фундамент для

CSS

Независимо от того, что представляет собой неб-страница

календарь промысло

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

Таким образом, чтобы неб-страницы на языке

HTML выглядели привлекатель CSS позво ляет HTML вернуться к исполнению своей прямой обязанности - созданию струк туры документа. Использование HTML для дизайна неб-страниц на сегодняшний но, дизайнерам приходилось усиленно трудиться. Дизайн с помощью

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

Написание НТМL-кода для

CSS

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

HTML как о

CSS.

Во время

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

его, чтобы упорядочить содержимое страницы, а

CSS-

чтобы сделать это содер

жимое привлекательным.

Написание НТМL-кода для

CSS

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

HTML.

Если раньше вы уже создавали

веб-страницы, то сможете избавиться от стиля написания НТМL-кода, который

. лучше быстрее забыть.

Сейчас речь пойдет о стиле написания НТМL-кода для его

совместного использования с кодом

CSS.

Думайте о структуре HTML

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

определения на веб-странице: например, основное назначение тега

<hl>- создать

заголовок-введение, предшествующий основному содержимому страницы. Заго ловки второго, третьего уровней и т. д.

подзаголовки

позволяют делить содер

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

<hl>),

а также

несколько разделов и, соответственно, подзаголовков (например, с тегом

<h2>),

которые, в свою очередь, содержат подразделы с заголовками более низкого уров ня. Представьте, насколько сложнее было бы читать эту книгу, если бы весь текст состоял из одного длинного абзаца, без деления на разделы, подразделы, пункты, без выделения примечаний, гиперссылок и т. д. ПРИМЕЧАНИЕ----------------------------------------------- Дополнительную литературу по языкам разметки

HTML./XHTML вы сможете найти в руководстве HTML & XHTML: Тhе Defiпitive Guide Чака Мусциано (Chuck Musciaпo) и Билла Кеннеди (Bill Кеппеdу), издательство O'Reilly, а обучающие программы и примеры-на сайте www.wЗschools.com. Полный перечень всех доступных тегов языков разметки HTML./XHTML приведен на сайте www.wЗschools. com/tags/. Помимо тегов заголовков, в

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

содержимого веб-страницы, а также для определения назначения ее каждого логи ческого фрагмента. Наиболее часто применяют следующие теги: <р>

- для создания

абзацев текста, <ul>- для создания маркированных (ненумерованных) списков. Далее по степени применения идут теги, отображающие специфичное содержимое, например

<abbr> -

сокращения, аббревиатуры,

При написании НТМL-кода для

CSS,

<code> -

программный код.

выбирая теги, ориентируйтесь на роль,

которую играет фрагмент текста на веб-странице, а не на внешний вид, который

текст приобретает благодаря этому тегу (рис. нанели управления

1.2).

Например, перечень ссылок на

это и не заголовок, и не абзац текста. Больше всего это

Глава

1. CSS- новый

nо.Ф<од к

HTML

похоже на маркированный список параметров. Таким образом, выбираем тег

<ul >.

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

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

The Urban Agrarian Lifestyle А

Revolutiort in Indoor Agriculture

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nosttud exerci tation ullamcorper suscipit loЬortis nisl ut aliquip ех еа commodo consequat. Duis autem vel eum iriure. Рис.

1.2. Пример

изменения внешнего вида текста

на странице благодаря использованию

До появления средств

CSS

дизайнеры прибегали к применению тега

HTML для достижения

<font>

и других

определенных визуальных эффектов:

<р>

<strong> <font color="#0066FF" size="5" face="Verdana. Arial. Helvetica. sans-serif">Urban Agrarian Lifestyle</font></strong> <br /> <font color="#FFЗЗOO" size="4" face="Georgia. Times New Roman. Times. serif"> <em> <strong>A Revolution in Indoor Agriculture <br /></strong></em></font> Lorem ipsum dolor sit amet ... </р>

Используя

CSS,

можно добиться тех же результатов (и даже лучше) с гораздо

меньшим объемом НТМL-кода (см. рис.

1.2):

<hl>The Urban Agrarian Lifestyle</hl> <h2>A Revolution in Indoor Agriculture</h2> <p>Lorem ipsum dolor sit amet ... </р> Кроме того, применяя

CSS для

дизайна веб-страницы, вы используете

HTML

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

Два новых НТМL-тега Даже весь спектр НТМL-тегов не может удовлетворить потребностей веб-ди:зай нера в разметке разнообразного содержимого веб-страниц. Конечно, тег <code> у до-

Наnисание НТМL-кода для

CSS

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

<rec i ре> ( •набор команд•) подошел бы лучше. Но, увы, такого тега не существует. К счастью, ки

HTML предлагает два тега для

группировки, объединения и разбив

в общем , для определения логического фрагмента веб-страницы. Они позво

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

CSS. БРИЛЛИАНТ БЕЗ ОГРАНКИ

Простой HTML- помощь поисковым серверам Научившись писаtь НТМL-код так, чтобы использоваtь

то nоисковый сервер может уnустить важное содер

его исключительно для структурирования содержи

жимое страниц или некоторые страницы вообще не

мого документов, и применяя

будут систематизированы. Простой и структуриро

CSS как

инструмент

HTMl, напротив, будет легко просматривать

для создания дизайна, стили3ации, придания стра

ванный

ницам 3аконченного внешнего вида, вы обнаружите

ся и систематизироваться поисковыми системами.

дополнительные преимущества простого и поиятиого

Использование тега <hl:> для выделения важных

HTMl. С одной стороны, вы сможете подняtь nозиции

тем страниц (в противоположнОСtь форматированию

своих веб-страниц в nоисковых системах, заняв верх

текста большим попужирным шрифтом) -

ние строки в тисках таких поисковиков, как

Google,

ный подход, поскольку поисковые серверы nридают

Yahoo!, MSN и др. Когда поисковые серверы сканируют

большое значение содержимому этого тега во время

просторы Интернета в поисках новых сайтов и новой

сканирования страниц.

грамот

информации, они систематизируют данные, просмат

ривая НТМL-коды веб-страниц в nоисках реального

Рекомендации

содержимого. Старый способ написания НТМL-кода

правильного восприятия их поисковыми системами

Google по созданию веб-страниц для

с применением форматирующих тегов (например

смотрите на сайте

<font ") и множества таблиц для создания дизай

guldellnes.html.

www.googte.com{webmasters/

на страницы влияет на работу поискового сервера. Некоторые поисковые системы прекращают чтение

О хитростях написаниR НТМl-кода, оптимизировнного

НТМL-кода страницы после просмотра определенного

специально для поисковых машин, вы прочтете по

количества символов. Если у вас на страницах имеет

адресу www.digital-weЬ.oom/artides/seo_and_your_

ся большой объем НТМL-кода для создания дизайна,

weЬ_sitЩ.

Теги <di v> и <span> похожи на пустые сосуды, которые вы сами и заполняете. Поскольку у них нет никаких свойств для визуализации, вы можете применять к ним СSS-стили, чтобы фрагменты внутри этих тегов выглядели так, как вам хочется. Тег <di v> (предназначен для деления на фрагменты) определяет любой отдельный блок содержимого, например абзац или заголовок. Однако вы так же можете логически объединить любой набор таки х элементов, как заголо

вок, несколько абзацев, маркированный список и т. д., в единственном блоке

<div>. Тег <div>- замечательное средство разбивки веб-страницы на такие ло гические фрагменты, как баннер, нижний колонтитул, боковое мettiO и т. д. Впоследствии , используя

CSS,

вы сможете nозиционировать любой иа этих

фрагментов в выбранное место всб-страницы , соадавая сложную схему раам<..'Т ки (см. часть

3).

Глава

Тег <span> применим к внутренним

1. CSS -

новый nодход к НТМL

(inline) элементам страницы, то есть к сло

вам, фразам, которые находятся в пределах абзаца текста или оглавления. Его мож но использовать точно так же, как и другие внутренние НТМL-теги, например как

<а> (чтобы добавить ссылку к фрагменту текста) или <strong> (чтобы выделить слово в абзаце полужирным шрифтом). Можно применять тег <span>, чтобы указать название компании, и затем использовать CSS, чтобы выделить это название дру гим шрифтом, цветом и т. д. Рассмотрим пример этих тегов в работе. К ним добав

лены атрибуты id и cl ass, часто используемые для применения стилей к фрагмен там страницы.

<di v id="footer''> <p>Copyright 2006. <span class="ЬizName">CosmoFarmer.com</span></p> <p>Call customer service at 555-555-5501 for more information</p> </div> Это было краткое введение в теги для неб-страниц. В разд. (!Селекторы классов: точное управление~ гл.

тании с

3 рассказывается, как пользоваться такими тегами в соче CSS, чтобы получить полный творческий контроль над дизайном неб-стра

ниц.

Что нужно забыть об

HTML

CSS позволяет писать более простой и понятный

НТМL-код. Вам больше не нуж

но пользоваться тегами и атрибутами HTML для создания и улучшения дизайна неб-страниц. Тег <font> -наглядный тому пример. Единственная его цель состоит в том, чтобы изменить цвет, размер и начертание шрифта текста страницы. Он не выполняет никакого структурирования и не делает страницу логически более по нятной.

Привожу список рекомендаций, тегов и атрибутов

HTML, которые вы можете

легко, без ущерба для внешнего вида страниц заменить СSS-стилями. О Избавьтесь от тега <font> для управления отображением текста. это гораздо лучше (о форматировании текста читайте в гл.

CSS выполнит

6).

О Забудьте о тегах <Ь> и <i >, используемых для выделения текста курсивом или полужирным шрифтом.

CSS в состоянии сделать полужирным или курсивным

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

матирующими тегами языка HTML. Чтобы выделить слово или фразу, поль зуйтесь тегом <strong> (браузеры в любом случае отображают текст, выделен ный этим тегом, как полужирный). Если вы хотите придать тексту чуть меньший

акцент, то пользуйтесь для его выделения тегом <em> (браузеры выделяют со держимое этого тега курсивом). СОВЕТ---------------------------------------------------- Чтобы выделить заголовок статьи курсивом, nользуйтесь тегом <cite> - таким образом вы убьете сразу двух зайцев. Он одновременно выделяет заголовок курсивом и nомечает его как цитату для nоисковых серверов. Заnомните это, nожалуйста.

О Не пользуйтесь тегом

<tab l е> для разметки страницы. Применяйте его только

с целью отображения табличной информации (например, электронных таблиц,

Написание НТМL-кода для

CSS

списков, диаграмм). В части

3 этой книги вы узнаете, что CSS позволяет создать

всю необходимую разметку веб-страницы гораздо быстрее и с меньшим объемом кода, нежели с помощью тега

<ta Ь l е>.

О Уберите атрибуты тега

<body>, которые всего лишь улучшают внешний вид со держимого веб-страницы: background, bgcol or, text, l i nk, al i nk и vl i nk устанавли вают цвет текста, фона страницы, гиперссылок, добавляют фоновое изобра жение на страницу.

CSS

справляется с этим гораздо лучше (см. в гл.

СSS-аналоги этих атрибутов). Избавьтесь также от браузер-зависимых атрибу тов, устанавливающих границы страницы:

marginheight. CSS выполнит и эту работу О Не злоупотребляйте тегом

leftmargin, topmargin, marginwidth,

(см. гл.

7).

<br />. Если вы привыкли пользоваться им для встав

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

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

<font>, чтобы первая строка абзаца была похожа на заголовок). Использование свойства margi n в CSS дает свободу определения таких парамет ров, и вы с легкостью можете установить интервал между абзацами, заголовка ми и другими блочными элементами (см. разд. ~Управление размерами полей и отступов~ гл.

7).

ПРИМЕЧАНИЕ------------------------------------------------

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

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

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

устаревший стиль написания НТМL-кода. Сюда также входят атрибуты позициони

рования изображений, текста в абзацах и ячейках таблицы. Вместо этого обратитесь к средствам CSS, которые обеспечат и выравнивание текста (см. подраздел ~вы равнивание текста~ разд. ~Форматирование абзацев текста~ гл. 6), и устаНовку гра ниц (см. разд. ~добавление границ~ гл. 7), и фоновые параметры (см. разд. ~Уста новка цвета фона~ гл. 7), и позиционирование изображений (см. разд. ~Фоновые изображения~ гл.

8).

Подсказки: выбираем правильную дорогу Всегда неплохо иметь подробное пашагавое руководство к действию. Если вы все

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

<hl>,

чтобы определить ее главную

тему. Представьте, что это заголовок главы: ведь название главы дается один раз. Корректное использование тега ства

<hl>

имеет дополнительное преимуще

правильную систематизацию страниц поисковыми серверами (см. врез

ку ~Бриллиант без огранки~ выше).

Глава

1. CSS- новый подход к НТМL

О Используйте заголовки, чтобы указать относительную важность текста. Если два заголовка имеют одинаковую степень важности в теме вашей страницы, то при

меняйте тег заголовка одного уровня. Если один из заголовков имеет меньшую

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

уровня <hЗ> (рис.

заголовок на уровень ниже,

<h2>

переходите к подзаголовку

1.3). Лучше использовать заголовки по порядку и стараться не

пропускать их номера, например, никогда не переходите от тега

<h2>

к тегу

<h5> .

...

ChJ.a Vet Вe< <h1>

BOARDING YOUR CHlA

\<!;' ,,,·,:•J'JI.,;

<h2>

........ ,,ch...., ....... ch;.v.,

v.tltUI.Imvt.l1.. cь.. .. ",. .. t\.llpl&lialgiltiluoollt

t...ar,.t...,..-a.,

~eg«.<UI'U«.Ii!rmsl.umut~.

Creature Cиmforts

! ~:~.,.,..~~d* Pra!!!e'111110o8n.~ А

<hЗ>

f'10tft* AtoQoy Нот

НDIJWJ

L!Jre'n II)UrldoЬ'tltam8. ~adфisOnpdt.. ~~.~

~.ucьltrull\lrll\-nulll~....,.,.~"'*"---~

===~=-':=-==::...~

Н8taNI.urnllpu!Ut. ~

111.

rnoAeМ!Itii'I,CICIIМICIOQ ~.-. f81n~

.... ~ ... ~.

_." ,.". . . Oo•i•

<h4> 1'

~~-=-~~-е.~::~.

............... p.II'U8.~1d.~8\~~.--N8'1'1ы..dl:

! ===~~~==:...~ ln.~М.adtD.

Рис.

1.3. Исnользуйте теги

i 1 1

заголовков: расnоложите их в тексте в nорядке важности

О Используйте тег <р> для абзацев текста. О Применяйте маркированные списки, если у вас есть перечень связанных эле ментов, таких как ссылки навигации, заголовки, подсказки и др.

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

но выполняемых операций или порядок набора элементов. В обучающих при мерах этой книги (см. разд. «Обучающий урок: форматирование текста в дей ствии>> гл.

6) есть наглядный пример такого списка.

О Чтобы создать словарь терминов и их определений, пользуйтесь тегом <dl> (список определений терминов) в сочетании с тегами и

<dt> (название термина) <dd> (определение термина). Просмотреть пример использования этой ком

бинированной консtрукции тегов можно по адресу www.wЗschools.com/tags/tryit.

asp?filename=tryhtml_list_definition. О Если вы хотите включить цитату в виде отрывка текста с другого сайта, чьего

либо высказывания и др., используйте тег <Ь l ockquote> для длинного контекста (высказываний), а тег

<q>-

для коротких цитат.

О Применяйте такие малоизвестные теги, как <cite>, чтобы сослаться на книжный заголовок, Г3Зетную статью или сайт, <address> -для указания контактной инфор

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

Наnисание НТМL-кода дпя

CSS

О Не используйте теги или их атрибуты для изменения внешнего вида текста,

изображений. Все это выполнит

CSS.

О Если нет HTML-тera, соответствующего элементу или набору элементов, кото рые вы хотите выделить на странице для придания им определенного внешнего

вида, то пользуйтесь тегами <div> и <span>. Об их использовании будет расска зано в следующих главах (например, в разд. ~селекторы классов: точное управ ление• гл.

3).

О Не злоупотребляйте тегом <div>. Некоторые дизайнеры полагают, что <div>это все, что им нужно, и при этом игнорируют теги, которые могут быть более уместны. Возьмем пример создания навигационной панели. Можно добавить

блок <div> на страницу и заполнить его кучей ссылок. Но ведь гораздо лучше использовать маркированный список: в конце концов, навигационная панель и сама является списком ссылок.

О Никогда не забывайте указывать закрывающие теги. Открывающий тег <р> тре бует соответствующего ему закрывающего теrа </ р>, как и любые другие теги, за исключением одиночных, например

<br/>

<i mg/>.

О Проверяйте синтаксис своих веб-страниu с помощью WЗС-валидатора (см. врезку •Информация для новичков• и рис. 1 .4 ниже). Плохо написанный НТМL-код,

как и код с опечатками, вызовет множество непредсказуемЬiх ошибок брау зера.

Проверяйте nравильиость кода веб-страниц В HTML существуют оnределенные nравила: наnример,

Можно либо указать валидатору адрес существующей

тег <htm1> охватывает все содержимое веб-страни

страницы в Интернете, либо загрузить файл с НТМL

<head>.

кодом с вашего комnьютера, либо вставить НТМl-код

цы, а тeг<tttle> должен находиться внутри

В XHTML синтаксис еще более строrмй. ~ли забыть об

веб·страницы в окно формы на сайте и нажать кноnку

этих правилах или npoao сделать nри llaбope оnечат

запуска nроверки.

ку, то некорреКП!ый НТМL-код станет nричиной неко торых nроблем (наnример, веб-страница отобразится

Консорциум Всемирной nаутины -

в разпичных браузерах nо-разному). более того, вряд

Consortium

ли вы наnишете nравильный СSS-код вмеае с оши

оnределение стандартов веб-технологий и языков

бочным

nрограммирования, включая HTML, XHTMl, XMl.

HTMl. К счааью, сущеавуют nрограммные

(WЗС) -

World Wide Web

организация, ответственная за

средавадля лроверки nравильиости НТМl-кода. При нахождении ошибок на ваших веб-страницах WЗС

Самый легкий способ проверить НТМl-код- выnол

валидатор сообщит о них. При использовании браузера

нить синтаксический контроль (валидацию) на сайте

Firefox вы можете загрузить и установить надстройку,

WЗС по адресу http://valictator.wЗ.org/ (см. рис. 1.4).

коrорая nозволит выnолнять синтаксический контроль

д еще вы можете ВО<Лользоваться расширением для

веб-страниц неnосредственно в этом браузере, не nо

браузера

Firefox, которое называется Web Developer и размещается по адресу http://chrispederick.com/

сещая сайт WЗС. Эта надстройка даже nоnытается ис

'WOfk/weЬ-developer/. Это еще один nростой и быст рый сnособ nротестировать страницу WЗС-валида

можно no адресу http://users.skynet.Ьe/mgueury/ mozilla/. Подобный инструмент для браузера Safari до

тором.

стуnен на caйтewww.zappatic.net,/safaritk!y/.

править обнаруженные ошибки. Загрузить надстройку

Глава 1. CSS- новый подход к НТМL

00 •

WS hltjr/Л..idltoo.w3'"'g'""•l!d<t<./>)',.O _

~--

.. :. j)G«t-·-· I!)G«t-·--·!

Jw;r;;~v.r.......--

Val1datюn

fvlarkLIP

Velldate

Ьу

/> •

i)G<t-.-· !) • lii\ • с;, ,jio •

-~...- Р19<•

Sllctp

Т...,•

•· " ,

Servtce

URI

Valodlte а docvment on1ine

• More Optlons

Тhis vakdator cnecks lhe mati(\JO Vfidi!v d WеЬ doct.me~ in НТМL, ХНТМL, SМIJ.., MathМL, etc. W you WISII to vaidate speofic content soch as RSS!A!om !ee<Js 01 CSS sty!eshee!s. MoЬIIeOK C9!'!1en!. or to find Ь<о!<еn inks lhere are athervaйdatQ!S зn(j tools avarlaЬie

Тhе WЗС vaidators rely on c001П1111ity Щ)1Ю11 for hosting and development. Q2!Ш! and hejp us Ьufld Ьet!er tools for а Ьetter wеЬ.

Тlu$ ""109 NnS tllo W3C Mldcup V..dator

19JA.

=~~20Ct~~~~S:~=~==~W:=v YOUR lf1'tAAC.1'1Q.11r$ Wtl'1'l ntiS Sl7t ARl OUR tiAC.COIШAIIOf ;,•mк

ШUN'R flfWAr:Y SТA"nUENТS

Рмс.

1.4. HTML- валидатор от W3C поэволит быстро nроверить

Важность

PUВlCANO

правильность кода неб-страницы

doctype

HTML следует некоторым правилам, содержащимся в файле объявления тиnа документа (Document Туре Definition (ОТО)). ОТО представляет собой ХМL-до кумент, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа

HTML. Для каждой версии HTML есть свой ОТО.

Какое отношение все это имеет к CSS? Самое прямое. Если хотите, чтобы веб страницы корректно и согласованно отображались брауэерами, то вы сами должны сообщить брауэеру, какой версией HTML или XHTML пользуетесь, указывая этот самый тип документа - ООСТУРЕ - в начале веб-страницы. Но ООСТУРЕ определяет не только версию HTML (например HTML4.01 Transitional), а и со ответствующий ОТО-файл в Интернете. Если вы укажете DOCTYPE с ошибкой, то брауэер переключится в альтернативный (случайный) режим работы.

Такое переключевне - попытка производителей браузеров заставить свое про граммвое обеспечение вести себя подобно устаревшим браузерам, выпускавшимся до 1999 года (Netscape 4, lnternet Explorer 5). Если современный брауэер сталкивается со страницей, в которой отсутствует nравильный ООСТУРЕ, то он •думает~, что

важность

doctype

эта страница была написана в текстовом редакторе

HTML давным-давно,

и отобра

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

DOCTYPE ваши СSS-стилизованные веб-страницы, возможно, не будут смотреть ся так, как они должны выглядеть в соответствии с текущими стандартами. Если,

проверяя веб-страницу в браузере, вы невольно просматриваете ее в альтернативном режиме, то можете не ломать себе голову, пытаясь исправить проблемы отображения. Они связаны с неправильным

DOCTYPE,

а не с ошибочным

HTML или CSS.

ПРИМЕЧАНИЕ----------------------------------------------- Для более подробного ознакомления с техническими особенностями альтернативного режима работы

браузеров посетите сайты

www.quir1<smode.org/index.html?/css/quirksmode.html

http://hsivonen.iki.fi/

doctype/. Указать правильный

DOCTYPE достаточно просто. Нужно только знать ис HTML. По всей вероятности, вы создаете веб-страницы HTML 4. Возможно, даже начали пользоваться XHTML для

пользуемую версию с применением

сайтов (см. введение).

Самые популярные версии HTML и XHTML на сегодня - HTML 4.01 Transitional 1.0 Transitional. Эти типы языка разметки все еще позволяют использо

и XHTML

вать такие теги, как

HTML и XHTML,

<font>, обеспечивая

переход от старого

HTML к новым

типам

более строгим по синтаксису.

Лучше, конечно, вообще не применять эти теги, хотя они все еще работают в пе

реходных (traпsitional) версиях языка. Можно постепенно исключить их из кода своих веб-страниц. В синтаксически строгих версиях

HTML и XHTML некоторые

устаревшие теги не работают вообще. ПРИМЕЧАНИЕ------------------------------------------------

8 синтаксически

строгих версиях

HTML и XHTML запрещены теги и атрибуты,. предназначенные для <font> и атрибут центрирования абзаца. В этих версиях

стилизации веб-страниц, например тег

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

Если у вас версия

doctype

HTML 4.01 Transitional,

то добавляйте приведенный ниже

в самом начале веб-страниц:

<!DOCTYPE HTML PUBLIC

"-//WЗC//DTD

HTML 4.01 Transitional//EN"

"http://WvМ.w3.org/ТR/html4/loose.dtd">

Определение другой

DTD.

doctype

для

XHTML 1.0 Transitional

<html >.Эта строча определяет тип XHTML. <!DОСТУРЕ

похоже, но указывает на

Кроме того, необходимо добавить кое-что еще в открывающий тег

html PUBLIC

используемого

XML языка, в

нашем случае это

"-1/WЗC//DTD

XHTML 1.0 Transitional//EN" .dtd"> <html xml ns="http: 1IWvМ. wЗ. org/l999/xhtml • xml: l ang="en" l ang="en"> "http://WvМ.w3.org/ТR/xhtml1/DTD/xhtml1-transitional

ПРИМЕЧАНИЕ----------------------------------------------- Если вы используете на своих веб-страницах фреймы, то должны указать специально для их применения. Список соответствий типов

ресу

www.w3.org/QN2002/04/valid-dtd-list.html.

doctype

doctype,

предназначенный

смотрите на сайте WЗС по ад

Глава

1. CSS-

новый подход к НТМL

Если вы не хотите вникать в такие подробности, то просто убедитесь, что пра вильно определили doctype из вышеприведенного списка, и всегда добавляйте его первой строкой в НТМL-файлах (перед открывающим тегом <html>). В этом уве систом куске кода можно сделать описку или незаметную ошибку, так что лучше

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

Очень удобно иметь на компьютере шаблон-копию пустой НТМL-страницы с пра вильным doctype. Это дает возможность копировать ее каждый раз при создании

новой неб-страницы. Общие шаблоны для написания

HTML/XHTML веб-страниц

http://www.sawmac.com/missing/css2e/.

можно найти на сайте книги по адресу

ПРИМЕЧАНИЕ------------------------------------------------- Большинство визуальных программных па кетов для создания веб-страниц

Web)

автоматически добавляют определение

doctype

(Dreamweaver,

Expressioп

каждый раз, когда вы создаете новую веб

страницу. В хороших текстовых редакторах НТМL-кода имеются также ярлыки для облегчения до

бавления

doctype.

Долгожданный

Internet Explorer 8

Благодаря автоматическому обновлению продуктов

Microsoft

новый

lnternet

Explorer 8

сумел занять свою нишу на рынке браузеров. К великому счастью ди

;шйнеров,

IE 8 считается

версией, наиболее соответствующей стандартам. В ней

исправлены все ошибки, рожденные брауэерами

IE 6 и IE 7, а также достигнута CSS 2.1. Это значит, что хорошо сделан ные сайты будут выглядеть во всех браузерах (IE 8, Firefox, Safari и Opera) прак тически одинаково. Читая дальше, вы поймете, что это не касается браузеров IE 6 и IE 7, где потребуется соэдание особого, специфичного для каждого браузера кода, практически идеальная совместимость с

чтобы все выглядело одинаково. Тем не менее

IE 8 можно назвать хамелеоном.

Он может принимать вид других

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

(DOCTYPE). Вы уже знаете, что без указа DOCTYPE браузер начинает работать в режиме совместимости. А Internet Exploгer 8, работая в этом режиме, постарается представить страницу как Internet Explorer 5 (!!!). Но это еще не все! IE 8 может притвориться IE 7. Если кто-то, рассматривая ваш сайт в IE 8, пажмет кнопку Режим совместимосrи, то lE 8 станет lE 7 и покажет стра ницу, отключив все свойства CSS 2.1. То же самое может произойти, если компания Microsoft поместит ваш сайт в список совместимых страниц (Compatibllity View List). Это сайты, которые с точки зрения Microsoft выглядят лучше в IE 7, а не в IE 8. Вам не потребуется этот режим, если при создании сайта вы будете учиты ния

вать все рекомендации, предложенные в этой книге.

К счастью, у нас есть возможность сказать нужно добавить один mеtа-тег, чтобы

IE 8 начал

IE 8

быть просто

IE 8.

Для этого

игнорировать режим совместимо

сти и список совместимых страниц и стал отображать вашу страницу в режиме наибольшей совместимости со стандартами:

Долгожданный Intemet Explorer 8

Поместите эту строку в разделе

<head> вашей страницы, сразу за тегом <t i t 1е>. Internet Explorcr.

Эта конструкция будет работать и для последующих версий

Часть тега" IE;edge" сообщит будущим версиям браузера, что они должны исrюль i}Овать свои стандартные режимы, отображая сайты. Да. и не забудьте rюмсщать эту строку на каждой веб-странице!

ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВ

Кроссбрауэерное тестирование Как известно, существует множество различных брау

работа nрекрасно выглядит на вашем компьютере,

зеро в. Если вы являетесь пользователем Windows, то

известные проблемы с отображением страниц вiЕ 6или

по умолчанию вам доступен lпternet

Explorer, а еще

вы можете установить дополнительные браузеры, наnример

Firefox, Safari, Opera или Google Chrome.

IE 7 могут все испортить.

Итак, у вас три варианта.

Первый- куnить (или одолжить) Windоws-компьютер.

Второй -

установить Windows на собственный ком

Пользователи дррlе Мае могут остановить свой выбор

nьютер с nомощью программы Boot Camp (www.apple.

Safari или же восnользоваться Firefox 3 либо Google Chrome 1. Несмотря

com/macoSX/features/Ьootcamp.html}, но у вас долж

на nредустановленном браузерами

на то что все nоследние браузеры лучше всеrо присnо

на быть система Мае OS на основе nроцессора Третий -

lntel.

воспользоваться nрограммами виртуали

соблены для работы с веб-страницами, основанны

зации VMWaгe Fusion или Parallels Desktop. Они nозво

CSS, этого нельзя сказать об lntemet Explorer 6,

ляют заnускать виртуальную машину Windows одно

который все еще является самым расnространенным

временно с Мае OS так, что появляется возможность

браузером в Сети. Даже IE 7 содержит те же огрехи.

nереходить с Windows на Мае OS и обратно, тестируя

Чтобы знать наверняка, что ваши сайты работают у са

лучший из всех nредложенных. Как программы вир

мой широкой аудитории nользователей, вам потребу

туализации, так и Boot Camp требуют коnии Windows.

ми на

сайты в обеих оnерационных системах. Этот сnособ

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

Для всех. Существует еще один сnособ, достуnный для nользователей и Windows, и Мае OS, а также не

Windows. Обычно комnьютеры nод уnравлением Windows могут заnускать только одну версию браузера IE, то есть по умолчанию у вас нет ника кой возможности исnользовать IE б, IE 7 или IE 8 одно

требующий установки какого-либо дополнительного

временно на одном компьютере. Что ж, по умолчанию

в разных оnерационных системах и браузерах. Многие

Пользователи

nрограммнаго обесnечения. Нужно восnользоваться интернет-сервисами для кроссбраузерноrо тестирова ния. Они nозволяют видеть то, как выглядят страницы

вы этого не можете, а вот благодаря маленькой, но

из этих сервисов коммерческие, а nотому требуют де

очень полезной программе IEТester есть возможность

нег за исnользование.

Utmus (http://litmusapp.com/)

IE 5.5, IE 6, IE 7

делает скриншоты ваших страниц во многих браузерах.

IE 8 одновременно. Скачать ее можно по адресу

CrossBrowserTesting.com (www.aossЬrowsertestng.com)

узнать, как выглядят ваши страницы в

www.my-debugьar.com/wiki/IEТester/HomePage.

nозволяет удаленно работать с другим комnьютером.

Да, установите и другие браузеры на ваш компьютер:

нoй, где установлены все версии

Firefox, Safari, Opera и Chrome. К счастью, вам не пона

Такой сnособ nозволяет nроверять не только внеш

добится Мае, поскольку Apple выnускает браузер Safaгi

ний вид страниц, но и взаимодействие с ней, наnри

Иначе говоря, вы можете работать с Windows-мaши

и для Windows-мaшин.

IE, Firefox и Safari.

мер то, как работают nрограммы, наnисанные на

JavaScript в различных браузерах. Browsercam (www. Пользователи Мае OS. Для таких nользователей тес

Ьrowsercam.com) - еще один сервис, который nо

тирование немного затруднено. Вы nросто должны

зволяет создавать скриншоты страниц, как это делает

nроверять сайты вlntemet Explorer- это самый рас

Utmus, или же восnользоваться удаленным компью

nространенный браузер. Даже если ваша искусная

тером так, как это возможно в CrossBrowserTesting.

Соэдание стилей и таблиц стилей

Даже самые сложные и красивые сайты (в том числе и тот, который nредставлен на рис.

2.1)

когда-то начинзлись с оnределения единственного СSS-стиля. Посте

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

CSS

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

основных правил создания таблиц стилей. В этой главе мы начнем изучение

CSS

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

и использования таблиц стилей .

......,.,. " ....

'• •

. . . . ...... ••'""•'?'·r· • • • ,.-;...

"'1

.._".._........-.,.,.,.. . . ... .... .......... __ _. _.. ____..·---·.... -..._......_... .... ,.... _ _ :_to..l . .

,.,,_:;

, .._

_ff~·-··

~----~ ....

_.".,,_,_

_ , \....,. . . . .... ..... .. lloo1 _ _, ._ _ _

______

~----

. ,. _ """ ,..._ .... .......... ................... =:=::::.::.::-::::;.--..... ,. , __. ...._ ..............".

••_.,.,...... _. ..tm .. ~-·-.... " , _ - .... ~-> ~•.... -

..._..

..,.._.._.._

......

-.. ..........

'"'"- -~

...~•

.........

..... .......... . ,..~-·- ··---..... ··~..-\'00, .. - ........- . ••• ~ .. ·--~·· hc• -.· .• ......-..... -·~·~ ----.,..-·~

...

,._ .. .,._."_, .... ,. ....

'"....__ .........

. . ........... ................... .,....

Рис. 2.1. Любая СSS-стилиэованная веб-страница состоит из отдельных определений СSS-стилей

В левой части рис.

2.1

представлен код таблицы стилей

CSS,

стил ь основного содержимого веб-страницы. показаи ной справа.

определяющей

Что такое стиль

ПРИМЕЧАНИЕ----------------------------------------------- Многие люди лучше воспринимают материал, обучаясь сразу на конкретных примерах, предпочитая

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

Что такое стиль Определение стиля в

CSS, устанавливающего внешний

вид какого-либо элемента

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

150 пикселов

для списка

гиперссылок. Если бы стиль мог говорить, он сказал бы: ~Браузер, сделай, чтобы вот это выглядело так-то~. Фактически определение стиля состоит из двух основ

ных элементов: это сам элемент веб-страницы, который непосредственно подлежит

форматированию браузером,

селектор, а также форматирующие команды

блок

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

воз

можности форматирования бесконечны. ПРИМЕЧАНИЕ----------------------------------------------- Как и разработчики WЗС, веб-диэайнеры часто называют СSS-стили правилами. В этой книге оба термина взаимозаменяемы.

Разумеется, СSS-стили не могут быть написаны на обычном языке, как, напри мер, предыдущий абзац. У них есть свой собственный язык. В частности, чтобы

выбрать стандартный цвет и размер шрифта для всех абзацев на веб-странице, нужно напцсать следующее:

{ color: red; font-size: 1.5em: } Этот стиль как бы говорит браузеру: ~сделай текст всех абзацев веб-страницы,

помеченных тегом <р>, красным и установи размер шрифта равным полуторакратной

высоте латинской буквы

em ( em -

буква

напечатанная шрифтом

Cicero, -

стан

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

6). Любой стиль, даже самый простой, содержит несколько элементов 2.2). Он состоит из селектора, который сообщает браузеру, что именно форма

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

Значение Рис.

2.2. Пример описания стиля

Значение (или правила)

Глава

Соэдание стилей и таблиц стилей

О Селектор. Как уже было отмечено, селектор сообщает браузеру, к какому эле менту или элементам неб-страницы применяется стиль: к заголовку, абзацу, изображению или гиперссылке. На рис. 2.2 селектор р обращается к тегу <р>, передавая браузеру, что все теги <р> нужно форматировать, используя объявле ния, указанные в данном стиле. Благодаря большому разнообразию селекторов, предлагаемых языком CSS, и небольтому творческому потенциалу вы сможете мастерски форматировать веб-страницы (в следующей главе селекторы описа ны более подробно). О Блок объявления стиля. Код, расположенный сразу за селектором, содержит все форматирующие команды, которые можно применить к этому селектору.

Блок начинается с открывающей

скобкой

( {)

и заканЧивается закрывающей фигурной

(} ).

О Объявление свойства. Между открывающей и закрывающей фигурными скоб

ками блока объявления можно добавить одно или несколько определений или форматирующих команд. Каждое объявление имеет две части -свойство и зна чение свойства, заканчивающиеся точкой с запятой.

О Свойство. CSS предлагает большой выбор команд форматирования, называ емых свойствами. Свойство представляет собой слово или несколько написан

ных Через дефис слов, определяющих конкретный стиль или стилевой эффект. У большинства свойств есть соответствующие, простые для понимания назва ния, такие как

font-si ze, margi n-top, background-col or и т. д. (в переводе с англий

ского: размер шрифта, верхний отступ, цвет фона). В следующих главах будет описано множество полезных свойств

CSS.

ПРИМЕЧАНИЕ------------------------------------------------

8 приложении 1 вы

сможете найти удобный глоссарий свойств

CSS.

О Значение. Наконец настал тот момент, когда вы можете задействовать свой

творческий потенциал, приеваиная значения СSS-свойствам: определяя фоно

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

или 5em), URL (images/ (top, center, bottom). Вам не обязательно описывать стиль в одной строке, как изображено на рис. 2.2.

background. gi f),

(red

или

#FFOOOO),

длина (18рх,

200%

а также определенных ключевых слов

У стилей может быть множество форматирующих свойств, и есть возможность

облегчить просмотр таблицы стилей путем разбивки объявлений на строки. Напри

мер, поместите селектор и открывающую скобку в одной строке, каждое объявле ние -далее в отдельных строках, а закрывающую фигурную скобку -в последней строке стиля. Это будет выглядеть следующим образом: р

{ color: red: font-size: 1.5em: вместо

{ color:red: font-size:l.5em: }

Понимание таблиц стилей

Любой браузер игнорирует символы пробела и табуляции, так что вы можете CSS. Так, полезно

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

сделать отступ при перечислении свойств табуляцией или несколькими пробелами для явного отделения селектора от блока объявления. И к тому же один пробел между двоеточием и значением свойства, конечно, необязателен, но он обеспечи вает дополнительную удобочитаемость стилей. Фактически можно добавить лю бое количество пробелов там, где вам захочется. Например, со 1or:

и со 1or:

red -

red.

со 1or:

red

все варианты будут правильно работать.

ПРИМЕЧАНИЕ----------------------------------------------- Не забывайте ставить в конце каждой nары «свойство- значение» точку С'заnятой:

color: red; Проnуская эту точку с заnятой, вы собьете с толку брауэер, в результате чего таблица стилей будет нарушена и веб-страница отобразится некорректно. Однако не стоит nереживать

оnисанная ошибка достаточно расnространена, nоэтому nросто убе

дитесь в том, что исnользуете СSS-валидатор, о котором будет рассказано через пару страниц.

Понимание таблиц стилей Конечно, один стиль не превратит неб-страницу в произведение искусства. Он мо

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

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

бывают двух видов

лена стилевая информация: непосредственно в самой неб-странице или в отдель ном файле, связанном с неб-страницей. Как выбрать внутреншt:е или внеUUIИе таблицы стилей? Еще с момента изобре тения

CSS

внешние таблицы стилей были лучшим способом создания дизайна

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

жете присоединить одну и ту же внешнюю таблицу стилей к каждой странице сай та, создавая, таким образом, единЬ1й дизайн. А обновление внешнего вида всего

сайта будет заключаться лишь в редактировании одного-единственного текстово го файла

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

вы используете внешние таблицы стилей, неб-страницы содержат только сам НТМL-код, без кода громоздких вложенных таблиц для стилизации, без тегов <font>, без кода встроенных стилей CSS. Кроме того, когда браузер загрузит внеш нюю таблицу стилей, он сохранит этот файл на клиентском компьютере посетите ля неб-страницы (в специальной системной папке, называемой кэшем) для быст рого доступа к нему. Когда посетитель неб-страницы переходит к другим страницам сайта, которые используют ту же самую внешнюю таблицу стилей, браузеру нет

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

Глава

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

ПРИМЕЧАНИ Е ----------------------------------------------- Когда вы работаете над своим сайтом и польэуетесь предварительным просмотром в брауэере, кэш работает без всякой пользы для вас. Подробнее об этом рассказано в следующей врезке.

Кэш браузера обесnечивает значительное увеличение

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

скорости nросмотра веб-страниц.

CSS.

Снова вернувшись в браузер и перезагрузив

Всякий раз, когда браузер открывает веб-страницу,

страницу для просмотра результатов только что вне

он помещает загруженную информацию в кзш. Сюда

сенных изменений, вы видите, что никаких измене

также поnадают такие часто исnользуемые файлы, как

ний не nроизошло! Вы только что полали в ловушку,

внешние таблицы стилей

что

связанную с особенностями кзша. Дело в том, что при

позволяет окономить время загрузки веб-араниц.

nерезагрузке веб-страницы браузер не всегда nереза

Вместо того чтобы в следующий раз (при просмотре

гружает данные, уже находящмес.я в кзше, в том числе

CSS или изображения,

других страниц этого же сайта или повторного nросмот

внешние таблицы стилей. Таким образом, невозможно

ра этих же страниц в будущем) nовторно загружать те

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

же самые файлы, браузер может доешь их прямо из

с nомощью только что отредактированного СSS-кода

кзша, будь то nросмотренная ранее веб-<траница или

из внешней таблицы стилей.

рисунок. Однако не всегда то, что хорошо для посети телей сайта, удобно для вас.

Есть два nути решения этой nроблемы: выключить

ПО(J(ольку браузер кэширует и nовторно обращается

все содержимое веб-страницы.

кэширование или заставить браузер nерезагрузить к файлам внешних таблиц стилей CSS, это часто сбива

ет с толку, например во время рабоrы над дизайном

Чтобы обойти эту путаницу, можно выnолнить nринудк

сайта. Доnустим, работая над стилизацией веб-стра

тельную nерезаrрузку страницы (вместе< перезагрузкой

ницы, которая использует внешние таблицы стилей,

всех связанных файлов), нажав клавишу Orf, а затем,

вы nросматриваете ее в браузере, дабы убедlm>СЯ, что

удерживая ее, кноnку Reload (Обновить) браузера.

добились именно тоrо, чего хотели. Но не все выгля

В lntemet Exploгer для этой цели nредназначено сочета

дит так, как было задумано, хотя вроде бы в СSS-коде

ние клавиш Cbl+FS, а в Firefox- Orf+Shift:+R.

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

</style> НТМ L-кода, в теле тега <head> веб-страницы .

{

color: red : font-size: 1.5em:

Например:

<style>

Внешние таблицы стилей

}

</sty1e> </head> <body> /*

Далее следует остальная часть вашей веб-страницы

... */

ПРИМЕЧАНИЕ-----------------------------------------------

Вы можете nоместить тег <style> и все его стили nосле <title>, но веб-дИэайнеры обычно разме щают их nрямо nеред закрывающим тегом

</head>,

как nокаэано в nримере выше. Если вы также

исnолЬзуете код JavaScript на страницах, добавляйте его nосле таблиц стилей. Часто nрограммы

JavaScript nолагаются на CSS, nоэтому, добавляя таблицы стилей nервыми, вы гарантируете, код JavaScript будет расnолагать всей необходимой для своего выnолнения информацией. Тег <sty 1е> -тег HTML, а не

что

CSS, но именно он сообщает браузеру, что данные, CSS, а не HTML. Создание внутренней

содержащиеся внутри, являются кодом

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

<sty1e>,

как

описано выше, в самой веб-странице.

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

ется. Во-вторых, внутренние таблицы стилей доставляют много трудностей при

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

ченных в тег

<hl> ),

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

шрифтом зеленого цвета. Теперь вы хотите, чтобы заголовки были написаны ма леньким шрифтом

Courier синего

цвета. Используя внутренние таблицы стилей,

пришлось бы редактировать каждую страницу сайта. У кого-нибудь найдется столько времени? К счастью, для устранения данной проблемы нашлось простое решение 1

использование внешних таблиц стилей.

РИМЕЧАНИЕ--------------------------------------------------- Иногда можно nрибегнуть к сnособу добавления стилевой информации неnосредственно к каждому

конкретному НТМL-тегу без nрименения таблицы стилей. В обучающем уроке этой главы будет nокаэано, как выnолнить такой маневр, исnользуя встроенные стили.

Внешние таблицы стилей Внешняя таблица стилей - это не что иное, как текстовый файл, содержащий весь набор стилей CSS. Он не должен содержать НТМL-кода, поэтому никогда не вклю чайте сюда тег <sty 1е>. Вдобавок название этого файла всегда должно заканчивать ся расширением

CSS.

Можно давать какое угодно имя этому файлу, но лучше,

чтобы оно было наглядным. Назовите файл внешней таблицы стилей, например,

Глава

Соэдание стилей и таблиц стилей

g1oba1.css, si t e.css или mai n.css, если это общая таблица стилей, связанная со все ми страницами вашего сайта, или form .css, если он содержит описания для стили зации заполняемых форм сайта.

Точно так же, как вы должны были удостовериться

чтобы изменить до неузнаваемости весь тщательно

в nравильности наnисания НТМL-кода веб-страниц,

продуманный дизайн страниц сайта. Если веб-стра

исnользуя валидатор НТМL от WЗС (см. врезку «Инфор

ница, содержащая СSS-код, выглядит не так, как вы

lntemet

ожидали, то причиной тому может быть небольшая

мация для новичков)} в разд. «Долгожданный

Explorer 8~t гл. 1), проверьте СSS-код на наличие ошибок.

ошибка в коде.

На сайте WЗС имеется инс1J!Умент для nроверки синтак сиса кода CSS: http://jigsaw.wЗ.org/css-validator/.

СSS-ваnидатор от WЗС- первое средство поиска про блем с дизайном веб-страниц.

Он работает, как и НТМL-валидатор: можно ввести URL-aдpec веб-страницы (как вариант- только адрес

Можно также выполнить быструю проверку синтакси·

к внешнему СSS-файлу), загрузить или скопировать

са, используя браузер

СSS-файл, вставить код в форму и просто нажать кноп

с СSS-кодом, которую хотите проверить, и выберите

Firefox. Загрузите

в меню Tools (Инструменты) пункт Error

ку запуска проверки.

страницу

Console (Кон

соль оwибок). Нажмите кноnку wamlngs (Предупреж При наборе сss-кода очень просто сделать опечатку

дения), и вы увидите сnисок ошибок или оnечаток,

иnи ошибку, которой вполне достаточно дnя того,

которые не прошли проверку Firefox.

совп---------------------------------------------------Если есть веб-страница с внутренней таблицей стилей, а вы хотите исnольЗовать внешнюю табли цу стиле.й, то всего лишь вырежьте фрагмент оnисания стилей, расnоложенный между тегами

<style>

(без самих тегов). Потом создайте новый текстовый файл и вставьте в него СSS-код. Сохра

ните файл с расширением

CSS,

наnример gloЬal.css, и свяжите его с вашей веб-сrраницей, исrюль

эуя одну из методик, оnисанных далее .

Создав внешнюю таблицу стилей, вы должны подключить ее к веб-странице, которую нужно отформатировать. Можно прикрепить таблицу стилей к веб-стра нице с помощью НТМ L-тera <1i nk> или встроенного в CSS правила @i mport, которое

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

что выбор того или иного способа - Лишь вопрос предпочтения. ПРИМЕЧАНИЕ----------------------------------------------- Правило @import может сделать одну вещь, с которой тег <llnk> не сnравится,- nрисоединить одну внешнюю таблицу стилей к другой. Этот mособ оnисан в nодразделе «Исnользуйте несколько таблиц стилей~ раэд. «Организация стилей и таблиц стилей» гл.

15.

Связывание таблиц стилей с НТМL-кодом Наиболее распространенный метод добавления вн~шней таблицы стилей в неб страницы- использование НТМL-тега

<1 i nk>. Синтаксис применения этого тега

Внешние таблицы стилей

немного различается в зависимости от того, чем вы полъзуетесъ -· HTML или

XHTML.. Пример для

HTML:

HTML тег

пустой элемент, поэтому у него есть только открывающий тег и нет

соответствующего закрывающего тега</ l i nk>. В ходимо добавить слэш

XHTML для закрытия тега необ

(!).

В остальном теги связывания в

HTML и XHTML идентичны и требуют нали

чия трех атрибутов. О

re l =" sty l esheet" -

указывает тип ссылки; в данном случае это ссылка на табли

цу стилей.

type="text/css"-

сообщает браузеру, данные какого типа ему ожидать; в рас

сматриваемом случае

href-

текстовый файл, содержащий СSS-код.

указывает местонахождение внешнего СSS-файла на сайте. Значение

этого атрибута- URL-aдpec, который будет отличаться в зависимости от того,

где вы храните СSS-файл. Он работает так же, как атрибут s гс при добавлении изображения на страницу или атрибут

href гиперссылки, указывающей на дру

гую вёб-страницу. (08~---------------------------------------------------к веб-странице можно присоединить множество таблиц стилей, добавляя несколько тегов <link>, каждый из которых указывает на свой файл таблицы стилей. Эта методика - отличный способ организовать СSS-стили ваших веб-страниц. Подробнее об этом читайте в раэд. «Организация стилей и таблиц стилей» гл. 15. ·

Прикреппение таблиц сrипей с испопьзованием

CSS

CSS имеет встроенный способ привязки внешних таблиц стилей к коду HTML правило @import. Его нужно добавить в НТМL-тег <style>. Например: <style type="textlcss">

@import url(css/global.css); </style> В отличие от НТМL-тега <l i nk> правило @import -языковая конструкция

CSS,

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

href

css/gl оЬа l. css -путь к внешнему СSS-файлу. Кавычки, URL, необязательны. Таким образом, url (css/global.css) url ( "css/gl obal. css") будут работать одинаково.

ренном выше примере

в которые заключен и

CSS, нужно использовать url

и заключать путь к СSS-файлу в круглые скобки. Так, в рассмот

Глава

Соэдание стилей и таблиц стилей

@import, как и с помощью нескольких <l i nk>, можно присоединить любое количество внешних таблиц стилей:

О Посредством ~скольких правил

тегов

@import

можно добавлять обычные СSS-стили, если, например,

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

уже описанный во внешней таблице стилей. ПРИМЕЧАНИЕ------------------------------------------------

стилях, их nриоритетах и взаимодействии, а также о том, как создать стиль, который отменяет

другие ·стили на веб-странице, читайте в раэд. «Уnравление каскадностью» гл.

создать внешний СSS-файл, который содержит только nравила

@import,

Вы можете даже

выnолняющие nривязку

других файлов внешних таблиц стилей. Такая методика часто nрименяется в целях уnорядочения

и систематизации стилей сайта (см. nодраздел «Исnользуйте несколько таблиц стилей» раэд. «Орга низация стилей и таблиц стилей» гл.

15). ·

Например:

@import

перед СSS

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

Так какой метод лучше использовать? Хоть оба они работают, использование тега

<l ink>

встречается чаще. В некоторых случаях правило

@import

может замед

лять загрузку ваших таблиц стилей (чтобы узнать, когда и почему это происходит, посетите страницу www.stevesouders.com/Ыog/2009/04/09/dont-use-import). Поэтому, если у вас нет явных предпочтений одному из методов, просто используйте тег

<l i nk>, подробно описанный в этой главе.

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

неб-страниц.

Обучающий урок: создание nервых стилей

Перед началом урока нужно загрузить файлы с обучающим материалом, распо ложенные по адресу www.sawmac.com/rss2e/. Перейдите по ссылке и загрузите ZIР

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

02 (для

второй главы),

03 (для третьей)

и т. д.

ВНИМАНИЕ----------------------------------------------------

оnисанном архиве содержатся nаnки с nримерами для всех обучающих уроков, nриведенных

в этой книге. Скачайте его, чтобы в дальнейшем выnолнять задания, предлагаемые в конце каждой главы.

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

пользуетесь, будь то простой текстовый редактор (Блокнот или

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

Text Edit) или про (Dreamweaver или Microsoft

Expression Web Designer) (перечень программнога обеспечения приведен во вве дении). ПРИМЕЧАНИЕ----------------------------------------------- Если вы nольэуетесь

Dreamweaver,

то вам nригодится оnисание применения этой nрограммы для

создания стилей и таблиц стилей, nриведенное в приложении

2. Dreamweaver,

как и другие nро

граммы для редактирования НТМL, nозволяет работать с НТМL-кодом в чистом виде, nереключив шись в режим его nросмотра. Именно это и nотребуется в ходе обучающего урока.

Соэдание встроенного стиля Размещая стилевые команды

CSS

(см. разд. «Что такое стиль~ этой главы) непо

средственно в НТМL-коде страницы, вы создаете вcmpoe1t1tьtЙ стиль. Встроенные

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

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

внутренние стили. Это, к слову, единственная возможность заставить CSS работать

Gmail.) Если вы все-таки применяете этот метод и хотите, чтобы стиль работал

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

В своей программе редактирования веб-страниц откройте файл

02\basic. HTML.

Этот простой и изящно написанный ХНТМL-файл содержит несколько заго

ловков, абзац, маркированный список и информацию об авторском праве в теге

<address>.

Начнем с создания встроенного стиля для тега

В открывающем теге

<hl>.

<hl> укажите свойство стиля style="color: #C7M8D: ".

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

Глава

Атрибут

sty1 е

относится к

а значение атрибута

HTML, а не CSS -

весь код

CSS,

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

поэтому после него идет знак=,

заключено в кавычки. Код

CSS -

это

только та часть, что находится в кавычках. В данном случае вы добавили свой ство со 1or, которое воздействует на цвет текста, и установили его значение рав ным

#C7M8D,

то есть шестнадцатеричному коду, определяющему серовато-ко

ричневый цвет (об изменении цвета текста читайте в подразделе «Придание тексту цветового оформления» разд. «Стилизация текста>> гл.

6).

Двоеточие

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

ного свойства. Далее проверим результат в браузере.

Откройте страницу

bas i с. HTML

в браузере.

Запустите любимый браузер и выберите пункт меню File ~ Open (Файл~ От крыть) или нажмите Qri+O и выберите файл basic. htm1 в папке 02 с обучающи ми материалами на своем компьютере (можете просто перетащить этот файл

с Рабочего стола

или из другого места, где вы сохраняли обучающие материа

лы, - в пустое окно браузера). Во многих НТМL-редакторах имеется функция Preview in Browser (Предварительный просмотр в браузере), которая с помощью определенного сочетания клавиш или пункта меню открывает страницу для

просмотра в браузере. Посмотрите руководство программы редактирования

HTML: возможно,

в ней есть команда, которая сэкономит ваше время. Открыв

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

CSS.

Добавим в тег

еще ОДНО СВОЙСТВО.

Вернитесь в свой НТМL-редактор. После точки с запятой за кодом

берите

font-size:

#C7M8D

на

Зеm;.

Точка с запятой отделяет два различных свойства. Тег

<hl> должен

выглядеть

следующим образом:

<hl sty1e="co1or: red:font-size: 5.

Зеm:">

Посмотрите на страницу в браузере. Нажмите кнопку Reload (Обновить), но сначала удостоверьтесь, что сохранили ХНТМL-файл. Теперь заголовок имеет внушительный вид. Вы почувствовали, как непросто

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

кам

<h 1> веб-страницы требует выполнения тех же действий над каждым из них.

На это могут уйти часы и даже целые дни набора и добавления НТМL-кода.

Вновь перейдите в редактор веб-страниц и удалите из тега

<hl> весь

код стиле

вого атрибута, вернув его к нормальному виду.

Далее мы создадим таблицу стилей внутри веб-страницы (окончательная вер i n1i ne. htm 1 в папке

сия этой части обучающего примера представлена файлом

02_finished).

Создание внутренней таблицы стилей Вместо встроенных стилей лучше использовать таблицу стилей, содержащую мно жество стилей

CSS,

каждый из которых придает внешний вид своему элементу

страницы. Прочитав этот раздел, вы научитесь создавать стиль, который изменяет

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

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

стиль автоматически отформатирует все теги

В файле Ьа s i с

. htm l,

<hl>

веб-страницы.

открытом в текстовом редакторе, установите курсор сразу

после закрывающего тега

</title>, нажмите клавишу Enter и наберите <style

type="text/css ">. Теперь НТМL-код должен выглядеть следующим образом (текст, который нуж

но добавить, выделен полужирным шрифтом):

CSS <style type="text/css"> <titlе>Большая книга

Глава

2</title>

</head> Открывающий тег <sty l е> отмечает начало таблицы стилей. Желательно сразу же, как только вы набираете открывающий тег, закрывать его, поскольку об этом очень легко забыть, переключая внимание на написание вы закроете тег

Нажмите

Enter дважды

CSS. В данном случае CSS.

как станете добавлять стили

и наберите

Теперь вы добавите селектор

</style>. CSS, обозначающий

начало вашего первого

стиля.

Щелкните кнопкой мыши между открывающим и :закрывающим тегами

и введите

Элемент

hl {. hl определяет

сам тег, к которому браузер долже11 применять после

дующий стиль.

Фигурную скобку после

hl называют открывающей скобкой. Она обозначает

начало определения СSS-свойств для данного стиля. Иначе говоря, за ней на чинается самое интересное. Надо отметить, что, как и в случае с закрывающими

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

Нажмите

Enter дважды

и поставьте одну закрывающую скобку}.

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

Перейдите к пустой строке между двумя скобками, нажмите клавишу ТаЬ и вве дитесоlоr: #С7М80:. Это текст того же свойства стиля, что и во встроенном варианте,

свойство

со l or со значением #С7 MBD. Точка с запятой обозначает окончание объявления свойства. ПРИМЕЧАНИЕ----------------------------------------------- Исходя из синтаксиса языка

CSS,

не обязательно размещать каждое свойство стиля в отдельной

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

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

Глава

Соэдание стилей и таблиц стилей

6. Нажмите Enter снова и добавьте дополнительно три свойства, как показано ниже:

• font-size: Зеm: font-family: "Arial Black". Arial. sans-serif: margin: 0: Убедитесь в том, что вы не забыли поставить точку с запятой в конце каждой строки, иначе

CSS некорректно отобразится в браузере.

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

удаляет отступы (пустое пространство) вокруг заголовка. Более подробно об этих свойствах читайте в части

Поздравляю

2 книги.

вы только что создали внутреннюю таблицу стилей. Код, кото

рый вы добавили на неб-страницу, должен выглядеть так, как выделенный ниже полужирным шрифтом: <titlе>Простейшая веб-страница</titlе>

hl { color: #С7МВD; font-size: Зеm; font-family: "Arial margin: О;

в-lack".

Arial, sans-serif;

} </style>

</head> 7. Сохраните страницу и просмотрите ее в браузере. Вы можете сделать это так, как описано в третьем шаге, или, если страница все

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

(Reload

(Обновить)).

Теперь мы добавим другой стиль. ПРИМЕЧАНИЕ------------------------------------------------- Никогда не забывайте добавлять закрывающий тег

</style>

в конце внутренней таблицы стилей.

Если вы не сделаете этого, брауэер отобразит на экране код стилей

CSS, за

которым последует сама

веб-сrраница без всякого форматирования, а может быть и такое, что брауэер вообще не покажет содержимого веб-страницы.

ПереключитесЪ обратно в программу редактирования, установите курсор после

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

hl,

Enter и добавьте следующий стиль:

{ со l о г:

#616161: line-height: 150%: margin-top: lOpx: margin-left: 80рх:

который вы только что создали, на

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

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

CSS на страницу.

9. Просмотрите страницу в браузере. Страница начинает меНяться и выглядит так, как показано на рис. 2.3. Вы ви дите, как изменяется стилистическая направленность абзсiца под первым заго

ловком? Можете посмотреть окончательную версию этой части nримера, от крыв файл i nterna 1 . htm1 из папки 02_flnished.

CSS: The Missing Manual s~4 ut perspicialis IIIXk ocnois iste oatus еn'<Ж sit voluptatem

accusantium doloremque laudamium,

totam rem apetiam, ~ iря quae аЬ iDo ir!ventore ...-mtans et quasi architecto beatae vitae diaa sunt ~- Nemo eпim ipsam voluptatem quia voluptas sit aspernarur aut odit aut fugit. s~ quia

conseqwo!Ur magDi dolores eos qu; ratione voluptattm sequi aesciuot. Neque porro quisquam est, qui dolortm ipsum quia dolor sit amet, consectetur, adipisd velit, s~ quia ооо aumquam eius modi tempora..jocidua ut laЬore et dolore maвaam aJiquam quaerat voluptatem.

Lorem lpsum Dolor Sat s~ ut perspiciatis IIIXk omois ist~ aal1ls еn'(Ж sit voluptatem acc:usaatiuln dolortmque laudaalium,

totam rem ~ eaque ipSA quae аЬ iDo iьvel:store veritalis et quasi architecto ~atae vitae dicta sunt ехрiсаЬо. Nemo eaim ipsam Yoluptattm quia voluptas sit aspernarur aut odit aut fugit. ~ quia c:oasequuntur magDi dolores eos qu; ratione voluptatem sequi nescU!t Neque porro quisquam est.

Р1к. 2.3. CSS легко и творчески справлАетсА с форматированием текста, поэвол1111 иэмен11ть начертание, раэмер, цвет шрифтов текста и даже добавляя декоративные рамки и подчеркивание

Все то, чем вы занимались в обучающем уроке, можно назвать ~css в двух словах•: начать с НТМL-страницы, добавить таблицу стилей, создать прочие СSS

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

Соэдание внеwней та6лиць1 сrилей Поскольку во внутренних таблицах стилей все стили сгрупnированы в начале веб страницы, создавать и редактировать их намного проще и удобнее, че~ встроенные

Глава

Соэдание сrилей и таблиц сrилей

стили, с которыми вы имели дело до этого. Кроме того, внутренние таблицы стилей

позволяют форматировать любое количество экземпляров тегов неб-страницы од новременпо (как в примере с тегом

<hl>),

создав один простой стиль (правило).

Внешние таблицы стилей не только наследуют преимущества внутренних таблиц, но и имеют дополнительные плюсы: в них можно хранить все стили для всех стра

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

и поместите их во внешнюю таблицу стилей.

В своей программе редактирования создайте новый файл и сохраните его под

именем

ma i n. css в той же самой папке, где находится неб-страница, над которой

вы сейчас работаете. Файлы внешних таблиц стилей должны заканчиваться расширением

CSS. Имя

файла ma i n. cs s указывает на то, что стили, содержащиеся в файле, используют

ся глобально для всего сайта (вы, конечно, можете использовать любое понра вившееся имя файJlа).

Приступим к добавлению нового стиля к таблице стилей.

Наберите следующий код определения стиля в файле

ma i n. css:

body { background-color: #CDEбFF: background-image: url(images/bg_body.png): background-repeat: repeat-x: padding-top: lOOpx: Этот стиль относится к тегу содержимого неб-страницы

( <body> ), который вклю

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

HTML,

свойство установки фонового изображения

CSS (background-image) мо

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

края страницы. О свойствах фоновых изображений читайте в разд. 4Фоновые изображения!> гл.

Этот стиль также добавляет цвет фона страницы и отодвигает ее содержимое

вниз на

100 пиксело в от верхнего края окна браузера. Когда вы просматриваете

страницу, вы видите, что это дополнительное пространство отодвигает заголо

вок от фонового рисунка.

Вместо повторного набора стилей, созданных в предыдущем уроке, просто ско

пируем стили, определенные во внутренней таблице стилей, и вставим их в эту внешнюю таблицу стилей. Откройте страницу

basic. html, над которой работали, <s ty 1е> (не копируйте

и скопируйте весь текст, содержащийся внутри тегов сами теги

<style>).

Скопируйте стилевую информацию тем же самым способом, которым скопи ровали бы любой текст. Например, с помощью меню пировать) или нажатием сочетания клавиш

Ctri+C.

Edit ~Сору

(Правка ~ Ко

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

В файл

ma i n. cs s

вставьте этот код стилей либо посредством меню Edit ~

Paste

(Правка ~Вставить), либо с помощью сочетания клавиш Ctri+V.

Внешняя таблица стилей никогда не должна содержать НТМL-код, именно поэтому вы и не копировали теги

Сохраните файл

<style>.

main .css.

Теперь нужно очистить старый НТМL-файл от СSS-кода и связать новую таб лицу стилей с этим файлом.

Вернитесь к файлу

bas i с . htm l

в своем текстовом редакторе и удалите теги <sty l е>

и все СSS-стили, определенные в этом файле ранее.

Вам больше не нужны эти стили внутренней таблицы, поскольку они пере несены во внешнюю таблицу стилей, которую сейчас нужно присоединить к НТМL-файлу.

В том месте НТМL-файла, где находилась встроенная таблица стилей (между закрывающим тегом

</t i t l е> и закрывающим тегом <head> ), введите следующее:

дыдущем разделе. Тег

<l i nk> определяет местонахождение внешней таблицы - re l и type - также читайте в предыдущем разделе).

стилей (о его атрибутах

ПРИМЕЧАНИЕ----------------------------------------------- В данном примере файл внешней таблицы стилей расположен в той же самой папке, что и веб-стра ница, так что исnользование имени файла в качестве значения

href nредполагает простой

путь отно

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

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

цию на эту тему смотрите по адресу www.commuпitymx.com/coпteпt/article.cfm?cid=230AD).

Сохраните файл и просмотрите его в браузере.

Веб-страница должна выглядеть так, как описано в шаге

9 предыдущего разде

ла обучающего урока, но с добавлением синего фона и картинки с травой и цве тами вдоль верхнего края страницы (благодаря СSS-коду, введенному в шаге

2).

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

таблицу стилей к другой веб-странице. ПРИМЕЧАНИЕ----------------------------------------------- Если на получившейся веб-странице отсутствует форматирование (к примеру, заголовок маленький и никак не выделен), то, вероятно, вы набрали код в шаге б с ошибкой или сохранили файл maiп.css

в папке, отличной от той, в которой находится файл файл maiп.css в ту же самую папку.

basic.html.

В этом случае просто переместите

60 9.

Глава

Откройте файл

Соэдание стилей и таблиц стилей

02\another_page. html.

Эта неб-страница содержит те же самые НТМL-элементы: Нl, Н2, Р и др., с кото

рыми вы уже работали.

10.

У становите курсор после закрывающего тега

</t i t l е>

и нажмите клавишу

Enter. Сейчас нужно присоединить к этой неб-странице уже созданную внешнюю таб лицу стилей.

11.

Наберите тот тег

<l ink>, который применялея в седьмом шаге этого примера.

Код неб-страницы должен выглядеть следующим образом (код, который вы только что набрали, отмечен полужирным шрифтом): <title>Дpyraя страница</titlе>

13.

Откройте файл

main.css и добавьте определение СSS-свойства- font-family: "Palatino Linotype". Baskerville. serif: -вначалестиляэлементаР.

Код должен выглядеть следующим образом (добавленный код выделен полу жирным шрифтом): р

{

font-family: "Palatino Linotype". Baskerville, serif; со l or: #616161: line-height:· 150%: margin-top: 10рх: margin-left: 80рх: } Напоследок создайте новый стиль для элемента Н2.

14. Установите курсор после заключительной фигурной скобки} стиля элемента Р, нажмите Enter и добавьте следующий стиль:

h2 { color: #В1967С: font-weight: normal: font-family: "Palatino Linotype". Baskerville. serif: font-size: 2.2em: border-bottom: 2рх white solid: background: url(images/bullet_flower.png) no-repeat: padding: О О 2рх 80рх: margin: 0:

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

С большинством этих СSS-свойств вы уже знакомы, однако некоторые из них новые для вас, например

border-bottom, используемое для добавления линии background вообще предоставляет возможность для комбИнирования различных свойств- в данном случае это background-image и background-repeat- в одно. Не беспокойтесь о назначении этих свойств,

под заголовком. Свойство

вы изучите их подробнейшим образом в последующих главах. О свойствах шрифта читайте в гл.

в гл.

7, а о свойствах,

6, о

свойствах, устанавливающих отступы и границы,

устанавливающих параметры фона,- в гл.

Стили, которые вы создавали до сих пор, работают с основными элементами Нl, Н2 и Р, изменяя облик каждого их экземпляра. Другими словами, стиль Р, кото рый вы создали, форматирует каждый абзац на странице. Но если вы хотите

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

15.

Перейдите к концу стиля Н2, нажмите Enter после закрывающей скобки} и на берите следующий код:

. i ntro { color: #6А94СС: font-family: Arial. Helvetica. sans-serif: font-size: 1.2em: margin-left: 0: margin-bottom: 25рх: Если вы просмотрите файл

basic.html

в браузере, то пока не заметите никаких

изменений. Этот тиn стиля, называемый селе'Кторо.м класса, форматирует толь ко отдельные теги, к которым вы примените класс. Для того чтобы этот новый стиль работал, придется немного отредактировать НТМL-кQД.

16.

Сохраните файл

main.css

и перейдите к файлу

basic.html

в своем текстовом

редакторе. Найдите открывающий тег <р>, следующий за тегом

class="intro". <р

<hl>, и добавьте

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

class="intro">

Вам не нужно добавлять точку перед словом

i ntro, как вы это делали, создавая 15 (почему так, вы узнаете в следующей главе). Этот дополнитель ный код HTML применяет стиль к первому абзацу (и только к первому). Повторите этот шаг для файла another _page.html -добавьте class="intro" к пер

стиль в шаге

вому тегу <р> на этой странице.

17.

Сохраните все файлы и просмотрите страницы

в браузере. На рис.

2.4

basic. html

представлен внешний вид страницы

another _page. htm another _page. htm

в окончательном виде.

Обратите внимание, что внешний вид обеих веб-страниц определяется един ственным СSS-файлом с внешней таблицей стилей. Простым редактированием файла gl оЬа l

. css вы можете изменить стиль сразу обеих веб-страниц. Закройте

глаза и представьте, что ваш сайт содержит тысячи страниц. Мощные средства

изменения дизайна, не правда ли?

Глава

2. Соэдание стиле.. и таблиц стипей

Окончательную версию этой части обучающего примера вы найдете в папке

02_flnished.

Sed ut perspiciatls unde omnis iste natus егrог sit voluptatem accusantium doloгemque laudantium, totam rem aperiam, eaque lpsa quae аЬ lllo lnventore veritatis et quesl architecto ьеаtае vitae dlcta sunt expflcaЬo. Nemo enlm Jpsam voluptatem qula vo1uptвs sit aвpematur aut odlt aut fuglt, sed quia consequuntuг magnl dblores еоз qul retlone voluptatem sequi nesclunt. Neque parro quisquam est, qul dolorem lpsum quia dolor sit amet, consectetuг, adlplscl velit, sed qula non numquam eius modi temparв Jncldunt ut teЬore at dolore magnam aliquam quaeret voluptatem.

Another Page... 5ed ut pcnpic:iatit u.ndt orn.nia Ьt.е urш crrot" sit ,..otuptatern ucuaantium ~ laшlantiutn, cown ran apt:riam, eoquc ipsa q...., .Ь iJ!o ii"Uton: vcriwu с< quui аrdШ.есш ь..~ virac di<D ""'' up1lcaЬo. Nemo cnlm ipam VQ!uptatcm quia \Юiupw tit aJpernA!Ur aut odit ••• ruc~~ ted qu;. eonsщuuntцr moгni dolores- qlli n.lione \OOiuplatcm oequi nerciunt. Ncquc porro quloq,uam щ qui dolorcm ipoum qllia dolor til ..-~ ~ adipixi ..JU, ted qu;. oon numquam dus modi tempora itlddцnt Ui laЬorc « dolore mчnam a1iq1W11 quacn.t \OOhlpwom. Ut enim ad minima venWn, quil nootrum cxm:italioocm uDam (Orpqris IIUOCipit laЬoriooam, oili ul ol!qWd а еа oonunodi con.ocqu.arur? Q1W ouшn Yd cum oJJe n:prcЬenderit qlli in еа VQiupwc Yelit ... quam niliil rn<>Шoiae CODIOC!Witut, Yd iUum qui dolomn cum rup., quo wlupw nuJJa ~

Рк.

2.4. Применение внешних таблиц стилей дает возможность обновления дизайна всех

страниц сайта в один nрием посредством редактирования единстеенного СSS-файла

Полное исключение СSS-кода из НТМL-документа и вынесение его в отдель

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

Селекторы: определение элементов стилизации

Каждый СSS-стиль имеет две основные части: селектор и блок объявления (о нем говорилось в предыдущей главе), который, в свою очередь, содержит форматиру ющие свойства- цвет, размер шрифта текста и т. д. Они относятся лишь к оформ

лению. Волшебство

CSS

заключается как раз в самых первых символах, начина

ющих определение любого стиля,

селекторах. Например:

h1 { font-family: Arial. sans-serif: color: #CCCCFF: Здесь первая часть стиля

матированию. В данном случае

селектор

определяет элементы, подлежащие фор

h1 означает <<Все заголовки первого уровня (тег <h 1>)

неб-страницы>>. ПРИМЕЧАНИЕ----------------------------------------------- Как видно иэ примера, в имена не входят символы

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

НТМL-теги. Поэтому, например, когда вы пишете стиль для тега <р>, набирайте только назва ние- р.

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

тирования множества элементов одновременно. Если дать более подробное описа

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

CSS -

большой потенциал для создания дизайна веб-страниц.

lРИМЕЧАНИЕ------------------------------------------------- Если вы хотите немного попрактиковаться на примерах, прежде чем изучать теоретический мате

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

Селекторы типов: дизайн страницы Селекторы типов (иногда называют селекторами тегов) представляют весьма эф фективное средство проектирования дизайна веб-страниц, поскольку определяют стиль всех экземпляров конкретного НТМL-элемента.

Глава

Селекторы: оnределение элементов стилизации

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

стиль с селектором Р ( применительно к тегу <р> ). Он переопределяет, каким обра зом браузер отобразит отдельно взятый тег (в данном случае <р> ).

Еще до появления CSS, чтобы отформатировать текст, вам пришлось бы заклю чить его по всем абзацам ·в тег <font> многократно. Этот процесс занял бы много времени, не говоря о том, что код НТМL-страниц при этом увеличится в объеме до

неимоверных размеров, страницы будут загружаться медленнее, их обновление будет занимать много времени. С селекторами типов вам фактически ничего не нужно делать с НТМL-кодом, просто создайте СSS-стили и позвольте браузеру сделать все остальное.

Селекторы исключительно просто определить в СSS-стилях, так как они насле - Р, Нl, TABLE,. IМG и т. д. Например, стра

дуют название форматируемых элементов ница, представленная на рис.

3.1, имеет три тега <h2> (помечены на левой границе h2, приведеиным ниже,

окна браузера) . Единственный СSS-стиль с селектором

определяет представление каждого заголовка второго уровня страницы.

h2 { font-family:"Century Gothic". "Gill Sans". sans-serif: color:#OOOOOO: margin-bottom :O:

Г"~·· · · ~ · ··~··· ~· ~=,~~~.·~··~·i;~~·~~~=············~1

Ф-

Ф•

How to Move Sod Up 10 Stories Without The Apartment Manager Finding Out

~~~~~~~~ ~~.~~~!~cr~n~~:~.- ~~~~~.~!~~n<mumllr' шhh t"''"rr.J

JIН\.'ttlшн ш l;.orc~' d,\J~~~~ ша~n~ ~1iquaш cr~1 v,,rшpOJt . Ur '' 1!\J ~шш <Hf щтiт 'сныщ . t}tн~ 1ю~mнJ t.'.(C:Гt.:J t:нюn ull~lstt:нqx·r ~н~ ipat lt't"н'nj, "''' 111 :tiiЧIJir> сх ~:, comrrкxJt, ~,.,)11~\fti:.H f)11is autrm H'l Clll1\ irщr(' dolor ш hcшt~ril iн ''lllputatt' \ 'CJtt ~:'1:-.t' щоkм•,·

.. \ 111~·qн~н . \(~ 1 illшн Jplof~ l'tl J',.·щ! i<il nнiiLI н,,.,

Wooden Crates Make Excellent Hldlng Places

l..i'щ~шlr~шn (l~)lc.1r :-.11 :ita'lt't . ~.·o"~..:trtu~r adipiм.:m~ ~o.'Ht . :ч.:J t.lмm nonu111m) 11il'h с-ш:-.н""'J 1m~ кl~tnf ut l.юй"СI tf(tloн· н1:ч~nа :tltчшш1 сr:н ""'IUif':\l 1.:1 ' ' i~t t:ntm :td tнiшш н~tШJIН t(tii'-IHtstn.ldi.'XC'r~o.·i t;,Jiic.)t1 ul l:нaк·c.ч"("-.'r'tl~lpir lot\!.н11 " n~sl ш oslщtt trC'\ с;, с.·• ннн~-.Jt\

Нш_... J~lft'll l \l'll..'tНI1 юurc.·,lttll )( illl't'IJtlr('IH lfl \tllpUILIII.' ... t.JH:'<.'tfU:t1 , ' "'lafl~tn) ,t~)lor"· t"\1 l~н.~rat ннll.1 l.1t 1

1.'\) H:-t'tf\1.\t

,·,·tн ('\o.'it'

~~~~~~1•1~~r ~~~~~~~,.,. <~tlopoxl l~ <1шmошоrш1н11~ ,·lor . ,..J

IH(}k'H('

orit>Jr ''"""""!

IIIKJtliiHI UII:Юr\.'t'l llt11im: Cll:t~lli\ .11 Jqt~ нn1 t.'f:\1 \ 'c.)JUip;t( ~ ~ t "1~1 (,.'IHIH ~lt1 1HI ШНI \ t'f'tMIH. r.tttt)O вlfara1c<,f[)('r :-.:u~·trrtlt•h4·•n:i~ ш.;J ol Jl iчшp t'Л ('а ..·tщнш~Jн

. :

':'! l. . .~~ Llt.~~<........-----···--·····-·······---------- - ----·-···--·------------···-····-·---.0- ':·:

Рис.

c.:-,,.,,.t :~·~:::!.t~~~ ~)~~~:~~~~~·~~ :~:~~~~:~~..:-~~~~~ ~~~~·~г~·t~1 ев \ .•.rl!)~~(,lf~.. ,.~1~1 ~~~~· .~.~~ tl('' ' ''.: ч11i.; n-.•.:-rnнl

3.1. Селектор тега

воздействует на все экземпляры ука1анноrо элемента веб-страницы

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

Селекторы классов: точное уnравление

удастся, потому что они не предоставляют достаточную информацию браузеру. Например, нужно задать различия между элементом Р, выделенным определенным

цветом и кеглем, и элементом Р, который вы хотите оставить написанным шрифтом

черного цвета.

CSS предоставляет сразу несколько способов решения данной про - селекторы классов.

блемы, самый простой из которых

Сеnекторыкпассов:точноеуправпение Если вы хотите, чтобы какие-то элементы выглядели не так, как другие родствен ные им элементы из той же веб-страницы, например, хотите задать для одного или

двух рисунков красную рамку, оставив все остальные изображения нестилизован ными, то можете использовать селектор 1Ulaccoв. Если вы привыкли работать со стилями в программах для редактирования текста, таких как

Microsoft W ord,

то

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

значая ему имя, а затем применяете его лишь к тем тегам

HTML,

которые хотите

отформатировать.

Например, вы можете создать класс . copyri ght и с его помощью выделить абзац, содержащий информацию об авторских правах, не затрагивая остальные абзацы. Селекторы классов позволяют указать конкретный элемент веб-страницы, не зависимо от тегов. Предположим, вы хотите отформатировать одно или несколько

слов абзаца. В данном случае применяется форматирование не ко всему тегу <р>, а лишь к фрагменту абзаца. Таким образом, вам нужно использовать селектор клас са для выделения определенного текста. Можно примелить изменения к множе ству элементов, входящих в различные НТМL-теrи.

Например, вы можете придать какому-то абзацу и заголовку второго уровня (тег

<h2>)

одинаковый стиль, как показало на рис.

3.2.

В отличие от селекторов

типов, которые ограничивают вас существующими на веб-странице НТМL-тегами, с помощью этого метода вы можете создать любое количество селекторов классов и поместить их в выбранное место. lРИМЕЧАНИЕ------------------------------------------------- Вы можете стилизовать один экземnляр заголовка

.special сообщает брауэеру о

<h2> («Wet Sod is Heavy Sod»).

Селектор класса

необходимости nрименения стиля к единственному тегу

<h2>. Создав его однажды, вы можете nользоваться им и в дальнейшем nрименительно к любым тегам. В nри мере (см. рис. 3.2) такой стиль nрименен к верхнему абзацу. Если вы хотите nрименить селектор класса всего к нескольким словам текста, содержащегося в nро

извольном теге НТМL-кода (nодобно среднему абзацу на рис.

3.2),

то исnользуйте тег

<span>.

Для более детального ознакомления смотрите ниже врезку «Бриллиант без огранки».

Вы, вероятно, обратили внимание на точку, с которой начинается каждое назва ние селектора класса:

. copyri ght, . speci а l. Это одно из нескольких правил, которые

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

браузеры находят селекторы классов в таблице стилей

CSS.

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

Глава

-· ·) Clils~ Selectors · Moz1llil Firefox Е'е

»--~

Селекторы: определение элементов стилиэации

!oals ----

tf.e/p

•.•.• о et [р ht1p:ffas.local/d..o~ln'A How to Move Sod Up 10 Stc ~ The Apartment Manager f"'i ~ Check the Elevator Before Beginni, .Corem ipsum t!o~ sit ата. атsшеtиет at!ipiscing efit, set! t!ia71: ' ut liwreet t!ofim mD(JfkJ tJ(iquam emt t:o{utpat. 'l)t u.tst enim а { '"- : tatwn u(famcorpeт .ruscipit 106ortiS nis{ ut a{i.quip ц еа comrmJ.:~~ , . iriJJre C:O/Qr irrlienErerit in t:ufputate нfit esse moCestie consequ.;:

faci

Wooden Crates Make Excellent Hi Lorem ipsuw dolor sit amet, consectetuer adipiscing eJit, sed .-: .. tincidunt ut laoreet dolore magna aliquam erat volutpat. L't " i .. 1---t~C:!tmd~ere~:tm:dt

u(farnwrper susctpit

{o~niS rщ( ut a(Ujщf .

auteш \'el

eum iriure dolor in Ьendrerit in \ulputate \·elit esse eu feugjat nuПa faci

Wet Soa is Meavy Soa Lorem ipsurn dolor sit amet, consectetuer adipiscing elit, sed tio · tincidunt ut laoreet dolore magna aliquam erat \'olutpat. Ut \\'15: nostrud exerci tation uВamcorper suscipit loЬortis aisl ut aliqur,, DW autem \"el eum iriure dolor in hendrerit in vulputate Ye.Jit "':

[EJ:'Done class="speclal" Рис.

3 .2 . Селекторы классов riоэволяют целенаnравленно иэменять диэайн фрагментов веб-страниц

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

.91 i ves -

неправильное имя класса, а

называть классы , например, именами

.crazy8 - правильное. Можно .copy -right и .banner_image, но не . -bad или

as bad. О Имена стилевых классов чувствительны к регистру. Например, рассматривается языком

.SIDEBAR и . si debar CSS по-разному, как различные классы.

. specia1 { со 1о г: #FFOOOO:

font-family :"Monotype Corsiva":

ID-селекторы: определение элементов веб-страниц

Классы описы,!Заются так же, как стили тегов. После названия идет блок объяв ления, содержащий все необходимые свойства:

.specia1 { co1or:#FFOOOO: font-fami1y:"Monotype Corsiva": Поскольку стили тегов распространяются на все типы веб-страницы, их доста точно определить в заголовке, и они начинают работать. Форматируемые НТМL

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

двухступенчатый процесс. После того как вы

создали класс, надо указать, где вы хотите его применить. Для этого добавьте атри

бут с1 ass к НТМL-тегу, который нужно стилизовать. Допустим, вы создали класс

. spec i а 1 с целью выделения определенных элемен

то в веб-страницы. Чтобы применить этот стиль к абзацу, добавьте атрибут с 1а s s к тегу <р>, как показано ниже:

<р

c1ass="specia1">

~РИМЕЧАНИЕ

------------------------

Вы не должны набирать точку перед именем класса в коде

HTML

(в атрибуте

class).

Она требуется

только в названии селектора таблицы стилей.

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

. speci а 1, необходимо

применить к данно

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

<span>, как описано ниже.

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

specia1

с особым шрифтом и цветомдля тегов

<h2>, <р> и <u1>. Однако,

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

CSS для создания дизайна

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

ID-селекторы: определение элементов веб-страниц В языке

CSS

ID-селектор предназначен для идентификации уникальных частей

веб-страниц, таких как шапка, паиель навигации, основная информационная об .1асть содержимого и т. д. Как и при использовании селектора класса, вы создаете идентификатор

(ID), придумав ему название, а затем применяете его к НТМL-коду

своей веб-страницы. Так в чем же различие? Как описано во врезке <<Бриллиант

без огранки~. ID-селекторы имеют донолнительное специфическое применение.

Глава

Селекторы: определение элемекrов стилизации

Например, в веб-страницах с использованием кoдajavaScript или в очень объемных страницах.

Другими словами, существует несколько вынужденных причин для использо вания 10-селекторов.

Чтобы точно решить, что использовать- классы или идентификаторы, - сле дуйте основным правилам.

О Для стиля, используемого неодщжратно, применяют классы. Если на веб-стра нице есть несколько рисунков, то необходимо·применить селектор класса (на пример, задающий такой стилевой эффект, как рамка) к каждому из тегов <img>,

которые вы хотите отформатировать. · О Пользуйтесь идентификаторами, когда необходимо определить раз.целы неб страницы, которые встречаются один раз . Если их дизайн основан на

CSS, то

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

О Примите во внимание то, что решить конфликты стилей позволяет использо

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

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

5).

ПРИМЕЧАНИЕ----------------------------------------------- Каждый идентификатор стиля должен относиться к определенному НТМL-теrу. Хотя, если будет

применен один и тот же идентификатор для двух или более тегов на одной веб-странице, это не будет причиной аварийного завершения работы. Большинство браузеров правильно обрабатывает сss-код стиля с таким ID-селектором. Однако НТМL-код вашей веб-страницы не пройдет синтакси

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

БРИЛЛИАНТ БЕЗ ОГРАНКИ

НТМL-теrи <div> и <span> два

ты блочными, nотому что они формируют логически

универсальных НТМL-тега, которые однозначно ука

законченный блок информационного содержимого

зывают на nрименение класса или стиля с !О-селек

с разрывами строк до и после такого блока). Тег <di v>

тором.

функционирует как тег абзаца: набираем открыва

В гл. 1 были кра11<о олисаны

<di v> и <span> -

ющий <div>, далее добавляем некоторый текст, ри Логическое деление страницы на такие фрагменты,

сунок или какое-то другое информационное содержи

как шаnка, nанель навигации, боковые меню, низ

мое, а 3атем заканчиваем их закрывающим</

страницы, обесnечивает тег

d1 v>.

<div>. Вы можете его <di v> имеет уникальную сnособность включать

также исnользовать, чтобы охватить любой фрагмент,

Тег

включающий ряд nоследовательных элементов веб

в себя несколько блочных элементов, являясь сред

страницы, в том числе заголовки, маркированные

ством групnировки (логотип м nанель навигации или

сnиски, абзацы (программисты называют :ни эnемен-

блок новостей, формирующий боковой столбец}.

10-селекrоры: оnределение элементов веб-страниц

БРИЛЛИАНТ БЕЗ ОГРАНКИ

После группировки содержимото веб-страницы таким

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

образом вы можете л рименить определенное фор

графию, и ее описание. В части 3 книги описываются

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

еще более мощные способы nрименения <di v>, вклю

внутри этого фрагмента

чая вложенные конструкции из этих тегов.

<div>, или nереместить (nо

зиционировать) весь отмеченный фрагмент содер

жимого в конкретное место веб-страницы, наnример

С другой стороны, <span> nозволяет nрименять клас

в nравый столбец. Об управлении разделами в

CSS

сы и !О-селекторы к фрагменту- части тега. С его

этим способом рассказывается в части 3 настоящей

nомощью вы можете выхватить из абзаца отдельные

книги.

слова и фразы (которые часто называются встроен

ными Например, вы добавили на веб-страницу фотографию,

(inline) элементами), чтобы форматировать их

отдельно друг от друга.

у которой есть сопроводительное описание. Их можно

заключить в <di v> (с применением ктеrу класса), что

В данном примере стилевой класс, который назван

бы объединиТ~? в груnпу оба элемента:

. companyName, стилизует встроенные элементы Cosmofarmer com, D1 sney и ESPN:

<div class•"photo"> <i~WJ src-"ho lidays. jpg" alt="Penguins getting frisky"/> <р>Моm. dad and те on our yearly tr1p to Antarctica.</p> </diV> В зависимости от тоrо, как вы опишете стиль, класс

<p>Welcome to <span clas~"companyName"> Cosmofarmer.com</span> the parent company· of such well-known corporations as <span class-"companyName">Disney </span> and <span class•"companyName"> ESPN</span> .. .well. not really .

.photo может добавить декоративную рамку, цветной

</р>

Использование ID-селекторов не представляет никаких сложностей. Если в се

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

Следующий пример устанавливает цвет фона, ширину и въ~соту элемента: #Ьanner { Ьackground: #ССОООО;

height: ЗООрх; width : 720рх: Применеине идентификаторов в

HTML

схоже с использованием классов, но

требует другого атрибута с соответствующим названием

- i d. Для указания, что

последний абзац страницы - единственный с информацией об авторских правах, вы можете создать ID-ст~лъ под названием #copyri ght и применитъ его к тегу этого абзаца: <р

id="copyright">

ПРИМЕЧАНИЕ----------------------------------------------- СимЕЮл решетки

(#)

используется только при описании стиля в таблице. При вставке же имени

идентификатора в НТМL-теги

укаэыватъ не нужно:

<div

ld="ьanner">.

Глава

3. Селекторы:

оnределение элементов сrилизации

ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ

Сnециальное nрименение идентификаторов У !О-селекторов имеется несколько преимуществ nе

варь терминов, можно исnользовать !О-селектор для

ред селекторами классов. Эти особенности фактически

создания указателя по буквам алфавита. При щелчке

не имеют никакого отношения к

CSS, поэтому могут

кноnкой мыши на букве

вам и не nонадобиться.

Rnосетители сразу же nе

реходит к словам, начинающимся с этой буквы. Для этого вам не nридется исnользовать CSS- достаточ·

8JаvаSсriрt-nрограммировании !О-селекторы исnоль

но и nростого HTML. Сначала добавьте атрибут

зуются для определения местонахождения и уnрав

место на странице, на которое вы хотите ссылаться.

ления фрагментами веб-страниц. Сnециалисты часто

Наnример, в указателе вы можете добавить тег <h2>

nрименяют идентификаторы к заnолняемым элемен

с очередной буквой из алфавита. Добавьте соответ

там форм (например, текстовые поля) для nолучения

ствующий 1d к каждому тегу <h2>: <h2 i d=' R >R</ h2>. Чтобы создать ссылку в HTML, добавьте символ решетки и имя идентификатора в конец адреса URL-

имени nосетителя сайта и т. д. Это nозволяет JavaScript nолучить достуn к nолям форм, проверить их содер

1d в то

index htm1#R. Эта ссылка указывает неnосредственно

жимое.

на элементе #R страницы 1 ndex. htm1 (исnользование Идентификаторы также позволяют делать ссылки на

идентификатора таким способом оказывает действие,

оnределенные части веб-страниц, nри этом быстро

аналогичное nрименению якорного тега <а> в языке

nеремещаясь по ним. Если у вас есть алфавитнь1й ело-

HTML: <а

name•"R">R</a>).

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

слишком объемная работа. А если вы потом

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

Создание групповых селекторов Для работы с группой селекторов создайте список, в котором один селектор отде

лен от другого запятыми. Таким образом , получаем:

hl, h2.

hЗ.

h4. h5.

hб

{ color :

#F lCDЗЗ:

}

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

ет одинаковый цвет шрифта для

<hl>, <р> и любых других, принадлежащих классу

. copyright, а также тегу с идентификатором #banner. hl.

р.

. copyri ght . #banner {

со1or: #FlCDЗЗ:

}

Стилизация вложенных тегов

ПРИМЕЧАНИЕ------------------------------------------------- Если вам нужно применить к нескольким элементам веб-страницы одинаковые и в то же время

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

и является мощной особенностью языка

CSS

(информацию по этой теме см. в гл.

5).

Универсальный селектор Групповые селекторы можно рассматривать как подручное средство для примене

ния одинаковых свойств различных элементов.

CSS предоставляет универсмъный

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

img. hl. h2.

hЗ.

h4. h5 ...... { font-weight: bold: }

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

более быстрый способ сообщить

CSS

о выборке

всех НТМL-тегов веб-страницы:

* { font-weight: bold: } Кроме того, вы можете использовать универсальный селектор в составе селек тора потомков: применяете стиль ко всем тегам-потомкам, подчиненным опреде

ленному элементу веб-страницы. Например, элемента, имеющего идентификатор

#banner

#banner * выбирает

все теги внутри

(более подробно о селекторах потом

ков вы узнаете чуть позже). Универсальный селектор не определен как тип тегов, поэтому трудно описать его воздействие на НТМL-теги сайта. По этой причине дизайнеры со стажем ис

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

CSS, как наследование.

Она описана в следующей главе.

Стилизация вложенных тегов Выбор типа селекторов обусловлен в каждом случае конкретной целью. Селекторы типов можно быстро и просто создать, но они придают всем экземплярам стили зуемого элемента одинаковый внешний вид. Это бывает необходимо, например, если нужно, чтобы все заголовки второго уровня вашей вебсстраницы выглядели одинаково. Классовые и !О-селекторы обеспечивают большую гибкость независи мой стилизации отдельно взятых элементов страницы. Однако создание нового

СSS-стиля всякий раз, когда требуется изменить шрифт лишь одного заголовка, отнимает гораздо больше времени, требует большего обЪема работы и применения кода

CSS и HTML.

Все, что нужно в этом случае,

объединить простоту исполь

зования селекторов типов с точностью селекторов классов и идентификаторов.

CSS

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

чтобы единообразно отформатировать целый набор тегов, но только когда они расположены в определенном контексте- фрагменте веб-страницы. Их работу

Глава

Селекторы: оnределение элементое стилизации

можно описать так: 4Нужно отформатировать все элементы А, находящиеся на

паиели управления. С остальными такими элементами ничего не нужно делать•. Наследуемые селекторы позволяют форматировать теrи в зависимости от их

связей с другими тегами. Чтобы разобраться, как они работают, придется немного покопаться в языке

HTML.

Понимание работы наследуемых селекторов поможет получить представление о функционировании других типов, работа которых описана далее. ПРИМЕЧАНИЕ----------------------------------------------- Наследуемые селекторы могут nокаэаться немного запутанными на первый взгляд, однако это одна

иэ наиболее важных техник для эффективного и точноrо nрименения

CSS.

запаситесь терnением,

и вы скоро освоите их.

Дерево Код

HTML

HTML, на котором написана любая веб-страница, похож на генеалогическое

дерево. Первый используемый НТМL-тег -

<html>- похож на главного прароди <html> явля

теля всех остальных. Из него выходят <head> и <body>, следовательно, ется предком (прародителем) названных тегов. Тег, расположенный ВНУ!J>И другого,- его потомок. примере

потомок

Ter <title> в следующем

<head>:

<html> <head> <title>Пpocтoй докунент</titlе>

</head> <body> <hl>Зaroлoвoк</hl>

<р>Абзац с <strоng>важнын </strong>тeкcтoн.</p>

</body> </html> Представленный выше НТМL-код можно изобразить в виде схемы (рис. 3.3). Здесь показаны отношения между тегами веб-страницы . Сначала идет <html>; от неrо ответвляются два раздела, представленные

<head>

<body>.

Они содержат

и другие, которые, в свою очередь, могут включать еще теrи . Таким образом, рас

сматривая, какие из них являются вложенными, можно схематически изобразить любую веб-страницу.

Рис. 3.3. НТМL состоит и3 вложенных тегов, которые nредставляют собой своего рода генеалогическое дерево

Стилизация вложенных тегов

СхеМ'Ы в форме дерева помогают выяснить и проследить, как CSS ~видит~ взаимо

действие элементов веб-страницы. Функционирование многих селекторов, опи санных в настоящей главе, включая наследуемые, основывается на их родственных отношениях. Рассмотрим самые важные из них. О Предок. Как описано в начале данного раздела, НТМL-элемент, который за

ключает в себе другие элементы,

3.3 это <htm l >, в то время <hl>, <р>, <strong>. Потомок. Элемент, расположенный внутри одного или более типов, - потомок. На рис. 3.3 <body> - потомок <htm l >, в то время как <р> - потомок одновремеюю и для <body>, и для <html >. как

<body>-

это предок. На рис.

предок для всех содержащихся в нем тегов:

О Родительский элемент. Он связан с другими элементами более низкого уровня и находится выше на дереве. На рис. для

<head> и <body>.

Тег <р>

3.3 <htm l > является

родительским только

родительский по отношению к

<strong>.

О Дочер101й элемент. Элемент, непосредственно подчиненный другому элементу

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

<body>,

но

3.3

оба тега-

<hl>

не является дочерним для

и <р>

<body>,

так как он расположен непосредственно внутри <р>.

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

На рис.

3.3

они расположены рядом друг с другом. Теги

менты одного уровня, как и

На этом в

CSS

<hl>

<head>

<body>-

эле

и <р>.

~родственные отношения>> заканчиваются.

Со~аниесепекторовпотомков Селекторы потомков позволяют использовать дерево

HTML,

форматируя теги

по-разному, в зависимости от того, где они расположены. Например, на веб-стра нице имеется

<h 1> и

тега

Проблема в том, что большинство браузеров отобразит все это полу

<strong>.

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

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

- не очень хорошее решение: <strong> веб-страницы. Селектор же

дание селектора тега

так вы измените цвет всех

вхождений тега

потомков позволит вам из

менить цвет тега только в том случае, если он расположен внутри заголовка пер вого уровня.

Решение проблемы выглядит следующим образом:

hl strong { color: red: } В данном случае любой текст тега <strong>, находящегося внутри тera.<hl>, будет выделен красным цветом, но на другие экземпляры веб-страницы этот стиль не повлияет. Вы могли добиться того же результата, создав класс стиля, например

. Stro"ngHeader. Но в таком случае понадобилось бы вносить изменения в HTML, добавляя новый класс к тегу <strong> внутри заголовка. Подход, основанный на наследуемых селекторах, позволяет обойтись без лишней работы при создании стилей.

Глава З. Селекторы: определение элемекrое сrмлизации

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

HTML. Вы со:щаете селектор nотомков, объединяя селекторы вместе (согласно ветви дерева, которую нужно отформатировать), помещая самого старшего предка слева,

а форматируемый тег- справа. На рис. (<а>)

3.4

обратите внимание на три ссылки

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

:iаца. Чтобы отформатировать их иначе, вы можете создать стиль с селектором nотомков:

{ font-family: Aria1:}

вое

BaSIC Web

Pag~

CosmoFarmer 2.0 Wekome 10 your online ~urce for apartment !.•: and uicks. Lcam aЬoutlhe latesl lechnique · fruil. flowers and herЬs in your urЬan encl· head cover а wldt rwr of Jopks sure 10 арреа

cvery high-rise dweller. Previous articlcs in..:l ( 10 Slories Wilhoul Thc Apanmen1 Manager :"' lrrigation ProЬicm~ То Your Downstair.i N i!!l11, highesl raled anicle ever on CosmoFarmer сшn . lhc JKE A Way." title

Montbly Columns •

A~k фс ЕЧ>еФ

·~~

• DIY Proiecls

Рис.

3.4. Простейшая диаграмма

в виде дерева, представляющая

структуру веб-страницы

На рисунке все тегивеб-страницы-nотомки (производные) <html>. Тег может н роисходить от множества других. Например, первый тег <а> диаграммы является IIOTOMKOM

<strong>, <р>, <body> И <ht1'(1l>.

Этот стиль говорит: ~Нужно отформатировать все ссылки (а), которые распо

ложены в элементах списка

(1 i ), исnользуя шрифт Arial~ . Вообще, наследуемые

селекторы могут включать болеедвух элементов. Ниже nредставлены nравильные определения для тегов <а>, находящихся в маркированных списках (см. рис.

1i а

body 1i а html li а html body u1 1i

3.4):

Псевдоклассы и nсевдоэлементы

ПРИМЕЧАНИЕ----------~------------------------------------- Несмотря на то что лучше стараться исnользовать как можно более короткие селекторы nотомков, одна

из nричин, по которой удобно исnользовать доnолнительные селекторы nотомков,

возможность

замены нескольких различных стилей, одновременно форматирующих один и тот же тег. Команды

могут nереопределить стили классов или тегов. Подробнее об этом читайте в следующей главе.

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

а) определение

(body l i

не требуется. Этот селектор вынолняет свои функции,

если есть <а>, являющийся потомком к <а>, расположенному внутри

<em>,

<l i >.

Его одинаково просто нримешпь как

так и к <а> в

или

<l i >и

т. д.

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

i ntro ).

Этого можно добиться с помощью следующего селектора: р.

intro

{ color: yellow: }

ПРИМЕЧАНИЕ------------------------------------------------- Нужно nрименить данный стиль ко всем ссылкам (а)- nотомкам абзаца (р), относящегосяк классу

intro. Обратите внимание, что между р и intro intro должен сочетаться конкретно с тегом <р>.

с именем класс

нет nробелов. Это говорит

CSS

о том, что

Если вы добавите нробел, получится совсем другой эффект: р

.1ntro

{ color: yellow: }

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

сильно повлияет на область действия стиля. Будут выбраны <а>, расположенные внутри любого тега класса

. i ntro,

который сам должен являться Iютомком <р>.

Если из названия селектора убрать имя тега-нредка (в данном случае р ), то но лучится более гибкий стиль:

.1ntro

{color: yellow: }

Этот селектор указывает на любой тег <а>, расположенный внутри других те гов-

<div>, <hl>,

<tаЫе> и т. д., обозначенных классом

Селекторы потомков

. intro.

очень мощное оружие в арсенале

CSS.

в книге будут описаны другие способы их использования, а в гл.

Периодически

вы найдете

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

Псевдоклассы и псевдоэлементы Иногда требуется выбрать фрагмент неб-страницы, в котором вообще нет тегов, но в то же время его достаточно просто идентифицировать. Это может быть первая

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

CSS предоставля

Глава

Селекторы: оnределение элементов стилиэации

Стилизация ссылок Существует четыре псевдокласса, которые позволяют форматировать ссылки,

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

О а: 1i nk - обозначает любую ссылку, по которой посетитель веб-страницы еще не переходил, даже если на нее не наведен указатель мыши. Это обычный стиль непосещенных гиперссылок.

О а: vi s i ted - является ссылкой, по которой посетитель веб-страницы уже пере ходил. Она сохраняется в истории браузера. Можно разработать для этого типа

стиль, отличный от обычного, чтобы сказать посетителю, что он уже посещал эту страницу.

О а:

hover -

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

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

О Кроме того, можно использовать псевдокласс

: hover

для применеимя стилей

к элементам веб-страниц, отличным от ссылок. Например, вы можете ис пользовать его для выделения фрагмента текста, заключенного в теги <р>

или <di v>, каким-либо стилевым эффектом в тот момент, когда посетитель веб-страницы перемещает указатель мыши над этим фрагментом. В данном

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

high1 ight, создайте стиль под названием

hi gh 1i ght: hover. ПРИМЕЧАНИЕ------------------------------------------------

8 Internet Explorer б

и более ранних версиях браузера nсевдокласс

:hover работает только

со ссыл

ками. Как решить эту nроблему с nомощью JavaScript-кoдa, читайте чуть ниже, во вреэке «Инфор мация для оnытных nольэователей». (Если nри исnольэовании вильным

DOC1YPE, :hover также

IE 7 страница

не располагает nра

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

О а: acti ve- позволяет определить, как будет выглядеть ссылка во время выбора

· ее

посетителем веб-страницы. Другими словами, это стиль во время щелчка

кнопкой мыши. В гл.

9 описывается,

как спроектировать дизайн ссылок при использовании се

лекторов для хорошего восприятия посетителями сайта (например, элементов на вигации для перехода по разделам сайта и т. д.). ПРИМЕЧАНИЕ----------------------------------------------- Если вы не собираетесь эаниматься nрофессиональным веб-диэайном, то не утруждайтесь чтением последующих разделов о селекторах. Многие специалисты вообще никогда ими не nольэуются. Все, что вы уже изучили, -селекторы тиnов, классов, nотомков и т. д.

nозволит создавать красивые,

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

Псевдоклассы и nсевдоэлементы

Стилизация фрагментов абзаца На этапе становления Интернета не стоял вопрос дизайна страниц и сайтов, никто и не думал о том, что они должны выглядеть красиво. Теперь же это важно. В

имеется два псеодаэлемента-

: fi rst-letter и : fi rst-1 ine.

CSS

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

,Q_ечит вашим неб-страницам изящное оформление, которым печатные издания

обЛадают уже на протяжении многих столетий. Псеодаэлемент

: fi rst- l etter позволяет создавать буквицу -

начальный символ

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

: fi rst- l i ne

отличным

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

6 чи

тайте все о форматировании текста, там же вы найдете подробное описание этих двух псеодаэлементов ).

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

CSS

определены еще несколько мощных псевдоклассов,

псеодаэлементов и селекторов. К сожалению, все еще популярный на сегодняшний

день браузер-

Internet Explorer 6 для Windows -

не распознает их. По этой при

чине большинство серверов Интернета не смогут оценить дизайн неб-страниц с ис пользованием этих элементов (по крайней мере, пока их вится до версии

Internet Explorer не обно 8 или не будет использоваться браузер Firefox или Safari). Вы можете

обойти данную проблему, используя кoдjavaScript, как описано во врезке «Ин формация для опытных пользователей~ чуть ниже.

:before.

Псеодаэлемент

: before выполняет такую функцию, которая не при

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

ПОДСКАЗКА! перед абзацами, чтобы визуально выделить их. Вместо многократного

набора текста в НТМL-коде вашей неб-страницы вы можете сделать это с помощью псевдоэлемента-селектора

: before. Кроме того, такое решение позволит уменьшить

объем кода неб-страницы. Так, если вы решите изменить сообщение с ПОДСКАЗКА! на ЭТО НУЖНО ЗНАТЬ, можно быстро отформатировать его на всех страницах сайта путем изменения текста один раз в таблице стилей. Однако негативная сторона

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

CSS

: before.

Для работы псеодаэлемента нужно создать класс (скажем,

. t i р)

и применять

его к абзацам, которым должно предшествовать данное сообщение, например <р р.

cl ass="tip">. Добавьте текст сообщения в таблицу стилей: t i р: before {content :

"ПОДСКАЗКА!

" }

Всякий раз, когда браузеру встречается класс

. tip

внутри тега <р>, он будет

добавлять перед абзацем сообщение ПОДСКАЗКА!. Текст, который добавляется этим псевдоэлементом-селектором, еще называют сгенерированным содержимым, поскольку браузер создает его моментально. В ис ходном программнам коде НТМL-страницы этой информации не содержится.

Глава

3. Селекторы:

определение элементое стмлиэации

Браузеры все время генерируют свое информационное содержимое, например маркеры в маркированных списках или цифры в нумерованных. Чтобы понять, как браузер отображает все это, можно даже использовать селектор : before. Ни

IE 6,

ни

IE 7

не понимают СSS-свойство

content, так что вы, возможно, не :before и :after, описан

увидите повсеместного использования псевдоэлементов

ного далее. Однако

Internet Explorer 8, как и другие распространенные браузеры, 16 приведены инструкции по его исполь

поддерживает это свойство, поэтому в гл. зованию.

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ

Доnжен nи я обращать внимание на nробnемы с

IE 67

Если вы работаете веб-ди3айнером, то на вашем ком

Ваш сайт не обязательно должен выглядеть одина

nьютере, вероятно, установлена nоследняя обновлен

ково вiЕ 6 и других браузерах. Из-за незначитеnьных

ная версия Firefox, Opera, Safari или IE. Но большинство

различий браузеров вы часто можете увидеть, что ви

nользователей все еще работают с lntemet

зуально одна и та же страница выглядит по-разному

Explorer 6,

не редко называемым бедой длR веб-дизайна. В соот

в Flrefox, Safari или IE.

ветствии с информацией от комnании Net Applications (на май 2009 года), порядка 17% пользователей захо

Вашей главной цеnью должна быть гарантия того, что

дили на сайты с браузера IE б. И хотя эта доля nродол

у каждого пользователя будет доступ к содержимому

жает уменьшаться, IE 6 все еще будет востребованным

сайта. Если на него можно зайти с браузера

в ближайшее время.

мально читать, скачивать материалы без каких-либо

IE 6, нор

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

после этого вы можете побесnокоиться о том, 1fТ06ы сайт

обесnечение и продолжают nользоваться

выглядел максимально одинаково во всех браузерах.

IE 6 даже

nри наличии новых версий. Другие же ограничены программным обеспечением, установленным на их

С помощью

рабочем месте, и не имеют возможности заменить

вещей, которые не будут работать в

CSS вы можете делать много интересных IE 6. Например,

его.

селектор

. focus nозволяет изменить стиль текстового

поля в форме, когда пользователь переходит к этому Таким образом, проектируя сайт для широкой ауди

nолю. Это отличный способ выделить поле для ввода

тории, вы должны учитывать этот фактор, только

данных. Однако

если сайтом не будут nользоваться исключительно

Вы можете использовать JavaScript, чтобы устранить

nродвинутые люди, часто обновляющие версии своих

эту nробnему, или просто ничего не делать, nроигно

браузеров.

рировав т различия. Ведь если кто-то nосетит ваш сайт с браузера

Есть несколько лроблем

IE 6, которые способны це

IE 6 и 7 не понимают этот селектор.

IE 6, он все равно сможет воспользо

ваться текстовым полем.

ликом исnортить вид веб-страницы при прJ>смотре в этом браузере, -

в некоторых случаях содержимо

го страниц nросто не видно или оно неnригодно для

Свободно nрименяйте другие новшества

CSS, работа

ющие в современных версиях браузеров. Другими сло

IE 6, но выглядит еще

чтения. Конечно, вы захотите устранитьэти проблемы,

вами, если ваш сайт работает в

и в книге будет описано, как зто сделать.

лучше в IE 8, Firefox, Safari и Opera, то все нормально.

:after. Псевдоэлемент-селектор : before добавляет сгенерированное содер~имое : after- nосле. Например, им вы можете поль

перед определенным элементом, а

зоваться для добавления заключительных кавычек после процитированного мате· риала.

Псевдокпассы и псевдоэлементы

ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ Поnьзуйтесь обновnенной версией браузера

lntemet Explorer 6уже устарел и не расnознает всех нов шеств CSS, причем даже не самых n001едних. Но вам не

вить

nридется отказываться от всех интереоtых селекторов,

и других браузеров со встроенной nоддержкой; и вто

· before, after, ;hover. Всего лишь с небольшой помощью JavaScript

рого- класса стилей -

с теми же свойствами

Вы можете исnользовать

jQuery для динамического

IE 6 nонимать любой селектор. Техника заклю

чается в создании двух стилей: nервого дл11 IE 7, Firefox

описаннь1х на этих страницах,-

CSS.

и nарочкой нововведений вы сможете наnисать сцена

nрименения класса в

рии, которые научат IE обрабатывать этм селекторы.

тоинств jQuery заключается в возможности выбора лю

IE 6. Одно из существенных дос

бого элемента на странице посредством исnользования

Например, лекторами

CSSHOVER научит, как обращаться с се focus и ·hover (nрименительно к осталь

селектора CSS и nрименения класса к этому элементу.

ным элементам веб-страниц, отличным от ссылок).

Преимущества использования усовершенствованных

Вы можете nрочитать об этом по адресу www.xs4all.

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

nl/~petemed/csshover.html. Там же вы найдете не

в отсутствии необходимости вносить какие-либо из

большой сценарий, уnрощающий создание основан

менения в

CSS раскрывающихся навигационных меню, о которых вы можете nрочитать на сайте http:// sperling.com/examples/menuh.

вам не нужно добавлять класс ко всей связке тегов добьетесь той же легкости использования и для

Вдобавок, вы можете исnользовать библиотеку JavaScript

http://somedirection.com/2007/06/10/using-jquery-

jQuery {www.jquery.com), чтобы, no существу, заста-

to-avoicl-dassitls·in·leб.

ных на

HTML, чтобы все работало корректно. Так,

HTML Благодаря ]Query и небольшому куску кода вь1 IE 6. Чтобы узнать больше об этой технике, зайдите на сайт

:first-child. Псевдоэлемент : fi rst-chi 1d позволяет вам выбрать и отформатиро вать первый из множества дочерних элементов, подчиненных родительскому.

Например, у тега <u 1>, создающего маркированный список, может быть сколько угодно дочерних элементов (на рис.

3.4 он имеет три подчиненных элемента списка

<1 i >). Чтобы отформатировать только первый из них nолужирным шрифтом, мож но создать следующий стиль:

1i :first-chi1d { font -wei ght : bo1d: } Поскольку селектор

: fi rst -chi 1d описывает лишь название дочернего элемента,

этот стиль будет применен к любому тегу

<1 i>, который является первым подчи

ненным элементом любого другого тега, а не тол~;>ко <u 1>. Мы знаем, что элементы списка всегда расположены внутри его. Селектор

1i :first -chi 1d

воздействует на

все типы списков веб-страницы: маркированные и нумерованные. С остальными он ведет себя по-другому. В примере на рис. 3.4 р: first-chi 1d никак не будет рабо тать: <р> -

не первь1й дочерний элемент

<body>.

•Родственные>) отношения между родительскими и дочерними НТМL-элемен

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

не работает в

: f i rst-chi 1d. Кроме того, он вообще Internet Explorer 6 или более ранних вер~иях браузера - ещ~ одна

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

:focus. Псевдокласс : focus функционирует подобно : hover, с той лишь разницей, : hover применяется, когда посетитель перемешает указатель мыши над ссылкой,

что

80 а

Глава

: focus -

Селекторы: определение элементов стилизации

когда нажимает клавишу табуляции или щелкает кнопкой мыши на

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

Селектор

: focus

полезен в основном для обеспечения обратной связи с посети

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

( однострочные текстовые поля, поля <texta rea> - везде можно использовать : focus ).

Этот стиль задает светло-желтый цвет любому текстовому полю, на котором по сетитель щелкает кнопкой мыши или в которое переходит с помощью табуля ции:

input:focus { background-color: #FFFFCC; } Селектор

: focus

задает стилевой эффект только на время, пока элемент нахо

дится в фокусе. Когда посетитель переходит к другому полю или в другое место

неб-страницы, фокус, как и весь стилевой эффект

CSS, исчезает. К сожалению, ни IE 6, ни IE 7 не поддерживают этот селектор, однако вы все же можете использо вать его для создания визуальных эффектов в других браузерах (IE 6 и IE 7 просто не узнают об этом). ПРИМЕЧАНИЕ----------------------------------------------- Иэучение правильного написания селекторов иногда похоже на изучение иероглифов. Чтобы пере

вести селекторы на общепонятный язык, посетите веб-страницу

selectoracle/.

http://gallery.theopalgroup.com/

Этот информационный ресурс научит правильно определять селекторы и понимать,

к каким элементам веб-страниц они применяются.

Другие селекторы В руководстве языка

CSS 2 описывается

несколько мощных селекторов, которые

обеспечивают еще более тонкое управление дизайном неб-страниц по сравнению с уже изученными. Они также не работают в браузере

Internet Explorer 6 и его бо

лее ранних версиях (но вы можете воспользоваться языкoмjavaScript, как это было описано во врезке <<Информация для опытных пользователей~).

Селекторыдочернихэлементов Подобно применению селекторов потомков, описанных ранее, в

CSS

можно фор

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

угловую скобку(>) -для

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

body > hl выбирает лю

<hl>, дочерний по отношению к <body>.

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

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

3.5 вы можете видеть

Другие селекторы

два тега

<h2>. Использование body h2 привело бы к выбору обоих, так как они явля

ются вложенными по отношению к <body>. Только второй теr- дочерний элемент

<body>. Первый <h2> непосредственно вложен в <di v>, который и является родитель ским.

Поскольку у

<h2> различные родительские теrи, то для тоrо, чтобы добраться

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

Для выбора только второго теrа то

div

<h2> используем body > h2. Если первый теr <h2>,

h2.

Heading 1 А

<di V> i n t:he page

Т1tis

paragraph contains

bold link.

Anot:her heading 2 (but: not: inside t:he <div>) • This list item contains о

sub-list

Sub-i tem 1

o Sub-item 2 о

Sub- item 3

• Item 2 of the main list • Item 3 of the main list

Рис.

3.5. Диаграмма

в виде дерева (справа) пока3ывает отношения между НТМL-тегами (слева)

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ

СоJДание сnисков Когда нужно использовать селекторы дочерних эле

nросто незаменимы и никакме друrме не смоrут с тм

ментов? Вы можете сказать, что уже 3Ноете до

аtравитъся. Такая ооуация IICijle'laeYOI на боnьwинсrве

статочное количество селекторов для выборки прак

caii'ro8. в 1110бом мар1<Ир08аНН0М <JIIO<I! ~ <W4Н

тически любого элемента веб-строницы. Ток для чего

ИЛИ не<КОЛЬКО nу11К'10В-:wмetfi08 (JIИ(Xa ((М. рис. 35).

нужны остальные селекторы?

Здесь можно иаtользоаать селекrоры дочернихэnемен rов, чтобы визуаnьно уnорядочить Дi1ННЫе в кareropмRX

На самом деле существуют некоторые сложности ди

(nунктах) и nодкатеrорi!Ях {nодпунктах). ВЫ формаtмру

зайна ве6-араниц, rде селекторы дочерних элементов

ете элементы nepвoro уров1111 сnиска одним сnособом,

Глава З. Селекторы: определение элементов стилизации

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ

а второго- друrим. Содержимое, Представленное та!<Им

Теперь примените стилевой класс .ma1nL 1st к первому

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

тery <ul>

<ul class•"mai nllst">. Затем исполь .mainL; st > 1i )

зуйтеселектордочернихэлементов(ul Сначала создайте класс дnя самого верхнего - внеш

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

него- уровня вложенности элементов списка и на

и придания пунктам необходимого форматирования.

зовите его, скажем,

Данный стиль будет применен только к тегу

.ma1nL 1st. Для первого уровня

вы можете использовать шрифт saпs-seгif, имеющий

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

<1 i>, <u 1>и при

немного больший размер по сравнению с основным

надлежащему классу .ma 1nLi st. Все остальные подка

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

тегори и

Последующие категории могут быть представлены

стилизовать теги

текста стилизация каждого уровня Подкатегорий с не

<l1> не будут затронуты. Наnример, чтобы <l 1> первого вложенного списка, исnользуйте следующий селектор: u1 .ma1nL1st > 11 > u1 > 1i (он осуществит выборку маркирован

большим отличием позволяет nосетителям веб-стра

ных элементов списков во всех категориях и подкате

ниц визуально ориентироваться в материале.

rориях).

Times дnя лучшего восприятия. При большом объеме

Селекторысестринскихэлементов Родительско-дочерние отношения

в дереве

HTML.

н~ единственная форма родственных связей

Иногда требуется выбрать тег, относящийся к группе элементов

одного уровня, находящихся в непосредственной близости друг от друга, с общим родителем. Тег, следующий за несколькими другими , в рuн.С/ШМ. На рис. нию к

3.5 <di v> -

сестринский

HTML называется сест no отношению к <hl>, а <р>- по отноше

<h2> и т. д.

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

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

промежутка. Или хотите придать абзацу, как небольшому вводному описанию, другой цвет и размер шрифта.

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

<h2>, используйте h2 +

р (пробелы необязательны, так что

h2+p также

будет пре

красно работать). Последний элемент в селекторе (в данном случае- р)- тег, который нужно отформатировать, но только при условии, что он соседствует с

<h2>.

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

и другиенебольшие изображения , в которых также есть теГ <img>. Вы должны по нимать, что если у всех рисунков есть описание с атрибутом ti t le, то это способ-

Другие селекторы

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

ПРИМЕЧАНИЕ----------------------------------------~----- Применение атрибутов title в HTML- отличный способ добавить подсказки (всплывающие сообще ния) к ссылкам и изображениям веб-страницы. Это также является одним иэ способов краткого

описания содержания для поисковых серверов. Узнать об этом больше вы моЖете по адресу http:// weЬdesigп.aЬout.com/od/htmltags/a/aa101095.htm.

С помощью селекторов атрибутов вы можете выбрать теги с конкретными эле ментами. Вот пример, в котором выделены все теги <img> с атрибутами title:

img [title] Первая часть селектора -название ( i mg); атрибут идет далее в квадратных скоб

[title]. CSS не ограничивает селекторы атрибутов названиями тегов: вы можете также комбинировать их с классами. Например, селектор . photo [ t i t l е J выбирает все эле менты стилевого класса .photo с НТМL-атрибутом title. ках:

Если необходима более детальная выборка, то существует возможность найти

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

URL, создайте селектор атрибута с

броским стилем:

а [href="http: 1lwww. cosmofarmer. сот" J{ со l or:

red; font·-wei ght: Ьо l d; }

Уточнение конкретным значением очень полезно при работе с заполняемыми формами. Многие элементы форм имеют теги с одинаковыми названиями, даже если они выглядят и функционируют по-разному. Будь то флажок, текстовое поле, кнопка отправки данных или какие-то другие поля форм

<i nput>. Тип атрибута -

функциональными возможностями. Например, вое поле, а

все они содержат

вот что придает определенную форму с соответствующими

<i nput type=" checkbox" > -

<i nput type=" text "> создает тексто

флажок.

Например, чтобы выбрать только текстовые поля в форме веб-страницы, ис пользуют следующее выражение:

input[type="text"] Селектор атрибута- очень разносторонний элемент. Он не только позволяет находить теги с определенным значением атрибута (например, все поля формы с типом

checkbox), но и выбирать элементы со значением атрибута,

начинающим

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

Представьте, что вы хотите создать стиль, который бы выделял внешние ссыл ки (ведущие за пределы вашего сайта), говоря пользователю: <~Ты покинешь

этот сайт, если выберешь ссылку~. Принимая во внимание то, что абсолютные ссылки внутри собственного сайта не используются, мы устанавливаем, что лю

бая внешняя ссылка будет начинаться с ссылки.

http: 11 - первой части любой абсолютной

Глава

Селекторы: определение элементов стилизации

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

a[href"'="http://"J Символы л= означают «начинается на», так что вы можете использовать этот

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

http://www.sawmac.com -

http: 11.

С его по

http://www.google.com либо

любую внешнюю ссылку.

ПРИМЕЧАНИЕ----------------------------------------------- Этот селектор не будет работать в случае защищенного SSL-соединения, то есть когда ссылка на

чинается на

https://.

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

повой селектор:

a[hrefA="http://"J. a[hrefA="https://"] Встречаются также ситуации, когда вам необходимо выбрать элемент с атрибу том, заканчивающимся определенным значением. И снова ссылки пригодны для

этой задачи. Скажем, вы хотите добавить небольшой значок после ссылок, указы вающих на РDF-файлы. Поскольку они имеют разрешение

PDF,

вы знаете, что

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

href = "download_instructions">.

Значит, чтобы выбрать только такие ссылки,

нужен следующий селектор:

a[href$=" .pdf"] А стиль целиком будет выглядеть так:

a[href$=".pdf"] { background-image: urlCdoc_icon.png) no-repeat: padding-left: 15рх: }: Не беспокойтесь о том, что не знаете конкретные свойства из этого стиля,

вы познакомитесь с ними далее в книге. Только обратите внимание на один инте ресный селектор: $означает «заканчивается на». Вы можете использовать его

для форматирования ссылок на документы ([а

href$=" .mov"J) и т.

Word

([а

href$=" .doc"]),

фильмы

д.

И наконец, вы можете выбирать элементы с атрибутами, содержащими кон кретное значение. Например, вам нужно выделить фотографии сотрудников по

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

<img>.

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

Однако если вы задали для фотографий последовательные названия, это не

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

headshot, - mcfa r l and _headshot, mccord _headshot и т. д. В каждом файле встречается слово headshot, поэтому и атрибут src тега <img> содержит это слово. Вы можете создать селектор специально для этих изображений:

img[src*="headshot"J

Обучающий урок: примеры исnользования селекторов

Выражение переводится как ~выберите все изображения, атрибут

содержит в любом месте слово

headshot>).

src которых

Это простой и изящный способ форма

тирования фотографий сотрудников .

Internet Explorer 6,

как и полагается, не поддерживает селекторы атрибутов,

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

IE 6. Во многих случаях вы можете использовать селекторы атри

бутов просто для того, чтобы добавить какую-нибудь оригинальную Идею на стра ницу для современных браузеров. 1РИМЕЧАНИЕ

------------------------

8 версии CSS 3

разработчики обещают большее разнообразие селекторов атрибутов. Из гл.

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

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

ставления основных типов, а затем перейдем к более современным стилям. Чтобы начать обучение, вы должны иметь в распоряжении файлы с учебным материалом . Файлы текущей обучающей программы находятся в папке с названи ем 03, расположенной в архиве, работа с которым описана в конце гл. 2. ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ

Раэрабатывая диэайн одиночных веб-страниц, испоnьэуйте внутренние табnицы стиnей Вы можете сnрО<Ить: nочему в тй обучающей nро

варительным nросмотром результатов своей работы

грамме мы nользуемся внутренними таблицами сти

без nостоянного обновления кэша 6раузера.

лей? Ведь в гл.

2 книги рекомендуется

nрименять Многие знатоки начинают разработку дизайна с внут

внешние.

ренней таблицы стилей, nоскольку так намного быст

Да, они исnользуются для создания «быстрых» сайтов.

рее. Это исключает все прочие проблемы, в том числе

Однако внутренние таблицы стилей облегчают nроек

с кэшем. Вот их методика: как только они добьются

тирование· одиночных веб-страниц, таких как в ~той

требуемых результатов по созданию стиля отдельно

обучающей nрограмме. В данном случае гораздо

взятой веб-страницЬI, они nросто коnируют код внут

удобнее работать с одним файлом вместо того, чтобы

ренней таблицы стилей и вставляют его во внешнюю,

nереключаться между файлом внешней таблицы сти

а затем связывают ее со страницами сайта, как оnи

лей и веб-страницей. Вы можете nользоваться nред-

сано в гл. 2.

Откройте файл

select or_bas ics .ht ml

в программе редактирования.

Страница состоит из основных НТМL-теrов. Самая интересная вещь на ней это графический баннер (рис. 3.6). В этой обучающей программе мы попытаемел

Глава

Селекторы: определение элементов стилизации

оживить элементы веб-страницы, придать им изящный внешний вид. С добав лением СSS-стилей мы превратим «серенькие~ веб-страницы в страницьi с по трясающим дизайном. Начнем с добавления к этому файлу внутренней табли цы стилей.

The Amazing World ofCSS Sed ut pcnpi<ialis und• O<I!Ois iste natus .rror sit \'O~a/em acc:us:шlium dolor<n~que laщlantiuD>, totall> """ _...,., иque ipso quae .Ь illo iavemore ''mt.Ьs et qua.si orchitecto Ьеше ''""• dict.a suot explicaЬo. Nemo <Пim ipsam voktptalem quia \'Oiup!M sit aspmШUr out odit out fugjt, sed qui.a coosequuon. tDOgDi dolorcs eos qui rolione \'Oluptalem sequi ncsciunl

Sed ut per'J'iciaЬs unde onris isle oalus mor sit voluplalnn accusanWu! dolorcшque loudoolium., lotam ran ;ороi.ио, eaque ipsa quae аЬ illo iav<1>1ore ,-<fitlllis ., quasi мcbltecto beatae \-ilae dicta sunt .хр,саЬо . Nem<> .";., ip$0m volцpratcm qui.a ''ОЦ>\аs sit asperna1ur iiUI odit aut fup, scd quia coasequuntur =sni dolores eos qui ralion<: voluptalcm sequi nesciunt. Nequc p<>rro quisqwm est, qui dolorem ipsum quaa dolor sit amet, consectctur, aclipisci vdit, sed quia non numquam eros modi lempo<o ioc.idlmt ut labore et dolore O>agn/IIJI aliqua,;u qua<тa/ <•olцpta/<m. l:t <Пim ad mioima veoiml, quis IIO<I>'IIID <O<etc~alioot111 uЬш corpocis $U'$cipit laЬoriosa:n, nisi ut aliquiO ~~ са toaanod:i C:OI\s.equatur1 QW auttm ''d ш;о iure repreh~detd qui in са Yoh.q:ltгte '-dit cssc quaro oihil m<>lestiae coasequa/w, \'е! ilh.ln qui dolorem ...,. fЩPAt quo vohlptas tшlo. porialur? NОП: :

L't enim ad mioima valiom, quis ooslnlm exercit.atiooem \l!lam corpons suscipillaЬo<iosam, risi ut aliquid ех еа toii8D<>di

coosequa~w?

Who Knew CSS Had Sucb Power? Sed ut perspiciolis unde Olllllis iste oatus mor sit volupt11cm accusanrill:n dolorauque laucloюЬum. tol.ttm ,.., ;operi.иo, eaque ipsa quae .Ь ilo irn'tJ>lore vc::rOillis е1 quasi ordil~t<> beatae ,.ц., dicta suot ехрi<:.ЬО. NCD>O '~""' quia ~ oi aspemarur aut odit aut fugit, sed qui.a coosequuofiЖ aщri dolores eos qui ralione \'<>Ч>tat<D> sequi oe$dn. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amd, coasectetur, odipisci vdit, sed quia oon oumquaro eros modi taDp<n iociduat utlaЬore е1 dolore о:щр>оD~ aliquam qua«OI ,·cЖ!pt.atCD>. Ut alialad IDirirDa , •......,, quis nostr1.11t exerciWioo= ulazo corpocis suscipillaЬorio.- oisi ut aliquid ех еа comn>c>di coosequatur? Quis aut<D> vt! ...., iure reprehendoril qui in еа v<>iupt11e ,ц esse quao rihJ D>Oiestiae CGDS<quatur, veJ iiJum qui do\orem eurD . \ quo \ 00iuptas tiiJI8a p..W..?

et>ial.,.....

NОП :

l:t enim ad minima , .......", quis oostiuo:J aercilalionenl ulaD> corporis wscipilloЬoriowщ oisi ut aliquid"" еа COfiXDC>di

с~7

Рис.

3.6. Простой

НТМL-текст смотрится в брауэере чересчур холодно и монотонно

Щелкните кнопкой мыши сразу после закрывающего тега

</t i tle>, нажмите клавишу Enter для добавления новой строки и наберите <s ty l е type=" text/ css ">. Дважды нажмите клавишу Enter и наберите </style> . Это открывающий и закрывающий теги внутренней таблицы стилей. Очень полезно набирать их вместе одновременно, чтобы случайно не забыть о закры вающем. Так, они вместе сообщают браузеру. что между ними находятся коман-

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

ды языка

CSS.

НТМL-код теперь должен выглядеть следующим образом (код,

который вы только что добавили, выделен полужирным шрифтом):

<title>Selector Basics</title> <style type="text/css"> </style> </head> Теперь нужно ввести селектор типа, который вы собираетесь создать,

из на

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

Перейдите к строке между открывающим и закрывающим тегами тем введите р

<styl е>, а эа

{. Дважды нажмите Enter и введите }.

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

те название НТМL-тега, которому желаете придать стиль. Он будет применен ко всем абзацам текста, заключенным в <р>.

Перейдите к строке между открывающей и закрывающей скобками, добавьте четыре свойства

CSS, чтобы обеспечить форматирующий стиль -

цвет, размер,

начертание шрифта, отступ: р

{ color: #505050: · foпt-size: lem: foпt-family: "Helvetica Neue", Arial. Helvetica. margiп-left: lOOpx:

Нажмите клавишу

Enter,

saпs·serif;

чтобы поместить каждое СSS-свойство в отдельной

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

CSS.

ПРИМЕЧАНИЕ------------------------------------~--------- Если вы новичок в веб-диэайне, то названия свойств и их значения вам пока неэнакомы. Так что

просто набирайте их в том виде, как покаэано в тексте. Что означает

lem

lOOpx

и что такое тек

стовые свойства, вы узнаете из гл. б.

Работа над вашей таблицей стилей закончена.

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

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

большинство из них отображает текст веб-страницы черным шрифтом с засеч ками

(serif)- Times.

Если ваш СSS-стиль функционирует должным образом,

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

шрифт

sans-serif и

отступы в начале.

Глава

Селекторы: определение элементов стилиэации

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

шрифтом одного начертания и цвета. Вместо того чтобы создавать отдельные стили и дублировать одни и те же атрибуты и параметры для каждого тега <hl>, <h2> и т. д., вы можете собрать и сгруппировать несколько тегов в единственный селектор.

Вернитесь к своему НТМL-редактору с файлом

selector _basics .html.

Сейчас мы добавим новый стиль сразу после только что созданного стиля тега <р>.

Щелкните кнопкой мыши после закрывающей фигурной скобки селектора <р>,

нажмите клавишу

Enter для начала новой

строки и наберите

hl, h2, hЗ {.

Как описано в этой главе ранее, групповой селектор- это просто список.

Данный стиль создает одинаковое форматирование тегов

и <hЗ> неб

страницы.

Нажмите клавишу

Enter и добавьте пять СSS-свойств:

color: #BOBlQO: font-family: Baskerville. "Palatino Linotype". Times. serif: border~top: 2рх solid #86Al00: padding-top: 7рх: padding-left: lOOpx: Здесь вы задаете цвет и тип шрифта для заголовков, добавляете линию границы над заголовками, устанавливаете отступы слева и сверху, используя свойство

paddi ng. Если говорить кратко, то это свойство добавляет дополнительное про странство от краев элемента без воздействия на фон или рамку, то есть вы уби раете текст заголовка от левого и верхнего краев, не затрагивая линию рамки, которая охватывает всю страницу.

Теперь нажмите клавишу

Enter и введите закрывающую фигурную скобку, что

бы завершить данный стиль. Все описание должно выглядеть следующим об разом:

hl. h2. hЗ { color: #808100: font-family: Baskerville. "Palatino Linotype". Times. serif: border-top: 2рх solid #86Al00: padding-top: 7рх: padding-left: lOOpx:

Сохраните файл и просмотрите его работу в браузере. Заголовок

<hl> в начале веб~страницы и заголовки <h2> и <hЗ> ниже на странице

имеют одинаковое начертание и цвет шрифта, а также зеленую рамку вверху (рис.

3.7).

Обучающий урок: nримеры исnольэования селекторов

Тhе Amazing World

of CSS

Sed ut persplciatis unde omnis iste natus enor s1t voluptatem accusantium doloremque laudantiUm, totam rem aperiam, eaquelpsa quae аь Пlо lnventore verltatiэ 81 quasi architecto Ьеаtае Vi1ae dlcta sunt axplicaЬo. Nemo вnim ipsam votuptatem qlia voluptas slt espema!Ur aut odlt aut tuglt, sed qula consequuntur magnl dolore$ aos qui ratione voluptatem sequl nesclunt. Sed ut pensplc:latls unde omnts iste natus enor s1t voluptatem accusantJum doloremque lвudantium, totam rem aperiam, eaqua ipsa quae вЬ Hto lnventore vet11atis et quasi architecto Ьеаtае vitae dlcta sunt axplk:aЬo. Nemo enlm lpsam votuptatem qula voluptas slt aspematur aut odit aut tugit, sed qula consequuntur magnl dolore$ aos qui ratione voluptatem sequi nesciunt. Neque porro qulsquam est, qul dololem lpsum qula dolor sit amet, consectetur, adlpisd vellt, sed qula non-numquam elus modi tempora lncidunt ut laЬore 81 dolore INigl1aln aliquam quaerat voluptatam. Ut enim ad mlnima venln, quls nostrum axercitatlonem uJam corporis 8U8Ciplt taьortosem, nlsl ut вliquld ах еа commodi consequatur? Quls autem vel eum lun! reprehendel'ft qui in еа voluptate vellt esse quam nlhJI moles11ae consequatur, vel Иlum qul dolorem eum tugiat quo voluptas-nuИa pariatur? NОТЕ:

Ut enim ed minima venlam, quls nostrum exercltatlonem uВam corporis susdpjt nisl ut aJfquld ах еа commodf consequatur?

la.Ьor1osam,

Who Кnew CSS Had Such Power? Sed ut persplciatls unde omnis 1ste natus error slt voluptatem accusant1um dolotemque laudantlum, totam rem aperiam, eaque lpsa quae аь Hlo inventore verltatls 81 quasi archltecto Ьеаtае vitae dicta sunt ехрllсаЬ<л Nemo enim ipsam voluptatem quia voluptas slt aspematur aut odlt aut tug!t. sed qula consequuntur magnl do4oAis aos qul ratione voluptatem sequl nesclunt. Neque porro quisquam est, qui dolorem ipsum qula do!or s1t amet, consectetur, adiplзcl ve11t, sed quia non numquam elus modf tempora lncktunt ut laЬore et doiore magnam allquam q~ voluptatem. Ut вnim ad mlnima venlam, quls

Р1к. 3.7. Простой селектор тиnа может коренным обраэом nреобраэовать внешний вид всех вхождений форматируемого тега, быстро выnолнив стилиэацию текста веб-страницы

Соэдан"е сепекторов классов Селекторы типов выполняют своИ функции быстро и эффективно, но они. можно сказать, совсем нераэборчивы в деталях. Что же делать, если вы хотите отформа тировать один тег <р> неб-страницы иным способом, чем все остальные такие теги?

Решение проблемы

- использование классов.

Вернитесь к НТМL-редактору с файлом

selector_basics . html .

Добавьте вслед за последним созданным стилем еще один.

90 2.

Глава

Селекторы: определение элементов стилизации

Щелкните кнопкой мыши после закрывающей фигурной скобки группового селектора

h1, h2, h3, нажмите клавишу Enter и введите. note

{.Стиль назван

note

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

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

Нажмите клавишу

Enter и добавьте к стилю следующий

перечень свойств:

color: #333; border: 2рх dashed #808110: background-color: #FBF8A9; margin-top: 25рх; margin-bottom: 35рх; padding: 20рх; Большинство из этих свойств уже должны быть знакомы вам, однако backgroundКак и вытекает из его названия, оно добавляет

co l or будет, скорее всего, новым. цвет к фону элемента.

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

.note { color: #333; border: 2рх dashed #808110: background-color: #FBF8A9; margin-top: 25рх; margin-bottom: 35рх; padding: 20рх; Когда вы просмотрите эту веб-страницу, то не увидите изменений. В отличие от селекторов типов, селекторы классов не проявят никакого эффекта на неб странице, пока стиль не будет применен к коду

HTML.

В НТМL-коде веб-страницы найдите вхождение <р>, текст которого начинается

со слова

NOTE: и находится внутри тега <strong>. Чтобы применить стилевой

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

. note.

Щелкните кнопкой мыши сразу за буквой ~р~ тега <р>, нажмите Пробел, а даль ше введите с l а ss=" note".

HTML- код теперь должен иметь такой вид (только что

набранный код отмечен полужирным шрифтом): <р

class="note"><strong>NOTE:</strong> Ut enim ad

Убедитесь, что не ввели атрибут так: class=" .note". Точка требуется только во время определения названия стилевого класса в таблице стилей; в HTML она не нужна. Повторите этот шаг для второго абзаца (он идет сразу над тегом <h3> с текстом

<<Not Ме!~ ).

ПРИМЕЧАНИЕ----------------------------------------------- Несмотря на название, которое вы дали классу, можете применить его к любым другим тегам, а не <h2>, то НТМL-код должен

только к <р>. Если данное форматирование относится, например, к

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

<h2 class="note">.

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

7. Сохраните файл и просмотрите веб-страницу в браузере. Абзац с примечанием красиво подевечен на стра~ице (рис.

3.8).

·1

The Amazing World of CSS Sed ut ~ааьs unde om111s 1ste natus error s1t votupratem accusгnaum doloremque laudanaum. totam rem aperiam, eaque epSa quae аЬ llo enventore venraos er QuaSI architecto Ьеаtае '11\ае d1da sUit expllcaЬO Nemo enem tpsam voluptatem quea ~s Sjf эspemai\Jt а!А od1\ aut filoil. sed qu1a consequuntur magm OOiores eos qu; rabone VO!uptatem 5eQ1J1 nesount Sed !А persptdatis unde OIМIS iste natus error stt vo!uptзtem accusantн.rn OOioremque laudaroum. tOiam rem apeream. eaque 1psa quae аь tllo enventore ventэos е1 quast эrchltecto Ьеаtае 111tae dida sunt ехр!1саЬО. Nemo enim 1psam VOiuptatem qu;a voiJptes Sj\ aspernetur aut odit aut lugrt. sed quea consequuntur mag111 OOiores eos QU1 raьone VO!uptatem sequ; nesount Neque porro quisquam est, QUI dolorem tpsum quta dolof stt amet. consectetur, achp•sd vekt, sed quta non nurnquam e1us modttempora t!ICidUill ut labore et dOiole magnam a~quam quaerat voiЦ)tatem Ut en1m ad mn1ma ver11am. QUIS nostrum exerataoonem ullam COI\)OГIS SUSCJptt laЬor10sam. ntsl ut ahqiJid е~ еа commodt consequatur? Q11s autem vet eum шrе reprehendefn QU11n еа VO!uptate ve\11 esse quam rohlt moleSЬae consequawr. ve1111urn qul dolorem eum lug!at quo YOЦ>tas nula panan.?

..····-········-···--.................................. _.......,

~-··••а.•·-··--··---~---···--··-·· --- -·------·····-·········--·

NОП:: mtn~ma veroam, QIJIS nostnrn exercttabonem utlam corpons sUSCiplt laboriosam. ГIISI

ti aJtQtld ех еа commoc:li consequatur?

~ .... _._.................................................... ~ .............._

.._ .................................................. .. _ ................................................ J

Рис. 3.8. С помощью селекторов классов'вы можете выполнить точное, детальное форматирование элементов веб-страницы

ПРИМЕЧАНИЕ--------------------------------------------~- Если ваша веб-страница не nохожа на изображенную на рис.

3.8,

возможно, вы набрали какое-то

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

значение» была завершена точкой с запятой и в самом конце опре

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

Соэдание селекторов потомков На странице

selectors_basics .html

вы применили класс поtе к двум абзацам. Каж

дый из них начинается словом NOTE:, выделенным жирным шрифтом (на самом деле это слово находится внутри тега

<strong>). Но что делать, если вы хотите отформа

тировать эти слова еще и ярко-оранжевым цветом? Вы могли бы создать стиль для тега

<strong>, но он затронет все теги <strong> на странице, в то время как вы хоти

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

было бы создание класса, например

. noteText, и применение его к каждому из тегов

Глава

Селекторы: оnределение элементов стилиэации

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

много таких страниц с записями.

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

<strong>.

К счастью, сделать это совсем

не сложно.

Вернитесь к НТМL-редактору и файлу

selector_basics.html.

Создайте новую

строку для определения стиля с селектором потомков.

Щелкните кнопкой мыши после закрывающей фигурной скобки стиля и нажмите клавишу

Введите

. note

Enter.

. note strong

{.Последнее слово селектора- тег

<strong>- это и есть

элемент, который вы хотите отформатировать. При этом стиль отформатирует

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

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

<strong>,

. note.

Стиль не возымеет никакого эффекта на теги

находящиеся, например, в тексте других абзацев, в списках или заго

ловках первого уровня.

Нажмите клавишу

Enter,

введите со l or:

#FC6512:,

затем нажмите

Enter

снова,

чтобы создать еще одну новую строку. Закончите стиль символом закрывающей

фигурной скобки. Конечный вариант стиля должен иметь следующий вид:

.note strong { color: #FC6512: 4.

Сохраните таблицу и просмотрите ее в браузере. Слово

NOTE:

должно быть окрашено в оранжевый цвет в каждой из записей на

странице.

Селекторы потомков -одно из самых мощных средств языка

CSS. Профессио

нальные веб-дизайнеры используют их достаточно интенсивно для целенаправ ленной стилизации отдельных тегов, при этом не засоряя НТМL-код классами.

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

15.

Соэдание ID-сепекторов Вы можете применять селекторы классов ко многим элементам веб-страницы. Например, ранее вы создали класс

. note

и применили его к двум абзацам, хотя

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

используют их для того, чтобы указать и отделить друг от друга уникальные раз

делы веб-страницы, как описано в разд. <<ID-селекторы: определение элементов веб-страниц~ этой главы. В данном примере мы создадим стиль, который устанавливает определенную

ширину для основного содержимого веб-страницы, располагает его посередине

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

окна браузера и добавляет декоративное фоновое изображение. Вы примените ID~електор к тегу

<body> для

созданияуникального дизайна страницы.

Вернитесь к НТМL-редактору с файлом

selector _basics. html. . note strong новый стиль.

Добавим за последним созданным классом

Щелкните кнопкой мыши после закрывающей фигурной скобки предыдущего стиля, нажмите клавишу

Enter для создания

новой строки и введите #а rt i с l е

!О-селекторы всегда начинаются с символа решетки#. Имя стиля указывает на

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

которой ведется благ. В данном случае вы идентифицируете эту страницу как article («статья», по ана логии с газетной статьей), создавая и применяя

Нажмите клавишу

к тегу

<body>.

Enter еще раз и введите следующее:

background-color: #FDFBAB: background-image: url(images/bg page.png): background-repeat: repeat-y; background-position: center top: padding: 0: margin: О auto: width: 760рх; Эти свойства добавляют цвет для страницы, вставляют изображение в фон (и контролируют его расположение), устраняют промежутки вокруг краев

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

Завершите определение стиля, набрав закрывающую фигурную скобку. Весь код стиля должен выглядеть так:

#article { background-color: #FDFBAB: background-image: url(images/bg page.png); background-repeat: repeat-y; background-position: center top: padding: 0: margin: О auto: width: 760рх; Как и в примере с классом, данный стиль не будет эффективен, пока вы не при мените его к веб-странице. Таким образом, нужно добавить атрибут i d к НТМL коду веб-страницы, обозначая фрагмент, к которому вы хотите его отнести.

5. Найдите на веб-странице открывающий тег <body> и добавьте i d=" а rt i с l е", что бы он выглядел следующим образом (изменения выделены полужирным):

Глава

Селекторы: оnределение элементов стилизации

Теперь тег <bo,dy> отражает форматирование, определенное в стиле #а rt i с 1е. Как

это часто случается при работе с CSS, есть много способов добиться одного и того же результата. Вы могли бы использовать класс стиля и примелить его к тегу <body> при условии, что делаете это не более одного раза на странице. Вы даже могли бы просто создать стиль для элемента

body с теми же свойствами форма

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

ID,

поскольку назначение сти

ля- идентификация типа страницы- соответствует идее селекторов

ID.

Сохраните страницу и просмотрите ее в браузере. Все содержимое веб-страницы

логотип и текстовые данные

теперь имеют

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

background-image

(более подробно о нем вы узнаете далее в этой книге).

Последние штрихи Для развлечения добавим один усовершенствованный стиль

ский одноуровневый селектор

смежный сестрин

для форматирования абзаца, следующего сразу за

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

освобоЖдает от внесения правок в код HTML).

Вернитесь к НТМL-редактору с файлом

sel ector _basics. htm1.

Создайте новую

СТроку ДЛЯ НОВОГО СТИЛЯ.

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

сразу за закрывающей скобкой стиля #а rt i с 1е и затем нажмите клавишу

Введите

Enter.

hl+p {.

Этот стиль будет применяться к любому абзацу, следующему за тегом

<hl>,

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

Нажмите

Enter и добавьте к стилю следующие свойства:

co1or: #FF6600: font-size: 1.2em: 1ine-height: 140%: margin-top: 20рх: Здесь вы изменяете цвет и размер шрифта, а также добавляете немного свобод 1ine-height (подробно о нем вы узна ете далее в этой книге) управляет промежутком между строками в абзаце (это ного пространстванад абзацем. Свойство

свойство также известно как 1eadi ng). 4. Наконец, завершите стиль, нажав Enter и поставив закрывающую скобку. Стиль \ должен выглядеть так:

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

hl+p { color : #FF6600: font-size : 1.2em: l ine-height: 140%: margin-top: 20рх: Если вы просмотрите страницу в браузере сейчас, то увидите, что верхний абзац стал оранжевым, текст выглядит более крупным, а между строками расстояние

больше (рис. 3.9). Если вы удаляли этот абзац в HTML, то заметите, что оста вшийся абзац стал оранжевым и имеет более крупный текст, поскольку он те перь новый смежный сестринский тег для <hl>. ~MEЧAHИE-----------------------------------------------

Internet Explorer б не поддерживает смежные сестринские селекторы,

поэтому в этом брауэере пер

вый абзац будет выглядеть аналогично всем остальным.

•

~· css: тне MISSING мдNuдi~ ·~·~

•

·~ .

........ ....,

ft ......

The Amazing World of CSS Sed ut persp•tiabs unde omnis lste netus error sit voluplatem eccusantium doloremque laudanuum. totam rem aper>am. eeque lpsa qiJa8 оЬ 1fio uмontore verilalis et quasl arcMecto beatee llllae dicta sunt QXpl•cabo N•mo anim ipsem voJuptetem qu1a voluptas sit espem&tur aut od~ aut fug4 s&d quia consequuntut megru csolores eos qu1 ratюne voluptotem sequt nesctUnt Sedutpersp/claбsunoeonnsoS!enaii<SerтorSIIYOI\JP!IIIem~nt•ll!ldOio<emQIН!

laiiOantJ\11\ totam rem apertaщ eaque rpsa Q\188 аЬ t1o IC'IIIEf'II:Ofe ventaьs et quasa arctite<;to ~>еа~ае waedict&S<I"II eJ<!*C81>0 Nemo e<Wn opwr~~ qu~e YOIЦ>Cas s.t o5petnetu1e1• odtt а <А ruo<t. se<1 quJa cмseqwМJr mogr> dalotes eos <Р ra~one ~tem sequo neso<n NвQue po!'ro qusquam es1, qu1 dolo<om opsum qua dOio< '" omet. coosecletur. ad!poso vekL se<1 quoa f\00 runqu~~m "'"' moa.tempote rnac:~~n ut taьore er 0010re mognam etquam

queeral voiupl3t.."_ \А mm ad mo111ma Y\1111am. qurs nostлJme.<e<Ota~""""'IJiamcorporos SUSCij>l labonosom !115>\А alqud &Х еа convnodl Cot1$EqUaЦ'/ Qus I!IJI11 wre te!)reller>clerd qu~rn ее vdui>Cat• мt8';se quram IYhll molesЬoe ~tur. vel<lum qur

114em""'

dOIOromeutni\Jglatquo~,... par.aь.r?

•. .____•• _...,:

~··•-••о оооо.о-•-•••••••••~--•••--• •••--•••-••••-И• ••-••••••••...,.._..,_...__...,.

ноте: nmma ventam. qurs- exerat81Юr1em\JIIam corpons -

1 "" \А oiquld 8Х •• ~ COfl$eqUaQ6?

· lolюnosom.

1·-·-·--·-·····-···········-·················-···········- ·······•··························' Рис. 3.9. Теперь веб-страница действительно имеет законченный вид

~МЕЧАНИЕ----------------------------------------------- Окончательную версию созданной в этой главе экспериментальной веб-страницы вы можете найти в папке OЗ_finished загруженного вами архива с учебным материалом.

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

Механизм наследования .., стиле и

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

HTML.

И точно так же, как люди, теги могут унаследовать СSS-свойства от

своих предков.

Что такое наследование? Наследование- это прием, с помощью которого СSS-свойства, относящиесяк од

ному тегу веб-страницы, распространяются и на вложенные теги. Например, <р> всегда находится внутри <body>. Так, атрибуты, применяемые к <body>, наследуют ся <р>. Допустим, вы создали СSS-стиль (см. гл. 3) для <body>, который устанавли вает атрибут со 1or (например, темно- красный цвет). Производвые теги, являющие ся потомками <body>, то есть теги, расположенные внутри его, наследуют атрибут. Это означает, что любой текст, заключенный в <hl>, <h2>, <р>, будет отображен тем же самым темно-красным цветом.

Механизм наследования

многоуровневый, то есть его эффект не только рас

пространяется на прямых потомков (дочерние элементы), но и переносится на все вложенные элементы. Если, например, <em> и <strong> расположены внутри <р>, то

также унаследуют атрибуты любого стиля, применяемого к <body>. ПРИМЕЧАНИЕ----------------------------------------------- Как описано в гл.

любой тег, вложенный в другой, является его потомком. Так, <р>, находящий

ся внутри <Ьоdу>,- потомок. В то же время <Ьоdу>- предок. Потомки (по аналогии с детьми

и внуками) наследуют атрибуты своих предков (по аналогии с родителями и прародителями).

Может, это кажется немного непонятным и запутанным, но механизм наследова

ния на самом деле экономит очень много времени. Представь те, что ни один атрибут

не наследуется вложенными тегами и у вас есть абзац текста, который содержит, например, тег <em>, выделяющий фрагмент текста, или <а>, добавляющий гиперссыл ку. Если вы создали стиль, форматирующий данный абзац шрифтом

Arial размером 24 пиксела фиолетового цвета, было бы странно, если бы внутри <em> отобразился прежний стиль. Вам пришлось бы создавать для форматирования еще один стиль. На странице, изображенной вверху рис.

4.1, тег абзаца устанавливает опреде

ленное начертание, размер, цвет шрифта. Абзацы наследуют эти свойства и имеют единообразный стиль.

Что такое наспедование?

R.IШd kd Gardtf~Мg

CosmoFarmer.com Projects Hlgh Rlse Project: Ralsed Bed Gardening Loff111 ip..c;:uщ dolor ..., iUnf't. ron..Of\.""teLu 'f adip1<aн..; tic . ..:d d\ 1011 f\UI\1 n1щYnrt.h ttliqn,,J tнt'1I.IUJ\t ut l<tvtf'•·t dc.&.~· m;t'CJ';a ..Wq'f.IФ C"''ot vc:.1JJ4,.,t t,.it W\~~ t'Utm 3d tJНJ!i1n 1'\'ttiom. qua~ ,,....tna t>'ЦЧ\11.tllon U11ni'IH....R'('Ic(" ~.ox;plf 1t~1!-<l. ntJI Ot 8ti.qщp !;'Х t"Ja 01tЩI11dof"CCiiNilltll Lktts. ;щtfltJ\ \~l ~urn triuf~doiOr in btndrt'ftt in ,,tlj•t:t.,tt" ,·...Ьt ci!Фf щ~tt"' С\/СН<qнм. 'f'l

illum dc*'lt'f' t'U fculiJ!

~ 011. '"""' t:ta~ tf -.xttrn'itn « 1Ut.W•d~ dt(n.i :Чt\1 qUi bl.11'1t!tt Jlr.-wo~nt ~фt.,l~il• ant dC"ll.-(11.

Step 1: Get Your Materla/s t.o~•n ip<w'' duli•r •Н atntt, C'<ln'lt"('\.1:1ucч Jd't"""'i"" c.br.!kd ,1,.. '' noaщrtm' otbb (IJI---.1\c:.d tanod\Jnt цt tнw~ dokffn'~ttф:. lhquartt t"rat \dutr·••.l•twt!-1 t1'U11'1 ~d tmnim t"'totmt qьi fl(~ f".~~;•.,.n l;t.tt•ll) нU.,rno~'Г"'f ~~1pit h..Ьнrti o'li-rl \Jt Мч~нр «"1. t'3 ~""n1n••f l\uмr·чв•t. l>щ :JIU,fNU 'd ,.,нn irнJtl' dr.&.:.r 1n !~rrrit ia. ,,1\pt,f.llt- \Yhl. ~ "~ «-:>tsr ttjt)\l."qu.fll 'rt Шum ~k~c.tr ~d ltUIIJt ~ :at \'('«) fflJIC rt ;a,rro~n rt tu-~•) Codio d'tllt"'-101 bbudot (W:tНt'(\1 10f1131um "./il

Ci''

·1.-k-1111•

Step 2: Waterproof Your F/oor I.Ot"W:'I'n ip~uщ doiOr •tt xttt"t

L"«1NuN lhlфt•••:i"' rh~

М'~!} d1ьм

lloO'IIntn' n•J)I' ~-u,чnnd

ШI\.~Ф1nt111 ЬarfC'I1'SI!Lrt •n~tlil•t1.JWM l"t.\f\'\.!Jtllpril '~ ~1•t rn!J'It 111) trllnli--'1 t''fiiUtn. ,.щ. noчru

.-~...rn t~ьм uJt.~~nМ'W'fW"t ~ "1f1itJtA:юni• ni..Jщ :atiqщr.('ox~•• rac"n.иxii\(\:11\"S>~:qu;n. H~li.. AUt~m \.-1 t"tJJ'f'l 1nuR' dot.Jt ш lмaJ.nonL 111 '1Jipt.t.sk '~"''' NW: mok-tlt' t " ' .<·•tUat \t'l tltuna di'IМ.:.t't' (tJ ~ ~ .wt \'l('f0t"H'~<t"1 ~("(''J!\1.'1..10 .:\ 1U~II t.dlfl (ll,фt'-ЧIН ql\i bloUI

J,\ 'J)f;tt"foC'Pt tupt~~NP11'д'l\

ck:ltnit:.

Cosmofarmer.com Projects Hlgh Rise Project: Raised Bed Gardenlng Lort:m.lpsuм dolor sit Oimt"t Wl\.~.."\: r-tur-r .adtJN-lonn( ~не. '<'d (tl~o~m mJnшntn' nihb t:UI ~~~ •ct unndun1 щ l'lt«'t\..tok.r~ rn.:t.1"JЦ ~abq111tщ tat \ ,'lhJLp:.t

t 111.\:l'il t'n1n' Dd minim

wn.iam,

iUi•

t.o-1rud t\el«'i Ь.tlм uU.1nawrcr "U.'"4.1pat khorti< ьi.Q ''' ohqt,Jp С'\ ~t• tanJ.n1odoi.X.I>I'-"""-"Чu-.1t. J>t.JI\. wuttm \с) eum щort doi ~ tn "'''ltltcorнl~:' '"'1puc~w '~''~т~·~· ~""Oniot-q\!Qt. '~1111ш•. d.r.L.Jft" t'U fc:urДat lщ>t.-a"'m

nulla fagШsis at \ :untddt-n.it а

fi('Ni!l C"l

,Щ"ti!A~n C't IIJ~O :.!j

Ji.Qtt

1" I'Jift м~ndll Г''~ nt

Step 1: Get Your Materlals Lonn~lpsam dolor !IТ4t ~пн::t~tt~r:\dtp..snt~tLit. ч-d d~um мщ1o1mvьtbh«U~nюd 11nаФшt ~•• Ьatot-t cir.!1twt m 'J:.'~' Jt1.qU.;im ..:•м "ot:ulrc.r \{t \'MI N•im ~td minim wnio.m. qш" n~tntd t'drrd t~ftan uJL..m~~'qWJ tuk,~tl ~t..,.. (L.; n~ uc .tl'щuФ t>' r;:~ щпiiJ\Гdu('CIII\-cqtJ.Jt. Uttt~ ;aQitП\ \i') t1-n1'1 inuc~ doiOr in Jw.ndrttlt ~n "~Rit' tYht r~ l"tko'sti<" ~>t"Q\I~t. \ ..J i8um tT~ f:"Q fe:ugiat ПUI!a faciUsiS •t \'t"tut'tt4 '-'t :ttNn!Шt t•t щ~tо nJiodJJ;Jt.~.»~.tll qш ftl.\lt~tit prt~r~(lf ktp1:\tut'Ja «''t dtokUJI ;а

Step 2: Waterproof Your floor LOrtiQ lpsum dolor А\ :.rur-t t.".nч:"-1l"!LtN ."J.tp•~1f\itl'ht tin....Junt ut h1....,тt d~ m~~n~• '~qu 1t1\ 1-"f:\t \tt!utpoн.

м·d Uta,n nunшnm)· ntbb ~ut~t.m••1

minim veni.am,

t"t \\"i-4 1: щщ ~ qui •~rrud es:com ~.:~tion di1ounrar(К"r ,~-.tfrit ~ ьН щ :-.liqнtp r" t.'" tumntodPtUn.Щd.al OutJ .щtt'fn \et ru.n \riurr duWr '" hi-1.Jcr.r1t ш \'U~юt:tt{' ,·til.t с~· naoko•Hr t'I'II\I-(Чa~~jtl ,..._.f!Пщn t.1( ut'e

•

Рмс.

·' • ;H\1"'tnt<rQJN.•'-..:'tllnt,;tnttщФ3t.diodl~tni."-~n• wbbnd1t

4 .1. Наследование nо3воляет

вложенным тегам копировать

атрибуты окружающих их родительских тегов

Если бы наследования не существовало, то веб-страница выглядела бы так, как показан о в нижней части рисунка. Обратите внимание, что <st rong>, <em> и все вло женные теги сохранили обычное начертание, размер и цвет шрифта, определенные

браузером стандартно. Чтобы отформатировать их nодобно остальной части абза ца, вам пришлось бы создавать дополнительные стили.

Глава

Механизм наследования стилей

Наследование работает не только со стилями тегов, но и с любыми другими типами. Когда вы применяете стилевой класс (см. разд. «Селекторы типов: дизайн

страницы~ гл.

к какому-нибудь тегу, то вложенные в него теги наследуют сти

левые атрибуты. То же самое справедливо и для всех типов селекторов, рассмот ренных в гл.

Упрощение таблиц стилей черезнаследование Вы можете использовать преимущества механизма наследования в своих инте

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

<body> (или

создайте класс и примените его). Определите нужный шрифт, и все теги неб-стра ницы унаследуют его:

body { font-family: Arial. Helvetica. sans-serif: } Вы также можете использовать наследование для применения стилевых атри

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

<d i v> (см.

раз д. «Селекторы классов: точное управление~

3) для определения таких фрагментов, как шапка, навигационное меню, нижняя

часть страницы. Применяя стиль к

<di v>,

вы выделяете специфические СSS-свой

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

<hl>

<di v>.

Все теги, заключенные внутри, в том

и т. д., унаследуют этот цвет шрифта.

ПРИМЕЧАНИЕ--------------------------------------------------

8 части 3 этой

книги вы узнаете о неисчерпаемых возможностях применения

вании дизайна веб-страниц с использованием

<div>

при проектиро

CSS.

Ограничения наследования Механизм наследования неидеален. Многие СSS-свойства вообще не наследуют ся, например

border (позволяющий оформить в рамку элемент неб-страницы).

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

ные в элемент, были бы одинаковы. Например, если бы вы добавили рамку к <body>, то она была бы во всех маркированных списках (в каждом пункте, подпункте и т. д.) (рис.

4.2).

ПРИМЕЧАНИЕ----------------------------------------------- Полный список СSS-свойств, включая их подробное описание, параметры наследования и т. д., приведен в приложении

Оtраничениянаспедоеания

CosmoFarmer .com Projects HJgh Rise Project: Raised Bed Gardening Loreш ip~ua11 dt)loг ,н ~nн:t. CIII\<N·t~L!ICI ;l<llp1><1нg el1t. "''' tlinnt lt<lltUmltly ltJitll t•ui,mnd tilttldшtt щ laol~t·t tlolon·шaь11a аlщuаш <'1'31 ~'Oiuljмt. lJI 11 tsi cшnt шl mmim t'<'IШIТ/1, tfШJ> IIO>tt'\Jd cxcn·Jtatitщ цllnщщrpcrsщ:c1pit lobt>t'tь пisl ut аlщшр сх <'n ct• шnюdo conscчшtl. ])lli:. nнtcJrt н·l <'IIПl •riшt.' tlo}щ'll\ 1Jt•n<lrt•l1t 111 I'Uiplltl!l<' 1•clit б"' motcsllt' •·oн:;rquat. 1'<'1 illum tlolot'<' <'U feu~at nulla faciljsjs а\ 1'<'1<1 его' cl ntrun1sau t'IIU,L<> щ\ю dtgltl~im qнi hl:шcl1t J)r:I<'S<'Ill Juptatшп nr1l d•·lctJit а

Step J: Get Your Materlals

LoreJ)) ip'un' dolor ,;, ошсl. L'OH,C<'t\'lueJ' :o<IIP"' 111~ <'llt. "'<1 tltnltl nщluшшу ltlblit·ui,шod tшcldllttl нt laoret•t <lо!щ,• 111ng11i1 ;t\i<tUAI\1 t'l':\1 1'!1JUip<lt {' 11\'ISI C11in1 :td 111i11i111 l't'IIШII!. IJUI' IIO$trud cxcrei wti<>н нllмt1corper su."<'tpit lolюrt1< nr<l ut <~liquip сх t•n Ctttlltпodo ton-<~чuat. J)lli~ nнtcJ\1 \'t•l <'11111 lrittn.• dl))(>r in

Step 1: Get Your MateriaJs

Рис. 4.2. Рамка, относящаяся к абэацу (вверху), не наследуется тегами, находящимися внутри

Ниже приведены конкретные случаи, когда наследование точно не применяется. О Как правило, свойства, которые затрагивают размещение элементов на страни це (отступы (поля), границы (рамки) элементов), не наследуются.

о Брауэеры исполЬзуют с·вои собственные встроенные стили для форматирования различных тегов. Заголовки обычно отображаются крупным полужирным шриф том, ссылки

синим цветом и т. д. Даже если оnределен конкретный размер

кегля для текстового содержимого веб-страt1ицы и nрименен к

<body>, заголовки

100

Глава

Механизм насnедованин сrилей

будут отображены большим по размеру шрифтом. Теги <hl> будут крупнее <h2>. Точно так же, когда вы устанавливаете цвет применительно к <body>, гиперссылки

неб-страницы все равно будут отображены синим цветом с подчеркиванием. ПРИМЕЧАНИЕ----------------------------------------------- Будет очень полезным устранять встроенные стили браузеров

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

тует с наследуемым (например, размером шрифта <body> ), то браузер использует явно описанное свойство, более близко относящееся к стилизуемому элементу (в данном случае применяется размер шрифта, определенный для

<ul>).

ПРИМЕЧАНИЕ----------------------------------------------- Такие типы конфликтов между стилнми встречаютсн очень часто, и правила, определнющие, как

должен вестм себя брауэер, наэываютсн каскаднОстью и вынвлнютсн приоритетом. Подробнее об

этом вы узнаете в следующей главе.

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

рый использует наследование для изменения форматирования всей веб-странuцы. И наконец, рассмотрим случаи отступления от правил, на которые следует обра тить внимание.

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

04 ар

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

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

Откройте файл

inheritance.html в НТМL-редакторе.

Сейчас добавим в него внутреннюю таблицу стилей. ПРИМЕЧАНИЕ----------------------------------------------- Вообще, в сайтах лучше использовать внешние таблицы стилей по причинам, описанным в гл. 2. Иногда проще начать разработку СSS-диэайна отдельных веб-страниц, испольэун внутреннюю таб лицу, как в этом примере, а уже потом преобраэовать ее во внешнюю.

Щелкните кнопкой мыши сразу после закрывающего тега клавишу

Enter и

введите

</title>. Нажмите <style type="textlcss">. Теперь дважды нажмите Enter

101

Обучакхцийурок:насnедование

и создайте закрывающий теr </ sty l е>, обозначающий конец таблицы стилей. Эти теги определяют область, в которой будут находиться команды языка CSS. Теперь нужно создать стиль, который будет применен ко всем теrам абзацев <р>.

Перейдите к пустой строке между открывающим и закрывающим тегами <sty l е>

и введите р {. Дважды нажмuте клавишу Enter и поставьте закрывающую скоб ку}. Мы создали селектор <р>, который будет применен ко всем теrам абзаца настоящей веб-страницы.

В строке между двумя скобками введите со 1or:

#FF6600.

Стиль теперь должен

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

{

color : #FF6600 : С этим свойством мы имели дело в предыдущем обучающем уроке. Оно уста

. навливает цвет текста. А ваша таблица стилей уже готова. 5. Чтобы пос~ютреть на результат работы, откройте страницу в браузере. Цвет всех четьrрех абзацев страницы изменился с черного на оранжевый (рис. 4.3).

The Amazing Wor.d of CSS Std ot penpiciatis \l1de omli.s iш n111us mor sit ,..,fupttllltm ac~usQ)I/{UJ1f <lol«<mque laud.Jmium. tx>tom ""' e:aque ips,a qua.e: аь ilo iaтea.tore veritatis et qvasi arclitкto beat:a(' \itae <ktt suat expkatю~ Nemo .";", ~sam \"Oiop(Шm quia ,..,q,w sit aspcin.wr u odit out Щgit. sed quia cos qui r8liooe ~ sequi ьperiam..

.-nщ

• adipisci v.a • 8Dtemveleum&e ~ • ut lautan""' ..,." i

Who Кllew CSS Had Sucb Power? Scd ot P<fspidatiS """" ...... ь~ 111!1Ш mor sit \'l>klptaltm acctnaalium dol«emque loud:wiom, totam ..... ьperiam.. <ЦU< ipsa quae вЬ illo im'<ntOfe ,..,._ et quasi orchil.ao Ьеаt1е \W dicti> Я1111 ехрiс.ЬО. Ncmo <nim ipsom vohlptatem Std at penpiciatis un& omois Im мtuo mor sit voluptat1m aaшamium cloiOremqu< ~. totaш rcm opcriam. eaque ipsa quae: АЬ illo inwmorг '-'.n'«Jti"J • qumf orch~f«to beatae. ,ь.е сВсtа Я1111 Щ>iс.ьо. Ncmo ..." ;р..." ,..,~uptotem quia \"Oiuptarsit aspemaiUr ourodit autfiфl. •ed quia e<>s qui rotiooe '~ sequi nesciD. Quos 8UI<m ,-.J eum iure r~ qui in •• ''Oiuptat~ '<dt es« quom oiЬil molesw conseQWIIUr. vcl i1ЬD qui dolo<em eum IUgiat quo ,щw oulla pariatur?

Рмс.

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

102

Глава

Механизм наследования стилей

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

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

абзаца, который вы хотели, независимо от любых других тегов. Без наследования создание таблиц стилей было бы очень трудоемкой задачей: теги <em>, <а> и <strong> не унаследовали бы цветового атрибута <р>. Следователь но, пришлось бы создавать дополнительные стили, скорее всего, с селектором р и р

strong, чтобы правильно отформатировать текст.

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

зоваться наследованием для быстрого изменения дизайна всей веб-страницы.

Вернитесь к НТМL-редактору с файлом

i nheri tance. html.

Сейчас мы добавим

новый стиль вслед за только что созданным стилем тега <р>.

Щелкните кнопкой мыши сразу за закрывающей скобкой селектора р. Нажми те

Enter для создания новой строки и введите .pageStyle Enter и поставьте закрывающую скобку }.

{.Теперь дважды на

жмите

Сейчас мы создадим новый класс для

<body>.

Перейдите к строке между двумя скобками и добавьте к стилю следующие свойства:

font-family: "Helvetica Neue". Arial. Helvetica. sans-serif: font-size: 18рх: color: #BD8100: width: 900рх: margin: О auto: Законченный стиль должен иметь следующий вид:

.pageStyle { font-family: "Helvetica Neue". Arial. Helvetica. sans-serif: font-size: 18рх: color: #BD8100: width: 900рх: margin: О auto: 4.

Этот класс устанавливает начертание, размер и цвет шрифта. Он также задает ширину и центрирует стиль на странице (мы рассматривали это в предыдущем

обучающем примере). Теперь вернитесь к открывающему тегу

<body> (располо

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

вающей скобкой через пробел с l а s s=" pageSty l е". Сейчас

<body> должен выглядеть следующим образом: <body с l ass= "pageSty l е">. . pageSty l е. Благодаря наследованию все теги, заключенные внутри <body> (текст которых отображен в окне браузера),

Таким образом, к нему применяется класс

наследуют стилевые свойства и, следовательно, используют тот же шрифт.

Обучающий урок: наследование

103

Сохраните и. просмотрите веб-страницу в браузере.

Как видно из рис. 4.4, наш стилевой класс обеспечил всему тексту веб-страницы согласованный внешний вид, без резких переходов, плавно сочетающий все фрагменты содержимого. И заголовки, и абзацы, заключенные в <body>,- все

элементы веб-страницы за счет изменения свойств шрифта приобрели новый стиль.

The Amazing World of CSS Secl ut ~rsplclaiJs unct. omnts Jste naius error sn volupratom ac:l/$anYIIm doloromque laudвniJum totom rom a~riam, eaque lp"' quae аЬ lllo lnventora v...netts &t quasl archltacto bealllo vffзo dlela sunlexp!ocaЬO Nemo enlm ;psem votщ>talem q\Jia votuplas Sl1esp.malllr out odrt aut fuglt, uc1 qula ео• qul rotlone volup13lem sequo nesclunL

•

oЩplsclveJn

• autam vateum hJ.re re • ut leutem ve! eum 1

Who Knew CSS Had Such Power? Sed ul ~rspk:lel!s unde omnls lste naluз t(IOf $11 votupUI\em accusenuum dolcwemquelaudenuum. toO!m rem aper\am, eaque ip&l quae оЬ ~lo lnvontore vel11atis е\ quaslerchnoclo ьемае vlloe dkta S\J<It охрl~аьо Nemc enm ipsam voluptatem Sed ut persp1clat1.s unde omnts tste natu,s error М voiuptstem accusanttuмdo1ofemque leuctentku'n. totam г.т apellam eaquolpsa quO* еь 1Мо lnvontore vorftatlo .с quasl orchl:.<:to ьеаtао vnoe dkta sunt охрЬЬО. Nemo enlm lps;lm voluptatom qula vol\lp\4s sit espematur eut odlt aut rugh. sed qula eos qu1 ro\Jone voluptatem sequllle$(1U!\t Ouls autem ve! •um tura r.prahendem qUi in еа VOIUptate vel<t esso quom ntl\ll molestlae conзequa!Uf, vlll ~m qui doiOrem eum 1\Jgiat quo v~ptas )1YIIa pilllotш'?

Рмс. 4.4. Стиль, nримененный к <Ьоdу>, nеренесет свои свойства на теги,

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

Страница в целом выглядит интересно, но теперь рассмотрим ее более детально: изменение цвета затронуло только заголовки и список на странице , но текст заго

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

делать? И nочему не прИмен ил к вложенным в <body> тегам <р> новый атрибут цвета? ПРИМЕЧАНИЕ------------------------------------------------ Почему мы исnопьэуем класс pageStyle вместо стиля тега <Ьоdу>, чтобы изменить вид страницы? · В данном nримере стиль тега еще сработает хорошо. Но применение класса (или ID) к тегу <Ьоdу> -это отличный сnособ настроить по индивидуальному образцу внешний вид страниц сай та. Наnример, если они все ислольэуют одну и ту же таблицу стилей, то стиль тега <Ьоdу> будет

nрименяться к <Ьоdу> на каждой странице вашеrо сайта. А соэдавая различные классы (или ID), вы можете создавать различные стили дпя тега <Ьоdу> дпя разных разделов сайта или разных тиnов страниц.

104

Глава

Механизм наследования сrилей

Вы видите, как оказывает влияние свойство каскадных таблиц стилей? В этом

примере для <р> образовался конфликт стилей, в частности двух одинаковых ат рибутов цвета,- тегового, созданного выше, и стилевого класса <body>. Если про изошла такая ситуация, то браузер должен выбрать один из стилей. Используется более близкий к элементу стиль- то есть цвет, который вы явно назначили <р>. О правилах каскадмости будет рассказано в следующей главе.

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

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

Вернитесь в свой НТМL-редактор с файлом

i nheri tance. htm1. Расширим только

что созданный стиль <р>.

Найдите определение стиля р, щелкните кнопкой мыши сразу за свойством

цвета (со 1or:

#FF6600:)

и нажмите

Enter для добавления новой строки.

Сейчас мы создадим левый отступ для всех абзацев веб-страницы.

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

{ co1or: #FF6600: margin-1eft: 50рх: margin-1eft: 50рх: padding-1eft: 20рх: border-1eft: so1id 25рх #808100:

Свойство

paddi ng 4.

ma rgi n- 1eft

создает левый отступ размером

формирует отступ от границы размером

50 пиксело в, 20 пикселов.

свойство

Сохраните файл и просмотрите его в браузере. Обратите внимание на то, что отступ в

50 пикселов от левого края окна и жир

ную коричневую границу имеют все абзацы, представленные <р>. Однако у те

гов, вложенных в любой из <р> (например, у <em>) нет такого отступа или гра ницы (рис.

4.5).

Это поведение браузера оправданно: неб-страница выглядела

бы непонятно, если бы каждый тег <em> и <st rong> в абзаце имел дополнительный левый отступ размером

50 пикселов!

Если вы хотите увидеть, что бы случилось, если бы эти свойства наследовались, · отредактируйте селектор р.следующим образом: р, р *,что сделает его группо вым. Первая часть

рая часть

это тот селектор р, который вы только что создали. А вто

буквально означает следующее: «выберите все теги внутри <р>

и примените стиль к ним~(*, или универсальный селектор, был описан в пре дыдущей главе).

Обучающий урок: наследование

105

The Amaztng World of CSS Sed ut pereP\claUa ullde O<n<\J$ lsle natus o"or ~ vo/uptsrem 1/CCllUm/иm doiOГemqueleuoantillm tot""' rem ape~am. oaqutlp!14 quao аь n1o l(lventoro verflalis ot quaal archrtocto Ьеаtао vitae dlcta sunt e.><pticaЬo. Nemo entm lpu.m 'IOiuptalem qula volupta• sП upematur aut odK aut 1\Jgi~ ••d q\Jio eos qut raUono v<>Шplatem soqul nesclunt

• adlplscJ VtiJ\

• eutem vet eum iure re • ut lautem vol oum 1

Who Knew CSS Had Such Power? Sed ut persf)icleti> un~ omniStste natut enc< sП votuptatem etCU$Мti\lm doloremque leUdemJцm totem rem apo<tam. eaquo tpsa quae аь Uto mvontore ~er11a~s 61 quasl arcnкecto ь.аtае >~!И dicta sunt е~ Nemo anlm lpsam 'IOIUptatem Sod ut partplcloUs unde omnJs tste natus ~or S4 voluptor.m actll$8rr/ium cloloremque laudentlum. totam r.", ape~om, eaque jpsa quae аь llo Fnwmtora velftotls et qua.i вlf:hlteC!o ьеаtао vttae dlclo sunt е>фiiСОЬО . Namo on1m ор!14щ voluptotem qцla voluptas ~ upernatur aut odK autl'uglt sad quJa eos qul raJ!onalloillptatem soquJ nescturrt 0\ds autem vetoum ture tep(ettondorlt qulln оа votuptate velit •••• quam nillll mole$Uae consaquatur. vol illurn qvi dotoram eum tuglat quo voluptas nuha parlatur?

NotMel

Sed ut perspiclalls unde ornnl$1ste natus etror sП voluptatem вccuиnt/um cfoiOГemquo laudanttum, lotem rom apo~m, ...quelpsa quao аь hlo lnventora vo~tatls et quasl arc:h~acto Ьеаtао vttoe cftcte sunt oxpllcaЬo. Nemo enlm ~m voluplatem q\JJa volupt&s s!( aspematur aut od!t aut /uglt. se<l qwe aos qulratlone nes<iunt Odl tampora lnoidunt ut laЬoro at doloro magnam allquom

Pllc. 4.5. больwинство СSS-свойств наследуются вложенными тегами (наnример, цвет wрифта} ~М~НИЕ--~--------------------------------~--------

Сnравочная информация относительно наследования СSS-свойств nриведена в nриложениИ 1. ~М~НИЕ ·----------------------------------------------КОнечный варнант веб-страницы, которую вы только что соэдали в этом обучающем уроке, можно наКти в nапке

04_finished

учебноrо материала.

Управление сложной

структурои стиле и: каскадность

По мере того как вы будете создавать все более сложные таблицы стилей, вы все чаще будете задаваться вопросом: почему конкретный элемент неб-страницы вы глядит именно так? Из-за особенностей наследования

CSS, описанных в

предыду

щей главе, на любой тег влияют окружающие его элементы. Стиль становится сложнокомбинированным. Например, тег <body> может передать форматирующие свойства абзацу текста, а тот

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

вами, может произойти наследование СSS-свойств и <body>, и <р> одновременно. Кроме того, может возникать конфликт: одно и то же СSS-свойство многократ но описывается в различных стилях, которые затем относятся к одному элементу

неб-страницы (например, стиль <р> во внешней таблице стилей и во внутренней). Вы можете наблюдать такую ситуацию, когда текст отображается ярко-синим Itветом, несмотря на то, что установлен красный. Существует особенная система, которая управляет взаимодействием стилей и определяет их приоритет в случае конфликта. Этот механи:Jм называется правилами каскадности, или просто кас

кадностъю. ПРИМЕЧАНИЕ-----------------------------------------------данной главе описываются проблемы, возникающие при построении сложных таблиц стилей,

работа которых основана на принципах наследования и использовании более сложных типов про изводных селекторов (см. разд. «ID-селекторы: определение злементов веб-страниц» гл.

3).

Все

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

ка

CSS,

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

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

CSS.

Каскаднасть стилей Каскадностъ

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

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

107

l<ао<адность стилей

ет. каким образом браузер должен обработать сложную структуру, относящуюся к одному и тому же теrу, и что делать, если возникает конфликт свойств. Это про исходит в двух случаях: из-за механизма наследования (одинаковое свойство на с.1едуется от нескольких родительских элементов-предков) и когда один или более стилей применяются к одному элементу веб-страницы (наnример, стиль <р> во внешней таблице стилей и <р> во внутренней).

Объединение унаследованных стилей Как вы узнали из п редыдущей главы, наследование

CSS гаран тирует. ч.то однород-

11 ые, взаимосвязанные элементы веб-страницы (например, все слова в абзаце, даже

если они являются вложен ными гиnерссылками или расп оложены в другом теге)

нолучают стилевые свойства родительских элементов. Это избавляет от необ:!<:оди '-Юсти создания отдельных стилей для каждого тега веб-страницы. Поскольку те•·

'-ЮЖет унаследовать свойства любоzо предка (например, ссылка, наследующая шрифт родительского <р> ), определить, почему кон кретный тег отформатирован

нмен но так, может быть сложной задачей. Предположим такую ситуацию: к <body>

rrрименен оnределенный шрифт, к <р> - размер шрифта, а для <а> - цвет. Таким образом, любой тег <а> абзаца унаследует свойства <body> и <р>. Другими словами, у наследованные стили будут объединены, сформировав один сложный . Страница, nредставленная на рис. 5.1, имеет три стиля: один для <body>, второй .lJIЯ <р> и третий для <strong>. СSS-код выглядит следующим обраэом:

Jody { font -family : Verdana. Arial. Helvetica. sans -serif: } ~

{ color :

#FЗО:}

strong { font -s ize :

24рх :

}

~ ('\ ()

lnheritance and the Cascade

GEJ ~~ ~ Г+)

@) tlle:/1/Users/dave/Do<uments/OO_we А (Q,.

Google

)

Heading 1 This is the <strong> tag--strong emphasized text within а paragraph of text. ipsum dolor sat. Lorem Lorem ipsum dolor sat. dolor sat. Lorem ipsum Lorem ipsum dolor sat. dolor sat.

Рис.

ipsum dolor sat. Lorem Lorem ipsum dolor sat. dolor sat. Lorem ipsum Lorem ipsum dolor sat.

Lorem ipsum dolor sat. , Lorem ipsum dolor sat. Lorem ipsum

5.1. Благодаря наследованию можно восnроиэводить один тег нескольким и стилями

108

Глава

Тег

Уnравление сложной структурой стилей: каскадность

вложен в абзац, который, в свою очередь, является вложенным

в <body>. Стилевые свойства наследует <strong> у всех элементов-предков, получая начертания шрифта

ме того, та

font- f ami 1у от <body> и цвет со 1or от родительского абзаца. Кро <strong> имеет собственное СSS-свойство, устанавливающее размер шриф

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

стилей. Другими словами,

выглядит так, будто для него создали следу

ющий стиль:

strong { font-fami1y: Verdana. Aria1. He1vetica. sans-serif: co1or: co1or: #FЗО: font-size: 24рх:

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

в случае конфликта унаследованных свойств торой вы устанавливали цвет шрифта для

На рис.

CSS? Вспомните веб-страницу, в ко <body> и <р>.

5.1 <strong> отформатирован шрифтом определенного начертания, раз

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

свойство. Два других унаследованы от тегов-предков

<body>

и <р>.

Теперь предположим, что внутри абзаца имеется тег <strong>. Какого цвета в нем будет текст? Тега

<body>

или <р>? Ответ прост: цвета абзаца. Браузер применит

стиль, который является самым близким по отношению к рассматриваемому тегу.

В данном примере любые свойства, унаследованные от <body>, являются скорее общими. С одной стороны, они относятся ко всем тегам веб-страницы, при условии отсутствия других. Однако стиль <р> более близок к

и, можно сказать,

находится по соседству с ним. Стилевые свойства <р> применяются непосредствен

но к вложенным тегам абзаца. По сути, если тег не имеет собственного, явно определенного стиля, то при воз никновении конфликтов с· унаследованными свойствами одержат победу самые близкие теги-предки (рис.

5.2). 5.2 тег <em> наследует начертание и цвет от <body> и от <р>. Однако стили <р> имеют различные типы шрифтов и цвет, тег <em> в конечном счете ис

На рис.

<body>

пользует те шрифт и цвет, которые определены ближайшим тегом-предком- <р>. Когда стиль относится непосредственно к тегу, браузер применяет его и игнориру ет свойства конфликтующих наследуемых стилей.

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

<td>,

<tab 1е>,

то теги, заключенные в ячейки

109 TheCasc<~de

•

1:\ ~ i ('j·: r.: ~ н:~ ~ l1 t" (t·~ :·. ·. -1~~ : ~1 ::,

•

.~ !H l t.:til } : :'i i ЧH ~:~t · !~; ·(~\

: := Р1к.

5.1. Брауэеры

оnределяют, какие свойства nрименять

в случае возникновения конфликтов с наследуемыми стилями

данной таблицы ( <td>), - теги абзаца, заголовка, маркированного списка

уна

сл~дуют цвет стиля <td>, поскольку он является самым близким родительским тегом-преДком.

Преимущесrва непосредственно применеиного стиnя Единственный стиль, обладающий наивысшим приоритетом, является самым

близким предком в •генеалогическом~ дереве CSS. Это тот стиль, который напря мую применен к тегу. Предположим, что цвет шрифта устанавливается для <body>, <р> и <strong>. Стиль абзаца <р> является определенным по отношению к <body>, но

<strong> еще более конкретный, чем все остальные. Он форматирует только теги <st rong>, отменяя любые конфликтующие свойства, унаследованные от других тегов (см. рис.

5.2). Другими словами, свойства стиля, явно определенного для тега,

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

ссылки <а>. Таким образом, унаследованный цвет текста не будет применен. ПРИМ~НИЕ------------------------------------------------

том,·как обойти естроенные теговые стмли брауэера для тега <а> и установить желаемый стиль

для пtnерссылок, я расскажу в гл.

110

Глава

Управление сложной структурой стилей: каскадносrь

Множество стилей для одного тега Наследование

один из способов форматирования несколькими стилями. Одна

ко можно определить много стилей, которые будут применены непосредственно. Рассмотрим такой случай: у нас имеется прикрепленная к неб-странице внешняя т~блица стилей с тегом <р>. В ней есть внутренняя таблица, которая также содер жит определение <р>. К одному из этих тегов применен еще один стилевой класс.

Так, для одного тега абзаца <р> непосредственно определено три различных явных форматирующих стиля. Какой из них должен использовать браузер? Все зависит от множества факторов

типов стилей, порядка, в котором они

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

О К тегу одновременно применен стиль с селектором и стилевой класс. Напри мер, для тега

<h2> это .l eadHeadl ine. НТМL-код имеет вид: <h2 cl ass="l eadHeadl ine">Your Future Reveal ed! </h2>. К <h2> будут применены оба стиля.

ПРИМЕЧАНИЕ----------------------------------------------- Описание того, что произойдет в случае конфликта стилей, следует далее.

О Одинаковое название стиля встречается в таблице несколько раз. Это может быть групповой селектор (см. разд. «Стилизаци~ групп тегов~ гл.

3). Например, .l eadHeadl i ne, . secondaryHeadl i ne, . newsHeadl i ne и стилевой класс .l eadHeadl i ne в той же таблице. Форматирование элемента leadHeadl ine будет определяты:я обоими стилями.

О К тегу одновременно применены стилевой класс и ID-стиль. Это может быть !О-селектор

cl ass="news">.

#banner и класс .news. НТМL-код имеет К <di v> будут применены оба стиля.

вид:

<div id="banner"

О С веб-страницей связано несколько таблиц, и в каждой из них содержится

ОДIПiаковое название стиля. Такие имена могут быть присоединены к неб-стра нице правилом @import посредством связывания с внешней таблицей Или путем непосредственного включения внутренней.

О Единственный тег неб-страницы может быть объектом воздействия сложных селекторов. Это обычная ситуация, когда вы используете производные селек торы (см. разд. «Селекторы классов: точное управление~ гл.

3). Допустим, на неб-странице имеется тег <di v> (например: <di v id="mainContent ">)и внутри его заключен абзац со стилевым классом: <р cl ass="byl i ne">. Здесь будут примене ны следующие селекторы:

•

#mainContent

р;

• #mainContent .byline; •

p.byl ine;

•

.byline.

111

Особенности механизма каскадности: какие стили имеют преимущества

Если к конкретному элементу веб-страницы применено несколько стилей, то

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

почты. НТМL-код может выглядеть следующим образом: <р

class="byline">Written Graine de Pomme</a></p>

Ьу <а

href="mailto:jean@cosmofarmer.com">Jean

Между тем в таблице стилей веб-страницы есть три стиля для форматирования гиперссылки:

{ color: #6378df: } { font-weight: bold } .byline а { text-decoration:

р а

nопе:

}

Первый стиль окрашивает элемент тега <а> в зеленовато-голубой цвет; второй стиль форматирует все <а>, находящиеся в <р>, полужирным шрифтом; а третий

стиль убирает подчеркивание ссылок, вложенных в элементы, принадлежащие стилевому классу Ьу l i

ne.

Воздействие всех трех стилей распространяется на такой часто используемый тег, как <а>. Ни одно из свойств этих стилей не конфликтует с остальными. Ситуа

ция похожа на случай, рассмотренный выше, в подразделе «Объединение унас ледованных стилей~: стили объединяются между собой и образуют один ком

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

lРИМЕЧАНИЕ----------------------------------------------- Имейте в виду, что на стиль форматирования этой ссылки также могут влиять переданные свой ства. Например, может быть унаследовано начертание шрифта абзаца. Лучше понять работу меха низма каскадности вам помогут несколько инструментов, описанных во врезке «Часто задаваемые вопросы» ниже.

Особенности механИзма каскадности: какие стили имеют преимущества Предыдущий пример слишком прост. Но что получится, если каждый из трех сти лей, приведеиных выше, имеет свое определение начертания в свойстве

font- fami l у?

Какой из них выберет браузер? Если вы внимательно читали книгу, то помните, что механизм каскадмости

устанавливает несколько правил. Побеждают (имеют преи.мущество) свойства

самого близкого по отношению к стилизуемому элементу, самого явно определенно го стиля. Однако, как и в примере со стилями, не совсем понятно, какой из них

является наиболее определенным. К счастью,

CSS предлагает метод определения

приоритетов. Он основан на присвоении значений в условных единицах ( пунктах)

112

Глава 5. Управление сложной структурой стилей: каскадносrь

каждому типу стилевых селекторов: тегов, классов, ID-селекторам и т. д. Система

работает так. О Селектор тегов имеет значимость О Селектор классов О ID-селектор-

О Встроенный

1 пункт.

- 1О пунктов.

100.

(inline) стиль- 1000.

ПРИМЕЧАНИЕ----------------------------------------------- Математические расчеты, используемые для определения приоритетов на самом деле немного

более сложные. Но эта формула работает во всех случаях, кроме самых странных и запутанных. Чтобы узнать о том, как брауэеры рассчитывают приоритеты, посетите страницу www.wЗ.org/ТR/

CSS21/cascade.html#specificity.

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

<i mg>

(значимость

= 1);

.highlight (значимость= 10);

О ID-стиль#lоgо (значимость=

100).

Неб-страницасодержитследующий НТМL-код: <img

src="logo.gif"

id="logo" class="highl ight"

/>.Если определить одинаковый атрибут во всех трех стилях (на

пример, рамка border ), то будет применено значение атрибута ID-стиля (#1 ogo ), как

наиболее значимого. ПРИМЕЧАНИЕ----------------------------------------------- Псевдоэлемент (например,

:first-child) обрабатывается браузером как теговый селектор и имеет

значимость 1 пункт. Псевдокласс (например, :liпk) рассматривается как класс и имеет значимость

пунктов (см. раэд. «Псевдоклассы и псевдоэлементы» гл.

3).

Поскольку производные селекторы состоят из нескольких простых- напри

мер,

content

р или

определить их значимость сложнее: необходимо

h2 strong, -

найти суммарное значение их приоритетов (табл.

5.1).

Табпица 5.1. Когда к единственному тегу применяется несколько стилей, брауэер должен определить, какой из них будет применен в случае возникновения конфликта Ceneкrop

Идентификатор

Кnасс

Ter

Итоrо

.byline p.byline #banner #banner

1 1

#Ьanner

.byline

1 10 11 100 101 110 11 2 2 221

a:link p:first-line h2 strong #wrapper #content .byline a:hover

1 1 1

1 о

1 1

1 2 2 1

113

J:Dбенности механизма каскадности: какие стили имеют nреимущества

~АНИЕ------------------------------------------------- -.аспедуемые свойства вообще лишены такого покаэателя, как значимость. Так, даже если тег ·~ует, например, селектор #Ьanner, то эти свойства в любом случае будут заменены теми, что ~ственно относятся к этому тегу.

Разрешение конфликтов: побеждает последний стиль. Два стиля могут иметь

: .1ннаковый приоритет.

Конфликт значимостей может произо.йти в случае двой

;;оrо определения одинаковых селекторов. У вас может быть селектор тега. <р> во знутренней таблице и такой же во внешней. Или два различных стиля могут иметь

::..1Инаковый приоритет. В таком случае более значимым будет последний опреде .1енный стиль таблицы. Вот пример НТМL-кода.

class~"byline " >Written Ьу <а cl ass="email" 1ref="mai lto: jean@cosmofarmer. com">Jean Grai.ne de Porrrne</a></p>

В таблице для веб-страницы, содержашей вышеприведенные абзац и гипер-

:сылку; у вас будет два стиля:

: .email { color: blue: } Jyline а { color: red ; } Оба стиля имеют значимость, равную

11 ( 1О -

для названия класса и

для

селектора тега), и относятся к <а>. Конфликт этих стилей очевиден. Какой цвет

выберет браузер для окрашивания rиперссылки в приведеином абзаце? Красный, так как он последний в таблице стилей. • ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ

Инструменты дпя обnеrченмя работы Может возникнуть вопрос не существует ли какого

php? appllcation=firefox&id=б97). Оно nозволяет

нибудь 8(ЛОМогатепьного средство, чтобы предсто

nросмотреть, какие стили применены к оnределен

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

ному элементу веб-страницы (однако не показывает

механизмом коскодности на конечный дизайн веб

наследуемые стили).

строницы? И наконец, есть браузер от Apple -

Safaгi, который

Есть несколько инструментов, которые могу; на

исnользуют как для Мае, так м для Windows. Встро·

глядно изобразить каскадность. Проrраммный nакет

енное средство nод 11азванием Web

Dгeamweaver (www.adoЬe.com) имеет удобную nа

лизатор) nредоставляет nолнейшую информацию

lnspector (Ана

CSS. Одного взгляда достаточно, чтобы увидеть

о веб-странице, ее СSS-стилях, влиянии механизма

)ффект воздействия данного механизма на nроиз

касt<адности на теги. Вам нужно лишь установить

вольно выбранный элемент веб-<Траницы. Другими

флажок

словами, вы моментально получаете подробнейший

нутое меню) на вкладке дdvanced (Доnолнитель

нель

Show Develop Menu (Показывать развер

сnисок применеиных к конкретмому элементу свойств

но) окна Preferences (Параметры). Более nодроб

стилей. Для этих целей также nодойдет бесnлатное

ную информацию об исnользовании

расширение браузера Firefox-View formatted Source

можно найти

(https://addons.mozilla.org/extensions/moreinfo.

lnspector.

Web lnspectoг no адресу http://tinyurl.com/web-

114

Глава

5. Уnрё!вление сложной

структурой стилей: каскадность

Теперь представьте, что таблица стилей имеет следующий вид: р

.email { color: Ыuе: } .byl ine а { color: red: } В данном случае гиперссылка была бы красного цвета. Стиль с селектором

. Ьу l i ne а расположен в таблице после р . ema; l , поэтому его свойства имеют пре имущества.

Теперь рассмотрим, что про изойдет, если имеются конфликтующие стили (или

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

HTML,

используя

2), а только затем <l i nk>, то будет при

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

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

<style>.

и внутренних таблицах стилей см. гл.

@import,

должны находиться до

Для получения доnолнительной информации о внешних

БРИЛЛИАНТ БЕЗ ОГРАНКИ

Отмена правил значимости

CSS предоставляет возможность полностью отменить

ведеином примере все ссылки веб-страницы, в том

значимость стилей. Вы можете использовать 3Тот при

числе вложенные с идентификатором

ем, чтобы никакой другой более значимый стиль не

отображены зеленовато-голубым цветом.

#nav, будут

отменил конкретное свойство 3лемента веб-страницы. Просто вставьте nосле него значение! 1mportant.

Обратите внимание, что вы nрименяете !1mportant к отдельному свойству, а не ко всему стилю.

Рассмотрим nример. У нас есть два стиля:

#nav а

{ color: red: } { color: tea1 !1mportant: }

В заключение нужно с1<азать: когда для двух одинако вых свойст11 различных стилей указано ! important, оnять встуnает в силу nравило значимости и nри

При обычном раскладе ссылка, вложенная в элемент

оритет имеет более значимый атрибут из отмечен

с идентификатором #nav, была бы окрашена в крас

ных.

ный цвет, так как стиль, оnределенный селектором

#nav t

а, более значимый, чем <а>. Однако добавление

1mportant nодразумевает, что данное свойство все

гда будет иметь больший nриоритет. Так, в вышеnри-

Браузер

lnternet Explorer 6 не всегда nравильно обра

батывает свойства с

!i mportant, а иногда полностью

их игнорирует.

Управпение каскадносты~ Как вы могли заметить, чем больше СSS -стилей создано, тем больше вероятность запутаться в них. Например, можно создать стилевой к,ласс, устанавливающий для

115

Управление каскадностыо

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

вы абсолютно уверены в конечном результате, все равно может существовать стиль

с большей значимостью.

Есть несколько вариантов решения этой проблемы . Во-первых, можно исполь зовать ! important (как описано в выделенном блоке выше)', чтобы гарантировать применение конкретного свойства. Этот способ не совсем удобен, так как трудно предугадать, что вы не ~ах отите отменить такую значИмость свойства. Рассмотрим два других метода управления каскадностью.

Изменение значимости На рис. 5.3 приведем пример, когда- определенный стиль тега проигрывает в кас кадной игре. Здесь два стиля форматируют первый абзац. Стилевой класс

. i ntro

нестользначимый,как#s idеЬа г р. Таким образом, свойства . intго небудутприме

нены к абзацу . Чтобы увеличить значимость, добавьте к стилю идентификатор

#sidebar . i ntro. На рис . 5.3 абзац

размещен внутри тега

<div> с идентификатором #sidebar. #sidebar р является более значимым по сравнению со стилевым классом . intro (соотношение значимостей- 101 к 10). Вывод: необходимо придать . i ntro большую значимость, добавив перед ним иден тификатор, как на рис. 5.4: #sidebar р. intro. Таким образом, производный селектор

#sidebar р { tont-family: Verdana; font-size: .9em; }

Just Say No То ВаmЬоо Lorem ipsum dolor sit amet, consectetuer adip1sang el1t, sed diam nonummy nibh euiSmod tlncldunt ut laoreet dolore magna altquam erat volutpat. Ut w!sl enlm ad minim ven1am, qшs nostrud exerd tation ullamcorper Lorem ipsum dolor s1t amet, consectetuer adlptscюg eiJt, sed dlam nonummy n1bh euismod tinddunt ut laoreet dolore magna aliquam erat volutpat. Ut WISI emm ad minlm veniam, quls nostrud exerd t.ation ullamcorper

p.lntro { font-family: Georgia; font-size: 1.25em; }

<dlv <р

ld="sldeЬar">

claas="lntro" >

</dlv>

Рмс. 5.3. Даже если к оnределенному тегу nри·менен стилевой класс,

ero свойства не всеrда имеют эффект

116

Глава

S. Уnравление сложной

структурой c:rилeti: каскадносn.

.sldeb8Г р

{ font-famity: Verdana; font-size: .9em; }

Just Say No То ВаmЬоо Lcrem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper Lorem ipsum dolor sit amet. consectetuer adlpisclng eRt, sed dlam nonummy nlbh eutsmod t:Jneldunt ut laoreet dolore magna alquam erat volutpat. Ut wtsj entm ad mlnlm

••kleЬ•r

p.lntro {

font·family: Georgia; font·s.lze: 1.25em; )

<dlv <р

ld="sld.Ь.r"':

cl•u= "lntro" >

</dlv>

~мс.

5.4. Можно

nридать большую значимость стилевому классу,

добавив nеред ним идентификатор

Выборочная отмена эначимосrи Можно точно nроработать дизайн веб·страниц, выборочно отменяя стили. Пред положим, вы создали внешнюю таблицу и назвали ее global.css, связав со всеми страницами сайта.

Этот СSS-файл содержит общие определениЯ стилей дизайна страниц: шрифт и цвет для тегов заголовков <hl>, стиль элементов форм и т. д. Возможно, вЫ хоти· те, чтобы на главной (домашней) странице <hl> выглядел отлично от того, как он отображен на остальных. Например, был выделен крупным полужирным шриф·

том илИ шрифтом меньшего размера, чтобы вместить больший объем информа· ции. Другими словами, вы все еще хотите использовать большинство стилей фай· ла

g l оЬа l . css, но необходимо отменить несколько; атрибутов отдельных тегов

(<hl>, <р> и т. д.) . Один из способов заключается в простом создании внутренней таблицы, содер· жащей стили, которые вы хотите отменить и переопределить. Предположим, в фай· ле global.css имеется следующий стиль:

hl {

font-family : Arial. Helvetica. sans-serif: font-s i ze: 24рх: color: #000:

117

начинаем с чисrоrо лисrа

Вы хотите, чтобы заголовок <hl> главной веб-страницы был отображен крупным

шрифтом красного цвета. Просто добавьте во внутреннюю таблицу следующий стиль:

{

font-size: Збрх; color: red: В данном случае к тегу

.\rial (из

<hl> главной страницы сайта будет применен шрифт

внешней таблицы стилей), но в то же время он будет окрашен в красный

цвет размером

36 пикселов

(определенные во внутренней).

------------------------------------------------------

~ Убедитесь, что вы присоединяете внешнюю таблицу сrиЛей перед внутренней в разделе НТМL-эа головка

<head>.

Это гарантирует, что нужные сrили будут иметь преимущества в тех случаях,

осогда значимосrь одинаковая.

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

home. css, которую нужно будет присоединить к главной веб-странице в до global.css. Файл home.css будетсодержать те стили global .css, которые вы хотите переопределить. Для правильной работыфайл home.css должен быть присоединен после global.css в НТМL-коде главной веб-страницы: полнение к

------------------------------------------------------

Еще один способ выполнить точную посrраничную сrилиэацию веб-сrраниц основан на использо вании различных идентификаторов для тега <Ьоdу> веб-сrраниц разного содержания. Например,

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

#home, гл. 9.

#review, #story,

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

Начинаем с чистого листа Как было сказано ранее, браузеры применяют к тегам свои собственные стили: например, теги

<hl> больше тегов <h2>, они оба выделены полужирным, в то время

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

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

Safari и Firefox для создания отступа в маркированных списках paddi ng, а Internet Explorer применяет свойство margi n. Кроме

используют свойство

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

и обнаружить вовсе вводящее в заблуждение использование отступов самыми рас пространенными на сегодняшний день браузерами. Из-за этих несоответствий вы

118

Глава

Управление сложной структурой стилей: каскадность

столкнетесь с проблемами, когда, например, края, а

Firefox добавит отступ от верхнего Internet Explorer этого не сделает. Такого рода проблемы не ваша вина - они

вытекают из различий во встроенных в браузер стилях. Для предотвращения кроссбраузерного несоответствия лучше всего начинать

таблицу стилей с чистого листа. Другими словами, удалить встроенное в браузер форматирование и добавить свое собственное. Концепция устранения стилей брау зера называется сбросом стандартных стWtей

( CSS -сбросом). В этом разделе я вве

ду вас в суть дела.

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

html. body. hl. h2. hЗ. h4. h5. hб. р. ol. ul. li. pre. code. address. variaЫe. form. fieldset. Ыockquote { padding: 0: margin: 0: font-size: 100%: font-weight: normal: }

ol { margin-left: 1.4em: list-style: decimal: }

ul { margin- left: 1.4em: list-style:square: } img {

border:

О:

Первый стиль

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

распространенные теги и обнуляющий их. Он удаляет поля и отступы, устанав ливая 100%-ный размер шрифта и убирая выделения полужирным. Благодаря этому шагу ваши теги смотрятся практически одинаково (рис. но

5.5).

Но так и нуж

ведь вы хотите начать с чистого листа, а затем добавить собственное форма

тирование, чтобы все браузеры согласованно отображали ваш НТМL-код. ПРИМЕЧАНИЕ-------------------------------------------------

вам не нужно вводить этот код самостоятельно. Вы найдете файл с именем reset.css в папке 05 www.sawmac.com/css2e, где есть базовый файл для сброса стан дартных стилей. Просто скопируйте стили из этого файла и вставьте их в свои собственные табли цы стилей. Более комплексный сброс стандартных стилей CSS (будет обсуждаться далее в этой обучающих материалов с сайта

книге) доступен внутри папки

обучающих материалов для гл.

Второй и третий стили (для тегов

<ol>

<ul>)

15.

устанавливают согласованные

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

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

119

~ющий урок: механизм каскадности в дейсrвии

Обучающий урок: механизм каскадности ..,

•

деиствин 3

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

: обой и конфликтуют, что приводит к неожиданным результатам. Для начала по :wотрите на базовую страницу, упомянутую в ыше, на которой были сброшены :тандартные стили. Кроме того, есть несколько других стилей, обеспечивающих -: ;юстую разметку. Затем мы создадим два стиля и понаблюдаем за действием ме uнизма каскадности. Мы также рассмотрим, как наследование влияет на теги веб

:-:-раницы и как браузер решает конфликты СSS-стилей. Наконец, вы узнаете, как :о::шаются проблемы механизма каскадности. Чтобы начать обучающий урок, вы должны загрузить файлы с уч ебн ы м мате ~· ilа.'!ом . Как это сделать, оnисывается в конце гл. 2. Файл ы текущей обучающей -:рограммы находятся в nапке

05.

Сброс стандартных стилей и создание стилей с чистого листа J.1я начала посмотрите на ту страницу, с которой будете работать. В браузере откройте страницу cascade. htm 1 из nапки

05 (см . рис. 5.5).

Страница выглядит очень просто: два столбца (один из них имеет синий фон) и много однотипного текста. К этому файлу уже применялись некоторые стили, поэтому откройте СSS-код в текстовом редакторе и просмотрите его. ~css.n..~- тt..с.....м

-"""''"*""""""""'

O.Q:.L:i) Z:\O}_wreing\OO_o\..fJ'otrt.J~_MoшWIS\uscNt,himl

-:r·-

l fl c.s.п.....,_ ......., ....... c-....

р -~

SS·The ~wq м.-1 <d,. pcrspicioёs

dolor-

ande""""' ;".

oatus ertO< Ut '~ occosontiuo> lotam raa ~ eaque ips.a qoac аЬ lo ~orc ,.aQris. ее quasi wfbltu.to .....,,;,.. ditu- Щ>ik.ЬО. Nemo ..." ;ps- '~ <PJio '-olupW sit ._,..." ... w &l8t. sed ~с- map clolorcs <os qua.- >-oluptat.,. ..q.i~

emlp..."Dolo<Soc 18 pcrspicioёs uode ocмis &с ...,. t:nor Ut v..._.., ocCU<IOiium doloRoaque ' tс:Цо:~ rem ~е~~ qwte аЬ ilo iu\•c:otore YefUris d ~ archit«10

...,.dac 6ш .... ..рiсоЬо Nemo ..,;р..,. YOioplll<~~~cpa ~ ,....,...._ щ · .,. Nai<. scd qiU ~ ..... dolo«> eos qoi.....,.. ~""' ..qW o<sWnt

""""""""

.... "'dolor="""" <PJio

od......,,........_

dolor ....... ( ............. odipisci-.

18laЬor< c~o~or."._~

. . ._ _. ..,.,

""" - l.:т.., - " " ' modi - - . , . .d. - _ _ cotp<Xis susdp< CjW oo<INm . .. ..

ni1i ,._ aliqoid"' •• COIIIDIOCii .-е~ Q.n .,..." •1:1 <11111 iu<c reprd>eodcril \'\Щ>IIIC\""

....

_.ы_

""clolorcn>...., NFI

\-olupW ..... ".n.n.'1 ut pmpiciaьs ur:.ck ~ istc NdUS aror ~ '~ ~ dolormщue tou.:n rеш aperiem, eaque ips.a ~ ..Ь ilo 81\'mt:<n. ~ d quasi arcЬit:ecto .Ь0 cidaNSЩ>ik.ЬO. NeoJO . . . _.."......,.,.q\8&,-oNprasJit_.,.""' · w !Qcjl. sed qula .-.q~UW< . _ ; dolorcs cos q1a rоЬоое '~"" sc.P ~

eq>~< pooro ~ «~. qw clolorearipsшl qula dolor"' ...er. cooscc.-. odipisa '..а. qiJia оса..__.;". modi r.._.ID<i<ЬII18 lаЬо<с et с!сЖ><е . , . _ oliqoam quoen11 mt.

Ua Clim .!d ~ '-ailra. ,ps оояn.о ex.erc:itJdooeoa аЬт cOf'J)Oris юscipic

мm. aisiuteiquid. а

aCCIO'IIJ:IOdi сооsеqоцж1 Quis 8W:m\'Cl ewuaerqжМe:odel:it

'lnea'~'""esS<<!"'""noЬiiDOiestiooc~. ,-diiЬncpclolorcmcumfi>a>3t

SOkЬor

Sedut~uock""""'lsr•nao» атоr ~ ~em ac:CUSIDI:U.a ,_,..,. _ _dolacmque _ .". laudooaц

quae.Ь lo .,......."._..._ .. an:lil«01> ь.- -ье dicllяn Щ>licll>o.

N._ . . . .....,,.....,._ qa;a ".,q,w ... ._"."., .... odit . . !Qcjl. sed qaia c~mapidolof~s eos qui~

...~ .... ""dolor=

·~sc<P.....a.nt. N-porтo ips1D quia dolor

adiploci-. sed qo;. .... -

....

IIIOd! , . _ . i>ci<ЬII •laЬore ci clolore

_..,'*'""'..,.. ... od...."........, qgi>-tiqwm

cxac:iьoioncm- corporis lioЬoncкom.

susciJ>i1

aisi .. aiqo8d .... COIIIDIOCii

<---'~

.......... ...,. ...

... quo.....,...-

reprcЬcaclc:rtqui;. са ~velit

cssc

_.ы......-qui .... - fusiot poriotw?

voloplai- poriotw? ' Utд!;qoid

d ut ос~~ QII:2DS istt nасш mor,;; vo1taocatem ~ cioЬ-eJDC~Ue Рмс.

5.5. Базовый сброс

стандартных стилей на этой странице устраняет небоnьшие раэnичия

в том, как раэные брауэеры отображают основные теги

HTML

120 2.

Глава

Откройте файл

Управление•сnожной сrруктурой стилей: каскадность

ma i n . cs s из папки 05 в текстовом ~дакторе либо редакторе веб

страниц.

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

Последние два стиля- ID-стили рые вы видели на рис.

#main

#sidebar-

создают два столбца, кото

5.5. HTML разделен на два тега <di v>, каждый из которых .

имеет свой собственный идентификатор. ID-стили Здесь, по существу, разме

щают два тега <di v> так, чтобы они отображались бок о бок в виде столбцов (как именно работают ID-стили, вы узнаете, когда ближе познакомитесь с разметкой

CSS, начиная с гл. 10.) Сначала вы добавите пару стилей, чтобы улучшить общий вид страницы и ее верхний заголовок.

В файле

main.css

добавьте два этих стиля в нижней части таблицы стилей за

последней скобкой} стиля

#sidebar:

body { color: #В1967С: font-family: "Palatino Linotype". Baskerville. serif: padding-top: lOOpx: background: #CDEбFF url(images/bg_body.png) repeat-x: width: 800рх: margin: О auto: } hl { font-size: Зеm: font-family: "Arial Black". Arial. sans-serif: Пер~ый стиль добавляет фоновое изображение и цвет для страницы, а также устанавливает для нее фиксированную шИрину. Сохранив этот файл и просмот

рев страницу

cascade. html

в браузере (рис.

не наследуются другими тегами

5.6),

вы заметите, что эти атрибуты

то же изображение, например, не повторяет

ся перед тегами заголовка или абзаца. Свойства font- fami

ly и со 1or, с другой стороны, наследуются, так что другие теги

на странице теперь используют шрифт

Arial и имеют коричJ{евый цвет. Тем не

менее вы увидите, что, хоть верхний заголовок tакого же цвета, как и остальной

текст на странице, у него другой шрифт

в действии. Для стиля тега

<hl>

вот наглядный пр~;~мер каскадмости

не было назначено никакого цвета, так что

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

<body>.

Но, поскольку пiг <h 1> определяет на<rертание, он замещает унаследованный шрифт от стиля тега

<body>.

121

()бучаiОЩМЙ урок: механИЗм каскадности в действии

Missing Manual

Sc:d vt ~ undc 00.011wc aana Cl1"Qt Rt '~ acaua.nuwь ~ 1.tьda.aciu:m.toeam n:m aprcria.m. иq~ ipu.quac aЬiho.in\<a~.IDr'r:~ctquu[ """"- Ь.........,. diaa IUnt ccplicaЬo..Kcmo mL<nipoom wlup"""" quia volupwo tiJ upcmiiW' aut odit :щt fusiJ, ..d qШа COМt"quuntur magai dolon:s а. q\obl n.doac ~ ooquloadwu. LomD ~ DalotS..

SidcЬor

Scd ut pcnpiciolls undc аьш11 й оаtш enor Ш ~-6\m\ dalamьquc loudoodum,

toCam tctD ~periato , ""JU< ip<a qua< .Ь o1Jo

Sa!Oipenf>iclaШUnde -.ailo< ........... tlt~m-=-<nqU<

1.tьda.aciu:m. -.ь n:m ..,..W.. caque opooqшr. .Ь g1o """""""' ..r...U.ct '!"""i м::Ь.i1ес1о Ъеа1ае , . dla.&amtcxplitaЬo. Ncmo ~i.m1puu:n \dV.pur.t:&n qloriA ,'OL,jpt.:u tit ~ aul ocit IWt fiiR!~ tod quiA CONCqJПUIIII1 . . . . dolcro"" qщndaoe .........,_. t<qul ocadalnL N"'''"' pam><Jwoqu&ll\..., quнlalot= ipмn qWo. clol«,. --adlpoci..Ш,todqul&noa.._.- '''" mоФ !m>pan iocidum" 1.аЬсм. ~ dolore ~ ~ qoaend voluptШМ. t,t crwn td 11\inima '<nilil!l, quц IIC*.'Nm ~u.ciont.:N ullam c:orpom IWCipi.t ц.ьо..;с..t11, rtW \1.\ oltquid сх С":а COO'ШWdi _ ...~ Ql>io _..,...а eumi""' tq)ld>cnden< qШ ln са У<>l~~р~Щ \d4-qnam DJhll ~""- qui cloloor="""' щ;.. quo voluptu- pariatU<? Scd ..ptnpod.a. Ш>d< _". iде ............ ,;, ~ ..........wum <~а~о...,..,. ~ cown rrm ap:rialь.. oque .-quu аЬ mu ~ ,fflaril ft.quui Ьцск-- dic<a .... ccplicaЬo..- ....".. ipaun wlupW ... ..,..,............ odU ""'fugi~ ""'qu!a "'""''~"'''""'""C"i- ""'~"' wltq>aиm 1101\'d ...a.uv..Ncque pom:oquUquoм "'· quldolot<m ~ qцUdolo< .;,

""*"*

Рмс.

Uwt.t\tore~dquмl м:bli<CIOЬ.......;".,

dlct. , _ <>tplkaЬo. -.-~ >'OIII]>Utcn\ quiA wlupw lit. uptn~~Wt aut odit .ut rug;.....rqц;. ~Nt~

tlolara. tQS qoi nJionc Yalu-ooqo.i

>'01--

.. . .. -

.. .

nе:с:Ми.

........

Nc:que pono

~Wqown Qt, qui

-ipouцl'f"•tlolor

iodduntut

- + - - . . . . . - ....... ~-

5.6. наследование и каскадность в действии: тег <h 1 > вверху этой страницы

наследует ее wрифт иэ стиля теrа <Ьоdу>, но nолучает раэмер к начертание wрифта

иэ специального стиля тега

<h 1>

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

более явно определенный

стиль - будет реформатироват~ (повторно форматировать) те самые заголовки, но только. из большеrо, главного столбца веб-страницы.

1. В файле ma i ri.css добавьте следующий стиль в конец таблицы стилей: h2 {

font-size: 2 .2em; со1or : #АFСЗDб: margin-bottom: 5рх ; Этот стиль просто меняет цвет текста, увеличивает размер шрифта тега

<h2> и добавляет немного пространства под ним. Если вы просмотрите страницу в браузере, то увидите, что заголовки <h2> из основного столбца и те же заголов ки из nравого столбца похожи друг на друга.

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

2. Вернитесь в свой редактор к файлу ma i n.css, щеЛкните кнопкой мыши сразу после окончания стиля теrа <h2> инажмите клавишу Enter, чтобы создать пустую строку. Добавьте с.Ле~ющий стиль: · ·

122

Глава

Уnравление сложной структурой стилей: каскадность

#main h2 { color: #Е8АО64: border-bottom: 2рх white solid: background: url(images/bullet flower.png) no-repeat: padding: О О 2рх 80рх: Вы только что создали наследуемый селектор, описанный ранее в книге, фор матирующий все теги <h2>, которые появляются внутри тега с идентификатором #ma; n. Два столбца текста на этой странице заключаются в теги <di v> с разными названиями идентификаторов, которые применялись к ним. У большего, рас

положенного слева столбца идентификатор #main, поэтому такой особый стиль будет применяться только к тегам <h2> внутри этого <div>. · Рассматриваемый стиль похож на тот, который вы создали в обучающем при

мере в гл.

2, в шаге 14. Он добавляет подчеркивание и простой цветок к заголов

ку. Этот стиль также определяет оранжевый цвет для текста.

3. Снова просмотрите страницу в браузере (рис. 5.7). Вы заметите, что у всех заголовков второго уровня (двух в основном столбце

и одном в боковом) одинаковый размер, но у тех двух, которые расположены

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

CSS: The Missing Manual Stdutpt'Н?IOAf.lt'-11*01N\IIIIS»'t\.\~tf1atlkt\'Oh'J)U'4Q\~11\

doSoi'IC'.qu:t' l.a:ud.!nhщ1 tllt~m t..m .3?""-!W. r-UJU~ ~ qu.a.. ,:;Q Шо ~Ptrn:on \mtt::u.C:quastlrchitodoЬu~'"""' dJd:iiVJ'I•o.y-lк.aЬo :r-.::fn\ot'!I\I.Jt\1J'fЩ\

\"1)hJpt.t';tr1n quu

,,.pt.IJ «t .dpl'f'IWW 2Ut odit l.ut iug1t- ...d

"t~tl): c~.шntw'

0'\lfJ' dckц:e; too, qw пьоnе \'Qka.fU:tнn ~ nttCNnt.

Lorem lpsum Dolol" Sat St4 u.: pt-.:t-pюatu ~ OlltЛIIII!t: :ыtufi ~or llit'-~f1•km ..;cцaМ1tl\IJJ;L .:$~• Ьш!а\t:Nщ.

:~m

r•m ~ oquto tpW ~ 3bi:IIOI:n\'JI(1tont

\"Н'i~ at чuu "rd'\d!Кto Ъоы ·~ \'tla. dJ...~ 5оо.! ~ьо. >.:tmO ~ 1.p'_oUS\

..~pt.ttlltnqwA "'Oiu~.ь tu ~~•ut o.lit .au: tup:.. 8J qw.4COJ\t.eq\I:!!UUt tt~Apdoion:it t.Aq'W r;ei-XJC)f'"*.apta~""'t<Щ\U N<Юunt ~tq'Ut! poNQqwsGu.tlnf'tt.

doЬ.m~cr:u;;.dciot'~Ш"~tox.~ •d..-po.«~·~,t.н.1q~I\Citt.

nu:nqu&m ~ ~ tnnpor:a IU1d~.t ut 1iЬо:-е с\ ddott :nu.g.n.tm Щu•m qu.:st"f'St

\"9hapt..lin'O. t:tenw ~"t

;Wr,ur".ш~'~qш;oOsиuJO\•Q!t~J\uhm~

~JWМn ~ut..ьqШde,.~Фxr.~~~tut"Qvblnlta'I''C:lcum

A<tt"fU~t".Nqщan.-.;\"'l:..pW.\...tt*fИq\1..1Ф1-an.l!t'tCiм.~~\l\'.t-el

....

t!ttm\ qw. dOkctt-m eu.m lugu.r quo '~.as n\..!1.1. p•ru.tur

Sed ""~""'~""-'"" undA! 00\tU ht• natu.•

tf'(W.

\'O!;.:tptatena~

d.~u.~~dan:ь.\J.O\o tщт ~ aptfi.w\.

--qШt•bil!o im~t~.c

qulo5i •n:h:!kto ь..uа~ VJ.tм dkta .tw'lt e>.-pli(.11)o.. '!"o:tmOfC'IiC\

:pwm \'Oiuptoa.tt'O\ q~,Ы. \"'Npt.u t1t upt.m.alw .щ!od>twt~·S::....S qw.o<x>nиquun!w

1N.fJV ~ .otqui

~I.J: p..Js~~ш<okw з.»JAwnat1.1Jtтr()II0t.'C!Wpt~~~·.щ\

Рмс. 5.7. Стили

h2 и lmain h2 nрименяются

к заголовкам второго уровня из левого столбца этой

страницы, nричем стиль

Поскольку стиль #mai n

lmain h2 - только

к ним

h2 является более специфичным по сравнению с про h2, при возникновении каких-либо конфликтов между ними (в данном случае в свойстве color) свойства #main h2 побеждают. Таким образом , хотя заrостым стилем

123

Обучающий урок: механизм каскадности в действии

.ювки второго уровня в основном столбце получают синий цвет текста от стиля

оранжевый цвет от более специфичного стиля Однако, поскольку стиль

#ma i n h2

h2,

побеждает.

#mai n h2 не задает размер шрифта или нижнего отсту h2.

па, заголовки в главном столбце получают эти свойства от стиля

Преодолеваем конфликты Поскольку свойства

CSS конфликтуют, когда несколько стилей применяются к од

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

Когда это происходит, вам нужно установить, почему это произошло, и внести

изменения в селекторы

CSS, чтобы каскадность приводила к нужному результату. 1. Вернитесь к редактору и файлу main .css. Сейчас вы создадите новый стиль для форматирования исключительно абзацев из главного столбца.

Добавьте следующий стиль в конец таблицы стилей:

#main р { color: #616161: font-family: "Palatino Linotype". Baskerville. serif: font-size: l.lem: line-height: 150%: margin-bottom: lOpx: margin-left: ВОрх: Этот стиль изменяет цвет, размер и шрифт текста, растягивает строки (свой

ство

l ine-height) и регулирует нижние и левые отступы абзацев.

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

Добавьте последний стиль к концу таблицы стилей:

. intro { color: #6А94СС: font-family: Arial. Helvetica. sans-serif; font-size: 1.2em: margin-left: О: margin-bottom: 25рх: Этот стиль изменяет цвет, шрифт и размер, а также немного регулирует отсту пы. Все, что вы должны сделать,

-4.

- применять класс к НТМL-коду. html в редакторе веб-страниц. Найдите тег <р>, который <hl>CSS: The Missing Manual</hl> прямо под <div id = "main">,

Откройте файлсаsсаdе. идет после тега

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

class="intro">

124

Глава

Управление сnожной структурой сrилей: каскадность

5. Просмотрите страницу в браузере. Абзац никак не изменился. Согласно правилам каскадности,

. intro- базовый

селектор класса, а #ma; n р является наследуемым селектором и состоит из иден тификатора и имени тега. Они добавлены для создания более специфичного

стиля, поэтому его свойства стиля решаЮт любой конфликт между ним и сти

лем.

intro.

Для того чтобы заработал стиль . i ntro, необходимо немного •укрепить. его, наделив ero селектор большей значимость~?.

Вернемся к файлу

mai n.css

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

. intro на

#main . intro. Теперь у вас есть наследуемый селектор, составленный из идентификатора

и класса. Этот стиль является более специфичным, чем

#ma i n .р, и его свойства

замещают аналогичные из более общего стиля.

7. Просмотрите страницу в браузере (рис. 5.8). Вуаля! Абзац изменил свой цвет на голубой, его текст стал крупнее, шрифт поменялся, и отсутствует левый отступ. Если бы у вас не было четкого понима ния каскадности, вьгбы ломалИ голову над тем, почему этот стилевой класс не

работал в первый раз.

CSS: The Missing Manual Sed Ul pвrsp1ciaьs unde omnis tste netus error srt voluptatem accusent!um doloremque laudanьum, tolam rem aperiem eeque IРЗО

Sidebar

quae аЬ lllo inventore veritats el quaslerchrtecto Ьеаtае vrtae dic:ta sunt explicebo. Nemo en•m tJ>$Bm voluptatem quia volupms sl\ asperмtur aut odrt eUI fugit.

sed quta consequuntur magn• dolores

eos quj ratone voluptatem sequi nesciunt

tot.un t9m .tped.atд. ..._;pмquu.Ьillo

Lorcm fp..,urn JJ lor Sat Std ut ~Ьs und•om:nis tstkn.atш axw sit \'Otuyt.at.an а~ dolomnque .._ _ - , . . . , . оротщ. · - " " " qu.v .ь iDo -zm.~\~d qu.u.~Ьu.t.u,"J.t.tt-clict&wntetp1iaЬo.

Xano """"ipwn

'I'Oiupf•- quu wluj>las dt aspem>htt aut odit..Ш

~ ..0 Cj\1>& <UNOqUW>tш "'"~~'" d - - qw t>ЬОМ ''Oiцpt>.tom '"'1"' ....ащп. Noque роао CfUU<!U>m..., qw ckllor.m lf"Ш'l quw dolo< .tU\<tt ~~ ~ '<Nrt. ttd qwa non nшnqu.am eu.- modt tecnoao tnadunt cd: J.aЬor. С~ maanam. Uouam ou.urat

Рмс.

:(\\'81\tot.\~~

qu.u>.uc!U-Ьt•tц '"medkt~-l<l.rtt

..'<РJО:аЬо. NOU10ts'oim lp<>.m '-..luptJ.t.n~ '!""'

,'O!upl.. ort uротЦщ &u.t ..S.t>ut fvg1~ ><4 '!""'«W0qUW\Iш

mapdokN"ts-«<JЧui <>fi<>no<"Ь.ptl:ta\ooqW nкcN.nt. ~. . potto

5.8. Даже в простой странице с небоl\ьwим набором стилей внешний вид тегов зачастую является комбинацией свойств различных стилей

В этой и четырех предыдущих главах мы рассмотрели основы

CSS. Теперь,

В ЧаСТИ 2, ПрИШЛО вреМЯ примеНИТЬ полученные ЗНаНИЯ ДЛЯ СОЗданИя НаСТОЯЩИХ полноценных дизайно в.

ЧАСТЬ

Применение

Глава

Форматирование текста

Глава

Поля, отступы, границы

Глава

Добавление графики на веб-страницы

r"naвa

Приводим в порядок навигацию сайта

Глава

1 О.

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

CSS

Форматирование текста

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

клипы, Flаsh-анимацию, но все-таки именно содержательный текстовый материал заставляет их возвращаться на определенные сайты вновь и вновь. Люди жаждут

обновлений в

Facebook, новостей, статей с практическими рекомендациями, рецеп

тов, ответов на актуальные вопросы, полезной информации и новых записей в мик

роблогах Twitter . С помощью языка

CSS вы можете придать такой вид заголовкам

и текстовому содержимому веб-страниц, что они привлекут внимание посетителей не хуже других фотографий.

CSS

предлагает для этих целей обширный набор мощных команд форматиро

вания, которые позволяют назначать шрифты, цвет, размеры, межстрочный интер

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

приятие как отдельных элементов веб-страницы (заголовков, маркированных

списков, обычных абзацев текста), так и всей веб-страницы, сайта в целом (рис.

6.1 ).

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

позволяющим попрактиковаться в создании таблиц стилей

CSS для текста и

при

менении их к реальным веб-страницам.

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

приме

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

font-fami ly:.

font-family: Arial: ПРИМЕЧАНИЕ----------------------------------------------- На практике для применения определенного СSS-свойсrва вы должны добавить все остальные обя зательные детали блока описания сrиля и таблицы (см. гл.

2).

Например, р

{ font-family: Arial; }.

Если есrь такие примеры определений, помните, что это всего лишь отдельное свойство СSS-стиля для сокращения и упрощения написания книги и удобсrва чтения.

127

Стилизация текста

• !!!<1ii!!IO •C...",Hgd!wмrs

·~ ·~ ·~

_...,.

':"'?+· ... ""'"'JiJet

N•WCJCIIX .

~а iщllo~.-1804~~ы.dili1...,.,._~ddt81t.

--~ct-dokirll"'dqDМ801cstiмo~.aocc88CA~· -P~~

... iD ~ ~4cia dnoeNat 8di:i.& .....

llaque oaПIJII

~Ydli'.totodqN . .

w.~----dlc.-..-til

..........

~dalof~~WN8r-.,-.~~

... .-..~~Ya'Ьiiid~~Ьcatм v&.rdda,..CЧJk.ЬO N-~\»-~4U ~-__..

.. _. ... ,., tot448ac~

~dl*n:•••ct8'*-~к40i~ Sf'ld•J:~<t~uМt-iwrNМcm.8~

~daЬ~~toe..~-~,. . . ipqq.~М. . . . . . . . .t . . . . . ft-~Ьt.ttarol ..W.:8tt..,..ьa». N.oMI>..-~~

.....

....-.o-.oc~lllllipOI'.

._.._.,._ --., •

t.Ьск cS daЬr

~..,..1C'dQ.illooo

·-

. . . . . . eociiii!IIIIICII'•

............ .-.

~!IIW:i«tef.clcloJt'

,......_ .......... odl.,.., мd ... ~ ...-idoЬ_"_. .. ,ac- ........-...p~ Neqк pono....-ett,.adoЬ -ip. .МcJDЬ,.--.c~.lldipiw'i.,. мdcPa-.....-.-.11101!5~~q~on--..\II!.Ьor~ (C~f>

...,__..~.._

About Us АТ Vr:AO (QS С:Т ~а IU$1'0 ООЮ OIOIIS~IМOS OUCUЩS OIII...ANCICМ МArstW'I'1t»>. 'fdllp~.._.v ••4ut~O>ts

4VM4Cioru tt . . . ~м r«:ttt.llfl IИit O(OIIIQ1S

C.lltftW. .С. ~t,~tW..I W\ C4o8..-t o/lef. . . . OIItt4'J\OIU, fi'IIIN

1Т AQUE

EARU\1

S(D ut ~'m СМDtОММК IS'tt NAТU$ WOR SIТ

.......

Ydlopц~~'lllltlnt~•l.wd»tw•. to~lola

lllodaf~Jf'iP'~f~fll;.il

,._~•••4PМ~II:м.Ь.ta..,..w.~~t{'.c

~lft~, ...t"W"

qli!IISI ~ltкt.oЬ.a.t.,.YitAII'ckt.t.-tnpk.aЬo м.т..е ~-·~'fdщ:lw-~~\lt~.atwa.ltf.Oitl

м.tfu-t.\OCI~COI'I'~tll<'""'tf\16t'Ьn"".U ftCIOII• YC!Wptмent .,.....S "...aiw>t..

-~~~-ltШ

~..........и

.,.,.:11\111

Al>IPISCl\'tlJТ.

SEO

"..,...,.".._~"'"'·

sm ur~ns ~ Oii.М/5 tSтt tu.тustМOtt sn

"'o!C:м~••~•h4rllf

\'CIIIr91~~ ~W'ItiO"'~"et.iclмi.W.М,

lahrttltblCJO~'IU.J>tiii'IJ

totottl

._._~_.,..,...,~qa•.ЬIЬI-uw•~ш.tet

.... ..,фi~ЬII",. . ._.tмd(c..SIIfl\~"-'11 8Neii~'<I\OIЩiotat... 4.Pa~S)It~.-oк~~~to6t .,~

N-81t. \М~_,._, CCWI.....,...at ll'f ........ da6oq, tй._.

rad.olo• ~.и.~ ~lt~ew.o~at • .....,_. pono~Uihqu.tm f'lt,~"' ddotf',. 'ip$\IIIII.М diCIIICW \!\ - t . COII\К.t8'Ш, «<ii'IJO ..Wt.,.мd ~~~ IIOfl ~- et\11.

!fiOd t.u~poRIIIo.doJ/It wtt.ьor. •t~ "'iif''-16~-~~~WoW•t Y'OWpW.IIIIV.

:t. Рис. 6.1. Зачем соглашаться со скучным и заурядным оформлением текставеб-страниц (вверху), если можно с легкостью сделать и заголовки, и текст выразительными и притягательными

благодаря нескольким простым свойствам CSS (внизу)

Выбор шрифта Рекомендуется выбирать шрифты, которые делают текст привлекательным для rлаза (особенно если это заголовок) и читабельным (если это основной текст

128

Глава б. Форматирование текста

содержимого веб-страницы). К сожалению, вы не сможете воспользоваться абсо

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

написание будет бесполезно· для применения. В противном случае браузеры посе тителей вашего сайта отобразят текст шрифтом по умолчанию (предопределен ным). Обычно для текста используется семейство Times. сов~----------------------------------------------------

Если вы все-таки хотите отобразить текст произвольным шрифтом, для этого есть метод Cufoп

(http://wiki.github.com/sorccu/cufoп/about). Этот метод, основанный на использовании

JavaScript,

позволяет преобразовывать один из ваших шрифтов в файл, который затем можно использовать для замещения текста

HTML.

Хоть сама технология работы Cufoп довольно сложная, применить ее

не составит большого труда.

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

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

font-family: Arial. Helvetica. sans-serif: В данном примере браузер сначала выяснит, установлен ли использует этот шрифт. В противном случае он ищет установлен, применяется последний из списка

Arial.

Helvetica

Если да, то он

и, если и тот не

универсальный гротесковый

шрифт семейства sans-serif. Когда вы вносите в список универсальный тип шрифта

( sans-serif или serif), браузер выбирает реально существующий из этого семейства. По крайней мере, таким образом вы можете определить его основные начертания. Если название шрифта состоит из нескольких слов, вам следует заключать его в кавычки:

font-family: "Times New Roman". Times. serif: Ниже представлены некоторые часто используемые сочетания, сгруппированные

по типу шрифта (каждый список заканчивается универсальным типом шрифта).

Шрифты с засечками

(serif)

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

маленькие росчерки на концах основных штрихов

хо

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

О О

Times, Times New Roman, Georgia:

"Times-New Roman". Times. serif; Georgia. "Times New Roman". Times. serif; Baskerville. "Palatino Linotype". Times. serif; "Hoefler Text". Garamond. Times. serif.

129

Стилизация текста

Примеры данных шрифтов приведены на рис.

6.2.

------------------------------.w------------------- - - - -- - - - - -· ~тimes New Roman", Times, serif "Times New Roman", Times, serif Class aptent taciti sociosqu ad litora torquent per со Class aptent taciti sociosqu ad litora torquent per со Morbi tempor, leo vehicula auctor gravida. sapien 1 him.enaeos. MorЬi tempor, leo vehicula auctor gravi стоs non ante. Proin aliquet, magna et sodales tinci eleifend felis eros non ante. Proin aliquet, magna et condimentшn orci est sit amet odio. Aenean consect porttitor nulla, non condimentum orci est sit amet porttitor fermentшn intcтdurn. nibh quis congue. Cras pOrttitor fermentum inter

Georgia, 'Times Ne'" Roman", Times, serif Class aptent taciti sociosqu ad litora torquent р himenaeos. Morbl tempor, leo vehicuJa auctor tellus, ас eleifend felis eros non ante. Proin aJiq metus sem porttitor nulla, non condimentum о consectetur rntrum nibh quis congue. Cras ро

Georgia, ''Тimes New Roman", Times, serif Class aptent taciti sociosqu ad litora torquent himenaeos. MorЬi tempor, leo veblcula ~uctor tellus, ас eleifend felis eros non ante. Proin aJiq tincidunt. metus sem porttitor nulla, non condi Aenean consectetur rutrum nibh quis congue. interdum.

~HoeflerText", Garamond, Times, serif Oass aptent taciti sociosqu ad litora torquent per соа ~оrЫ tempor,leo vehicula auctor gravida, sapie.n lacu r.on ante. Proi.o aliquet, magna et sodales tincidunt, m condimenturn orci est sit amet odio. Aenean consecte potttitor fermentum intadurn.

"HoeflerText", Garamond, Times, serif . Class aptent taciti sociosqu ad litora torquent per himenaeos. MorЬi tempor, Jeo vehicuJa auctor ас eleifend fdis c:ros non ante. Proin aliquet, sem pomitor nulla, non condimentum orci est stt rutnun niЬh quis coogue. Cras porttitor fennen

·paJatino Linotype", Baskerville, Times, serif Class aptent tadti sodosqu ad litora torquent ре himeлaeos. Morbi tempor, leo vehicula auctor ас eleifend felis eros non ante. Proiл aliquet, ma sem porttitor nulla., поn condimentum ord est si

"Palatino Linotype", Baskerville, Times, serif

aass aptent taciti sociosqu ad litora torquent per со himena.eos. MorЬi tcmpor, leo vchicula auctor gravi eleifend felis eros non ante. Proin aliquct, magna et porttitor nulla, non condimcnrum orci cst sit amet nibh uis со е. Cras orttitor fennenrum interdu

Рис. 6.2. Шрифты не всегда отображаются одинаково в

Macintosh (справа)

Windows

(слева).

У этих двух систем различные наборы nредустановленных шрифтов

Шрифты без засечек Шрифты без засечек часто используются для заголовков благодаря простому и чет кому внешнем у виду. Примеры шрифтов без засечек- Arial, Helvetica, Verdana 11 Foгmata:

::> ::> ::> ::> ::> ::>

Arial. He1vetica. sans-serif; Verdana. Arial. Helvetica. sans-serif; Geneva . Ari а 1. Не 1vet i са. sans- serif; Tahoma . "Lucida Grande". Arial. sans -seri f; "Trebuchet MS". Arial. Helvetica. sans-serif; "Century Gothic" . "Gill Sans". Arial. sans-serif. Примеры данных шрифтов приведены на рис. 6.3. Некоторые люди верят в то, что на веб-страницах стоит использовать лишь

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

130

Глава б. Форматирование текста

, -r1-a&- .-H-e-lv_e_tlca -••-.-ns - ...-rtf-----------·-~-AriCI -es -~ .~~-.~~ett~~;u·;~;!.:~~fad___lltora•~~t per ~~ Cleas aptent t8cltl soclosqu ed lltora torquent per conub ........ , ...... au\i<l\1....-чw•.. ......,, lacue cuвus tellus. ее: 8181fend fells eros non en seplen 18cus CUflus tetkJa, ее elelfend fetls 8f'OI non ondlmentum ortl est slt amet odlo. Aenean consectetur oondlmentum orcl est slt amat odlo. Aeneen oonмct

Verdana, Arial, Helvetica, sans-serif

Verdena, Arlal, Helvetice, aana-aerlf

Class aptent tacitl soclosqu ad lltora torquent per auctor gravlda, saplen lac:us c:ursus tallus, ас elelf matus sam porttttor nulla, non condlmantum orcl Cras porttltor fermentum lnterdum.

Class aptent tadtl soclosqu ad lltora torquent р vehlcul11 auctor gravldll, Sllplen lacus c:ursus te tlncldunt, metus sem porttitor nult11, non condl congue, Cras porttltor fermentum lnterdum.

Qanava, Artal, Helvetlca, иna-aarlf Clall aptant t8cltl soclosqu ad lltora torquent per conuol saplen lacus cursus t811us. ас elelfend faHs eros non ant ondlmentum orcl est slt amet odlo. Aenean conиctetur

Geneva, Arial, Helvetica, sans-serif Class aptent tacit i sociosqu ad litora torquent auctor gravida, saplen lacus cursus teNus, ас elei metus sem porttitor nulla, non c:ondimentum or porttitor fermentum inte«<um.

ahoma, "Luclda Grande.., Arlal, sans-мrtf eptent tж:ttl sodosqu ed llttn torquent per conuЬI sapien lac:us cursus tellus, ас elelfend fells eros non ente. ndlmentum ord est s1t amet odlo. Aenean consectetur

Tehoma, "t.udda Grande.., Ariel, sens-sertf Class aptent tacitj sodosqu ad llto~ torquent per con sapien lacus cursus tellus, ас elelfend fells eros non oondimentum ord est s1t amet odlo. Aenean con

lr.Ьuchet мs·, Arfal, H•lv.tica, sans-ser1f Cless aptent U.Citi sociosqu ad Litora torquent per conub 1revida, sapien l.lcus cursus teUus, ас eteifend fe\is eros nu\18, non conctimentum orci est sit amet odio. Aenean

"Тrebuchet мs·, Artal, Helvettca, sans-sertf C\ass aptent taclt1 soclosqu ad \ltora torquent per со ariiVida, saplen lacus cursus tel\us, ас e\elfend fells mJ\la, non condimentum orct est slt 11met odlo. Aen

'Century Golhlc". "GIII Sans··, Aliar, sans-serlf C loss aptent taclli saciosqu od ~tora torquent per с ctor gravlda, saplen lacUs cursus lelus, ос eleif em porttitor nullo, non condmentum orci esr srt о fermen tum lnlerdum.

Рмс.

6.3. Текст е Windows

"Century Golhlc", "GII Sans", Arlal, sans -sertr Class optenttocltl soclosqu od 1\tora torquent auctor grovldo, soplen lacus cursus tellus, ос ete metus sem porttitor nulla, non condimentum orc porttitor fermentum interdum .

(слева) и

Macintosh

(справа)

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

"Courier New". Courier. monospace.

"Lucida Console". Monaco. monospace.

"Copperplate L ight ". "Copperplate Gothic Light". serH.

"Marker Felt ". "Comic Sans MS". fantasy. С пр имерами этих сп исков шрифтов можете ознакомиться на рис .

6.4.

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

131

Стмлиэацмя текста

•eourier New" ~ Courier,

mono~pace

Cl~зs Aptel\t uciti 8ocioзqu а<\ litora torquent per ! nceptoз hiмenaeoз. МOrbi t.e.opor, leo vehi cula aucto cursuэ tellus, ас eleitend feHs eros non nnte. Proi

30da.les tjncid'Unt, aюtus ~fИII porttitor nнlla, non со Aenean COI\S&Ctetur rutrwn nli>b quis congu :ferмentuu~ interdum.

.a.lll6t о<11о.

"Luci da conso1е" 1 моnасо, monospace Class aptent tac1ti sociosqu ас! litora torquent per 1nceptos hi~naeos. мorbi tempor, leo · vehicula aucto cursus tellus, ас eleifend felis eros non ante. Proi sodales tincidunt, metus sem porttitor nu1la 1 non с uoet odio. мnean consectetur rutrum nibh qu1S congu fe1'111entu• interdum. 'COPPERPi.AT& lJ<ЭНТ'', COPPERPLдTS: GoTHIC tJGНТ'' t 8ERIF 11

СL.д.8$ АРТ'ЕNТ TACrri80CI08QU АО UТORA TORQUENТ P&:R С HIМENAE08. MORQI TtмPOR, L&:O Va;:HICULA AUCТOR GRAVIDA,

TEU.U8. АС EU:IFaNO ""U8 EII08 NON ANТS:. PROIN AUQU!cr. М

"Courie.r Ne..,.,, courier, roonoэpace Cl4o8 aptent taciti aocioзqu ad litora torquent per h1menaeoa. моrЫ tempor, leo vehicula auctor gravlde eleifend !elis eroa non ante. Proin aliquet, magna е porttitor nulla, non con<limentum orci est ait 4met о qulo congue. Craa porttitor !ementum interd\J/11.

"Lucida console" моnасо, monospace class aptent tac~ti sociosqu ad litora torquent per himenaeos. мorbi tempor, leo vehicula auctor graiticla eleifend felis eros non ante. Proin a11quet 1 ~~~agna е porttitor nulla, non conclimentUIII orci est s1t amet о quis congue. Cras porttitor fementum interclum. "COPF'fЯPI.AТ!; UGнт''. "СОРРЕЯРI.АТЕ GОТНIС UGнт'', SERJF CI.AsS АРТЕNТ TACm SOCIOSOU АО UТОАА ТORQUDrr PER СО~ MORBI П:МРОR, LEO VEНICULA дUСТОR GAAVIDA, SAPIEN LACUE NON АNТЕ. PRoiN ALJQUEТ, MAGNA ЕТ SODAJ..ES 'Т1NCIDUNТ, МЕ1 CONDIMEN'r\JM ORCI ЕSТ Srr АМЕТ 0010. AENEAN CONSECТE1'UI РОR'ПТТОR FERMEN'r\JM IN'!VIOUM.

Mlri'\J8 ЗIО:М PORТТI'I'OR NUU..O., NON CONOIME.NТUM ORCI ЕSТ CON SECТ&ТUR RUТRUM NISH QULS CONGUit. CRA& PORТТrfOR F " Мat-ker Felt", •comoc Sans мs•, fatrtosy Oo.s aptгnt taciti sociosqu ad litOf'O torquent ри conubla no.stra, Мо!'Ы t~. le.o vehicula ouctor graviclo, sapien lacus cursus tell ame. Proin all~. mogno et sodalu toncidunt,rыtus som portti~ · -

.;,.. · - · • • .J:.

'*•-··- ··--·-_.",- -4~-- . :LL

-•1• · · - · " • 1"'-

Рис. 6.4. Текст в Windows (слева) и Macintosh (справа). Courier самый расnространенный моноширинный шрифт, но ограничиваться только им не обязательно.

Lucida Console очень nопулярен в Windows и Macintosh, а Monaco установлен на каждом комnьютере Macintosh переопальных комnьютерах и комльютерах Macintosh. Возможно, вы захотите вы брать какие-то из них: О

Arial Black;

Arial Narrow;

Impact. Будьте осторожны с

Arial Black и Impact: у них есть только одна плотность и они

не nоддерживают курсивный вариант. Соответственно, если вы используете эти шрифты, не забудьте установить для font -wei ght и font -sty1е значение norma 1. В про

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

~ЕТ ------------------------------------------------------ВЫ найдете намного больше информации о том, какие шрифты в каких системах установлены (в том числе

Madntosh, Windows и Unux), на сайте www.codestyle.org/css/font-family. Еще один хороший

ресурс, nозволяющий выйти за рамки стандартного набора веб-шрифтов, расnоложен по адресу htt:p://unitinteractive.com/Ыog/2008/06/26/Ьetter-css-font-stacks.

ридание тексту цветового оформления Черно-белые цвета хорошо смотрятся в фильмах Буди Аллена, но когда мы имеем дело с текстом, шрифт небесно-синего цвета будет выглядеть намного более четко,

изящно и стильно по сравнению с простым черным . Окрашивание текставеб-страниц средствами

CSS

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

132

Глава б. Форматирование тексrа

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

color:

#ЗЕ8988:

В этом примере значение цвета представлено шестнадцатеричным числом,

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

сов~---------------------------------------------------Если вам требуется помощь по цветовому оформлению, ножете найти множество согласованных коллекций цветов, а также полезных, связанных с ними ресурсов в Интернете по адресу

www.

colourlovers.com.

Шестнадцатеричное предсrавпение цвета Чаще всего дизайнеры используют кодирование цвета элементов ·Веб-страниц в шестнадцатеричной системе счисления. Значение. например #6600FF, фактически содержит три шестнадцатеричных числа. В данном пptotepe это

66, 00 и FF.

Каждое

число определяет уровень красного, зеленого и синего цветов соответственно (как

и в цветовой системе

RGB,

описываемой да.1ее). Окончательное значение цвета

получается при смешивании этих трех состав.1Яюшкх.

----------------------------------------------------

СОВЕТ

Можете сокращать шестнадцатеричные числа до трех ~"011. еслм каждое из трех двухзначных

чисел содержит по два одинаковых символа. Например, ~«<~~JooG ~ #ббООFF к виду #бОF или

#FFFFFF

#FFF.

RGB Можете также пользоваться методом кодирова..>п~

RGB (red-

красный,

green-

зеленый, Ьlue- синий), с которым вы, возможно. з:-iа..хоwы из программ компью терной графики. Значение цвета кодируется тр€У.У. ~i!C.1a.\tИ, представляющими

процентные соотношения

(0-100 %)

или чис.1а з ..:J!.а.::а.зоне

0-255

для формиро

вания каждого оттенка (красный, зеленый. син;!~ 1 Ес1н вы хотите установить

белый цвет текста (возможно, чтобы контрастно ВЬL...~.:IПЪ его на темном фоне веб страницы), можно использовать следующее свойство.

color: rgb(l00%.100%.100%): или

color: rgb(255.255.255): СОВЕТ--------------------------------------------------- Вы всегда можете вернуться к классическим цветам НТМL а-е.:: это &у1J!;Г минус в новизне и ори

гинальности вашего сайта. Существует

gray,

greeп,

lime,

17 ключевых ~'1e-tllli .-етов: aqua, Ьlack, Ьlue, fuchsia, olive, oraпge, purple, red. Si'.e: ':!5!1 . ..nte, yellow. В CSS их добавля образом: color: fuchsia; и пр.

marooп, паvу,

ют в стили следующим

133

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

Установка размера шрифта Установка определениного размера шрифта текста веб-страницы

хороший спо

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

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

Свойство

font-size

устанавливает размер шрифта текста. За значением всегда

должна следовать единица измерения величины. Например, так:

font-size: lem: Сочетание значения свойства и единицы измерения, которые вы указываете для

установки размера шрифта (в данном примере

lem), определяют размер текста. CSS

предлагает большой выбор единиц измерения: предопределенные ключевые слова,

em (стандартная единица измерения в типографской системе: размер буквы М, на печатанной шрифтом Сiсего), exs (то же самое, только берется размер буквы х), пикселы, проценты, пики, пункты, дюймы, сантиметры и миллиметры.

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

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

em,

проценты

- пикселы, клю

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

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

Пикселы Переменные для значений пикселов являются самыми легкими для понимания,

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

36 пикселам для заголовка <hl>, браузер отобра 36 пикселов. Дизайнеры выбирают эти единицы измерения

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

Чтобы установить для свойства

font-size

значение в пикселах, введите число

с сокращением данной единицы измерения рх:

font-size:

Збрх:

ПРИМЕЧАНИЕ----------------------------------------------- Не добавляйте пробел между значени7м свойства и единицей измерения. Например, правильно Збрх, но не

рх.

134

Глава б. Форматирование текста

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ

Пробnема с пиксеnами Кажется, что пиксела вполне достаточно для кон

дает nроблемы nри просмотре: nреnятствует достуnу

кретизации значений свойств и обеспечения полной

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

свободы действий в установке размеров шрифтов

можностями.

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

Версии lnternet Exploгer, начиная с седьмой, как и боль

пораметры текста?

шинство других известных браузеров, реально nо зволяют изменять размеры текста, определенного

К сожалению, в браузе ре lntemet Explorer б (и его более

в nикселах. Эти браузеры следуют тенденции масшта

ранних версиях) имеет место одно серьезное огра

бирования страниц, и вместо nростого увеличения тек

ничение, nроявnяющееся nри установке nараметров

ста вь1 можете масштабировать страницу, увеличивая

текста в nиксеnах: nрограмма nросмотра не может

ее всю, включая изображения, текст и т. д. Поскольку

уnравnять размерами шрифтов. Некоторые люди,

lnternet Explorer 8 становится все более nоnулярным,

особенно с nлохим зрением, пользуются возможно

в нем вы сможете исnользовать на веб-страницах СSS

стью браузера изменять размеры шрифтов текста nри

свойства со значениями в nикселах, 11е заботясь об

nросмотре веб-страниц командой View •

Text Size

ограничениях, nрисутствующих вlnternet Explorer 6.

• Размер шрифта}, что облегчает его восnриятие. Однако lnternet Explorer не будет ничего изменять,

Я рекомендую nриелушиваться к мнению целевой

если для него в качестве единиц измерения установ

аудитории. Если вы создаете сайт, ориентированный

(Вид

лены nикселы. Браузер nридерживается nожеланий

на старших людей или школьников, то nрименяйте для

дизайнера веб-страницы: оставляет внешний вид тек

текстовых данных одну из следующих единиц изме

ста nри nросмотре неизменным.

рения: ключевые слова,

em, nроцентные значения.

Как бы то ни было, nосетителями ваших веб-страниц Исnользовать в качестве единиц измерения nиксе

могут оказаться люди с ограниченными физически

лы или нет- актуальный воnрос веб-дизайнеров.

ми возможностями, или, вероятно, они nросто будут

Многие разработчики nолагают, что, если размер

nросматривать сайт на комnьютерах с устаревшим

шрифтов текста устанавливается в nикселах, это соз-

проrраммным обеспечением.

Ключевые сnова, проценты и единица измерения

Все нижеnеречисленные сnособы установки размеров текста средствами CSS с nо мощью ключевых слов, nроцентных значений и единицы

увеличивают или

уменьшают размеры шрифтов текста, отображаемого в окне браузера в соответ ствии с оnределенными прав илами. Другими словами, если вы не оnределите раз мер средствами CSS, браузер применит к тексту свои nредоnределенные параметры. В большинстве случаев обычный текст, находящийся вне тегов заrоловков, отобра зится высотой

16 пикселов-это основной

(базовый) разм.ер шрифта текста.

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

Internet Explorer, например, чтобы установить тре

буемый параметр, нужно выбрать nункт меню View • Text Size • Larger или Smaller (Вид ~ Размер шрифта • Круnный или Мелкий); в Firefox 2 это будет nункт меню

View • Text Size • Increase или Decrease (Вид • Размер шрифта • Увеличить или Уменьшить), в Firefox 3- View • Zoom (Вид • Масштаб) , а в Safari- View • Make Text

135

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

Smaller

(Вид ~ Сделать текст меньше) или

View ~ Make Text Bigger

(Вид ~ Сделать

текст больше).

Когда вы изменяете текст с помощью

CSS, браузер берет базовый размер шриф 16 пикселовили другой) и корректи

та текста (будь то первоначальный высотой

рует его в большую или меньшую сторону в соответствии со значением ключевого слова, единицей измерения

em, процентным отношением.

Кпючевь1е спова

CSS предлагает семь ключевых слов, которые позволяют назначить размер шриф sma ll, medi um, l а rge, х- l а rge и хх- l а rge.

та относительно базового: хх- sma ll, х- sma ll,

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

font-size: large: Среднее значение medi um

базовый размер шрифта браузера. Остальные значения

уменьшают или увеличивают размер шрифта с различными коэффициентами. Дру

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

9 пиксело в

(принимая во внима

ние, что вы не изменяли базовый размер шрифта в своем браузере ), х- sma ll соответ ствует

10 пикселам, small - 13, large- 18, x-large- 24, а xx-large- 32 пикселам. - всего семь

Как вы заметили, ймеется ограниченный набор ключевых слов

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

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

l arge, х- l arge и т.

д. Любой браузер имеет предопре

деленный базовый размер шрифта. У большинства он составляет

16 пикселов.

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

100 %. Другими сло 16 пикселов.

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

200%:

font-size: 200%: Или, если хотнте, чтобы шрифт был немного меньше по умолчанию, укажите 90 %.

значение

Приведеиные примеры являются самЬiми простыми, но на практике встреча

ются более сложные ситуации. Например, относительный размер

100 % может

изменяться, если наследуется значение тега-предка.

На неб-странице в левой нижней части рис. 6.5 есть текст в теге <di v>, шрифт 200 %. Это в два раза больше базового размера и со

которого установлен размером ставляет

32 пиксела.

Все вложенные теги наследуют его и используют для вычис

ления.своих размеров шрифтов. Другими словами, для тегов, вложенных в

размер

100% равен 32 пикселам.

Так, текст заголовка

<hl>,

<di v>,

находящегося внутри

136

Глава б. Форма'Пtрование текста

теrа <div>, составляет 100% и отображается в два раза больше базового для этой веб-страницы, то есть высотой 32 пиксела .

. . r6t-, ..... · о-

-·J

tr- в 0 · ~ .............,.___.____ -

оо ~ р -...

Pixel Text Size Values

j Heading 2: 48рх t

) Тhе iralicized rexr и set ro J8px and rм bold

j tex1 (1vhich is inside the <ет> tag) is 24

1 i

Тhis Ьох is а <div> tag. Тhе font-size is set to 2ems. Other tags inside this <div> will inherit that text size.

r 1

! J.

.i1 J....~ ~---------~----....-------..1 •

1!1 ·о riJ

Em Text Size Values

! Тhis paragraph is set to 32рх.

Heading 2: 1em Тhis

paragraph is set to .75em. Тhе _

ital•cizвd J«Xi

is :•r ro .7Sem a1ld rhe l>o/4/cd(wllldtts

-llu <t-14} lr. 1$nrt.

,;18о,; .......А..Г.~....-...-о....:li-...,._~•~~..~-•...-..;.;_-.д.~

Ofo

Text Size Values

Nested List ProЫems

This Ьох is а <div> tag. The font-size is set to 200%.

Percentage values pose proЬlems for nested lists.

i Heading 2: 1000/о

• Textis 75%

This paragraph is set to 75%. Тhе italicized !text is ser ro 75% a1ld rhe l>o/4 lcd (wfti<A 1r wtd<llи-

"'1) 1r 1S"-

t t

;

L------·~-------------- -----·--------------~- .1

• Text is 75% о

Tat is 7S% of75%

Text is 75% of 75%

• Textis75%

Рис. 6 .5. Тремя самыми расnространенными и наиболее часто nрименяемыми единицами измерения для установки размеров шрифтов являются пикселы, em и nроценты

Будьте внимательны при испол~зовании

em и процентных значений, коrда име

ют место наследуемые свойства размеров шрифтов. Если вы заметили, что какой

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

Единица измерения

Если вы поняли, как работают процентные отношения, то леrко поймете и едини цу

em. Они функционируют практически одинаково, но большинство веб-дизай

неров все же используют эту единицу измерения из-за применения ее в книгопе чатании.

137

УстанОвка размера шрифта

Слово •em• позаимствовано из типографского дела. Оно имеет отношение к раз

меру заглавной буквы М определенного шрифта. В миревеб-дизайна это слово приобрело собственное значение. В

CSS понятие относится к базовому размеру

шрифта текста. Иными словами, значение размера шрифта

lem означает то

мое, что и

100%, как описано в предыдущем разделе. Иначе говоря, значение эквивалентно em,. умноженному на 100: . Sem - 50 % и т. д. Например, этот СSS-код вызывает тот же эффект, что и

же са

процентное

font-size : 200% :.

font -size : 2em: ~МЕЧАНИЕ----------------------------------------------- Как и nри исnользовании nикселов, вы не должны указывать nробел между числом и единицей иэмерениR

em.

Кроме того, даже если значение свойства больше единицы, совсем не нужно добав

лять s е конце: nравильно

2.Sem,

но не

2.Sems.

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

6.5. Шрифт нижнего аб

заца определен равным . 75em, а поскольку тег абзаца <р> наследует размер шрифта

2em (32 пиксела) от <di v>, в результате получается размер шрифта: .75 х 32 = 24 пик села. Внутри <р> есть два других тега с размером шрифта . 75em. Размер шрифта тега наиболее глубокой вложенмости <strong> установлен равным . 75em, или, по сути, 75 % от унаследованного. Довольно сложный расчет: 32 пиксела (размер, унасле дованный от <div>) х 75 (размер от <р>) х .75 (размер <em>) х 75 (собственный раз мер <strong>). В результате вычислений получается размер , равный приблизитель но

14 пикселам.

~МЕЧАНИЕ---------------------------------------------- Брауэер Intemet Explorer б и его более ранние версии иногда некорректно отображают текст веб страницы nри исnользовании исключительно единиц измерения em. Есть два сnособа решения этой nроблемы: nрименять nроцентные значениR или установить основной размер шрифта длR <Ьоdу>

11 nроцентах, а затем Intemet Explorer б.

исnользовать

em для

каких-либо изменений . Это nомогает устранить ошибку

ОБХОДНОЙ ПРИЕМ Ра3бор вnоженных конструкций Унаследованные эначения раэмеров шрифтов могут

Чтобы обойти эту проблему, соэдайте дополнитель

ВЬ138аТЬ nробяемы дnя вложенных (многоуровневых)

ный стиль с селектором лотомков (см. раэд. «Стили

CIIIIOI08 (см. рис. 6.S). Наnример, у васимеется стиль u1 ( font-s; ze: 75~ }, а эатем вы создаете вложенный

зация вложенных тегов» гл.

ФIКОК, то еаь ВlfУ1РИ <u1> раmоложены друrие теги.

Получается, что для вложенного <u1>должен бьпъ ymнoenett размер шрифта, равный 75 %отвнешнего<ul>.

3): ul u1 (font-s1ze:

100%} . Этот стиль устанавливает размер шрифта любого <u1>, вложенного в другой <u 1>, равным

100%. Другими словами, 100%от раэмера шрифта u1, в который вложен дру

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

Смдовmлыю, nодnункты СЛIЮ\08 6удут оrображl!ны

гой элемент. В данном nримере это обеспечивает

• мены.uмм шрифtом, чем nункты и т. д. nрмменительно

сохранение размера шрифта вложенных nодпунктов

к nодnунктам спедующеrо nодуровня.

сnисков равным 75 %.

138 СОВЕТ

Глава б. Форматирование тексrа

-------------------------------------------------------

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

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

одно из наиболее важных правил хорошего графического дизай

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

мание. Краткий обзор особенностей типографского контрасrа описан в Интернете по адресу:

http://

www.creativepro.com/story/feature/19877.html.

Форматирование символов и слов Вам потребуется немало времени для точной и тонкой настройки параметров тек

ста: цвета, размеров шрифтов и т. д. Однако CSS предоставляет также множество других средств для форматирования текста. Из самых распространенных свойств можно выделить, например, полужирное и курсивое начертания, а из менее широ

ко используемых

создание малых прописных букв, буквиц, изменение межсим

вольного интервала и т. д.

СОВЕТ

-------------------------------------------------------

Средства языка

CSS

позволяют комбинировать множество свойств форматирования тексrа вместе.

Слишком «тяжеловесное» оформление делает страницу сложной для чтения и понимания. Хуже всего, если из-за такой стилизации остается негативное впечатление от посещения сайта.

Курсив и полужирный шрифт Браузеры отображают текст, заключенный внутри тегов <em> и

<i>, курсивом (шриф <strong>, <Ь>, <th> ( <hl>, <h2> и т. д.),- полу

том с наклонным начертанием), а текст, находящийся в тегах

(taЬle

header-

«заголовок таблицы!>), тегах заголовков

жирным. Вы можете управлять этими параметрами. Если хотите, то можете отме

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

font-style

font-weight.

Чтобы выделить текст курсивом, добавьте к стилю следующий код:

font-style: italic: Или, наоборот, можете установить для текста обычный, не курсивый шрифт:

font-style: normal: ПРИМЕЧАНИЕ------------------------------------------------- Свойство стиля шрифта foпt-style на самом деле содержит третью команду дает тот же эффект, что

oЬiique, которая соз

italic.

Свойство толщины шрифта

font -wei ght позволяет делать текст полужирным или CSS, можно укаэать девять числовых

обычным. Фактически, согласно правилам значений

( 100-900) для определения точных, едва раэличимых градаций плотности (900) до «крайне легкого, почти невидимого1> (100)) :шрифта.

(от «суперплотного>>

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

139

Форматирование символов и слов

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

на сегодняшний

день не существует шрифтов, которые бы работали вместе с браузером подобным образом. Реально применимых команд для этого свойства гораздо меньше. Чтобы сделать шрифт текста полужирным, наберите:

font-weight: bold: Обычный шрифт устанавливается следующим образом:

font-weight: normal: :ОВЕТ

-------------------------------------------------------

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

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

hl, strong {color: #3399FF;} Этот стиль с проиэводным селектором меняет цвет всех элементов nолужирным шрифтом), заключенных внутри

(обычно отображаемых

<hl>.

Прописные буквы Набрать текст прописными буквами очень просто: нажмите клавишу фиксации регистра заглавных букв

Caps Lock и вводите текст. Что же делать, если нужно,

чтобы прописными буквами были написаны все уже набранные заголовки неб страницы или текст, который скопировали и вставили из Microsoft Word? Вместо того чтобы повторно вводить заголовки, обратитесь к СSS-свойству text-transform. С его помощью можно преобразовать любой текст в верхний или нижний регистры нли даже превратить первые буквы каждого слова в прописные (для названий и за головков). Вот пример преобразования в прописные буквы: ~ext-transform:

uppercase:

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

l owercase, а превратить

первые буквы слов в прописные - с помощью capi ta l i ze. Поскольку это свойство наследуемо, любые теги, вложенные в

text-transform,

приобретают то же форматирование: верхний регистр, нижний, первые прописные буквы слов. Чтобы указать свойства

CSS 1te изменять регистр текста, используйте значение

none:

~ext-transform:

none:

Малые прописные буквы. Для придания тексту типографской изысканности \ЮЖНО также использовать свойство font- vari ant, которое позволяет преобразовать текст таким образом, что все буквы будут малыми прописными. В этом стиле строч

ные буквы выглядят как немного уменьшенные заглавные. Большие фрагменты такого текста становятся трудночитаемыми, но этот стиль придает неб-странице •старосветскую!>, книжную многозначительность. Для создания стиля с малыми

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

"Jnt-variant: small-caps:

140

Глава б. Форматирование тексrа

Украwение текста CSS предлагаеттакже свойство text-decorationдля улучшения внешнего вида тек ста путем добавления раЗличных дополнительных элементов. С его помощью мож но добавить линии подчеркивания, надчеркивания, перечеркнуть текст (рис.

6.6)

или сделать его мигающим. Свойство text-decoration применяется в сочетании со следующими ключевыми словами:

underl ine, overl ine, l i ne -through

или Ьl ink. На

пример, чтобы подчеркнуть фрагмент, наберите код:

text-decoration: underline:

Ackress

1@) http://as.looll/chOб{IК>cowxOv711::z.html

Text Decoration Underlined text is often confused for а link. Overlined text must Ье useful for some reason. Ы11е

MlleadJ r.t sente~illtes t13ed ~е

i:rtdiea~ edited

ntateritd

Blink is just plain annoying.

tma toa C&l1 apply tdlof &me зeLtingз ~о ыхе csletneнL ' 1

8tn~t

Рис. 6.6. Здесь покаэан результат применения свойства

text-decoration

Вы можете также объединять несколько ключевых слов вместе для комбини рования эффектов. Добавить к тексту линии подчеркивания и надчеркивания од новременно можно следующим способом:

text-decoration : underline overl i ne: Однако не стоит изощряться в таком •вычурном~ форматировании только по тому, чтq есть такая возможность. Во-первых, у всех, кто пользуется Интернетом

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

кой мыши. Таким образом, подчеркивать слова, не являющиеся частью rиперссыл ки, будет не очень хорошей идеей. Значение же мерцания Ь 1; nk на самом деле

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

141

Форматирование символов и сnов

СОВЕТ

-------------------------------------------------------

Вы можете применить эффект, подобный подчеркива!iИЮ и надчеркиванию, есnи добавите к эле менту- в данном случае к тексту- линию рамки Ьorder сверху или снизу (см. разд. «Добавление

границ» гл.

7).

Преимущество состоит в том, что с помощью свойства Ьorder вы можете управлять

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

Значение

overl i пе свойства text-decorati оп надчеркивает, а l i пe-through

-пере

черкивает текст. Некоторые неб-дизайнеры применяют последний эффект, чтобы

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

:visited можно создать красивый эффект.

Отменить все элементы украшений можно путем применения ключевого слова попе:

text-decoratioп:

попе:

Зачем вам может по надобиться отмена декорирования? Самый распространен ный пример-удаление стандартной предопределенной подчеркивающей линии

гиперссылки (см. разд. -«Стилизация ссылок• гл.

9).

Межсимвольный и межславный интервал Другой способ выделения текстового фрагмента состоит в регулировании интер вала, с которым отображаются отдельные буквы или слова (рис.

6.7). Уменьшение

межсимвольного интервала letter-spaciпg поможет сжать текст заголовков. Они

будут казаться еще более плотными и тяжеловесными, а заодно вмещать больше текста на единственной строке заголовка. И наоборот, увеличение интервала может придать заголовкам более спокойный, величественный вид. Если хотите уменьшить расстояние между буквами, используйте отрицательные значения свойства: letter-spaciпg:

-lpx:

Положительные значения свойства делают промежуток между буквами больШе: letter-spaciпg:

lOpx:

Аналогично можно изменить межславный интервал, используя свойство wordspaci пg. Он делает промежуток между словами шире или уже, не затрагивая самих слов:

word-spaciпg: 2рх:

С этими свойствами можно использовать любые единицы измерения, приме нимые к тексту: пикселы,

em, проценты

(с положительными или отрицательными

значениями).

Если вы хотите, чтобы текст хорошо читался, применяйте небольшие значения интервалов. В противном случае буквы и ~ова будут перекрываться, накладывать

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

142

Гмва б. Форматмрование тet<cra

Мv*el•!faiu~Тet: -Spx

Negative Lett2r Spacing T~ghtens Up Text:

-1рх

No Letter Spacing Positive Letter Spacing Spreads Тext Out:

1рх

Positive Letter Spacing Spreads Text Out: Spx Р о

si t i v

Negative word spacing1

t t

рас

i n g:

10рх

-.sem.LoreпipsuпdoloJ5iWnetponsectetueadipiscin!J!lit~

diannonumm)lliЬll!uismod:incidun\t(aoreetiolonmagnailiquaпвralvolutpat.

Negative word spacing1-.1.em.Lorem ipsum dolorsit amet, consectetuer adipiscing elit, sed diamnonununynibh euismod tincidunt ut laoreet dolore magna aliquam erat vo1utpat. Positive Word spacing1 .:tem Lorвm ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh elli.smod tincidunt ut laoreet dolore magna aliquam erat volutpat. Positive Word spacing1 1.em Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh elli.smod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Рис. 6.7. Слишком большое или слишком маленькое значение межсимвольноrо или межсловного интервала может сделать текст трудночитаемым или вообще нечитаемым

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

нять к целым абзацам, заголовкам и т. д.

Установка межстрочного интервала В дополнение к настройке интервала между словами и буквами (межсловный и межсимвольный интервалы) CSS позволяет устанавливать межстрочный интер вал (интерлиньяж)- расстояние, промежуток между базовыми линиями двух

соседних строк текста, - используя свойство 1i ne-hei ght. Чем оольше межстроч ный интервал, тем больше промежуток между отдельными строками (рис. 6.8). Стандартный межстрочный интервал эквивалентен рис.

6.8,

120%. Таким образом, на

вверху, мы видим, что меньшее процентное значение сжимает строки,

а большее значение распределяет их более свободно (см. рис.

6.8, внизу).

143

Форматирование абзацев текста

Ll~helaht 75": Lorem.Josum dotor sit ~~) conse<:tetuer adlaiscln~litl

dfam nonummv rн!Яi eursmo~nc unt ut taoreet aotore. na vo!Utpat. LOremh1psum ёlо or t. amet1 _consectetuer а<Щ> na c21am nonummy nfD eu\51 t1ne~c!unt ut taoreet с!о1ore magna lчuam erat votutpat.

auamde~t

!t. se

Llne-helght 100%: Lorem ipsum dotor sit amet, consectetuer adlpisclng etit, sed diam nonummy nibh eulsmod tfncfdunt ut laoreet dolore magna allquam erat volatpat. Lorem ipsum dolor sit amet, consectetuer adipiscing etlt, sed diam nonummy nibh euismod tfncidunt ut laoreet dolore magna a!iquam erat volutpat. Lfne-helght Normal: Lorem ipsum dolor sit amet, consectetuer adlpiscing elft, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat votatpat. Lorem fpsum dolor sit amet, consectetuer adlpiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Line·hefght 120%: Lorem ipsum dolor sft amet, consectetuer adipiscing elit, sed diam nonummy nfbh euismod tincidunt ut laoreet dolore magna aliquam erat volatpat. Lorem fpsum dolor sit amet, consectetuer adlpfscing elit, sed dfam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lfne-helght 200%: Lorem ipsum dolor sft amet, consectetuer adipfscing elit, sed diam nonummy nibh eulsmod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adlplscing e!it, sed diam nonummy nibh euismod tfncldunt ut laoreet dotore magna aliquam erat votutpat.

Рис. 6.8. Свойство установки межстрочного интервала

line-height позволяет растянуть строки

абзаца (внизу) или расположить их ближе друг к другу, с меньшим nромежутком (вверху)

Межстрочный интервал в пиксепах, em, процентах Как и в свойстве размера шрифта font - s i ze, вы можете использовать пикселы,

em или проценты для установки размера межстрочного интервала с помощью свой ства l i ne-height: l i ne-height: 150%: Вообще, процентные значения или em лучше, нежели пикселы: размер, установ ленный в этих единицах измерения , напрямую зависит от параметров шрифта и ав

томатически корректируется пропорционально изменению свойства font -size. Так, если вы установите межстрочный интервал равным

1О пикселам и затем измените

на гораздо больший (например, на 36 пикселов ), то высота останется равной 1О, а строки будут накладываться друг на друга. Однако при использовании значения размера в процентах (скажем,

150 %) межстрочный интервал корректируется про

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

font-s i ze.

144

Глава б. Форматирование текста

Стандартный размер межстрочного интервала браузера, как я уже сказал, составляет 120%. Таким образом, когда вы хотите уменьшить высоту строк, про межуток между ними, используйте меньшее значение. Соответственно, чтобы уве личить межстрочный интервал, то есть размещать строки дальше друг от друга,

используйте значение больше

120%.

ПРИМЕЧАНИЕ------------------------------------------------- Чтобы определить размер межстрочного интервала, браузер вычитает высоту шрифта из высоты

строки. В результате получается размер межстрочного интервала (leadiпg) между двумя соседними

строками текста абзаца. Допустим, размер шрифта составляет 12 пикселов. Межстрочный интервал, установленный в размере 150 %, в итоге равняется 18 пикселам. Таким образом, браузер добавля ет пустой промежуток размером б пикселов между двумя строками текста.

Межстрочный ·интервал в виде числового значения CSS предлагает еще одну единицу измерения для установки размера межстрочного интервала- просто числовое значение. СSS-код выглядит следующим образом:

line-height: 1.5: После этого значения не нужно указывать никакую единицу измерения. Чтобы

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

1 em, а вы 1,5, то расчетное значение межстрочного интервала равно 1,5 ern. В большинстве случаев эффект при указании значения 1,5 ern или 150 % сота строки установлена равной

ничем не отличается. Иногда множитель достаточно удобен. Особенно когда вло женные теги наследуют значения межстрочного интервала родительских тегов.

Например, вы устанавливаете атрибут высоты строки

<body>, равный 150 %. Все

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

размер шрифта установлен равным 10 пикселам. 150% от 10 пикселов составля ет 15. Все теги унаследуют межстрочный интервал размером 15 пикселов. Так, если на веб-странице есть абзац текста со шрифтом высотой 36 пиксело в, его межстроч

ный интервал размером

15 пикселов будет намного меньше самого текста, а строки

сольются вместе.

В данном примере вместо высоты строки 150% для тега <body> лучше устано вить общий для всех тегов пропорциональный базовый межстрочный интервал в размере 1,5. Любой тег, вместо того чтобы наследовать точное абсолютное значе ние высоты строки в пикселах, просто умножает размер своего шрифта на этот

коэффициент. Так, в вышеупомянутом примере, где абзац текста отображен разме 36 пикселов, межстрочный интервал составит: 1,5 х 36 =54 пиксела.

ром шрифта

Выравнивание текста Одним из самых быстрых способов изменить внешний вид веб-страницы является выравнивание текста. Используя овойство text- а l i gn, вы можете разместить абзац в центревеб-страницы (горизонтально), расположить текст вдоль левого или пра

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

145

Форматирование абзацев текста

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

1eft, ri ght, just i fy, center.

text -al ign : center: Выровненный текст замечательно выглядит на печатной странице, главным

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

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

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

фис. Когда вы пользуетесъ ключевым словом

justi fy для выравниваниЯ по шири

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

трудночитаемым. Поэтому, применяя такое выравнивание на веб-страницах, убе дитесъ в том, что получившийся текст имеет приятный внешний вид.

ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ Метод стеноrрафим дпя набора стмпей, форматирования текста Многократный повторный набор mtлевых сВойств

следовать 3Начение самоrо межстрочного интер

достаточно утомительное занятие, особенно если

вала: Ж

нужно мсnодьзовать нескодько ра311ичных текстовых

свойств сра3у. К счастью, в CSS есrь свойство font, об- IМ!fЧаЮЩее написание CТИJieti. Оно позвопяет объединять

•

1 Sem/150 иди 24рх/37рх;

последние два свойства должкы 6ытъ комбинацией: размер шрифта!межстрочный интервал (иnи fontsize/lme-helght); все остальные моrут быть пере

неаолько свойств в одну строку: font-style, fontvariant, font-weight, font-size, 1ine-height и font-fami 1у.Например,о6ъявnениеfоnt: ital ic bold small-caps lSpx/150% Arial. Helvet1ca. sans-seri f. создает nодужирный, курсивый шрифт с мадыми nроnисными буквами размером 18 nик сеnов, семейства дrial (иди Helvetica, иди sans-serif)

Наконец, исключение значения из сnиска означаетто

с межстрочным интервалом

же, что и установка его по умодчанию. Допустим, вы

150%. Имейте

в виду

числены в любом nорядке. Наnример, оба объявnе ния:fоnt ~

1talic ЬOld small-caps 1 5em Arial small-caps 1tal1c l.Sem Arial:-

Иfont: Ьо1d

равнозначны и к ним nрименен одинаковый 3ффект.

создали стиль <р>, который форматирует все абзацы

следующие nравила:

полужирным курсивным шрифтом с малыми nропис

не обязатеnьно nрименять все эти свойства, но нуж

ными буквами м межстрочным интервадом

но вкnючить размер шрифта и начертание (семей

(совсем не обязательно по повторЯ'Ть). Затем создади

font: l.Sem Georgi а. Times.

аилевой класс nод названием, скажем, .spec1 а 1Paragraph стакимобъявлением стиля шрифта: font: 1. sem Ari а 1. -и применили его к какому-то аб3ацу

ства шрифтов):

serif:; •

исподьзуйте один nробел между каждым значе нием свойства, а 3аnятую только для того, чтобы отделить семейства шрифтов в списке:

Ari а 1.

Helvetica. sans-serif; •

определяя межпрочный интервал, добавляйте сдеш nосле размера шрифта, за которым должно

2000%

текста. В ре3ультате данный абзац не унаследует по лужирное курсивое начертание с маnыми nроnисны

ми буквами и межстрочный интервал. Искnючение

.speci а1Paragraph font: norma 1 norma 1 norma 1 1. Sem/norma 1 Aria1:. этих четырех значений из стиля

можно nриравнять к наnисанию следующеrо:

146

Глава б. Форматирование текста

Отступ первой строки абзаца и удаление полей абзацев В большинстве печатных изданий первая строка каждого абзаца имеет так назы

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

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

Если у вас есть желание придать веб-страницам индивидуальность, сделать их непохожими на другие, то воспользуйтесь преимуществами таких СSS-свойств,

как

text-indent

margin.

С их помощью вы можете создать отступ первой строки

абзацев и удалить (или увеличить) поля.

Абзацный отступ Для установки отступа первой строки абзаца можно использовать такие единицы измерения, как пиксел и

text-indent:

em:

25рх;

или

text-indent: 5em: Значения в пикселах

абсолютные значения, точное число, в то время как

определяет размер отступа в количестве символов (базируется на текущем разме ре шрифта). СОВЕТ--------------------------

свойстве абзацного отступа

text-indent

вы можете использовать отрицательные значения для

создания выступа, то есть абзаца с выступающей (смещенной, «свисающей») влево первой стро

кой.

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

риной элемента, в который заключен абзац. Например, если текстовый отступ установлен равным

50 % и абзац охватывает всю ширину окна браузера, то первая

строка будет начинаться посередине экрана. Если вы меняете размеры окна, то

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

тов веб-страницы, читайте в разд. <<Определение параметров высоты и ширины» гл.

7).

Управпение полями (границами) абзацев Многие веб-дизайнеры не любЯт промежутки или дополнительные интервалы, которые любой браузер добавляет между абзацами. До появления

CSS

с этим

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

147

Форматирование абзацев текста

margi n-top и margi n-bottom для удаления (или увеличения) этих промежутков. Что бы полностью избавиться от верхнего и нижнего полей, введите следующее:

margin-top: 0: margin-bottom: 0: Чтобы удалить поля между всеми абзацами неб-страницы, создайте такой стиль: р

{

margin-top: 0: margin-bottom: 0: Для установки значений абзацных полей, как и для отступов, вы можете при менять такие единицы измерения, как пикселы или

em. Можно также использовать

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

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

em или

пикселах.

;РИМЕЧАНИЕ----------------------------------------------- Поскальку не все брауэеры обрабатывают верхнее и нижнее nоля заголовков и абзацев соГласо ванно, рекомендую nросто обнулить (то есть удалить) все nоля в начале таблицы сrилей. Посмот реть на то, как это работает, можно в раэд. «Начинаем с чистого листа» гл.

Для создания спещ1:альных эффектов можно назначить отрицательное значе

ние верхнему или нижнему абзацному полю. Например, верхняя граница, установ

ленная равной

10 пикселам,

приподнимает абзац выше на

10 пикселов,

возможно

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

Форматирование первой буквы, первой строки абзаца CSS дает возможность форматирования абзаца с использованием псевдоэлементов : fi rst- l ine и : fi rst-1 etter (рис. 6.9). С технической точки зрения они являются селекторами, определяющими фрагмент, к которому применены СSS-свойства.

С помощью псевдоэлемента : fi rst- l etter можно создать начальную заглавную букву или буквицу, имитируя рукописный стиль текста. Например, чтобы сделать первый символ каждого абзаца полужирным и выделить его красным цветом, не

обходимо написать следующее:

J:first-letter { font-weight: bold: color: red: Для избирательной стилизации, скажем форматирования только первого сим вола определенного абзаца, можно применять стилевой класс, например, <D

class="intro">Text for the introductory paragaph goes here .... </р>

. i ntro:

148

Глава б. Форматирование тексrа

ее е

ф с~

Г<:><\·.~

:flrst-word, :flrst-llne

~load

(е hnp: f/css.locotl/chOбt: ~·Googte >1.

LOQtlon

)»

SUtd>

orem lpsum dolor slt amet, consectetuer adlplsclng elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ull8IDCOrper suscipit loЬortis nisl ut aliquip ех еа commodo consequat. Duis autem vel eum iriure d

~~ olore magna allquam erat volutpat. Ut wisl enlm ad minim veniam, quis nostrud exerci tation ullamcorper suscipit nisl ut aliquip ех еа commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit IoЬottis nisl ut aliquip ех еа commodo consequat. Duis autem vel eum iriшe d

loЬortis

1!1

t wisl enlm ad mlnlm venlam, qul~ noatrud exercl tation ullamcorper susCipit loЬortis nisl ut aliquip ех еа commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit loЬortis nisl ut aliquip ех еа commodo consequat. Duis autem vel eum iriure d

868

:first-word, :flrst-llne

[е http://css.iocal/chOб/ТMP2tbxow) ~· Google &ack

ro,."ard

~load

s:~p

Loc.JIIon

Seardl

orem lpsum dolor slt amet, consectetuer adlplsclng ellt, sed dlam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit loЬortis nis1 ut aliquip ех еа commodo consequat. Duis autem vel eum iriure d

. . . olore magna allquam erat volutpat. Ut wlsl enlm ad mlnlm venlam, quis nostrud exerci tation ullamcorper suscipit loЬortis nisl ut aliquip ех еа commodo consequat. Ut wisi enim ad minim venia'm, quis nostrud exerci tation ullamcorper suscipit loЬortis nisl ut aliquip ех еа commodo consequat. Duis autem vel eum iriure d

lli8

l!l

t wlsl enlm ad mlnlm venlam, quls nostrud exercl tatlon ullamcorper suscipit loЬortis nisl ut aliquip ех еа commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit JoЬortis nisl ut aliquip ех еа commodo consequat. Duis autem vel eum iriшe d

Рмс.

6.9. Псеадаэлемент :first-letter форматирует nервый символ стилизуемого эл~нта заглавные буквы абзацев

Затем вы можете создать стиль 'с таким названием, как . i ntro : fi rst- 1ett er. Псевдоэлемент

: fi rst- 1i ne форматирует первую строку абзаца. Вы можете при

менить его к любому блоку текста, будь то заголовок

(h2 :fi rst -1 ine) или -абзац

149

Стилизация списков

(р:

fi rst-1 i ne).

Как и в примере с

: fi rst-1 ine,

можно применить стилевой класс

к единственному абзацу и отформатировать только его первую строку. Допустим, вы хотите отобразить прописными буквами все символы страницы. Примените стилевой класс к НТМ L- коду первого абзаца: <р с 1а s s =

"i nt го··> и

создайте сле

дующее:

. intro:first- 1ine { text-transform: uppercase: } ~МЕЧАНИЕ------------------------------------------------- По какой-то странной причине браузер пользуется с псевдоэлементом

Safari не распознает свойство text-traпsform, когда оно ис :first-line. Другими словами, вы не можете использовать в Safari CSS

для преобразования букв первой строки абзаца в прописные.

Стилизация списков Теги <u 1> и <о 1>создают маркированные и нумерованные списки: взаимосвязанных элементов, пунктов или пронумерованных шагов, последовательности действий.

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

Типы списков Большинство браузеров отображают маркированные списки (теги <u 1>), используя \Шркеры в виде окружности, а нумерованные списки (<о 1>)

числами. В

предваряя пункты

CSS вы можете выбрать три типа маркеров: диск (круглый маркер с за

полнением), окруЖ1lость (круг, полый круглый маркер), квадрат (квадрат с за рисовкой). Для нумерованных списков предусмотрено шесть вариантов-схем нумерации:

decima1, decima1-1eading-zero, upper-a1pha, 1ower-a1pha, upper-roman, -ower- roman (рис. 6.1 0). Все эти варианты можно выбрать, используя СSS-свойство -i st-sty1 e-type: -lst-sty1e-type: square: или

-,st-sty1e-type: upper-a1pha: Mozilla, например Camino 6.1 О), корректно отображают списки с применением deci ma 1-eadi ng-zero, добавляя О перед однозначными числами, например 01. Internet Explorer 6 и 7 не распознаютсписки с применением decima1-1eading-zero или 1ower;"eek. Firefox

и другие браузеры, построенные на основе

(изображенный на рис.

~-----------------------------------------------------"Южно также заменить числа нумерованных списков греческими символами (а, JЗ, у), используя (JIЮЧевое сnово

lower-greek.

150

Глава б. Форматмрование текста

6 06

Usts

.. ф

В.U:k

forw:.r ' Rt iNd

~'-

k an:h

Loatron

dlsc о

• item 1 • item 2 • iteш З

[!J

€) hn:p·f /css.local/chOбfТMPgpd (Q.• Google

Bookmarks

c lrcle

square

item 1 item2 item 3

• item 1 • iteш2 • itemз 1

declmal-leadlng-zero

declmal 1. item 1 2. item 2 3· iten13 lower~alpha а. Ь.

с.

01. itemt 02. iteш2

А.

оз. itemз

с. itemз

В.

upper-roman

r. item 1 11. item2

item 1 item2 item 3

upper-alpha

.._

lower-roman i. item 1 ii. item2 iii. itemз

Ш. itemз

Рис. 6.1 О. Больwинстзо браузеров отображают варианты

itemt item 2

decimal

decimal-leading-zero одинаково

Чаще всего это свойство используют при определении стилей, форматирующих <о 1>или <u 1>.Типичные примеры

sty1e-type : square:}

включение свойства в стили о 1 или

u1: u1 {1i st-

либо в стилевой класс, применяемый к одному из этих тегов.

Тем не менее вы можете применить это свойство и к отдельно взятому элементу списка ( <1 i> ). Вы даже можете применить несколько стилей с различными марке рами котдельным пунктам-элементам одного и того же списка. Например, можете создать стиль тега

<u1>, устанавливающий

маркеры в виде квадратов, а затем соз

дать стилевой класс .circ1e, который изменяет тип маркера на окружность:

.circ1e { 1ist-style-type: circ1e: } Теперь примените класс к элементам списка через один для чередования квад ратных и круглых маркеров:

<u1> <1i> Item К/1 i> <1i c1ass~"circ1e">Item 2</li > <1 i> Item 3</l i> <1i c1ass~"circ1e">Item 4</li> </u1> Иногда может лонадобиться вообще скрыть маркеры, в том числе тогда, когда вы захотите использовать свои собственные графические маркеры (см. обучающий урок этой главы). Кроме того, когда паиель навигации сайта представляет собой

151

Стилизация сnисков

список ссылок, вы также можете использовать список

<ul>,

скрыв его маркеры

(см. подраздел •Использование маркированных списков~ разд. •Создание паие лей навигации~ гл. чевое слово

9). Чтобы отключить отображение маркеров, используйте клю

none:

li st-style-type : none : Позиционирование маркеров и нумерации списков Как правило, браузеры отображают маркеры или числа списков слева от текста пунктов

элементов списка (рис .

6.11, слева).

Ключевое слово

outs i de визуально

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

CSS вы може

l i st -sty l e-position.

Определить местоположение можно, как говорилось выше, слева от текста пунктов

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

list-style-position: outside: или

l i st-style-position: inside:

llst-style-posiHon: outslde

llst-style-posltlon: lnslde

• il..orern ipswn dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibb euismod tincidunt ut laoreet dolore magna aliquarn erat volutpat. . • Ut wisi enim ad minim veniam, quis nostrud exerci tatio tincidunt ut laoreet dolore magna aliquarn erat volutpat. • Тlncidunt ut laoreet dolore magna aliquam erat volutpat nonurnrny nibh euisrnod tincid.

• iLorem ipsum dolor sit arnet, consectetuer adipiscing elit, sed diam nonurnrny nibb euismod tincidunt ut laoreet dolore magna aliquam erat .volutpat. • Ut wisi enim ad minim veniam, quis nostrud exerci tatio tincidunt ut laoreet dolore magna aliquam erat volutpat. • Тlncidunt ut laoreet dolore magna aliquam erat volutpat nonummy nibh euismod tincid.

iLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diarn nonurnrny nibh euisrnod tincidunt ut laoreet dolore magna aliquam_erat volutpat. 2. Ut wisi enim ad minim veniam, quis nostrud exerci tatio tincidunt ut laoreet dolore magna aliquam erat volutpat. 3· Тincidunt ut Jaoreet dolore magna aliquam erat volutpat nonummy nibh euismod tincid.

1. iLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonurnrny nibh euisntod tincidunt ut laoreet dolore magna aliquam erat volutpat. 2. Ut wisi enim ad rninim veniam, quis nostrud exerci tatio tincidunt ut looreet dolore magna aliquam erat volutpat. 3· Тincidunt ut laoreet dolore magno aliquam erat volutpat nonummy nibh euismod tincid.

Рис. 6.11. Исnользуя свойство

list-style-position, вы можете уnравлять nозиционированием маркеров и чисел в сnисках

152

Глава б. Форматирование текста

СОВЕТ-------------------------------------------------- Вы можете изменить промежуток между маркером и текстом путем увеличения или уменьwения

значения свойства paddiпg-left: (см. раэд. «Управление размерами полей и отступов» гл. 7). Чтобы использовать это свойство, вам нужно создать стиль для тега элементов списка <li>. Этот способ работает только в том случае, если свойство list-style-positioп определено со значением outside (или вообще отсутствует).

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

свойств margi n- l eft и

paddi ng- l eft равными О. Чтобы удалить отступ, можно создать

такой групповой селектор:

ul. ol { padding-left: О; margin-left: 0: Вы можете создать стилевой класс с такими свойствами и применить его к кон

кретным тегам <u l >или <о l >. Рекомендую установить собственные значения свойств

padding

margin

по той. причине, что одни браузеры для управления отступом ис

пользуют свойство

Explorer).

paddi ng (Firefox, Mozilla, Safari), а другие- margin (lnternet paddi ng и margin вы можете прочесть в следующей

Подробно о свойствах

главе.

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

margin-top

margin-bottom к конкретным элемен

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

<1 i >:

создайте стилевой класс и примените его индивидуально к каждому тегу. Стиль не

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

Графические маркеры Если вам недостаточно стандартных маркеров квадратной и круглой формы, мо

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

Photoshop или Fireworks, можно быстро создать красочные и интересные

маркеры. В качестве образцов можете рассмотреть примеры коллекции рисунков

и шрифтов символов (таких как Webdings). СОВЕТ---------------------------------------------------

Множество примеров маркеров можно найти в Интернете. По адресу http://www.stylegala.com/ features/bulletmadness/ находится более 200 бесплатных образцов маркеров. Зайдите также на сайт www.cssjuice.com/38-free-icon-checkpoints, где собраны ресурсы с коллекциями значков и марке ров.

153

Стилизация сnисков

СSS-свойство

l i st- sty 1е- i mage позволяет определить путь к графическому сим

волу на сайте таким же образом, как вы указываете местонахождение файла с изо

бражением, используя атрибут

src НТМL-тега <img>. Синтаксис команды следу

ющий:

list -style- image : url(images/bullet .gif) : Термин url и круглые скобки обязательны. Часть, заключенная в круглые скоб ки,

в данном примере

i mages/bu 11 et . gi f

-это и есть путь к графическому симво

лу. Обратите также внимание на то, что, в отличие от

HTML, не нужно заключать

путь в кавычки.

ИНФОРМАЦИЯ ДЛЯ ОПЬIТНЬIХ ПОЛЬЗОВАТЕЛЕЙ Настройка nараметров маркеров м чисеп в сnисках

Во3МОЖНО, вы хотите стилизовать числа нумерован

Ятем создайтестиnевай кnасс, наnример .regularL ist,

ных стк:ков таким образом, чтобы они отображались

который устанавливает черный цвет шрифта и нор

nопужмрмым шрмфтом красного цвета вместо давно

мальную плотность (то есть не полужирную) . Теперь

надоеашеrо черного. Как можно настроить внешний

заключите каждый элемент сnиска в теr <sp3n> м при

вид маркеров и чисел в сnисках?

менмте к ним стилевой класс. Например: <1 i ><span c]ass· · regularl -ist ">Item 1</span></li>.

CSS

nреД/\агает несколько сnособов настройки nа

раметров маркеров, nредваряющих пункты

Сейчас маркеры отображаются поnужирным красным

шрифтом, а текст - обычным черным цветом. К со

~мменты сnмска. ВЫ _можете исnользовать собствен

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

ные rрафмческме символы, как описано выше. Но

списка.

ммtется еще два метода. Один из них достаточно

трудоемкий, однако работает с большинством бра у-

ПродВИнуtЫЙ сnособ, экономящий объем сss-кода, со

• зеров, друrой- самый современный, но не рабо тает в lnternet Explorer 7 иnи его более ранних вер

ровонноесоiJержимое. Посутм, этовсето, что не набмрает

СИ.IIх.

стоит в том, чтобы исnользовать так называемое СlfНеРU ся вручную в виде кода веб-араницы. ~ автоматически добавляется браузером при отображении страницы.

Рассмотрим nервый метод. Предположим, вы хоти

Хорошийпример -сами маркеры. ВЫ не вводитезнаки

те, чтобы числа нумерованного списка были ото

маркера при создании списка- они добавляются на

бражены полужирным шрифтом красного цвета,

веб-страннцу сами. С помощью

а текст nунктов- обычным черным. Создайте стиле

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

воМ кпас:с.ш делали это применитеnьно ктеrам <о 1>

жимое и даже отформатировал доnжным образом все,

CSS можно сообщить

и <1 i>. На данном этаnе все содержимое сnиска долж

что находится перед текстом nунктов списка,-

но отображаться nоnужирным шрифтом красного

ht tp: //1 . О генерируемом содержимом вы узнаете

цвета.

в разд. «fенермруемое содержимое страницы» m. 16.

<l 1> .

~МЕЧАНИЕ----------------------------------------------- Укаэывая nуть или адрес к графическим файлам (изображениям, графическим символам) во внеш

неМ таблице стилей, имейте в виду, что nуть должен указываться отн001тельно таблицы стилеМ, а не веб-сrраницы. Более подробно об этом вы прочтете в раэд. «Фоновые изображения» гл. когда мы начнем использовать графику.

154

Глава б. Форматирование текста

Свойство

list-style-image

позволяет использовать графические символы

в качестве маркеров. Однако оно не обеспечивает управления его размещением. Маркер может оказаться слишком высоко или низко расположенным относи тельно пункта списка. Придется переделывать сам графический символ марке

ра, пока он не будет сочетаться. О более грамотном подходе вы прочтете в гл.

. Он основан на использовании свойства background-image.

Это свойство позволя

ет точно позиционировать графические элементы, в том числе маркеры в спис ках.

сов~----------------------------------------------------

как и в случае со свойством foпt (см. врезку «Йнформация для опытных пользователей» в раэд. «Фор матирование абзацев текста» этой главы), здесь применяется метод упрощенного набора атрибутов списков. В свойстве числе

list-style могут быть перечислены все параметры форматирования списков, в том list-style-image, list-style-positioп и list-style-type. Например, стиль ul { list-style: circle inside; }

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

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

нием типа маркера и графического символа

- list-style: circle url(images/bullet.gif) inside; -

и гра

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

окружность.

Обучающий урок: форматирование текста

....

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

CSS.

Чтобы начать обучающий урок, вы должны загрузить файлы, содержащие учеб

ный материал. Как это сделать, рассказывается в конце гл.

Файлы текущей обу

чающей программы находятся в папке с названием Об.

Настройка параметров страницы Начнем с таблицы стилей и добавим стили для форматирования основного текста страницы.

Запустите браузер и откройте файл

Здесь пока особо не на что смотреть

text. html (рис. 6.12). - есть только коллекция заголовков, абза

цы и один маркированный список. Но скоро вы заметно преобразите эту стра ницу.

Откройте файл

text. html

в НТМL-редакторе.

Начнем с добавления к этому файлу внутренней таблицы стилей.

В заголовке

<head>

веб-страницы щелкните кнопкой мыши сразу после закры

вающей скобки тега Дважды

<title>. Нажмите Enter и наберите <style type="textlcss">. нажмите Enter и наберите </ sty l е>.

155

Обучающий урок: форматирование текста в действии

CSS The Мissiog Maoual E~ploriog Typograpbic

Possibilities

oovcml><r 30 Rod DiЬЬie •Lo.=lpsuш Rtpt~ qao io еа

•

·L«-~

• Rqxel><aderacpioca

. to.-1• E S$t

RqxeЬmdoril

qvaro

qoi io са

DUUa

Ut .... ad ................. ~- ..~ ..... cocporis ~ JoЬonosan. ";,; .. aliqoid"' ""COIDIDOdi~ Qui. "''""' vd...., in repr~ <Р io а ''Oiuptate '-dil esse- oilil шо11:..ае ~. wl iloo> qoi dolott10...., 1\>f;ia( quo YOiopla$u. .....ad ......... _ ~- ....datiooem ...." cocporis snsф! laЬotio<am. ";,; .. aliqoid .... COIDIDOdi ~1 Qui. ..._ vd CUO!Ue rcpr<lleado:d qoi ia еа~е oilil ~ eonsequaJur v d - qoi dolotem <OШfo;illl quo ~- pa;.tur?

.,......_7

vdO....,-

9uis autero vel euro Ut ..-. ad .,._. veaiu.. ~ aosiND exerdatiooem ,._ corpoos юscip&loЬcxio...,_ ";,; ut aliqoid ех и COIDIDOdi ~7 Qui. -wJCIID intcpreЬmdoril qoi ia еа~ qaamubl шoil:..ae ~. ,,.. q\li dolot<UI ....,.fu8iol quo ~ .... ........_?Ut . _ ad ........ ~- ~ eo<po<is snsф! laЬotio<am. oisiчt oiqoid<Ot .. COIDIDOdi~7 Qw. ...... w~ ........ rcpr"'--ect qui ;" ... ~.vdO oililoooleoЬoe~. v d - qoi dolot<UI . . . . . . quo ~ .... poriotur7

vaa....

vdO....,

......

.... -

Рис. 6.12. Работа надлюбой веб-страницей начинается с обычного НТМL-содержимого

Теперь, когда основные теги стилей на месте, вы добавите сброс стандартных настроек CSS. Вместо того чтобы набирать вручную весь код, просто скопируй-

те и вставьте CSS из внешней таблицы стилей.

Откройте файл

reset. css.

Скопируйте весь код оттуда и вставьте его между от

крывающим и закрывающим тегами

<styl е>, добавленными в предыдущем шаге.

Если вы просмотрите файл text . htm l в браузере, то увидите, что текст выглядит примерно одинаково, то есть все стандартное форматирование браузера было устранено и теперь можно начинать с чистого листа.

5. Нажмите Enter и введите body {. Это базовый селектор, который применяется к тегу в гл.

4, другие теги

<body>. Как обсуждалось

наследуют свойства этого тега. Вы можете настроить неко

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

Снова нажмите

Enter и добавьте следующие три свойства:

color : #002048: font-family: Arial. Helvetica. sans -serif: font-size: 62 .5%:

156

Глава б. Форматирование текста

Эти свойства устанавливают темно-синий цвет текста, семейство шрифтов

Arial

(или один из последующих двух шрифтов списка, в зависимости от того, какой

шрифт установлен на компьютере посетителя веб-страницы) и размер шрифта, равный

62,5 %.

ПРИМЕЧАНИЕ-----------------------------------------------3ачем нужно устанавливать базовый размер шрифта веб-страницы равным

62,5 %?

Оказывается,

если умножить 62;5% на 16 пикселов (стандартный размер шрифта текста большинства браузе ров), получится

пикселов. При таком начальном размере шрифта очень просто вычислить раз

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

1,5 em будет равняться 1,5 х 10, или 15 пикселов, 2 em - 20 пикселов и т. д. Считать очень просто, умножая размер в em на десять. Читайте об этой и других методиках, касающихся размеров шриф тов, по адресу http://clagnut.com/Ьiog/348/.

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

Enter и

набрав закры

вающую фигурную скобку для указания окончания стиля.

На данном этапе стиль дОЛ?f<еН выглядеть следующим образом:

body { color: #002048; font-family: Arial. Helvetica. sans-serif; font-size: 62.5%: Ваша таблица стилей закончена.

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

ким. Не волнуйтесь, это из-за размера 62,5

%, который вы установили в шаге 6.

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

em для других тегов.

Форматирование заголовков и абзацев Теперь, когда основное форматирование текста выполнено, пришло время улуч

шить представление заголовков и абзацев.

Вернитесь к файлу

text. html

в НТМL-редакторе. У становите курсор за закры

вающую скобку селектора тега

Enter для создания

<body> во внутренней таблице стилей, нажмите h1 {.

новой строки кода и наберите #ma i n

Это селектор потомка, более специфичный по сравнению с базовым селектором тега

HTML.

В данном случае селектор указывает браузеру применить следу

ющее форматирование к любому тегу

<hl>, находящемуся внутри другого main. Если вы просмотрите код HTML веб-страницы, то увидите, что там есть тег <div> с идентификатором main (<div id="main">). Как вы узнаете позже, при создании дизайнов, основанных на CSS, достаточно тега с идентификатором

157

Обучающий урок: форматирование текста в действии

распространено группирование НТМL-тегов внутри тегов

<di v>.

Вы сможете

размещать отдельные теги <di v> для создания столбцов и других составных раз меток страниц. Распространено также использование селекторов потомков на

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

2. Нажмите Enter и наберите три СSS-свойства:

color: #FF6600: font-family: "Arial Black". Arial. Helvetica. sans-serif: font-size: 4em: Вы только что изменили цвет заголовков

вы установили размер шрифта равным

<hl>, а т;:tкже их шрифт. Кроме того, 4 em, что для большинства браузеров

составляет 40 пикселов (если, конечно, посетитель не изменял параметры шриф

тов в настройках своего браузера). Это все благодаря размеру

62,5 %, установ 6. Таким образом, базовый размер шрифта стал составлять высоту, а 4 х 10 задает размер 40 пикселов.

ленному ранее в шаге

10 п:й:кселов

3. Завершите текущий стиль, нажав Enter и набрав закрывающую скобку. Законченный вариант стиля должен иметь следующий вид:

#main hl { color: #FF6600: font-family: "Arial Black". Arial. Helvetica. sans-serif: font-size: 4em:

Сохраните файл и воспользуйтесь предварительным просмотром в браузере. Теперь изменим внешний вид остальных заголовков и абзацев.

5. Вернитесь к файлу text. html в НТМL-редакторе. Переведите указатель за за крывающую скобку стиля <hl>, нажмите Enter и добавьте следующие стили:

#main h2 { font: bold 3.5em "Hoefler Text". Garamond. Times. serif: border-bottom: lpx solid #002048: margin-top: 25рх: Здесь идет еще один наследуемый селектор, который относится только к тегам

<h2>, находящимся внутри другого тега с идентификатором ma i n. Свойство font сокращает количество кода, объединяя в себе font -wei ght, font- s i ze и font- fami ·1 у. Другими словами, одна строка делает заголовок полужирным, устанавливает для него высоту

3,5 em и определяет шрифт.

Кроме того, этот стиль добавляет декоративную границу под заголовком и немно го пространства между заголовком и тегом над ним (то есть пространство добав

ляется· между заголовками

4CSS The Missing Manual» и «Exploring Typograph.ic

Possibllities» ). Пришло время взяться за другие заголовки.

158

Глава б. Форматирование ·текста

6. Добавьте новый стиль под тем, который вы создавали в предыдущем шаге:

#main hЗ { color: #FбО: font-size: 1.9em: font-weight: bold: text-transform: uppercase: margin-top: 25рх: margin-bottom: lOpx: Этот стиль устраняет некоторые свойства обычного форматирования: цвет, раз мер шрифта, жирность, а также использует свойство

text-transform, чтобы

все

буквы текста внутри заголовка <hЗ> стали прописными. Наконец, он добавляет немного пространства сверху и снизу заголовка с помощью свойства

margi n.

Далее вы улучшите внешний вид абзацев.

Добавьте новый стиль на страницу:

#main р { font-size: 1.5em: line-height: 150%: margin-left: 150рх: margin-right: 50рх: margin-bottom: lOpx: Этот стиль содержит свойство

l i ne- hei ght, которое определяет расстояние меж

ду строками. Значение

добавляет немного больше пространства между

150%

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

Этот стиль также увеличивает размер шрифта до

1,5 em ( 15 пикселов для боль

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

ma rgi n приходится

набирать слишком

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

Теперь попробуем более продвинутый тип селектора.

Добавьте следующий стиль к таблице стилей:

#main p:first-line { font-weight: bold: color: #999: Псеодаэлемент : fi rst- l i ne воздействует только на первую строку абзаца. В этом случае именно первая строка текста в каждом абзаце внутри основного <di

будет окрашена в серый цвет и выделена полужирным.

Сохраните страницу и откройте ее для просмотра результатов в браузере. На текущий момент ваша веб-страница должна быть похожа на ту, что показана на рис. 6.13. ·

159 ·

Обучающий урок: форматирование текста в деt1ствии

Ut &nlm ad minlma venlom, qula nosttum ex.rcitМ!onem ul18m corpons commodi consequalut? Qula aulem ve! eum lure ~ehell<lenl qulln м voluptate ve!lt ••• quam nlhll moieeliae oonsequodut, vel UkJm qul clolcnm eum fuglat quo volupCas nulla peri8lur? Ut enim 8d mlnlmo veni8m, q\118 noettum exercltalionem ull8m corpons sueclpil laЬorloeam. ..-; ut aliquld ех еа commodl consequetur? Qula autem vel eum lure reprehendent qui ., ее volupCa\1t ve!lt е8$8 quam nih!l mo48&1iae consequetur, ve! lllum qul c1a1otem eum fugi8l quo volupCas nulle paNitur? ·~ leЬotio&am. м! ut a!oquld ех •

AUTEM VEL EUM Ut anim ad mlnlma veniam, qula noatrum exerclll!tlonem ullam corporla euscipct laЬorioeam. nisl ut eliquld ех ее conmodl coneequalur? Qula autem vel eum t1111t reprehenderit qui in еа voluplate velilesse quam nihll mol8sli8e conaequeu, vellllum qul dolorem eum fuglat quc voluplas nufle pМatur? Ut enim 8d rrinlma ven!em. quls noetrum exerc.tnonem ullam ccxpone susclp!t latюr!osam, noar ut allq<жl ех м commodl consequatur? Qu<s autem vel eum lunt reprehenderit qui in еа voluptale velit eese quam nil'lil moieeliae consequalur, ve! ilum qul c1a1otem eum fugial quo voluptas nul!a perialur?

Рис. 6.1 Э. Внешний вид веб-страницы nреображается: параметры заголовков, абзацев и основного текста nриведены в порядок

Форматирование списков На этой странице есть один маркированный список . Вы переместите

ero

вверх

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

1. Вернитесь к файлу text. html в НТМL-редакторе. Добавьте следующий стиль в конце внутренней таблицы стилей:

#main ul { margi n: 50рх О width : 1 5 0 рх; float : r ight :

25рх 50рх:

При форматировании списков вы обычно создаете стили для двух разных эле

ментов: непосредственно для самого списка (тега <ul >для маркированных либо тега

<ol> для нумерованнi.Iх списков) и отдельных элементов списка (тег <li>).

Этот стиль управляет всем списком.

160

Глава б. Форматирование текста

В стиле выполняется несколько действий. Во-первых, свойство margiп исполь зуется в сокращенной записи. Одна строка устанавливает все четыре поля во

круг списка, замеЩая четыре отдельных свойства ma rgi п

( ma rgi п- top, ma rgi п- ri ght

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

правая, нижняя и левая. Таким образом, этой стиль устанавливает поле шири ной 50 пикселов вверху списка, О - справа, 25 - внизу и 50 пикселов - слева. Свойство width задает для всего списка ширину 150 пикселов. Если какой-ни будь пункт списка содержит больше текста, чем может поместиться в пределах этого пространства, он переходит к другой строке. Свойство

му волшебное: в данном случае fl oat:

fl oat по-настояще ri ght означает перемещение списка вверх

к правому краю страницы. Это свойство также приводит к тому, что следующий

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

Добавьте еще один стиль во внутренней таблице в файле

text. html:

#mai п l i { color: #207EBF: foпt-size: 1.5em: margiп-bottom:

7рх:

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

ПРИМЕЧАНИЕ----------------------~----------------------- Если вы хотите увеличить пространство между пунктами списка, необходимо добавить верхние или нижние поля для тега <li>. Добавление полей к тегам <ul> или <ol> просто увеличит простран ство вокруг всего списка.

Сохраните страницу и воспользуйтесь предварительным просмотром в браузере.

Теперь страница должна быть похожа на ту, что представлена на рис.

6.14.

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

одного или двух из них. В этом обучающем примере абзац рядом с верхней частью страницы- <<November 30 Rod DibЬle>->- содержит особую информацию (о дате публикации и об авторе). Сделаем так, чтобы этот абзац выделялся среди других, добавив класс к

HTML и

создав для него стиль.

Найдите вышеупомянутый абзац в коде HTML (<p>пovember 30 <stroпg>Rod Di ЬЬl e</stroпg></p>) и добавьте cl ass="byl i пе" к открывающему тегу <р>. Код HTML должен выглядеть так: <р class="byline">пovember

<stroпg>Rod DibЬle</strong></p>

161

Обучающий урок: форматироеание текста в действии

.CSSTWOII'.P.Y·-fil< !dt r- ~ l1i!tщ ~ !ools

<.,.. Q

о;.м~со

-~ 4

....

ID ГdcJ/JZ;,Щ_"'o.ng/OO.щmm.,2<102_t~""' H•l [~НGосф

с_. ...Jcss- Ю FomoJ- ~ ...,_..О

l"-!

w-..- Gl м..-.....-,." o..cm.- •: R.soz.- ,/'тоо~r 0v-s

css The Missing Manual E xEloring Typo2'faEhic Possibilities novemЬer 30

ESSE QUAM

Rod

0\ЬЬ\е

NULLд Ut en1m ad mtnima venlam quls noswm exercitationem

u11am cotp0<1s suscip<l lai>Oiiosam, ntSI ur aloquod ех еа commodr

• LOfem lpsum • Reprenendent quo '" еа • LOfem lps".m

consequal..r? OI.IS autem ..е~ a.m к.rre repr~ qur.., еа voluplate Yelll esse quam nrhl\ molesUзe consequaiUr, ..е! ..",. • Reprenendent quo '" ез qur dolo<em et.m tug>ar qur> YOiup(as n<JIIa pariatur? Ut enm ad • Loremlpst.l'l'l monma ~. qurs nosuum exe«:~aьonem tAiam corpons • Reprehendent quo rn ез susc.po~lзЬoriosam, nrsr ut aliqurd ех еа commodl consequatut? OUis autem vel etJm u-e reprehendenl qw .., еа I/Oiuptate ve1rt esse qul)m nrhll mo~est~ae consequatur, ve1 ..",. qur dolorem etJm fuqrat quo VOiup!as nula panatur?

QUIS AUTEM VEL EUM Ut •nlm ad mlnlma venlam. qui• nourum exerchationem ullam corporis suscipit laЬonosam, nrs1

ut a\lquld ех еа commodi conэequai\J(? OI.IS aurem vel eum lure reprehende(c quo.., еа voJuplэte vet1t esse quam nhl molestJae consequatUr, vel illurn qur dolo<em eum fugrat quo voiJplas nula panat..r? Ut enrm ad miМ'I\3 \/ef118m, QUrS nostr..n

;

exercllanonem Ltam corpoos suscope laЬonosam, ПISI ur alrQUrd ех еа commodr consequatu? Quos ao.aem ..е! eum rure reprehendenl qur rn еа volupta!e velit esse quam ni/111 molestiae consequanк, ve1 ilum qudolorem e\JIТI fugiat quo voluptas nula pмatur?

1 ! i

Oone

Рмс. 6. 14. Свойство

float дает интересные во3можности

при проектировании ди3айна.

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

Теперь осталось создать стилевой класс, переопределяющий общие свойства

форматирования абзацев на этой странице.

Во внутренней таблице стилей рядом с верхней частью страницы добавьте стиль

для этого абзаца:

#main .byline { color : #999999 : font-size: l . бem: margin: Spx О 25рх

50рх :

Этот стиль настраивает цвет, размер и расположен ие только одного абзаца.

Заметьте, что, если бы вы назвали этот стиль просто

. byl ine (базовый селектор

класса), он бы не работал. Благодаря правилам каскадности, описанным в пре дыдущей главе, . Ьу 1i ne является менее значимым, чем стиль #mai n р, созданный

в шаге

7 пару страниц назад, поэтому он будет не способен переопределить цвет,

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

#main

р. А

#main .byline, в свою очередь, является

более значимым и ус пешно форматирует верхний абзац.

162

Глава б. Форматиро~ние текста

Этот абзац по-прежнему требует доработки. Было бы замечательно, если бы имя выделялось еще больше.

HTML в этом случае дает нужное средство.

Добавьте следующий стиль к таблице стилей:

#main .byline strong { color: #207EBF: text-transform: uppercase: margin-left: 5рх: Если вы просмотрите код находится внутри тега

HTML в шаге 1, то увидите, что имя- «Rod DibЬle>> -

<strong>. Тег <strong> используется для того, чтобы под

черкнуть текст и пометить его как важный. Но это не значит, что вам нужно

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

<strong>,

но

. byl i ne, и толь идентификатором ma i n - вот

только тогда, когда он появляется внутри другого тега с классом

ко если они все находятся внутри еще одного тега с так, очень специфично.

Этот стиль делает текст синим, превращает буквы в прописные и добавляет немного пространства с левой стороны (немного отодвигая имя от текста

«November 30>> ).

Поспедние штрихи Заключительная корректировка дизайна неб-страницы будет состоять в добавле нии нескольких атрибутов дизайна, форматирующих страницу и главный тег <di v>,

чтобы они выглядели лучше. А закончите вы, добавив немного интересного фор матирования для текста.

Вернитесь к файлу

text. html

в НТМL-редакторе.

Сначала зададим фоновый цвет и изображение для страницы.

Найдите стиль

body в верхней части внутренней таблицы стилей и добавьте одно

новое свойство (изменения выделены полужирным):

body { font-size: 62.5%: font-family: Arial. Helvetica. sans-serif: color: #002048: background: #ElEEFD url(images/bg_body.png) repeat-x: Свойство

background

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

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

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

Далее мы преобразим основной тег

<di v>.

163

Обучающий урок: форматирование текста в действии

Добавьте еще один стиль между стилем

body

и стилем

#mai n hl:

#main { width: 740рх: margin: О auto: padding: О lOpx: border: 4рх solid white: background: transparent url(images/bg_banner.jpg) no-repeat: Щелкните кнопкой мыши после закрывающей скобки} для стиля body, нажми Enter и введите код, представленный выше. Вам не обязательно создавать

те

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

лями, которые форматируют теги внутри этого

<di v>,

<di v>, перед другими сти кажется логичным.

ПРИМЕЧАНИЕ------------------------------------------------

стратегиях организации таблиц стилей вы узнаете в подразделе «Используйте несколько таблиц

стилей» раэд. «Организация стилей и таблиц стилей» гл.

15.

Свойство width устанавливает общую ширину этого

<di v> (и содержимого внут 740 пиксело в.

ри его), по существу превращая страницу в документ шириной

Значения свойства margi n здесь- О

<di v>

auto

-добавляют О пикселов пространства

auto, paddi ng добавляет пространство внутри раздела, отталкивая содержимое внутри <di v> от линии границы. Наконец, мы также поместили изображение в фоне <di v>. над и под

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

размещающий этот тег посередине окна браузера. Свойство

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

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

Добавьте один последний стиль сразу после стиля

#mai n hl:

#main hl strong { font-size: 150рх: color: white: line-height: lem: margin-right: -1.25em: HTML для заголовка выглядит следующим

образом:

<hl><strong>CSS</strong> The Missing Manual</hl>. <<CSS»

заключено внутри тега

<strong>, так

что данный наследуемый селектор

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

Вы заметите, что высота строки равна ги,

1 em, а как вы

читали в начале этой кни

основывается на текущем размере шрифта элемента, поэтому в данном

случае высота строки будет переведека в данного стиля.

150 пикселов-таков размер шрифта

164

Глава б. Форматироеание теt<ста

Один интересный nрием nозволяет осуществить свойство

торого устанавлено отрицательное значение:

-1 . 25em.

margi n- ri ght, для ко·

Поскольку nоложитель·

ные nоля отодвигают элементы, отрицательные, в свою очередь, присоединяют

элементы друг к другу. Так, в данном случае остальной текст заголовка

Missing

( •The

Manual~) располагается поверх ~css~.

ПРИМЕЧАНИЕ ----------------------------------------------- Исnольэование отрицательных nолей разрешено в

CSS

(хотя это и сложная работа). Их даже nри

меняют для некоторых достаточно nродвинутых разметок

CSS.

Сохраните файл и просмотрите его в браузере. Веб-страница должна иметь вид, представленный на рис .

6.15. Теперь вы може

те сравнить получившийся файл с законченным вариантом text. htm1, который находится в папке Oб_finished учебного материала.

E xploring Typographic Possibilities nowmЬ.r 30

ROO OI8ВLE

ESSE QUAМ NULLA Ut enfca ~ atl:nl_. v•n1AlP\. quh nOJuum

• t.etem lpSu'n

...___....."COfpoiiS--.csom, ......

6pfex<e.-c~a./is...",.,......"

• RfP'~(J.tnea

IIX~ repr~ o..n е.1 voЦIQ8tw8 esse~ nН

• Lotfm~

.........

• Re9rehendett. qw 1n е~

"_c_,..,...""qli_..".!\.981 --noJiapor....-7 Ulenmod ",.,...._\ QUIS

.......

'*"'

.....

no:sarwn ~

•

corpons SUSCCJI ·-~

ReprМtndtft q&a in еа

~.JUМ'IW!f«mцe~cptnee~

wieosseqt8'1nttl..--, wt....,.,qu-omeumlugool...,.

--~

QUIS АUТёМ VEL EUM

IJt en'm ld Мlnfml ventatn. qW noaU'UII' otn;ka1tonet~t utьm corports

---L.C~

Oic.onwnodi<OMeq<....-1

o..;,.._,yt~

a.-nиer('CW~(~W\0.1---deяeq.,a;;wn..,~

. .... llkmqudoiol<m....,"-QUO-"'*'"....u?UI..."

ad rтw'll"na ~. cps no$tn..n\ ~aьonem '*-" corpons susc~

... .

~. ,..,."-....exe~CQ{rmOii~QasaJemwl01.81\u:e

<epf-.мnqu .... - - -.... ---consoquвlur ....,qu-...,..."1190(---por-

Рис. 6 .15. С небольшой nомощью

CSS можно

nревратить простой текст

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

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

CSS, HTML в страницу с отличным

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

Поля, отступы, границы

На любой НТМL-тег воздействует множество СSS-свойств, определяющих, каким

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

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

(веб-дизайнеры называют его свободным, незаполнеюtы.м пространством). Это де лается, чтобы ваши неб-страницы не казались беспорядочными и нечитаемыми

и вообще выглядели профессионально.

Все свойства, описываемые в данной главе, составляют основу блочной модели

CSS,

которая представляет одну из важнейших составляющих этого языка.

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

ваться с тегом <i mg>. Браузер обрабатывает все теги как небольшие блоки. Для него любой тег - контейнер с содержимым: текстом, изображением или другими тегами (рис. 7.1). Область в пределах границ, которая включает содержимое и отступы, может также иметь свой цвет фона. Фактически он является своеобразной под ложкой, то есть расположен поверх фона. Таким образом, когда вы назначаете гра ницы в виде штриховой линии, цвет проступает в промежутках между точками или штрихами линий границ.

Все то разнообразие свойств, в которое заключено содержимое, образует блок, или контейнер. О

Paddi ng - отступ, ~заполнение» - промежуток между содержимым и его гра ницей. Отступ отделяет фотографию от 9каймляющей ее рамки.

О Border- граница, рамка- линия, черта, контур с любой стороны элемента. Гра

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

чая область отступа paddi ng.

166

Глава

Поля, отстуnы, границы

верхнее nоле

верхняя граница r---------------------~ 1

верхний отстуn

j---------r левое nоле

' о

t 1

, левая : левый :Содержимоеnравый: nравая • граница: отстуn , • отстуn •граница, 1

nравое nоле

----------•

нижний отстуn

- - - - - - - - - - - - - - - - - - - ____J

нижняя граница о

~-------- - ---- - - -- --------- ~ - -- ------ ' нижнее nоле

' - - -- - - - -- - -- - - - ----- ---------------- - ----- - - - - - - -- ~ Boxes

о .~

· · ····~ · ··

..·· ,_,,,,...... .. ._ ,,............. _. .. .. .... .. -··-··· .... ..

· X!>lsoы~· IA}CookJoP

f}css •

......... ....... ............... -

e\Forms • {Yimagts • Olnformation• ffi)Мiscellanooщ

Lorem ipsum dolor sit amet, consectetuer adipiscing elft, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit loЬortis nisl ut aliquip ех еа commodo consequat. Duis autem vel eum iriure.

------Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - ---+-taoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation u\Lamcorper suscipit lobortis nisl ut aliqutp ех еа commodo consequat. Ouis autem vel eum iriure.

граница

содержимое

~ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, d diam ' nonummy nibh euismod t1ncidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ul\amcorper suscipit loЬortis nisl ut aliquip ех еа commodo consequat. Ouis autem vel eum iriure.

:J:t'"'D;;.;•..................................................... Рис.

-- ~ · .

___ ............. ...$ ..:4::

7 .1. блочную структуру элемента образует содержимое тега (например,

несколько

предложений текста), а также отстуnы, границы и nonя

Margi n -

поле

это то nустое nространство, которое отделяет один тег от дру

гого. Полем, например, является промежуток, который находится между ниж

ним краем одного абзаца текста и верхним последующего.

Уnравление размерами nолей и отступов

167

Для заданного тега можно применить любые комбинации. Вы можете установить только поле или добавить границы и отступы и т. д. Если вы сами явно не устанав ливаете какие-то из этих свойств, то браузер предопределит их в своих настройках по умолчанию. Как правило, к тегам веб-страниц не добавляют ни отступ ов, ни границ. В то же время теги заголовков и абзацев по умолчанию форматируются браузерами с предопределенными значениями верхнего и нижнего полей. ПРИМЕЧАНИЕ -----------------------------------------------

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

CSS,

для удаления отступов и полей из тегов

НТМL. Потом, когда вы будете создавать дополнительные стили, добавляющие поля и отступы, вы

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

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

margi п и paddi пg используются для отделения одного элементавеб-страницы от друго го. Можно использовать их, например, чтобы добавить пустое пространство между навигационным меню слева и основным содержимым главного разделавеб-страницы справа. Возможно, вы захотите отодвинуть границу от края фотографии (рис.

------------------------

. ' Рмс. 7.2. Каждая фотография этой веб-страницы имеет поле размером 10 пикселов, то есть промежуток. отделяющий две соседние фотографи..,, составляет 20 пикселов

7.2) .

168 На рис.

Глава

Поля, отстуnы, границы

7.2 благодаря отступам изображения отделены друг от друга и для них

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

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

Свойства

padding и margin производят одинаковый

визуальный эффект, и, пока

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

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

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

margin-top, margi n-right, margi n-bott om и margin -left. Аналогично paddi ng-top, paddi ng-right, padding-bottom и padding - left. Вы можете ·использовать любые единицы измерения CSS для определения размеров полей роны элемента:

с отступами:

и отступов, например:

margin- r ight: 20 рх: padding-top : Зеm : margi n- left : 10%: Пикселы и em используются и работают точно так же, как при форматировании' текста (см . разд. <<У станов ка размера шрифта~ гл. соответствующий пустой промежуток, отступ 3

6). Поле 20 пикселов добавляет

em -

промежуток, в три раза боль

ше размера шрифта стилизуемого элемента. Вы можете также использовать про центные значения, но здесь не все так просто (комментарии смотрите во врезке «Информация для опытных пользователей~).

СОВЕТ ------------------------------------------------------Чтобы удалить все nромежутки nолей или отстуnов, исnользуйте своikтва со значением О (наnри мер,

margin-top:

О или padding-Ьottom: О) . Чтобы убрать все доnолнительное nустое nространсnю

с четырех сторон окна брауэера, нужно nрисвоить свойствам margin и padding нулевые значения: margin: О; padding 0;. Это nозволит nоместить баннер-эаголовок, логотиn или какой-то другой эле мент ееб-страницы вnлотную у самого края окна брауэера, без nромежутков.

ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ Поnя, отстуnы в nроцентах

<body>, который имеет ширину всеrо ОКNа брау

При исnользовании в качестве единиц измерения

ется

nроцентов браузеры вычисляют размер nромежутJ<ов

зера. В данном случае значение в nроцентах в11аждый

nолей и отстуnов на основе ширины шмого элемента

кон~q~етный момент времени вычисляется на основа

контейнера, в который заключены форматируемые

нии текущем ширины о11на. Допустим, оно составляет

3лементы. Рассмотрим самый nростой случай веб

760 nикселов. В этом случае левое nоле, равное 10 96, добавит nромежуток 76 пиксеnов с левоrо края стили-

страницы, коrда таким 3лементом-контейнером явля-

169

Управпение размерами полей и отступов

ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ зуемоrозлемента. Но если вы изМените размеры окна

кового навигационного меню. Доnустим, оно имеет

браузера, размер nромежутка левого nоля тоже изме

ширину 300 nикселов. Тег <d1 v> будет элементом-кон

НИТСJI. Уменьшение до

тейнером для всех остальных вложенных в него тегов.

600 ликселов изменит размер на 60 nикселов (10% от 600 nикселов}.

Таким образом, размер nравого nом любого элемента, вложенного в <di v> бокового меню и установленного

Однако 3лемент-контейнер не всегда равен ширине

в размере 10%, будет равен 30 nикселам.

окна браузера. В nоследующих главах книги, когда мы будем создавать болеt сложный дизайн веб-страниц,

При установке nроцентных значений верхнего и ниж

вы увидите, Ч1О Д11J1 разработки комплексного дизайна

него nолей элементов ситуация еще более заnутанная:

nридетСJI доба811.11ТЬ доnолнительные элементы.

эти значения вычисляютСJI на основании ширины эле

мента-контейнера, а не его высоты. Таким образом, 8о3МОЖ1tо, вы захотите добавить в веб-сrраницу тег

20%-ное верхнее nоле составит

<d1v> для груnnировки, отделения содержимого бо-

лизуемого тега.

Сокращенный набор свойств

margin

20% от ширины сти

padding

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

(margin- right, margin- 1eft

и т. д.) утоми

тельно и отнимает лишнее время. Не пугайтесь: здесь вы также можете использовать

сокращенные варианты свойств margin и padding для быстрой установки всех четы рех параметров одновременно:

margin: О lOpx lOpx 20рх : paddi ng : lOpx 5рх Spx lOpx : СОВЕТ----------------------------------------------------Если прм оnисании стиля для СSS-свойсrва используется значение, равное О, то ·совсем не нужно указывать единицу измерения. Например, наберите всего лишь

Порядок определения четырех значений свойств

margin:

О; вместо

margin:

Орх;.

margi n и paddi ng важен. Они

должны идти в такой последовательности : верхнее значение, правое значение, ниж

нее и левое. Без этого у вас могут быть проблемы с форматированием. Самый легкий способ запомнить очередность - по буквам английского слова ТRouBLe (пробле мы, неприятности), соответствующим первым буквам английских слов, отража ющих последовательность: Тор (верх) , Right (право), Bottom (низ), Left (лево). Если вы хотите применить одинаковое значение свойства для всех четырех сто рон, нет ничего проще,- используйте единственное значение. Чтобы удалить все ноля из заголовка

<hl>,

напишите такой стиль:

hl { margi n: 0: Кроме того, пользуйтесь кратким вариантом набора для добавления отстуnов промежутков между содержимым и

padding: lOpx :

ero границами:

170

Глава

Поля, отступы, границы

ПРИМЕЧАНИЕ ----------------------------------------------- Есnи нужно применить одинаковое значение свойства поля или отступа сверху и снизу элемента и одно и то же значение для левого и правого края, можете указывать два значения. Так, объяв

ление

margin: О 2em; 2 em.

удаляет верхнее и нижнее поля, а левое и правое поля устанавливаются

равными

Конфликты полей В

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

CSS

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

7.3,

вверху). Предположим, значение нижнего

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

30 пикселам, а значение

верх

н его nоля следующего за ним абзаца составляет 20 пикселов. Вместо того чтобы сложить два значения, полуqив общий промежуток размером 50 пикселов между списком и абзацем, браузер применяет наибольшее из двух значений - в данном случае 30 пикселов. Если вас это не устраивает, используйте вместо nолей верхний 11д11 вижний отстуn (см. рис.

7.3, вн.изу).

~) Margin Coltapse - Mozilla Firefox

~1@(RJ

hЩ>:f/as.lcx

пикселов

nикселов

!Ci.

: 15 рх top m argm

Рис.

7.3. В случае соnрикосновения двух вертикальных nолей меньшее И3 них игнорируется

На рис.

мером

7.3,

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

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

15 пиксело в, браузер добавляет

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

лам. Чтобы полуqить тот промежуток, который вы хотели

20 nиксе (35 пиксело в), исnоль

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

35 пикселов.

15 пикселам,

пикселам. Он складывается

и flолучается общий промежуток

171

Управление размерами полей и отступов

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

ляете на веб-страницу <<предупреждение>> (заключенное в тег <di v> ). Верхнес и нижнее поля устанавливаются размером

пиксе.1ов, чтобы отделить сообщение

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

и. чтобы добавить небо.1ьшие промежутки между сообщением и верхним и ниж ним краем блока <di v>, устанавливаете для заго"1овка ноле размером

пикселов.

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

<di v>, но вы не правы (рис. 7.4, вверху).

Вместо этого поле появ.1яется над блоком <di v>. В данном с.1учае не имеет значе ния. какого размера поле применяется к заголовку,- ноле все равно окажется

на:J:

<div>. ----------~---------1

IITHTUI HYDROPONICS <div> . & Do <h 1 > _____....-

8if-iiiJ;Jj

not try this at home!

Lorem ipsum doloг sit amet, consectetuer adipisc.ng elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut w1si enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ех еа commodo consequat. Duis autem vel eum iriure.

IITHTUI HYDROPONICS

•ищ14

поле шириной 20 пикселов ,....l....\==""""""""""""""""""""""""""""""""""""' отступ размером 1 пиксел 1 )L----,--------,----,поле шириной

пикселов

& Do not try this at home!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostгud exerci tation ullamcoгper suscipit lobortis nisl ut aliquip ех еа commodo consequat. Duis autem vel eum iriure.

Рис.

7.4. Как

бы ни соприкасались вертикальные поля, в любом случае произойдет конфликт

Для того чтобы решить эту нроблему, добавьте небо.1ьшой отстун ил1 гра ницу вокруг элемента-контейнера (в данном случае ;(ля тега

1 пиксел

нижнего атстуна

<d1 v> ).

-~ИМЕЧАНИЕ--------------------------------------------------- На профессиональном жаргоне

CSS это явление называется «конфликтом полей». Оно означает,

что два поля фактически превращаются в одно.

Есть два пути решения этой проблемы: добавить либо небольшой отступ, либо r·раницу вокруг <di v>. Поскольку между этими двумя полями располагаются

172

Глава

Поля, отступы, границы

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

7.4, внизу).

ПРИМЕЧАНИЕ------------------------------------------------- Гориэонтальные (левые и правые) поля и поля между плавающими элементами не конфликтуют.

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

13,

также нет конфликта.

Удаление пустых полей с помощью отрицательных значений Большинство значений свойств в

CSS должны быть положительными. Что же про

изойдет, если указать для размера шрифта текста отрицательное значение, напри

мер минус Однако

20 пикселов? Вообще, отступы должны иметь положительные значения. CSS допускает использование отрицательных значений для создания

определенных визуальных эффектов. Отрицательные поля вместо добавления пус

того пространства между тегом и соседними элементами, наоборот, вызывают уда ление этих промежутков. В результате может получиться абзац, накладывающийся на заголовок, выступающий из своего элемента-контейнера (бокового меню или другого элемента <d i v>) или даже совсем исчезающий за пределами окна браузера. Таким образом, можно с уверенностью сказать, что применение отрицательных значений полей дает немалую пользу. Даже когда вы устанавливаете значения полей, равные О, между двумя заголов

ками, все равно остается небольшой промежуток (благодаря межстрочному интер валу, как описано в подразделе «Установка межстрочного интервала~ разд. «Фор матирование абзацев текста>> гл.

6).

На самом деле это не так уж плохо, поскольку

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

Tuna~) имеет

верхнее поле, равное

7.5 (который начинается со слов «Raise 10 пикселам. Оно поднимает заголовок вверх,

что обеспечи

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

<<Extra!

Extra!~.

теперь соприкасаются с буквами большего заголовка, создавая эффект единой надписи.

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

чинается со слов

«The Extraordinary Technique~. линия

7.5,

который на

подчеркивания отображе

на прямо под текстом. Она на самом деле представляет собой верхнюю границу следующего абзаца (о том, как к тексту добавить границы, вы узнаете в следующем разделе). Но поскольку здесь определена верхняя граница с отрицательным зна

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

Q заголовка бу

квально свисает под линией-границей. Поскольку отступ между содержимым

(то есть Q) и границей не может быть отрицательным, вам не удастся поднять ниж-

173

Уnравление размерами nолей и отступов

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

стоящему элементу веб-страницы. } fl~aiJVC' nыrgrns

· Ф · t!i

!leW

r..·l[gi(RJ

Mozilla f IIPfOX Qoal<marЬ

!iO

Iools

....•.

О ~1 о htff>:/fcss.~/dfj7~

х DIRIЬie· ti) CooiOes· ~

css-

Fonns-

<t"; IINoger о

1о Go 1n

lltfannatlon·

@) ~ ~ QJan

SEA TUR NAA INLYOT UR нот TUB II::IE

FXТRAQRDINARY IECI::INIQIJE EQR ERESI::I SASI::IIMI Lore.m ipsum dolor sit amet, QOnsectetuer adipiscing elit, sed diam nonummy nibh euisn:юd tinciduntut laom~tdolore !Шgna aliquamerat volutpat. Ut 1•·isienim ad minim venia.m, quis oostnJd exerci tation uiJiUDQOrper suscipit loЬortis nisl ut aiJquip ех еа CIOmmodo CIOnsequat. Duis autem vel eum i.riure dolor in heodrerit in vu\putate velit esse molestie CIOnsequat, vel Шum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dlgnlssim qui blandlt praesent \uptatum

zzril delenlt а

t::J Рис.

Oone

·-

...

·-

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

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

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

CSS

элементов: блочные (прям.оугольньtе) и встроенные

есть два различных тиnа

(inline,

поточные), которым

соответствуют два одноименных типа тегов.

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

Встроенные ( inline) элементы не создают разрывов строк ни до, ни после самих тегов. Они отображаются на одной строке с содержимым рядом стоящих тегов. Тег <strong> - встроенный. Слово, отформатированное с его помощью, будет располо жено на одной строке с текстом, заключенным в другие встроенные теги, например

<em>. Было бы очень странно, если бы одно слово в середине абзаца, выделенное <strong>, вдруг появилось на отдельной строке. Другими примерами inline-тeroв являются <img> - для добавления изображе ний, <а> - для создания ссылок, различные теги для nолей форм и т. д.

174

Глава

В большинстве случаев

Поля, отступы, границы

CSS работает со встроенными и блочными элементами

одинаково. Можно применять шрифты, цвет, фоновые параметры, границы к обо

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

средством установки верхнего или нижнего отступа или поля. В верхнем абзаце на рис.

7.6 к встроенному элементу применено форматирование, включающее грани 20 пикселов со всех четырех сторон. Но браузер до

цы, фоновый цвет и поля по

бавляет пустые промежутки только с левой и правой стороны элемента.

поля и отступ

размером

Lorem ipsum dolor sit am<t. consmduer adipisciag dit. s~ <iam oonummy niЬh euismod tn:ю-.-:!aoreet doloremagn.> ,......." quis ccascquat_

------~~~~~~~~~~

20 пикселов

,'tf illwl

'~~~~~~~~~~~::~~

praneot q,w.." mi ddeМ ~ ipsum dolor ... ~ CCCtS« adipisc:i "1 dol, ~ diam DOOU IDП}' niЬh <U ismod linQd Ul]( ul Ьюrе <t dolo R 1111Р lll>quam <n11 ''ОЬра!. l.!t "'isi ..."

Lor=- dolor sc om<t, cons«:!rtucr odii>csciag dil. ~ сЬn DOIUШIY aiЬh <Ui.sa:>od IIOCi<ЬJt u1!aor<et dolore- ~ ..-. \'Okllpel l.!t w isi mm ad lllioial ''CIIiom. quis nostnЮ taliocl uloa>t:o<por suscipit 1oЬo.los t>isl u1 .Ь <РР <:< еа со ФОdо ~ uat

"'"'ci

display: inline-Ьiock; ver1.ical-align: middle; paddiпg: 20рх;

margin:

20рх;

Duis lllllaнd ..." ..v. dolor ;"

-+-------------1

'--------'

dolore t'U frog io1 ...аа fac:i is1s а\ va:o «~ et acansao ct i.osto odio dipo$S8U Q\8 Ь1ао <il

proe seo1 Ц>с. 111m udl c!eleoa que .US dcloce te ftu~al ....Ь fac:iisi.Lorem 1pSUO> dolor sa

omet, с-~ adlposc8Jg dit. ~"""" ooma~~~~y аiЬЬ euismod tinci<ЬI u1lьored dolore tna8JI'I ~ Ut "isa ..."

"""''O!ulpat

Рмс.

7 .6. Добавление

к встроенному элементу верхнего, нижнего nоля или отстуnа не изменит высоту элемента: форматирование будет не таким, ·как вы ожидаете

На рис. 7.6 в среднем абзаце фон и границы ссылки накладываются на текст,

находящийся выше и ниже стилизуемого. Цвет фона встроенного·элемента отобра жается поверх вышестоящей строки текста, но под следующей. Браузер обрабатывает каждую строку так, как будто она расположена в стеке, наверху по отношению к предыдущей. Как правило, это не представляет проблемы, так как строки текста обычно не накладываются. Если вы хотите; чтобы верхние и нижние поля работали для встроенного элемента, используйте инструкцию di sp l ау:

i nl i ne- Ы ock (см. рис. 7.6,

8Н.изу). Она оставит элемент встроенным, но он будет восприниматься как блочный,

175

Добавление границ

поэтому отступы, поля, границы, ширина и высота будут к нему применяться. Это работает даже в таких браузерах, как Internet Explorer 6 и 7, но только для нормаль ных встроенных элементов, например ссылок, тегов

<span>. Кроме 6 и 7 ото

того, вам следует добавить инструкцию vertical-al ign :middle, чтобы IE бражал встроенный блок таким же образом, как и остальные браузеры.

ПРИМЕЧАНИЕ----------------------------------------------- Есть одно исключение из этого nравила: если поля или отступы применяются к встроенным эле

ментам

<img>,

элементы не изменяют своей высоты. Браузеры корректно изменяют высоту кон

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

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

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

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

К счастью, в CSS есть команда, которая позволяет вам это сделать, - это свойство di sp 1ау. С его помощью можно заставить блочный элемент работать как встроенный:

display: inl ine; Или, наоборот, вы можете сделать так, чтобы встроенные элементы, например изображение или ссылка, вели себя как блочные: Ьlock;

display:

ПРИМЕЧАНИЕ------------------------------------------------- у свойства

display

есть большое количество параметров, многие из которых не работают во всех

браузерах. Значение iпliпe-Ьiock работает во всех современных брауэерах (см; рис. значение

попе

7.6).

Другое

обрабатывается в большинстве браузеров и имеет множество вариантов ис

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

Используя программный код

JavaScript, вы можете display на iпliпe

после изменения значения свойства

скрыть элементы, чтобы они стали видимыми или Ыосk. Сделать их видимыми можно и сред

ствами

CSS: в книге вы увидите такой пример. И, наконец, несколько других значений для свой display распознаются в IE 8, Firefox, Safari и Opera и предоставляют способ для создания осно ванной на CSS разметки. Эта усовершенствованная методика будет рассмотрена далее в книге.

ства

Добавлениеграниц Граница представляет собой обычную линию, которая очерчивает стилизуемый эле мент. Как показано на рис.

7.1, она располагается

между отступом и полем элемента.

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

176

Глава

Поля, отстуnы, границы

элементов дизайна. Например, добавьте границу слева от элемента, придайте ей толщину около

1 em, и она станет похожа на маркер в виде квадрата. Единственная

граница с нижнего края абзаца производит тот же визуальный эффект, что и эле мент <hr> (горизонтальная линия), выступая разделителем частей веб-страницы. Вы можете управлять тремя различными свойствами любой из границ: со 1or (цвет), width (ширина, толщина) и

sty1e (стиль) .

Цвет co1or может быть представ

лен шестнадцатеричным числом, ключевым словом или значением в системе

как и при форматировании текста (см. разд. ~стилизация текста~ гл . границы

width-

6).

RGB,

Ширина

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

пользовать любые единицы измерения

CSS (кроме процентов) или ключевые сло thin (тонкая линия), medium (средняя) и thick (толстая). Самые распространен ные и понятные единицы измерения для данного свойства - пикселы. И наконец, свойство style управляет типом линии границы. Существует мно жество различных стилей. Примеры приведены на рис . 7.7. Вы можете также определить стиль с помощью ключевых слов. Например, so 1i d рисует сплошную линию, а dashed- штриховую (пунктирную). В CSS для границ имеются следу ющие стили: solid, dotted, dashed, douЬle, groove, ridge, inset, outset, none и hidden. Ключевые слова none и hidden работают одинаково: они полностью удаляют грани цы. Но значение none удобно использов~ть для удаления границы с одной сторо ны элемента (см. разд. ~Форматирование абзацев текста~ гл. 6). ва

Q o o -1 : Jl

•

·· -~ . r··~ "'

...

......... . . . - - -··....... 0 .-= . . . - - .......... - - -........ . 1

8onSer

1 -

а:

8otOv

' :

w~г;t..=J~ -

::= :

000

Рмс. 7.7. Внешний вид стилей границ в следующих браузерах: lnternet Explorer 8 (вверху слева), Firefox 3 (вверху справа), Opera 9 (внизу слева) и Safari З для Macintosh (внизу справа).

lntemet Explorer 6

7 отображают границы

так же, как и

IE 8

177

Добавлениеграниц

ПРИМЕЧАНИЕ--------------------------------------------------

брауэере

Intemet Explorer б

для

Windows

и его более ранних версиях одноnиксельная точечная

граница выглядит точно так же, как однопиксельная пунктирная линия.

Сокращенный набор свойства

border

Если вы посмотрите на полный список свойств, доступных в

что границы действительно сложны. Вообще, есть

CSS, то подумаете, 20 разновидностей свойств гра

ниц, с которыми вы столкнетесь в следующих разделах книги, а также несколько,

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

border:

- border,

4рх

которое просто добавляет границы с заданными параметрами:

solid #FOO:

Данный стиль создает сплошную красную границу с толщиной линии

4 пиксе

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

ляющей изображение, паиель навигации или любой другой элемент, которые надо выделить в отдельный блок. ПРИМЕЧАНИЕ----------------------------------------------- Посnедовательность указания параметров свойства не имеет значения: Ьorder: 4рх ботает так же, как Ьorder:

#FOO solid

solid #FOO;

ра

4рх;.

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

border-top, border-bottom, border-left

или

border-right.

Они работают точно так же, как стандартное border, с тем исключением, что управ ляют границей только с одной стороны стилизуемого элемента. Добавить красную пунктирную линию снизу можно, используя следующее объявление свойства:

border-bottom:

2рх

dashed red:

Вы можете объединять общее свойство

border со свойствами отдельных границ.

Например, использовать border-left, чтобы определить основной, общий стиль, а затем выборочно настроить одну или несколько границ. Допустим, вы хотите, чтобы верхняя, левая и правая стороны абзаца имели одинаковый тип границы, а нижняя выглядела по-другому. Можно написать следующие четыре строки СSS кода:

border-top: 2рх solid Ьlack: border-left: 2рх solid Ьlack: border-right: 2рх solid Ьlack: border-bottom: 4рх dashed #333: Такого же эффекта можно достигнуть всего двумя строками СSS-кода:

border: 2рх solid Ьlack: border-bottom: 4рх dashed #333:

178

Глава

Поля, отступы, границы

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

сать две строки СSS-кода вместо четырех, но и в том, что изменить стиль будет проще. Если вы захотите сделать цвет верхней, левой и правой границ красным, то

необходимо отредактировать единственную строку кода вместо трех:

border: 2рх so1id red: border-bottom: 4рх dashed #333: При использовании этого сокращенного метода установки границ определяет ся общий вид всех четырех границ. Затем вид одной из границ переопределяется с помощью свойства конкретной границы, например

border-1 eft.

Очень важно,

чтобы СSS-свойства были написаны в определенной последовательности. В общем случае глобальные установки: границ должны быть на первом месте, а установки отдельной границы

на втором:

border: 2рх so1id Ыасk: border-bottom: 4рх dashed #333: Поскольку свойство нижней граниЦы

border-bottom

указано вторым, оно час

тично переопределяет общие установки свойства border. Если бы border-bottom было расположено первым, то border было бы отменено и все четыре границы ста ли бы одинаковыми. Последнее явное свойство может переопределить любые ана логичные свойства, определенные в СSS-коде выше. Это пример работы механиз ма каскадности CSS, который мы рассматривали в гл. 5.

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

none.

Предположим,

вы хотите установить границы только с трех сторон элемента (сверху, слева, сни

зу). Всего две строки кода обеспечат такое форматирование:

border: 2рх inset #FFCC33: border-right: none: Возможность тонкой настройки границ каждой стороны стилизуемого элемента

является причиной большого количества разновидностей свойств границ. Осталь ные

15 свойств позволяют определять индивидуальные цвета, стили, толщину ли

ний границ для каждой стороны. Например, можно переписать определение

2рх

doub 1е #FFCC33:

border:

в следующем виде:

border-width: 2рх: border-sty1e: douЫe: border-co1or: #FFCC33: В этом варианте используются три строки кода вместо одной, поэтому вы, наверное,

будете избегать такого способа. Однако каждая сторона имеет свой собственный набор из трех свойств, которые удобно использовать для отмены одного. Правая граница:

border-ri ght-wi dth, border- right-sty1 е и border- right-co1 or. Левая, верхняя и нижняя границы имеют похожие свойства: border-1 eft-width, border-1 eft-sty1 е и т. д. Вы можете изменить ширину единственной стороны границы так: border- r i ghtwi dth: 4рх:. При таком подходе хорошо то, что, когда вы позже решите изменить границу на сплошную, нужно будет отредактировать только групповое свойство границы, изменив

dashed

на

so 1i d.

179

Установка цвета фона

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

border-wi dth: lOpx

border-width, border-style

border-color.

Например,

5рх 15рх 13рх: применит четыре различных значения ширины

для каждой из сторон (верхней, правой, нижней и левой).

Допустим, вы хотите установить все четыре границы элемента в виде пунктпр

ной линии толщиной

2 пиксела,

но при этом нужно, чтобы каждая граница имела

свой цвет (возможно, вы создаете сайт для детей). Вот способ быстро сделать это:

border: 2рх dashed green: border-color: green yellow red

Ьlue:

Этот набор правил создает границы в виде двухпиксельной пунктирной линии

со всех четырех сторон элемента, при этом верхняя граница будет иметь зеленый цвет, правая

СОВЕТ

желтый, нижняя

красный, а левая

синий.

-------------------------------------------------------

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

разместить их вокруг иэображения.

Установка цвета фона В

CSS имеются средства для добавления фона как для всей неб-страницы, так и для

отдельного заголовка или любого другого элемента страницы. Используйте свой ство

background -со l о г в сочетании с любым из действительных определений цветов, 6. При желании вы можете

которые описаны в разд. «Стилизация текста» гл.

окрасить фон неб-страницы в яркий зеленый цвет, указав следующий код:

body { background-color:

#бDDAЗF:

}

Или можете создать стилевой класс, например,

цвета фона, а затем применять его к тегу

<body>

. revi ew со свойством желаемого <body

НТМL-кода таким образом:

class="review">. lРИМЕЧАНИЕ------------------------------------------------- Вы можете также поместить иэображение на заднем плане в качестве фона веб-страницы и управ лять его размещением различными способами. Мы рассмотрим это в следующей главе.

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

для текста. Цвет фона также является от

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

:ОВЕТ

-------------------------------------------------------

Когда вы пользуетесь одновременно фоновым цветом и границами, помните: если стиль грани

цы- точечная или пунктирная линия (см. рис.

7.7}, то фоновый цвет проступает в промежутках между точками или штрихами линий границ. Другими словами, брауэеры размещают линию границ поверх цвета фона.

180

Глава

Поля, отступы, границы

Определение параметров высоты и ширины Рассмотрим еще два СSS-свойства, являющихся частью блочной модели

CSS. Они

предназначены для установки размеров объектов, таких как таблица, столбец, ко

лонка, баннер, боковое меню. Свойства

height и width

назначают высоту и ширину

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

Они также применяются для

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

8). Разработка стилей с этими свойствами не составляет сложностей. Просто набе

рите их со значением в любых единицах измерения

CSS,

которые мы изучили.

Например:

width: ЗООрх: width: 30%; height: 2Dem; Пикселы как единицы измерения просты в использовании, понятны и удобны,

обеспечивают точные ширину или высоту. Единица измерения

em -

это примерно

то же самое, что и раз.мер шрифта текста, но в условных единицах. Допустим, вы

устанавливаете размер шрифта

24 пиксела; единица em для этого стилизуемого 24 пикселам, а если вы установите ширину равной 2 em, она 48 пикселов. Если вы не определите в стиле размер шрифта

элемента будет равна составит

2 х 24,

или

текста, то он будет взят из унаследованных параметров (см. разд. «Установка раз мера шрифта~ гл.

6).

Процентные значения свойства ширины

width

рассчитываются на основании

ширины элемента-контейнера. Если вы установите ширину заголовка равной

75 % и

этот заголовок не вложен ни в какие другие элементы неб-страницы с явно

определенной шириной, то ширина текста заголовка составит

75 % от

ширины

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

200

<di v>

шириной

пикселов (возможно, для создания столбца), то ширина данного заголовка

составит

150 пикселов.

Процентные значения в свойстве высоты

height работают

точно так же, но расчет базируется на высоте элемента-контейнера, а не на его ширине.

БРИЛЛИАНТ БЕЗ ОГРАНКИ

·Минимум и максимум

(SS также nоддерживает еще

несколько свойств,

Свойаваудобно ИС11011Ь308аn. при rибкоМ,~',~ .

связанных с установкой высоты и ширины 3nементов

страниц. Такой метод обесnечиваеr сохранеНИе дiiWiia

вeб~тpaниц:min-height,min-width,max-height

(макета и раэмти) ве&<1раницы в нормаяьных.рвме;'

и max-width. Эти свойства nоэвоnяют успнавnивать

рахиnроnорцияхдnяо~маnенькихми~.

MIIHИмaJIЬIIO(' и MiiКCIIмanьнoe эначения ширины или

ших мониrоров; к COЖillleНIIIO, брауэер lllttmt!t&ploter6

выmты элемента.

и ero бопее ранние версии нe1101t11Мii0t mi~

· .

181

Определение параметров высоты и ширины

Вычисление фактических размеров блочных элементов Свойства

width

height

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

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

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

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

CSS.

Свойства

width и height устанавливают ширину

и высоту области содержи.ыого стилизуемого элемента

пространства, в котором

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

7.1,

вспомнить о том, где именно в блочной конструкции элементов

находится

CSS

чтобы

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

7.8.

100

рх

левый отступ

рх

правый отстуn

рх

левая граница

рх

правая граница

рх

левое поле

рх

правое поле

рх

160

рх

ширина

,... ' '''

...

фактическая wирина

значение ширины

область, отображаемая в брауэере Рис.

7.8. Вычисление фактической

ширины блока стилизуемого

элемента выполняется путем сложения ее составляющих

Допустим, вы назначили следующие свойства:

-argin: lOpx: :order-width: 5рх: :adding: 15рх: ~1dth: lOOpx: Если определено свойство wi dth, то вы всегда точно знаете, сколько места займет содержимое элемента

э.1емента,

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

независимо от любых других установленных свойств. Вам не нужно

182

Глава

ничего вычислять, потому что значение

wi dth

Поля, отстуnы, границы

и есть размер основного простран

ства для размещения содержимого (в предстаn.1свно~t выше nримере ширина рав на

100

пикселам). Конечно, придется вьшолнип, н есложные арифметические опе

рации, чтобы выяснить общий точный размер. В nредставленном выше примере

для размещения стил изуемого элемента браузером о·rводится пространство шири ной

20 н икселов для левого и правого полей, 1О для левой и правой 100 nикселов в качестве ширины основ ного содержимого. Версии браузера Internet Explorer старше шестой неправи л ыю 160

nиксело в:

границ, 30 для левого и nравого отстуnа и

работают с этими параметрами, поэтому для них требуется сделать ко~::-какие до работки веб -страницы. Общее правило по регул ированию высоты элементов на странице гласит: 11с де лайте этого! Многие подающие надежды дизайнеры

CSS

nытаются задать высоту

абсолютно для все го, желая nолучить nол ный контроль над nиксслами . Но сели вы не уверены полностью в точных разм ерах содсрЖИ I\ЮГО внутри тега, то :vюжете

столкнуться с некоторыми нежелател ьны:-.1и результатами (рис.

7.9). В этом

примере

блок с цитатой , который исnользуется ~ля тоt·о, чтобы аю{еtпировать вни:-.t ание на интересном отрывке из статьи, имеет ширину и высоту 110

100

11икссло н . Когда

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

IE 6)

ci'O со

выходит эа nределы . Даже ecJtИ вы у ве

рены, что текст, который вы разместили в блоке с фиксированной высотой , соот ветствует его раз мерам , nосетитель мо жет увеличи ть разм ер шрифта в с воем

браузере, и высота текста, соответственно, может стать больш е

no сравнс1tию с

вы

сотой блока.

)

. ' .

' .. '

....

~ ~..~ u ~ ~ ·~~ /; s-~ i~(·-~ е ~: · :;.,

д~

tore» ipg.D dоЬ' iOA 8m4, COOt«CICI:Uc'f ~~ eif. \oed di.3at ~-l!bll et.aiшlocf !Wкht t.ll Ьorttt doЬ'e&~pt~crlll~ l.;1wi$j ~.dn:8:.R

,"tS!i8o, qW. cю1tNd е.'-"О Ulion uld<orper rusctpil \oЬortls~ -- ~t2; c.at~COiiШJOSS . l>t.a~

ia '~atc veolil

е"~~ t:OO\eqмt, ..'t!l ~ do:okwt n.I~ radЬ

Ьri

Ifth~ IUIIOIIDt

tonfeatill а l'ixed lleight Ьох is taU~r tlaaa the Ьох,

so•e

w~ird

(.(llllcro Vswn dоЬ 1if ~ ~oc$«lt1Ucr adipiк~g t1it шt.<Ьаn OOCUJWO)" ~ ~ Wi6a ~ Uoreet dоЬс fOa8D.1 ~ tS:f \'oUp.8

l:'1 ~ мil:n ld ..-..о.

lhi.ьas

bappen.

vtailna. ..- ooSO'\Id <'J.ttci aDoo "'-:cxpcr 'шсiрС ~lisJUIIIIiq;pace~~ O\li$ . . CВIVd~irfll't:dolof8"!

....., ;.....,..- ...-'......... -~" .......a..w ....... ~.......,., _, """"" ~ ...... r..,'"".... ~·•· r..-. Рис.

~ (CH ~-- <icJ~!Qds~

::~~--~~.: :~/~.~~~:~!~-~}~~:~_:!~/~-+~;;;_~:~~;~-~-~ -~~-~-~~·.-:.:.·.·-~.:·.~~-~ Wheo beigbts go bad

W hen heigb ts go bad

aACCD ''d N8 Шt <lolor in ЪcDcЖcri

J.lrНt~ F"""41!:f.TOdit"'-Ь

LQftrn ipsW! 6olor ~ ..1<'1 . ccюS«t~ .tdiP"КC\i t lil ,,..r~ &1m I'IOfМO"'l)' tliЬb Nismod ~ Ull.aotr:d ~~ mцN Uo.tuw no)l ' 'OUJ>;rt t:1 '~isi CJ:Jim ad oiniot '"CDaro ~ tKHOud C.\:C"' ri tiOor\ IJI8:Dc'OfJ)Ct ~ 1oЬoois tisf ~ aiqt.lp

u.~a.cocmю<lcocМ\t~ D\8s~м "cl~.uc: ~ Ьcndr~ 11'\ '~~с

' 'tlit tsst· t:DOk\t!C' conscquзt. ,.d

dolote w fa~P Nl.& faci

Ь:1

bos, some

Lor =\?"•1:1dd.o\'~.1n:.t:I. (.~(ТI;ef~.~c• srd~ ~.c-&~~ ~ 1o1t Lюrm dokxr m.'l(rN ~~ (1'-,r ,.oUp.v t:t ~,.; n.~~ ~ -c,'li.w •JW

f\0\Ь'\111 C'Aes-rtl~tiootai!OIC')I"orptt WJ.nP!I~ ,_~1./1 M •.JIIIPC:.". . : = CQ('IJ.('q!IOI. Oui~ ~Ф"I'"''' N:D •м.~ 6o&or 1'1 ~mt" \~1~ ,.~~ t\~ . ~"11 ,.~ 6.n doЬt ~ fNp.JI. da Гю

/:,

о;;---·--· --- ------ ------·- - ·--

7 .9. Отображение содержимого стилизуемого элемента

в браузерах

lnternet Explorer б (слева) и Firefox (справа) Другими словами, свойство

hei ght пол е:то для

контроля высоты э.1смента

<di v>,

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

ментов, содержащих текст, не забудьте не только протестировап, свои страницы

183

Определение параметров высоты и ширины

в основных браузерах, но и проверить их при различных установленных ра.1мерах шрифта, увеличивая его в браузерах. ПPИMEЧAHИE-------------------------------------------------

Internet Explorer 5 обрабатывает неправильно все, что ство width для определения общей ширины, включая

связано с шириной. Он использует СSS-свой поля, отступы и границы, в результате чего

элементы страницы получаются гораздо более тонкими по сравнению с аналогичными в других

брауэерах. Эта проблема таюке обнаруживается в

б и

7в

причудливом режиме. Поскольку

IE 5

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

Д(о1эайном

CSS, ознакомьтесь с «проблемой

10 лет

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

блочной модели» в

IE 5 на сайте http://reference.sitepoint.

com/css/ie5Ьoxmodel.

Управпение поведением блочных элементов

с помощью свойства

overflow

Когда содержимое стилизуемого тега имеет размеры больше определенных свой ствами wi dth и hei ght, происходят странные вещи. На рис.

Intt:rnet Explorer 6

7.9 показано, как браузер

и его более ранние версии расширяют размеры блочного эле

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

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

Браузер использует в этой ситуации свойство

overfl ow.

В качестве значения

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

бражаться содержимое, выходящее за пределы блочного элемента. О

Vi sible- это значение, принимаемое браузером по умолчанию. Указание это го ключевого слова имеет тот же эффект, что отсутствие установки свойства

overfl ow (рис. 7.10, О

Scroll

вверху).

-позволяет добавить полосы прокрутки (рис.

7.10,

посередине). Пара

метр создает своего рода окно мини-браузера внутри веб-страницы, которое выглядит подобно НТМL-рамкам (фреймам). Вы можете использовать ключе вое слово

scro ll, чтобы вместить объемное содержимое в ограниченной области.

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

Auto

-чтобы сделать полосы прокрутки необязательными, пользуйтесь данным

значением. Оно выполняет ту же функцию, что и

ем

scro ll,

с одним исключени

полосы прокрутки добавляются только при необходимости.

О Hidden- скрывает любое содержимое, выходящее за пределы блочного элемента (рис.

7.10, внизу).

Это значение небезопасно, поскольку может привести к тому,

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

для разрешения некоторых ошибок браузера

ботка ошибок в

Internet Explorer (см. разд. «Обра Internet Explorer 6~ гл. 12), а также используется при создании

плавающих разметок.

184

Глава

· ) Weatheгi11g the Heights - Mozilla Fir efox

7. Поля, отстуnы,

l;](Q}@

hen heights ~:-~~~~-:;----J, bad :1 property is set j to

do'- .

границы

"visiЬie"-aay content

1~ that flts outside J

lpSUПI "" Sit amct, ctetucr adipiscing elit, sed DOIIIIIDIIl)' euismod ut laoreet dolore •

the Ьо.х is ! оiЬЬ dispJayed anyway;------··aliquam erat volutpat. Ut wisi eoim ad minim veniam.

~tnl<i I".XI'JI'r:i l>tмn 111\>tmr.nm<>:r <11~r:init lnhnrti~ ni~l

·) \'/eathering the Heights- Mozilla Гirefox

~I(QJ!Xl

·-----~-------,

When heights Тhе overflow 11setproperty 1s go bad

__... . . ._______

! 1

1to "sиoll''-"a,-!

Lorem ipsum dolof sit amet, f the same consectetuer adipiscing eJit, sed : ~~ diam nonummy niЬЬ euismod t~-~~~-~L .l.___ J tinciduDt ut laorect dolofe magna aliquam erat volutpat. Ut \vW eoim ad minim veniam, quis nostrod exerci tation uПamcorper suscipit loЬortis nbl

·) \'/e,lthering the Heights- Mozilla Firefox

When heights go bad

..,

GJLQJ~

~:~~0~--~ f to

"Ыdden"-

f content outside

Lorem ipsum dolof sit amet, consectetner adipiscing elit, sed ' the Ьо.х doesn't (_ap~r·~~~....... di.am nonmnmy оiЬЬ euismod tincidunt ut laoreet dolofe magna aliquam erat volutpat. Ut \visi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit loЬortis nbl Рис.

7.1 О. Свойство overflow предоставляет три

простых способа отображения текста, раэмеры

которого не nозволяют брауэеру отобразить его внутри блочного элемента

185

Управление обтеканием содержимого nлавающих элементов

ОШИБКИ БРАУЗЕРОВ

Специальные рекомендации по обеспечению совместимости с браузером lпternet

Explorer 6

То, что различные браузеры могут отобразить одну и ту

Мы будем часто исnользовать

же веб<!раницу nо-разному и самыми удивительны

оnределить или избирательно изменить некоторые

ми способами, nортит жизнь любому веб-дизайнеру.

nараметры для стилей, nравильно отображающихся

Страница, которая выглядит великолеnно

8 lnternet

браузерами, отличными от

* htm1, чтобы nере

lnternet Explorer. В этом

Explorer, может иметь совершенно друrой вид или во обще не отображаты:R в Firefox, и наоборот. В книге вы

случае нужно применить конструкцию *

найдете множество nодсказок, хитростей, обходных

чительно для

nутей ло уnравлению браузером. Кроме тоrо, будут оnи

стилевой класс

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

тичный блок бокового меню для новостей и ссыпок

устранения расnространенных ошибок. Неудивительно,

навигации сайта. Из-за ошибки в

html

nосле

правильного стиля, скорректировав nараметр исклю

lntemet Exploreг. Допустим, вы создаете sidebar, который образует симпа

lnternet Exploгer бо

lntemet Exploreг 6, который в ходу уже бо

ковое меню может отображаться со смещением на

лее nоловины десятилетия, имеет множество спабых

три nиксела влево или вправо (см. разд. «Обработка

меа, nроявляющихся nри отображении веб-страниц.

ошибок в lntemet Exploreг б» гл. 12). Чтобы исключить

Так, в нем есть проблемы с отображением nлавающих

эту недоработку, вы можете добавить nосле nравиль

что браузер

разметок, о чем вы узнаете в гл.

ного стиля

12.

s1 deba r специально для lntemet Explorer

следующую доработку:

Чтобы исключить эти ошибки, часто nридется адресо вать свойства и их значения для nрименения исклю чительно в lntemet

Explorer, поскольку для получения

тоrо же эффекта в других браузерах нужно исnользо

* html s1debar { marg1n-left· _С конструкцией

-Зрх

}

* htm1 в этой книге вы встретитесь

неоднократно (наnример, в обучающем уроке дан

вать друтие значения, а nорой 11 свойства. Сnециально

ной главы). Другие методики уnравпения браузером

для этой цепи существует nростой сnособ создания

lnternet Explorer мы изучим 8гл. 15.

стмлей

CSS, nредназначенных для nрименения опре lnternet Exploгer 7 и 8 не nонимают кон

деленным классом браузеров: lntemet Exploreг 6 и его

Браузеры

ранними 8ерсмями. Это исnользование конструкции

струкции

* htm1. При этом способе стиль должен начинаться

зти определения стилей. К счастью, в ~тих браузерах

с*

* html

и, значит, просто nроигнорируют

html . Если вы хотите создать стиль тега <hl>, ори

исnравлены многие ошибки, встречавшиеся в бо

ентированный на применемне только lntemet Exploreг 6

nее ранних версиях, nо~тому для них использова

и его ранними версиями, назовите его*

ние *

html hl. Все

html

неактуально. Несмотря наэто, в данной

остальные браузеры будут рассматривать его как nро

книге вы узнаете о методе, который nозвоnит nере

изводный селектор, не имеющий никакого смысла.

давать сnецифичные пили любой версии

Они просто nроигнорируют его.

Exploreг.

lnternet

Управление обтеканием содержимого плавающих элементов

HTML в обычном порядке отображается, начиная с верхнего края окна браузера по направлению к нижнему: один заголовок, абзац, элемент блочной структуры

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

CSS пре 3 мы рас

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

но уже сейчас вы можете добави_ть nривлекательности своим веб-страницам по средством единственного СSS-свойства fl oat.

186

Глава

7. Поля, отстуnы,

границы

Свойство fl oat перемещает любой элемент в нужное место, выравнивая его по левому или правому краю веб-страницы. В процессе перемещения содержимое, находящееся ниже nозиционируемого плавающего элемента, смещается вверх

и плавно обтекает сам плавающий элемент (рис.

7.11, lmuзy). Плавающие (или пе

ремещаемые) элементы- идеальное средство для того, чтобы выделить доnол нительную информацию из основного текста. Изображения могут смещаться

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

Ft-o~ts

{)'h;p·if~ 1Q.• !Qt.'"• ~

Regular Page Flow R.ight SideЬar Thrs is а <dJV> tag tl1at "ould 1ook Ьettrr. rfit were thi!ID('r and align<-<1 to tЬе right ~dge of the рце.

'--=""=-'":::;;ou..or·~щ ipsum do!or sit amet, C<'II1S<'Ctctu~ ndipiS<:log elit,

scd di3m nonummy nibh eui•n•od lincrdunt ut 1aoreet do!ore mugna aliquam erat \'Oiutpat. Ut Wl~i enrm ad minim 'eniam, quis no~trud exerci tation u11amcorper su.<Cipit 1oЬortis nц:l ut aJrqшp ех еа ('Ornrnodo ~1!-~.i'.LP.uis~.'!~~) ''~J. •!!!!йriщ-е_9(!~ in bendг~r.L!.~'!.~JJ!!!!~.I.U~!!.

ео е

Aoou

сз

Ц· LoatiO!\

) ko~ir(h

[!J J.ookln.ar'h

Lorem IJI$UIП dolor Srl amet, oon.sectel\rer adiprscing elrt. sed diam nonummy nibh SideЬar ~nismod tincidunt ut laoreet dolore magna !quмn erat This is а <div> tвк \-olutpat. Ut ' enim ad th&t's Roated rijфt rninitn vc.niatn1 is nostтud and lw< а set width. exerci tation ullamrorper SILIOprt rtis nisl ut aliqurp ех еа comшodo oon.••щuзt uis outen1 vel eum iriure do1or in hendrerit in -uiJIUinte \'elit es:;e molestie <'Onsequat. vel ill n1 dolore е11 feugшt nullo fad

R.ight

Lorem ipsum dolor sit nmet. со · etuer adipiscing c1it. sed diam nonummy nibh euismod tincidunt u II\Oreet dolore magna a!iquam erat ,·olutpat, Ut wisi enim ad minrm ~ruam, quis nostrud exerci tation uiJ;mКQrpi!r suscipitloЬortrs nisl ut allquip ех еа oomrnodo OOO$equat. Dui$ autem ve1 e11m triure dolor ln hendrent in wlpultlte velit е:..е mole.tie oonsequot, vel Щщn do\()re eu reugiot nulla faci

Рмс. 7 .11. Стандартная последовательность отображения НТМL (вверху) и вид страницы nри использовании свойства float (внизу)

187

Управление обтеканием содержимого плавающих элементов

Позволяя избавиться от однообразия, свойство fl oat является одним из самых мощных и полезных средств, предлагаемых языком

CSS.

Широкий диапазон его

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

размещением баннеров, меню, паиелей навигации и других элементов веб-страниц. Несмотря на то что свойство fl

oat

может быть использовано для сложного, 12), применение это

комплексного форматирования (об этом вы прочитаете в гл.

го простого атрибута не представляет никаких сложностей. В качестве значения указывается одно из трех ключевых слов

l eft -

- l eft, ri ght

или

none:

перемещает стилизуемый элемент влево, при этом содержимое, находя

щееся ниже его, обтекает правый край элемента; О

ri ght - перемещает элемент вправо; none - отменяет обтекание и возвращает объект в

его обычную позицию.

Например:

float: left: ПРИМЕЧАНИЕ------------------------------------------------- Позиционирование изображений посредством левому или правому краю

<img>.

float подобно применению свойства

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

Способ выравнивания средствами НТМL немного устарел, так что

лучше пользуйтесь СSS-свойством

float.

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

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

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

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

fl о а t

к встроенным элементам, например <i mg>.

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

фотографий

самый обычный, даже наиболее распространенный способ приме

неимя fl oat. Браузер обрабатывает встроенные элементы точно так же, как блоч ные. Поэтому, используя отступы и поля во встроенных элементах, вы избежите

проблем, которые обычно возникают в такой ситуации. Вы можете также использовать fl oat для блочных элементов, таких как заголо вок или абзац текста. Общая методика применеимя свойства к тегу <di v>, содержа щему другие НТМL-теги, заключается в создании своего рода блока-контейнера. Таким способом вы можете создавать боковые меню, плавающие цитаты и другие обособленные элементы веб-страниц (пример приведен в обучающем уроке этой главы). При использовании свойства float для блочных элементов рекомендуется установить свойство wi dth для них (на самом деле правила CSS требуют установки ширины плавающим элементам для всех тегов, кроме изображений). Таким образом вы можете управлять размером блока по горизонтали, оставив промежуток для

188

Глава

Поля, отступы, границы

текстового содержимого, расположенного после этого блочного элемента, и, соот ветственно, задать его поведение - перенос, обтекание. ПРИМЕЧАНИЕ------------------------------------------------- Порядок написания НТМL-кода оказывает большое влияние на отображение nлавающих элементов веб-страницы. НТМL-код должен находиться до любого НТМL-содержимоrо, которое обтекает пла вающий элемент.

Доnустим, вы создали веб-страницу, в которой имеется тег заголовка <hl>, а за ним идет тег аб заца <р>. Внутри <р> вы вставили фотографию с помощью тега <img>. Теnерь, если вы устано витевыравнивание фотографии по правому краю, заголовок <hl > и часть содержимого абзаца <р> будут nо-прежнему отображены над фотографией. Только содержимое, следующее за тегом <img>, будет обтекать изображение с левой стороны.

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

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

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

SldeЬar

11is JidcЬor .. llolled ..". """ .... 20pixels..P., - - -

:=H=ec.a..:o :.: d= i n=--go,:2::-,--- с-..,. 6...,...,.-.~ор;, Lorcm .".... dolor s&

....... cooscctetuer

~ dii. sed diom

Heading2 LO<aD.ipoOID dolor ..

Ьlg$ $tZf . . -

8IDtf. coosecteN~er

oad

JICiPsaag dii. sed-

cisplay d!cir ""'*'!Joaods oad

dolor.-.

Oorc

SldeЬar

Jlcadlinc

cisploced Ь.. оЬе Ьохеs for 11юое

"""""""У al>h cosmod Ьord<G (es per 1Ьс CSS spec.) liocicЬ>t ,. loc<ccr dolore . _ oicpoo> erlt "~ Ut wbl etain ad шiWD ,.cniam. <Ps nosaud excrci totioo ~ SU5C.ipt loOo<lk ais1,. oicPP с:х еа ..,."..,.,&, coooeqooL Duis- vd """'me.Lor<lll ;р..."

c:i

7.12,

CSS вы можете сделать и это.

--~ -.. .. dolore- *"""'

11is JidcЬor istooled deЬt oad .... 20 pixels ...... •oaod ..

c-..tiOOD"""""""'ctapis cisploced Ь..dlc Ьоха for 11юое 1Ьс wictЬ oad cisplly d!cir~ oad

IOgS...,

Ьorcleв(as.,... .ь.

css-.>

«11 ''ОЬ:ра. Ut ~isi eni.» ad mirin ~ cps OO'SЬ'Ud c:xetci tiJiioa ~ SU5C.ipt loЬcrlis ais/,. aicpp ех еа ~ v

с-

Duis autern vd <UШ.....,. Lorcm .ipoOID dolor .а IIIIJd,

J:Oooe

Рис. 7 .12. Добавление свойства overflow: hidden; в стиль тега <h 1> nреnятствует тому, чтобы атрибуты заголовка nовлияли на отображение фQна и границ nод nлавающим элементом

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

элемент. Нужно добавить в данный стиль следующий код:

ство

overfl ow: hi dden:. Свой overflow (описано в предыдущем разделе) отменяет отображение продолжа

ющихся фона или границ под плавающими элементами.

189

Уnравление обтеканием содержимого nлавающих элементов

ПРИМ ЕЧАНИЕ ----------------------------------------------- Этот метод работает не во всех брауэерах. Смотрите врезку ниже.

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

буты.

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

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

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

ментов·, расположенных рядом . Когда они имеют небольшую ширину, то поднима ются вверх, располагаясь на одном уровне. В противном случае элементы могут

образовать некрасивую <!Пустоту~ (рис.

7.13, вверху). В данном случае плавающие

элементы не должны отображаться рядом друг с другом. Для решения этой про

блемы в CSS предусмотрено свойство clear. ОШИБКИ БРАУЗЕРА

Когда overflow: hidden не работает Свойство overflow: h1dden предотвращает отобра

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

жение фона или границ nод мавающими :тементами

Однако это всего лишь сnособ избежать отображения

(см. рис. 7.13). Но в мире браузеров не все так про

фона и границ под мавающими элементами в lлtemet

сто. Какая-то строка кода может работать в lпternet

Explorer 5 и 6 (о том, зачем изменять масштаб, а так

Explorer 7, Firefox, Camino и Safari, но ее работа не rа рантируется в Opera (до версии 9), а вlntemet Explorer 5 и 6 она может просто игнорироваться.

же более подробное описание этого метода читайте

Увы, но для

Opera версии 8 и ниже (в версии 9все ра

во врезке «В nомощь nродвинутому nользователю» в разд. «Обработка ошибок вlntemet Explorer б» гл.12}. Возможно, вы захотите nоместить специфическое

Explorer в отдельную таблицу

ботает хорошо} нет конкретноrо решения этой пробле

свойство для lпternet

мы, тем не менее в lпtemet Explorer 5и 6она решаема.

стилей. Вы также можете вставить его в отдельную

Для этого нужно добавить одно доnолнительное свой

внешнюю таблицу стилей, ориентированную конкрет

ство: zoom :

1:.

Это свойство, придуманное

но для lntemet Explorer.

Microsoft (и работающее, Explorer), позволяет

естественно, только в lntemet

Пример решения данной проблемы приведен в обу чающем уроке этой главы.

190

Глава

Поля, отстуnы, границы

Floats Bumping Into Each Other l.orem tps\lm tlolor slt amtt, ~·ons.tc.1etue.r adipiм;lng elit, sed di011> t100\unmy niЬt1 e•ttsn'od rinc.idunt ut laoreet <lolott' щagna nliquam erat \'C)IUtpitl. Ut Wl~i 4!'1\Hfl ad roinim \'el\\:tn,, qцis oo..~tnld c.xerd tiition uJiamrol'l"'r !.IIScipil lohortis 1\i•l u1 aliquipex~a

t.'Ommodo cort~equat. t)цjs IJUtt'П\ \o\"l tUЛI

1riure doJor io Ьeнdrent 10

\'Ulputate \·rHt c.sse tr\01~rr

e»nsequar.

vel illum dolorc ou feugU~t nulla (,.<; [."oren\ 1psum tlolor sit a~t. conse-ctct:uer acltptяdn& e-lit. ~ dtam noнummy njbh ruL•m1od tiocidunt \1t lanrce.t dolorc mngru\ aliquam ~rat volutp;it. Ut ~'1J;I tnim ad minin1 \'cni.am. quis no~trud e~trci tatioo ullamrorper щwlpit lolюrtas n~t ul aJ1qt.Up ех ем. oonunodo rooщua.l. Duis a.tttrm vtl енm iriurt OOior i11 t.c~ert_t in \ttdputate \'c1it ~"Ч" 1Пulestie c:onsequat.i wl iПum (tolort'

Floats Cleared U•rem ipsuro dotur ~н amet. Wnst\:lt:tuer adipiiOQg elil, sed diam AODIIПIOI)' nibh eul<l1>od lirкidunt ut IAQreel dolorc П1~&"'" aii<\\J.OJm crat \olнtpat. Ut v.i.s1 t'nim ad minim vcoiarn. quis OO$tnJd 6Ucltation uHamcorper su$4:1pit loЬortis nisi ul eliqulp ех •~ oon>modo ronsequa1. Duls aut•n• , .•1eum irillrt d<>lor in Ь.ndreri11n '"lputal< ve\Jt сsы ma1Ыte roo.,equal, vci illum dolore •u fe11giatnuJia (;.cl, t..ort:tй ips11m <lolor sit oщt"t. eon..-,c:ctetUt'r odlt>i$<1ng <lil, sed dt>n> noщtmmy niЬI> euumoct tir><i<lunt ultaor•et tlolore M'll\03 aliquatn ernl volutpal. t11 \0.-isi enim :td minim vcnjam. qLris no~trud exert.-a ~11on <~laщr<~rper sU!!Мpil lol>nrti< rli•l ut :t!i<(11ip е.• t'a cornn'k'CJo oomcqaat. DuJs autt>ш ,·rl ewn iriure do1ur in l\encirent in ,'\.Liputatt velit t-~ nюte.sttt co~qur.t, \"С} i1111m dolore eu fet<siat nulla ftt<i

'-uosect.rtucr

t.orem ipsuщ doJor xlt ai'XW't, :.[~,?,~~;"ъ[~]:t~~ij'-1 1elf<, «<d dtam no11ummy nJbh ouism<XItin<~<iunl u1 laoroct dolor~ tn:~gJ>a aliquam t>rol \'Oiutpal. Ut "i-os:i ett.irn 8(11niraim \-eniu.n'\. qннс rн1~trud tx:tra (.-t&un ullam.corper ,;uscipit 1uЬortJsnLSI ~&t ~Jiquip

1t'X t>a com.modo consequo&t DuL.~ autem \"fl tutn 1riure dolor ln ht.'odrtrit an ,.·ulputate \'tli\ e$S.t'

...

~-~----c~"-•u -~~-•·--·L..--:..

Рмс.

7 .13. Если

не хотите, чтобы элемент обтекал плавающий объект (вверху), вам поможет

свойство clear (внизу), предотвращающее размещение изображений на одном уровне

Свойство

clear

говорит браузеру о том, что стилизуемый элемент не должен

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

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

191

Обучающий урок: поля, фоновые параметры, границы

Свойство с l е а r допускает следующие значения: О

l eft -

стилизуемый элемент смещается вниз относительно плавающего с уста

номеиным левым обтеканием, но правое обтекание остается в силе; О

right-

стилизуемый элемент смещается вниз относительно плавающего с уста

новленным правым обтеканием, параметр левого обтекания остается в силе; О

both -

вызывает перемещение стилизуемого элемента вниз относительно пла

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

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

.copyright { clear: both: } На рис.

7.13 по казан о, как свойство с l е а r может препятствовать беспорядочно

му отображению плавающих элементов различной высоты. Для всех трех пред

ставленных на рисунке фотографий установлено обтекание по правому краю. На верхней части рисунка фото помидоров

(1)-

первое изображение на веб-стра

нице, оно расположено в верхнем правом углу. На отображение второй фотогра фии

(2)

оказывает влияние параметр обтекания первого изображения, и оно обте

кает слева первое фото. Последнее изображение

(3) слишком широкое, чтобы (2), но все-таки оно пытается первому (1), так и ко второму (2) изо

отобразиться рядом (на одном уровне) со вторым расположиться слева по отношению как к

бражению. Однако ширина рисунка (3) не позволяет этого сделать. Применение здесь свойства

фий на одном уровне (см. рис.

clear: right; препятствует размещению фотогра 7.13, внизу). Очистка обтекания для второй фото

графии не допускает ее отображения рядом с первой, а очистка обтекания для третьей предотвращает ее отображение на одном уровне со второй. -~МЕЧАНИЕ------------------------------------------------- Применение параметров левого и правого обтеканий, а также очистка обтекания кажется достаточ но сложным механизмом. Вообще, так оно и есть. В этом разделе я привел вам основные понятия.

Мы снова вернемся к этой теме в гл.

12, там

вы познакомитесь с использованием обтекания в более

сложных вариантах.

Обучающий урок: поля, фоновые параметры, границы В этом обучающем разделе мы исследуем элементы блочной модели

CSS,

потре

нируемся в настройке параметров интервалов, промежутков объектов веб-страниц,

применим к элементам красочные границы-рамки,· поуправляем размерами и об теканием элементов веб-страниц.

192

Глава

Поля, отступы, границы

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

Файлы текущей обуqа

07.

Уnравпение полями страницы Начнем с простого НТМL-файла, содержащего внутреннюю таблицу стилей со сбросом стандартных настроек стилей CSS. Пока на странице нет ничего интерес ного (рис.

7.14).

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

7.17.

Amuina WoddofCSS Sod Ul perspic:ialis ll>de omnis !ste oaiDS aror ~ volupWaD accшaotiJm dolo<emquo lauclantUn. totam rem _."", eaqne ~ qoae аЬ ilo CVCII!ore .....ntis el quasi 8fcl>itecto Ьеа18е W3e dicla яn ~. Nemo euin ip.- voЦ>hdCOD quia volupto& sil aspernaa 1111 odilllll n.g;c, ~ quia ~...аР dolc<es eos..,; r1lliooe ~- ~ ....a.at NОТЕ

~ Ul pe:rspici&js uode CCI>I:Ii$ i$te oatos ar<>r ~ voЦ>mtem ас.,.,.."..." doloremq>e l.mclaoliam. tol!lm """ ~ ipsa qoa.e аЬ ilo inva>lore ..,.._ el quasi o1<ditcc.to Ье.1ае W3e dicla $1101 ~. Nemo euin iроаш ~= qoia ....,q,tas sit aspem8IDr 11111 odilu fugi. sod quia cooseqiUIIDr magni dolores eos qui r1lliooe voЦ>tatan sequi oesdulx. N<q~>e potro qaisqoalll est. WЬо Кnew CSS Наd Suc:Ь

Po,.·cr7

~ Ul ~ uode omais !ste""""

aror sit ,~.." accusaotium clolaremque loutJ;wium. '"""" ran ...,.._ цque quar аЬ ilo""-oreverilalls d quasi lfchlltc«> Ьеа1ае -.itae dicla SФI explicatю. N=o euin iриш voluptalaD quio. sit asp<miiii8" aut odit aalilgil, sod quia cooseqwo~ur шogni dolores Меl

persp;a.a. uode oomis iШ oa1u> enos sit

""""'*""'

~ doloranqoe ~ lolaDI rсш ~ uque аЬ illo I!МIIIore -otis е1 цuasi o1<ditcc.to Ьеа1ае viloc dicta sшl e;ч>litol>o. Nemo euin iр5аш voluptalem quia sit asp<miiii8" 1111 odillllllilgil. sod quia coosequшiUr шogni clolares oos qui Пlliooevoq,шem sequi nescim<. N<q~>e

porro_.,..est, qui dolorem..,...., quia dolor sit otne1. ccosectell6, a&pisc:iveQ,oed quia"""OIJI!>CIIIIDI eiosiDOCit-& iocicЬ>t utlolюre et dolore tiiOjllli!ID o!iquom _ . r ~еш :Ме

Neillw:rl

Sod Ul perspicialis ll>de orшis !ste oal>l$ споr sit voluptal<m ocCDS80Wal doloremque laudaoliua>.tol!lm rem _."", иque

ipsa qoa.e аЬ ilo m...,.ore vai:alis е1 quasi orchilec:to Ьеа13с vi.1e dicla S1IDI eq>icaЬo. Nсшо euin iроаш ~- quia vо6!рш sil aspematut aut odiiiUI fusir. sod quia cooseqwnor mogni dolores eos qui mione voluptalem sequi oesc&rot N<q~>e potro quisqlam esr. qui dolotem ip..." quia dolor sit ornet. CCI<I$eCid\W, adipisci velit, sed quia """t1111DQU<11D eios IDOCi IC0:1pO<& incicЬII ut lalxжe е1 dolore ""'8М"' aiquam quмn1 ~= Ut euin ad mioima veoiam. quis oos\ruln exercilaliooeш ulam с~ susdpC laЬorio<am Cop)тig1Jt2010. Th: Loreoo lpsum Corpo<alion

Рис. 7 .14. Эта страница nредставляет собой основу HTML и содержит единственный стиль, устраняющий множество встроенных настроек форматирования браузера. Она будет выглядеть намного лучше nосле изменения с исnользованием блочной модели

193

Обучающий урок: nоля, фоновые nараметры, границы

Откройте в НТМL-редакторе страницу

sidebar. html

из папки

07.

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

CSS.

Он в основном удаляет все поля, отступы,

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

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

Как минимум вы должны всегда включать этот стиль во все создаваемые таб лицы стилей. Наиболее важными свойствами в нем являются

margin

padding.

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

Во внутренней таблице стилей щелкните кнопкой мыши сразу за комментари ем

CSS /* end reset styles

*/и добавьте стиль селектора тега:

html { background-color: #FDFBAB: Этот стиль устанавливает светло-желтый фон для страницы. Если вы хотите

задать цвет для фона неб-страницы, можно добавить свойство

background-color

либо к тегу <html >,либо к тегу <body>. Далее мы добавим поля, границы и другие свойства тега

<body>.

3. Добавьте другой стиль во внутренней таблице стилей. body { background-color: #FFF: border: Зрх solid #85All0: Этот стиль добавляет белый цвет фона для тега

<body>

и зеленую трехпиксель

ную границу. Поскольку тег <body> расположен внутри тега <html >, браузер счи тает, что он находится <~поверх~ тега

<html>

и белый фон покроет фон желтого

цвета, установленный в предыдущем шаге. Далее мы зададим ширину для тега тела и настроим его отступы и поля.

~ЕТ ------------------------------------------------------Обычно, если вы добавляете свойство background-color к тегу <Ьоdу>, цвет заnолняет все окно браузера. Однако если вы таюке добавите цвет фона для тега <html>, фон <Ьоdу> будет заnолнять только область с содержимым. Чтобы увидеть это в действии, nросмотрите веб-страницу nосле шага

3, затем удалите стиль для тега <html> CSS.

и nросмотрите страницу снова. Странная, но nолезная

мелочь

Измените стиль тела

( <body> ),

который вы только что создали, добавив пять

новых свойств (изменения выделены полужирным шрифтом):

body { background-color: #FFF: border: Зрх solid #85All0:

194

Глава

Поля, отступы, границы

width: 760рх; margin-top: 20рх; margin-left: auto: margin-right: auto: padding: 15рх; Свойство

760 пикселами по ширине: если 760 пикселов, он увидит фоновый цвет стиля <html> и блок шириной 760 пикселов с белым фоном тега <body>. Свойство ma rg i n- top добавляет 20 пиксело в пространства от верхнего края окна браузера, отталкивая содержимое тега <body> чуть-чуть вниз, а левое и правое поля центрируют его, размещая посередине окна браузера. Значение auto - это wi dth

ограничивает тело страницы

окно браузера посетителя окажется шире, чем

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

ПРИМЕЧАНИЕ----------------------------------------------- Вы можете также использовать сокращенное свойство

margin, чтобы сжать эти три строки, устанав

ливающие настройки для полей, в одну:

margin:

20рх

auto

auto:

Наконец, для того чтобы предотвратить прикосновение содержимого тега <body> к линии границы, к внутренней части содержимого с помощью свойства

добавлен отступ шириной и текста был задан отступ

15 пикселов. Другими словами, для 15 пикселовот всех четырех краев.

paddi ng

изображения

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

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

7.15).

Теперь следует уделить внимание тек

сту, чем мы и займемся далее.

Настройка интервалов между тегами Поскольку стили, сбрасывающие стандартные настройки

CSS, <<оголили>> текст на

странице, вам необходимо создать новые стили, которые преобразили бы заголов ки и абзацы. Начнем с тега

Вернитесь к файлу

<hl>

наверху страницы.

sidebar. html в НТМL-редакторе. Переведите курсор за закры body, нажмите Enter и добавьте следующий стиль:

вающую скобку селектора

hl { font-size: 44рх: font-fami ly: Georgia. "Times New Roman". Times. seri f: letter-spacing: lpx: color: #85All0: text-transform: uppercase:

195

Обучающий урок: nоля, фоновые nараметры, rраницы

CSS: ТНЕ MISSING MANUAL.· ~·

··-

fti :•'

'•

Рис.

7.1S. Устанавливая значение auto для левого и

nравого nолей любого элемента,

им еющего заданную ширину, вы центрируете этот элемент

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

мы обсуждали в предыдущей главе. Верхний заголовок имеет высоту 44 ликсе ла и набран прописными буквами. К нeJ\ry применяется шрифт Georgia зелено го цвета, есть небольшой промежуток между буквами. Очень интересным по

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

CSS воздействуют на элементы, которые они форматируют.

2. Добавьте одно новое свойство к стилевому тегу hl, чтобы он выглядел следу ющим образом (изменения выделены полужирным шрифтом):

hl {

font -size: 44рх: font -family: Georgia. "Times New Roman". Times. serif: letter-spacing : lpx: color : #85All0: text -transform : upper~ase: bacкground·color: #Е2ЕВВ4:

196

Глава

Поля, отступы, границы

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

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

ми, цвет не только появляется за текстом

«The Amazing World of

css~. но

и простирается вплоть до правого края окна).

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

Добавьте другое свойство к стилю тега hl, чтобы он выглядел следующим обра зом (изменения выделены полужирным шрифтом):

hl {

font-size: 44рх: font-family: Georgia. "Times New Roman". Times. serif: letter-spacing: lpx: color: #85All0: text-transform: uppercase: background-color: #Е2ЕВВ4: padding: 5рх 15рх 2рх 15рх: Сокращенное свойство

paddi ng

представляет собой быстрый способ добавить

отступы вокруг всех четырех сторон содержимого

в данном случае отступ

шириной ла

5 пикселов добавляется над текстом, 15 пикселов - внизу и 15 пикселов - слева.

справа,

2 пиксе

Есть еще одна проблема с заголовком: из-за отступов, которые добавлены к тегу

<body> (см.

шаг

4 предыдущего задания}, заголовок отодвинется на 15 пикселов

от левого и правого краев зеленого контура, окружающего содержимое. Заголо

вок станет выглядеть лучше, если будет касаться этого контура. Это не пробле ма: на помощь приходят отрицательные поля.

Добавьте последнее свойство к стилю тега hl, чтобы он выглядел следующим образом (изменения выделены полужирным шрифтом):

hl {

поля,

-15

ma rgi n устанавливает

пикселов для правого,

20 пикселов для

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

нижнего и

-15

пикселов для

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

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

в данном случае

197

Обучающий урок: nоля, фоноаые nараметры, границы

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

15 пикселов влево и 15 пикселов вправо, расширяясь <body>. 5. Теперь вы немного отформатируете тег <h2>. Добавьте следующий стиль после стиля для hl: и вытягиваясь над отступами тега

h2 { font-size: 24рх font-family: "Aria l Narrow". Arial. Helvetica. sans-serif: color: #F96B18: border-top: 2рх dotted #8DA516: border-bottom: 2рх dotted #80А516: padding-top: 5рх: padding-bottom: Spx: margin: 15рх О Spx 0: Этот стиль добавляет базовое форматироваНие текста и пунктирные границы сверху и снизу заголовка. чтобы добавить не~ного пространства между текстом заголовка и строками, используются небольшие отступы сверху и снизу. Наконец,

свойство mаrgin . добавляет поля шириной 15 пикселов над заголовком и 5 пик селов под ним.

Сохраните файл и просмотрите страницу в браузере.

Заголовки выглядят хорошо (рис.

7.16). Далее вы создадите боко.вую паиель на

правой стороне страницы.

ТНЕ AМAZING

WORLD OF CSS

--em>raii\'Oiopwem_dolomDqooo_,__________ .. _______ .... ______ ____

s.d a&penpidllii-CI!DI!is opa;.m,coquo ipsa qu~< ~ iJJo щ......., wm.ns .. quooi an:bl"""' Ьсаuо \itacd!cЬ """exp!iall>o. Ncmocalm ipoom vo~upa<ea> qu1a YOiopшat _...... ... odilm ",...,, ..Оqша ~ 0>8plcloloru.,..qul-

~~-----·--··"'""'" NОТЕ

........,,

_,,

,,_

....

,_"_,,

s.da&~110deOO>IIirtao ..... enar•..,.,_-~--

apcr\8m,caq-. .. f!>uquaeaЬIJJoiov"""'"' YetimiseoquooiiiJ'd1itoc<oЬcauoviJxd!cЬSШ11~. Norno<Dim ._,-o~_..qulaYOiopшatosp:maшrautoditaшl\o&ll.l<dqula_""'"'.,....-.. ... q u i -

...,...~~-- Noqaopanoqu...,. ....

Who Klli!W CSS Наd Sudl Power? s.dUt~--lш-em>tlil~-tio""-'<l---

8pCI\am, t:tqoe ipa quac.aь i1lo Шvuaore '"uit8Шc.t Q1.1-.i arc:hitcao Ьсше vilacdkta JUat~. Ncmo t:!lim lpollll'o'QI~quiiYOiopш lh ~Sp:m~~UrllltodiiWtNck.O<dqala_.,.,.М_

Рис. 7 .16. С помощью нескольких стилей вы можете изменить фоновый цвет веб-страницы, добавить поля, регулировать интервалы между заголовками и абзацами

198

Глава

Поля, отступы, границы

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

чтобы боковые меню были достаточно эффективными и полезными, они не долж

ны прерывать потока основного содержимого. Даже название «боковое меню~ говорит о том, что этот блок должен быть расположен обособленно и примыкать к краю неб-страницы, что можно легко сделать средствами

Вернитесь к файлу

si debar. html

CSS.

в НТМL-редакторе.

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

<di v>.

С его помощью можно заключить лю

бой объем НТМL-кода в свой собственный отдельный блок.

Щелкните кнопкой мыши перед первым тегом

Наберите

инажмите

<h2>

(с заголовком «NOTE~ ).

Enter.

Этот НТМL-код отмечает начало блока бокового меню и применяет к нему стилевой класс. Мы создадим сам стилевой класс

. s i deba r,

определить завершение блока бокового меню, закрыв

но сначала нужно

<div>.

Перейдите к закрывающему тегу </р>, который следует сразу за тегом

<h2> (это <h2>Who Knew CSS Had Such Power?</h2> ). введите </di v>.

тот </р>, который появляется прямо перед

Нажмите после него

Enter и

Мы только что заключили заголовок и маркированный список в тег

<di v>.

Теперь создадим для него стиль.

Добавьте в таблицу стилей неб-страницы после созданного ранее стиля для <h2> следующий код:

.sidebar { width: 30%: float: right: margin: lOpx: Этот стиль устанавливает ширину области содержимого (в которой отобража ется текст) равной

30%.

Вам не нужно использовать абсолютное значение, на

пример пикселы, для ширины. В этом случае ширина боковой панели состав ляет 30 %от ширины ее контейнера. Свойство fl oat перемешает боковую панель в правую часть блока, а свойство

ma rgi n добавляет 1О пиксело в

пространства

вокруг панели.

Если вы просмотрите неб-страницу в браузере, то увидите, что форма и положе

ние блока бокового меню определены, но есть одна проблема: границы тегов <h2> отображаются под самим блоком. Несмотря на то что IUiавающее боковое меню смещает текст заголовков, границы остаются на том же месте. Они проступают

в качестве фона плавающего бокового меню. Один из способов решить эту про блему

границ

просто добавить фоновый цвет для боковой панели, чтобы не видеть

h2 (но есть и другой способ, который вы

будете использовать в шаге

8).

199

Обучающий урок: поля, фоновые параметры, границы

Добавьте другое свойство к стилю

. s i deba r,

чтобы он выглядел следующим об

разом (изменения выделены полужирным шрифтом):

{ width: 30%: float: right: margin: lOpx: background-color: #FAEBC7; padding: lOpx 20рх;

.sideMт

Это свойство добавляет светло-оранжевый цвет к боковому меню и оттесняет текст от границ бокового меню, чтобы он не касался границ, которые вы соби раетесь добавить.

Наконец, добавьте еще два свойства к стилю

.sidebar,

чтобы он выглядел сле

дующим образом (изменения выделены полужирным шрифтом):

.sidebar { width: 30%: fl oat: ri ght: margin: lDpx: background-color: #FAEBC7: padding: lOpx 20рх: border: lpx dotted #FC6512; border-top: 20рх solid #FC6512; Это пример удобной методики, описанной ранее. Если вы хотите, чтобы боль шая часть границ вокруг элемента была одинаковой, можно сначала определить границу для всех четырех краев

в данном случае однопиксельную пунктир

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

в данном примере верхняя граница будет сплошной и будет иметь высоту

20 пикселов. Этот способ позволяет использовать всего две строки (border-top, border-bottom, border-left и border-right).

кода

CSS,

а не четыре

Заголовок внутри боковой панели выглядит не совсем так, как должен. К нему применяются те же свойства, что и к другим тегам

рый вы создали в шаге

5).

<h2> (из-за стиля тега h2, кото

Границы отвлекают внимание, а верхнее поле слиш

ком «отталкивает~ заголовок вниз от верхней части боковой панели. К счастью, вы можете использовать наследуемый селектор, чтобы переопределить эти свойства.

После стиля

. s i deba r

лектор:

.sidebar h2 { border: none: margin-top: 0: padding: 0:

во внутренней таблице стилей добавьте наследуемый се

200

Глава

Поля, отступы, границы

Из-за

. sidebar этот стиль является доминирующим, то есть имеет большую зна h2. Он стирает границу, полученную от оригинального стиля тега <h2>, вместе с верхним полем и всеми отступами. Тем чимость по сравнению с обычным стилем

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

h2 -

Страница стала хорошо выглядеть, но границы тегов

каскадпасть в действии!

<h2>

все еще появляются

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

Найдите стиль

и добавьте свойство

overfl ow:

h2 { font-size: 24рх : font-fami ly: "Arial Narrow". Arial. Helvetica. sans-serif: color: #F96Вl8: border-top: 2рх dotted #8DA516: border-bottom: 2рх dotted #8DA516: padding-top: 5рх: padding-bottom: 5рх: margin: 15рх О 5рх 0:

overflow:

hiddeп:

У становив для свойства overfl ow значение

hi dden, вы спрячете границы, которые

проходят за пределами текста заголовка и под плавающим элементом (к сожа

лению,

Internet Explorer 6 не понимает этого и по-прежнему отображает грани

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

Сохраните файл и просмотрите неб-страницу в браузере. Она должна иметь вид, представленный на рис.

7.17. Internet Explorer 5 или 6 ваша страница не будет похожа на ту, что показава на рис. 7.17. В этих версиях браузера есть несколько ошибок, отрица К сожалению, в

тельно влияющих на внешний вид неб-страницы. Дальше они будут описаны.

Усrранение ошибок брауэера В

Internet Explorer 7 и 8 неб-страница s i deba r. htm 1 выглядит замечательно, но более

ранние версии этого браузера не могут отобразить ее правильно. Если у вас есть Internet Explorer 6, попробуйте, и вы увидите, о чем идет речь. С одной стороны, граница обоих заголовков

боковым меню. В шаге

<h2> выступает в качестве фона под overflow, позволяющее браузеров, но в браузере Internet Explorer 6

(выше) использовалось свойство

решить эту проблему в большинстве

нужно применять какой-то другой способ. Кроме того, правое поле бокового меню заметно больше остальных. ПРИМЕЧАНИЕ------------------------------------------------- Если у вас нет возможности убедиться в сnраведливости моих утверждений о существовании про блем с браузерами, nросто nоверьте на слово и исnользуйте этот раздел в интересах посетителей

вашего сайта, которые все еще nользуются Iпternet Explorer б.

201

Обучающий урок: поля, фоновые параметры, границы

ТНЕ

·!

AMAZING WORLD OF CSS

Sedtlpc:rspiciiЬsCDdt ocarisis8C'U'Шe'IOI' lil\~.ac~doЬ:~~ (Cita!DICIII~ ..~ ~acl8euь ~'Dt diaaAa ~ Na110cai1D~ ~CI8 еРа

Cn.a qaк.aЬ • .._ort''C!I'ialis d

~-~- odlatЪait. "Cd<Pac~aa.apdolof~ eo~qt;~t.ЬC..,~a~~~oc:к.id

'll'ho Knew CSS Had Such Po•Ne,-: Sod •

per_..

aode oaDs istc o.11a:s cnOJ • ,·olrllputma ac-C'\INICi.a) doloraDqrx lladlni:UD, IotlaiiCOI. ~ . aqoe ips.a ~ ,Ь lo См:а!ОС"t ~ d qasi adileao Ье.-. ....__ dicca sua1 rxplir.aЬo N~ cni» .,._,~=IJ.Iit~~~ ~llllllpidoЬn

.. odlt .. ~Soe'dqllia

_..·----........... _ ...-... . 'ЮТЕ

Sed Ql prcnpici8s t8lidt: omais isl~

..,.-.....

~mcwtil~•

~~-~C8qllt'ipsaqat: .Ь iо_ е_с<..,;

NoiMe'

....._ ,_.....,._ N_....".._ .. ~N--

Std• paspici*s 1Dkoa8!. isltмtus cnor s*''~falм.cu:wrЬe dDiora8qDt ~. to&IID fCID apcr\lla. caq8e ~ q.1W 1Ь lo ilмDoft ~ d qaмi adlikdo Ьеuе ~ clrt8 SUIIII ~ NaDO siaa

.,_.......,.., .... ........,,. _ _ . .. оаrаоч;о. ~«~..-

......-.odll ...... sed ... .... ............... .

~ ..... doan«>~ qair81tiooe~ s.rqatonoUat. N~ p:no ~ c:sL qai. dоЬ., ~ qgia dolor silaDet. <oo.s.c'Ctc:Nr 8lipOd ..-_ ~qaie.DOD _,.-t'ila~\c:IJ:IfiCII"4 iac:idDcll18 LIЬott ct dс~Ь"с- ~ .,_q.ecrli ........CID

MeNeilher' Scdalpaspic:ialis_.c..-i:stl!6111atmor tir~cш •~dоЬ~~ IOC8Iart~~~~apcrilla ~ ips.aquк aЬ . . iava:tofC'''~ct qca:si 8"(~о ~ v8ac diaa. Q:d Щ)iиЬо Nt~DD~ ipW:D ~CIDq\U

Рмс.

7 .17. Небольшой набор СSS-стилей

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

НТМL-коду элегантный дизайн

Первая ошибка, которой мы займемся. - это выстунающие границы _

Вернитесь к файлу

s i debar. htm1 в

НТМL-редакторе.

Вам нужно добавить всего олно свойство к стилю тега <h2>. Оно лает эффект только в Inteгnet Ехр\огег 6.

2. Добавьте в конце таблицы стилей веб-страницы s i debar . html следующий стил ь: h2 {

font-size: 24рх : font-family: "Arial Narrow". Arial. Helvetica. sans-serif: color: #F96Bl8: border-top: 2рх dotted #8DA516: border-bottom: 2рх dotted #8DA516 : padding-top: Spx: padding-bottom: Spx: margin: lSpx О 5рх 0: overfJow: hidden: zoom: 1:

202

Глава

Поля, отступы, границы

Свойство

zoom официально не является свойством CSS. Оно было разработано Microsoft и служит для увеличения размера элементов на странице. Однако не по этой причине вы используете его здесь. В данном случае свойство zoom препятствует расширению границы под плавающим элементом в IE 6. Оно в

устраняет ошибку, связанную с границей, хоть и совершенно мистическим

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

нительного пространства с правой стороны бокового меню. Поскольку эта ошибка затрагивает браузер Internet Explorer 6, создадим дополнительный стиль с селектором * html для бокового меню (конструкция * html скрывает остальную часть селектора - . s i deba r - от обработки любым браузером, кроме

Internet Explorer 6 и 3.

его более ранними версиями).

Добавьте в таблицу стилей следующий стиль:

* html .sidebar { di sp l ау: i nl i ne: В данном случае использование свойства

эффект, хотя и не имеет смысла в

CSS.

di sp l ау дает определенный полезный Это способ обмануть браузер, чтобы

избавиться от лишнего правого поля.

Сохраните файл и просмотрите неб-страницу в браузере Теперь она должна быть похожа на страницу,

в браузере

Internet Explorer 6.

Internet Explorer 6. представленную на рис. 7.17, даже

Всем неб-дизайнерам, хотят они того или нет,

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

15 вы познакомитесь с несколькими ме Internet Explorer. найти в файле sidebar_fin1shed.html иэ папки

тодиками для исправления ошибок Решение эадания вы можете

07_finished.

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

. copyri ght ). Добавьте в этот стиль

s i deba r. htm l

(например,

верхнюю границу (над текстом примеча

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

text-transform, описанное в разд.

«Фор

матирование символов и слов~> гл. 6). После создания стиля добавьте соответ ствующий атрибут класса к тегу <р> в НТМL-коде.

Добавление графики на неб-страницы

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

CSS

предлагает вам исчер

пывающий набор средств управления ими. Здесь можно работать с графическими элементами двумя способами: посредством тега <img> и свойства background-image

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

нения изображений средствами языка

CSS.

На самом деле лучший способ узнать

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

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

CSS

и тег

<img>

Тег <img> является средством добавления изображений в веб-страницы фотогалс рей еще со времен появления Интернета. Даже сайты без фотографий используют

этот тег для добавления логотипов, управляющих элементов (кнопок) и иллюст раций. В

CSS нет свойств, специально предназначенных для форматирования изо

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

изображение в рамку или унифицировать вид галереи. Ниже представлен список СSS-свойств, наиболее часто используемых в сочетании с изображениями. О Border -

можно использовать одно из множества свойств границ (см. разд. <<до

бавление границ~ гл.

7) для обрамления изображений. Пример приведен в обу 1 этой главы. Поскольку каждая сторона изображения может параметры границ: цвет, стиль, толщину линии ваши творческие

чающем уроке иметь свои

возможности расширяются.

О Paddi ng -

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

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

204 О

Глава

Fl oat -

Добавление графики на веб-сrраницы

выравнивание изображения с помощью

fl oat перемещает его к левому

или правому краю неб-страницы. Или, если изображение расположено внутри

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

фотогалереи в несколько строк и столбцов. О

Margi n -чтобы добавить пустой промежуток между изображением и остальным содержимым неб-страницы, используйте свойство ma rgi n. Когда вы устанавли ваете для изображения обтекание, текст обычно располагается слишком близко.

Добавление левого поля (с выравниванием по правому краю) или правого поля (с выравниванием по левому краю) создает пустой отделяющий промежуток

между текстом и графическим элементом.

В большинстве случаев вам не потребуется создавать стиль для самого тега <i mg>. Его форматирование затрагивает слишком большой диапазон элементов неб страницы и изменит все изображения, включая элементы, обеспечивающие со вершенно разные функции. Так, наряду с изображениями одинаковое форматиро вание будут иметь логотип, навигационные кнопки, фотографии и даже рекламные

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

.gallerylmage

или

.logo,

для применения стилей к нужным элементам

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

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

<di v>

с идентификатором

ga ll ery

и затем создать стиль только для изображений,

расположенных внутри этого блока, так:

#ga ll ery i mg.

Фоновые изображения Свойство

background-image-

ключ к созданию визуально ошеломляющих сайтов.

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

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

http://www.csszengarden.com. НТМL-код обеих

веб-страниц, показанных на рис.

совершенно одинаков; визуальные различия

8.1,

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

изображения (на самом деле, если вы посмотрите на НТМL-код этих неб-страниц, вы увидите, что в них нет ни единого тега

<i mg> ).

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

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

background тега <body>. CSS

HTML

использовал атрибут

сделает все то же самое, но гораздо лучше.

Фоновые изображения

205

Рис. 8.1. Сайт csszengarden.com демонстрирует мощность каскадных таблиц стилей, показывая, как с nомощью CSS вы можете преератить один и тот же НТМL-файл в две совершенно разные веб-страницы

ПРИМ~НИЕ----------------------------------------------- Да.nее е книге вы найдете оnисание трех свойств фоновых изображений и изучите СSS-код каждо го из них. Позже в этой главе вы nознакомитесь с сокращенным методом набора - вариантами свойств, которые сэкономят немало времени.

206

Глава

Добавление графики на веб-сrраницы

ИНФОРМАЦИЯДЛЯНОВИЧКОВ

GIF-, JPEG· и РNG-файпы: веб-rрафика Компьютерная графика nредставлена сотнями различ

объема данных, необходимых для точного представ

ных форматов файлов с такими замысловатыми аб

ления образа. С другой стороны, сжатие JPEG nриводит

бревиатурами, как JPEG, GIF, TIFF, РЮ, ВМР, EPS и т. д.

к тому, что текст и большие nлощади со сnлошным цветом покрываются nятнами.

К счастью, веб-графика немного nроще. Современные

браузеры работают только с тремя графическими фор

Наконец, формат

матами:

GIF, JPEG и PNG. Каждый из них обеспечивает

включает в себя лучшие черты GIF- и JРЕG-Форматов, но

хорощее сжатие. Благодаря возможностям комльютера

вы должны узнать, какую именно версию PNG исполь

сжатие снижает размер графического файла, и тот мо

зовать в конкретной ситуации. PNGВ в основном заме

жет «nутешествоваТЬ» по Интернету быстрее. Какой из

няет GIF. Как и GIF, он nредлаrает 25б цветов и базовую

этих форматовлучше выбрать, зависит от изображения,

возможность сделать один цвет прозрачным. Тем не

которое вы хотели бы добавить на свою страницу.

менее PNGВ обычно сжимает изображения и делает их

PNG (PortaЫe Network Graphics)

размер несколько меньшим, чем GIF.

no щй nричине

GIF (Graphics lnterchange Format). Такие файлы обес

изображения PNGВ загружаются чуть быстрее, чем та

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

кие же изображения, сохраненные в формате GIF.

торых есть области со сnлошным цветом: логотипы, текст, nростые баннеры и т. д. GIF-файлы также nре

PNG24 и PNGЗ2 (также извеаный как PNG24 с альфа

доставляют возможность установить один из цветов

прозрачноапью) nредлагают расширенную цветовую

прозрачным, а это означает, что вы можете сделать

nалитру JРЕG-изображений без nотери качества. Это

так, чтобы какой-нибудь цвет исчез, позволяя фону

означает, что фотографии сохраняются в форматах

веб-страницы быть видным на части изображения.

ков, вследствие чего фотографии обычно выглядят nас

PNG24 или PNGЗ2 и, как nравило, имеют более вы сокое качесrво, чем JPEG. Но nрежде, чем перейти к формату PNG, следует nомнить, что изображения JPEG nредлагают очень хорошее качество и гораз до меньший размер файла, чем PNG24 либо PNGЗ2, В общем, JPEG является лучшим выбором для фо

теризованными (пятнистыми и не реалистичного цвета,

тографий и других изображений, которые состоят из

как макат). Другими словами, фото заката, которые вы

множества цветов.

Кроме того, GIF-мзображения могут включать в себя nростую анимацию.

Изображения

GIF содержат максимум лишь 25б оттен

сделали цифровой камерой, в формате GIF будет выгля деть не очень хорошо. Если вам не нужно анимировать

Однако PNGЗ2 имеет одну особенность, которой нет

изображение, то формат

у других форматов: это 25б уровней nрозрачности (аль

PNGB, который мы обсудим ниже, будет лучшим выбором, по сравнению с GIF.

фа-прозрачность). Она nозволяет оформить фон веб страницы как тень или задать для графики nрозрач

JPEG (Joint Photographic Experts Group). Такая графи ка имеет сильные стороны там, где у GIF наблюдаются недостатки. Изображения JPEG могут содержать мил

ность 50%, чтобы можно было видеть что-либо сквозь нее, создавая эффект nолупрозрачности. К сожалению,

JPEG имеют nреиму

lntemet Explorer б для Windows неnравильно отобража ет 256 уровней прозрачности файлов PNGЗ2: вместо того чтобы сделать прозрачные области сквозными, IE б

щества не только в nлане фотографий. Они сnособ

заменяет их отвратительным синим фоном (есть не

ны сжимать изображения с множеством различных

сколько методик, исnользующих

лионы различных цветов, что делает их идеальными

для фотографий. Однако файлы

цветов гораздо лучше, чем

GIF, nотому что апгоритм

nример,

JavaScript (см., на

http:/1 24ways.org/2007/supersleight·

JPEG предусматривает то, как человеческий

transparent-png-in-ieб}, которые могут nомочь

глаз воспринимает смежные значения цветов. Когда

корректно отобразить в IE 6 nрозрачные файлы PNG).

сжатия

графическое приложение сохраняет файл

JPEG, про

исходит комплексный анализ цвета с целью снижения

К счастью,

lnternet Explorer 7 и 8 обрабатывают про

зрачность PNG, как это делают Firefox, Safari и Opera.

207

Фоновые изображения

Свойство

background- image добавляет рисунок в качестве фона элемента.

Чтобы

поместить его на заднем плане всей веб-страницы, можно создать стиль для тега

<body>: body { background-image: url(images/bg.gif): Свойство принимает единственное значение: ключевое слово

url,

за которым

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

URL,

например, так:

url(http://www.cosmofarmer.com/image/bg.gif) Или относительный путь от документа или корневого каталога сайта:

url( .. /images/bg.gif) /*относительный путь от документа*/ url(/images/bg.gif) /*относительный путь от корневого каталога */ Как описывается во врезке «Информация для новичков>> (см. далее), относитель ный путь от документа указывает адрес файла таблицы стилей, но не стилизуемой НТМL-страницы. Конечно, они будут совпадать при использовании внутренней

таблицы, но вы должны помнить об этом, применяя 81lешнюю таблицу стилей. Пред положим, у вас имеются папка styles (содержащая таблицы стилей сайта) и папка images (с изображениями сайта). Обе расположены в главном (корневом) каталоге вместе с начальной (домашней) страницей сайта (рис.

8.2).

Когда посетитель про

сматривает ее, загружается также внешняя таблица стилей (шаг

домашняя страница

Рис.

8.2. Относительный

1 на рис. 8.2).

D. . ;.

папка с рисунками

styles.css

путь от документа вычисляется применительно

к файлу таблицы стилей, но не к стилизуемой веб-странице

Теперь допустим, что таблица включает стиль <body> с атрибутом фонового изо бражения, в котором в качестве рисунка выбран файл bg. gi f из папки images. Относительный путь по отношению к документу приведет от таблицы стилей к ри сунку (шаг 2 на рис. 8.2). Это будет выглядеть следующим образом:

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

208

Глава

8. Добавление

графики на веб-страницы

Этот путь интерпретируется так:

. . 1 означает «Подняться вверх на один уровень~. то есть к корневому каталогу, styles; images/ означает «перейти к папке с изображениями images>>;

bg. gi f определяет сам файл изображения.

к папке, содержащей папку

В приведеиных примерах путь не заключен в кавычки, как требует

HTML; они CSS все три следующие строки кода

необязательны, хотя и могут указываться. В идентичны:

background-image: url(images/bg .g if): background- image: url ( "images/bg .gif"): background-image:,url(' images/bg.gif'): ИНФОРМАЦИЯДЛЯНОВИЧКОВ

TиnыURL или

Отн()(!Jтельный от дохумента определяет путь к фай

nрисоединении внешней таблицы стилей директивой

CSS nри добавлении фонового изображения

лу от текущего документа. Когда он указан в таблице

URL: Unlform Resouгce

стилей, он оnределяет путь до указанного файла от

@ mport вы должны определить

locatoг (унифицированный указатель ресурса, URL-aд

pec) -

таблицы стилей, а не от текущей веб-страницы.

nуть к файлу, расnоложенному в Интернете.

Существует три тиnа nутей: абсолютный, оmоситель

Вот несколько подсказок относительно того, какой

ный от корневого каталога и оmосительный от доку

тиn

мента. Все три варианта nросто указывают, где браузер

случае.

URL нужно использовать в каждом конкретном

может найти определенный файл (наnример, друrую ве6-сrраницу, рисунок или внешнюю таблицу стилей).

•

Если вы обращаетесь к файлу, который находится на сервере, оmичном от того, где размещена ваша

таблица стилей, то должны исnользовать абсолют

Абсолютный путь nохож на почтовый адрес- он

содержит всю информацию, необходимую браузеру

ный путь. Это единственный тип

дпя нахождения файла. Абсолютный путь включает

жет указывать на дРУrой сайт.

http://,имя ком11Ь10rера (хоста) в сети, паnку и название http://www.cosmofarmer. com/images/bluegrass.jpg. самого файла. Наnример:

•

URL, который мо

Корневой оmосительный путь хорош для доступа

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

Корневой относительный путь (оmосительный nуть

ся с корневого каталога, вы можете перемещать

от корневого каталога) указывает, где находится

таблицу стилей в любое друrое место, не затрагивая

файл самого верхнего уровня -

nри этом nути от корневого каталога до изображе

корневой папки сай имени.

ний сайта. Однако этим сnособом затруднительно

Начинается с символа 1 (слеш), указывающего на кор

nользоваться, если вы только учитесь веб-дизай

невой каталог сайта (nапка, в которой располагается

ну: вы не сможете восnользоваться предвари

mавная страница). Например,

/images/bluegrass.

тельным просмотром в брауэере, nока не будете

jpg обозначает, что файл Ьluegrass.jpg находится

просматривать страницы через сервер в Интернете

images, которая расположена в корневом ка

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

талоге. Самый простой способ определить корневой

ния и отладочных целей. Другими словами, если

та. Он не содержит ни

в папке

http://, ни доменного

относительный путь- взять абсолюmый и отбросмть

вы поnытаетесь nросто открыть ве6-страницу в сво

http:// и имя хоста.

ем комnьютере с помощью меню

File ~ Open

209

Уnравление nовтором фоновых изображений

ИНФОРМАЦИЯДЛЯНОВИЧКОВ

(Файл ~ Оn<рыть), то вообще не увидите никаких

в Интернете. Вы можете создать СSS-файлы и за

изображений, которые помещены на веб-страни

тем просмотреть их в браузере, просто открывая

цу с применением относительного пути от корне

страницу, сохраненную на жестком диске ком

пьютера. Они будут работать и тогда, когда вы

вого каталога.

загрузите их на рабочий сайт, но вам придется

•

Использование относительного пути от докумен

переписать

та- лучший способ разработки веб-дизайна на

тите переместить таблицу стилей в другое место

URL к изображениям,

если вы захо

собственном компьютере, без nомощи сервера

насерве~.

Управление повтором фоновых изображений Устаревший НТМL-атрибут

background

имеет одну проблему: фоновый рисунок

многократно повторяется в виде мозаики, заполняя всю веб -страницу (в современ

ном стандарте HTML эта недоработка исключе на, и не только она) . К счастью, CSS предлагает намного более богатые возможности по управлению фоновыми пара

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

background-repeat: no- repeat : Свойство может принимать четыре значения. Рассмотрим их по порядку.

repeat -

параметр по умолчанию, обеспечивает повторное отображение фоно

вого рисунка слева направо сверху вниз, до полного заполнения всего простран

ства веб-страницы (рис. О

no- repeat

8.3).

-отображает фоновый рисунок один раз, без повторения и перекры

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

применять его для установки фоновых изображений тегов, отличных от <body>: Вы можете пользоваться им, чтобы поместить графический логотип вверху веб страницы или создать собственные маркеры в списках ( пример такого маркера

приведен в обучающем уроке

2 этой главы). Другой пример использования это

го параметра - пр именение его к верхней стороне блока тега <di v> для создания закругленного края блочного элемента. О

repeat.- x -

вызывает повторение фонового изображения горизонтально вдоль

оси Х (по всей ширине веб-страницы) . Это замечательное средство для добав ления графического баниера (заголовка) сверху веб-страницы (рис.

8.4, слева),

декоративной границы сверху или снизу заголовка.

repeat -y -

повторяет фоновое изображение вертикально вдоль оси У (по всей

высотевеб-страницы ). Вы можете использовать этот параметр, чтобы добавить

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

210

·глава 8. Добавление графики на веб-страницы

Рис. 8.3. Применяйте повторное отображение фоновых рисунков с осторожностью: выбирайте не слишком контрастные, плавно стыкующиеся изображения (слева); четкие, яркие, высококонтрастные изображения (справа) делают основной текст веб-страниц нечитаемым

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

Позиционирование фоновых изображений Размещение фоновых изображений и управление их повтором

это тол ько поло

вина дела. СSS-свойство позиционирования фонового изображения

posi ti on

background -

позволяет управлять точным расположением несколькими способами.

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

абсолютных и процентных значений.

211

Позиционирование фоновых изображений

Ключевые сnова Вы можете работать с двумя наборами ключевых слов: один из них имеет три па

l eft, center, ri ght, а дру top, center, bottom (рис. 8.5). Предположим, вы

раметра управления горизонтальным позиционированием:

гой -три параметра вертикального:

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

body { background-image: urlCbg_page.jpg): background-repeat: no-repeat: background-position: center center: Чтобы переместить его в верхний правый угол веб-страницы, просто измените параметр позиции фонового рисунка:

background-position: right top:

center center

left center

center bottom

right center

center top

center center

Рис.

8.5. Вы можете

использовать для позиционирования фоновых изображений ключевые

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

~МЕЧАНИЕ----------------------------------------------- Если вы решили nрименить повторяющееся фоновое изображение (установив для свойства Ьack одно из значений, описанных ранее), то начальную точку или координату первого

ground-repeat

отображаемого фонового рисунка определит свойство Ьackground-position. Например, если вы nри мените параметр

repeat,

то весь фон веб-страницы будет заnолнен фоновым рисунком. Но именно

ьackground-position укажет, с какой позиции нужно начать повторное отображение.

212

Глава

Добавление графики на веб-страницы

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

ницы, создавая фон для всего содержимого (рис.

8.6, слева), то можете создать сле

дующий стиль:

body { background-image: url(background.jpg): background-repeat : repeat-y : background -pos i tion : center top : Аналогично, применяя ключевые слова

bottom, center и top,

вы можете устано

вить горизонтальное повторение фонового изоqражения в определенном месте веб-страницы (или внутри стилизуемого элемента) и при использовании парамет ра repeat- х (см. рис . 8.4, слева). Чтобы поместить разделительную линию под заго

ловками в обучаюu(ем уроке 2, пользуйтесь методикой, представленной на рис. 8.6, справа.

\·~.'

...

.._

Center aligned background graphic tiled vertically

Botton1 .эl•rJncd g• t 1l('d 1101 1/0il t.J I Iy

Jplнc

Рис. 8.6. При повторении фонового изображения вертикально (слева) или горизонтально (справа) польэуйтесь свойством

background-position

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

совп---------------------------------------------------на самом деле вы можете добавктъ фоновый рисунок к обоим тегам:

<html>

и <Ьоdу>. Если вы

nовторяете оба изображения по горизонтали и расnолагаете рисунок тега <Ьоdу> вверху, а изо-

бражение тега

<html>

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

и нижнюю чаеп~ страницы, вне зависимости от высоты страницы. Это работает во всех современных брауэерах, даже в

IE б!

213

Позиционирование фоновых изображений

ОШИБКИ БРАУЗЕРОВ

Проблема с отображением фоновых рисунков в нижней части окна брауэера

Firefox

Отображая рисунок в качестве фона всей веб-страни

Если веб-страница имеет всего несколько абзацев тек

цы,

ста и отображаетсR на большом мониторе, то Fiгefox

Firefox не всегда nравильно устанавливает верти

кальное nозиционирование изображения. Например,

nринимает за нижний край окна браузера

bottom

bottom,

нижний край последнего абзаца текста веб-страницы.

изображение не всегда nоявляется в нижней части

Если вы столкнетесь с такой ситуацией, то nросто до

если вы исnользуете вертикальную nозицию

• о~на браузера. Это случается, когда основное содер жимое веб-страницы меньше no высоте.

бавьте следующий стиль: html

{ he1ght · 100 t: }

(в lnteгnet Exploгer 7 и ниже нет этой nроблемы).

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

em. При этом нужно указать два значения: одно из них определяет

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

расстояние между верхней стороной изображения и верхним кра

ем элемента-контейнера (другими словами, первое значение указывает горизон

тальную координату, а второе- вертикальную).

Допустим, вы хотите установить собственные маркеры для списка. При добав лен ии в тег< 1i > фонового рисунка маркеры не всегда будут отображатся правиль но центрированными на строке (рис.

8.7,

вверху). Придется выровнять маркеры

списка посредством свойства позиционирования фонового рисунка (см. рис.

8.7,

внизу). В нашем случае элементы списка будут выглядеть гораздо симпатичнее, если расположить маркеры на 5 пикселов правее и на 8 л икселов ниже. Для этого

.1обавим в стиль фонового изображения следующее свойство:

Jackground-pos i tion:Spx 606

rbll

8рх :

PosltJoning

Don't leave Water-proof g Kudzu is to g Don't leave g Water-proof g Kudzu is to g

Рмс.

-;:

Ьullets

0 G ~ е hЩ>;f/css.loal/ch08/plxtl_plxen,~r~

Google

the hose running. your planters. Ье avoided. the hose running. your planters. Ье avoided .

8.7. Исnользование собственных изображений

маркеров для сnисков иногда требует их

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

214

Глава

Добавление графики на веб-страницы

Нельзя указывать расстояние относительно нижнего (bottom) или правого ( ri ght) края веб-страницы или стилизуемого элемента в пикселах или em, поэтому,

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

(bottom ri ght ), либо процентные значения,

как описывается далее. Однако вы мо

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

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

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

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

ПРИМЕЧАНИЕ----------------------------------------------- Процентными значениями часто nользуются в сочетании с nлавающими элементами для установки

фонового цвета или рисунка для левого и (или) nравого навигационных меню, которые занимают всю высоту веб-страницы.

Как и в случае с пикселами или значениями в

em,

вы должны указать два про

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

вертикальную. Относительно чего рассчитывается значение, указанное

в процентах? Если объяснить в двух словах, то оно приравнивается к процентному значению стилизуемого элемента.

Лучший способ понять

рассмотреть несколько практических примеров.

Чтобы позиционировать изображение в центревеб-страницы (аналогично изобра жению в центре рис. 8.8), необходимо написать:

background-position:50% 50%: Свойство устанавливает координату Х таким образом, что она указывает на точку изображения в 50 % от его левой стороны, которая находится в 50 % от ле вого края веб-страницы (или любого элемента, к которому применяется фоновое изображение). Координата У устанавливается так, что она указывает на точку изо

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

юся мишенм (поэтому координаты позиционирования стилизуемого элемента

в процентах могут изменяться, если посетители веб-страницы меняют размеры окна браузера).

215

Позиционирование фоновых изображений

ВО%

20% ':

~----------------~------~ - -------: ~~r

_::-____

50%50%~

Рис.

8.8. Используя

-NJ ....'

' ' ' 'L----------

проценты, сначала определите начальную «якорную»

точку (координату) в изображении

~МЕЧАНИЕ----------------------------------------------- Раэмещение изображения по вертика!UI в фоне страницы с помощью процентов не обязательно nоместит его в правильном~ месте, если содержимое страницы не заполняет всю высоту окна брау зера.

Как и в случае с пикселами и

ern, можно

назначать отрицательные процентные

значения, но результаты трудно предугадать. Вы можете также комбинировать ;, подбирать значения в пикселах, ern и процентах одновременно. Например, чтобы :-rоместить изображение на расстоянии

пикселов от левого края элемента, нu

з центре элемента по высоте, применяют свойство со следующими параметрами:

:::kground-position:

50%:

5рх

Избегайте смешивания процентных значений или пикселuвjеm с ключевыми --lОвами, например

top

:очетания, а некоторые

50рх. Некоторые браузеры справятся с обработкой этого

нет.

~ЕЧАНИЕ----------------------------------------------- :iезусловно, фоновые изображения улучшают визуальное восприятие неб-страниц, но они, как -оавило, не отображаются при распечатке. В большинстве браузеров фоновые изображения могут

:.ас:nечатываться, но обычно это требует дополнительных действий. Если вы хотите предоставить 3С13можность посетителям сайта печатать неб-страницы с рисунками в таком виде, как они отобра -аются в брауэере, то вместо фоновых изображений по-прежнему используйте тег

<img>

юавки таких важных фрагментов, как логотип сайта или схема проезда к интернет-магаэину.

для

216

Глава

Добавление графики на веб-страницы

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

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

CSS

такая проблема решается посредством свойства

которое может принимать два значения:

scroll

fixed.

background-attachment,

Значение по умолчанию

определяет такое поведение браузера, при котором фоновое изображение

fi xed предот 8.9). Так, если

прокручивается вместе с текстом и другим содержимым. Значение вращает перемещение, жестко фиксируя его на заднем плане (рис.

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

body { background-image: url(images/logo.gif): background-repeat: no-repeat: background-attachment: fixed: Значение

fi xed

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

новым изображением. Когда вам требуется выполнить прокрутку, текст основного содержимого плавно перемещается (буквально плывет) и изящно исчезает вверху веб-страницы, а фоновое изображение остается на месте, создавая красивый эф фект. ПРИМЕЧАНИЕ----------------------------------------------- СSS позволяет «прикрепить» фоновое изображение к стилю любого элемента веб-страницы, а не

только тега <Ьоdу>. Однако браузер

Intemet Explorer б

и его более ранние версии понимают свой

ство Ьackground-attachmeпt только в случае применения стиля к <Ьоdу>.

Сокращенный вариант свойсrва

background

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

background-image, background-attachment и т. д., отнимает - применение сокращенного

много времени. Существует более простой метод свойства

background.

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

background-color,

чая

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

ственной строке лаконичного кода

CSS. background, за которым должны следовать значения background-color, background-image, background-attachment, background-position.

Просто набирайте свойство для

217

Сокращенный вариант свойства Ьackground

Lorem lpsum Lorem ipsum dolor sit amet. consectetuer adiplscing ellt. sed diam nonummy nibh euisrnod tincidunt ut laoreet dolore magna aliquam erat volutpat Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit loЬortis nisl ut aliquip ех е а comrnodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. vel illum dolore eu feugiat nulla fэcilisis at vero eros et accumsan et iusto odio dignissim qui Ыandit praesent luptatum zzril deleni.

adipisclng elit. sed diam nonummy nibh euisrnod tincidunt ut laoreet dolore magna aliquam erat volutpat Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper susclpit lobortis nisl ut aliquip ех еа commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestle consequat, vellllum dolore eu feuglat nulla fэcilisis at vero eros et accumsan et iusto odio dignlssim qui Ыandit praesent luptatum zzril deleni. Lorem ipsum dolor sit amet. consectetuer adiplscing elit, sed diam nonummy nibh euisrnod tlncidunt ut laoreet dolore aliquam erat Рис.

8.9. Для закреnления логотиnа исnользуйте свойство background-attachment с nараметром

fixed

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

body { background: #FFF url(bullseye .gif) scroll center center no-repeat; Вовсе не обязательно указывать абсолютно все параметры свойства. Вы мо жете использовать один из них или любое сочетание. Например, background: уе11 ow равнозначно

background-color : yellow.

Веете параметры свойства, которые вы не

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

:ackground : url( i mage/ bullseye .gif)

218

Глава

8. Добавление

графики на веб-страницы

Это эквивалентно следующему стилю:

background: url (image/bul l seye.gif) fixed left top repeat: Поскольку свойство background намного быстрее набрать и с его помощью мож но добиться того же эффекта, что и посредством его длинных синонимов, я реко мендую использовать этот сокращенный вариант свойства для добавления фоно вых изображений и установки цвета фона в стилях. ЧАСТОЗАДАВАЕМЫЕВОПРОСЫ

Поиск бесnлатных комекций изобраЖений l!ы не художник, неумеете рисовать, и у вас доже нет

все они могут использоваться в коммерческих про

цифравой камеры. Где же можно найти иллюстра

ектах; nрежде всего читайте комментарии меnким

тивный материал для сайта?

шрифтом ко всем фото, с которыми собираетесь ра ботать).

Нужно отдать должное Сети. Она представляет собой универсальное срfАств.о поиска, благодаря которому

Если вы ищете образцы маркеров для сnисков, значки

можно выйти из л~бой ситуации. Существует множе

для панелм управления, рисунки фоновых узоров для за

ство платных сайтов, содержащих коллекции готовых

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

фотографий и иллюстраций, но наряду с ними таюке

большого мноrообразия. Например, сайт Bullet Мadness

имеется довольно много бесплатного материала.

(www.stylegala.com/features/Ьulletmadness/) пред

Образцы фотографий можно найти на сайте Morgue File

лагает 200 различных маркеров, в том чиспе варианты

(www.morguetlle.com), где есть множество замеча тельных фотографий. Stock.xchng (www.sxc.hu)еще один отnичный фоторесурс. Сайт Open Photo (http:// openphoto.net/gallery/browse.html) предлагает

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

коллекции изображений, nреАоставляя возможность их применения с некоторыми ограничениями, и вы

можеrе воспользоваться поиском по сайту Creative Commons и найти изображения (а таюке видео и музыку), которые моrут быть задействованы в личных или ком мерческих проектах: http://search.crealivecommons. org. Кроме того, вы можете искать картинки с лицен зией Cгeative Commoпs через Flickг (www.flickr.com/ creativecommons) и Picasa Web Albums (http://

picasaweЬ.googfe.com) (надо отметить, что за фото графии на бесплатных сайтах не нужно платить, но не

Обучающий урок изображения

ров, а таюке более детально nроработаиные маркеры: значки nрограмм, iPod (портативных МРЗ-проигрыва телей), папок и т. д. Сайт под названием Some Raпdom

Oude бесплатно nреАЛагает набор из 121 значка: www. somerandomdude.net/srd-projects/sanscons. Есnи вас интересуют мозаичные фоновые рисунки, зайди те на один из следующих сайтов: Colour-lovers.com (www.colourlovers.com/pattems), Pattem4u (www. kollermedla.at/pattern4u) или Squidfingers (http:// squidfingers.com/pattems). Можете таюке создать свой собственный череnичный фон с nомощью следую

щих инструментов: ВgPattems (http://Ьgpattems.com),

Stripe Generator 2.0 (www.stripegenerator.com) PattemCooleг (www.pattemcooler.com).

или

совершенствуем

Фотогалерея -отличный nример лривлекательной веб-страницы. Этот обучающий урок воедино собирает и наглядно демонстрирует различные способы стилизации

изображений. Мы попрактикуемся в форматировании изображений с добавлением рамок и надписей, создадим универсальную фотогалерею, леrко адаптируемую для

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

Обучающий урок

219

совершенствуем изображения

Чтобы начать обучающий урок, вы должны загрузить файлы, содержащие учеб

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

2. Файлы текущей обу

08.

Заключение изображения в рамку Для начала рассмотрим, как заключить изображение в рамку.

1.. Откройте файл i mage .html из папки 08\image_ex в браузере. Мы будем работать над веб-страницей вымышленного сайта CosmoFarmer.com

(рис.

8.10). У нас уже имеется присоединенная внешняя таблица стилей, соз

дающая модель веб-страницы и обесnечивающая ей простейший дизайн.

U..Citl~a.

........

"'t*~

•: Ф-:sо·~-~=~~-о .. -~~....

-:~----- ___q.;;c ·- __._ CosmoFaгmer's

=-·-

Guide to Apartment Lawn

Maintenance

-._

_ __

t.orem ~ do»t sn amtt, COOS«"tetuи

·~u.....s

l'lioa>odooaduotut'--o!olotoaiqu8rn e:Rt \"ОМра. tlt witi t':n!m .а mnm ......."

.-....

.....

ipsvm do1or sit_ ame.t. (OQiolfl('ki;Utr ~ olit,S<dd>am _ .,......,

-..-

tiodckwd\4~~ lnli!IМ~CI1

«et •-.hщ>о<. Ut w>Oi<пlmool- ,......"

• uerdtai:So. tor.mfp5umdoJoratamer..~~ek.J414fham . -niЪЬ..Ьonod- ut-.WO...-aliquament • •'Oiuфot.Ut>Oioi.amod--quiJ........t...m ~~-nlslutali<._••

..-...-.",.

....... Yd ..... - . . l..alremjpsucndoklraмatt. ~~- Rddtamt~m~WCDy 18Ьh.......,..dadduntutlaonw:t-._all<..."eмvolulpo•O<w..t

e.D1m.t n:lnlw ~ qw AliiiК.Ndu.trei t8»'G~ atllldpst ioЬoc't:W . oad \11: ~ ц еа comcnodo COOkQU8t. Duil wtero '~ f!ti'D t:iun: cWor iD ' Ьenc1A!J'il: in vШputete ..'elt~ mo\eiOt~ ,-eJ ihrn dolore. eu~

Рмс.

....

......

t.=:=.:::.=.::.::.::.==.:.J

~, ' ~ tahcm» flbl ur ~uip e::t и tommodo coasequn. J)ulsaйm wJ eum

Jdun.

........ lpSUindolot"'-~-~dt....Sdlom.......",.

' r.ЪЬ Nsmod tirlcidunl ut \lorett dolore owrpa a1iquмn ent YOU::p.t. th. "-.1 : ooimod""'""'""-Qцis-цer<~-~fiiOCIJ>i<loЬo""' , ral..adquipa.ea~~DUii4\IU!'.ra''tt~iri.aredoklrkl ; Ьeodrelirin '~ ..'dil. ак moh.til toМeqUllt,. "ffiillumМ1ol'eeu ~ m.ilkfatШsls at ФО 1tt01 tt 8tt'UO'WIII\ а NP:o ос!»~~ q\8 Ы.. .,_.".~-.Lomn

ddoaot•"""'""'-. ...._ ....

ipsumdo1otJttamt.t.,conN!t'tl;tut:rlld.ipaюpsUJ.

8.1 О. Два варианта веб-страницы: до (слева) и nосле (справа) СSS-стилиэации

На рис.

8.10 форматирование веб-страницы выполнено исключительно сред

ствами языка liTML. Имеются недостатки . В частности , изображения занимают на странице слишком много места (см . рис. 8.1 О, слева). С помощью кода CSS (см. рис. 8.1 О, справа) вы легко можете заключить изображение в симпатичную рамку и визуально выделить

ero

из основного текстового содержимого.

2. Откройте файл sty 1es . css из папки image_ex в текстовом редакторе. Этот файл представляет собой внешнюю таблицу стилей, которая использует ся в i mage. html. Вы начнете с добавления класса стиля к этой таблице, а затем примените класс к тегу

<i i!YJ> в файле HTML.

Перейдите к концу файла и наберите следующее:

i mg .figure

220

Глава

Селектор

figure.

Добавление графики на неб-страницы

img. fi gure воздействует на любой тег <img>, к которому применен класс

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

рых изображений (вы могли бы назвать стиль просто

. figure,

но в таком слу

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

Добавим в только что созданный стиль свойства

fl oat

margi n:

float: right; margin-left: lOpx; margin-bottom: lOpx; Свойство

fl oat смещает изображение к правой стороне веб-страницы, припод

нимая текст вверх и создавая обтекание фотографии с левой стороны. Левое

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

изображение больше походила на настоящий фотоснимок.

Добавим границу и отступы. Законченный вариант стиля должен иметь сле дующий вид:

img.figure { fl oat: ri ght : margin-left: lOpx: margin-bottom: lOpx; border: lpx solid #666; padding: lOpx; Если вы сохраните и просмотрите веб-страницу в браузере прямо сейчас, то не будет видно никаких изменений, поскольку стилевой класс не возымеет эффек та, пока его не применить к тегу.

Сохраните и закройте файл

styl es. css и откройте image. html. Найдите тег <img> cl ass="figure" так, чтобы тег имел следу

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

<img src=" .. 1 images/grass.jpg" alt="Apartment Grass" width="200" height="200" class="figure" /> Теперь изображение приобретет все форматирующие параметры, определенные для стилевого класса.

figure.

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

8.1 О,

справа.

•

Конечную версию веб-страницы, получившейся в данном обучающем уроке, вы сможете найти в папке

08_finished\image_ex, файл image. html.

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

Обучающий урок

221

совершенствуем изображения

Добавпение подписей к изображениям Нередко требуется добавить к изображению текстовую подпись с подробной ин

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

тег

<d i v>, -

заключить

для которого будет определено

единое форматирование. При этом методе фотография и связанный с ней текст

обрабатываются как цельный блочный элемент. Если вы позже решите изменить

их размещение на веб-странице и, возможно, установить обтекание с выравнива нием по левому краю страницы

никаких проблем: вам потребуется просто изме

нить форматирование для всего элемента-контейнера.

Откройте файл

capt i on. htm l

из папки

08\caption_ex в

НТМL-редакторе.

Начнем с добавления небольшага НТМL-кода для создания контейнера.

Найдите в коде тег

<img>, добавьте

перед ним команду

<div cl ass="figure">.

Она устанавливает начало элемента-контейнера. Теперь закроем тег <di v>, что

бы определить окончание.

Найдите закрывающий тег абзаца </р> сразу после изображения и введите

</ di v>. Теперь код должен выглядеть следующим образом:

<div class="figure"> <img src=" .. 1 images/grass.jpg" alt="Creeping Bentgrass" width="200" height="200"/> <p>Figure 1: Creeping Bentgrass is best suited for outdoor use and should avoided Ьу the indoor farmer·.~/p>

Ье

</div> Как и в предыдущем обучающем уроке, отредактируем уже имеющуюся внешнюю

таблицу стилей

( sty l es. css ), которая присоединена к настоящей

Откройте файл

styl es. css

из папки

веб-странице.

08\caption_ex.

Обратите внимание, что, поскольку это внешняя таблица стилей, в ней нет тега

<style>.

Он нужен только для внутренних таблиц стилей.

Перейдите в конец файла и добавьте следующий стиль:

.figure img { border: lpx solid #666: padding: lOpx; Этот производный селектор воздействует на любой тег <img>, вложенный в дру гой тег, к которому применен стилевой класс

figure,-

в данном случае на толь

ко что добавленный <di v>. Поскольку мы используем производный селектор здесь (и в шаге

7), нам не нужно присваивать стилевой класс <img>.

В результа

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

222

Глава

Добавление графики на веб-страницы

Теперь отформатируем элемент <di v> таким образом, чтобы основной текст неб-страницы обтекал фотографию и надпись (подпись) к ней, выровненные по правому краю.

Добавьте в файл

sty 1es. css

.figure { fl oat: ri ght: width: 222рх: margin: 15рх lOpx

5рх

следующий стиль:

lOpx:

Мы уже использовали свойство fl oat: ri ght в настоящем обучающем уроке, а свойство margi n добавляло небольшие промежутки со всех четырех сторон элемента

<di v>.

Но вы можете спросить, какова же ширина этих полей? Хотя

для фотографии ширина установлена (200 пикселов; см. шаг

3 урока), текст под

писи определенной ширины не имеет. Если вы не установите ширину для текста

абзаца, то длинный текст вызовет увеличение ширины блока

<di v>,

который

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

рину блока, занимаемого рисунком на неб-странице: сама фотография имеет ширину

по

200 пикселов плюс по 1О

1 пикселу

пиксело в на левый и правый отступы, а также

на левую и правую границы

итого общая ширина фотографии

от ее левой до правой границы (рамки) равна

222 пикселам.

Следующим шагом будет улучшение вида текстовой подписи к рисунку.

Добавьте в таблицу стилей

styl es. css

следующий стиль:

.figure р { font: bold lem/normal Verdana. Arial. Helvetica. sans-serif: color: #333: text-align: center: Этот стиль использует несколько свойств, рассмотренных в гл.

6, для создания

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

font

в первой строке стиля по

зволяет нам заменить четыре различных свойства одним. Здесь мы опять пользуемся преимуществами производных селекторов

(. fi gure

р)

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

Добавьте в стиль

. figure

р еще три свойства:

. figure р { font: bold lem/normal Verdana. Arial. Helvetica. sans-serif: color: #333: text-align: center: background-color: #eбfЗff; border: lpx dashed #666; padding: 5рх;

Обучающий урок

223

совершенствуем изображения

Назначение свойств

background-color, border

padding должно

быть понятно

они создают цветной блок (прямоугольник) для подписи. Настало время по смотреть на результаты работы в браузере.

Сохраните файлы

caption. html и styles. css и воспользуйтесь предварительным capt i on. html в браузере.

просмотром веб-страницы

Теперь вы понимаете единственную причину, по которой проще разрабатывать дизайн веб-страницы с применением внутренней таблицы стилей

вам нужно

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

никают при работе с

CSS.

В данном случае вы столкнулись с проблемой каскадности. Текст подписи размещен внутри тега абзаца <р>, и, кроме того, в таблице стилей

styles.css

имеется стиль для <р>. Рассмотрев его, мы видим, что он устанавливает верх

нее и нижнее поля равными

пикселам, а также левое и правое поля-

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

см. в разд. «Особенности механизма каскадности: какие стили имеют преиму щества» гл.

. figure

5).

К счастью, у вас уже есть более явно определенный стиль

р. Таким образом, чтобы переопределить параметры полей стиля абзаца

р с меньшим приоритетом, вы должны всего лишь добавить новые параметры полей в стиль

:о.

. figure р. Добавьте свойство margin

в стиль.

figure

р:

.figure р { font: bold lem/normal Verdana. Arial. Helvetica. sans-serif: color: #333: text-align: center: background-color: #e6f3ff: border: lpx dashed #666: padding: 5рх:

margin: lOpx

О О

Оно удаляет поля со всех сторон подписи за исключением верхнего края, уста навливая промежуток высотой

1О

пиксело в между подписью и вышестоящей

фотографией.

Сохранитефайлы caption. html и styles. css. Просмотрите веб-страницу caption. html

в браузере. Теперь веб-страница должна выглядеть подобно странице, представленной на рис.

8.11

(законченную версию вы можете найти в папке

учебного материала).

08_finished\caption_ex

224

Глава

~ с.рьо...

---Foqllotor iJ

\\o--irnk·3\-\Doam•enbiD~writiogiDO.

v,.,.. F"""'ttes Toots

•

8. Добавление

графики на веб-страницы

't Х 1! LiveS«>td>

Нtlp

............................................................................................................................

j Cosmofarmer's Guide to Apartment Lawn Maintenance

:·-·······--·-··------·-····· ····· ············-----·············--····· ···-----························ ················· ~ Lorem ip5um dolor sit a.tnet, consectetuer adipiscing e!it, sed diam

1oonummy mЪh euismod tincidunt ut Jaoreet do\ore magna

! a]jquam erat volutpat Ut wisi eaim ad minim veniam, qui<; ! nostrud exerci tatio. Lorem ipsuro do\or sit a.tnet, consectetuer ! adipiscing elit, sed diam oonummy mЪh euismod tincidunt ut j Jaoreet dolore magna a]jquam erat vohrtpat Ut wisi enim ad

! minim veniam, quis nostrud exerci tation uDamcorper suscipit

! \oЬortis пisl ut aliquip ех еа commodo consequat. Duis autem vel ; eum iriure.

··················---········'"····---

.:=:::::o":w

!:::::;

Lorem ip5um dolor sit amet, consectetuer adipiscing elit, sed diam ~С:::::.: ~ oonum.my niЬb euismod tincidunt utlaoreetdo\ore magna :..•• ~~-~!'.':~.~~~: ... llliquam erat volutpat. Ut wisi enim ad minim veniam, quis oostrud exerci tation uDamcorper suscipit JoЬortis nisl ut aJiqujp ех еа commodo consequat. Duis autem vel eum iriure dolor iD Ьeodrerit in vulputate velit esse moJestie consequat, vel iDum dolore eu !e1J8iat ~~cuJJa facilisis at vero eros et accumsaD et iusto ndio dignissim qui ЪJandit praesent Juptatum zzril delenit augue dui.s dolore te !eugai.t nuDafacilisi.Lorem ip5um aoJor sit a.tnet, : consectetuer aclipiscing elit. ~

Lorem ip5um dolor sit amet, consectetuer adipiscing elit, sed diam nooummy oibb euismod

j tincidunt ut 1aoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, qui.s

! nostrud exerci tation uDamcorper suscipit JoЬortis nbl ut aliquip ех еа commod.o consequat. Duis j autem vel eum iriure.

!'~COP-itiiG;.~T2006:ёOSNOF~jtИfA.ёOM "·

······

· ····н····-

Рис. 8 .11. Примен ив тег элемента-контейнера

....... ..................

н .....

······- · -------

<div>, обтекание с выравниванием

по nравому краю

и некоторое доnолнительное форматирование, очень nросто добавить nодnиси к фотографиям

Обучающий урок

соэдание фотогалереи

Раньше веб -дизайнеры создавали фотогалереи н а основе НТМL-тега таблицы <tаЫ е>, помещая изображения в ячейки, образуемые строками и столбцами. Н о сейчас вы можете достигнуть того же самого эффекта с помощью короткого

СSS-кода в сочетании с применением гораздо менее объемного НТМL-кода.

Откройте файл

gallery.html

из паnки

08\gallery_ex.

Во-первых, посмотрите на

НТМL-код, который использован для создания фото галереи. Веб-страница со держит девять фотографий и nодписей к ним. Каждая располагается в отдель ном блоке-контейнере <di v>, к которому применен стилевой класс figure. Этот

<di v> функционирует точн о так же, как и элемент <di v>,

исnользованный в пре

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

заключена в другой блок <div>, к которому применен стилевой класс

photo:

225

Обучающий урок 2: соэдание фотогалереи

<div class="figure"> <div class="photo"> <img src=" .. /images/dandelioп.jpg" alt="Dandelion" width="200" height="200" /> </div> <p>Figure 6: The dandelion: scourge of the apartment farmer.

</р>

</div>

ПРИМЕЧАНИЕ----------------------------------------------- Второй элемент-контейнер

<div> пригодится в следующей части урока, когда мы будем учиться

добавлять к фотографиям теневые эффекты .

. 2.

Поместите курсор сразу за тегом и нажмите

Enter для

<l i nk>,

находящимся почти в начале файла,

создания новой строки.

Тег <l i nk> присоединяет внешнюю таблицу стилей, содержащую базовое фор матирование веб-страницы.

Добавьте внутреннюю таблицу стилей, а затем два новых стиля следующим

образом:

</style> Эти два стиля добавляют границы-рамки ко всем изображениям галереи и уста навливают шрифт, выравнивание и поля для подписей изображений. Они ис пользуют производные селекторы для выборки изображений и текстовых абза цев подписей, являющихся элементами фотогалереи.

Все изображения и подписи к ним заключены в один тег-контейнер <di v> с иден ga ll ery, включение же группы фотографий в другой <di v> обеспечи вает более гибкое форматирование. Вы можете установить конкретную ширину фотогалереи в окне браузера или добавить ограничивающую рамку вокруг. В то же время заключительный тег <di v> также позволяет производить выборку фото графий и абзацев подписей, используя производные селекторы. В нашем случае, тификатором

например,

#ga ll ery i mg и #ga ll ery

тоже действительные производные селекто

ры. Главное различие в этих двух подходах

#gallery img

приоритет стилей. Поскольку стиль

имеет большее значение по сравнению с

.photo img,

форматирования отменяют и переопределяют параметры стиля

его команды

. photo i mg.

Теперь поместим фотографии рядом друг с другом. ~МЕЧАНИЕ------------------------------------------------- При вставке внутренней таблицы стилей убедитесь в том, что вы поместили ее в заголовок веб страницы, между тегом

<link>

и закрывающим

</head>.

226

Глава

8. Добавление

графики на веб-страницы

4. Добавьте в только что созданную таблицу стилей следующий стиль:

.figure { float: left : width : 210рх; margin : О lOpx lOpx lOpx ; Он создает такое обтекание, при котором все пары (<фотография/заголовок~ выравниваются по левому краю окна браузера. На самом же деле браузер раз мещает фотографии на одном уровне, рядом друг с другом, пока не закончится

свободное место в строке. Затем браузер переносит следующие изображения на строку ниже, пока не отобразит все, и т. д. Общая ширина складывается из ши рины самой фотографии плюс отступы и границы-рамки. В данном примере имеем: и

200 пикселов на фотографию, 8 пикселов 2 пиксела на левую и nравую границы-рамки.

на левый и правый отступы

СОВЕТ----------------------------------------------------

8 нашей эксnериментальной фотогалерее

все изображения имеют одинаковую ширину. На практи

ке же размеры различаются . Во врезке ниже описан способ компоновки изображений различных

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

ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ Если ширина одноrо изображения отnичается от остаnьных Создать фотогалерею, которая похожа на галерею от

Теперь создайте стилевой класс, например .wзоо,

Cosmofarmer, очень просrо. Здесь все фаrоrрафии имеют

и определите ширину изображения (в данном слу

{ width:

одинаковую ширину. Но как быть, если у вас есть фото

чае300)мюс10наотстулыиrраницы: wзоо

различных размеров? Одно из решений-создатьстиль

310 }. Чтобы этот nрием

для каждой отдельно взRТОй ширины и применить его к

удалить nараметр ширины в стиле

элементу <d1v> со стилевым классом figure (это нема

бавить стиль .wЗОО nосле

лая работа, с таким же успехом можно ооредактировать

И вот nочему: эти два значениR ширины конфликтуют

фотоrрафии, приведА их ширину к одному размеру).

между собоИ

работал, вы должны либо

figure, либо до . figure в таблице стилей.

(210 и 300) и браузер должен разрешить

конфликт, исnольэуR nравило кас11адности (см. гл. S). Другой способ состоит в использовании возможности

Поскольку и стилевой класс

CSS применить два стилевых класса к одному тегу: <d 1v

имеют одинаковый nриоритет, будет nрименен тот

class•"figure

wЗОО">. Этот тег <div> принадлежит

как стилевому классу

f1gure, так и классуwЗОО.

. f1 gure, и класс .wЗОО

стиль, который последним определен в таблице сти лей.

Сохраните файл и просмотрите веб-страницу ga ll ery . html в браузере. Она долж на быть похожа на страницу, представленную на рис.

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

ной установки одинаковой высоты всех элементов и гарантии того, что все они

выстроятся и отобразятся nравильно (см. рис .

8.12, справа).

Обучающий урок

227

соэдание фотогалереи

. "••.•..o:t.'ll ,,.•·<~~>'..r~ t~•: .., , .,.._... ..,:c.ot~w ь-,c-•f'•,..~• "•., "~...., " ''~ "• '"' "' ••: '.ц!Of\:lh(!'lt \,..\.~·1>/0'·.'" ,.-,"" ............

Рис.

8.12. Плавающие элементы, расnоложенные рядом друг с другом, -

один иэ сnособов

имитации столбцов и строк таблицы

Измените ширину окна браузера так, чтобы оно стало уже или шире, и понаблю-

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

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

титься рядом (об этой путанице, имеющей место при использовании свойства float, читайте в раэд. «Управление обтеканием содержимого плавающих эле ментов• гл.

7). К счастью, сушествует простое решение этой проблемы.

совп---------------------------------------------------Существует сnособ избежать этой nроблемы со странным отображением, о которой говорилось в шаге

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

Вместо того чтобы использовать свойство float, вы може1'е указать display: iпline-Ыock в стиле .figure. Таким образом, каждая пара «изображение/надnись» будет обрабатываться как блок (область, имеющая высоту и ширину), а также в качестве встроенного элемента (поэтому блоки смогут рас полагаться бок о бок). Кроме того, вы можете использовать свойство vertical-aligп, чтобы выровнять рисунок вертикально. Стиль

.figure из

шага

4 можно

переписать так:

. figure { di spl ау: inl ine-Ьlock : vertical -align : top : width : 210рх: margin: О lOpx lOpx lOpx : } Недостатком этого очень простого и nолезного приема является то, что он не будет работать в IE б,

IE 7 и Firefox 2. зато он

работает во всех остальных брауэерах, в том числе и в

IE 8!

228 6.

Глава

Вернитесь к файлу

Добавление графики на веб-страницы

gallery .html в НТМL-редакторе. Найдите стиль . figure р height. В итоге все должно выглядеть следующим

и добавьте в него свойство

образом:

. figure р { font: l.lem/normal Arial. Helvetica. sans-serif: text-align: center: margin: lOpx О О 0: height: Sem:

Добавленное свойство устанавливает одинаковую высоту для всех подписей рисунков. В нашем случае размера достаточно, чтобы обеспечить правильное отображение строк текста (если требуется поместить в подписи больше текста, просто увеличьте значение высоты). ПРИМЕЧАНИЕ----------------------------------------------- Совсем не обязательно nрименять свойство height, если вы уверены, что все nлавающие элементы имеют одинаковую высоту. Это может nонадобиться, если размеры фотографий различаются по высоте, nодnиси имеют разное количество строк текста или некоторые nодnиси отсутствуют.

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

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

Добавление теней. Наша фотогалерея выглядит хорошо, но можно придать ей еще более внушительный внешний вид. Добавление теневых эффектов для каждой

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

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

CSS.

ПРИМЕЧАНИЕ------------------------------------------------- С$5

3 nредлагает

новое свойство Ьox-shadow, которое может автоматически добавлять тени к лю

бому стилю. Оно nрекрасно настраивается, nростое в исnользовании, но работает только в некото рых браузерах. Мы вернемся к нему nозже в книге.

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

в папке 08\gallery_ex учебного материала, но вы можете создать свой собственный, например, в Photoshop, Fiгeworks или любой другой программе редактирования изображений, в которой есть фильтр эффекта тени или размытости. В

Fireworks,

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

PNG8.

Откройте в НТМL-редакторе файл ga ll ery. html, над которым вы работали в пре дыдущей части практического урока.

Обучающий урок

229

соэдание фотогалереи

Во-первых, добавьте фоновое изображение в тег

<di v>,

в который заключено

каждое изображение.

Добавьте следующий стиль в таблицу стилей веб-страницы фотогалереи:

.photo { background: url(drop_shadow.gif) right bottom no-repeat: Этот стиль добавляет фоновый рисунок

элемента <di v> фотографии. Параметр

drop_shadow. gi f в нижний правый угол no-repeat свойства означает, что изобра

жение не должно повторяться.

Если вы взглянете на веб-страницу, то не увидите ничего особенного, потому что тень находится на заднем плане. Наверху, на переднем плане, расположена

сама фотография, которую мы стилизовали в шаге границей-рамкой и отступами размером

3: с белым фоном, черной 4 пиксела. Теперь все, что нужно, -это

показать фоновое изображение. С помощью одной хитрой методики, придуманной Ричардом Руттером

(http:/1

www.clagnut.com), нужно немного сместить изображение вверхивлево-по сути, вытащить его за пределы тега-контейнера

<di v>. CSS предлагает механизм,

на

зываемый позиционированием, который позволяет вам управлять точным ме

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

13, а пока, чтобы показать тень, вы должны добавить . photo i mg, созданный в шаге 3.

ПРИМЕЧАНИЕ----------------------------------------------- Отрицательные значения nолей nредставлено по адресу

Найдите стиль

- еще один сnособ достижения сдвига тени. Детальное http://1976design.com/Ьiog/archive/2003/ll/14/shadows/.

. photo i mg

оnисание

и добавьте в него три свойства позиционирования

следующим образом:

.photo img { border: lpx solid #666: background-color: #FFF: padding: 4рх: position: relative: top: -Spx: left: -Spx: По сути, эти три свойства пррсто смещают фотографию вверх и влево на 5 пик селов, показывая находящийся на заднем плане рисунок с теневым эффектом

элемента

<div>.

В данном случае

<div>

используется в качестве элемента-кон

тейнера изображения с эффектом тени.

4. Сохраните файл и просмотрите веб-страницу в браузере. Она должна иметь вид, представленный на рис. 8.13. Каждое изображение отображается со своей собственной тенью, и вам не при шлось даже запускать

Photoshop!

230

Глава

Добавление графики на веб·сrраницы

[ CosmoFarmer.com's Indoor Grass Photo Gallery

:--------------·--·--------------··-----·----·--·······························---------·---------- ------------ ----· ; А seleclion oflodoor sod opdons: revie~ved and restcd ЬyCosmoJ"anner.com ln our srate-of·lhe-an "Apanment : LaЬoraюry" оо 5th А'o'l!llue.

Рис.

8.13. Добавление теневого эффекта к фотографиям nридает веб-странице объемность и улучшает визуальное восприятие любой фотогалереи

ПРИМЕЧАНИЕ----------------------------------------------- Для создания теневого эффекта мы исnользовали рисунок размером около

375 х 375

nикселов, и он

nодходит дnя фотографий такого же размера. Вы можете исnользовать эту методику и дnя больших

изображений, nросто придется создать соответствующий теневой эффект.

Вы можете применять описанный метод добавления теневого эффекта не толь ко в фотогалерее , но и для любого изображения веб-страницы. Весь замысел состоит в следующем: необходимо заключить <i mg> с изображением в элемент контейнер

<di v>, назначить для

него фоновый рисунок теневого эффекта и не

много сместить тег изображения <img> влево и вверх с помощью отрицательных значений параметров позиционирования. Пользуйтесь этим методом для до

бавления теневого эффекта к любому блочному элементу, например боковому меню или плавающей цитате.

Обучающий урок

231

использование фоновых изображений

Законченную версию веб-страницы этой обучающей программы вы сможете найти в папке

OB_finished\gal/ery_ex учебного материала.

ПРИМЕЧАНИЕ----------------------------------------------- Наверняка вы обратили внимание на то, что созданные рисунки теней имеют резкое завершение с левой и верхней стороны. Они не имеют плавного перехода, как настоящие тени. Процесс созда ния более сложных, реалистичных теневых эффектов описан в Интернете по адресу

alistapart.com/articles/cssdrop2/

http://www.

и http://www.ploughdeep.com/oпioпskiп/.

Обучающий урок 3: использование фоновых изображений СSS-свойство

background-image- секретное оружие современного веб-дизайна. Оно

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

всего лишь один из спо

собов креативного использования фоновых изображений. Основное их примене ние

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

маркеров в списках. Эти общие, наиболее распространенные способы применения свойства

background-image мы и рассмотрим в этом обучающем уроке.

ДобавЛение на веб-страницу фонового изображения Что бы это ни было: сложный замысловатый узор, логотип компании или полно экранная фотография,

изображения очень часто используются в качестве фоно

вых рисунков веб-страниц. И неслучайно фактически это и есть основное приме

background-image. 1. Откройте файл sidebar .html из папки 08\Ьg_ех в

нение свойства

НТМL-редакторе.

Веб-страница имеет двухстолбцовую разметку: она очень проста, содержит лишь немного отформатированного текста на белом фоне (рис.

8.14,

вверху).

Для начала добавим фоновое изображение. У страницы есть внешняя таблица

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

Установите курсор между открывающим и закрывающим тегами

бавьте следующий стиль:

body { background-image: url(images/bg_page.png): background-repeat: repeat-x: background-color: #FFF:

<style> и до

232

Глава

!Jk . . . . .

......,...,... _~- . . . . . . . . . . . . . . .. . . . . . . .

Добавление графики на веб-страницы

•• •••••• • •

.... . . .

. . . .

. .. . . .. . .

. .2

·~1: с х ~ [Jj~~~~~~~:""~~:=:.~~-:.·:~ lD±~"i-~~~=~-=-~

CSS: The Mi~sing Manual ANNOUNCBMENТS

Lorem lpsum Dolor

• LCf8111Pa/111 Ос:*» 5.:

•QIA1'11:8Nma8'dolaorl8ll-. • &.as ..а tenpen nьп

.....

С.С.'4'118

. . ,..,.~

. qu~,......"...,.Ln......,..

--~I'IOtl~

Sat

Slllclut~------1\111.&5:.vrJC~~~ ~.ll:ll':altl\ren~~~~.Ьe:tt'м!Мore...._tlt~~tctD

~.~

........

ft8110cniiii_..~~WOi.CIII:•---..мodlм.._,_..

r-.w~--~--pam)

~-.q,~~e~~r:~~~nm.-q,~~~~,dc*lr•,...~ .-s...__.~nan

•fllemgfll8n~~

~--mad---~\fi!!Ьenltcta'tfiiiO'*I\ . . . . ~

~IAIPD..,tN'ItN~qtA~a~«*n~~ fl&lo'o8n.ttlilut..,.rcsм(llllllllf'I'IC~

qw..-., .,.eumь••~•"'• ~. ytlla...~-....an~UJW

__..,..

C8CquМI

tfl........_

........ ,_.~

Nisi ut Aliquid

--...ut_.. ...

~t'Niit.,88'81NW88m.48~t1~'*"'~SIECIII~• CJOIIil'l'ai~~_..,.Yfl .................., ..

Y'CILtll*.".._.4alrl\fiN~~.'td._Wdat:lrelriN'niUQI8tlll'8)

' !~. ~.

.. . .

•

~~~~.~-~н-~Sa~~~-~-w~----~--------- sedtA.~UDC:k!OCI!Na"*"мor st ~~~

-..,...CicD.an.n--.

~11:181mrtm1Ptf11m,.~-q.QcaC) 6> 11'1wcntottwtW8d.q;llll•d'IЬ&:Io

f!IМIOPII~~QA---sc~мoctta.~Si!fCIUI ~IN!IJI!dotlrOCIO&OoJQCfi::)nt~~~NoQwpono

~-q,Jidotwmt~-ckO'·..s.~.~ vtlt. -4.81'10n

ANNOUNCIJМ.8N1'S t

UWti'I\~OdOf$1(

=~-==

----QI8~'WI8.1Мt.и

.............

Soci(JII rCIP ~-mcмt

fiUn.!41МIMФOCitemP«•~\A~ti<:IOЬ't'~__.~ ~ut«*n.ad l'l\t'irNV8iWQ. IPsflDW\81til~\IIVII a:Jtii(Qцфt ~nlllut~--~~)'

~---------------sea~~~Ol'IW'8ilkNЬamcr • 'i'Cii.ipQttm~oaЬemQUe

.......... .um rt'lll'~ ~OWCI*IЬ I:) twrncwe'l'lttotCq181Jfd«tao

----

. . . . 'Юitdt:;taJUreeфiQЬc.. Nм'IO"'"(I!Am . . . . . . о.*~- ........ UOIII:Ntug(..мdqA~~INIQni«Ьtftc»c,A,.....~~ ~Ni1!4Jtpono~-.-dc*ltaa'*""·dc:D stl«<!!. ~• ..-aМ.wd48non~d.S'I'IOiiWIIPOUmdWitUIIIitll:n&c81:*n

... Р-ис.

8.14. С помощью

фоновых иэображений вы можете превратить упорядоченную

веб-страницу (вверху) в еще более приалекательный сайт (вниэу)

Первая строка стиля оnределяет само фоновое изображение page_bg. jpg, I(OTopoe мы хотим вывести на веб-странице. Изображение находи·тся в палке images. Оно представляет собой градиент, начинающийся светло-синим цветом вверху

и плавно лереход.1:1щий в белый внизу. Рисунок имеет размеры гораздо меньше

Обучающий урок

233

иmольэование фоновых изображений

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

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

Чтобы предотвратить эту нелицеприятную картину, установим такое значение свойства background- repeat, чтобы изображение повторялось в направлении сле ва направо и заполняло по ширине все окно браузера независимо от его разме

ров, но при этом вертикально отображалось всего один раз. Последняя строка устанавливает цвет фона, чтобы он соответствовал концу градиента и изобра жение плавно исчезало в цвете фона страницы. ПРИМЕЧАНИЕ----------------------------------------------- Используя сокращенный вариант свойства, вы можете превратить три строки кода, покаэанные в шаге

в одну строку:

Ьackground:

#FFF

url(images/Ьg_page.png)

repeat-x;

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

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

Вернитесь к текстовому редактору и файлу стиль для тега

<di v>,

bg_ i mages . htm l.

Добавьте другой

в котором находится содержимое страницы:

#wrapper { background-color: #FFF: У данного тега

<di v> есть фиксированная

ширина, он центрирован на странице

и содержит весь ее текст. Этот стиль задает ему белый фоновый цвет, но с по

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

Отредактируйте стиль, который вы создали в шаге

4, добавив фоновое

изобра

жение:

#wrapper { background-color: #FFF:

background-image: url(images/bg_main.jpg); background-position: top left; background-repeat: no-repeat; Эти три строки кода добавляют фоновое изображение в левом верхнем углу

<div>;

параметр

no-repeat

для свойства

background-repeat

означает, что изобра

жение появляется только один раз. Если вы сохраните файл и просмотрите его

в браузере, то увидите изображение руки, которая как бы держит эту страницу.

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

те на странице большой заголовок и левую боковую панель.

234

Глава

Добавпение графики на веб-страницы

6. Добавьте еще два стиля к внутренней таблице стилей: #banner { margin-top: 48рх: } #announcement { margin-top: 115рх: Первая строка просто добавляет небольшие отступы, отталкивающие вниз бан нер, содержащий заголовок, пока он не станет соприкасаться с белой страницей, а второй стиль передвигает вниз левую боковую панель, чтобы освободить до статочно места для изображения с рукой . Страница должна выглядеть так, как показано на рис . 8.15.

Lorem Ipsum Dolor Sat s.t\l:~urtde._.8R,_.8"1'01'Jt~~~ ~toenrwn....-,..-...

ANNOUNCВМI!NТS •

I.ЬtenlpunOci!DrSir

·~.-....- ............................ • Qu4&1t8"t'l'de.;m~~

..........."_"_ •

Sв:IQUiвnon~Nmodl~hitun

•

.-aJЬ~_...d:..,.

~Ь...>ARCIIaaUit~.

....., _ _ _ q..-_ .. _

........ ,.... .....

_IA_od __. .-·-....-.--801.. --. . .--. ~I'Мglll dolola-quil'ltlelnc~ ......

nectunt.. Nieq\ttparro

, qult _ _ _ _ a.cjpil non nutfМIUМ' tЬ tnOdi tl8'tlpcn incifl.lnr: \1: iiЬort' et dolott ,...,...". 8llqiA8I\ . , _ . ~.I'IWutllcrJ'da•QitМIICidl~?

Qull.мm'41unU.~qWin•~"""-.-mi\NII\ICiiМI:IIIc ~. Wl11umqill dolof8'n еп quo 't'OЦia8 " . . ~?

-.-.................. ........._.,__ ..... ___ _ ____ .,.._ ----.....--....--...-.. ru;a.

Nlsl ut Allquld

S.Sioltper!l\'idlds"*~*n~Ь.~a~-~~~

_......

~1:1881t...ЬC~tr.ltltoPIQЬo. Nemotnllfl_...~

. . ~·

.".,~.adlpilrj.._ .Squi,lnon~tМmod-.or--.-..IA' IIЬared:cil:*n.".....,liQcamql.l8'1t~.

\tdn ldiМWN~ . . NJ«n.am~UIIIm<Df'PO'N...-~ 1\iМ\.CIIQuido•~~Qultu.n ."....,.'"~quln• ~wlt:-~1\N~~. "'I~cP~"'"'--quo

....,,.. ..... _,

Рис. 8.15. CSS nо3воляет комбинировать цвет фона и фоновое И3о6ражение, что ока3ывается весьма поле3ным в настоящем примере

Замена границ изображениями Свойство

border (см. разд. «добавление границ~ гл. 7) - полезный инструмент в арсенале веб-дизайна, но ограниченность предлагаемых CSS стилей границ бы стро надоедает. Линия, нарисованная карандашом от руки, привлечет внимание

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

норировать свойство border и добавить на свой вкус любую линию в виде фоново-

Обучающий урок

го рисунка

235

использование фоновых изображений

это очень просто. В настоящем обучающем уроке мы заменим линии

подчеркивания под тегами заголовков

<h2>

собственным рисунком, похожим на

линию, нарисованную от руки.

Вернитесь к файлу тега

bg_ images. html <h2> внутри основного <di v>:

в текстовом редакторе. Добавьте стиль для

#main h2 { background-image: url(images/underline.png) background-repeat: no-repeat; Свойство

background-image

назначает фоновое изображение для тегов

ходящихся внутри тега с идентификатором

main;

а значение

no-repeat

<h2>,

на

гаранти

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

кивания расположен не там, где ему положено быть. Он находится над заголов ками!

Добавьте в стиль

#ma i n h2 за свойством background- repeat следующее:

background-position: left bottom; Мы изменили начальную позицию фонового изображения. Теперь оно выво дится, начиная от левого нижнего угла тега

<h2>.

Однако при просмотре неб

страницы вы не заметите серьезных улучшений: подчеркивание сливается с текстом заголовка.

Есть простое решение. Поскольку нижняя координата фонового рисунка рас

положена у основания блока, образуемого тегом

<h2>,

необходимо всего лишь

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

Подкорректируйте стиль

#main h2

еще раз, чтобы он выглядел следующим об

разом:

#main h2 { background-image: url(images/underline.png); background-repeat: no-repeat; background-position: left bottom; padding-Ьottom: 7рх:

Как вы помните, отступ является промежутком между границей (или краем

фона) и содержимым. Это также увеличивает суммарную высоту блока- в дан

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

h2.

Сохраните файл и просмотрите неб-страницу в браузере.

Теперь все теги

<h2> имеют рукописную линию подчеркивания.

Займемся бло

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

236

Глава

8. Добавление графики на веб-сrраницы

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

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

background-image,

заменив одно

образные и скучные значки любым изображением. Первое, что необходимо сделать,

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

Вернитесь к веб-странице

sidebar. html

в НТМL-редакторе. Добавьте стиль для

форматирования списка пунктов левой боковой панели:

#announcement li { list-style: поnе: Маркированный список находится внутри тега <di v> с идентификатором announcement, так что этот производный селектор воздействует только на пункты списка (теги <l i>) внутри этого <div>. Этот стиль удаляет маркеры. Теперь до

бавим наш рисунок. ПРИМЕЧАНИЕ----------------------------------------------- Вы можете точно так же применить свойство

list-style: поnе; к стилям тегов <ul> или <ol>, чтобы

удалить маркеры всех элементов-nунктов сnиска.

Добавьте в стиль

#announcement l i

следующие два свойства:

background-image: url(images/flower_bullet.png): background-repeat: no-repeat: мы· встречались с ними раньше. Одно ИЗ них добавляет фоновое изображение, а другое

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

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

гу (рис.

8.16, слева).

Небольшие отступы и поля исправят эту проблему. ANNOUNCEМENТS

ANNOUNCВМENТS

Larem Ipsum Dolor Sat Quls nostrum tDa!"tiЬЬttccnen ull8m 8usmodltгnpora QukaiЬ!m'«!!I!Um-..re~

Quiseutem veleum iure ~

Sed qui8 non numquвm eiul mосН tempora

Ssl quia non numquern eius modi ternpora inddun

._",

[_____________ - - - - - - - - - - "( Nsno s1im 1pslm

Рис.

8.16. Заменить стандартные маркеры

сnисков своими собственными графическими

значками чрезвычайно nросто: всего несколько дополнительных шагов обеспечат точное и правильное размещение маркеров и текста пунктов списка

Добавьте в стиль

#announcement 1i

padding-left: 25рх: margin-bottom: lOpx:

еще два свойства:

Обучающий урок

237

исnользование фоновых изображений

Левый отступ добавляет пустой промежуток, смещая текст в сторону, чтобы отобразить новый значок маркера. Нижнее поле обеспечивает рассредоточение элементов списка, образуянебольшие интервалы (см. рис.

8.16, посередине).

Однако остался еще один недостаток. Изображение маркера чуть выступает над текстом строки, и значок выделяется над текстом пунктов списка. Это легко исправить с помощью свойства backgrouпd-positi оп.

Завершим этот стиль, добавив свойство

background-position:

Орх 4рх:. Закон

ченный стиль должен выглядеть следующим образом: #aпnouncement

li {

list-style:

поnе:

backgrouпd-

image: url ( images/bull et . png):

backgrouпd-repeat: пo-repeat:

background·position: О 4рх: paddiпg-left: 25рх:

margin-bottom: lOpx: Это последнее изменение стиля позиционирует значок маркера в крайнюю ле вую позицию (это

0), отстоящую на 4 пиксела от верхнего края элемента-пунк

та списка, что обеспечивает совсем незначительное смещение значка, тем не менеедостаточное для того, чтобы маркер выглядел безупречно. сов~---------------------------------------------------я рекомендую использовать именно свойство Ьackground вместо

list-style-image

для добавления

собственных графических маркеров сnисков. Оно обесnечивает возможность точного nозициони рования значков маркеров.

Сохраните файл и просмотрите неб-страницу в браузере. Теперь пункты списка имеют трехмерные маркеры вместо скучных черных

кружков (см. рис.

8.16, справа).

Закругление углов бокового меню На данный момент боковое меню выглядит довольно неплохо. Текст приятно от

форматирован, маркеры отлично смотрятся, но боковая панель теряется на белом

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

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

8.14,

в фоне тега

<div>.

А для того, чтобы убедиться, что весь текст попадает

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

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

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

8.17, вверху).

сложно реализовать

вам понадобится три разных изображения и три разных

стиля.

Хорошо, что эту маленькую хитрость не так

238

Глава

Добавление графики на веб-страницы

В этом примере есть один панель), содержащий теr

<div> с идентификатором announcement (это боковая <h2> (со словом ~Announcements•) и маркированный

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

<h2> в данном примере), а нижнюю

часть изображения- к последнему НТМ L-элементу боковой паиели (тег <ul>), и изображение повторяется вертикально в теге пан ель (см. рис.

<d i v>, который создает боковую

8.17, внизу) .

ANNOUNCВМENТS

ANNOUNCEМENТS

1.0/Wn lpun Oolot Slit

1..0/Wn lpun Dolor Slt

Qull _ _.....,•.-n

Quiii'IOIINm ЫiJ...Ь•ii ullln

EU 1110(!118торсd lrdllunt

а. modllllmpot8 Jnddunt

Qull-..... ..."""

Qull- wlemo u..

11111. . . . .

'~~"

Sed qul8 non .numqu1111 . . modl t8npola li>ddl.n

Sed Q\118 non numq.-n • c.mpora hdd\ln

......

modl

N8notnh . . . ~

н.nonnfp8n~

1..0/Wn lpun Oolot Slt

Qull- _ ....... ullln ... EU modll8n1)0tll Jnddunt

.........

Qull_wl.,mШ.

Sed qul8 11011 IIUI'IIQI8n . . modl toempore~Ddd\8~

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

расположенных специальным образом в фонах тегов

Обучающий урок

239

3: исnользование фоновых изображений

Вернитесь к текстовому редактору и файлу

#announcement

(который вы создали в шаге

bg_ i mages. htm l.

Перейдите к стилю

в подразделе ~добавление на неб

страницу фонового изображения•) и добавьте одно свойство:

#announcement { background: url(images/scroll_middle.jpg) repeat·Y center top: margin-top: 115рх: Новая строка добавляет к тегу

<di v> фоновое изображение,

повторяющееся по

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

<di v> становится выше, фон также вырастает. Но если вы просмот

рите страницу сейчас, то увидите, что маркированный список выдается как с ле

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

Перейдите к стилю #announcement

l i, созданному ранее, и добавьте два свойства

в конце:

#announcement li { list-style: none: background- image: url С i mages/bull et. png): background-repeat: no-repeat: background-position: О 4рх: padding- left: 25рх: margin-bottom: lOpx: margin-left: ЗОрх: margin-right: 40рх: Эти свойства перемешают левый и правый края каждого пункта маркирован

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

ние в теге

<h2> на боковой панели.

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

<h2> бокового меню:

#announcement h2 { background: url(images/scroll_top.jpg) no-repeat center top: Здесь изображение помещается только один раз в центре в верхней части тега. Но, просматривая страницу прямо сейчас, вы увидите, что она выглядит не совсем правильно (рис.

8.18).

Вы не можете видеть всю верхнюю часть свитка,

и текст заголовка перекрывает ее нереальным образом. По существу, тег

<h2>

недостаточно высок, чтобы отобразить все изображение. Кроме тqго, вам нужно добавить некоторое пространство над текстом, чтобы опустить его вниз, под

изображение. Вам на помощь придет свойство

padding.

240

Глава

8. Добавление графики на веб-страницы

~""-ANNOUNCВМENTS -- ~ · .." 1

.•.. l..o11!111 lpsum Dolor Sllt Quis nostrum exercitltionen ulllm

.• :\. Eius modl tempora lncidunt

. :r:

Quis autem vel eum iure

reprehenderit :а:

· Sed quia nоп numquam eius modi tempora incidu

:с

Рмс.

8.18. Если

Nemo enlm ipsam voluptЖe

вы не видите все изображение (верхнюю часть свитка здесь),

это значит, что элемент недостаточно большой. Вы можете добавить отстуnы,

чтобы nолучить доnолнительное nространство для целого изображения

Отредактируйте стиль, который вы добавили в nредыдущем шаге, чтобы он выглядел так:

#announcement h2 { background: url(images/scroll_top.jpg! no- repeat : padding-top: 70рх: Верхний отступ размером

пикселов выполняет две задачи: оттягивает текст

вниз, освобождая верхний край свитка, и делает элемент

<h2> таким

высоким,

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

<di v>.

ПРИМЕЧАНИЕ ----------------------------------------------- Метод, исnользуемый здесь, nредназначен для блока с фиксированной шириной. Это значит, что, если вы измените ширину боковой nанели, вам необходимо nеределать изображение в соответ

ствии с новой шириной. Чтобы узнать о более гибкиХ' методах, nозволяющих создавать закруг ленные углы и требующих большего количества кода

CSS и HTML,

nосетите следующие страницы:

www.vertexwerks.com/tests/sideЬox и www.sperling.com/examples/Ьox. Далее нужно добавить нижнее изображение к тегу

<u 1>. Но сначала мы немного

изменим НТМL-код.

Перейдите к тегу

<ul> (он находится под тегами <di v id=" announcements"> и <h2>)

и добавьте class;"last":

<div id="announcement"> <h2>Announcements</h2> <ul class="last"> Зачем добавлять класс? Как показано на рис. 8.17, нижнее изображение (конец свитка) должно быть прикреплено к последнему тегу в боковой панели ; таким

образом, изображение появляется в нижней части свитка. Теперь вы можете просто создать стиль, такой как #announcement

ul, который будет работать в дан

ном случае. Но если вы хотите удалить маркированный список и заменить его

241

Двигаемся дальше

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

#announcement . l ast.

Тогда всякий раз, когда будете из

HTML в боковой панели, вы просто добавите с l ass=" l ast"

к последнему

тегу в боковой паиели (можете сделать то же самое для тега <h2>; скажем, создать класс под названием

#announcement . fi rst <di v> ).

и добавить с l ass=" fi

rst"

к тому тегу,

который идет первым внутри

Во внутренней таблице стилей страницы добавьте еще один последний стиль:

#announcement .last { background: url(images/scroll_bottom.jpg) no-repeat center bottom: padding-bottom: 65рх: Как и в других стилях в этой части издания, здесь вы добавляете отдельное

изображение в фон элемента. Однако в данном случае оно размещается в ниж ней части тега

<ul>.

Поскольку у нас есть немало элементов списка, тег

<ul>

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

довательно, вам необходимо поместить его в нижней части тега, чтобы оно ото бражалось внизу тега

<di v>.

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

8.14, внизу. Это IE 6 или IE 7. В этих браузерах вы не увидите ничего, кроме повторяющегося фона, - ни заголовка, ни марке ров, ни верхней или нижней частей свитка. Это еще одна ошибка браузера IE, верно, только если вы не будете использовать

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

IE 6 и IE 7.

Вернитесь к файлу bg_ i mages. htm l и добавьте свойство zoom:

1 к стилю #announcement

во внутренней таблице стилей. Конечная версия должна выглядеть так:

#announcement background: url(images/scroll_middle.jpg) repeat-y center top: margin-top: 115рх: zoom: 1; Это странное свойство, работающее только в

IE, добавляет то,

что называется

разметкой, и устраняет как эту проблему, так и многие подобные. Это неболь

тое волшебство

CSS,

которое, по идее, не должно ничего делать, но делает

(за что мы любим веб-дизайн)!

Двигаемся дальше Страница готова, но в качестве дополнительного задания переместяте внутреннюю

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

( styl es. css ), просто выре

зать стили из внутренней таблицы и вставить их во внешнюю. Тем не менее

242

Глава

Добавление графики на веб-сrраницы

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

#announcement,

который при

меняется для представления информации о разметке боковой паиели ). Попытайтесь

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

таблицы (например, скопируйте свойства

#announcement) и вставьте их в соответ #announcement

ствующие стили внешней таблицы (так, вставьте свойства в стиль в файле

styl es. css ).

Вы найдете готовые обучающие уроки так и версию с одной внешней таблицей Ьg_ex_further.

как версию с двумя таблицами стилей, в папках 08_finished/Ьg_ex и

08_finished/

Приводим в порядок "' навигацию саита

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

вот

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

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

CSS

кнопок и паиелей навигации, как это делают профессиональные раз

работчики. И в заключение, в практической части, мы создадим полный набор средств

элементов навигации, одинаково хорошо работающих во всех разновид

ностях браузеров.

Выборка стилизуемых ссылок В

CSS,

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

определить стиль. Для этого надо сообщить

CSS не только, что стилизовать, то есть

конкретный объект, но и условия стилизации. Браузеры отслеживают процесс взаимо действия посетителя сайта со ссылками и затем отображают их по-разному в зави

симости от статуса. Таким образом, применяя селекторы в

CSS, вам

предоставля

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

Понимание сосrояний ссылок Большинство браузеров распознают четыре основных состояния ссылок: О непосещенная ссылка;

О посещенная ссылка (это означает, что по ссылке уже выполнялся переход,

то есть URL-aдpec сохранен в журнале истории браузера); О иенажатая (над которой находится указатель мыши); О нажатая ссылка (удерживаемая мышью).

244

Глава

Как описано в гл.

Приводим в порядок навигацию сайта

3, CSS предоставляет четыре псевдокласса селекторов, соот : l ink, : vi sited, : hover, : active. Используя их, вы

ветствующих этим состояниям:

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

обеспечивая соответствующие подсказки и однозначно давая понять посетителю сайта, какие ссылки он уже посещал, а какие

нет.

ПРИМЕЧАНИЕ----------------------------------------------- Браузеры Iпterпet

Explorer 8, Opera, Firefox и Safari также поддерживают псевдокласс :focus. Ссыл :focus, когда посетитель вместо мыши пользуется клавиатурой

ки получают признак фокусировки

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

гл.

10.

Предположим, вы хотите изменить цвет текстанепосещенной ссылки с синего

на ярко-оранжевый. Для этого добавьте следующий стиль:

a:link { color:

#FбО;

}

Щелкаем кнопкой мыши на этой ссылке, и ее состояние изменяется на посе

щенное, а цвет в большинстве браузеров становится фиолетовым. Чтобы изменить его на насыщенно-красный, примените такой стиль:

a:visited { color: #900; } сов~---------------------------------------------------Если требуется одинаково отформатировать все состояния ссылок, используйте один и тот же шрифт и размер для всех состояний, затем отформатируйте тег <а>, создав общий селектор а. Далее вы сможете использовать конкретные состояния ссылок, например

a:visited,

для изменения

цвета или настройки какого-либо конкретного состояния.

Псевдокласс

: hover

предоставляет творческую свободу (мы изучим его в этой

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

наведении указателя мыши и перемещении его над ссылкой. Если раньше для ви зуального представления кнопок навигации при наведении на них указателя мыши

вы применялИ объемный код на языкeJavaScript, то вам понравится способ дости жения такого же эффекта посредством простейшей строки кода CSS (см. разд. ~сти лизация ссылок1> данной главы). Для начала рассмотрим простой пример, в котором стиль изменяет цвет ссылки nри наведении и перемещении указателя мыши:

a:hover { color:

#FЗЗ;

}

сов~---------------------------------------------------Будьте внимательны при добавлении свойств

CSS

к псевдоклассу

:hover.

Свойства, изменяющие

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

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

Теперь рассмотрим пример специально для «одержимых!> веб-дизайнеров, ко торым нравится делать свои страницы непохожими на остальные. Изменим вид гиперссылки на доли миллисекунд, то есть на момент, когда посетитель щелкает

кнопкой мыши на ссылке. Для этого напишем следующий стиль:

a:active {color: #B2F5ll; }

245

Выборка стилизуемых ссылок

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

: l ink, : visited:

:hover.

Но для

того, чтобы этот метод работал, вы должны расположить ссылки в определенной последовательности:

l i nk, vi s i ted, hover

act i ve.

Для запоминания этого порядка

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

слов:

LoVejHAte

(в переводе ~любовь/ненавистЬ»). Ниже представлен способ

добавления всех четырех стилей ссылок:

a:link { color: #FбО: } a:visited { color: #900: } a:hover { color: #FЗЗ: } a:active {color: #B2F511: } Если вы измените последовательность, то состояния стилей

hover и active пере l i nk и а: vi si ted,

станут функционировать. Например, если поместить а: hover перед а:

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

ПРИМЕЧАНИЕ----------------------------------------------- Почему последовательность имеет такое значение? Здесь работает механизм каскадности (см. гл.

5).

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

hovered (ссыл

ка, на которую показывает указатель мыши), то a:liпk, будучи указанным последним, согласно правилам каскадности имеет больший вес (приоритет), и

a:hover с заменяющим

цветом никогда не

будет применен.

Выборка отдельных ссылок Стили, которые мы создавали в предыдущем разделе, представляют собой простей шие стили ссылки <а>. Они производили выборку в определенном состоянии, но при этом стилизовали абсолютно все ссылки, независимо от их расположения на

веб-странице. Что же делать, если вы хотите отформатировать одни ссылки одним способом, а другие -другим? Существует простое решение

применить стилевые

классы к нужным тегам.

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

зей, партнеров, спонсоров). Возможно, вы захотите их отформатировать таким

образом, чтобы посетители заранее знали, что это какие-то особенные ссылки, и наверняка захотели бы перейти по ним. В данном случае можете применять стилевой класс: <а

href=http://www.hydroponicsonline.com class="external">Visit this great resource</a> Для стилизации этой ссылки другим способом создадим следующий стиль:

a.external :link { color: #FбО: } a.external :visited { color: #900: } a.external :hover { color: #FЗЗ: } a.external :active {color: #B2F511: }

246

Глава

Приводим в порядок навигацию сайта

Определения только имени стилевого класса, без указания названия тега <а>, будет тоже достаточно:

.external :link { color: #FбО: } .external :visited { color: #900: .external :hover { color: #FЗЗ: } .external :active {color: #B2F511: } Теперь такое·форматирование приобретут лишь ссылки, принадлежащие сти левому классу

· externa l ·.

ПРИМЕЧАНИЕ------------------------------------------------

8 nриведенных

примерах в демонстративных целях мы изменили только цвет ссылок. На практике

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

Группирование ссылок с помощью селекторов потомков. Если набор ссылок

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

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

<di v> и примените к нему <di v i d="mai nNav">. Теперь появилась

возможность произвести выборку и отформатировать только эти ссылки:

#mainNav #mainNav #mainNav #mainNav

a:link { color: #FбО: } a:visited { color: #900.: } a:hover { color: #FЗЗ: } a:active {color: #B2F511: }

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

пользование селекторов потомков~ гл.

СОВЕТ

« Ис

15).

-------------------------------------------------------

Использование маркированных списков для nредставления ссылок

очень распространенный ме

тод (Скоро вы увидите nример этого). В таком случае вы можете добавить идентификатор или класс

к тегу

<ul> списка, например <ul id="mainNav">, #mainNav a:liпk для их стилизации.

а затем создать селекторы потомков наподобие

Стилизация ссылок Теперь, когда вы знаете, как создавать селекторы, производящие выборку конкрет ных ссылок, нужно решить, как стилизовать ссылки. Да как угодно! Вам предо

ставляется полный арсенал свойств языка

CSS, а творческие способности огра - ваши ссылки

ничены только воображением. Единственное, что нужно учесть,

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

247

Стилизация ссылок

Если сделать ссылку похожей на кнопку, у которой появляются границы и изме

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

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

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

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

щелчок кнопкой мыши перенесет его в какой-либо другой раздел текущего сайта или вообще на другой сайт. сов~----------------------------------------------------Если вы не назначите свойству Ьorder тега <img> значение О, то большинство браузеров добавит границу-рамку вокруг изображения, выступающего ссылкой. Чтобы этого не произошло, добавьте в таблицу стилей следующее:

img {

Ьorder: попе;}.

Подчеркивание ссылок Еще с самого начала развития Сети ярко-синий подчеркнутый текст сигнализиро

вал: «Нажмите здесь, чтобы перейти туда-то~. Однако стандартные атрибуты под черкивания и цветового оформления ссылок

это то, что в первую очередь изме

няет любой веб-диэайнер. Подчеркивание- слишком распространенный способ выделения, который порядком поднадоел (рис.

9.1, 1).

У вас есть возможность из

менить ситуацию, одновременно обеспечив хорошее оформление ссылок.

О Полное удаление подчеркивания. Чтобы убрать стандартное подчеркивание, используйте свойство а

text- decorat i on

со значением

none:

{text-decoration: none:}

Конечно, полное удаление подчеркивания может смутить посетителей сайта. Если

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

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

способом, например полужирным начертанием (см. рис. 9.1, 3), цветом фона, под сказкой в виде рисунка или преобразованием ссылки в имитированную кнопку.

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

9.1, 4.

Чтобы обеспечить

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

: hover:

{ text-decoration: none: background-color: #FOO:

} a:hover { bac~ground-color: transparent: text-decoration:underline:

248

Глава 9. При8QДИМ в порядок навм~цию сайта

;·-··----·-·-·"····-· ·---·· ···-·--····-·······-···---·· ... ··--··-· ···· · -·~·· · ···· · ·· -·-·--·--- --·-·······-·"·· · : Nonnal Llnk ; : No Wnder11ne 1

1 Lorem ipsum dolor sit а~ consectetuer

: adipiscing elit. sed diam ii5hummy nibh f ~ euismod lincidunt ut taoreet do!ore magna ' : aliquam erat volutpat. Ut wisi enim ad ; minim veniam . quis nostrud exerci ta\ion ; ullamcorper suscipit lobortis nisl ut aliquip j ех еа commodo consequat. Duis autem vel eum iriure d

• ,.,_• • ...,. '•"'"* '

... ~~ •*•

·-· .......

•• ••

......- •-•

- ...........

..... ..

" "

! Lorem ipsum dolor sit amet. consectetuer

;

·---·-----·-- - · •

а~~~~~~- eum iriure d

..... .........

·-.. . ....

,_,,

Lorem ipsum dolor sit amet. consectetuer adipiscing elil sed diam nonummy nibh euismod tincidunt utlaoreet do!ore magna aliquam ёraivoiuipai. uiwisi enim ad minim veniam. quls nostrud exerci ta\ion · ullamcorper suscipit lobor\is nisl ut aliquip ех еа commodo consequat. Duis autem vel eum iriure d

9.1. Существует множество

-·

''"""" " " -' •'-""

-· --................ ----

Underline on Hover

Lorem ipsum dolor sit amet, consectetuer ' adipiscing elil sed diam nonummy nibh euismod tlncfdunt ut \aorнt ~ magna aliquam erat volutpaL ~ enim ad minim veniam. quis noslrud exerci talion ullamcorper suscipit lobor\is nisl ut ; aliquip ех еа commodo consequal Duis

i.autem vel eum triure d ............ ..... .... ... ... :в;~kg~~~~d ,;·~9~---

: Bottom Border

Рмс.

• • ••--·• • • - r

~·-- • ••

No Under1ine Highlight

Lorem ipsum dolor sit ame1 consectetuer , adipiscing elit. sed diam nonummy nibh euismod tlncldunt ut \aoreet dolore magna aliquam erat volutpat. Ut wisi enim . ad minim veniam, quis nostrud exerci : talion ullamcorper suscipit lobor\is nisl ut 1 aliquip ех еа commodo consequal. Duis

: adipiscing elit. sed diam nonummy nibh ' · euismod lincidunt ut!aoreet dolore magna aliquam erat volutpaL Ut wisi enim ad minim veniam. quis nostrud exerci tation ullamcorper suscipit tobortis nisl ut aliquip ех еа commodo consequat. Duis autem vel eum iriure d

; : ' :

· · · ... ·111

Lorem ipsum dolor sit amet consectetuer · adipiscing elit, sed diam nonummy nibh euismod ЦQ9Щ!.0.!.!!1lt9~~-c!Q!.Qt~. magna aliquam erat volutpat. U! wisi enim ad minim veniam. quis noslrud exerci tation ullamcorper suscipit lobor\is nisl ut aliquip ех еэ coinmodo consequat. Duis autem vel eum iriure d

способов сделать стандартное nодчеркивание

(7)

более nривлекательным: для начала полностью убираем линию подчеркивания (2, 3, 4) или создаем более стильную черту nутем применения свойства или фонового изобраЖения

border (5)

(6)

О Использова101е свойства IDiжней rраницы. У вас есть возможность управлять

цветом, толщиной или стилем стандартной Линии подчеркивания ссылок; ко 1 пиксел того же цвета, что

торое всегда отрбражается в виде линии толщиной и текст.

•

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

•

border-bottom, как показано на рис. 9.1, 5.

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

text-decoration: none: border-bottom: dashed 2рх

#9FЗ:

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

padding.

249

Стилизация ссылок

О Использова101е фонового нзображе101и. Можете больше преобразить вид ссы лок, добавив фоновый рисунок. Например, на рис.

9.1, 6, по~ана граница в ви

де рукописной линии.

Подобная методика подчеркивания заголовков опис~на в обучающем уроке 2 rл .

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

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

Fireworks или Photoshop, в которой имеется инструмент Brush (Кисть), имитирующий рисо вание мелком, фломастером и т. д. Затем создается стиль для ссылки, убира ющий стандартное подчеркивание и добавляющий фоновое изображение. Оно должно быть расположено по нижнему краю ссылки и повторяться в горизон тальном направлении. Можно также добавить небольшой нижний отступ для рисунка линии:

text-decoration: none: background: url(images/underline.gif) ·repeat -x left bottom: padding-bottom: 5рх: Эту методику хорошо использовать для коротких ссылок (состоящих из 1-3 слов), поскольку, если текст занимает более одной строки,

Internet Explorer 6 и 7 добав (IE 8 все делает пра~

ляют рисунок только к нижнему краю последней строки вильно).

Соэдание кноnок Вы можете придать ссылкам вид кнопок, присутствующих в окнах и на паиелях инструментов компьютерных программ . В этом вам помогут свойства

border, background-col о г и paddi ng. С их помощью очень просто создать широкий диапазон разновидностей прямоугольных кнопок (рис.

9.2).

1 CosmoFarmer 2.0 1

1C08111ofanмr 2.0

1CosmoFarmer 2.0 1

CosmoFarmer 2.0

с о

s r.1tJ 1 ;,

r.11

CosmoFarmer 2.0

; IJ

Р1к. 9.2. Можно соэдать кноnки со сложными и nривлекательными очертаниями, комбинируя линии-границы различных стилей, цветов, ширины со свойством цвета фона

Допустим, вы назначили стилевой класс ссылке, которую хотите стилизовать . в виде кнопки: <а link~··stale.html "

class;'"button">Free Donuts Here!</a>. Чтобы

250

Глава

Приводим в порядок навигацию сайта

добавить вокруг этой ссьшки простейшую рамку-контур черного цвета (см. рис. вверху слева}, добавьте следующий стиль:

9.2,

a.button { border: solid lpx #000: Можете также окрасить кнопку путем установки цвета фона:

a.button { border: solid lpx #000: background-color: #333: ПРИМЕЧАНИЕ------------------------------------------------

8 этих

примерах и a.buttoп, и .buttoп подойдут в качестве названия стиля. В случае a.buttoп стиль

применяется только к тегам <а> с классом buttoп, в то время как .buttoп относится к любому тегу с таким именем класса. Если вы хотите быть уверенными, что стиль применяется только к конкрет

ному тегу, то добавьте имя тега в начале: Добавление названия тега таюке полезно в качестве напоминания при просмотре кода CSS - оно дает понять, для форматирования чего предназначен

стиль. Когда вы видите a.buttoп, становится ясно, что стиль нацелен на определенные ссылки.

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

9.2.

Придание кнопке объемно

сти не представляет сложности, но вы должны помнить, что освещение заставляет

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

. эта обращенная· к источнику света сторона- самая светлая, а противоположная самая темная (поскольку приподнятая кнопка в выключенном состоянии препят

ствует прохождению света и вызывает появление тени). Остальные две стороны должны иметь цвета промежуточных оттенков между «светлыми~ и «темными~.

Рассмотрим СSS-код для придания кнопке-ссылке, отображенной в верхнем пра вом углу рис. 9.2, объемного вида:

a.button { background: #BlBlBl: color: #FFF: foпt-weight: bold: border-width: 4рх: border-style: solid: border-top-color: #DFDFDF: border-right-color: #666: border-bottom-color: #333: border-left-color: #В58585: Вы также можете (и я рекомендую) создать стиль в состоянии

:hover.

Кнопки

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

темной и т. д.

251

Стилизация ссылок

Использование изображений Добавление для ссылок изображений

один из самых легких и эффективных спо

собов улучшить внешний ВИД элементов навигации сайта. Существует множество методик и вариантов дизайна, но при этом следует заметить, что ни в одном из хороших, грамотных методов не применяется НТМL-тег

<img>.

Вместо этого ис

пользуется прием с СSS-свойством background -image, с помощью которого можно добавить привлекательность любой ссылке. Несколько примеров приведено на

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

.•.. ... """""' -""""'-' """"""" '""'" ! Normal Link "

""""""'"""

...... -

...

~ Lorem ipsum dolor sit amet, consectetuer

adipiscing elit, sed diam nonummy nibh ; euismod tincidunt utlaoreet dolore magna ; aliquam erat volutpat. ........ ..... ........ ··-····

euismod • • • • • ММ . . . !; magna atiq-uam erat voiиtPai - - - - о

.. ·-~... ~.. ·~- ............ .......... ~... ····-~·-·...·····--·- "-··· - --- ~··- - ·······--··-··- -·· ·-·-····-J

. . . .... .

j lmage in Button

Lorem ipsum dolor sit amet, consectetuer

! adipiscing elit, sed diam nonummy nlbh

. . ..

_ _ _

; .......,_, ..................... ......... ......... .._........ ... , ............._ 1 Bold + Border + lmage

;""' " """""

: ;

.................................................................. ................. .

!. lmage + Background

i ~

! : О Ноте l

......

0• _..., ' •'0 •••0 -' 0

-·~·--

;

' ' ' ''''' ••• · _..._ 0

'" 0 ''' '

+~•••••'>•

• -•••- '''' ' '''"'' · ••••- • ••••

• 0••-••• 0 •H•• J

••• •••

...... ....... .......................... _, .... _, .. ... - ........... ........... ... .. _ ........

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod laoreet dolore ~ kasdfktj dsk~ ; ksajdf kljsad fkljs adfklj sadkl~ lskadjf kljs ~ dflkj sakdl~lksjd

9.3. Даже простой

.., ..

· - -- -

••-- .. -

- .-

,_,-.,._,._.,_.1

.........

!'' " '"'"""""'"""- '"""" "'"""''"''"""'""' " ""'" " '""'" " "'"- """"""'""'""""'. . .

! i Vlslted Links

Extemal Llnk

Рмс.

О • •••••~•• ,_м•о•••и•-•k•••,.•••••"•·---·

;

[ Lorem lpsum dolor sit amet, consectetuer ! adipiscing elit, sed diam nonummy nibh ~ euismod laoreet dolore.; kasdfklj dsldj ksajdf kljsad fkljs adfklj sadЩ lskadjf kljs dflkj sakdl~lksjd

! ! ·

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

для восприятия: значок земного шара (5)- один иэ способов обозначения внешних ссылок, а флажок (6) покажет посетителю, что он уже посещал эту ссылку

Чтобы вспомнить свойство background- image и все, что с ним связано, вернитесь к разд. •Фоновые изображения» гл.

Пока же напомню вам несколько вещей,

которые нужно иметь в виду при использовании изображений со ссылками. О Не забывайте про значе101е

no-repeat.

По умолчанию фоновые изображения

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

забудьте вы:к:лючить повторное отображение- фонового рисунка:

background-

repeat: no-repeat: . Ролловер

это элемент неб-страницы, изменяющий свой вид в зависимости от внешне

го воздействия.

Глава 9. Приводим в nорядок навигацию сайта

252

О Управляйте позиционированием с помощью свойства

background-position.

Чтобы точно разместить фоновое изображение, используйте свойство backgroundposition (см. разд. «Позиционирование фоновых изображений~ гл. 8). Если

необходимо позиционировать изображение по правому краю ссылки, но при этом центрировать его вертикально на строке, используйте следующий СSS код:

background-position: right center:.

Для еще более точного размещения изображений используйте значения парамет ров в пикселах или em. Эти единицы измерения облегчают смещение рисунка на нужное расстояние от левого края ссылки. Комбинируя эти единицы :Измере ния с процентными значениями, вы сможете не только легко центрировать изобра

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

совп

background-position: lOpx 50%:.

----------------------------------------------------

При nозиционировании фоновых изображений nервый nараметр свойства указывает горизонталь ное (по наnравлению слева наnраво) смещение или выравнивание; а второй- вертикальное (по наnравлению сверху вниз) смещение или выравнивание. ·

К сожалению, не существует способа точно позиционировать изображение по отношению к правому или нижнему краю ссылки. Поэтому, если вы хотите

поместить изобраЖение на небольшом расстоянии от правого края, есть два вар1;1анта. Первый заключается в том, чтобы в программередактирования изо бражений добавить к правой стороне рисунка пустое пространство. Размер это го отступа должен быть равен тому расстоянию, на которое вы хотите сместить изображение от правого края ссылки. После корректировки для его выравни вания по правому краю стилизуемого Элемента используйте свойство

backgroundposition; например background-position: right top;. Кроме того, можете исполь зоватьпроцентныезначения:Ьасkgrоund-роsitiоn: 90% 75 %; -такиепараметры обеспечат позиционирование точки изображения, находящейся на расстоянии

90 % от

его левого края, на расстояние 90 % от левого края стилизуемого эле мента. Однако данный метод не обеспечивает точности позиционирования, так что в этом случае придется немного поэкспериментировать (о том, как работа ет позиционирование с процентными значениями, читайте в подразделе «Про

центные значения~ разд. «Позиционирование фоновых изображений~ гл.

8).

О Добавляйте отступы с помощью свойства padding. Если вы используете для выделения ссылки на изображение или значок (см. рис. 9.3, 3, 5 и 6), нужно добавить отступ с той стороны; где рисунок примыкает к тексту. Например, во фрагменте

на рис.

9.3

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

30 пикселов

для

предотвращения наложения текста (слово «Home~) на изображение дома, в то же время во фрагментах 5 и б небольшой правыйотступ обеспечивает простран ство для отделения текста ссылки от значков земного шара и флажка. ПРИМЕЧАНИЕ----------------------------------------------- Поскольку тег <а> является встроенным элементом, добавление верхнего или нижнего отступов

(или nолей) не окажет никакого эффекта. Причина такого nоведения оnисана в nодразделе «Ото бражение встроенных и блочных элементов» разд. «Уnравление размерами полей и отстуnов» гл. 7. Однако можно преобраэовать ссылку в блочный. элемент, чтобы применить к нему верхние и нижние отступы и nоля. Я оnишу эту методику nозже.

253

Соэдание панелей навигации

О По.льзуйтесь псевдоклассамн. Не забывайте о псевдоклассах

: hover и : vi s i ted.

Они помогут создать для ссылок замечательные динамические эффекты и обес печат полезную обратную связь с посетителями сайта.

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

изображение включенной. Или можете не задавать для непосещенных ссылок

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

9.3, 6).

Если вы решите использовать изображение для состояния

: hover ссылки,

пом

J:fИТе, что браузеры не загрузят это изображение, пока посетитель сайта на самом деле не наведет на нее указатель мыши. Может возникнуть значительная за

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

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

мое болвшинства сайтов организовано в виде разделов. Например, ~Продукция~. ~контактная информация~. ~Журнал отзывов~ цт. д. Такая организация позволя ет посетителям хорошо ориентироваться в содержимом сайта, и они точно знают,

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

CSS

облегчает создание красивых и функ

циональных панелей, эффектов ролловеров и т. д.

Испопьзование маркированных списков По сути, папель навигации

не что иное, как набор ссылок, а точнее, она представ

ляет собой список разделов сайта. Как разъясняется в гл.

1, задача языка HTML

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

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

ментов это должен быть тег <u 1>, или тег неупорядоченного маркированного списка. Не имеет значения, будет список вообще без маркеров или будет располагаться горизонтально вдоль верхнего края веб-страницы: все форматирование тега

<u 1>

обеспечено средствами языка Применение

CSS. Пример показан на рис. 9.4. HTML для создания папели навигации -это и есть использова

ние языка разметки по прямому назначению. В каждом элементе списка имеется

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

254 •

Глава

Приводим в nорядок навигацию сайта

f6 .

~ом~ ·---·-···--:

Ноше

. __

• Features

-·----·

... i

FEATURES ,_ '

·- -----·--- ... · i

·~ ---,,-------+:~ EXPERTS ' - - - -i ·~ : ~QUIZ ·~ f - - - -i • Horoscopes : ~ PROJECТS

QUIZ

••

... J.-- ... ·--,.. ........... - - ...........

PIIК. 9.4. Используя CSS, вы можете превратить обычные теги

•" "

PRO)ECТS

&.---- . --------.......... ,

<ul> в то, что захочется, например

в вертикальное или горизонтальное управляющее меню (nанель навигации}

Правильным подходом будет пр именение стилевого класса или стиля с идентифи катором (10-стиля) к тегу

<ul>:

<ul class•"nav"> <l i><a href•"index. html ">Home</a></1 i> <l i><a href•"news. html ">News</a></l i> <li><a href•"reviews.html">Reviews</a></li> </ul> СSS-код немного отличается в зависимости от того, нужна нам горизонтальная

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

1. Удалить маркеры . Чтобы паиель навигации не была похожа на маркированный список, удали м маркеры, установив для свойства l i st- s ty l е- type значение поnе:

ul .nav { l ist-style-type:

поnе:

2. Убрать отступы и поля. Поскольку браузеры сами делают отступы для элемен тов списка, нам придется избавиться от них. Однако одни браузеры используют для этих целей свойство

paddi ng, а другие- margi n, поэтому нам нужно устано 0:

вить для обоих свойств значение

ul .nav { list -style-type :

поnе:

padding-left : о·: llargin·l eft: 0: По сути, эти два шага обеспечивают всем элементам списка простой вид, как у обычного блочного фрагмента текста - абзаца или заголовка (с одним исключе нием: браузер не добавляет полей между элементами списка). С этого момента можно начинать стилизацию. Если вам нужна вертикальная паиель навигации, продолжайте читать дальше; если же хотите создать горизонтальную паиель управ ления, то переходите к следующему разделу.

255

Соэдание панелей навигации

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

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

обеспечивающих правильное отображение паиели навигации.

Отобразим ссылку в виде блочного элемента. Поскольку тег <а> является встроенным, ссылка будет занимать по ширине пространство, равное ширине содержимого тега. Кнопки со ссылками в виде текста различной ширины (на пример,

Home и Our Products) будут иметь различную ширину.

Ступенчатое вер

тикальное отображение кнопок друг над другом выглядит не очень хорошо (рис.

9.5, 1). Кроме того,

верхние и нижние отступы и поля не оказывают ника

кого эффекта на встроенные элементы. Чтобы обойти эти ограничения, преоб разуем ссылки в блочные элементы:

u1 .nav а { disp1ay:

Ыосk;

Параметр отображения Ь 1ock не только выравнивает все кнопки по ширине, но

и делает всю область ссылок активной при щелчке на ней кнопкой мыши подоб но настоящим кнопкам. Это тот случай, когда посетители щелкают на области кнопки, где нет текста (например, отступы вокруг), но ссылка по-прежнему ра

ботает (в браузере Internet Explorer 6 и его более ранних версиях существует та кая проблема; об обходном приеме читайте в обучающем уроке этой главы).

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

браузера (см. рис.

9.5, 2). Есть несколько способов ограничить ширину ссылок.

Сначала можно просто определить тег <а>. Например, если вы хотите, чтобы все

кнопки имели ширину

u1.nav а { disp1ay:

8 em, добавьте в стиль свойство wi dth:

Ыосk;

width: 8em; Установка ширины для любого тега, в который заключены ссылки, например

<1 i> или <u1>, приведет к тому же результату. Если текст кнопки занимает всего одну строку, то можно его центрировать вер

тикально, чтобы над и под ним были одинаковые промежутки. Просто устано вите высоту ссылки и назначьте такое же значение свойства межстрочного ин тервала: а { height: 1.25em; 1ine-height: 1.25em; }.

ПРИМЕЧАНИЕ----------------------------------------------- Не обязательно явно назначать свойство width, если панель навигации вложена в элемент раэметки веб-страницы, для которого уже установлена ширина. Иэ части 3 вы уэнаете, каким обраэом эле ментарно создать боковое меню, примыкающее к левому или правому краю веб-сrраницы. Боковое меню имеет свою ширину, и помещенный в него маркированный список со ссылками-кнопками автоматически приобретает эту ширину.

256

Глава

Приводим в nорядок навигацию сайта

11 о• е

... .... . ·-··-· ·--~

й+

...

~- ~

'two

tkree

fov

;

................. ---·· . . ~

·-· ·····--· ----~

......................... .J

оае

hfo ~

fo•r

Рмс.

•

9,5. Всего четырьмя nростыми действиями можно

превратить

маркированный список ссылок в привлекательную панель навигации

·к сожалению, если вы сами явно не установили ширину для тега <а>, в Internet Exploreг 6 и ниже возникнут некоторые проблемы с этими ссылками. Во-пер

вых, Internet Explorer 6 добавляет большие промежутки между такими ссылка ми (см. рис.

9.5, 3).

Другая ошибка

IE 6 проявляется, когда вы хотите отображать ссылку как блок.

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

IE 6

по-прежнему ограничивает эту возможность текстом внутри

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

IE 6 фон будет подсвечиваться только

при наведении указателя мыши на текст, но не на любое свободное место в пре делах кнопки.

К счастью, эти две проблемы леrко исправить. На самом деле, если вы устанав ливаете точное значение ширины для тегов <а> навигационной панели, то вы

уже заботитесь об ошибках в

IE и можете пропустить следующий шаr.

3. Устраним ошибку в Intem et Explorer. Чтобы удалИть эти промежутки и сде лать всю область доступной для щелчка, добавьте к ссылке специфичное для IE свойство

ul .nav

zoom: { zoom: 1: }

257

Соэдание nанепей навигации

Больше об этой маленькой хитрости вы можете узнать из гл. многие ошибки

IE 6 (и некоторые IE 7)

12, но в основном

решаются просто добавлением свой

ства zo0111: l к элементу. Здесь нет никакой связи с CSS - это всего лишь способ, · изменяющий воспроизведение элементов страницы в IE.

Добавление свойства zoom никак не повлияет на другие браузеры - они просто игнорируют любой код CSS, который не понимают. Вы могли бы при желании скрыть этот стиль от других браузеров, используя прием

htm1, например * htm 1

u1.nav а { zoom: l : }. Кроме того, вы могли бы поместить этот код CSS в таб лицы стилей .п.ля

IE с помощью условных комментариев, характерных для это

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

стилизацией кнопок. Можно добавить отступы, поля, изображения,

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

ОБХОДНОЙ ПРИЕМ Есnи сnиваются границы Если кнопки панели навигации расnоложены вплот

Однако в результате этого обходного приема послед

ную друг к другу и nри зтом вы применяете границы,

няя, нижняя ссылка ланели управления получается без

окаймляющие каждую ссылку отдельно, то линии гра

границы. Чтобы решить проблему, можно либо соз

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

дать стилевой класс с нижней границей и применить

щаются в двойные. Чтобы избавиться от этого, можно

его к nоследней ссылке, либо, что еще лучше, доба

добавить границу только к верхней стороне ссылок.

вить нижнюю границу к тегу

Таким образом, мы nолучим всего одну границу, отде

нель навигации (этот прием будет nродемонстрирован

ляющую кноnки, расположенные рядом.

на практике в обучающем уроке настоящей главы).

<u1>,завершающему па

Горизонтальные панепи навигации CSS nозволяет преобразовать список ссылок, расположенных вертикально одна за другой, в список с горизонтальным представлением, как было показано на рис. 9.4. В этом разделе описываются два распространенных подхода в создании из списка горизонтальной паиели навигации. Первый метод основывается на использовании свойства

di sp 1ау : i n1i ne -

он прост, но с его nомощью нельзя создать кнопки оди

наковых размеров. Если вы хотите единообразия, обратитесь к методу с nримен е нием плавающих элементов

<u1>.

Какой бы метод вы ни использовали, сначала удалите маркеры и левые отступы тегов <u1~, как показано на рис.

9.6, 1.

Самый простой метод создания горизонтальной паиели навигации заключается в изменении для элементов списка значения Ьlock (блочный элемент) свойства

disp1ay на i n1 ine (встроенный элемент). Это делается средствами CSS. 1. Иреобразуем пуикты списка во вcтpoeiUI.Ьie элементы. Встроенные элементы не создают переносов строк ни перед элементом, ни после него, как это делают

258

Глава

блочные. Установка значения

inl ine

9. Приводим

свойства

display

в порядок навигацию сайта

для тегов

к отображению элементов списка в одну строку (см. рис.

<l i>

приведет

9.6, 2).

ul.nav li { display: inline: } Вы должны быть уверены в том, что паиель навигации кнопок-ссылок не слиш

ком большая. Те кнопки, которые не поместятся в одну строку, перенесутся на другую.

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

9.6, 3 и 4:

ul. nav а { border: lpx dashed #000: border-bottom: none: padding: 5рх 15рх 5рх 15рх: margin-right: 5рх: background-color: #ЕАЕАЕА: text-decoration: nопе: color: #333:

ПРИМЕЧАНИЕ----------------------------------------------- Если для создания горизонтальной панели управления вы используете метод с встроенными эле ментами, то не иэменяйте эначение свойства

display

ссылок на Ыосk. Если вы это сделаете, то

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

ницы (или ширину блочного элемента, в который эаключен список).

Добавим для тега <ul> верхний и нижний отступы. Поскольку теги <а>

встро

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

соседние вышестоящие и нижестоящие элементы, как было показано в примере

на рис.

7.6. Кроме того, в браузере lnternet Explorer эти отступы могут привести

к исчезновению верхних границ ссылок. В этом случае отступ тега <а> также

немного приподнимет нижнюю границу тега <u l >,и она отобразится в виде фона под ссылками (обведено кружком на рис.

9.6, 3).

Чтобы решить проблему, добавим отступ для тега

<ul>,

который создает соот

ветствующее nустое пространство, предотвращающее наложение границ и фона

ссылок. Используйте для нижнего отступа

<u l > такое

же значение, как размер

нижнего отступа ссылки.

Для определения верхнего отступа тега <u l >добавьте него отступа ссылки (при использовании отступ тега

<ul> больше).

1 пиксел к значению верх

просто удостоверьтесь в том, что

259

Соэдание панеnей навиrации

tiO.IМ

~ cgrnorate pbt!osoobv

~--·····················································································

Heading for this page

~-~~?.':'!-.':'.·.~~???~~-~ ~~?-~~~-~ ~--·· ........... ························ ·--~Heading for this page

11 !·······························································А ноте ; .! AЬout us !- j <:otJ>«ate Pho1osophy ~ ~ Sto\_j· ................. . Heading for this page

Heading for this page Рис. 9 .6 . Соэдание горизонтального меню иэ сnиска ссылок nотребует выnолнения всего нескольких действий

Например, стиль тега

<ul>, соответствующий ссыJIКам в

шаге

2, должен выгля

деть следующим образом:

ul .nav { margin-left: О ; list-style: none ; padding- left : О;

padding-top:

брх;

padding-Ьottom: 5рх;

border-bottom: lpx dashed #000 : Как видно на рис. 9.6, границе теrа

<ul>.

нижний отступ позволяет хорошо вписаться нижней

Единственная проблема состоит в том, что между кнопками

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

СОВЕТ ------------------------------------------------------Чтобы горизонтальная nанель навигации отображалась горизонтально по центру веб-страницы,

добавьте в стиль теrа <ul> свойство

text-align:

centeг;.

260

Глава

Приводим в nорядок на~rацию саiПа

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ

Всnлывающие меню Как создать стильные, современные всплывающие

Если вы не хотите делать меню самостоятельно, но,

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

воз.можно, просто ограничены во времени, то можете

наведении указателя мыши на кнопки панели нави

воспользоваться бесnлатным генератором

гации?

Menu -

nа нели навигации в виде всnлывающих многоуровне

КОД

вых меню чрезвычайно nопулярны. Они nредставляют

с nрименением исключительно средств

собой отличный сnособ вмеmпь огромное количество

один недостаток: когда nосетитель убирает с кнопки

ссылок в комnактную nанель уnравления. Вы можете

ссылки указатель мыши, nодменю исчезает мгновен

Pure CSS

мастером, реализованным в виде веб-стра

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

создать их несколькими сnособами.

HTML и css (http://purecssmenu.com). nодход CSS имеет

но, без задержки, -остается надеяться, что у nосети телей сайта достаточно хорошая реакция.

Один из методов создания всnлывающих меню ис

nользует только средства CSS и называется Son of Suckerfish (более ранняя версия называлась Suckerfish).

Есть и другой nодход: исnользуйте СSS-код для сти лизации кноnок-ссылок и JavaScript-кoд для уnравле

Об )ТИХ версиях можете nрочитать по адресу h~://

ния работой nодменю (еще одним nреимуществом

www. htmldog.com/articles/suckerfish/dropdowns/.

JavaScript является то, что вы можете добавлять кра сивые эффекты анимации).

Что касается создания многоуровневого горизонталь ного раскрывающегося меню, есть nростой и хороший

обучающий урок по адресу h~://www.tanfa.eo.uk/

a;sfexamplesjmenu/tutorial-h.asp.

В качестве очень простого меню JavaScript nоnробуйте jQuery Simple Drop Down Menu (http://javascript-array.

comfsaipts/jquery_simple_drop_down_menu). Здесь лишь основы, но меню работает очень хорошо. Более

На этом же сайте имеется практический обучающий

мощным меню с исnользованием JavaScript является

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

система

ми подменю:

http://www.tanfa.eo.uk/css/examples/

menu/tutoriaf-v.asp.

Superfish. Вы можете nрочитать о ней и ска

чать необходимые файлы на странице

http://users.

tpg.com.au/Lblrch/plugins/superflsh.

Используем плавающие элементы для горизонтальной навигационной папе ли. Хотя методика с использованием di sp 1ау:

; n1i ne для создания горизонтальной

паиели навигации проста, у нее есть один существенный недостаток: нет способа выровнять ширину кнопок. Установка ширины тегов <1 i > или <а> не приведет к требуемому результату, поскольку это встроенные элементы. Чтобы решить про блему, нужно прибегпуть к более сложному и хитрому решению- применению плавающих элементов.

ПРИМЕЧАНИЕ------------------------------------------------- Панели навигации на основе nлавающих элементов трудно центрировать горизонтально nосереди

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

Иреобразуем пункты списка в плавающие элементы. Добавление для тегов

<l i > свойства float с выравниванием по левому краю исключает их из обычно го нисходящего потока элементов :

u1.nav 1i { fl oat: 1eft: }

261

Создание nанелей навигации

Плавающие элементы списка (вместе с вложенными ссылками) располагаются

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

8 (при

необходимости можно с такой же легкостью установить вырав

нивание кнопок по правому краю экрана (окна браузера) или бокового меню, в которое заключены кнопки).

Добавим в стиль ссылок свойство

display:

Ьlock. Ссылки

это встроенные

элементы, и параметры ширины (как верхние и нижние отступы и поля) к ним

неприменимы. П реобразование ссылок в блочные элементы позволит устано вить точную ширину кнопок и добавить требуемые отделяющие промежутки для ссылок:

ul .nav 3.

{ display:

Ьlock:

}

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

Определим ширину. Если необходимо, чтобы все кнопки паиели управления имели одинаковую ширину, установите параметры тега <а>. В свойстве

wi dth

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

кнопок Очевидно, что для ссылки

Corporate Philosophy

нужна кнопка большей

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

избавившись от тесноты. СОВЕТ ------------------------------------------------------Чтобы центрировать текст ссылок на кноnках, добавьте в стиль ссылок свойство

Добавим свойство

overflow: hidden к

стилю для тега

<ul>.

text-align: center;.

Если для тега

<ul>

заданы границы, цвет фона или изображение, вам придется «удержать плава ющий элемент~. то есть плавающие пункты списка тега <ul >будут высовывать ся из-под нижней части списка (и находиться за пределами границ и фонового цвета тега

<ul >).

ul.nav { overflow: hidden:

Internet Explorer 6 просто проигнорирует эту инструкцию. zoom: 1 для IE 6.

Добавим свойство

ul.nav { overflow: hidden: zoom: 1: См. шаг

3 в подразделе

<<Вертикальные паиели навигации~ выше, где представ

лено краткое описание этого приема.

262

Глава

Приводим в порядок навигацию сайта

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

u1.nav { margin-1eft : Орх : padding-1eft : Орх : 1ist-sty1e : none: border-bottom: lpx dashed #000: fl oat :1eft : width : 100 %: }

u1. nav 1i { f1oat : 1eft : }

u1 .nav а { width: 12em: di sp1ay : Ьlock : border : lpx dashed #000: border-bottom: none: padding: 5рх: margin- right : Spx: background -co1or: #ЕАЕАЕА: text-decoration :none: co1or: #333: text-a1ign : center:

Heading for this page Рмс. 9.7. Плавающие элементы списка nоэволяют соэдавать кноnки nанели навигации одинаковой ширины

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ

Где уsнать, как соsдается nанеnь навиrации Вы начинающий веб-дизайнер и никоМараньше не соз

Подробная информацияпоnревращению nростых сnис

давали лонелей навиzоции, но ваш сайт должен иметь

ков в необычные, неординарные ~лементы уnрав

такую. Кажет01, что вы самостоятельно с 3/Т/им не

ления nредставлена в nowaroвoм обучающем уроке

справитесь. Можно ли где-нибудь найти подробное

в Интернете по адресу

руководство к действию дЛR начинающих?

llstutorial/.

Да. Практическая обучающая nрограмма nредстав

Готовые варианты дизайна стильных nаиелей навига

http://css.maxdesign.rom.au/

лена в ~той rлаве. В ней nодробно, war за waroм оnи

ции на основе сnисков можно наКти по адресу http://

сывается nроцесс создания панели навигации. Просто

css.maxdesign.rom.au/listamatic/.

nерейдите к обучающему уроку.

Если вы захотите СО3ДiПЬ nанель уnравления с вклад Вы можете найти обучающие nрограммы и в Интер

ками (как на страницах сайта

нете, там размещены также инструменты, которые

материал следующей веб-страницы: http://css-disaJss.

Amazon.com), изучите

облегчат работу.

incutio.com/?page=UstTaЬs.

263

Современные методы СТWJиэации ссылок

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ

И наконец. если вы вообще не хотите обременять

заnрашивает оnределенную информацию (шриф

себя созданием м настройкой собственных nане

ты, цвета) и самостоятельно создает СSS-код паие

лей-меню, восnользуйтесь мастером

ли навиrации на основе списков. Он даже позволя

list-0-Matic no адресу http://www.accessify.com/tools-andwizards/developer-tools/list-o-matic/. Этот сайт

ет создавать подменю (известные как выпадающие меню).

Современные методы сrилиэации ссылок Теперь, когда вы овладели элементарными правилами стилизации ссылок, позна

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

наиболее популярными методами.

&опьwие активизируемые кнопки Применеине псевдокласса

:hover представляет собой отличный способ иревраще

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

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

9.8).

PIIК. 9.8. Предоставьте nосетителям сайта большую «кноnку» {область активизации): с nомощью

короткого, но умного СSS-кода вы можете nревратить фрагмент веб-страницы, включающий заголовок и абзац текста, в одну большую кноnку-ссылку

264

Глава

К счастью, все браузеры: и

Opera -

Приводим в порядок навигацию саКта

Internet Explorer 7 и выше, Firefox, Safari, Chrome : hover применительно к любым

nонимают использование псевдокласса

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

это следующим образом:

p:hover { background-color: yellow:} Только взгляните: ссылок нет вообще! Вы можете примелить эффект наведения указателя мыши hover к каким угодно по размеру фрагментам веб-страницы: заго ловкам; фотографиям и абзацам текста. Этого можно добиться путем заключения всего этого содержимого в тег <di v>. Таким образом, если в боковом меню каждую новость заключить в теги

<di v>

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

. news Item,

этот

стиль изменит фоновый цвет всех новостей:

.newsltem:hover { background-color: #333: } К сожалению, браузер Internet Explorer 6 (и его более ранние версии) не пони мает этот стиль вообще. Этот браузер правильно обрабатывает эффект hover толь ко тогда, когда он применен к ссылке. Поскольку тег ссылки

мент, нельзя (по крайней мере, согласно правилам

- встроенный эле HTML) заключить в него другие

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

hover, кото

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

В принципе, и это не проблема. Все, что требуется,

включить творческое мыш

ление. Есть простое решение: не помещайте заголовок и текстовое описание в от

дельные теги, а держите их в ссылке вместе. Чтобы заголовок был похож юi заго ловок, используйте

CSS.

Рассмотрим пример НТМL-кода для достижения такоrо

эффекта. Этот отрывок представляет собой один из множества элементов марки рованного списка:

<li class="story"> <а href="' vi rgo. html "><span cl ass="ti t l e">Vi rgo: It' s Your Month! </span> The stars are aligned in your favor. Next month? Not so much.</a> </li> В данном случае и заголовок, и краткое описание помещены в ссылку, и вы

можете выделить оба элемента одним стилем:

li .story a:hover { background-image: url(highlight.gif): В НТМL-коде заголовок ( <&Virgo, It's Your Month!~) заключен в тег <span>. Вы можете сделать этот текст похожим на блочный заголовок с помощью несколь ких простых команд:

.story span.title { display: Ыосk: text-weight: bold: font-size: 150 %:

265

Современные методы стилизации ссылок

Весь фокус в том, что значенй:е Ь 1ock свойства

di sp 1ау заставляет браузер обра

батывать заключенный в тег <span> фрагмент текста как отдельный заголовок с пе реносом строки до и после фрагмента. Теперь, несмотря на то что заголовок

и краткое описание похожи на отдельные блочные элементы, они по-прежнему являются частями одного встроенного тега <а>.

ПРИМЕЧАНИЕ----------------------------------------------- ВЫ таюке,м~ете использовать

JavaScript для

создания лучшей, более гибкой «большой ссылки».

Подробнvю Информацию вы найдете в обучающем примере на странице www.creativepro.com/article/ view-source-make-your-liпks-uпforgettaЫe.

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

CSS, для смены одной графической ссылки

на другую при наведении на нее указателя мыши приходилось привлекать cpeд

cтвaJavaScript. Теперь с помощью CSS вы можете достичь подобного эффекта посредством псевдокласса : hover и фонового изображения. Однако этот метод име ет одну проблему: если браузером не загружено сменное изображение для hover (ролловер ), оно не загрузится, пока на данную ссылку не будет наведен указатель мыши, - для посетителя заметна задержка этого сменного изображения на время загрузки браузером. Задержка произойдет всего один раз, во время первого наведения указателя мыши посетителем на ссылку, но все-таки ожидание загрузки графики- это из держки ХХ века.

Метод с применениемjаvаSсriрt поможет избежать этой проблемы благодаря возможности предварительной загрузки сменных изображений задолго до того,

как они понадобятся. В

CSS

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

другой хитрый трюк, называемый

Pixy),

CSS Sprites (изначально он назывался

методом

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

состояний одной навигационной кнопки. ПРИМЕЧАНИЕ----------------------------------------------- Оригинальный метод Pixy (предшественник того метода, который мы изучим) описан в Интернете по адресу http://wellstyled.com/css-пopreload-rollovers.html. Эволюционировавший метод CSS Sprites в настоящее время широко используется такими компаниями, как

Yahoo

Google,

причем не толь

ко для эффектов ролловера, но и для оптимизации скорости загрузки сайтов. Вы можете прочитать больше об этом на странице www.mezzoЫue.com/archives/2009/0l/27/sprite_optim.

Рассмотрим, как реализуется метод.

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

необходимости состояние нажатой кнопки. Далее поместим изображения вер тикально одно над другим. У нас будет два состояния кнопки: изображение в не нажатом состоянии должно располагаться сверху, а изображение-ролловер при наведении указателя мыши- снизу.

266 2.

Глава

Приводим в порядок навигацию сайта

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

9.9,

вверху, верхняя граница сменного изображения-ролловера имеет

смещение от верхнего края общего изображения в

39 пикселов.

Создадим СSS-стиль для ссылки в обычном иенажатом состоянии. Поместим изображение в качестве фонового в левый верхний угол стилизуемой ссылки (см. рис.

9.9, посередине).

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

{ background:

Создадим стиль

url(images/pixy.png) no-repeat left top: }

#Е7Е7Е7

:hover. Будем использовать свойство background-pos i t i on, чтобы

сместить изображение вверх. Таким образом, первое изображение исчезнет, авто рое, нижнее, изображение-ролловер окажется видимым (см. рис.

a:hover { background-position:

О -39рх:

9.9, внизу).

}

Такая методика, помимо предотвращения длительной задержки в загрузке до

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

СОВЕТ -------------------------------------------------------

CSS предоставляет и другие способы

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

в качестве фонового, но оно будет прикрыто сверху другим рисунком, основным. Предположим,

логотип сайта отображается в верхнем левом углу веб-страницы. Вы можете поместить иэображе ние-ролловер в этот же угол фона веб-страницы: Ьоdу

top; }.

{

Ьackground:

url(rollover.gif) no-repeat left

В процессе загрузки установится и фоновое иэображение-ролловер. Посетители веб-страни

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

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

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

12).

CSS

<div>,

за пределы видимой части веб-стра

В любом случае браузер загрузит иэображение-ролловер во время загрузки веб

страницы, и в дальнейшем не будет никаких задержек.

~-,

пикселов

l_~ г~

QUI;

background-position:

О О;

background-position:

О -39рх;

,_____ j

г---1

~~ Рис.

9.9. Используя

метод

CSS Sprites,

вы можете избежать задержки во время загрузки

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

267

Современные методы стилизации ссылок

ПРИМЕЧАНИЕ----------------------------------------------- Некоторые сайты довели использование этого метода до крайности.

Yahoo!,

Amazoп и

Google

(сре

ди многих других) часто собирают вместе в одном файле множество маленьких изображений и по каэывают лишь часть файла, содержащую необходимую кнопку. Вы можете посмотреть пример от Amazoп эдесь: www.flickr.com/photos/mezzoЫue/3217540317. Для еще большего контроля сайт одного известного дизайнера использует отдельный графический

файл для управления методе на странице

15 различными кнопками панели навигации. Вы можете прочитать о таком http://veerle.duoh.com/iпdex.php/Ьiog/commeпts/the_xhtml_css_template_phase_

of_my_пew_Ьiog_part_2. А в действии данный метод можно увидеть в обучающем уроке этой главы.

Вкладки С тех пор как компания

Amazon

популяризировала кнопки навигации в виде

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

способов наглядно отобразить структуру сайта. И тому есть серьезная причина.

Способ доступа к информации посредством такого меню можно описать так: что бы открыть новую «папку~ с содержимым, нужно выбрать соответствующую вкладку.

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

вкладки (см. рис.

9.7).

Этот метод использует

CSS- никаких изображений.

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

созда

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

Photoshop или Fireworks.

Тем не менее обновление множе

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

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

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

когда

длина текста кнопок-ссылок сильно различается. Если на одной вкладке напи сано

Store, а на другой- Contact Us Today!, то первая из них выглядит неидеаль

но из-за избытка пустого пространства, а вторая- наоборот, слишком сжата (рис.

9.10, 1). 9.10

На рис.

использование изображения вкладки больших размеров

с шириной и высотой, большими, чем максимальный размер вкладки,

(3)-

гаранти

рует, что вкладки будут выглядеть надлежащим образом даже в том случае, когда посетители увеличат размер текста (базового шрифта браузера) Все, что требуется в данном случае,

(5).

найти способ уменьшить изображение

вкладки под размер текстовой подписи кнопки-ссылки. К счастью, веб-дизайнер

Дуглас Бауман

(Douglas Bowman)

придумал хитрый способ сделать это. Подобно

268

Глава

9. Приводим в порядок навигацию сайта

методу <!раздвижных штор~ , он использует одно большое по ширине и высоте

изображение вкладки, создан ное в программе редактирования изображений (см. рис.

9.1 О, 2), впоследствии разрезанное на две части в виде двух файлов рисун

ков (см. рис. 9.10,3). Одно изображение представляет собой узкую полоску левой стороны вкладки. Это должен быть лишь маленький закругленный левый край вкладки. Второй рисунок - оставшаяся часть изображения в виде широкой вклад ки. Она шире, чем максимально возможная, и формирует основную часть и правый край.

круnная кноnка

<а>(левое

изображение)

• • 11

<li>(npaвoe

изображение)

• 11

Рис. 9.1 О. Исnользуя метод «раздвижных wтор», можно создать панель навигации с вкладками для ссылок любых размеров

П РИМЕЧАНИЕ ----------------------------------------------- Методика «раздвижных wтор» Дугласа Баумана- классика СSS-диэайна. Сrатью автора вы сможе те найти в Интернете по адресу

http://www.alistapart.com/articles/slidingdoors. Имееrся также nосле http://www.alistapart.com/

дующая статья, оnисывающая более продвинутую методику, по адресу

articles/slidingdoors2. В чем же особенность? Поскольку тег может иметь только одно фоновое изо бражение, вы должны назначить рисунки для двух различных тегов. Сначала нуж

но создать маркированный список и преобразовать его в горизонтальную панель навигации, как описано в подразделе «Горизонтальные панели навигации~ преды

дущего раздела. Каждый тег <а> вложен в свой тег ется два нужных нам тега.

<1i>, таким образом, у нас име

269

Современные методы стилизации ссылок

Теперь добавьте широкое фоновое изображение в стиль тега <li>, причем по местите его в верхний правый угол тега. Это-делается путем добавления в стиль, форматирующий < l i > соответствующей кнопки, следующего свойства:

background: url(images/right_tab.gif) no-repeat right top: Методика ~раздвижных штор~ основана на том факте, что фоновое изображе ние никогда не выходит за пределы блочного элемента, созданного его тегом. Дру

гими словами, несмотря на то, что этот рисунок имеет очень большую ширину и высоту, вы никогда не увидите часть изображения, которая выступает за пределы

тега <l i >, будь то нижняя или левая сторона тега. ПРИМЕЧАНИЕ----------------------------------------------- Если понравилась эта методика, но вы не умеете работать с программой

Photoshop,

можете выбрать

и бесплатно скачать вариант дизайна вкладок в Интернете по адресам: http://www.explodiпg-boy. com/2005/12/15/free-css-пavigatioп-desigпs и http://www.explodiпgЬoy.com/2005/12/21/more-free-css пavigatioп-meпu-desigпs.

Поместите узкую левую часть изображения вкладки в левый верхний угол фона тега <а>, добавив в стиль ссылки следующее свойство:

background: url(images/left_tab.gif) no-repeat left top: Поскольку тег <а> вложен в

<l i>, его фон располагается над <l i>. И этот узкий

левый край вкладки отображается поверх широкого изображения, создавая иллю зию единого изображения вкладки. Теперь можете впечатывать в свои ссылки лю

бой текст, теги пунктов списка <l i> будут растягиваться, вмещая требуемый текст

и показывая более широкое Изображение вкладки (см. рис. 9.10, 4). сов~---------------------------------------------------nрактический пример веб-страницы с применением метода «раздвижных штор» вы сможете найти

в обучаЮщем уроке данной тавы книги. Файл находится в пап-ке 09/slidiпg_doors.

Стилизация отдельных видов ссыпок Веб-дизайнеры используют ссылки на все, что угодно: другие веб-страницы своих сайтов, веб-страницы посторонних сайтов, файлы Adobe Acrobat, документы W ord, архивы

ZIP

и многое другое. Чтобы помочь ориентироваться посетителям сайта,

вы можете подсказать им, к чему ведет ссылка, прежде чем они щелкнут на ней

кнопкой мыши. Расширенные селекторы представляют отличный способ, чтобы сделать именно это. Хотя такой метод использует селекторы из

го, но еще не до конца готового стандарта

CSS),

CSS 3 ( следующе

почти все браузеры в настоящее

время понимают эти селекторы.

~MEЧAHИE-----------------------------------------------

Internet Explorer

б не понимает эти селекторы. Однако, доля рынка, занимаемого этим браузером,

продолжает сокращаться (на момент написания составляет уже менее

17 %),

и использовать такой

метод можно без ущерба для юзабилити вашего сайта. Большинству посетителей будет доступна

улучшенная версия, в то время как обладатели

б будут видеть привычный облик сайта.

270

Глава

Приводим в порядок навигацию сайта

Ссыпки на другие сайты Вы можете легко создать стиль, который определяет ссылки на другие сайты, ис

пользуя селектор атрибута. Как рассказывалось в гл.

3, селекторы атрибутов по HTML, у которых есть определенный атрибут, например тег <img> с атрибутом а 1t, для которого установлено значение Our Company. Вы также зволяют стилизовать теги

можете стилизовать теги, атрибуты которых начинаются с определенных значений.

Любая ссылка, которая ведет за пределы вашего сайта, должна быть абсолютным

URL,

то есть должна начинаться с

http://,

например

http://www.yahoo.com.

Таким

образом, чтобы создать стиль, который воздействует только на ссылки с абсолют ным

URL,

можно использовать такой селектор:

a[hrefA='http://'J Сочетание А= переводится как •начинается с~. так что этот селектор соответ ствует таким ссылкам, как <а

href="http: 1/www. googl е. сот!">,

www. sawmac. com/mi ssi ng/css2e/ ">и т.

<а

href="http: 11

д.

Вы могли бы стилизовать их любым образом, но распространенным является добавление рядом со ссылкой маленького изображения

значка, который указывает

на то, что это внешняя ссылка. Вы увидите это в действии в обучающем примере. Если вы решили использовать абсолютные ссылки на другие страницы вашего

сайта, то вам нужно добавить еще один стиль для •выключения~ стилизации, в про тивном случае ссылки будут выделяться как внешние, хоть в действительности они являются простыми ссылками на другие страницы в пределах сайта. Этот второй

стиль просто использует более обстоятельный вариант селектора, приведенный выше. Например, если ваш сайт находится по адресу

www.mysite.com, то вы може

те создать селектор, который относится к таким ссылкам, следующим образом:

a[hrefA='http: 1/www.mysite.com']. Собирая все это вместе, если вы хотите добавить значок с земным шаром рядом с внешними, но не внутренними ссылками вашего

сайта, создайте два этих стиля:

a[hrefA='http://'J { background: urlCimages/globe.png) no-repeat center right: padding-right: 15рх: } a[hrefA='http://www.mysite.com'] background: поnе: padding-right: 0: ПРИМЕЧАНИЕ------------------------------------------------- Если вы хотите следовать последним новшествам CSS, то можете объединить селектор атрибутов с селектором :поt() из CSS 3 для создания отдельного стиля, который будет воздействовать на все абсолютные адреса URL, кроме тех, что указывают на ваш собственный сайт: a[hrefл ='http://']: not( a[hrefл = 'http://www. mysite.com']) Этот причудливый селектор переводится как «выбрать все ссылки, которые начинаются с но не те, которые начинаются с одна из версий Iпtemet

http://www.mysite.com».

Explorer (даже восьмая)

http://,

Недсх:татком метода является то, что ни

не понимает селектор :поt(), поэтому значительная

часть посетителей не почувствует пользы от этого стИJU~. ·

271

Современные методы стилизации ссылок

Ссыпки на адреса электронной почты Ссылки на адреса электронной почты

еще один особый вид ссылок. Обычно они

выглядят как любые другие ссылки: имеют синий цвет и подчеркивание. Тем не менее они действуют не так, как другие ссылки. Нажатие ссылки на электронный

адрес запускает программу для работы с почтой на компьютере посетителей, что некоторых из них действительно отвлекает. Поэтому желательно как-то подсказать пользователю, что это ссылка на адрес почты.

Для этого используется тот же базовый метод, который был описан примени тельно к внешним ссылкам выше. Поскольку все ссылки на почтовые адреса начи

наются с

mailto:, вы можете создать селектор наподобие следующего для стиля,

форматирующего только данный тип ссылок:

a[href"= 'mai lto: 'J Скоро вы увидите такой пример в действии.

Ссыпки на определенные типы файлов Некоторые ссылки указывают на файлы, а не на другие веб-страницы. Вы часто могли видеть ежегодные отчеты различных компаний в виде загружаемого

PDF-

файла или ZIР-архива файлов (как, например, обучающие примеры для этой кни-

. ги)

на сайте. Ссылки на такие типы файлов, как правило, вынуждают браузер

nриступить к загрузке соответствующего файла на компьютер посетителя или, в случае файлов

PDF, запустить плагин (подключаемый модуль), который позво

лит просматривать документ прямо в браузере. Выбрав ссылку, посетитель может оказаться в шоке от того, что на самом деле началась загрузка файла размером

100 Мбайт! Вы можете идентифицировать определенные типы файлов наподобие внеш них ссылок или ссылок на адреса электронной почты. Но вместо того, чтобы пы таться найти какую-то конкретную информацию в начале адреса поищите ее в конце. Например, ссылка на документ <а

href="annual_report.pdf">,

PDF

а ссылка на ZIР-архив- <а

URL

ссылки,

может выглядеть так

href="tutorials.zip">.

В каждом случае конкретный тип файла определяется расширением в конце адре са

URL- .рdfили .zip. CSS 3 предоставляет селектор атрибутов, который позволяет искать атрибуты,

заканчивающиеся какой-либо конкретной информацией. Так, чтобы создать стиль ссылки на файлы

PDF,

используйте такой селектор:

a[href$=' .pdf'] Сочетание $=означает ~заканчивается ню>, и, соответственно, данный селектор

указывает выбрать все ссылки, значение атрибута на

. pdf.

href

которых·заканчивается

Вы можете создать аналогичные стили и для других типов файлов:

a[href$=' .zip'] /* zip archive */ a[href$=' .doc'J /* Word document */ Далее вы увидите примеры этого метода.

272

Глава

Обучающий урок

Приводим в nорядок навигацию сайта

стилизация ссылок

В этом обучающем уроке мы потренируемся в стилизации ссылок разнообразными способами, в том числе путем добавления изображений-ролловеров и фоновых рисунков.

Чтобы начать обучающий урок, вы должны загрузить файлы, содержащие учеб ный материал. Как это сделать, описывается в конце гл. ющей программы находятся в папке

Файлы текущей обуча

09.

Простейшее форматирование ссылок Начнем с простого форматирования ссылок.

Запустите браузер и откройте файл неб-страницы

l i nks. html

в папке

Эта страница содержит множество ссылок (обведены на рис.

09\links.

9.11 ),

которые

указывают на другие неб-страницы текущего или иных сайтов, а также обозна чают адреса электронной почты. Сначала изменим цвет ссылок данной стра ницы.

Откройте файл

l i nks. html

в НТМL-редакторе и поместите указатель между

открывающим и закрывающим тегами

<style>.

Эта неб-страница уже имеет внешнюю таблицу стилей, придающую ей какое-то базовое форматирование и содержащую теги

ПРИМЕЧАНИЕ----------------------------------------------- Вы разместите стили для этого уnражнения во внутренней таблице для того, чтобы было легче nисать код и nросматривать страницу. Когда все будет готово, желательно nеремесrить стили во

внешнюю таблицу стилей.

Добавьте во внутреннюю таблицу новый стиль:

{ color: #207EBF;

} </style> Этот стиль будет применяться ко всем тегам <а> на странице. С него хорошо

начинать, поскольку он устанавливает общий внешний вид для ссылок на стра нице. Вы добавите больше стилей, которые позволят вам форматировать ссыл ки в определенных областях страницы. Теперь пришло время удалить это на доевшее подчеркивание под ссылкой.

Добавьте в только что созданный стиль

#ma i n

а свойство

text- decorat i on:

nопе:.

Он убирает подчеркивание, но в то же время ссылка на неб-странице становит ся менее заметной. Не забывайте, что ссылки всегда должны визуально выде-

Обучающий урок

273

1: стилизация ссылок

Eжploriug Тyposrapblc Possibllities novemtмr

30 ROO DBBLE

ESSE QUAM NULLA Ut enlm ad mlnlme venlam, quie no•trum •ercationem Ullem ~ aue<:ipil

QUIS AUTEM VEL EUM ut enlm 8d minime wnlam, qula .-17um exercillllloмm uJI8m c:orport8

....... I8ЬorloNm....., ul81quid8< •c:onmad ~а.. ....... .."" U'8 iop181•~==vell-qo8m nН malo81illll COII88qUIIIIur, wl ~ quovaч-,.... poriiiU?Ut.- 811 - - 1 1 i.illm ~

,...,..llilaflaoem,

".._ venllm. qui8 ·--

•op•ide111

corтmodi ~ Qula-... .."" U'8 qui in- vciЧ*8 ... qo8IJI nН 1"11111181188 CQri88qUIIIu", .......... qui dolot8m .."" fug'.8 quo ~ ..... p8li8lw?

nlai ul81quid . . -

Copyтlght20~18 Рмс.

9.11. Простейшая

•

рт6м~

веб-страница со стандартной для браузеров стилизацией

ляться на общем фоне, чтобы у посетителей сайта не возникало сомнений в том, что это именно ссылки и на них можно щелкнуть кнопкой мыши.

На рис.

9.11 часть ссылок указывает на одни страницы сайта, часть -на другие

и одна ссылка обозначает адрес электронной почты. В обучающем уроке мы отформатируем каждый тип по-разному .

5. Добавьте в стиль а свойство font -wei ght : Ьо 1d: . Теперь ссылки отображаются полужирным шрифтом (для остального текста он также может быть установлен) . Далее заменим подчеркивание на выделение другим способом, но сделаем это творчески, используя вместо свойства

decoration границы.

text -

274 6.

Глава 9. Приводим в порядок навигацию сайта

Добавьте свойство

border, при ЭТQМ стиль должен выглядеть следующим обра

зом:

#main а { color: #207EBF: text-decoration: поnе: font-weight: bold: Ьorder-Ьottom: 2рх solid

#FбО:

Теперь ссылки вьщеляются, а использование границ вместо обычного подчер кивания позволит изменить стиль, цвет и толщину линий (рис.

9.12). А сейчас

вы измените вид посещенных ссылок.

Добавьте стиль псевдокласса

: vi s i ted для

посещенных ссылок:

a:visited { color: #6E97BF: Стиль изменяет внешний вид посещенных ссылок на более светлый с серым оттенком -это искусный способ отвлечь внимание от уже посещенной страни цы. Если вы просмотрите страницу сейчас, щелкните кнопкой мыши на одной

из ссылок (попробуйте, например, одну из тех, что находятся в центре страни цы), а затем вернитесь к странице

1i nks. htm~.

Вы должны увидеть, что ссылка

стала светлее. Но вы также заметите, что остается выделение полужирным и все еще присутствует то оранжевое подчеркивание, которое вы назначили для сти

ля в шаге

Это примеркаскадности в действии (см. гл.

5):

стиль а:

vi si ted яв

ляется более значимым, чем простой селектор, поэтому его свойство цвета пе

реопределяет тот цвет, который был назначен стилем. Сейчас добавим эффект-ролловер

hover (наведения), чтобы фон изменял

цвет

при наведении на ссылку указателя мыши,

Corpora!! Oraphlcll

Pwent Corpond! 8118 МoreUnka

Рис.

9.12. С

помощью нескольких стилей вы можете изменить внешний

вид любой ссылки, а используя псевдокласс

:hover,

можно установить отдельный стиль,

включаемый при перемещении указателя мыши над ссылкой

Добавьте в таблицу стилей стиль псевдокласса

a:hover { color: #FFF: background-color: #6E97BF: border-bottom-color: #6E97BF:

: hover:

Обучающий урок

275

стилизация ССЬJЛОК

Этот псевдокласс применяется только на время, пока указатель мыши показы вает ссылку или перемещается над ней. Свойство интерактивности эффекта

ролловера позволяет посетителям узнать, что выполняется ка~ое-то действие (см. рис.

9.12).

Добавление для ссыпки фонового изображения Ссылка на адрес электронной почты внизу веб-страницы пока осталась нетранутой созданными стилями (рис.

9.13, вверху). Поскольку mai l tь указывает на адрес элек

тронной почты, при щелчке на ней кнопкой мыши посетитель не перейдет на дру

гую веб-страницу, а запустит почтовую riporpaммy. Чтобы обеспечить визуальное выделение этой ссылки, добавим небольшой значок почтового конверта.

nlai ut ellquid ех ев commodl conaequatur? Quis autem vel eum iure qul in • voluptate velit 8888 quam nihll molestia8 conaequatur, vel Иlum clolorem eum fugiвt quo voluptas nulla pariatur? Copyrlght 2010. E-mell commenta to caOcoemofarmer.com

nisl ut eliquid ех ев comrnodi consequatur? Quis autem vel eum lure qui in ев voluptate velit евае quam nlhll moleetlae conaequatur, vel illum dolorem eum fuglat quo voluptaa nulla pariatur? Copyright 20181 commenta to

caa0co8mofanner.com

nisi ut aliquid ех ее cornmocli consequatur? Quis autem vel eum lure qui in ее voluptate vellt esae quem nlhil moleetiee consequetur, vel illum dolorem eum fuglat quo voluptaa nulla pariatur? Copyrlght 2010. IS2J E-mall commenta to ~.сот

Рмс.

9.13. Несколько тонких корректировок сделают назначение ссылки

пон11тным:

проста11 ссылка (вверху) превращаетс11 в 11вную, узнаваемую владельцами электронной почты (внизу)

1. Добавьте во внутреннюю таблицу стилей файла l i пks. html еще один селектор ПОТОМКО)'I:

#legal а { color: #666666: border: попе: backgrouпd: url(images/email .gif)

пo-repeat

left

ceпter:

276

Глава

Приводим в порядок навигацию сайта

Ссылка на электронный адрес заключена в тег

<di v> с идентификатором 1ega 1,

так что этот стиль влияет только на конкретную ссылку электронной почты.

Для ссылки назначен серый цвет, а код определенное в шаге

border: none убирает подчеркивание, background добавляет фоновое изображение no-repeat обеспечивает однократное отображение

Свойство

с левой стороны, а параметр

рисунка. Здесь трудность состоит в том, что фоновое изображение (значок кон верта) располагается на заднем плане прямо под текстом ссылки, и она стано

вится трудночитаемой (см. рис.

9.13, посередине).

Добавьте в только что созданный стиль# 1ega 1 а левый отступ размером 20 пик селов:

padding-1eft:

20рх:

Помните, что отступ добавляет промежуток между содержимым и границей элемента, поэтому установка небольшого левого отступа смещает текст ссылки на

20 пикселов,

оставляя фоновое изображение на месте. И последний штрих:

нужно немного отодвинуть всю ссылку от примечания об авторском праве.

Добавьте в стиль левое поле размером

1О пикселов. Должен получиться следу

ющий окончательный вариант:

#1ega1 а { co1or: #666666: border: none: background: ur1(images/emai1.gif) no-repeat 1eft center: padding-1eft: 20рх: margin·1eft: lOpx: Эта маленькая корректировка обеспечивает визуальное отделение изображе ния-значка почтовой ссылки от примечания об авторском праве (см. рис. 9.13, внизу). Таким образом, ссылка воспринимается посетителем как сочетание значка с текстом.

сов~---------------------------------------------------вы таюке можете использовать расширенный селектор атрибута для выделения ССЬ1Л0К на адреса электронной почты. Как испольэуются такие селекторы, вы увидите в следующем раэделе.

Выдепение внешних ссылок Иногда требуется визуально показать, что ссылка соответствует другому внешне му сайту. Этим можно сказать посетителям, что дополнительная информация по теме находится где-то еще в Интернете, на другом сайте, или предупредить, что

выбор этой ссылки приведет к переходу на другой сайт. Кроме того, вы, возможно, захотите идентифицировать ссылки, указывающие на загружаемые файлы или

другие документы, не являющиеся неб-страницами. На неб-странице, над которой вы работаете, правостороннее боковое меню

Resources

содержит различные типы ссылок, которые вы выделите значками, ис

пользуя отдельный значок для каждого типа. Для начала вы настроите базовый стиль, который применяется ко всем ссылкам.

Обучающий урок

277

стилизация ссылок

Добавьте во внутреннюю таблицу стилей веб-страницы

#resources а { border-bottom:

l i nks. html

следующее:

поnе:

Поскольку все ссылки, которые нужно отформатировать, находятся внутри

<di v> с идентификатором resources, селектор потомка #resources

а воздействует

только на эти ссылки. Этот стиль избавляется от подчеркивания, которое было добавлено в общем стиле ранее. Далее вы добавите значок рядом с внешними ссылками.

Добавьте другой стиль в конец внутренней таблицы стилей веб-страницы

links.html: a[hrefA='http://'J { background: urlCimages/globe.png) no-repeat right top: Этот стиль использует расширенный селектор атрибута. В основном он воздей ствует на любую ссылку, которая начинается с

http://.

Как и стиль ссылки на

адрес электронной почты, который вы создали ранее, этот стиль добавляет фо новое изображение. Он помещает изображение на правую сторону ссылки. ПРИМЕЧАНИЕ--------------------------------------------------

6 этом

разделе вы используете расширенные селекторы атрибутов для стилизации различных ссы

лок на боковой панели страницы. Большинство браузеров, за исключением стили. Если вы хотите создать аналогичные стили, которые работают с

б, понимают эти

б, лучше всего использо

вать класс стилей, например .extemaiLink, а потом вручную применить имя класса к ссылкам на внешние сайты: <а class="externaiLink" href="http://www.twitter.com">. Этот метод предполагает много работы, поскольку вам нужно добавить классы к каждому типу

ссылок

внешней, файлам

PDF,

документам

Word

и т. д. Только если ваш клиент или начальник

не потребует иного, лучше бьггь дальновидным и использовать селекторы сообщество nользователей

CSS 3 -

сокращающееся

б nо-прежнему сможет выбрать ссылку, просто пользователи этого

браузера не увидят значков.

Тем не менее у этого стиля есть проблема, аналогичная проблеме стиля ссылки на адрес электронной почты, К счастью, решение такое же

изображение появляется под текстом ссылки. нужно добавить отступы, чтобы переместить

изображение в нужное место. :Ei этом случае, однако, вместо левого отступа вы добавите правый (поскольку значок появляется на правой стороне ссылки). Кроме того, так как все ссылки в разделе ресурсов будут иметь значки схожих размеров, вы можете сократить количество кода, добавив отступы к стилю

#resources 3.

а, созданному в шаге

Отредактируйте стиль зом:

#resources а { border-bottom:

поnе:

padding-right: 22рх;

#resources

а так, чтобы он выглядел следующим обра

278

Глава

Приводим в порядок навигацию сайта

Если вы сохраните страницу и просмотрите ее в браузере, то увидите маленькие значки с земным шаром с правой стороны двух нижних ссылок боковой панели. Теперь отформатируем другие ссылки.

Добавьте еще три стиля во внутренней таблице стилей:

a[href$=' .pdf'J { background: urlCimages/acrobat.png) no-repeat right top: }

a[href$=' .zip'J { background: urlCimages/zip.png) no-repeat right top: }

a[href$=' .doc'] { background: url(images/word.png) no-repeat right top: Эти три новых стиля проверяют, как заканчивается атрибут href, идентифици руют ссылки как файлы Adobe Acrobat (. pdf), ZIР-архивы (. zi р) или докумен ты W ord (. doc) и назначают различные значки в каждом конкретном случае.

5. Наконец, добавьте состояние hover (ifаведения указателя мыши) для ссылок на ресурсы:

#resources a:hover { color: #FFF: background-color: #6E97BF: Этот стиль изменяет цвет текста и добавляет цвет фона (рис. Окончательную версию этого урока вы найдете в файле

9.14).

09_fi ni shed/ l i nks 1l i nks .

html. RESOURCES • AnnU81 Report

:=~~:·;~

• Р81'8Пt Corporate Slte а

• Рмс.

9.14. Используя

~~oreunka а

расширенные селекторы атрибутов, вы можете легко

идентифицировать и стилизовать различные типы ссылок веб-страницы

Обучающий урок

создание паиели

навигации На этом практическом занятии мы превратим простой список ссылок во впечат

ляющую паиель навигации с эффектом-ролловером и выделением нажатой кноп ки текущего раздела сайта.

Обучающий урок

279

2: соэдание панели навигации

Откройте файл веб-страницы

nav_bar .html

из папки 09\nav_Ьar в НТМL-редак

торе.

Как _ридите, в этом файле содержится совсем короткий программный код. Здесь

присутствует внутренняя таблица со сбросом стандартных стилей CSS и одним правилом, определяющим простейшее форматирование тега

содержимого веб-страницы. Код

<body> основного

HTML создает маркированный список, состо 9.15, 1.

ящий из шести ссылок. Неб-страница име-ет вид, показанный на рис.

Первым шагом будет добавление НТМL-кода, обеспечивающего целенаправ ленное форматирование ссылок списка средствами

• • • • · ·

!!ш!lt

fu!J/W fJsadJ.

CSS .

НОМЕ fEAТUЦES

EXPERТS

QU!Z

2\ш

PROJECТS НOROSCOPES

~ L

номе·

• fEAI\IRI!~ · exi'E~cтs

·~~~~~

........ ····-·

......................... ~RTS ......... ....................

QUI~-~

4>f«>J~S НGROS<::OPI:S

~..

• z

......................... ,

i'/toJECТS

....................... · 1

~OSCOPES

Рис.

9.15. Вам может nокаэаться, что

nреобраэование nростого сnиска в сложную nанель

навигации требует выnолнения объемной работы. но на самом деле нужно всего лишь соэдать несколько стилей

2. Найдите открывающий тег <u 1>и добавьте в него идентификатор i d ; "mai nNav", чтобы он выглядел следующим образом:

<ul id;"mainNav"> Идентификатор

i d назначает этот список главной областью навигаци и , или

паиелью управления. Мы будем использовать его для создания производных

селекторов, избирательно форматирующих только ссылки этого списка (а не все ссылки веб-страницы).

Добавьте во внутреннюю таблицу после

#inainNav { margin : 0: padding : 0: list-style: none:

body новый стиль:

280

Глава

Приводим в порядок навигацию caйrct

Этот стиль будет применен лишь к тегу <u 1> с идентификатором ma i nNav. Он уда ляет отступ и маркеры, которые браузер добавляет в маркированные списки, как показано на рис.

9.15,2.

Теперь приступим к форматированию ссылок.

Добавьте производный селектор для форматирования ссылок списка:

#mainNav а { co1or: #000: font-size: llpx; text-transform: uppercase: text-decoration: поnе: Этот стиль определяет базовое форматирование текста ссылок: устанавливает цвет и размер шрифта, верхний регистр всех букв, удаляет линию подчеркива ния (см. рис.

9.15, 3).

Добавьте в стиль

Сейчас придадим ссылкам вид кнопок.

#mainNav свойства border и padding:

border: lpx dashed #999: padding:

7рх 5рх:

Теперь при просмотре неб-страницы в браузеревы заметите пару проблем (см. рис.

9.15, 4): границы перекрываются между собой, а ссылки имеют различ

ную ширину. Это происходит потому, что тег <а> является встроенным элемен

том и ширина ссылки равна длине ее текста. Кроме того, верхний и нижний

отступы не обеспечивают увеличения высоты встроенным элементам, поэто

му границы накладываются друг на друга (о встроенных элементах читайте в разд. «У правлени е размерами полей и отступов• гл.

7). Решить эти проблемы

со ссылками можно путем изменения их способа отображения браузером.

Добавьте свойство

di sp1 ау:

Ь1 ock; в стиль

#mainNav.

Мы изменяем параметры отображения тега <а> таким образом, чтобы он обра батывался браузером как абзац текста или другой блочный элемент, с располо жением ссылок в виде списка, в точности одна над другой. Осталась единствен

ная проблема

ссылки растянуты по всей ширине окна браузера

много для кнопок. Исправим ситуацию, ограничив ширину тега

слишком

<u 1> в соответ

ствующем стиле.

ПРИМЕЧАНИЕ-----------------------------------------------

Если вы будете просматривать веб-страницу в брауэере Intemet Explorer б или его боЛее ранних версиях, то заметите небольwие nромежутки между кнопками. Не волнуйтесь. Мы иа1равим эту ошибку брауэера далее.

Во внутренней таблице найдите стиль #ma i nNav и добавьте в него свойство wi dth: 175рх;.

При ширине списка

175 пикселов ссылки по-прежнему слишком широки, хотя

и ограничиваются шириной элемента-контейнера (тег

<u1>).

В большинстве

случаев список ссылок заключен в какой-то элемент разметки неб-страницы (например, боковое меню), для которого уже определена ширина, поэтому мо

жете пропустить этот шаг (о том, как созДавать боковые меню, читайте в час тиЗ).

Обучающий урок

281

2: соэдание панели навигации

Сейчас перейдем к самому интересному.

Добавьте в стиль #mai nNav свойство

background следующим образом:

#mairiNav а { color: #000: font-size: llpx: text-transform: uppercase: text-decoration: поnе: border: lpx dashed #999: padding: 7рх 5рх: display: Ьlock: background-color: #Е7Е7Е7; background-image: url(images/nav.png); background- repeat: no- repe.at ; background-position: О 2рх; Эти строки изменяют цвет фона ссылок на серый и устанавливают одиночное

. изображение с левой стороны каждой кнопки (см. рис. 9.15, 5). Здесь тоже нуж но кое-что исправить: текст ссылки накладывается на значок, а линии границ

между кнопками имеют толщину, равную имеют толщину

1 пиксел,

2 пикселам ( теоретически

границы

но сливающиеся воедино линии соседних ссылок

образуют линию толщиной

2 пиксела).

ПРИМЕЧАНИЕ----------------------------------------------- ИспольэуЯ сокращенный вариант свойства ·ьackground, можно изменить код в шаге В на такой: Ьackgrouncl: #Е7Е7Е7 url(images,lnav.png) no-repeat О 2рх;.

Удалите верхнюю границу и измените отступ в стиле #ma i nNav, чтобы он вы гля дел следующим образом:

#mainNav а { color: #000: font-size: llpx: text-transform: uppercase: text-decoration: поnе: border: lpx dashed #999: Ьorder-Ьottom: поnе;

padding: 7рх Spx 7рх ЗОрх; display: Ьlock: background-color: #Е7Е7Е7: background-image: url(images/nav.png); background-repeat: no-repeat: background-position: О 2рх: Выглядит неплохо: текст каждой ссылки отделен от значка, границы выделя ются. Однако нижняя граница последней ссылки исчезла. Существует несколь

ко способов разобраться с этим. Один состоит в том, чтобы создать стилевой класс с надлежащим параметром нижней границы border-bottom, а затем применить

его к этой ссылке. Будет гораздо проще применить нижнюю границу к тегу

<u 1>,

282

Глава

Приводим в порядок навигацию сайта

содержащему список ссылок (поскольку этот тег не имеет отступов, нет проме

жутка, отделяющего верх

<ul> от верхней стороны этой первой ссылки). 10. Добавьте верхнюю границу в стиль ul#mainNav, чтобы он выглядел следующим образом:

#mainNav { margin: О; padding: О; list-style: поnе: width: 175рх; Ьorder-Ьottom: lpx dashed #999: Вот и все, мы создали простейшую паиель навигации с применением границ,

отступов, фонового цвета и изображений (см. рис.

9.15, 6).

Добавление ролловеров и выделение текущего раздела сайта стилем выбранных ссылок Пришло время усовершенствовать паиель навигации и придать ей некоторую ин

терактивность. Во-первых, обеспечим кнопкам главной паиели управления эффект ролловера. Они должны изменять свой вид, акцентируя внимание посетителя на

том, какую кнопку он собирается нажать. Неплохо было бы дать посетителю знать, в каком разделе (на какой странице) сайта он находится. Мы можем обеспечить созданной паиели навигации автома

тическую интерактивность. Она будет просто изменять свой стиль в соответствии с выбранным разделом страницы. Звучит совсем просто, но в действительности это потребует некоторой разметки и настроек, как вы увидите в последующих шагах.

Эффект ролловера реализовать просто, но начнем по порядку.

Добавьте в конце таблицы стилей файла

nav_bar. html

следующий стиль:

#mainNav a:hover { font-weight: bold; background-color: #B2F5ll; background-position: Зрх 50%; Он определяет внешний вид ссылки-кнопки в состоянии

hover. Стиль изменяет

шрифт текста кнопки с обычного на полужирный, а также цвет фона на ярко зеленый. Кроме того, он использует метод

CSS Sprites, упоминавшийся ранее. 8 в прошлом разделе - оно в дей значка (рис. 9.16). В этом случае изо

То же самое изображение применяется в шаге ствительности содержит три различных

бражение центрируется внутри кнопки, отображая средний значок файла. Теперь при наведении указателя мыши на любую кнопку и его перемещении на ней кнопка моментально изменяет свой вид (откройте веб-страницу в своем браузереи посмотрите сами).

Обучающий урок

•

НОМЕ IXPI!ItТS

• -

'" '

283

2: соэдание nанеnи навигации

FEAТURES

. ,_

F!AТURES

_ ••

Рмс. 9.1 6. С помощью несложного СSS-кода можно соэдать интерактивный эффект ролловера для кноnок nанели навигации, а также автоматически подсветить раздел

сайта текущей страницы

Теперь сделаем паиель навигации более информативной, выделив кнопку, со ответствующую текущему разделу, страницу которого открыл посетитель сай

та. Чтобы сделать это, нам по~буется идентифицировать в НТМL-коде пане· ли навигации две вещи: раздел, к которому принадлежит страница, и разделы,

на которые указывает каждая ссылка. В нашем примере предположим, что от крыта домашняя страница.

ПРИМЕЧАНИЕ----------------------------------------------- Друrим вариантом будет соэдание стилевого класса, который изменяет внеwний вид ссьапки, nред· ставляющей раэдеn страницы. Для веб-страницы гороскоnа ссылка nанепи навигации может ВЬIГЛЯ· деть следующим образом: <а hгef="/horoscopes/" dass="u_r_here">Нoroscopes</a>.

2. Найдите тег <body> и добавьте в него идентификатор id;"home": <body id;"home"> Теперь, когда мы знаем, какому разделу сайта принадлежит текущая открытая страница, можно использовать производный селектор для создания конкретно

го СSS-стиля, который будет применен к веб-странице раздела

Features. Далее

мы должны маркировать разделы, на которые указывает каждая ссылка-кнопка,

что достигается путем добавления идентификаторов.

3. Найдите в НТМL-коде паиели навигации ссылку Features и добавьте в нее иден тификатор i d~"homel i nk ", чтобы тег выглядел следующим образом: <а

href="/index.html" id="homelink">Home</a>

Этот идентификатор однозначно определяет ссылку, предоставляя возмож ность создания стиля, который будет применен только к ней.

284

Глава

Приводим в порядок навигацию сайта

Естественно, нам потребуется добавить идентификаторы для всех ссылок па нели навигации.

Повторите шаг 4 для каждой из ссылок, используя следующие идентификаторы: featurelink,expertlink,quizlink, projectlink иhoroscopelink.

С НТМL-частью закончили. Настало время создать СSS-код. Теперь у нас есть маркированные страница и ссылка и мы можем элементарно создать производ

ный селектор, выделяющий кнопку-ссылку

Features.

5. Добавьте в таблицу стилей неб-страницы еще один стиль: #home #homelink { background-color: #FFFFFF; background-position: 97% 100%: padding-right: 15рх; padding-left: ЗОрх; font-weight: bold; Мы уже рассматривали эти свойства прежде. Снова вы используете метод

Sprites для

CSS

регулировки позиции фонового изображения. На этот раз изобра

жение отодвигается на

97 % в'право,

а его ниЖняя часть помещается в нижнюю

часть кнопки. Другими словами,значок·будет отображаться внизу изображения (см. рис. 9.16). О том, как процентные значения работают с фоновыми изобра жениями, мы говорили в гл.

В данном· случае наибольший интерес представляет селектор

#home #homel i nk.

Это очень точный, явно определенный селектор, применяемый только к ссылке с идентификатором homel i nk, которая также заключена внутри тега <body> с иден тификатором

qui z,

home.

Если вы измените идентификатор страницы, например, на

с кнопки-ссылки раздела

Home исчезнет

выделение.

Просмотрите неб-страницу в браузере, чтобы увидеть результат: теперь ссылка .ноmе имеет белый фон и значок скрепки. Чтобы проделать все то же самое с остальными ссылками, вы должны немного расширить селектор.

Отредактируйте селектор только что созданного стиля:

#home #homelink. #feature #featurelink, #expert #expertlink. #quiz #quizlink, #project #projectlink. #horoscope #horoscopelink { background-color: #FFFFFF; background-position: 97% 100%; padding-right: 15рх; padding-left: ЗОрх: font-weight: bold: Конечно, довольно объемный СSS-код. Этот стиль теперь адресуется ко всем ссылкам паиели навигации, но только при выполнении определенных условий.

Если вы в дальнейшем измените идентификатор

i d тега <body>,

например, на

Обучающий урок

285

соэдание панели навигации

qu i z, то ссылка раздела Quiz приобретет такое же форматирование, выделена ссылка раздела Features.

каким была

Теперь пришло время проверить результаты работы. ПРИМЕЧАНИЕ-----------------------------------------------3тот дnинный селектор является nримером группового селеJ(Тора, который мы обсуждали в гл.

Измените свойство

id тега <body> на feature следующим образом:

<body id="feature"> Воспользовавшись предварительным просмотром неб-страницы, вы увидите, что ссылка Featuгe теперь выделена белым цветом фона и значком скрепки (см. рис.

9.16). Весь секрет в том, что нужно изменить идентификатор тега <body>,

чтобы указать, к какому разделу сайта принадлежит страница. Например, для стра ницы гороскопа измените параметр-идентификатор в

<body> на id="horoscope".

ПРИМЕЧАНИЕ----------------------------------------------- Готовы nродолжить стилизацию дальше? Попытайтесь добавить эффект ролловера, чтобы закон чить стиль, соэданный в шаге б (используйте псевдокласс :hoveг в качестве составляющей селек тора: #quiz #quizUnk:hover). Попробуйте также добавить другое изображение дnя ссылки главной страницы Horne (можете использовать файл home.png в папке с рисунками images).

Исправпение ошибок

Internet Explorer

Что бы мы оnисывали в обучающем уроке, если бы не существовало ошибок Intemet Explorer? К сожалению, папель навигации не работает надлежащим образом в этом браузере Шестой и более ранних версий (в IE 7 и 8 все работает исправно). Во-первых, есть промежуток между кнопками. Кроме того, браузер принимает за выбираемую ссылку не всю область, а только текст (рис. 9.17). В других же браузерах активиза ция кнопки-ссылки происходит при перемещении указателя мыши по любой об ласти кнопки, включая текст ссылки и сам фон (пустое пространство рядом с тек

стом). К счастью, устранить ошибки несложно.

Отредактируйте стиль

#mainNav

а, добавив свойство

zoom: 1:

#mainNav а { text-decoration: поnе: color: #000000: font-size: llpx: text-transform: uppercase: border: lpx dashed #999999: border-bottom: nопе: padding: 7рх Spx 7рх ЗОрх: display: Ыосk: background-color: #Е7Е7Е7: background-image: url(images/nav.png): background-repeat: no-repeat: background-position: О 2рх: zoom: 1; Этого странного кода достаточно для настройки

IE 6.

286

Глава

} (o;111of '" mt>r

QUI2 . .. . . . . . ..

9. Приводим в nорядеж навиnщию сайта

/.\ilrosolt lnter r1et (xplorer

, . . .. . . . . - . .. '

-·

Рмс. 9.17. Веб-страница при открытии вlпterпet Explorer имеет ряд nробnем с nанеnью навигации

это промежутох между кноnками-ссылками и их подеветка только

при наведении укаэателя мыwи непосредственно на текст ссылки

Если у вас установлен

Internet Explorer 6, просмотрите в нем страницу.

Навигационная паиель должна теперь работать в этом браузере так же коррект но, как и в более «здравомыслящих• брауэерах lnternet Explorer 8, Firefox, Opera и Safari. Окончательную версию навигационной панели смотрите в файле

09_finished\

nav_bar\ nav_bar_vertica l .html. ПРИМЕЧАНИЕ----------------------------------------------- Во многих спучаях я рекомендую эти сnецифические стили, ориентированные только на работу в lntemet Explorer, иэолировать от остальных. Как nравило, они содержат информацию, не имеющую

смысла в CSS, которая исправляет недоработки Iпteгnet Explorer. Перечитывая таблицы стилей в будущем, вы, наверное, удивитесь, зачем включили сюда СSS-код, и сами можете заnутаться

в нем. Предnочтительней будет отделить его, поместить во внеwнюю таблицу стилей, присоеди няя с исnольэованием условных комментариев Microsoft. Детальное оnисание методики читайте в раэд. «Уnравление брауэером

lntemet Explorer» гл. 15.

Переход от вертикальном nанепи навигации к горизонтальной Предположим, вы хотите создать горизонтальную панель навигации в верхней

части веб-страницы. Никаких проблем

большую часть самой сложной работы

мы уже выполнили. Чтобы расположить кнопки горизонтально в одну строку, не

обходимо немного изменить уже созданную веб-страницу (мы будем дорабатывать

Обучающий урок

287

соэдание nанели навигации

наш последний файл паv _bar.

html,

поэтому, если вы хотите сохранить вертикаль

ную паиель навигации, прежде чем продолжить, сделайте копию файла).

Убедитесь в том, что вы выполнили все шаги по созданию вертикальной паиели навигации, и откройте файл пav_bar .html в НТМL-редакторе. Сейчас вы увидите, как просто изменить ориентацию панели. Сначала подчис тим кое-что из того, что мы уже сделали. Вам нужно удалить ширину, которую

вы установили для тега

<ul>

ранее. Эта ширина препятствовала тому, чтобы

навигационные кнопки охватывали всю длину страницы. Но, поскольку тегу

<u l > необходимо

расшириться, чтобы вмещать набор горизонтальных кнопок,

эта ширина подойдет нам без изменений.

Найдите стиль

#mainNav и удалите в нем свойство width:

175рх:.

Теперь привожу сам секрет преобразования вертикальной паиели навигации в горизонтальную.

Добавьте в таблицу новый стиль (сразу после

#mainNav):

#ma i nNav l i { float: left: width: 12em: Этот стиль применяется к тегу

<l i> (представляющему собой элементы списка,

каждый из которых содержит свою ссылку). Первая команда устанавливает для

тега выравнивание по левому краю. Таким образом, каждый последующий тег

<l i > располагается

с правой стороны предыдущего (такой же эффект вы могли

наблюдать в обучающем уроке по созданию фотогалереи в гл.

8). Кроме того, уста <l i >, мы одновременно определяем ширину для всех кно пок паиели навигации. В данном случае значение 12ems обеспечивает достаточный навливая ширину тега

размер, чтобы вместить самый длинный текст названия ссылки. Если будет не обходимо увеличить длину, вы должны будете увеличить это значение.

сов~---------------------------------------------------иаюльзование для установки ширины кноnок значений em считается лучшим методом. Есnи nосетитель увеличит размер шрифта, кноnка со значением ширины в em также увеличится в размерах. Тем не менее большинСПIО браузеров в наши дни исnользуют функцию масштабирования страницы, так что, когда вы увеличите текст, вы на самом деле увеличите всю страницу, и даже кноnки и другие эле

менты, значения ширины которых определяются в nикселах, увеличатся в размерах. Поэтому в на

стоящее время большинСПIО дизайнеров исnользуют значения в· nикселах nрактически для всего.

При просмотре веб-страницы в браузере вы увидите, что с паиелью навигации в основном все в порядке. Требуются только небольшие корректировки ( смот рите обведенные кружком области на рис. созданная нами в шаге

9.18, 1). Во-первых, нижняя граница, 10, занимает всю ширину тега <ul>, более широкого, чем

кнопки, непосредственно образующие паиель навигации. Еще более странно то, что нижняя граница расположена не на заднем плане, а поверх кнопок. Кроме того, поскольку последние расположены рядом друг с другом, их левые и правые

границы сливаются между собой, образуя линии толщиной мы решим эти проблемы.

2 пиксела.

Сейчас

288

Глава

Приводим в порядок навигацию сайта

"\-НОНЕ

&~--

"\-

FEAТVI\E.S

~ EXPERTS

~МЕ

~ FEAТVRES

"\- EXPERTS

FEAТVRES

~ EXPEiiTS

'"\-НОНЕ

"\-

·"\-НОНЕ

~FEAТVRES

.... EXPE"TS

QUП

QUJ%

~ QUП

6 .... PROJECТS

··" "

НOROSCOP~

PROJECТS

"\-

НO"OSCOPJI

....

Рмс:. 9.18. Преобраэование вертикальной панели в более компактную с горизонтальным расположением кнопок требует выполнения всего нескольких действий; гораздо больше усилий нужно приnожить для настройки стилей, определяющих nараметры границ и позиционирование

фонового изображения

В стиле

#ma i nNav

а измените свойство

border -bot tom :

поnе : на

border -1 eft:

поnе: .

Это действие приводит к удалению левых границ кнопок, чтобы они не удва

ивались, и в то же время к нижнему краю добавляется граница. Однако нижняя граница тега <u1> по-прежнему отображается поверх кнопок, и с левой стороны панели навигации отсутствует граница на крайней левой кнопке (смотрите об веденные кружком области на рис. 9.18, 2). Никаких проблем - просто измени те границы

<u1>.

Найдите стиль

#999999:

на

#ma i nNav и измените в нем свойство border-bot tom : l px dashed border -1eft : lpx dashed #999999 :.

Сейчас при просмотре веб-страницы в браузере вы заметите , что граница над кнопками исчезла, но с левой стороны паиели навигации так и не появилась (см. рис. 9.18, 3). Это еще одно свидетельство сложности использования пла вающих элементов. Они вышли из обычного потока содержимого документа, и браузер больше не видит их в качестве составной части тега <u1>. Тег умень

шился до минимальных размеров, именно поэтому его нижняя граница отобра жается поверх остального содержимого (это может показаться слишком запу

танным, но так оно и есть, именно поэтому работе с плавающими элементами посвящена отдельная глава книги - см . гл . 12). К счастью, несмотря на то, что проблема кажется достаточно сложной, ее реше ние совсем простое. Добавим одно СSS-свойство к маркированному списку .

Добавьте два свойства в конце стиля #ma inNav:

#mainNav { margin : 0: paddi ng: 0: l i st -style : none : border-1eft: lpx dashed #999999:

overflow: hidden: zoom: l; /* for IE

Обучающий урок

289

2: соэдание панели навигации

Код overfl ow:

hi dden заставляет расширяться неупорядо'):енный список. Почему 12. А код zoom: 1 предназначен Internet Explorer 6.

свойство работает? Об этом вы узнаете в гл.

только для

Наконец, значок скрепки, выровненный по правому краю нажатой кнопки Quiz,

выглядит неплохо (см. рис.

9.18, 4),

но лучше позиционировать его по левому

краю.

Найдите стиль выбранной кнопки,· созданный в шаге селектором). Измените координаты его свойства

6 (это стиль с длинным background с 97% 100% на Зрх 100%.

Теперь стиль должен выглядеть следующим образом:

#home #homelink. #feature #featurelink. #expert #experlink. #quiz #quizlink. #project #projectlink. #horoscope #horoscopelink {

background-color: #FFFFFF: 100%: padding-right: 15рх: padding- left: ЗОрх: font-weight: bold:

background-position: Зрх

Просмотрите веб-страницу в браузере, и вы обнаружите, что горизонтальная паиель навигации полностью работоспособна, а также замечательно выглядит (см. рис. 9.18, 5). Кроме того, она отлично работает даже в браузере Internet

Explorer. ПРИМЕЧАНИЕ----------------------------------------------- Возможно, вы захотите центрировать текст кнопок-ссылок панели навигации. Для этого нужно сделать две вещи: добавить в стиль #mainNav свойство text-align: center и подкорректировать свой

ство

left-padding этого же стиля, чтобы текст был расположен точно по центру кнопок.

Законченная версия веб-страницы, которая должна получиться, находится в файле

nav_bar_horizonta l. html

в папке 09_finished\nav_bar учебного материала.

Форматирование таблиц и форм

10 Возможности

CSS

не ограничиваются форматированием текста, изображений

и ссылок. Вы можете создавать информационные таблицы с расписаниями, резуль татами спортивных мероприятий и списки воспроизведения с музыкой, которые

становятся намного более читабельными, если к ним добавить границы, фоновые рисунки и другие визуальные улучшения. Ко всему прочему, вы можете использо

вать

CSS для

разработки соответствующих элементов форм, которые помогут ва

шим посетителям сделать заказ, подписаться на новости или воспользоваться ва

шими самыми новыми интернет-приложениями. В этой главе вы узнаете, как

вывести на экран таблицы и формы с помощью

HTML, а также как их скомпоно CSS. В уроке в конце

вать и применить к ним соответствующие стили посредством

главы вы создадите таблицу и форму, используя приемы, которым попутно обучи тесь.

Правильное использование таблиц За короткую историю существования Интернета НТМL-таблицы получили очень широкое распространение. Изначально созданные для отображения данных в таб личном виде, они стали очень популярным инструментом для создания размет

ки. Столкнувшись с некоторыми ограничениями в

HTML, дизайнеры

творчески

подошли к решению этой проблемы и начали применять столбцы и строки таб лиц для размещения в них таких элементов страниц, как заголовки и боковые поля. Как вы увидите в части

этой книги,

CSS

намного лучше справляется

с компоновкой веб-страниц. Вы можете сконцентрировать все ваше внимание на использовании таблиц по их прямому назначению

для отображения данных

(рис.

10.1 ). HTML и XHTML

имеют в своем распоряжении внушительное количество те

гов, предназначенных для создания страниц. С помощью этого фрагмента кода на

HTML создается

очень простая таблица, которую вы можете видеть на рис.

<tаЫе>

<caption align="bottom"> ТаЫе 1: CosmoFarmer.com·s Indoor Mower Roundup

10.2.

Правильное исnользование таблиц

291

) l11door /.\o,·ter Rou11dup ll.ozrlld f rr<'fox

l;J(Q)l8J

COSMOFARMEPf~ Your online guide to spsrtment fsrming

Yow feedЬock

lorem ipSUtn dolor oite

ornet. lhls Мonth's Survey

lorem ipsum dolor &iie omei. lndoor lowns: sod or seed? lorem ipsum dolor oiie

omei. LoremiP'U"' Lorem ip.s:um dolor site

ome!. Oolor.siteomet

lorem ipsum dolor siie omei. Adiplsclng etil

lorem ipsum do!or siie omei. Wismod linc:idunl torom ipsum dotor cife amet. Oolor sile omel Lorem tpsum do1or site

omet.

Рис. 10.1. Благодаря CSS в этой таблице, содержащей информацию о домашних газонокосилках, шрифты изменяются на более nривлекательные, создаются rраницы и меняются фоновые цвета, но вся лежащая в основе структура создана с nомощью

</capt;on> <colgroup> <col id="brand" /> <col id•"price" /> <col id•"powe'r" /> </colgroup> <thead> <tr> <th scope-"col">Brand</th> <th scope• "col ">Price</th> <th scope•"col ">Power Source</th>

HTML

292

Глава

Brand

Power Sourre

Price

Chinook Push-omali.:

- t-- <ht>

Мini-Re,iew

The late~t model of lhe Chinook nюwer is а Ьig improvement over la.~t year's nюdel. lt's smoolh gliding action is perfect for even massively over grovm sod. lt~ handliпg around comers is superЬ -perfect for lhose tight areas around sofa.o; and coffee -

S247JIO

Mcchanical

Iпdoor

Mowcr

<td> граница

taЬJes.

San1psoп

Dcluxc Apanment Mower

$370.00

Mechaпical

ТаЬiс Рис.

10. Форматирование таблиц и форм

In our battery of 7 nюwing tests. lhe Sampson scored 9 or аЬоvе оп cach. Тhе fine Ьladcs tum

Cosпюfarmer.com 's

10.2. Заголовок Price говорит,

г-- отступ

even Iarge weeds into tiny cunings, perfect for composting or salad gamishes. lndoor Mower Roundup

что вы найдете стоимость каждой из газонокосилок в ячейках

снизу. Реальные данные хранятся в таблице в тегах

<td>

</tr> </thead> <tbody> <tr> <td>Chinook Push-o-matic Indoor Mower</td> <td>$247.00</td> <td>Mechanical</td> </tr> <tr> <td>Sampson Deluxe Apartment Mower</td> <td>$370.00</td> <td>Mechanical</td> </tr> </tbody> </taЬle>

Даже имея в своем распоряжении всего лишь по три строки и столбца, табли

HTML: <tаЫ е>, <capt i on>, <со l group>, <col>, <thead>, <tbody>, <tr>, <th> и <td>. В целом наличие такого большого кода на HTML - не самый хороший показатель, но, с другой стороны, различные теги ца использует девять уникальных тегов

позволяют воспользоваться многими полезными средствами при создании сти

лей

CSS.

Заголовок для каждого из столбцов таблицы, задаваемый в теге

<th>,

может иметь различный вид в разных ячейках таблицы, если вы будете исполь

зовать при создании стиля тег <th>. Это избавит вас от нудной работы по созда нию множества различных классов, таких как . tab l eHeader, а также от необходи мости вручную задавать их для каждой ячейки таблицы. В следующем разделе вы познакомитесь с примерами использования различных тегов и ощутите все их преимущества.

ПРИМЕЧАНИЕ------------------------ Для получения более подробной информации о создании таблиц с помощью НТМL посетите стра ницу www.456bereastreet.com/archive/200410/bring_on_the_taЫes/.

293

Соэдание стилей для таблиц

Соэдание стилей для таблиц Вы можете использовать многие свойства

CSS,

о которых уже прочитали, чтобы

добавить привлекательности таблицам и их содержимому. Свойство со l or, напри

мер, устанавливает цвет текста в таблице, так же как и везде. Тем не менее вы об наружите некоторые свойства, которые особенно полезны при использовании их в таблицах, а также свойства, предназначенные исключительно для их форматиро вания. Тот факт, что таблица состоит из нескольких НТМL-тегов, помогает опре делить, к какому из них применить соответствующее свойство

CSS. Использование

отступов в теге <tab l е> никак не влияет на отображение. В следующих нескольких разделах рассматриваются свойства CSS, используемые для форматирования таб лиц, а также теги

HTML, к которым они

применяются.

Добавление отступов Как вы прочитали в разд. «Управление размерами полей и отступов~> гл.

7, отступ

это расстояние между границей элемента и его содержимым. Вы можете исполь

зовать отступы, чтобы обеспечить немного свободного места между краями абзацев с текстом и их границами. Когда речь идет о таблицах, границы

- это края ячейки, и при использовании отступов добавляется свободное место вокруг содержимого этой ячейки таблицы (см. рис. 10.2). Это работаеттак же, как и атрибут cellpadding тега

<tab l е>,

с той лишь разницей, что вы можете задать отступы от каждой из че

тырех границ ячейки. Отступы применяются либо к заголовкам таблицы, либо к ее ячейкам, но никак не к самому тегу <tаЫе>. Итак, чтобы задать отступ размером 10 пикселов для всех ячеек таблицы, вам слеДует воспользоваться таким стилем:

td. th { padding: lOpx; } Вы можете также контролировать отступы от каждой из четырех границ ячейки.

Чтобы добавить 1О пикселов места сверху для каждой ячейки с данными в таблице,

3 пиксела снизу

и по

5 пикселов

слева и справа, создайте такой стиль:

td { padding-top: lOpx: padding-right: 5рх: padding-bottom: Зрх: padding-left: 5рх; Или используйте сокращенную версию свойства

padding:

td {

padding: lOpx

5рх Зрх 5рх;

сов~---------------------------------------------------Если вы с помощью тега <img> поместите в ячейку изображение и заметите, что внизу таблицы появится нежелательное свободное место, то установите Ыосk в качестве значения свойства display (см. подраздел «Отображение встроеннЬJХ и блочных элементов» раэд. «Управление размерами по

лей и отступов» гл. 7). Чтобы получить больше информации, nосетите страницу http://developer. mozilla.org/en/docs/Images,_TaЫes,_and_Mysterious_Gaps.

294

Глава

10.

Форматирование таблиц и форм

Настройка горизонтального и вертикального выравнивания Чтобы настроить месторасположение содержимого внутри самой ячейки, исполь зуйте свойства text-al ign и

vertical-al ign. Первое свойство применяется для управ l eft, ri ght, 10.3). Это унаследованное свойство (см. гл. 4, чтобы узнать

ления горизонтальным выравниванием и может принимать значения

center

justify

(рис.

больше о наследовании). Если вы хотите выровнять содержимое всех ячеек табли цы по правому краю, создайте следующий стиль: tаЫе

{ text-align: right: right

ceпter

left 1

Bra•d

Price

Power So•r~e

Chinook Push-o-malic Indoor Mower

S247 .00

Mechaaical

Sampson Deluxe Apartmenl Mower

5370.00

Mechaoicзl

1 ~liвi-Re\iew ТЬе latest model of the CЬinook mo\\·er is а Ьig improvement O\"er last year' s model. It' s smooth gliding action is pertect for """" massi\•ely over gro\\'11 sod. Its haodling around comers is sup«tJ -- petfect for tЬos. tight areas arouod sofas and cofu tables.

Jn our battery of 7 mowing tests, the Sampson scored 9 or

ТаЫr

Рис.

justified

1 0.3. В CSS

аЬо\.., on each. ТЬе 6ne blaoo 111m e.·en large \\'eeds into tioy cuttiogs, perfect for compostiog or sзlad garnishes.

1: CosmoFarmer com's lndoor Mo•••er Rouodop

при необходимости изменений в таблице вам придется внести их только

во внешний файл с таблицами стилей, а не в

1О 000

отдельных тегов

<td>

Это свойство удобно использовать в тегах <th>, так как браузеры обычно вырав нивают его по центру. Простой стиль вида

th { text-al ign: l eft: } выровняет

и заголовки таблицы.

Свойство и атрибут

CSS text-a l i gn по отношению к ячейкам таблицы работает так же, как al ign тега <td>. Тем не менее старайтесь использовать CSS, так как это

поможет вам хранить информацию о стилях во внешней таблице стилей. В этом случае, если вы решите изменить выравнивание по правому краю на выравнивание

по левому краю, вам придется внести изменения только во внешний файл с табли цами стилей.

У ячеек в таблицах есть также такой параметр, как высота. Обычно браузеры выравнивают содержимое вертикально по центру ячейки (см. пример

mi dd l е на vertical-align. Исполь зуйте одно из этих четырех значений: top, base l i ne, mi ddl е или bottom. Значение top помещает содержимое ячейки вверху, mi ddl е - по центру, а bottom -внизу. При ис пользовании значения base l i ne выравнивание происходит так же, как и при исполь зовании значения top, за исключением того, что браузер выравнивает первую стро ку текста в каждой ячейке заданной строки таблицы (рис. 10.4). Скорее всего, вы даже не заметите тонкостей работы параметра baseline. В отличие от text-align свойство vert i са l -а l i gn не унаследовано, поэтому вы можете использовать его толь ко в стилях, которые применяются прямо в тегах <th> и <td>. рис.

10.4).

Вы можете изменить это с помощью свойства

295

Соэдание стилей для таблиц

СОВЕТ-------------------,--------

Итак, изученное форматирование таблиц применяется сразу ко всем вашим таблицам. Когда же вы хотите использовать для каждой таблицы свой индивидуальный стиль (или для каждой ее ячейки),

измените выбранный селектор. Чтобы использовать особый дизайн в определенной таблице, за дайте для нее имя класса- <taЬie class="stocks"> -и создайте несколько производных селекторов вида .stocks td или .stocks th, чтобы применить различное форматирование к каждой ячейке. Если вы хотите изменить форматирование определенной ячейки в таблице, используйте в теге класс <td

class="subtotal">

Bra..t

и создайте класс со стилем для форматирования этой ячейки.

Pri<~

Pow~r So•rc~

:\fi8i-Re'i~w

M.ocЬanical

Thc lalest model of tЩ, Chinook mо•пт is а big

Chinook Push-o-matic Indoor Mo\ver

S1-П.ОО

Samoson Deluxe Apartment Mower

$370 00

MecЬaoical

$370 00

M.ochanical

Sampson Deluxe Apartment Mo\ver Chinook Push-o-matic Indoor Mower

imprO\·em<nt O\'et last year's model. lt' s smooth 8)idiog t--action is perfect for even massively o•·er g>"O\\'D sod. lts Ьaodling arouod comers is superЬ -- perfect for those tigh! areas around sofas aod coffee taЫes

$247.00

Mechaoical

Т аЫе

Рис.

ln our ballerv of i IDO\\ioJ> tests tЩ, Saшosoo scored 9 or аЬО\-е оо each. Thc 6ne hlacks 111m е\'еП large \\'eeds iolo tioy cunings, perfect for compostiog or salad gamishes.

ln our ballerv of i mo\\ing tests, the Sampsoo scored 9 or аЬо'" оо е асЬ. The 6ne Ыades tum even large \\'eeds ioto tioy cuttings, perfect for compostiog or salad g....USЬ.,s.

The latest nюdd of tЩ, Chinook mower is а big impro\•emeot over 1ast year's modeJ lt's smooth 8)idiog actioo is ped'cct for e\'<D massively O\'et g>O\\'D sod lts haodling around cO'I'De'l's is superЬ -- perfect for those tigЬt areas arouod sofas and coffee taЫes

top

baseline

middle

bottom

1: CosmoFarmeт.coro s lndoor Mow~ Roundup

10.4. Свойство CSS vertical-align- эквивалент атрибута align тега <td>.

Когда в ячейке

используются отступы, ее содержимое на самом деле никогда не выравнивается по верхним

или нижним линиям границы: всегда есть промежуток, равный размеру отступа

Создание границ Свойство

CSS border

(см. разд. «Добавление границ~ гл.

работает с таблицами

так же хорошо, как и с другими элементами, но вам нужно кое-что помнить.

Во-первых, использование границ в стиле, который занимается форматированием

тега

<tab l е>, выделяет только таблицу, а не какую-либо определенную ее ячейку . ( td { border: lpx so l i d Ь l ack: }) образуется видимый интервал между ячейками сверху, как это показано на рис. 10.5. Во-вторых, при использовании границ в ячейках

Чтобы правильно управлять границами, вам необходимо понять принцип работы атрибута се ll spaci ng тега <taЬl е>, а также свойства CSS border-co ll apse. О Управление промежутком между ячейками таблицы. Если не указано другого, браузеры расставляют в таблице интервалы между ячейками около 2 пиксело в. Этот промежуток действительно заметен, когда вы задаете границы для ячеек.

296 В

Глава

CSS 2.1

доступно свойство

border-spacing,

10.

Форматирование таблиц и форм

которое можно использовать,

чтобы контролировать размер этого промежутка. Однако поскольку Internet

Explorer версии 7 и ниже не поддерживает его, лучше используйте атрибут spaci ng тега <tab l е>. Вот код на HTML, который вставляет промежуток ши риной 10 пикселов между всеми ячейками: <taЬle cellspacing="lOpx"> (при се ll

установке значения равным О все интервалы исчезают полностью, но если вы

этого и хотите добиться, то лучше используйте свойство

CSS border-co ll apse,

которое мы обсудим дальше). О Удаление двойных границ. Даже если вы уберете промежутки между ячейками, границы, заданные для ячеек, будут удваиваться. Это происходит потому, что

нижняя граница одной ячейки добавляется к верхней границе лежащей внизу ячейки, и в итоге образуется линия, которая в два раза толще заданной ширины

границы (см. рис.

10.5, посередине).

Самый лучший способ избавиться от этого

(а также избавиться от промежутков между ячейками) -использовать свойство

border-coll apse. Оно может принимать два значения- separate и coll apse. Зна separate эквивалентно тому, как обычно и отображаются таблицы: с про

чение

межутками между ячейками и двойными границами. Задавая окаймление гра

ниц таблицы, можно избавиться от интервалов и двойных границ (рис.

10.5,

в1tuзу). Используйте значение со ll apse в стилях для форматирования таблиц: taЬle

border-collapse: collapse: }

J===BI'3=вd=~'~3

Chinook 'Push---o--mallc-----' $24 i.OO _Jndoor ~ower

Power Soвrce (

MU.i-Re>iew

\.. 4he latest modcl of the СЬiьооk mower is а Ьig impro'~ ~ver MecЬaoical

ТаЬiе

last year's modeL It's smooth gliding actioo is pettect for evm massivdy over grown sod Its handliog aroond comers is supetЬ .. per(ect for those tigЬt areas around sofas and coifee tahks.

1: CosmoFarmer com's lndoor Mo\\·er ROUIIdup

Г\ в

....d

Chinook Push-o-malic Indoor :\1o"·er

\.. J Price

$247.00

Power Soarce

MecЬaoical

Т аЬ!е

Braвd

Chinook Push-o-malic Indoor ~O\\'er

Тhе latest model of the СЬiьооk IDO\\'et is а Ьig imprO>-=enl over last year's model. It's smooth gliding action is perfect for е-·еп massnoe!y O\'er gro\\'D sod. Its handliog around coroers is supaЬ -perfect for those tigЬt areas around sofas and co:tfec taЬk:s.

1: CosmoF anner com' s Indoor Mower ROUIIdup

Price

Power Soarce

$2-Н.ОО

Mcchanical

ТаЬJс,

M.iai-Re>iew

M.iвi-Re>iew

Тhс latest шоdе1 of the Chinook mower is а Ьig improverneol over last year's model. lt's smooth gliding action is perfect for even massn'ely O\'ef grown sod. Its handling aroood comers is superЬ -perfect for those tigЬ1 areas around sofas вnd coffee tables.

!· CosmoFarmer.com's lndoor Mower Roundop

Рис.10.5. Браузеры обычно вставляют nробелы между всеми ячейками в таблице

297

Соэдание стилей для таблиц

ВНИМАНИЕ ------------------------------------------------- НТМL-теги, которые используются для создания таблиц, также содержат атрибуты, выполняющие

те же задачи, что и

CSS.

Атрибут Ьогdег может добавить границу к таблице и к любой ее ячейке.

В целом вам следует избегать использования этих атрибутов:

CSS может сделать эту работу намно

го лучwе, и для этого понадобится гораздо меньше кода.

Применение стилей к строкам и столбцам Добавление чередования затемненныхинезатемненных строк в таблицу, как на рис. 10.6,- это всего лишь один из обычных способов оформления таблицы. Изменив внешний вид каждой строки в таблице, вы позволите посетителям четко видеть нужные им данные. К сожалению,

CSS (по крайней мере, с этой точки зре

ния) не позволяет нам сказать: «Сделай так, чтобы каждая строка в таблице выгля дела таким образом!•

lnslgn~

Player URW [Oyptlenne

si.Ьs~lf

C..nildaT~

slaЬurlf

URW++

Яlosofla

ur11 seril

tmlgre Unotype Linotype Monotype Monotype Emigrt lntellecu Oeslgn Sitstrum FontMeso Font Garden CO<fodlne Fonts

Unotype Oldot N•w C.ntury Schooll>ook

== 3

.Е

Рмс.

setif

·~"'

"-rpetua Onl')l

serif

Pltttl•t Erued l)'pewrit•r 2 Eltgrawn Old Enoll•h

monosJW:c.ed

Вlock

"-ul

bl&ckltttor blкklettor

Ntм

scrlpt scrlpt scrlpt

Кldwrltlng

SWan Song

10.6. Благодаря

mono.p;ac~

c..n.doT~

= = ~ ~

1= . =

чередующемуся изменению фонового цвета строк намного nроще следить за всеми данными из строки целиком

Простое решение- применять класс вида

<tr

class~"odd"> к каждой строке,

а затем создавать стиль для форматирования этой строки:

.odd { background-color: red: } Вы также не ограничены цветами. Можно использовать фоновые изображения (см. разд. •Фоновые изображения» гл. 8) д!IЯ создания более утонченного вида, например легкого затемнения строки таблицы с заголовками, как на рис.

10.6

298

Глава

(вы увидите похожий пример в обучающем уроке

10.

Форматирование таблиц и форм

1 этой главы). Вы можете также

использовать селектор для каждой ячейки в этой строке. Это очень удобно, когда

вы применяете стили ко всем ячейкам в одном столбце, используя для каждой определенный стиль и вид, например

<td с 1ass="pri се">. Чтобы создать особый вид

для ячейки, когда она расположена в нечетной строке, создайте стиль с таким се лектором:

. odd . pri се.

ПРИМЕЧАНИЕ----------------------------------------------- Узнатъ о том, как воспользоваться более быстрым решением с помощью CSS

3, вы сможете позже в этой

книге. Но этот метод работает только в некоторых браузерах, так что есть смысл обратить внимание и на другой, использующий

JavaScript для

создания чередующихся затемненных и незатемненных

строк в таблице. Более подробную информацию вы найдете на странице

www.creativepro.com/

article/view-source-javascript-desigпers.

В процессе форматирования столбцов надо немного схитрить. В

HTML есть теги

<со 1group> и <со 1>, указывающие на группу столбцов и на один отдельный столбец соответственно. Вы можете добавить по одному тегу <со 1>для каждого столбца в таб лице и далее идентифицировать их с помощью класса или

(см. НТМL-код

в разд. << Правильное использование таблиц~ этой главы). Для этих тегов есть только два вида свойств:

width

и свойства фона

(background-

и т. д.). Однако и они могут быть очень полезными. Когда вы хотите установить ширину всех строк в столбце, то можете пропустить все ат

co1or, background-image рибуты

HTML и просто

применить к столбцам стиль, используя стиль, применен

ный к тегу <со 1>.Скажем, у вас есть следующий кусок кода

HTML: <со 1 i d="pri се">.

Вы можете добавить этот стиль к таблице стилей и установить ширину каждой ячейки в данном столбце равной

200

пикселам:

#pri се { wi dth: ZOOpx: } Похожим образом тег <со 1group> группирует вместе несколько столбцов. Когда

вы устанавливаете ширину в этом теге, браузер автоматически устанавливает ее

для каждого столбца из группы. В таблице, содержащей расписание самолетов, может быть несколько столбцов, в которых будет отображаться различное время вылета самолетов из Бостона в Чикаго. Вы можете воспользоваться тегом <со 1group>,

чтобы сгруппировать эти столбцы и указать для них <со 1group

i d= "dates ·· >.

для идентификации:

Затем, чтобы установить для каждого столбца ширину

1О

е т,

вы можете создать следующий стиль:

#dates{ width: lOem: } Несмотря на то что свойство

wi dth

здесь используется только в теге <со 1group>,

браузер на самом деле использует это значение

- lOem -

в каждом столбце из

группы.

Чтобы выделить столбец, вы можете воспользоваться свойствами фона. И сно ва считайте, что у вас есть тег <со 1>, к которому применен идентификатор

#price { background-co1or:

#FЗЗ:

pri се:

}

Имейте в виду, что фон в столбцах помещается под ячейками, поэтому, если вы установите фоновый цвет или рисунок в тегах виден.

<td> или <th>, фон столбцов не б у дет

299

Соэдание сrилей для форм

Создание сrипей дпя форм Веб-формы -это основной способ общения пользователя с сайтом . Передав ин формацию в форму, вы можете подписаться на новости, поискать какие-либо

товары в базе данных, ввести изменения в профиль или з::..казать набор конструк торов -«Звездные войны• , о котором уже давно мечтали. Совсем не обязательно, чтобы ваши формы выглядели так же, как и большинство других форм в Интер нете. Применяя

CSS, вы

можете создать стили для полей ввода, чтобы они вы

глядели так же, как и другие элементы сайта : использовали те же шрифты, фоно

вые изображения и поля. Нет никаких отдельных СSS-свойств для форм, но вы

можете использовать практически любое из описанных в этой книге свойств и для элемента типа ~форма•. Результаты тем не менее могут быть различными (рис.

10.7). lnternet Explorer 8

"_.

Firefox 3 1

IONТS

........

!/t(~(1

,. FON'ТS · ·

. .ц

••• •• ••

! н,..._,..,.,..._

........._.._

, ... .., 11:)t1 AREA

.....

Satari 3

! ,_..._.

ТЕХТ

ii .._.. ,__ --·-

rООМЕА

-- ·

_;1

---~--

! --~

· . .!i841Т

...

i ca..

,_~

- ,···.. .. :.. i1 .... ~

~-~f '

м;.

_" Q -а

-..

1-в!·

· '""

....

-r----~

---

... г-=;:

·1

---------- ·---r----1·

w-t · - ··

-- ---

--·-

........ .

..... _ ..,.....

-~·

Рмс. 10.7. Возможности по форматированию полей ввода с помощью стилей варьируются от брауэера к брауэеру: интерфейс lnternet Explorer (слева), Firefox (посередине) и Safari З (справа)

300

Глава

10.

Форматирование таблиц и форм

Поддержка в браузерах форматирования форм сильно различается.

Safari 2

ограничивается использованием стилей только для некоторых элементов формы,

таких как текстовые поля и теги <fi е l dset> и <l egend>. Он не позволит вам изменить внешний вид кнопок, флажков, кнопок-переключателей или выпадающих меню.

Но с появлением Safari

3 компания Apple, кажется, сдает позиции. В этом браузере

не могут быть стилизованы всего лишь несколько элементов, таких как шрифты

в выпадающем меню . В

Internet Explorer и Firefox некоторые элементы могут вы Internet Explorer поддерживает фоновые цвета, границы во переключателей, а Firefox - нет. Самое лучшее , что вы можете

глядеть по-разному.

круг флажков и

сделать, -это очень внимательно разрабатывать формы и не ждать, что они будут

выглядеть одинаково во всех браузерах. В следующем разделе будет рассказано, какие свойства с какими тегами работают лучше, а также будут перечислены брау зеры, которые правильно их интерпретируют.

ИНФОРМАЦИЯДЛЯНОВИЧКОВ

Придерживайтесь одного и того же стиnя при оформлении форм Даже если бы nоддержка форм, оформленных с ис

это может nривести к тому, что у nользователей воз

nользованием

CSS, не варьировалась от браузера к браузеру (см. рис. 10.7), есть еще несколько nричин,

никнут некоторые затруднения nри ее заnолнении.

по которым надо с осторожностью подходить к измене

Добавив точечную границу к какому-либо nолю на фор

нию nривычных и узнаваемых элементов интерфейса,

ме, вы можете добиться того, что nользователь nросто

Submit (Отправить) или раскрыва

не будет обращать на него внимания и будет его nроnус

таких как кноnки

кать (см. nримеры на рис. 10.7, внизу по центрун внизу

ющиеся списки.

справа). Если это текстовое поле nредназначено для Большинство nользователей уже nривыкли к тому, как

ввода адреса электронной почты, на который вы будете

выглядят и работают формы. В целом внешний вид

отправлять новости, можно в итоге потерять несколько

кноnки SuЬmit (Отравить) остается таким же от сайта

пользователей ииа того, что они его просто nроnусти

к сайту. Когда люди видят ее, они уже знают, для чего

ли. И напоследок- удостоверьтесь, что nользователи

nредназначена эта кноnка и как ею nользоваться. Если

nонимают, что перед ними размещена именно форма

вы слишком сильно измените внешний вид формы,

для ввода данных, а не что-либо иное.

Элементы НТМL-форм Большой выбор НТМL-тегов позволяет вам создавать формы. Некоторые из них форматировать проще (например, текстовые поля), некоторые- сложнее (кноп ки). Рассмотрим несколько простых тегов для форм, а также типы свойств, с кото рыми они работают. О

Fieldset.

Тег <fie l dset> предназначен для группировки элементов, связанных

друг с другом. Большинство браузеров нормально отображают фоновые цвета,

фоновые изображения и границы для этого теrа. Однако в

Internet Explorer фон

может выходить за границы верхней линии тега (посмотрите на верхнюю часть среднего изображения на рис.

10.7, нас интересует левый столбец). При исполь

зовании отступов появляются пробелы между верхними границами тегов

301

Соэдание стилей для форм

<fi е l dset> и их содержимым (несмотря на то что Internet Explorer, к сожалению, игнорирует отступы сверху, вы можете применить сверху свойство margi n к пер вому элементу тега <fi е l dset> ). Legend. Тег <l egend> идет за тегом <fi е l dset>, и в нем содержится название для группы. Оно появляется в центре верхней границы тега fi е l dset. Если в теге <fi е l dset> хранится, например, адрес доставки, вы можете добавить такой тег: <legend>Shipping Address</legend>. С помощью CSS вы можете изменить свой ства шрифта тега <legend>, добавить фоновые цвета и изображения, а также

определить собственные границы. О Текстовыеполяввода. Teги<input

type="text">(<input type="text" />вХНТМL), <input type="password"> (<input type="password" />)и <textarea> создают тексто вые поля в форме. Эти теги лучше всего поддерживаются браузерами. Вы мо-

жете изменить размер шрифта, тип шрифта, цвет и другие свойства текста в по

лях ввода, а также добавить границы и фоновые цвета.

Internet Explorer, Firefox Opera также позволяют добавлять фоновые изображения в текстовые поля; в Safari 2.0 такой возможности нет. Вы можете задать ширину этих полей с по мощью СSS-свойства wi dth. Однако свойство hei ght поддерживается только тегом <textarea>. и

О Кнопки. Кнопки на форме, такие как <input

/> ),

type="submit "> (<input type="submit"

позволяют вашим пользователям передавать данные в форму, очищать со

держимое формы или предпринимать какие-либо другие действия. Хотя брау

зер Safaгi

2.0 и его более ранние версии не поддерживают этого форматирова - вы

ния, другие браузеры предоставляют вам очень богатые возможности

можете создавать границы и изменять фон. Вы также можете выравнивать текст

на кнопке по левому или правому краю либо посередине с помощью свойства

text-al ign. О Раскрывающиеся списки. Списки, созданные с помощью тега <se l ect>, так же можно форматировать, используя стили. В Safari 2.0 это ограничивается возможностью изменить тип шрифта, цвет и размер, в то время как большин

ство браузеров позволяют вам устанавливать фоновый цвет, изображение игра ницы.

ВНИМАНИЕ------------------------------------------------- Чтобы узнать дополнительные результаты работы других браузеров при использовании

CSS

для

формирования элементов формы, посетите страницу www.456Ьereastreet.com/archive/200701/styliпg_ form_coпtrols_with_css_revisited. Если у вас есть свободное время, зайдите на сайт заядлого дизайнера Кристофера Шмидта (Christopher Schmitt) (www.webformelements.com). Здесь вы найдете 3520 скриншотов элементов форм в Мае 05, Windows, сделанных в различных брауэерах. Наконец, вы можете бесплатно скачать главу книги CSS CookЬook Кристофера Шмидта, которая включает 164 (да, именно столько!) страницы с ин формацией о стилизации форм и примеры: http:f/oreilly.com/catalog/9780596527419/appendixd/ appd.pdf.

О Флажки и переключатели. Большинство браузеров не позволяют применять форматирование к этим элементам.

Opera

тем не менее дает возможность

302

Глава

10.

Форматирование таблиц и форм

увидеть фоновый цвет внутри флажка или переключателя.

Internet

Ехрlогег

добавляет фоновый цвет вокруг этих элементов. Поскольку браузеры сильно различаются в способе представления этих элементов страницы, лучше оста вить флажки в покое. ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ Атрибут: основной селектор поnей формы Когда заходит речь об оформлении форм, стили для

Если вы измените значение

тегов - 3ТО не единственная изюминка. В конце кон

дите стиль исключительно для кноnок.

text на suЬm1t, то созда

цов, текстовые поля, переключатели, флажки, поля для

ввода nа ролей и кнопки - все они исnользуют один

Поскольку lnternet Exploreг 7 и 8, Firefox, Safari, Chrome

Opera уже умеют работать с селекторами атрибу

и тот же HTML-тer <i nput>. Хотя ширина 200 пикселов

вполне nодходит для текстового nоля, скорее всего,

тов, вы можете сnокойно их исnользовать. Недостаток

вам не захочется, чтобы поле для установки флажков

состоит в том, что полЬ3ователи

было бы тэким же большим, поэтому вы не сможете

смогут увидеть ваши стилизованные элементы форм.

lnternet Exploreг 6 не

использовать тег чnput> для изменения ширины.

Но если это не nроблема (доnустиМ; ваш шеф исnоль

Самым лучшим, учитывающим кроссбраузерность,

зует IE 8 или вы nросто добавляете дизайнерские сти

способом форматирования исключительно тексто

ли, которые не затронут функциональность формы},

вых nолей ввода будет создание отдельных классов

свободно эксnериментируйте с этими полезными се

<;nput type•"text" class•"textfield" name•"email" />, и создание

зованы не только ДJIЯ элементов формы. Вы можете

для каждого из них, например

лекторами. Селекторы атрибутов могут быть исnоль применять селектор атрибутов nри создании стилей

стилевого класса для форматирования.

для любых тегов с каким-то оnределенным атрибутом. Однако вы можете воспользоваться nреимуществами

Вот nример селектора, исnользуемого для оформле

CSS- селектора ат

ния ссылок на сайт http://www.cosmofarmer.com/: a[href="http://www.oosmofarmer.oom"].

более совершенного селектора

рибутов, nозволяющего настроить внешний вид своей формы, не обращаясь nри mм к классам. Он отбирает теги HTML на основе одного из атрибутов тега. Атрибут type отвечает за определение того, какой тиn 3Лемен та формы создается в теге <1 nput>. Значение этого тиnа для текстового nоля ввода - text. Чтобы создать

В CSS 3 вероятно исnользование даже более продвину

стиль, который будет изменять фоновый цвет всех од

(например,

тых селекторов атрибутов: планируется ввести возмож ность выбора атрибутов, значения которых начинают ся с какого-либо оnределенного текстового значения

http: 11) или которые заканчиваются ка

нострочных nолей ввода на синий, вам необходимо соз

ким-либо оnределенным текстовым значением (на

датьследующий селектор и стиль: lnput(type•"text"J

nример,

{ background

прочитаете nозже в книге.

color : Ьl ue :

Комnоновка форм с nомощью Все, что надо для создания формы,

jpg или .pdf).

Более nодробно об этом вы

CSS

добавить несколько фрагментов текстовых

и других элементов на веб-страницу. Однако зачастую визуально это получается беспорядочно (рис.

10.8, слев~).

Формы обычно выглядят лучше, когда запросы

и nоля ввода расположены в виде столбца (см. рис.

10.8, справа).

Вы можете добиться этого несколькими путями . Наиболее простой способ таблицы

HTML. Хотя

поля ввода и надпись

это не просто набор данных для

303

Соэдание сrилей для форм

Fl'tiNIМ

Fnlмmt

~·~·~,------------------~

Yrtle-

Слs•~"~~:~-.

~ f\ toundi•юt~

r ctf'wlting 11rm r- ottttr

Strн1addt~1

O.vant:ltlon

nor.pю&

foul\dlc\01'1

t0fisu!1"'9 flrm

Г'

othtr

&tttlacsdl...

С•у

Slt!t

....оу

г . - - - - - - - - - - - - - - - - - - -- :

Upo-pott•ltoelt"

IWO<Jid pt'ffer lottct.,. lr~tJOn "',~ t' E~ot

s-..]

v.... p._. ...

< Г• ) г- е~ г 1 Г 1 г-----'

1~'О~ pttftlf IO I•Ct'Jft ~~011 'fl~ t'"

ЬI'N!I (" Ft.t

,s.-J

Рис. 10.1.'Иногда элементы формы не очень хорошо комnонуются с текстом, это nриводит к тому,

что они расnолагаются зигзагом (слева). Решением данной nроблемы может стать расnоложение ваших элементов в столбец (справа)

таблицы, они хорошо приспосабливаются к расположению в формате столбцов и строк. Просто расположите надписи (Имя, Номер телефона и т. д.) в одном столб це, а поля ввода формы

в другом. Используя

форму с двумя столбцами, как на рис.

10.8 (как

CSS,

вы также можете создать

преимущества- меньше кода на

HTML). Рассмотрим простой вариант этого. 1. Помещайте каждую надпись в тег. Очевидным выбором для этого будет тег <label>, так как он и был разработан для надписей. Но вы не можете всегда ис пользовать только его. Рядом с переключателями обычно располагаются вопро сы типа «Какой ваш любимый цвет?~ , а между кнопками помещается тег <l аЬе l >.

Какой же тег вы будете использовать для создания такого вопроса? Вам следу ет обратиться к тегу

<span>: <span>What' s your favori te со l or?</span>. Затем до <span с l ass;"l аЬе 1" >и присоедини те класс только к тем тегам <l аЬе l >, которые хотите видеть в левом столбце (на рис. 10.8 это были бы метки для First name, Last name и т. д., но не теги <l аЬе l >для переключателей ). бавьте по классу для каждого из этих тегов:

ВНИМАНИЕ-------------------------------------------------

Посетите страницу тега <laЬel>.

www.htmldog.com/guides/htmladvanced/forms/,

чтобы получить быстрый обзор

304 2.

Глава

10.

Форматирование таблиц и форм

Сместите надписи и измените их ширину. Секрет этой техники заключается

в создании стиля, который будет смещать надписи к левому краю и изменять их ширину. Значение свойства

wi dth

по возможности должно учитывать необ

ходимость размещения всей надписи в одну строку. Вы можете создать класс

со стилем, который будет выглядеть приблизительно так:

.l abel { fl oat: l eft: width: 20em: Свойства wi dth и

fl oat помещают надписи в небольшие блоки одинакового раз

мера, и в результате следующие за ними поля формы выравниваются по право му краю надписей.

Настраивайте стиль. Еств еще несколько улучшений, которые вы можете ис

пользовать для завершения работы. Вы можете выровнять щ:е текстовые над писи так, чтобы каждая из них появлялась за каждым полем ввода на форме.

Кроме того, если вы добавите свойство с l е а r:

l eft,

то избавитесь от вежела

тельного смещения и надписи будут размещаться одна под другой. И наконец, вы можете воспользоваться выравниванием по правому краю, разместив не

большие пробелы между надписями и полями ввода .

. l abel { fl oat: l eft: width: 20em:

text·align: right; clear: left; margin·right; 15рх; В итоге вы получили аккуратную форму. Можете добавить и другие улучшения, выделив, например, надписи полужирным шрифтом и изменив их цвет. В обу чающем уроке

2 этой

главы находится пример, в котором пошагово расписаны

все необходимые для этого действия. ВНИМАНИЕ------------------------------~------------------- Если вы хотите получить вдохновение и увидеть несколько интересных дизайнерских решений для форматирования веб-форм, посетите страницу www.smashiпgmagaziпe.com/2006/ll/ll/css-Ьased

forms-moderп-solutioпs, где демонстрируются всевозможные диэайны форм, основанные на исполь зовании

CSS.

Обучающий урок

соэдание стилей

для таблиц HTML

отлично подходит для создания таблиц, но вам необходим также и

CSS

для создания стилей. Как вы можете видеть в раэд. «Правильное использование

таблиц!> этой главы, для создания таблицы на

HTML достаточно

простого кода.

Обучающий урок

305

1: соэдание стилей дnя таблиц

Скачав материалы для уроков, вы найдете уже готовую НТМL-таблицу, на ко торой можете потренироваться в использовани и

CSS.

В этом уроке вы измени

те форматирование строк, столбцов и ячеек таблицы, замените используемый в них шрифт более при влекательным, а также зададите фоновый цвет. Чтобы п риступить к работе, загрузите файлы для этого урока, расположенные по ад ресу

www.sawmac.com/cr.s2e/. Файлы для

10\taЬie.

этого учебного урока находятся в папке

Загрузите браузер и откройте в нем файл taЫe . html.

Эта страница содержит простую таблицу

HTML.

У нее есть заглавие, строка

табличных заголовков и девять строк с данными, содержащимися внутри ячеек

таблицы (рис.

10.9).

Кроме того, тег <со 1> используется три раза для определе

ния трех столбцов с данными. Как вы скоро увидите, <со 1> является полезным тегом для стилизации, поскольку он позволяет устанавливать ширину всех яче

е~ в столбце. <taЬie

id="inventory" >

ТаЫ~

1: CUrтeot lnvcotory Pritt

Product

***** *** ***** ** *** * **** **** *****

$19.95 Sl4~5

Pri~Jess

S29.9S S1S.99 $82.00 S1.9S

S!7.9S Venenatis Non Adipisciog

1 col id="product">

Ra.t1n&

$44.00

<caption> <th> (шаnка таблицы)

<td> (ячейки таблицы)

1 1 <col id="price"> <col id="rating"

PROOUCТ

Vltae Q\J4m

S19.95

ln Tempus Vellt

s1~.ss

a.-m tpsum Dolor Sat

Pliceless

QJ11 Fells Frl"91lta

S29.9S

Nunc Sem Ptwetra

S75.99

Ve\ f4uc1Ьus Etlt

S82.00

нсn

Adlplsclna Vitae

S1.95

Aenean Orcl Ante

S17.9S

Vel>eмt1s

ж.оо

Рис.

Non AdlplscJna

**** **** *****

1 0 .9. Примени в форматирование таблиц с исnол ь30ванием границ, фоновых цветов

и других свойств CSS, можно не nросто nреобра3овать скучные Нl'МL-таблицы (вверху), но и расположить данные в таблице в более читабельной форме (вниэу)

306 2.

Глава

Откройте файл tаЫ е.

html

10.

Форматирование таблиц и форм

в текстовом редакторе.

Для начала создадим стиль, который задает ширину таблицы и используемый

шрифт. К этой таблице применим идентификатор использовать селектор

i nventory, так что вы можете ID для форматирования только этой таблицы.

ВНИМАНИЕ------------------------------------------------- С данной таблицей также nосrавляется несколько внешних стилей, но вы добавите новый в виде внутренней таблицы стилей.

Поместите курсор между открывающим и закрывающим тегами

<style>

и до

бавьте следующий стиль:

#inventory { font-family: "Trebuchet MS". Arial. Helvetica. sans-serif: width: 100%: Если вы не установите ширину таблицы, она растянется по размерам содержи мого. В данном случае мы установим ширину, равную

100%,

чтобы таблица

растянулась по всей ширине содержащего ее тега <di v> (это область, содержащая заголовок Welcome to the Lorem Ipsum Store и саму таблицу). При изменении шрифта в теге <tab l е> используется наследование, чтобы изменился шрифт и во всех остальных тегах внутри страницы-

и т. д. Далее соз

дадим стиль для заглавия таблицы.

Добавьте еще один стиль после только что созданного для таблицы:

#inventory captiQn { text-align: right: font-size: l.Зem: padding-top: 25рх: Этот наследуемый селектор влияет только на тег ется внутри другого тега с идентификатором

странице). Тег

<caption>, который появля i nventory (это <tаЫ е> на нашей

<capt i on> сообщает о содержимом таблицы.

В нашем случае он

не должен быть в центре внимания, поэтому мы оставили шрифт маленьким и перенесли сам текст к правому краю. Свойство

paddi ng- top добавляет немно

го пространства над надписью, двигая ее (и таблицу) еще ниже под заголо вок.

ПОДСКАЗКА---------------------------------------------- Если у вас есть текст над таблицей и вы хотите сместить_ его и таблицу вниз от элемента над ней,

ИСJ'Iользуйте только отступ для тега

<caption>.

Свойство

margin

ной причине: если вы добавите верхнее nоле для тега <taЬie>,

не будет работать по одной стран

Firefox

вставит nромежуток между

текстом и таблицей правильно, в то время как осrальные браузеры добавят этот промежуток над текстом. Если вы nonьrraeтecь добавить поле вверху

<caption>, Firefox сделает это правильно, IE Safari добавит промежуток между текстом и таблицей. Единственным надежным является использование верхнего отступа для тега <caption>.

проигнорирует, а mособом

Обучающий урок

307

соэдание стилей для таблиц

Когда вы читаете одну из строк в таблице, очень легко сбиться. Необходим хо роший визуальный ориентир. Если мы добавим границы вокруг ячеек, они ви зуально выделят информацию.

Добавьте еще один групповой стиль:

#inventory td. #inventory th font-size: 1.4em: border: lpx solid #008575: Селектор предназначен для форматирования тегов заголовков таблицы и ячеек

( <td> ),

( <th>)

он уменьшает размер шрифта и рисует границу вокруг кажДого

заголовка и каждой ячейки. Как правило, браузеры помещают пробелы между всеми ячейками, поэтому вокруг границ и появляются небольшие промежутки (рис. 10.10, выделено кружком.). Из-за них . земистой. Сейчас мы это исправим.

вся таблица выглядит какой-то при-

Vltae Q!Jam Lorem

$19.95

ln Tempus VeLtt

$14.55

Lorem lpsum DoLor Sat

qnceLess

Quts FeLts FrlngtLLa

29.95

Nunc Sem Pharetra

S75.99

VeL Faucibus ELtt ~

:::·~~-

___-: ·_-_-:_-_

.:-_-

---~·.:-_-_

:::. :-_ -_

r -

$82.00

, ; . -__

• Non Adtptsctnв Vltae

у--

$1.95

Aenean Ord Ante

$17.95

Venenatls Non Adtptsdn&

$44.00

$19.95

ln Tempus VeLtt

$14.55

Lorem lpsum DoLor Sat

Prlceless

Quls Fells FrlngtLLa

$29.95

Nunc Sem Pharetra

S75.99

VeL Faudbus ELtt

$82.00

l-~~~-~·~·~-~-~~t~

$1.95

Aenean Orci Ante

$17.95

, Venenatls Non Adiplsctnв Рис.

10.1 О. Стандартное

***** *** ***** ** *** * **** **** ***** -·

Rattnв

Prtce

Product Vltae Quam Lorem

--- -------

Rattnв

Pr1ce

Product

$44.00

***** *** ***** ** *** * **** **** *****

- ----------·· --

-·

отображение таблицы в брауэере с пробелами между ячейками (вверху).

На месте их соприкосновения граница удваивается. С помощью свойства решаются обе эти проблемы (внизу)

border-collapse

308 6.

Глава

Добавьте свойство

10.

Форматирование таблиц и форм

border-co ll apse в стиль, который вы создали в шаге 3. Теперь

его содержимое будет таким:

#inventory { font-family: "Trebuchet MS". Arial. Helvetica. sans-serif: width: 100%: border-collapse: collapse; Свойство

border- со ll apse убирает промежутки между ячейками. Оно также спо

собствует тому, что соприкасающиеся границы ячеек сливаются в одну, что

избавляет таблицу от то.лстых, некрасивых границ. Если не воспользоваться свойством

border-collapse, то

нижняя граница заголовка таблицы соединится

с верхней границей ячеек таблицы, это приведет к тому, что граница удвоится и ее толщина будет равняться

2 пикселам. Если вы.сейчас взглянете на таблицу,

то увидите, что данные в ней выглядят намного лучше, но информация в каждой

из ячеек немного сжата. Добавим небольшой отступ, чтобы избавиться от этого.

Добавление отступов к групповому селектору, созданному в шаге

#inventory td. #inventory th font-size: 1.4em: border: lpx solid #DDB575: padding: Зрх 7рх 2рх 7рх; Хотя верхняя строка таблицы с заголовками и выделяется из-за использования

в ней полужирного шрифта, вы можете сделать так, чтобы она выглядела еще ярче и нагляднее.

Создайте новый стиль после стиля

td. th;

он будет использоваться только для

форматирования заголовка таблицы:

#inventory th { text-transform:uppercase: text-align: left: padding-top: 5рх: padding-bottom: 4рх: Этот стиль является отличным примерам использования каскадности. Группо

вой селектор td. th определяет общие свойства форматирования для двух типов ячеек. Введя стиль, предназначенный только для тега

<th>,

вы в дальнейшем

сможете использовать его для изменения внешнего вида заголовков таблицы. Например, свойства

padding-top

padding-bottom здесь заменяют аналогичные

настройки, определенные в селекторе в шаге

Но, поскольку вы не переопре

деляли настройки левого и правого отступа, теги каждого из отступов, определенных в шаге

<th>

сохранят

пикселов

Этот стиль также изменяет все

буквы на прописные и выравнивает текст по левому краю ячейки.

Обучающий урок

309

соэдание стилей для таблиц

Заголовки таблицы по-прежнему не выглядят достаточно привлекательно, и, кроме того, складывается впечатление, что таблица размещена на фоне стра

ницы. Чтобы исправить положение, можно добавить фоновое изображение.

Измените стиль

th,

добавив в него фоновое изображение и изменив цвет

шрифта:

#inventory th text-transform:uppercase: text-a1ign: 1eft:. padding-top: 5рх; padding-bottom: 4рх; background: url(images/bg_th.png) no-repeat left top; color: #FFF; В этом случае мы получаем едва различимую заливку сверху вниз, а верхняя

и левая границы изображения от лично контрастируют с темной верхней иле вой границами ячейки, в результате чего она выглядит объемной. СОВЕТ---------------------------------------------------Кстати, вы могли nросто изменить фоновый цвет, чтобы добиться такого же эффекта.

Когда в таблице хранится слишком много данных, расположенных в множестве строк и столбцов, иногда бывает трудно определить, к какой строке какие дан

ные относятся. Одним из возможных решений такого рода проблемы, которое часто используют дизайнеры, является чередова1lие цвета строк. Этого эффек

та вы можете добиться, используя для каждой последующей строки таблицы класс, описанный в стиле.

1О.

Добавьте еще один стиль во внутреннюю таблицу стилей вашей веб-страницы:

#inventory tr.a1t td { background-co1or: #FFF: Этот составной наследуемый селектор указывает применить форматирование для каждого тега

<td>,

находящегося внутри тега

<t r>,

к которому применен

класс а 1t, и только в том случае, когда они оба помещены внутри другого тега с идентификатором

i nventory.

Сам стиль сделает фон ячеек белым, но для того

чтобы он заработал, необходимо применить класс а 1t длЯ каждой иной строки.

11.

В НТМL-коде страницы найдите тег жащий следующий текст:

Vitae Quam

<tr>,

перед которым идет тег

Loгem. Добавьте в этот тег

<td>, содер <tr> c1ass="a1t",

и вы получите следующее:

<tr class="alt"> <td>Vitae Quam Lorem</td> Вам придется проделать это с каждой второй строкой. Заносить каждую строку

таблицы в отдельный тег может быть очень утомительно, особенно если вы

310

Глава

10.

Форматирование таблиц и форм

часто добавляете или удаляете их из таблицы. Чтобы попытаться автоматизи ровать этот процесс, воспользуйтесь небольшой программой на

JavaScript, ко

торую можно найти по адресу www.alistapart.com/articles/zebrataЬies/.

12.

Повторите шаг

11 для

всех остальных тегов

<tr>.

Возможно, вы захотите проверить страницу в браузере после добавления клас са к каждому

<tr>,

чтобы убедиться, что вы правильно размещаете все другие

строки таблицы. Наконец, нужно отрегулировать ширину ячеек, которые попадают под столб

цы

Price и Rating. Один из способов заключается в дотошном добавлении на

званий классов к тем ячейкам и создании стилевого класса с установленной шириной. Но лучше будет воспользоваться иреимуществом тега <со l >,который позволяет присваивать класс или идентификатор ячейкам столбца. Как вы

можете видеть на рис. и

rati ng.

10.9,

эти два столбца имеют идентификаторы

pri се

Вы можете легко установить ширину для них с помощью одного груп

пового селектора.

13.

Добавьте еще один стиль к внутренней таблиц·е стилей страницы:

#price. #rating width: lOOpx: Теперь ширина каждого из двух столбцов составляет

100 пикселов. Наконец IE 6 табли

таблица выглядит здорово во всех браузерах ... или почти во всех. В

ца выпадает со страницы. Когда для ширины таблицы установлено значение

100 %, IE 6 на самом деле делает таблицу немного большей, чем содержащий ее контейнер, который, в свою очередь, вынуждает таблицу теряться под левой боковой панелью. Об этой достаточно распространенной проблеме выпадания вы узнаете далее в книге. Но пока простым решением будет сделать таблицу немного меньше

14.

100 %.

Отредактируйте стиль #i nventory, используемый для форматирования таблицы, изменив значение его ширины на

98 %:

#inventory { font-fami ly: "Trebuchet MS". Arial. Helvetica. sans-serif: width: 98%: border-collapse: collapse: Сейчас таблица всего лишь чуть тоньше, чем ее контейнер, и выглядит коррект

но в

IE 6

(если вы не хотите, чтобы таблица была тоньше в других браузерах,

можете использовать специфичный для

98% только для

IE 6 стиль, устанавливающий ширину

этого браузера,- позже будет рассказано об этой методике).

Откройте страницу в браузере. Она должна выглядеть так же, как и страница, изображенная на рис. lO_finished\taЬie.

10.9, внизу.

Вы также можете найти готовый пример в папке

311

Обучающий урок 2: соэдание стилей дnя форм

Обучающий урок для форм

2: соэдание стилей

В этом уроке вы узнаете, как с помощью

CSS

привести форму в порядок, а также

сделать ее более привлекательной. Если вы откроете в браузере страницу form . ht ml из папки

10\form, то

увидите, что в ней есть простая форма для подnиски на вы

мышленном сайте CosmoFarmer.com (рис.

10.11 ). Форма задает несколько вопросов,

и в ней исnользуются несколько элементов ввода, таких как nоля , переключатели

и раскрывающиеся списки . Если рассматривать ее в качестве формы для подписки,

выглядит она вполне нормально, но слегка мрачновато. На следующих страницах

мы приукрасим шрифты, выделим вопросы и поля ввода, а также добавим несколь ко других улучшений.

806

Subscrib~

to CosrnoFarmer.com

http:/ /css.loalftutorials/chapt~r.10/form/form.htm

(0.· Google

1(Ю 8ookmuks

'A'go: l's Your МоntЬ

lorem ipsum do!Of s~e

omet. Whot is your name?

Your~Ьock

lorem ipsum do1or йе

omet.

Whot is your email odd.ress? Rote your oportment forming sl::ills

1'hЬ Monlh's Slri•Y

locem ipsum dolor sne

omel.

О Novice О lntermediote О Advanced

Where did you heor oboul us? { ~t«ton~

lndoor lowns: sod or seed? Locem ipsum dolor sRe

omet.

!. . . .______.

Any odditionol comments? ...

Lor•mlpsum

Lorem ipsum dolor site

omet.

( SubscrJЬe)

Oolor Slte omet lorem ipsum dolor sJ!e

omet. Adlplsclng eat Lorem II)Sum dolor sПе

omet. fWmod llncklunt

Cosmor-armEII со,-.• be1<eves '1101 yOIJ pn •О<=> 1s •mpo•ront tn'e<I'IO <On со lcc'c~ Ql\111~ ·· е s f<rtнted !о our < 1e!V,o•k о 9 872 po•·r.C о 1\lto!es ., ov• >n O!Jno••on ·"'' only Ье ho•ed O<"onQ •hem oncJ os ро1 of our ne•v.·p•k s on~-spot• pot,cy you "11 ье l•mrted !о соо e-mo:·нl per po•rne• othlю~e pE'r doy 110! •о ~;;r.ceed о torol о' о !!72 е r>'a•'s а do'{ 1' vou m~h ro opt ou! ol :Jщ p•oqram plea~ cotl '" beiW< E.n lhe hours о· 9 01-9·0Jom Gмr

Lorem ipsum doiOr sпе

omet.

Рис.

10.11. Тег

<taЬie> обычно исnольэуется для размещения воnросов на форме. Можно также

исnользовать CSS, чтобы создать бесnорядочно nеремешанный набор текстовых надnисей и nолей формы (как те, что вы видите на рисунке) и сделать раэметку формы более nонятной и nривлекательной

312 1.

Глава

Откройте файл

form.htm1

10.

Форматирование таблиц и форм

в текстовом редакторе.

Для этой страницы уже создана внешняя таблица стилей в отдельном файле, но

вы добавите несколько своих собственных внутренних стилей. Начнем с умень шения размера шрифта, используемого в форме.

Поместите курсор между открывающим и закрывающим тегами бавьте следующий стиль:

<sty1e>

и до

#subForm { font-size: .8em; У этой формы есть

ID - subForm, поэтому новый стиль изменяет размер шриф <form>.

та для всего текста, размещенного в тегах

Пришло время поработать над разметкой. Чтобыудобнее разместить элементы формы, воспользуемся двумя столбцами, в одном из которых будут находиться вопросы (текстовые надписи), а вдругом-ответы (поля формы).

Добавьте еще одну внутреннюю таблицу стилей:

#subForm .1аЬе1 fl oat: 1eft; width: 230рх; Этот нисходящий селектор используется для всех элементов класса

. 1аЬе 1, рас 230 пикселов, а все элементы fl oat позволяет сместить все эле

положенных на форме. В стиле задается ширина смещаются влево. Запомните, что свойство

менты к одной из сторон содержащего их блока. Плюс ко всему оно позволяет задавать ширину, а также заставляет все элементы, использующие этот стиль,

приспосабливаться к ней. В результате после использования этого стиля для каждого вопроса из формы вы получите выровненный по ширине столбец. Что бы оценить полученный результат, вам необходимо применить созданный класс для соответствующих элементов на форме.

Найдите в НТМL-коде страницы текст <1abel for="name"> и добавьте class="label ",в итоге тег будет выглядеть следуЮщим образом:

класс

<1abel for="name" class="label"> Вы должны сделать то же самое для всех вопросов на форме.

Повторите шаг 4для следующихфрагментов

for="refer">, <label

HTML: <label for="emai l ">, <1abel

for="coiТdТlents">.

На форме есть еще один дополнительный вопрос

skills.

Он не размещен в теге

<labe1>,

- Rate your apartment farming

так как для ответа на него испо,11ьзуется

несколько положений переключателя, к.аждое из которых подписано отдельно.

Вам придется добавить тег <span> к тексту, чтобы можно было воспользоваться стилем

labe1.

Найдите текст

Rate your apartment farming skills и 1аЬе l:

поместите его в тег

пользующий класс

<span

class="laЬel">Rate

your apartment farming skills</span>

<span>,

ис

Обучающий урок

313

соэдание стилей дnя форм

~)9~.-~Р.: ..~-~~-~~~-~-~~-~~~Р.~~-~-~~~~---···: ................ Whot is your nome? Whot is your emoil oddress? Rote your oportment lorming skills Where did you heor obout us?

О Novice О lntermediote О Advonced

1SelectOne

Any odditionol comments?

1 SuЬscriЬe

What ls your name? What ls your email

addrнs?

'-------.....J

Rate your apartrnent farrnlng skllls О Novice О lntermediote О Advonced Where dld you hear .,.ь.ut us? 1Select One

Any addltlonal comments?

1 SuЬscriЬe 1 Рис. 1 0.12. Выделив вопросы на форме поnужирным шрифтом, а также выровняв их в соответствии с остальными элементами формы (внизу), мы поnучип и форму, которая выглядит намного nyчwe

Теперь вопросы размещены в отдельном столбце (рис. 10.12, вверху). Но они бы

выглядели лучше, если бы были немного смещены и выделены соответству ющим образом.

7. Измените стиль #subForm . l аЬе l, который вы создали в шаге 3, он должен выгля деть следующим образом:

#subF orm . l аЬе l

float: left: width: 230рх; marg;n-r;ght: lOpx: text-al;gn: r;ght: font-we;ght: Ьold:

314

Глава

10.

Форматирование таблиц и форм

Просмотрите страницу в браузере. Форма должна выглядеть так же, как и фор ма, изображенная на рис.

10.12, внизу.

Остался последний шаг. Текст вопросов

смещен влево, поэтому если один из них не будет помещаться в строке, следу ющий вопрос будет выравниваться справа. Исправьте это, воспользовавшись свойством

clear.

ВНИМАНИЕ------------------------------------------------- Вы можете видеть похожую проблему на рис.

7.12

и в гл.

Добавьтесвойствосlеаrвстиль#suЬFоrm

7 получить дополнительную

информацию.

.label:

#subForm .l abel fl oat: l eft: width: 230рх: margin-right: lOpx: text-align: right: font-weight: bold: clear: left: Форма выглядит уже намного лучше, но кнопка Subscribe, размещенная у левой границы, смотрится слегка не к месту. Выровняем ее, как и остальные элементы на форме.

Добавьте еще один стиль во внутреннюю таблицу стилей.

#subscribe { margin-left:

240рх:

У тега

<i nput>, который создает кнопку SubscriЬe, уже есть ID, равный subscri Ье, 240 пикселов и выравни ваем ее в соответствии с правым краем стиля #subF orm . l аЬе l. Многие браузеры поэтому этим стилем мы изменяем размер кнопки до

предоставляют также дополнительные возможности по оформлению кнопок, так что дерзайте.

10.

Измените только что созданный стиль кнопки SubscriЬe, добавив фоновый цвет и задав другой шрифт:

#subscribe { margin-left: 240рх: background-color: #CBD893; font-family: "Century Gothic", "Gill Sans", Arial. sans-serif; Вы можете даже изменить шрифт текста в раскрывающемся списке.

11.

Добавьте стиль для размещенного на форме списка:

#refer { font-family: "Century Gothic". ;,Gill Sans". Arial. sans-serif:

Обучающий урок

315

соэдание стилей для форм

В итоге текст вопросов и кнопка SubscriЬe выглядят великолепно, но зачем нам на этом останавливаться? Пришло время слегка приукрасить и поля ввода на форме. Начнем с изменения шрифтов и фоновых цветов.

12.

Создайте новый групповой селектор для трех полей ввода на форме:

#name. #email. #comments { background-color: #FBEF99; font-family: "Lucida Console", Monaco. monospace: font-size: .9em: После использования этого группового стиля фон полей ввода для текста (для

которых применен собственный идентификатор) станет светло-желтым, а так же изменится размер и тип шрифта, который будут использовать посетители при вводе текста. Поля ввода выглядят слегка тесными, а также кажется, что

они размещаются немного ниже соответствующих им текстовых обозначений. Исправить это посредством

13.

CSS проще простого.

Исправьте только что созданный стиль, изменив ширину и выравнивание по верхнему краю:

#name. #email. #comments { background-color: #FBEF99: font-family: "Lucida Console". Monaco. monospace: font-si ze: . 9em; wi dth: ЗООрх; margin-top: -2рх; Вы можете сделать форму более удобной для пользователей, выделив активные элементы с помощью специального псевдокласса стилизуемых ссылок!> гл.

14.

9).

: focus

(см. разд. «Выборка

Мы добавим его в следующем пункте.

В конце внутренней таблицы стилей добавьте стиль для раскрывающегося списка и трех полей ввода для текста:

#name:focus. #email :focus. #comments:focus. #refer:focus {

background-color: #FDD041: Псевдокласс

: focus на момент написания этой книги работает только в браузе Internet Explorer 8, Firefox, Safari и Opera. Однако он не вызывает никаких ошибок, поэтому, если вы будете использовать браузер Intemet Explorer 6 или 7, можете смело добавить стиль : focus в качестве улучшения внешнего вида. рах

Просмотрите страницу в браузере. Сейчас она должна будет выглядеть так, как на рис.

10.13.

316

Глава

806

SubscriЬt

10. Форматирование таблиц и

форм

to Cosmofarm~r.com

hnp://css.loalttutorlals/thapttr_lO_finlsмd/forrr.

(0.· Gщle Seii!Ch

Lo<•t1on

COSMOFARMEFf~~~ Your onllne guide to вpertment ferming

,,,

1#§1

..,"

~jg~ __t).p~-~-~~-~~~-~~-~~~-~!P.~~~.f~~-~............................. .

vtroo: ll's Уо&~ Monlll torem II)Sum ootor s4e

omer.

Wllat ls уо11 name?

Уо&~ feedЬock

Lorem 1psum oolot s~e

Whall• yow emol oddre ..?

omer.

lote уо11 opart.,..nllormlng skJIIs О Nov~ О lntermediclle О Ad\lonced

ТhlaМonlh'sSUrvey

torem II)Sum do!ot .sile

Where dld you Ь.оr oьoutus? { Setoct ом

omel. lndoorlowм: sod or seed7 torem 1psum do!ots~e

orner.

Any addltlonoJ comments?

l.ofemlp•um Lorem ~sum oo!or s~e omet. OOJor dte o.,..l Lorem ipsum oo!or sae omel

Adlp!Jclng ell torern ipsum dOIOr sJe

omel. blvnod nncldunt tO<em ipsum dOIOr s~e

j!J

:::::::~~~~~~~~~~~

( SUbroiЬe )

Cos<"oFormer.COfY' bel.eve> '1>01 yovr "'"осу •s rmpol1onl. ln iormoьon collectco ot lhis sote rs 1rr;ned to ov rr~!wo•l. о/9.812 ро •м• a•r. roa.>s Your informot,on w 1ll only Ьв sha<ed omong ohen1 ond os pqn of ov• IIC'•vork s onh-sponJ polocy yov w!ll Ье llrnltod lo o ne e-mool pcr par1net otloi>O'e рщ dOy no! 'о r'xceed о lotol о/9.872 e-motls о day. lf you w.zl1 ro opl oul of 'hl$ prog•om piEIO\~Cnll utьe~'>voer.ttt.: hours of9:01-?.0:!om GМГ.

omel. Со

Рмс.

t 2006. CosmoFormer.com

1 0.13. Исполь3уя псеедокласе :focus, вы можете сделать форму более интерактивной: будет подсвечиваться активное поле ввода. Здесь мы собираемся добавить текст в поле с комментариями, и его фоновый цвет выглядит темнее

Готовую версию созданной в этом уроке формы вы можете найти в папке

lO_finished\ form.

ЧАСТЬ

Макет страницы

Глава

11 .

Глава

12.

Введение в разметку

CSS

Разметка страницы на основе плавающих элементов

Глава

13.

Позиционирование элементов на веб-странице

Глава

14. CSS для

Глава

15.

Глава

16. CSS 3 -

распечатываемых веб-страниц

Совершенствуем навыки в

на гребне волны

CSS

Введение в разметку

11 css CSS

удобен при форматировании текста, навигационных панелей, изображений

и других элементов веб-страницы, но его по-настоящему потрясающие способно сти проявляются, когда нужно создать макет всей веб-страницы.

В то время как

HTML обычно отображает содержимое страницы на экране свер CSS позволяет вам создавать

ху вниз, размещая один блочный элемент за другим,

расположенные бок о бок столбцы и помещать изображения или текст в любом месте на странице (и даже наслаивать поверх других элементов), поэтому веб-стра

ницы имеют намного более интересный внешний вид. Разметка

CSS -

это достаточно обширная тема. Так, в следующих двух главах

вы подробно узнаете о двух наиболее важных техниках

CSS. А в этой главе я пред

лагаю краткий обзор принципов, на которых построена разметка, и немного полез ных инструкций для решения возникающих в процессе работы проблем.

Типы разметок веб-страницы Быть веб-дизайнером означает иметь дело с неизвестным. Какими браузерамп пользуются ваши посетители? Установлена ли у них последняя версия плагина

Flash Player?

Возможно, самая большая проблема, с которой сталкиваются разра

ботчики, состоит в создании привлекательных дизайн о в, учитывающих различные размеры экрана. Мониторы различаются размерами и разрешением: от маленьких 15-дюймовых с разрешением

640

экранов с разрешением примерно

х 480 пикселов до чудовищных 5 000 000 х 4 300 000 пикселов.

30-дюймовых

Неб-разметка предполагает три основных подхода к решению упомянутой про

блемы. Оформление практически каждой веб-страницы сводится к использованию одного из двух вариантов: с фиксирова'Н:ной либо с непостоятюй шириной. Фик сированная ширина дает вам наибольший контроль над разметкой, но может до

ставить неудобства некоторым посетителям. Людям с действительно маленькими мониторами придется прокручивать страницу вправо, чтобы все увидеть, а те,

у кого большие мониторы, будут видеть пустоту в части экрана, где могла полно стью отобразиться ваша превосходная страница. Использование непостоянной ширины (которая увеличивается или уменьшается, чтобы соответствовать окнам браузера) делает управление дизайном страницы серьезным испытанием, но при

319

Типы разметок веб-страницы

этом эффективнее используется окно браузера. Гибкий дизайн сочетает некоторые преимущества обоих типов. О Фиксированная ширина. Многие дизайнеры предпочитают плотно распреде лять страницу по ширине, как на странице на рис.

11.1, вверху.

Независимо от

ширины окна браузера, ширина содержимого страницы не изменяется. В неко

торых случаях страница ~цепляется» за левый край окна браузера или, что бы вает чаще, сосредотачивается посередине. С дизайном, основанным на фикси рованной ширине, вам не нужно волноваться по поводу того, что случится

с вашей страницей на очень широком (или маленьком) экране.

Многие страницы с фиксированной шириной придерживаются ширины экрана

менее

1000 пикселов, позволяя окну, полосам прокрутки и другим частям брау 1024 х 768. Очень рас пространенной является ширина 960 пикселов. Большинство сайтов имеют

зера подходить по размерам для экранов с разрешением именно фиксированную ширину.

ПРИМЕЧАНИЕ----------------------------------------------- Чтобы увидеть примеры диэайнов с фиксированной шириной, нацеленных на большие мониторы, зайдите на сайты

www.alistapart.com,

www.espп.com или

www.nytimes.com.

О Непостоянная ширина. Иногда легче плыть по течению вместо того, чтобы

бороться с ним. Свободный дизайн приспосабливается так, чтобы соответство вать любой ширине браузера. Ваша страница становится шире либо уже, когда посетитель изменяет размеры окна (см. рис. 11.1, посередине). Хоть этот тип дизайна наилучшим образом использует доступное пространство окна браузера, вам придется приложить больше усилий, чтобы убедиться в том, что страница хорошо выглядит при различных размерах окна. На очень больших мониторах такой тип дизайна может смотреться слишком размашисто, с длинными стро ками текста, неподходящими для их нормального прочтения.

ПРИМЕЧАНИЕ----------------------------------------------- Чтобы увидеть примеры диэайнов снепостоянной шириной, зайдите на сайт

http://maps.google.com.

О Гибкий дизайн. Это на самом деле дизайн, использующий фиксированную ши рину с особенной гибкостью размеров. Работая с этим видом дизайна, вы опре деляете ширину страницы, используя еm-значения. У единицы измерения

изменяется размер, когда меняется размер шрифта браузера, так что ширина ди зайна в конце концов основана на размере базового шрифта браузера (см. под раздел ~Ключевые слова, проценты и единица измерения

em» разд. ~Установка 6). При изменении размера шрифта браузера ширина стра внутри ее также изменяется - это напоминает масштабиро

размера шрифта» гл. ницы и элементов вание дизайна.

Гибкие дизайны утрачивают свои позиции в наше время, поскольку современные версии самых популярных браузеров заменили привычную команду увеличения размера текста командой масштабирования страницы. Например, в

Internet Explorer 8, Firefox 3, Safari 4, Opera и Chrome, нажатие Ctrl-+ увеличивает все на

странице (тот же результат вы получаете с использованием гибкого дизайна).

320

Глава

11.

Веедение в разметку

CSS

ПРИМЕЧАНИЕ----------------------------------------------- Сзойства

max-width

min-width

nредлагают комnромисс между фиксированной и свободной шири

ной (см. врезку «Информация для оnытных nольэователей» далее) .

.. ,.. .... ..

___

-Jt · Y · · ~~

.. ..,_~·_:.... , ,

~,..

.У.

o---.. ..::~::_:_:JJoSo':.,:~ ......... ......... .. _........ --

.".

- . . ..

...... , •• ;. ..

<Jo • .;,. •о~~ ...._~ ~

!.,

~ ~

.:: .. -'!..

,.,."

~-..

··'·- ··-···--

Фиксированная ширина

.... ........,.-_ .....

' ' .. ··•··

.. .

у.·~·-

.. ~to.. ,.._ ,. ........... ·,..,-·_... - ..

Неnостоянная ширина

Гибкий дизайн

Рис.

11 .1. Три типа оформления

страницы

Итак, у вас есть несколько способов работы с неопределенными размерами окон и шрифта браузера. Вы можете просто проигнорировать тот факт, что у ваших посе

тителей мониторы с различными разрешениями, и насильно установить единствен ную фиксированную ширину для вашей страницы либо создать свободный дизайн,

который заполнит окно любой ширины, с которой столкнется. Гибкий дизайн изме няет ширину, только если размер шрифта (а не размер окна) изменяется.

В обучающих уроках в конце следующей главы вы создадите страницы с фик

сированной и свободной ширин_ой.

Как работает СSS- раэметка Как говорилось в гл.

1, на заре развития Интернета ограничения HTML вынудили

дизайнеров придумывать новые способы оформления сайтов. Самым распростра-

321

Как работает СSS-раэметка

ненным инструментом был тег <taЬle>, который, как изначально предnолагалось,

должен был служить для отображения информации в виде электронной та.блицы, составленной из строк и столбцов сданными. Разработчики использовали НТМL

таблицы, чтобы создать своего рода основу для организации содержимого страни цы (рис.

11.2).

Однако, поскольку тег <tаЫе> не был предназначен для разметки,

дизайне.рам часто nриходилось управлять им непривычными способами (напри мер, помещая таблицу внутри ячейки другой таблицы), чтобы получить нужный результат. Этот метод забирал много времени, добавлял кусок лишнего НТМL

кода и усложнял дальнейшее изменение дизайна. Но это все, что было у дизайнеров ДО

CSS.

Рмс.

11.2. Формирование составного дизайна страницы (слева) с использованием тега <taЬie>

подобно созданию закрепленных подмосток (справа), а изменение дизайна требует демонтажа этих подмосток и построения новых

Если вы долгое время работали с тегом

<tab l е>,

вам нужно постепенно перехо

дить на новый уровень, начиная использовать для разметки

CSS. Сразу забудьте

о строках и столбцах (важных понятиях при работе с таблицами) . Создавая таб личную разметку, вы вставляли код HTML в отдельные ячейки таблицы. Каждая из них выступала в роли контейнера на странице, содержащего заголовок, изобра жение, текст или комбинацию разных типов информации. В CSS есть эквивалент ячейке таблицы- тег <div>. Он также является контей нером для содержимого, которое вы хотите разместить в определенном месте на

странице. Кроме того, как вы видите, в разработках на

CSS

часто один тег

<di v>

вкладывается в другой, что очень похоже на вложение одних таблиц внутрь других для nолучения определенных результатов. Однако, к счастью, СSS-метод исnользует намного меньше НТМL- кода.

Мощный тег

<div>

Разметка приводит к расположению содержимого в различных областях страницы. В

CSS для организации содержимого обычно применяется тег <div>. Как вы чита 1, тeг<div>- это НТМ L-элемент,

ли в разд. ~наn исание НТМL- кодадля CSS~ гл.

322

Глава

11.

Веедеwие в разметку

CSS

у которого нет никаких собственных свойств форматирования (помимо того фак та, что браузеры рассматривают этот тег как блок с обрывом строки до и после него). Вместо этого он используется для обозначения логического группирования элементов, или распределения на странице. Вы обычно указываете тег <di v> с двух сторон кусков НТМL-кода, подходящих

друг к другу. Такой элемент, как навигационная панель, обычно занимает вершину страницы, так что есть смысл задавать тег

дется определить тег

<di v> и вокруг него. Кроме того, при <di v> для всех основных областей вашей страницы, таких

как баннер, область с главным содержимым, боковое меню, нижний колонтитул и т. д. Есть возможность указать тег

<di v> вокруг одного или нескольких дополни

тельных отделений. Одна из распространенных методик состоит в упаковке НТМL кода внутри тега <body> в тег <div>. Тогда вы сможете установить некоторые основ ные свойства страницы , применяя

CSS к этой «уnаковке~.

Появится возможность

установить полную ширину для содержимого страницы, левые и правые края или

разместить все содержимое посередине экрана и добавить фоновый цвет или изо бражение для главного столбца страницы.

Как только вы расставите теги <di v>, добавьте либо класс, либо идентификатор ( ID) к каждому из них, и вы сможете создавать стили CSS для размещения блоков на странице, исп ользуя либо плавающие элементы (см . гл . 12), либо абсолютное позиционирование (см. гл. 13). ИНФОРМАЦИЯДЛЯНОВИЧКОВ

Находим ра:~умный бапанс Хоть разделы di vкрайне необходимы СSS-разметкам,

страницы. В этом случае вы можете пропустить <di v>

не бросайтесь активно применяrъ их на вашей стра

и nросто использовать теr <Ы ocкquote>, позицио

нице. Распространенное заблуждение состоит в том,

нируя его с nомощью свойства fl oat, которое будет

что вы должны указывать теги

<di v> для всех эле

рассмотрено в следующей главе.

ментов страницы. Скажем, ваша главная навигацион неупорядоченный елисок ссылок (как,

Но это не значи~ что нужно бояться исnользовать теги

наnример, та, что описана в раэд. «Соэдание панелей

<di v>. Добавив их на nарочку больше, вы не увеличи

навигации» гл. 9). Поскольку это важный элемент, вы,

те размер файла и не замедлите загрузку страницы.

возможно, nожелаете указать <di v> вокруг него:

Если <div> nоможет вам решить nроблему и ни один

ная панель -

<di v

из других тегов не подходит, естественно, используйте

1d~"ma1nNav"><ul> ... </ul></div>.

<div>. Кроме того, <di v>- это единственный сnособ Однако нет никаJ<иХ причин добавлять тег <di v>, когда <ul> настолько же удобен. Пока теr <ul> содержит

тегов

ссылки главной навигационной nанели, вы можете

деть один тег

nросто добавить ваш стиль ID к этому тегу: <u1 1 d

гими.

сгруnпировать в единое целое несколько различных

HTML На самом деле не так редко можно уви <div>, окруженный несколькими дру

''mainNav">. Основное практическое nравило nри работе с HTML-

<di v>,

стараться свести количество кода к минимуму, но

когда nод рукой есть другой, более nодходящий эле

nри этом использовать его столько, сколько нужно.

Кроме того, нет необходимости использовать

HTML. Например, вы захотели nроцитировать

Если добавление пары лишних тегов <dl v> имеет

кусок текста -создать блок, выровненный по право

смысл для nроектирования дизайна, то смело ис

му краю, содержащий важную цитату из содержимого

пользуйте их.

мент

323

СТратегии разметки

Методики разметки На текущей стадии развития

CSS

CSS разметка бывает двух видов -

с абсолютным и от

носительным позиционированием. Большинство веб-страниц использует для раз метки СSS-свойство fl oat. Вы уже сталкивались с этим, казалось бы, простым свой ством в гл.

8, где оно было представлено как способ позиционирования изображения

внутри столбца с текстом перемещением его либо в левую, либо в правую сторону. Тот же принцип применяется к тегам

<di v>: устанавливая для них ширину и переме

щая влево или вправо, вы можете создать столбец (текст после тега <di v> <<оберты вается» вокруг плавающего <di v>, как если бы он был еще одним столбцом). Исполь зуя свойство

fl oat

с множеством тегов

<di v>,

вы получаете возможность создавать

многостолбцавые разметки. Применяя эту методику дальше, вы будете быстро соз давать сложные разметки, помещая одни плавающие теги

<di v>

внутри других.

Абсолютное позиционирование позволяет поместить элемент в любом месте

страницы с точностью до одного пиксела. Вы можете поместить элемент, например, в

100 пикселах

от верхнего края окна браузера и в

Такие программы для разметки страницы, как

15 пикселах от левого края. InDesign и Quark Xpress, работают

именно так. К сожалению, изменчивая природа веб-страниц, а также некоторые странные свойства абсолютного позиционирования затрудняют возможность пол ного контроля над разметкой при использовании этой методики. Как вы узнаете

из гл.

13, выполнить разметку страницы с помощью абсолютного позиционирования

можно, но этот способ лучше подходит для небольтих задач вроде позициониро вания логотипа в конкретном месте на странице.

Не беспокойтесь, если сейчас все это звучит довольно сложно для вас. Вы уви дите все эти методы в действии в следующих двух главах. ПРИМЕЧАНИЕ----------------------------------------------- Есть несколько других способов выполнить разметку

Firefox, Safari

CSS,

но они ограничены Iпterпet

Explorer 8,

и другими современными брауэерами. Иначе говоря, эти альтернативные методы не

будут работать для подавляющего большинства веб-серферов, польэующихся мы рассмотрим эти способы в гл.

би

7. Тем

не менее

16.

Стратегии разметки Разметка неб-страницы с помощью

CSS -

это скорее искусство, чем наука. Поэто

му нет четкой формулы, которой нужно придерживаться для разметки содержи

мого с

HTML и создания CSS. То, что работает с одним дизайном, может не подой

ти для другого.

Изучение разметки

CSS

происходит на личном опыте. Нужно узнавать, как

работают различные свойства

CSS

(особенно абсолютное и относительное пози

ционирование), читать о методах разметки, следовать обучающим примерам, таким как представленные в следующих двух главах, и много-много практиковаться.

Тем не менее определенно есть некоторые стратегии, которые можно принять, приступая к созданию разметки. Они больше похожи на установки или инструк ции, а не на жесткие правила. Но, как только вы начнете проектировать дизайн для

каких-либо проектов, имейте в виду эти инструкции.

324

Глава

11.

Введение в разметку

CSS

Начнем с содержимого Многие дизайнеры хотели бы сразу перейти непосредственно к своей теме

цве

там, шрифтам, значкам и изображениям. Но, начиная с визуального дизайна, вы ставите телегу впереди лошади.

Самые важные элементы веб-страницы- это ее содержимое (заголовки, абзацы текста, потрясающие фотографии, навигационные ссылки, флэш-ролики, а также все то, ради чего люди придут к вам на сайт). Посетители захотят выяснить для

себя, что ваш сайт может предложить им. Содержимое стоит во главе угла, и вам сначала нужно подумать, что вы хотите сказать, прежде чем решить, как это долж

но выглядеть. В конце концов, создавая фантастическую по красоте трехмерную

боковую панель, вьr ничего не добьетесь, если вам особо нечего вводить туда. Кроме того, идея страницы должна диктовать ее дизайн. Если вы решите, что на домашней странице нужно продавать услуги вашей компании, и захотите выде

лить отличное предложение для клиентов, то вполне вероятно, что особое значение

будет иметь большая фотография с приветливыми сотрудниками, а также и ци

тата из отзыва одного из довольных клиентов. Поскольку оба этих элемента важны для страницы, вы должны сделать их видными и неотразимыми.

Импровизируйте с дизайном Даже если вы чувствуете себя более комфортно, создавая код

HTML и CSS вруч

ную в любимом текстовом редакторе, нежели рисуя в графическом редакторе, не

стоит начинать с кода. Такие программы, как

Photoshop, Illustrator или Fireworks,

очень просто использовать для создания графических дизайнов. Они дают свободу для импровизации с различными цветами, шрифтами, изображениями, позицио нированием, при этом не заставляя тратить время на написание кода

HTML и CSS.

Вы можете экспериментировать с новыми дизайнерскими идеями и задумками, пока не получите то, что вам нравится.

Если вы новичок в работе с графическими про граммами, то даже простое рисо вание прямоугольников для обозначения расположения различных элементов страницы может улучшить ваше представление о том, какой должна быть размет ка страницы. Изменить дизайн с двумя столбцами на дизайн с четырьмя намного

проще, меняя размер прямоугольников в программе Illustrator, чем переписывая - это отличный способ для того, чтобы почувство

код. Даже карандаш и бумага

вать, где должно быть расположено содержимое на странице, каким оно должно быть по размерам и каким должен стать общий тон (светлым или темным). СОВЕТ ------------------------------------------------------Компания

Yahoo

предлагает бесплатный набор трафаретов (Steпcil

ypatterпs/wireframes), которые можно использовать в

Kit) (http://developer.yahoo.com/ Illustrator, Visio, OmniGraffle и других графи

ческих программах для создания макетов веб-страниц. Предоставляемые элементы пользователь

ского интерфейса, например кнопки, поля, окна и ссылки, могут превратить соэдание раэметки в простое перетаскивание значков.

325

Стратегии разметки

Идентифицируйте разделы После того как вы создали визуальный макет, нужно подумать о том, как создать

разметку

HTML и CSS для достижения дизайнерских задумок. Этот процесс обыч

но включает представление различных структурных блоков страницы и иден тификацию элементов, которые выглядят как отдельные разделы. Например, на

рис.

11.3 есть немало элементов, которые выглядят как небольшие разделы: наибо

лее крупным является раздел с тремя объявлениями внизу (помечены буквой А на рис.

11.3).

Каждый раздел, как правило, является кандидатом на выделение в от

дельный тег <div> (если только нет более подходящего тега

HTML, что

мы обсуж

дали ранее).

Часто визуальная подсказка в макете может помочь решить, нужен ли вообще тег

<di v>.

Например, линия границы, обведенная вокруг заголовка и нескольких

абзацев, означает, что вам понадобится обернуть эту группу НТМL-тегов тегом

<di v>,

к которому примене на граница.

Кроме того, когда вы видите фрагменты текста, идущие бок о бок (например, три фрагмента с содержимым в нижней части рис. дый из них заключить в отдельный тег

<di v>.

11.3), вы знаете, что нужно каж

НТМL-теги, как правило, сами не

располагаются бок о бок, поэтому вам придется использовать некоторые техники разметки (например, плавающие теги, описанные в следующей главе).

Желательно также группировать теги

щий тег

<di v>.

<di v>,

Например, в нижней части рис.

расположенные рядом, в один об

11.3

вы видите набор тегов

которые обеспечивают структуру страницы. Разделы

тейнерами для своих собственных наборов

news

footer

<di v>,

являются кон

<d i v>. Хоть это и не всегда необходимо,

такой подход помогает обеспечивать гибкость. Например, вы можете уменьшить основной раздел (изображение руки и подзаголовок) по ширине и передвинуть раздел с новостями вправо от него, который сформировал бы отдельный столбец.

Новости могли бы идти друг под другом, а не бок о бок.

Плывите по течению Теги обычно не располагаются рядом и не наслаиваются друг на друга. Как пра вило, они действуют подобно тексту в программах для его обработки: заполняют всю ширину страницы и растекаются от верхнего до нижнего края. Каждый тег

уровня блока

заголовок, абзац, маркированный список и т. д.

располагается

наверху следующего тега уровня блока. Поскольку это стандартный подход, вам обычно не нужно ничего делать, если вы планировали вводить теги

<di v> один за

другим.

Например, на рис.

11.3 четыре тега <di v> - banner, mai n, news и footer - охваты <body>) и расположены друг за другом

вают всю ширину своего контейнера (тега

по вертикали. Это типичная ситуация для тегов уровня блока, и вам не нужно де лать ничего особенного, применяя образом.

CSS, чтобы расположить эти четыре <di v> таким

326

Глава

Chla Vet в.uuи...,.,cш,.., ...~..c"'.vtt

11. Введение в разметку CSS

•s>ioo•""-~

_00........ . . -,....,

. . - (...)JU.UU

м....,~(IIIМ)t.JНtiJ

1<div id•"Ьanne,">

\810/SD-1 ...

~padding-top:1 ООрх

<div id="main"> padding-left:585px

... 1

<div id="tag"> 1

<div

id="newsЗ">

1<div id="testimony"> 11

11 Рис.

11 .3. Корректное расположение НТМL-элементов, необходимое для преобразования макета Photoshop в код HTML и CSS, включает в себя видение структуры страницы и «уnаковку» связанных групп НТМL-элементов в теги <div>

Помните о фоновых изображениях Вы, несомненно, видели черепичные изображения, заnолняющие фон веб-страницы,

или градиенты, добавляющие эффект глубины баннеру. Свойство background- image

327

Стратегии разметки

предоставляет еще один способ добавить фотографии на страницу, не прибегая

к помощи тега <i mg>. Вставка изображения в фон существующего тега не только

позволяет сохранить пару байтов данных, которые были бы потрачены на тег <i mg>, но и упрощает решение некоторых проблем, связанных с разметкой. Например, на рис.

11.3 изображение руки по центру

(В) на самом деле является

обычным фоновым изображением. Это облегчает размещение другого тега <div> с подзаголовком

«Compassionate саге ... >>

(С), поскольку он просто расположен по

верх фона родительского тега. Кроме того, фотография с доктором чуть ниже,

в правой части страницы,

обычное фоновое изображение, размещенное в теку

щем теге <di v>. Добавление небольшого отступа справа отодвинет текст в этом разделе от фотографии. ПРИМЕЧАНИЕ----------------------------------------------- Есть минусы использования фотографий в качестве фонов тегов

<div>

(или других тегов

HTML).

Во-первых, браузеры обычно не печатают фон, так что если у вас есть страница с картой, содер жащей какие-то важные маршруты, вставьте ее с помощью тега

<img>, а не в качестве фонового изображения. Кроме того, поисковые системы обходят стороной CSS, поэтому, если вы думаете, что изображение может привлечь дополнительный трафик на ваш сайт, используйте тег <img> и до

бавьте описательный атрибут

alt.

Куски головоломки Этот совет можно было давать в разделе «креативного решения проблем~. Часто то, что выглядит как одно целое, на самом деле состоит из нескольких частей. На

пример, в обучающем примере гл.

8 боковая панель, похожая на бумажный свиток,

была фактически сооружена из трех фоновых изображений в трех отдельных тегах

HTML (см. рис. 8.17). Кроме того, трюк с «раздвижными дверями~, обсуждавший ся ранее, использует подобную методику. Вы можете увидеть простой пример этого в нижней части рис. есть четыре расположенных друг за другом тега

<di v>,

11.3.

Здесь

каждый из которых имеет

белый фон. Если у вас возникли проблемы с размещением больших элементов на странице (очень большого рисунка, занимающего много столбцов, или мас сивного фонового изображения, которое займет не одну область страницы), по думайте о том, можно ли добиться желаемого внешнего вида страницы, разбив

большой элемент на мелкие куски, которые потом сложатся, какчасти голово ломки.

Расслоение элементов Если вы работали с

Photoshop,

Illustratoг или

Fireworks, то, вероятно,

использова

ли концепцию слоев. Слои позволяют создавать отдельные полотна, которые на

кладываются друг на друга и образуют единое изображение. В этих программах можно легко сделать логотип поверх заголовка с текстом или разместить одну фо

тографию над другой. Если вы хотите сделать то же самое на веб-странице, у вас есть несколько вариантов.

Часто самым простым способом наложить слой поверх фотографии является

добавление изображения в фон другого тега (см. совет выше). Поскольку фоновое

328

Глава

11.

Введение в разметку

CSS

изображение идет за тегом, все, что находится внутри этого тега- текст, другие

изображения,

будет расположено поверх фотографии.

Но что делать, если вы хотите наложить фотографию поверх какого-нибудь

текста? В таком случае нужно обратиться к единственному свойству ляющему наслаивать элементы,- свойству

position.

CSS,

позво

Мы рассмотрцм его в гл.

13,

поскольку размещение элементов поверх чего-либо требует абсолютного позицио нирования.

Не забывайте о полях и отступах Иногда самое простое решение оказывается лучшим. Вам не всегда нужен причуд

ливый СSS-код, чтобы поместить элемент в нужное место на странице. Вспом ните, что отступы и поля представляют собой обычное пустое пространство и, ис пользуя их, вы можете двигать элементы по странице. Например, подзаголовок (С на рис.

11.3) размещается простой установкой верхнего и левого отступа для его 11.3, подзаголовок помещен внутри другой тега <di v> ( <di v i d="ma i n"> ). Этот тег на самом деле не имеет другого содержимого, кроме подзаголовка, - фотография является фоновым изображением, так что добавление отступа перемешает тег <di v> подза родительского тега. Как вы можете видеть на схеме в нижней половине рис.

головка вправо вниз.

Разметка страницы на основе плавающих элементов

Разметка, основанная на плавающих элементах, использует преимущества свой

ства fl о а t для расположения элементов бок о бок, создавая на веб-странице столб цы. Как было описано в разд. <<Управление обтеканием содержимого плавающих элементов~ гл. 7, вы можете использовать это свойство для создания эффекта обтека ния, скажем, для фотографии, но, когда вы применяете его к тегу вится мощным инструментом разметки страницы. Свойство

<di v>, оно стано fl oat перемешает

элемент в одну сторону страницы (или другого блока с содержимым). Любой

НТМL-объект, который появляется ниже плавающего элемента, изменяет свое положение на странице и обтекает его. Свойство float принимает одно из трех значений: left, right или none. Чтобы переместить изображение к правому краю страницы, вы можете создать класс сти ля и применить его к тегу

<img>:

.floatRight { float: right; } То же самое свойство, применеиное к тегу

<di v> с содержимым, может также

создать боковое меню:

#sidebar float: left: width: 170рх; ПРИМЕЧАНИЕ----------------------------------------------- Значение поnе отменяет любое nеремещение и определяет элемент как обычный (не плавающий).

Это полезно только для отмены перемещения, которое уже относится к элементу. Допустим, у вас есть элемент, к которому применен специфический класс, такой как "sidebar", и этот элемент сме щен вправо. На одной иэ страниц вы, возможно, захотите, чтобы элемент с этим классом не пере двигался, а был определен в общем потоке страницы. Создавая более специфичный СSS-селектор (см. раэд. «Управление каскадностью» гл. 5) с float: none, вы можете предохранить этот элемент от перемещения.

На рис.

12.1 показаны эти два стиля в действии. Здесь блок новостей перемещен

к левому краю. У него есть фиксированная ширина, однако у главного содержимо

го ее нет, что делает этот дизайн свободным. Главный раздел страницы просто рас

ширяется, заполняя окно браузера. Вверху справа фотография с ванной перемеще на в правую сторону.

330

Глава

12.

Разметка страницы на основе nлавающих элементое

COSMOFARMER Your onl>nc gu.de to ope<lment f&rmong

Ф§i

·~ Bathtub

Hydr_oponlc.s

Lorem lpsum Dolor Sof , 0 ,",,".,,"..,""""'" Loremlpsumdolo<sll omet.consecretver ....,... odiplsc'ng eit ~ed diOm nonummy nit>h 1-u.ь~ --.-, ---, -t 1 evismod tlncidvnt ut tooreet dolore mogno lo·..,.· oiQvom eror .olv1pot Ul \vlsJ enlm od t-"""'-'-----llrninfrnvenk)m Qutsnos1rude~erct1oti0n ~ ~? u8on1eorper su~fpit IOЬor1JS nisl u t OliQ\.kP в>. ео convnodo conseqvor. Dvls aurem vel evm iriure dolo< ln hendrerll1n '~put ole veill esse moleslie consequot. vel iltum dolore eu reuglot nula roc;

'::;:..::;:;:ttw

Ookws.ile<J~nt:t

I..C ..~fl" r-

.... d

~··

...

;;Jфф'

·--'~ tc••""'~» P~·,•~ rw..od ....ldurol \.ore-1'1"' о. """dofc• •+•• .,.,_~·

ut wisl enlm od mlnim oliqvlp LO<em spsvm d010r111 omet consecletuer odlp<sdng elil sed diom nonummv nlt>h eUilmOd 11neidvn1 vl loOteet dotore mogno ol1quom erol ,okJtP01. Ut wtsi enim Od minlm ·•enlam. qurs noшud e•ercl totюn ullomcoroer susclpfl toЬorl~ nlsl ut ~Р 8) ео commodo cons9QU01. 0\М o\Jiem·•e! evm<Мe doi..'V•n hencirвr•l ln~pvtote. vellt ess&motest~• conseqvot vel illun' dOIOfe eu leUQiO t nullo loci

Dolor Ev Lorem ;p~vm dOIOr s•l omet consectetuer aolpfsetng QRI, sed dlom nonummy n·ьh evismod tinctdvnt vl looreet dOIOre mogno ollquom erot t..:_.:.__ ___,_ __, 1VOiutpor Ut •VIIi enlm Od т.n•m verюm quls nostrud exercl1otlon Н'---------,1 ulamc<>фe( ~vse>plt loЬor1is nisl ul olqu"p е< eocommodo consequor.

'----- левое nоле

Рмс.

12.1. Исnользуйте свойство float для разметки веб-страницы с множеством столбцов

Простой дизайн с двумя столбцами, как на рис.

12.1, требует выполнения всего

нескольких действий.

Укажите вокруг каждого столбца тег На рис.

12.1

в один раздел

(<div id

<div>

с атрибутом класса или

ID.

заголовки новостей, перечисленные в левой части, заключены

(<div id "main">).

"news">),

а главное содержимое страницы- в другой

Переместнте теr <div> с боковым меню вправо или влево. Когда вы работаете с плавающими элементами, важен nорядок исходного кода (nорядок, в котором

вы добавляете HTML к файлу). HTML для плавающего элемента должен nо явиться перед HTML для элемента, который указывается вокруг него. На рис.

12.2 nоказаны

три варианта разметки с двумя столбцами. Диаграммы

на левой стороне nоказывают nорядок НТМL-кода страницы: теr <di v> для бан нера, за которым следует

<div> для

бокового меню, и, наконец, тег

<div> для

главного содержимого. Сnрава вы видите фактическую разметку страницы.

Боковое меню идет перед главным содержимым в

HTML,

так что оно может

переместиться или влево (вверху и внизу), или вправо (посередине).

331

Глава 12. Разметка страницы на основе плавающих элементов

Порядок описания в

СSS-раэметка

HTML

OJ 1

И боковое меню

основное содержимое

-- -. -

ш ·

боковое меню

основное содержимое

ложка

.·

боковое меню

основное содержимое

width: Рис.

760рх

1:Z.:Z. Соэдание разметки с двумя столбцами - лишь воnрос перемещениR тега <div> влево

(вверху). Чтобы заставить боковое меню переместитьсR в правую сторону страницы (посередине), просто измените (55-стиль бокового меню на

float: right

332 3.

Глава

12.

Разметка страницы на основе nлавающих элементов

Установите ширину для плавающего бокового меню. Всегда задавайте пла вающим элементам ширину. Таким образом вы позволите браузеру создать место для другого содержимого, чтобы получить эффект обтекания.

У ширины может быть фиксированный размер, такой как 170 рх или 10 em. Вы также можете использовать проценты для гибкого дизайна, основанного на ширине окна браузера (см. разд. <~Типы разметок веб-страницы~ в гл. 11 обо всех <<За и против~ различных единиц измерения). Если у бокового меню ши

рина

20 %, а окно браузера- 700 пикселов в ширину, то ширина бокового меню 140 пикселов. Если же ваш посетитель изменит размер окна до 1000 пик селов, то боковое меню вырастет до 200 пикселов. Боковые меню с фиксирован будет

ной шириной легче проектировать, так как не нужно рассматривать все различные

значения ширины, до которых боковое меню могло бы растянуться. Однако проценты позволяют вам поддерживать одинаковые пропорции между двумя

столбцами, что может быть визуально привлекательнее. ПРИМЕЧАНИЕ----------------------------------------------- Когда дизайн всей страницы указан с фиксированной шириной, значения ширины для бокового меню в nроцентах основаны на элементе с фиксированной шириной. Ширина не зависит от разме ра окна и остается nостоянной.

Добавьте левый край к главному содержимому. Если боковое меню короче другого содержимого на странице, то текст из главного столбца обтекает меню

снизу. Добавление левого края, большего или равного ширине бокового меню, выравнивает главное содержимое страницы, создавая иллюзию второго столбца:

#main { margin-left:

180рх

: }

У д об но делать левый край чуть больше по ширине, чем боковое меню: это до бавляет промежуток между двумя элементами. Если для установки ширины

бокового меню вы используете проценты, то задавайте немного большее значе ние для левого края.

Избегайте установки ширины для раздела

di v с

главным содержимым

брау

зеры расширяют его, чтобы оно занимало доступное место. Даже если вы хотите иметь дизайн с фиксированной шириной, вам не нужно устанавливать ширину для главного содержимого, что вы увидите в следующем разделе.

Использование плавающих элементов в разметках Теперь, когда вы изучили свободную разметку с двумя столбцами, можете приме

нять ее бесчисленным множеством способов. Преобразовать ее в разметку с фик - просто. Надо обернуть все теги внутри тела страницы

сированной шириной другим тегом

<div>

(например,

<div id

"wrap">),

а затем создать стиль для этого

нового элемента-контейнера, для которого определена ширина, скажем, селов (см. рис. нера.

12.2, внизу).

960 пик

Эта установка ширины удерживает все внутри контей

333

Иаюльэование мавающих элементов в разметках

ПРИМЕЧАНИЕ---------------------------------------------- Сущесnsует также вариант создания страницы с фиксированной шириной без nрименения доnол нительного тега

<div>, «оборачивающего» все элементы: 7.

задайте ширину для тега <Ьоdу>. Вы уже

видели nример иаюльэования этого метода в гл.

Разметить страницу на три столбца также петрудно (рис. 12.3). Сначала добавь те другой тег <di v> между этими двумя столбцами и переместяте его вправо. Затем добавьте правый край к среднему столбцу так, чтобы, если текст в нем окажется длиннее нового правого бокового меню, он не обтекал боковое ·меню.

Порядок оnисания в

['=~

1• 1•

СSS-разметка

HTML

баннер

nевое боковое меню

1 nравое боковое меню

11 основное содержимое

Рмс.

12.3. При дизайне с тремя

столбцами вы nеремещаете левое и nравое меню и добавляете

левый и nравый края к центральному столбцу. Диаграмма слева nоказывает nорядок исходного НТМL-кода, а сnрава вы можете увидетЬ, как выглядит веб-страница

В остальной части этого раздела рассматриваются многочисленные методы пла нировки CSS, которые используют разметки, основанные на ~плавании~. ИНФОРМАЦИЯДЛЯНОВИЧКОВ

Не мsобретайте nовторно коnесо Еслм таw термины, как «свободная poзмtml«l» и «со

созданных и протестированных ди3айнов, которые мо

держащий 3/ltМtНЛI», кажутСJI немного пуrающими, не

жете применять для себя. Сайт layout Gala предлагает

расарамвайтеа.. Прежде всего, обучающие уроки :mЖ

40 различных СSS..ди3айнов, которые работают в боль

war 3а waroм nроведут вас чере1 весь nроцесс

шинстве расnространенных браузероs, включая lntemet

ра3меТ1<М веО<tранмц с nомощью CSS. Однако нет та

Explorer S (http://Ьiog.html.lt/layoutgala/). Дизайны

mавы

кого nраеш, коrорое бы говорило о том, как вы долж

там- это nросто «Каркасы», состоящие из теrов

ны соwвать свои собственные СSS-разметки с нуля.

<div> и СSS-кода, который размещает их. Все, что вам .нужно сделать, - заnолнить их собственными

8 Интернете вы найдете множество nредварительно

334

Глава

12. Разметка страницы

на основе nлавающих элемектое

ИНФОРМАЦИЯДЛЯНОВИЧКОВ

настройками формтрования, такими как стмnь шриф

столбцов, тиn разметки и т. д. Тhе Grid System Generator

(Jacob Meyers)

(www.grldsystemgenerator.com) nозволяет устанав

224 различные разметки, кото рые можно найти по адресу http://layouts.ironmyers. com.

ливать ширину страницы, количество столбцов и поля

Есть также немало генераторов разметок- эти он

подобный инструмент, предоставляющий различные

no вашему желанию

типы разметок, включая свободные разметки и раз

та и изображения. Джейкоб Мейерс предлаrает на выбор

лайн-инструменты nозволяют

настрокть такие основные параметры, как количество

между ними. Затем можно скачать файлы с кодом

HTML и CSS, созданные сnецкально для разработчк ков. д на сайте www.pagecolumn.com вы найдете метки с фиксированной шириной.

Перемещение всех сrолбцов В полной мере можно заставить персмещаться каждый столбец, а не только левое

и правое боковые меню. Вы можете персместить первое боковое меню и средний столбец влево, а правое боковое меню - вправо, как показано на рис. 12.2, вверху. Этот подход позволяет размещать на странице более трех столбцов. Вы можете персмещать четыре или более столбца, пока есть место для всех плавающих эле ментов, чтобы они находились бок о бок.

Когда вы персмещаете все столбцы в дизайне, то должны обратить пристальное внимание на ширину каждого столбца. Если совокупная ширина всех столбцов меньше доступного места, например, когда окно браузера меньше или столбцы помещены внутри другого тега <di v> с установленной шириной, то nоследний стол

бец опускается вниз (как решать проблему персмещения плавающих элементов, вы можете прочитать в подразделе ~предотвращение перепадов nлавающих эле

ментов• разд. «Преодоление проблем перемещения• этой главы),

Вдобавок, nеремешая не только боковые меню, вы сможете изменить порядок своих разделов

div

HTML. Возьмите, например , левую диаграмму на рис. 12.3, <di v> для страницы. По принцилу своей работы

которая показывает порядок тегов

плавающие элементы должны появляться перед любым содержимым , которое

определяется вокруг них, так что в этом примере область главного содержимого должна идти после бокового меню. Порядок тегов

<di v> в HTML может показаться

чем-то не очень важным, пока

вы не попытаетесь просмотреть неб-страницу без CSS, что имеет место для многих альтернативных браузеров, включая экранных дикторов, которые читают содер жание страницы вслух для слабовидящих посетителей . Без

CSS

весь материал

бокового меню (которое часто включает навигационные элементы, рекламу или другую информацию, не относящуюся· к главной теме страницы) появится перед

содержимым, ради которого зашел посетитель. Неудобство, которое заключается в необходимости прокручивать одно и то же содержимое· бокового меню на каждой

странице, может отпугнуть многих посетителей. Кроме того, ваша страница будет менее доступна пользователям с плохим зрением, которым придется выслушивать,

как их экранный диктор читает длинный список ссылок и рекламы, прежде чем

получить реально необходимую информацию.

335

Исnользование плавающих элементов в разметках

Порядок описания в

1• 1•

СSS-разметка

HTML

баннер

левое боковое меню

IJ основное содержимое

правое боковое меню

[в

баннер

заголовок столбца

)

баннер

IJ основное содержимое

левое боковое меню

правое боковое меню

Рис.

12.4 . Существует

1 несколько сnособов сделать страницу nлавающей. Исnоль3уя ра3личные

методы перемещения, вы можете легко и3менять порядок исходного НТМL-кода страницы (слева). Схемы на правой стороне nредставляют 3аключительную ра3метку веб-страницы

Если же это никак не затрагивает вас, то стоит поволноваться насчет поисковых машин. Многие из них ограничивают количество НТМL-кода, прочитываемое при

поиске сайта. На особенно длинной веб-странице они просто остановятся на опре делен н ом месте, возможно упустив важное содержимое, которое должно быть внесено в указатель поисковой машины. Кроме того, большинство поисковых

336

Глава

12.

Разметка страницы на основе nлавающих элементов

машин придают большее значение тому НТМL-коду, который находится в начале файла. Таким образом, если вас волнует рейтинг вашего сайта при поиске такими машинами, то имеет смысл убедиться в том, что важное содержимое максимально

близко к вершине НТМL-кода страницы. Наконец, перемещение каждого столбца также предотвращает ошибку трехпиксельного промежутка, которая затрагивает

Internet Explorer версий 6 и ниже (см. подраздел «Трехпиксельные промежутки~> Internet Explorer 6>> этой главы). В левой верхней разметке на рис. 12.4 НТМL-код с основным содержимым на

разд. «Обработка ошибок в

ходится между левым и правым боковыми меню, что лучше, чем размещать его после этих блоков. Вы можете даже поместить описание главного содержимого перед

HTML- кодом для боковых меню, определяя для него и левого бокового меню <di v> и перемещая его влево. Затем внутри этого тега <di v> нужно пере местять основное содержимое вправо, а левое боковое меню - влево (см. рис. 12.4, впuзу). Вуаля! НТМL-код главного столбца идет перед остальными тегами <di v>.

один тег

Плавающие элементы внутри плавающих элементов Нижняя разметка на рис.

12.4 иллюстрирует другую

полезную методику

пере

мещение элементов внутри плавающих элементов. Предположим, что разделов

главного содержимого

(3) и левого бокового меню (4) не существует, а были (2) и правое боковое меню (5). У вас будет

оставлены только «обертка~> столбца

просто базовый дизайн с двумя столбцами, где один столбец перемещен влево, а другой

вправо. На самом деле это все еще дизайн с двумя столбцами, хотя два

раздела (3 и 4) помещены внутри «обертки~> столбца

(2). Различие в том, что левый

столбец сам разделен на два столбца. Хотя эта разметка немного смущает, она бывает полезной во многих случаях. Во-первых, она позволяет добавлять столбцы внутрь других столбцов. На размет ке на рис.

12.5, вверху,

показан маленький блок для подсказок в среднем столбце,

внутри которого также есть два столбца. Вкладывая одни плавающие элементы внутрь других, вы можете создавать достаточно сложные дизайны.

Вдобавок, когда у вас всего несколько плавающих элементов, в свою очередь разделенных на столбцы с дополнительными плавающими элементами, легче вычис лить (рассчитать) ширину элементов страницы. Это хорошо, когда вы должны кон тролировать перепады «плавания~> (см. подраздел «Предотвращение перепадов плава

ющих элементов~> разд. «Преодоление проблем перемещения~> этой главы) и другие проблемы, возникающие, когда столбцы становятся слишком широкими. Рассмотрим страницу на рис.

12.5, вверху.

Чтобы добиться такого размещения

объектов, создайте столбцы в столбцах, передвигая элементы внутри других пла

вающих элементов. В среднем столбце предусмотрена область подсказок, которая позволяет добавить простую заметку с двумя колонками, что придает привлека тельности странице.

На рис.

12.5,

внизу, видно, что неважно, в каком направлении перемещается

контейнер (в этом случае- вправо),- вы просто передвигаете два дополнитель

ных столбца влево и вправо.

337

Использование nлавающих элементов в разметках

Bathtub Hydroponics

Bat11tub Hydropon:::l.::. c.:. s .:.: n:t:e:.:. s_ _ _ _ _ _ _ __ Wolchl)eWateft~ о

v..,., ..

.:0\~t!;•

CQ,I.Ifon Мо-Ноs ...,.,..."....

r!a6

м-.:i

~·~ЬI>,,.di'J'Qd

.tff'l'\.lo · ••01"7"<1

:'Of\wc::"t~· ~ 0011'-

""0 .м. 'Nrd

d~~n.N-~

:;JQflt~·t~~ t)

J'OI""'tii'O•~QII'!

Рис.

12.5. Пример ра3метки с плавающими элементами

внутри плавающих элементов

338

Глава

12.

Разметка страницы на основе мавающих элементов

Испоnьзование отрицатеnьнь1х поnей дпя размещения элементов В ы ше были описаны несколько методик, которые позволяют переупорядочить НТМL-код для каждого столбца в дизайне. Однако существует еще более усовер шенствованная методика, предлагающая вам полный контроль над размещением

ваших столбцов. Используя отрицательные поля, вы можете поместить теги

<di v>

в любом порядке в своем НТМL-коде, а затем разместить их в другом порядке на

экране, оставляя, таким образом, страницы доступными для экранных дикторов , браузеров и поисковых машин . Кроме того, поскольку вам не нужно волноваться об исходном порядке, вы всегда можете изменить дизайн страницы - возможно, персместить главный столбец вправо, а два боковых меню

влево, без изменения

НТМL-кода страницы.

Однако я предупреждаю, что в этом методе применяются· математика и некото рые сложные приемы

CSS.

Вы можете быть вполне удовл етворены, используя

только методы перемешения, описанные ранее в этой главе. Но если вы готовы совершенствоваться и ищете другие решения возможных проблем, продолжайте читать ( в обучающем уроке

2 данной главы показан

пример разметки с . использо

ван ием этого метода) ..

Два "114na разметки- с фиксированной и неnостоян ной шириной

имеют свои nлюсы и минусы.

he1ght.

Свойства

min-

говорят браузеру сделать

элемент по крайней мере таким же широким или высоким, как указанное значение. Вы можете приме

Дизайн с фиксированной шириной дает вам много воз

нить свойство min-~;idth к теrу <Ьоd.У>, чтобы уnрав

можностей управления и nозволяет убедиться в том,

лять всей шириной содержимого страницы, таким

что разметка выmядит неизменно даже при различ

образом: Ьоdу

ных размерах мониторов. Однако на очень маленьком

тель расширит окно своего браузерадо 1000 пиксело в,

мониторе nосетителю, возможно, придется горизон

содержимое страницы растянется так, что будет соот

тально nрокручмвать страницу, чтобы просмотреть все

ветствовать всему доступному пространству. Однако

{ min-width:

760рх:

}. Если nосети

содержимое. А на действительно широком мониторе

если он сделает окно шириной 500 пикселов, то содер·

ваш прекрасный дизайн с постоянной шириной может

жимое останется

напоминать маленькую щепку в океане.

добавит горизонтальные полосы прокрутки. Свойство

760 пикселов в ширину, а браузер

min-hei9ht делает то же самое, но для высоты эле Разметки с непосто11нной шириной решают эти про

мента.

блемы, но у них также есть свои собственные огра ничения. На маленьком экране свободнаА разметка

С другой стороны, свойства max- задают максималь

может настолько сжаться, что весьдизайн развалится,

ные размеры. Разрабатываемый злемент может стать

а на очень широком экране страница может так рас

меньше, чем указано этим свойством, но только не

тянуться, что доставит пару неприАтиых минут посе

больше. С ними вы будете уверены, что ваши стра

ТИWIЯМ, которые попытаются прочесть строки текста

ницы не станут слишком широкими, а значит, непри

ширмной ЗО дюймов.

rодными для чтения. Скажем, вы создаете стиль для тега <Ьоdу> с таким свойством: max -wi dth: 1200рх.

Есть СSS-свойства, которые стремятся решить эту про

Теперь, если nосетитель расширит свой браузер до

min-width, min-height, max-width и max-

1800 л икселов (на своем невероятно дорогом зо-дюй-

блему:

339

Исnользование nлавающих элементов в разметках

ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ

mi n-W1dth:

мовом МОIIИТОре), содержимое страницы не растянет ся на весь экран, а останется

1200 пикселов в ширину.

Свойство max-height делает то же самое, но для вы

max-w1dth:

760рх: 1200рх:

) Единственная проблема с этими так или иначе полез

соты 3лемента.

Explorer 6 и ниже nолностью игнорирует их. Если вы

ными свойствами состоит в том, что lnternet Комбинируя эти два свойства, вы можете создать

версий

стиль, который изменяет размеры элемента только

чувствуете в себе смелость, попробуйте http: 111 ме

в пределах установленных значений, так что ваш

тод, использующий

дизайн никогда не станет слишком маленьким либо

изменяет размеры элементов веб-страницы, в зави

слишком большим:

JavaScript, который динамически

симости от размеров окна браузера: www.doxdesk.

com/software/js/minmax.html.

ПРИМЕЧАНИЕ----------------------------------------------- Методика, описанная во врезке «Информация для опытных пользователей», работает только для разметок с фиксированной шириной, где вы знаете точную ширину каждого столбца. Чтобы nозна

комиться с другим методом, который добивается тех же результатов со свободными разметками (где вы не знаете точную ширину среднего столбца), зайдите на сайт www.alistapart.com/articles/ holygrail/. Вы также найдете оnисание полноценного свободного дизайна с иrnольэованием отри

цательных nолей (все столбцы изменяют ширину в соответствии с окном браузера) в книге FlexiЫe

Web Design

от Зое Майкли Джилленуотер

(Zoe MickJey Gillenwater)

(издательство

New Riders).

Рассмотрим, как определяется разметка страницы при использовании отрица тельных полей.

1. Добавьте тег <div>, который определяет все содержимое страiПЩЫ. Этот шаг предусматривает создание контейнера для установки фиксированной ширины

всего содержимого страницы и предоставляет легкий способ сделать баннер, столбцы и нижний колонтитул одинаковой ширины.

Установите ширину для созданного тега

<div>.

Создайте стиль для тега <di v>,

который задаст ему ширину. Например, 960 пикселов - типичный размер, удоб

ный для посетителей, работающих на монИторах с разрешением 1024 х 768 пик селов.

3. OIDПIDIТe каждый столбец в теге <div> с атрибутом ID ИJDI class. Эта часть про цесса -такая же, как и при создании любой разметки, основанной на плавающих элементах. Она оnределяет основные блоки разметки (рис. 12.6, вверху слева). 4. Перемесnпе разделы div для каждого столбца. Вы должны nередвинуть каж

дый столбец своей страницы. Когда вы передвигаете их влево, они располага' ются бок о бок. Другой вариант- переместить левое боковое меню и главное содержимое влево, а правое боковое меню- вправо (nоскольку все столбцы определены в теге <di v> из шага тральным столбцом).

1, правое боковое меню

остается рядом с цен

ПРИМЕЧАНИЕ----------------------------------------------- Если вы не иrnольэуете главный тег <div>, как описано в шаге 1, то должны nереместить nравое боковое меню влево. В ином случае оно зацеnится эа nравый край окна браузера, создавая большой nромежуток между правым боковым меню и главным содержимым.

340 5.

Глава

12.

Разметка страницы на основе плавающих элементов

Установите пmрину для каждого столбца. Вы всегда: должны определять ши рину плавающего элемента. В зависимости от дизайна вы также можете доба вить отступы, поля и границы. Тем не менее имейте в виду, что полная ширина

столбцов в окне браузера

это сумма значений СSS-свойства wi dth, левых и пра

вых полей, отступов и границ для каждого столбца. И здесь появляется мате матика. Если вы невнимателъны, полная ширина столбцов может превыситъ

<di v>, что вызовет страшные перепа 4 Предотвращение перепадов плавающих

ширину, предоставленную главным тегом

ды при перемещении (см. подраздел

элементов~> разд. 4Преодоление проблем перемещения~> этой главы). ПРИМЕЧАНИЕ~--------------------------------------------- Свойство width не определяет полную ширину, которую элемент занимает на экране. Поля, отступы и границы также учитываются. Если вам плохо знакомы эти параметры, прочтите раэд. «Понятие

блочной модели» .гл.

чтобы освежить в памяти теорию блочной модели в

CSS.

Добавьте левое поле к главному столбцу. Именно здесь методика отрицатель ных полей отличается от методов разметки, описанных ранее в этой главе.

Левое поле должно занимать то же пространство, что и левое боковое меню. Если ширина левого бокового меню главного столбца шириной

- 160 пикселов, то установите левое поле 160 пикселов: ma rgi n- l eft: lбОрх. Схема на рис. 12.6,

вверху справа, показывает страницу такой, какая она есть в данный момент.

Заштрихованная область слева от главного столбца

(3) представляет его левое

поле.

Или, скажем, левое боковое меню занимает

160 пикселов в ширину, а вы хоти 10 пикселов между меню и главным содержи мым страницы. В этом случае добавьте 10 пикселов к левому полю главного столбца: l eft edge: 170рх.

те иметь промежуток размером

Наконец, когда у левого бокового меню есть отступы и границы, их также нуж но разложить на составляющие. Предположим, левое боковое меню шириной

160 пикселов имеет правую границу размером 2 пиксела и левый и правый 1О пиксело в и вы хотите иметь промежуток 1О пикселов между ним

отступы по

и главным столбцом. С,ложите все это вместе, чтобы получить значение левого поля для главного столбца. Так, 160 (значение ширины)+ 2 (правая грани ца)+ 10 (левый отступ)+ 10 (правый отступ)+ 10 ( промежуток между боко вым меню и главным столбцом) =

192 пиксела (margi n- l eft:

Примените отрJЩательное поле к тегу

192рх).

<div> левого бокового меню.

На дан

ный момент левое боковое меню перемещено влево, но, поскольку оно идет после главного столбца в исходном НТМL-коде, оно появляется в правой части

главного столбца (см. рис.

12.6, вверху справа). Чтобы поставить его на место, используйте отрицательное поле, которое передвинет боковое меню параллель но главному столбцу к левому краю страницы. Единственная сложность- вы

числить, какое значение должно быть у отрицательного поля, чтобы пере меститъ боковое меню точно на расстояние, необходимое для размещения его в левой ча:сти страницы. Другими словами, левое поле должно занимать про

странство, равное расстоянию от правого края главного столбца до левого края основного тега

<di v>.

341

И01ольэование плавающих элементов в раэметках

Порядок описания в

СSS-разметка

HTML

~IJ-заrолов

баннер

[ fJ

81 основ н ое содержимое

левое боковое меню

nравое боковое меню

-,. -

левое поле

1 g

... ... 111

119

1-------+----------------~1111 основное содержимое левое nоле

ширина

1------ - - - - -- - -- - - -- - - - - - - - - 1 11 левое боковое меню отрицательное левое nоле

Рмс.

12.6. Можно nоместить разделы div в любом порядке 8

НТМL-коде (вверху спева)

и расnоложить их nроизвольно на экране (внизу). Секрет заключается в исnользовании отрицательных nолей для втя гивания элемента, оnисываемого 8 коде nозже, над элементом, предшествующим ему

342

Глава

12.

Разметка страницы на основе плавающих элементов

Чтобы определить это значение, сложите ширину главного столбца, левые и правые поля и отступы, а также левую и правую границы. Скажем, главный

столбец занимает

400 пикселов в ширину, имеет границу толщиной 1 пиксел, 10 пикселов и правыйотступ- 15 пикселов, а также

левый отступ размером

192 пиксела левого поля для размещения левого бокового меню.

Просто сложи

те цифры, чтобы получить ширину левого поля левого бокового меню:

400 + 1 + + 1 + 10 + 15 + 192 = 619. Затем добавьте левое поле к стилю, форматирующе му левое боковое меню, но сделайте его значение отрицательным: left-margiп: -619рх:. Установка знака «минус!> -решающий момент, который обеспечивает

всю работу.

Предупредите ошибки Iпtemet Explorer. Когда вы используете отрицательные поля, в

Internet Explorer версий 6 и

ниже проявляется странная ошибка, назы

ваемая ошибкой двой1tого поля. В этом случае

Internet Explorer удваивает левое

поле, которое применено к главному столбцу, полностью разрушая дизайн. Устранение этой проблемы состоит в добавлении свойства di sp l ау:

i nl i ne к сти

лю, форматирующему главный столбец (подробнее об ошибке двойного поля вы прочтете в разд. «Обработка ошибок в

Internet Explorer 6>>

этой главы).

Как только вы закончите с математикой, подход, основанный на отрицательных

полях, вознаградит вас своей гибкостью. Если вы хотите поменять боковые меню

. так, чтобы левое боковое меню переместилось

вправо, а правое

влево, то просто

поменяйте стили двух соответствующих разделов. Другими словами, заставьте

первое боковое меню перемещаться вправо, а второе боковое меню

влево, ис

пользуя отрицательное левое поле. Вы увидите отрицательные поля в действии

в обучающем уроке

2 этой

главы.

Преодоление проблем перемещения Когда вы начнете активно работать с

CSS,

то, как и многие веб-разработчики до

вас, вероятно, столкнетесь с некоторыми сложностями при работе с перемещаемы ми (плавающими) элементами. В этом разделе описаны некоторые распространен

ные проблемы и пути их решения. Если же вы когда-либо столкнетесь с проблемой, которая не описана здесь, то всегда можете спросить о ней на одном из онлайн

форумов или списков обсуждений, перечисленных в приложении

ПРИМЕЧАНИЕ----------------------------------------------- Когда дело доходит до проектирования страниц, которые должны работать в Iпterпet

Explorer б,

появляется еще больше потенциальных ловушек. Их так много, что я посвятил им целый раздел этой главы (см. разд. «Обработка ошибок в Iпterпet

Explorer

б»).

Отмена и установка перемещения для элементов Перемещаемые элементы

мощные средства проектирования, поскольку позво

ляют содержимому обтекать их вокруг. Перемещение фотографии позволяет тек

сту, находящемуся под ней, продвинуться вверх и <<обернуться!> вокруг изображе ния (см. рис.

12.1).

Даже если вы создаете дизайны, основанные на плавающих

343

Преодоление nроблен nеремещения

столбцах, иногда не нужно, чтобы содержимое передвигалось и оказывалось рядом с перемещаемым элементом. Например, вы хотите хранить записи об авторском ораве, контактную информацию или другие подробности у основания веб-страни цы, ниже остального содержимого.

В дизайнах с двумя и тремя столбцами, которые мы уже рассматривали, если главный столбец короче любого столбца с плавающим боковым меню, нижний колонтитул может передвинуться вверх , оказавшись рядом с левым плавающим

столбцом (рис.

12.7, слева) . Чтобы заставить нижний колонтитул остаться внизу

под боковыми меню, вы можете использовать свойство

c1ear (см . разд.

~Управле

ние обтеканием содержимого плавающих элем.ентов• гл. 7). Оно устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Вы мо-.

жете отменить обтекание с левого края элемента. При этом все другие элементы на этой стороне опустятся вниз и будут располагаться под текущим элементом (с 1ear : 1eft : ). Аналогично свойство с 1е а r: ri ght; отменяет обтекание с правой стороны элемента. Для нижнегоколонтитула и других элементов, которые должны оказаться

у основания страницы, вы должны устранить как левое, так и правое обтекание:

#footer { clear : both: }

CD:iD

....,..._... . . . _~~tf'fiК<I-....c"'t~:o4

...... ....

.-..,..,-,~.."..".~«~t*"tot"~ flot~tll,_..,.....

-..-..

............ ... vt•~---<..,__..c- ..~.411-.- •-""~~ ~·----~p.o~loqeOI,

--·~--·-·

_.... .. ... ... U"_"_ ..... .,._, (><n----·-· ... Ио- ....-~ •• -,_~~!\оо!о! ........... ..., ... ........ ... ..........",,""'"~"""''"--'"'--..... ,....... . ..

~~..__".ьn.;...,.,..,.._м,_...,.~ _.~,..

·"·~·-w· "'"""f•'"'

-~_."".

·-·-~--•"J.Н..••

._,.._,,...~\;JO'ot

OOII·~:~>t~J

,..,_.и....,.~.'\lt....ь-н-~

.....

--·UP.I...,_~_,..~"'""""-"IIC..,. CIIU-(~IoМI

...... "'''i~ .........

____.. -..

......._,.

Рис. 11.7. Нижний колонтитул должен оставаться внизу страницы, независимо от nеремещаемых элементов. Чтобы добиться этого, исnользуйте свойство

clear

Другая проблема появляется, когда вы перемешаете один или несколько эле ментов внутри неперемещаемоrо содержимого тега, такого как тег

<div>.

Когда

перемешаемый элемент выше, чем остальное содержимое в разделе, он придержи

вается основания содержащего его объекта. Эта путаница особенно заметна, если у т~га есть фоновый цвет или граница. В веб-странице на рис. 12.8 есть тег <div>, в котором определены тег <hl> и два столбца, созданные перемещаемыми. Фон игра ница, которые появляются только вокруг заголовка, в действительности применя

ются ко всему тегу

<di v>, включая область с двумя столбцами . Однако, поскольку

344

Глава 12. РаЗметка страницы на основе плавающих элементов

столбцы перемещаемые, они выходят за пределы основания блока вместо того, чтобы расширять границы области . Пример подобной проблемы показан на рис. 12.8, внизу. В этом случае каждое изображение перемещено влево внутри содержащего тега <div>, в котором задана граница. Поскольку изображения выше, чем их блоки, они выходят за пределы оснований блоков. К сожалению, этот пример еще хуже, чем предыдущий, потому что каждый рисунок заставляет нижнее изображение перемещаться вправо, созда вая «ступенчатый~ эффект.

) Contdннng Flo~ts

/.\ozilla f ~refox

;~-;:с, ,-Х

Bathtub H_ydroponics Ti~ & Watch the Water Leve)__

& Cast-Iroi_! No-No_s _ __

Lorem ipsum dolor sit amet, consectetuer adipisdng elit, sed diam nonummy niЬh euismod tinddunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerd tэtion ullamcorper susdpit lobortis nisl ut aliquip ех еа commodo consequat. Ouis autem vel eum iriure d

lorem ipsum dolor sit amet, consectetuer adipisdng elit, sed diam nonummy nibh euismod tinddunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerd tatio

Рмс.

12.8.

Перемещаемый элемент может выйти за nределы содержащего его блока.

Если в блоке оnределены фоновый цвет или граница, то выходящие элементы могут выглядеть

так, как будто даже не являются частью блока (вверху). Кроме того, nеремещаемый элемент может врезаться в другие элементы, создавая «стуnенчатый» эффект (внизу)

ПРИМЕЧАНИЕ----------------------------------------------4тобы получить хорошее объяснение того, почему перемещаемые элемекrы моrут выходить за nре

делы содержащих их блоков, зайдитенасаКт www.c;omplexspiral.com/publications/containing-floats/.

345

Преодоление проблем перемещения

У вас есть много способов избавиться от проблем, возникающих с перемеща

емьiми элементами. Мы рассмотрим их все, чтобы у вас был выбор.

О Добавьте •освобождающий• элемент к основанию блока. Это решен.ие наиболее простое. Нужно лишь добавить тег, определяющий, например, разрыв строки или горизонтальную линию, в качестве последнего элемента в теге

<di v>,

содержащем перемещаемый элемент (то есть прямо перед закрывающим тегом

</ di v> ).

Затем используйте свойство с l е а r, чтобы укрепить этот дополнитель

ный тег под перемещаемыми элементами.

Этот метод расширяет блок, выявляя его фон и границу. Вы можете указать разрыв строки-

-<br cl ass

<br> (HTML) или <br/> (XHTML)- и добавить к нему класс: "cl ear" />.Затем создайте для него такой стиль:

br.clear { clear: both; } Проблема, связанная с этим решением, заключается в добавлении дополнитель ного кода

HTML.

О Сделайте перемещаемым элемеш-кошейнер. Более легкий путь состоит в том,

чтобы просто сделать перемещаемым тег

<div>, который содержит плавающие <div> расширяется так, чтобы полностью элементы. На рис. 12.9, вверху, тег <div>, содержа

элементы. Перемещаемый контейнер вмещать любые плавающие

щий заголовок и два плавающих столбца, перемещен в левую сторону страницы.

При необходимости вся его область- фон и границы- расширятся, чтобы соответств·овать всему, что находится внутри, включая перемещаемые элемен-

ты. Это странно, но это так.

Если вы выбрали этот путь, убедитесь в том, что добавили свойство с l е а r к лю бому элементу, который следует за перемещаемым контейнером. Так вы гаран тируете, что следующий элемент будет находиться под контейнером. О Используйте свойство

overflow:hidden.

Другой распространенный метод со

стоит в добавлении следующих двух свойств к стилю блока-контейнера:

overflow: hidden; zoom: 1: Свойство

overfl ow: hi dden -

одно из странностей

CSS. Оно примуждает контей 1) добав

нер расширяться и содержать плавающие элементы. Часть кода ( zoom: лена только для

Internet Explorer 6 (и более ранних версий) и никак не влияет

на другие браузеры. Если вы хотите, можно поместить это свойство в отдельной

таблице стилей, используя условные комментарии были описаны в гл.

(все странности

zoom: 1

7).

В целом этот метод работает очень хорошо. Тем не менее, если у вас есть абсо лютно расположенные элементы внутри контейнера, они могут не отображать ся. Вы можете попасть в такую ситуацию, если у вас есть выпадающее меню внутри другого тега, и, когда появляются выпадающие элементы, кажется, что

они находятся за пределами элемента-контейнера. Если это так, используйте

какой-либо другой способ из описанных на этих страницах.

346

Глава

12.

Разметка страницы на основе плавающих элементов

О Примените •леrко очищающий метод•. Пользуясь этой методикой, созданной

Тони Эслеттом (Топу

Aslett),

разработчиком сайта CssCreator.com, и разработ

чиками сайта PositionlsEverything.com, вы добавляете всего несколько стилей и имя класса к тегу

<di v>,

содержащему плавающий элемент. Конечно, опреде

ление ~легко очищающий метод~ не совсем корректное, так как СSS-код в нем

совсем не легкий. Вы должны добавить три различных стиля к своей таблице стилей: один применяется для

Firefox, Safari, Opera, Internet Explorer 8 и других Internet Explorer 7 и более ранним

современных браузеров, а другие относятся к

версиям. Все вместе это выглядит следующим образом:

.clear:after { content : " . " : display: Ыосk: height: 0: font-size: 0: clear: both: visibility: hidden: } . cl ear { zoom: 1: Как только вы внесли эти стили в таблицу стилей, вы просто добавляете назва ние класса к разделу

пределы блока:

div, содержащему плавающие элементы, который выходят за <class div = "clear"> (рис. 12.9, в1tизу). Этот метод очень надежный,

но, в отличие от двух предыдущих, потребует добавления дополнительного кода

HTML. ПРИМЕЧАНИЕ----------------------------------------------- Испольэование свойства

zoom

приводит к тому, что ваша страница не пройдет проверку СSS-кода

на корректность. Чтобы обойти это, вы можете поместить это выражение (наряду с любыми други

ми специальными стилями для Iпtemet

Explorer)

во внешнюю таблицу стилей и присоединить ее

к вашим веб-страницам, используя любую из методик, описанных в гл.

15.

Соэдание столбцов на всю высоту НТМL-таблицы не совсем подходят для разметки неб-страницы. Они добавляют

много кода, их трудно обновлять и они не работают так же хорошо в альтернатив ных браузерах, например тех, что используются в мобильных телефонах. Но, что касается разметок, у таблиц есть один плюс

это возможность создавать столбцы

равной высоты. Их применение позволяет добавлять фоновый цвет или графику к отдельному столбцу и делать так, чтобы они заполняли всю высоту страницы. Фоны двух боковых меню на рис.

12.10, вверху, заполняются на всю высоту экрана,

создавая цельные границы с обеих сторон страницы.

Плавающие элементы

CSS, с другой

стороны, немного недорабатывают в этом

отношении. Ячейки таблицы в строке всегда одной и той же высоты, чего не ска жешь о блоках. Высота плавающего элемента обычно определяется его содержи-

347

Преодоление проблем перемещения

' ) Contoiвing Floats · Mozillo Fitefox

G]ГЕ!Гхi -~

--·

Bathtub Hydr~onics _ ! .i. . _s_______ & Watch the Water Level

& Cast-Iron No-Nos

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation utlamcorper suscipit toЬortis nisl ut aliquip ех еа commodo consequat. Duis autem vel eum iriure d

lorem ipsum dolor sit amet, consectetuer adipisdng efit, sed diam nonummy niЬh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio

Тhе Latest Addition

----·--·-··--- -----------·---Lorem lp.sum doJor sit 41met. consectetuer ..

1 .: Рмс.

12 .9 . Есть несколько способов сохранить плавающие элементы

внутри содержащего

их блока. Можно сделать плавающим сам блок (вверху) или исnользовать сnециальную комбинацию CSS, названную «nегко очищающий метод.» (вниэу)

мы м. Когда содержимого немного, элемент не очень высокий. Поскольку фоновое

изображение или фоновый цвет заполняют только IUiавающий элемент, у вас моrут получиться окрашенные столбцы , которые не доходят до основания страницы, как в обведенных кружком областях на рис.

12.10, внизу.

348

Глава

12.

Разметка страницы на осноВ(! мавающих элемеtПОВ

lofem IP*-"' doiOf 1111. мwt. CQnМC.tft.uet: ~ ellt. мd dМ! ~ ntlh fUISmOd ~t iЛ Lloofмt <tolot• m.tgna '*"'am ~с ~q>~t.. Uc ""'• f!fWn ~ Фirwl\ vt:n..am. qutS nostnкt t)WtJ UiUOf\ IA~tne011)er ~t 8oЬOttJS r8Sf ut ilqulp • ех оа с~ ~t. DuiS ~t.т v~ eum nre. vou11 flnd mote infonn•Ьon hoete.

consкt~a.au ~ ellt. sed ~т nonummy nЬh et.I&IDOCI tilneloCЬ'!t ut ~eet OOIOt'e trl~ ~ •~t ~t.. Ut wwt t!fWn oild nwwn venam. ~ nootiNcf 4((ef'CI QtiOI." ~ ~t kJЬortlll NtJ Ut . . . .

L«tm 1psum cld« srt .amet.

е;к еа

commodo

consequac. OVrl ~tom vet eum 111ute.

u:кem IJ)5tml

dofor ~t ~~ consecteь.....- adiiplsи)O tit,.. se.d <Nm nonummy niЬtl ~ oncldw'lt ut &actмt dolore m..aqu.n erctt volutpi1L Ut ww ~ <1d rnnm ..........n, qu'$ nosЬ'Vd ~ tatкw'l ut.mtorper SU5aplt loOoa+tct tМ1 ut ~

•• м c0f1Wno60

conиqwc.

Ouis .Ntem ~~

e\.m ...."...

RubЬer Duckies Needл 't Apply

LOI'etn lp5Vm

•t.

conиcten.w ~ мd tuasМod ~t ut ~et dolofe ~

dolor •t _,.!,

cUm nonunwnv ~ ~t

'*'

v<»Jq:..tt. ut Wi$i ..... lld"'""' ~. qiJIS. nottiUO 8)'ttCJ QhOn ~МICorp.tl' IUS(фfC JoЬ«Iis nesl Ut ~ 'f).. U CoмrnodO cante<~U~f. Oul$ ~ vtl'l ~ "*118 LotМI !pSUm dоЬ' SIL ..wr.. c:onмctetuer .adlpd<::II"'Q elit. Ud r..ьh et.ISinOd ~t ut la«'Nt 6010tt ~

cNnt f'IOI'UWnY J~tqU&m

lf.at

vtNtp~t.

•x.en:.•

Ut ._.. erwn ad""'""' v~.

kOotor,..., ut ~

мsttud t.t~ ~Офеf' .U.Ciplt t1t 8)' commodo c~~t ~ aut.tm "" tu1n

n"re.

& Cast-Iron No-Nos

.pam dolм s.t ~~ consectet\1« ~ Иt. Nd nonunwny nЬh ~mod ~t ~t ~t ~ ~·

L.oft!m

dlгm

~ tt;1t YOivtPat. Ut "'~&~......." ~ ~t~nm ~. qi.A$

nostrud exen:::t t•ьon !Aamcotpef' s-.utc:ф~t loЬotOt М1 ut lliqulp •к

•• е:~ ~.at. eu. .:м..t41М .,., ...- .-.... You'l ~

more .,f«m.taon мr•.

& Watch tJJe \Vat.er Level I.Otetl\ IPS'A'fl' dоЬ- Stt ;amet, C~4!C[~tuef' ~'"IQ . .t, sed niЬh ~ ~tut ~eet~~ а~ et~t YOiutpat. Ul ws erwn ~ ri8VJ' wtl.1tl1• ...,. nostrud uerc1 taьon ulamcofJ'« .uк!plt kiOorDt tiiSf tJt - . . e~t •~ commodo constquat. O...S auttm vfl eun -.nu-e.

cNmnonummy

u:.rem .,..n dotor Slt .ntt, conмc:te.tul!f a~II'IQ ~t. .S8d (Qm tvJtUrltffll niЬf'l eiJIAIIOd tJncкlunt Ut ~OfHt dolof't: ~ Иqu4\fn volutpaL Ut WtSt ~ 41<1 ,.._1 У@,..., q.a nostrud exete1 uьon uЬmcOfPN SUSC:IIPtL ki<ЬOC"t»s nr$1 ut ~ •• еа COfМ'IOdo conиqu;at. OUis ~ut.,., v«f w.A ........

••t

RttbЬer Duckies N~ 't Appl)'

L«МI ap:;un dokw

Stt ~~Мt, CotiSKt•t~.~~~r ~"'Q tll'* lt:d f'I.JtttnOd O'ladunt Ut ~С' dolate thlgN

~ r\IЬh

-~~ VOIYtp.tt. Ut М11 OI"Wtt . , 1'I'WWft; ~ qtli!S tXtfQ tataon ~ tut~ 1oЬott,. n86l ut ~ uм~~t.OU.. ~«1\vt.J

e.,.mnn.

lorem IP5U"' dolof tet .a.'fltt.. c.on..cc.tutr ~"'9 .Ь.t, ~ ntii'UМ\y ~ tuiCmOd ~t IJt ~t

мd

dolote ~

altquam: tlat volutpJ~ Ut o;rrt;.~ .-n .-cr nwwn ~ qu.s nosttu<J extra uocn tiЬtnc:Ot'P'ft' RtSQPt ~ьs ..-щ aiqulp t•U C:~~t . ~.8Utttfi"V4tt:U!'inur9.

А Cast-I ron No-Nos 1..0«m ~ dok>f' Slt .;met, 1:Ьт

ttЬh

ccns«te.tu!N adlpc:sQtlg ek, sod eutsmod ~t tit lacrмt ~~ м.gn.a ut w.sa enm ~ mll"'lm vtnioМI

Рмс.12.10.Левое и правое боковые меню (вверху) покаэывают, как четкие фоновые цвета

помогают виэуально ра3Делять области страницы. Когда фон бокового меню реэко nрерывается (внизу), появляется пустое пространство, что выглядит непривлекательно

349

Преодоление проблем перемещения

Но, как и у большинства проблем, связанных с

CSS, здесь существует обходной

путь. Секрет состоит в том, чтобы добавить фоновые изображения к тегу, который

включает в себя «приземистое• боковое меню и другие столбцы на странице. Ска

жем, в вашем НТМL-коде есть два тега <di v>, в которых определяется содержимое дЛя левого бокового меню и главного текста страницы:

<div id=''sidebar">Sidebar content here</div> <div id="main">Main content for page. this column has much taller than the sidebar.</div> Тег равна

lot of text and is

<di v> бокового меню перемещается к левому краю страницы, и ширина его

170 пикселам.

Поскольку в боковом меню немного текста, оно короче, чем

основное содержимое. Предположим, что вы задаете этот тег-«упаковку•

<di v>

таким образом:

<div id="wrapper"> <div id="sidebar">Sidebar content here</div> <div id="main">Main content for page. this column has much taller than the sidebar.</div> </div>

lot of text and is

Внешний блок вырастет и станет таким же длинным, как самый высокий эле мент внутри его, так что, даже если содержимое

#main очень длинное, обертываю щий блок di v будет такой же высоты. В этом все волшебство: создайте стиль для обертывающего тега <di v> с фоновым изображением, ширина которого равна ши рине бокового меню, подобрав нужный фоновый цвет. Таким образом, если фоно вое изображение повторяется вертикально, оно формирует сплошную полосу вы сотой, равной высоте обертывающего блока

di v (рис. 12.11, вверху).

#wrapper { background: url (images/col_bg.gif) repeat-y 1eft top: } Браузеры показывают это фоновое изображение прямо под боковым меню, соз давая иллюзию того, что у меню есть фоновый цвет. По существу, вы создаете

«ложный столбец• (это название впервые употребил Дэн Цедерхольм

( Dan Ceder-

holm}, разработавший данную методику). ПРИМЕЧАНИЕ----------------------------------------------- Вы не ограничены чистыми цветами. Поскольку доnускается использовать изображения, можно

создать декоративный узор, который будет чередоваться до конца страницы.

Пр именение этого метода для двух столбцов немного сложнее. Во-первых, нуж

но добавить два обертывающих блока:

<div id="wrapperl"> <di v i d="wrapper2"> <div id="sidebarl">Sidebar content here</div> <div id="sidebar2">Second sidebar</div> <div id="main">Main content for page, this column has and is much taller than the two sidebars.</div> </div> </div>

lot of text

350

Глава

...... .......

12.

Раэметка страницы на основе nлавающих элементов

#wrapper { background-lmage: url{column_bg.gif); background-repeat: repeat-y; background-position: left top;

. l[i:;

#wrapper1 #wrapper2

Рис. 12.11. Для nолучения фоновых изображений на всю высоту nлавающих столбцов

нужно обратиться к некоторым доnолнительным тегам <div>. Добавляя к ним фоновые цвета, вы создаете видимость столбцов одинаковой высоты

ПРИМЕЧАНИЕ----------------------------------------------- Еспи «уnаковка» и каждый столбец имеют фиксированную ширину, вы можете создать видимость

«ложного столбца» для левого и nравого меню всего с одним иэображение.м и «обертывающим» блоком. Просто сделайте рисунок таким же широким, как «УПаковка», и эадайте для левой стороны

изображения цвет и ширину левого бокового меню, а для nравой стороны - цвет и шИрину nравого бокового меню. Центральная часть должна соответствовать фоновому цвету центрального столбца.

Если nервое боковое меню nроявляется на левой стороне страницы, а второе боковое меню - на nравой стороне, то создается два стиля. Применяте один стиль к первому обертывающему тегу <di v>, чтобы добавить фон к левому боковому меню; друrой же стиль nримепите ко второму обертывающему тегу <di v>, добавив фон к правому боковому меню (рис.

12.11, вн.изу).

#wrapperl { background: url(images/coll_bg.gif) repeat-y left top : } #wrapper2 { background : url(images/col2_bg .gi f) repeat-y right top: }

351

Преодоление проблем перемещения

При добавлении фонового изображения к правому столбцу убедитесь, что вы размещаете изображение вверху справа во второй ~упаковке• так, что оно свобод но простирается под вторым боковым меню на правой стороне страниЦы. ПРИМЕЧАНИЕ----------------------------------------------- Если для определения ширины столбцов вы применяете проценты, то будет труднее создать иллю зию столбцов на всю высоту, используя графику. Однако это по-прежнему возможно. Чтобы узнать,

как это делается, зайдите на сайт www.commuпitymx.com/coпteпt/artide.cfm?page=l&dd=AFCSB.

Предотвращение перепадов плавающих элементов Может случиться так, что внезапно один из ваших столбцов просто опустится под другими (рис.

12.12, вверху).

Видно, что есть много местадля всех столбцов, чтобы

они отлично сосуществовали бок о бок, но это не получается. Можно сказать, что у вас проявились перепады плавающих элементов.

Плавающий столбец опускается вниз, потому что недостаточно места, которое бы ему соответствовало. Будьте осторожны, если вы устанавливаете ширину для каждого столбца. Если ширина доступного места в окне браузера (или содержаще го блока в дизайне с фиксированной шириной) меньше общей ширины столбцов, то могут появиться перепады. Кроме того, не забывайте о блочной модели в

CSS:

как обсуждалось в подразделе <<Вычисление фактических размеров блочных эле ментов• разд. ~определение параметров высоты и ширины• гл.

7, ширина элемен

та, отображаемого в окне браузера, не определяется лишь значением его свойства

wi dth. Отображаемая ширина любого элемента -это комбинация его ширины, раз меров левой и правой границ, левого и правого отступов, а также левого и правого

полей. Для соответствия столбцам окно браузера (или содержащего блока) долж но подстроиться под общую ширину. Возьмем, например, простую разметку с тремя столбцами, представленную на

рис.

12.12.

Как вы можете видеть на верхнем изображении, эти три столбца не со

гласуются. Рассмотрим, из чего состоят элементы приведеиной страницы.

:::>

Обертывающий блок. Обертывающий тег <div> с фиксированной шириной заключает в себя весь дизайн. Его ширина равна

760 пикселам, таким образом,

все три столбца не могут быть в сумме шире, чем это значение.

::>

Первое боковое меню (с левой стороны). Его ширинау него также есть отступы по ной па+

::>

1О

150 пикселов,

но

пиксело в, что делает общую ширину меню рав

170 пикселам ( 150 пиксело в ширины 10 пикселов правого отступа).

Главное содержимое. Имеет ширину

меню

+ 1О

пиксело в левого отсту

390 пикселов, а также включает по 1 пик 15 пикселов левого и правого полей, что делает полную ширину равной 422 пикселам (390 пикселов ширины содержимого + 1 пиксел левой границы+ 1 пиксел правой границы + 15 пикселов левого поля+ 15 пик

селу обеих границ и по

селов правого поля).

352

Глава

1S1de~-

12. Разметка страницы на основе плавающих элементов

Main content for this page.

content here lnaccurateC.y c5culated widths are one of the main c.auses of -cotumns that drop betow other col.umns. ln this case the .width of the ieft stdebar and main content are too wide to ·~ow the r1tjht sidebar to fit 1пtо р(асе.

Stdebar content here

L------------------------------------------------

r ~:~~; he<e- мat~-~=~te:t~for th~s-p~e :=,~--~~~--l lnaccuratel.y caicutated Wldths are оп е of the mi!llln causes of cal.umns thot drop bet.ow other cdum.ns. ln this case the wtdth of the left sidebar and mёrin content are too wide to

allow the r1!ht sldebм to

l_______ Sldebar content here

lnto ptoce.

Sidebar content here 1

__________________________j

Main content for this page.

Stdebar

lnoccuratel.y c5cutated w;dths are one of the main causes of .-col.umns that drop bet.ow other cotumns. ln this case the

content here

wtdth of the left sldebar and main cOntent are too wide to allow the r1!ht sidebor to flt into ptoce.

Рис. 12.12. Когда ширина плавающих элементов хоть на волосок больше содержащего их блока, последний элемент опускается ниже других (вверху). Отрегулировав все элементы путем удаления небольших значений ширины, отступов или полей, вы можете решить nроблему (внизу)

О Второе боковое меню (с правой стороны). Ширина этого элемента равна

150

пикселам. Он также включает в себя по

отступов; в результате получается

10 пикселов левого и правого 170 пикселов, как и дл:я первого бокового

меню.

Фактическая ширина всех добавленных элементов составляет 762 пиксела. Это

на 2 пиксела больше, чем ширина обертывающего тега <di v>. На рис. показава рамка вокруг тега

<di v>

12.12, посередине,

для главного содержимого, которая обозначает

его полную ширину вместе с полями. Всего двух лишних пикселов ширины ( обве

дены кружком) достаточно для того, чтобы заставить столбец опуститься вниз. Решение заключается в удалении области размером

2 пиксела

из любого эле

мента. Для этого измените левое и правое поля гЛавного содержимого с

14 пикселов,

до

что даст вам дополнительное место, необходимое для размещения

всех трех столбцов, которые теперь будут находиться рядом.

Обработка ошибок в

353

Intemet Explorer б

Чаще всего именно из-за неверно оцененной ширины столбцов происходят пе репады плавающих элементов, однако это не единственная причина. Рассмотрим, что еще может стать поводом для перепадов.

О Ошибки округления при расчете ширины в процентах. Будьте осторожны, когда устанавливаете ширину в процентах. Браузеры иногда делают ошибки

при вычислении фактического количества пиксело в, необходимого для отобра жения объекта на экране. Таким образом, они могут округлить числа в большую сторону, делая элементы немного шире, чем доступное место. Будьте внима

тельны и сделайте полную ширину немного меньше

100 %.

О Ошибка двойного поля в Iпtemet

Explorer 6. В некоторых случаях Internet Explorer версий 6 и ниже удваивает поле, добавленное к плавающему элементу,

делая его шире, чем он отображается в других браузерах. Если перепад плава ющих элементов у вас проявляется только в этом браузере версии

6 или ниже,

то причиной может быть именно эта ошибка. Как решить эту проблему, расска

зывается в подразд. ~ошибка двойного поля~ следующего раздела. О Трехпиксельный промежуток в Iпtemet версий

Explorer 6. Иногда Internet Explorer 6 и ниже добавляет дополнительные 3 пиксела к краю плавающего эле

мента. Опять-таки, если вы видите, что перепады плавающих элементов наблю даются только в этом браузере, причиной может быть данная ошибка. Как решить

эту проблему, рассказывается в подразделе <<Трехпиксельные промежутки~ следующего раздела.

•

О Курсивный текст.

Internet Explorer 6 отличается и здесь. Если плавающий эле мент содержит курсивный текст, Internet Explorer 6 иногда делает этот элемент шире. Когда у вас происходят перепады плавающих элементов, а внутри их есть

курсивный текст, проверьте, появляется ли эта проблема во всех браузерах или

только в

Internet Explorer.

Чтобы устранить ее, вы можете удалить курсивный

текст из бокового меню или добавить свойство

overfl ow: hi dden

к стилю, форма

тирующему боковое меню. Подведя итоги, можно сказать, что перепады плавающих элементов всегда вы

званы недостаточным количеством места для размещения всех столбцов. Вместо

того чтобы стремиться использовать каждый свободный пиксел экрана, задайте всем элементам немного больше места <<для раскачки~. Возьмите в привычку де лать общую ширину столбцов немного меньше, чем это необходимо, и вам придет ся гораздо реже устранять неисправности, связанные с перепадами плавающих элементов.

Обработка ошибок в

Internet Explorer 6

Браузер Internet Explorer очень многие СSS-стили воспринимает ошибочно, осо бенно когда дело доходит до разметок, основанных на перемещаемых элементах. Эти ошибки могут затронуть размещение этих элементов и выделенную им общую ширину. В лучшем случае в

Internet Explorer ваша страница будет выглядеть прак

тически так же, как и в других браузерах. В худшем случае эти ошибки могут

354

Глава

12.

Разметка страницы на основе плавающих элементов

вызвать существенные проблемы отображения, например перепады плавающих элементов, которые рассматривались в предыдущем разделе.

В этом разделе мы рассмотрим самые распространенные проблемы и поговорим о том, как их решить.

ПРИМЕЧАНИЕ----------------------------------------------- Посмотрите врезку «Часто задаваемые вопросы» в раэд. «Псевдоклассы и псевдоэлементы» гл. З, чтобы узнать, стоит ли волноваться по поводу ошибок, связанных с этим брауэером.

Ошибка двойного поля Internet Explorer версий 6 и ниже иногда удваивает размер поля, который вы доба вили к плавающему элементу. Эта проблема появляется, только если поле добавле но с той стороны, к которой перемещается элемент,

левое поле в перемещенном

влево элементе или правое поле в перемещенном вправо элементе. На рис.

12.13

можно увидеть перемещенное влево боковое меню для навигации по сайту. Чтобы добавить небольшой промежуток между ним и левым краем окна браузера, к боко вому меню добавляется левое поле шириной

10 пикселов. Большинство браузеров, включая Internet Explorer 7 и 8, Safari и Firefox (см. рис. 12.13, вверху) добавляют требуемое пространство шириной 1О пиксело в. Однако Internet Explorer 6 (см. рис. 12.13, внизу) удваивает поле до 20 пикселов. Даже при относительно ма.gеньких полях страницы будут существенно различать ся. Кроме того, если верстка очень плотная, с точно заданными плавающими эле

ментами, расположенными бок о бок, то удвоенное поле может легко вызвать пере пады плавающих элементов (см. подраздел ~Предотвращение перепадов плавающих

элементов!> разд. ~преодоление проблем перемещения!> этой главы). ПРИМЕЧАНИЕ----------------------------------------------- Такое удвоение поля происходит, только если край элемента касается края содержащего его блока, поэтому, когда элемент перемещен влево вплотную к другому перемещенному влево элементу, его левое поле не удваивается.

Решение простое

добавьте свойство

di sp l ау: i nl i ne:

к СSS-стилю для пла

вающего элемента:

#sidebar { fl oat: l eft: margin- left: lOpx: width: lбОрх: display: inline; В этом случае свойство di sp l ау применяется лишь для устранения ошибки брау зера

Internet Explorer.

На самом деле единственная причина, по которой оно здесь,

состоит в том, чтобы заставить боковой элемент ~иметь разметку!>. Как альтерна тивный вариант вы можете использовать

zoom: 1 вместо di sp l ау: i nl i ne. Пере di sp l ау i nl i ne не изменяет этого (подробнее о свойстве di sp l ау читайте в подраз

мещаемые элементы всегда являются блочными, и присвоение свойству значения

деле ~отображение встроенных и блочных элементов!> разд. ~Управление размерами

ОбРiбоn<а ошибок в

355

Intemet Explorer б

IAIHIIB 10

nикселов

НУ!

Lorem ipsum dolor sit , diam nonummy niЬh et magna aliquam erat V<' quis nostrud exerci ta • aliquip ех еа commodo You'll find more inform.

lt. Watch the w. Co~mof:..trm!:tt . cotn bett ct v~~ that vour

priva-t:y •S rmportant. All mon1tи•n9 that t;ak~ t pi•<E: •s you vf$•t <'tur s.1tct 1s p rotct«4!d.

Ln(Qrt.m• tion c:o ll ~tr..:d 'с ' • mit~d t,~ t>\•f ""!'t\•l!']r't.- ...,1

#sidebar { tloat: left; margin-left: 10рх; width: 160рх; }

Lorem ipsum dolor sit , diam nonummy niЬh е~. magna aliquam erat vc quis nostrud exerci ta>. aliquip ех еа commodo Lorem ipaum dolor sit , di.~m

non•.1mmv n1bh

t:-·

Со>mоГ armer . IЛICrosoft lnternet E.xplorer

IAIHII B Н\ 20

nикселов

Lorem ipsum dolor sit diam nonummy niЬh е· aliquam erat volutpat nostrud exerci tation , ех еа commodo cons ~ fin.d more information

& : с." "'(•f a!~r. ~r , .~· n o~f'"" '"' c>i·

tt•,l•t\.ut

~'"'i'.· ,S( '.' l i IГ•1POrt~"t·

J.l! "r'l()<'\ltOt)r·9 t h ;;' t ~ k<::: f:'l iH ~ IJI :;. •(\.'U ·:~S. •t ~•• r : .~ ~· : ~ {• : . ~':...... .

,, ..,

Watch the \ '·.

Lorem ipsum dolor sJt diam nonummy niЬh е aliquam erat volut:pat . nostrud exerd tation ' ех еа commodo cons~ L~rem Jpsum dolor sit rti"":trn r'f)"'''"'"'\' 11ibh

Рис. 1 2.13. Левое nоле, относящееся к nеремещенному влево элементу, должно смещать элемент на

1О nи кселовот левого края

страницы. Flrefox (вверху) все делает nравильно,

а lnternet Explorer 6 (внизу) удваивает это поле, эначительно иэменяя вид страницы

356

Глава

полей и отступов~ гл.

12.

Разметка страницы на основе плавающих элементов

Однако, хотя это свойство не затрагивает другие брау

7).

зеры, вы можете захотеть поместить его в стиль, предназначенный специально для

Internet Explorer, используя #sidebar { fl oat: l eft: margin-left: lOpx; width: lбОрх;

конструкцию*

html:

}

* html #sidebar { display: inline: } ПРИМЕЧАНИЕ----------------------------------------------- Особенность использования условных комментариев

CSS

Intemet Explorer

позволяет еще лучше

изолировать стили, предназначенные только для этоrо брауэера, чем это делает конструкция

* html.

Внешняя таблица стилей, присоединенная к странице через условный комментарий, читается толь ко браузером

Internet Explorer

и игнорируется всеми остальными (подробнее об этом рассказыва

ется в подразделе «Изолируйте ление браузером Interпet

CSS для Intemet Explorer условными Explorer» гл. 15).

комментариями» раэд. «Управ

Трехпиксеnьные промежутки Internet Explorer

версий

6и

ниже добавляет промежуток размером

3 пиксела

ме

жду перемещаемым и неперемещаемым столбцами. Точное его размещение зависит от нескольких условий.

О Для неперемещаемого столбца не установлена ПD1рина или высота. Если для столбца рядом с плавающим элементом не заданы никакие размеры, то вы уви

дите трехпиксельное смещение текста внутри столбца. Это смещение проявля ется только вдоль плавающего элемента, так что, когда элемент заканчивается,

текст вновь возвращается к левому краю столбца (рис. Лучшее решение в этом случае

12.14 ).

просто не обращать внимания. Дополнитель

ный отступ не очень раздражает и не сдвигает элементы на странице. Но если стремление к совершенству внутри вас не позволяет допустить появление этой

ошибки, можете устранить ее, выполнив трюк, известный как «добавление раз метки~ (описан во врезке «Информация для опытных пользователей• далее).

Добавьте следующий стиль для перемещаемого столбца:

* html #mainColumn { zoom: 1; } Обратная сторона применеимя этого трюка

появление новой ошибки, кото

рая рассматривается далее.

О Для неперемещаемого столбца установлена ширина или высота. Если для столбца рядом с плавающим элементом все-таки заданы размеры, появляется другая ошибка

(рис.

12.15,

трехпиксельный промежуток между этими двумя объектами

слева). Эта ошибка более серьезная, чем описанная выше, так как

такой промежуток может вынудить второй столбец опуститься ниже плава ющего элемента (см. рис.

12.15, справа).

357

Обработка ошибок в Intemet Explorer б

Трехnиксельный отстуn

veniam, quls nostnкl exercl tilt:i ех ее commodo consequat. Dц . , Щкrtate vellt esse molest1e consequa.t ero eros et accunsan et iusto odlo df<o utem vel e;m iti..re dolor ln hendreti el i\li.tn dolore eu feu<!l&t rntla fac!Us

После nеремещения нет отстуnа Рис.

12.14. Левое боковое меню выдвигается влево, в то время

как центральный столбец не является nеремещаемым. Левая сторона этого столбца

углубляется достаточно далеко влево, так что столбец не «обертывается» вокруг основания бокового меню

Устранен ие этой проблемы проводится в два этапа. Сначала нужно удалить

левое поле неперемещаемоrо столбца (но только для

Internet Explorer версий 6

и ниже):

* html #mai nColumn { margin -left : 0: } Затем следует определить правое поле размером 3 пиксела для перемещаемоrо столбца. Это позволит по_дтянуть неперемещаемый столбец на ero место:

* html #sidebar { margin-right:

-Зрх :

}

В любом нормальном браузере эти стили не имеют никакого смысла. Некоторые полные решимости СSS-эксперты (очевидно, у которых много свободного вре

мени) придумали данные стили, чтобы заставить

Internet Explorer работать без

сбоев. Если хотите получить больше информации об этом феномене, зайдите

на сайт http://www.positioniseverything.net/explorer/threepxtest.html. Еще одно возможное решение состоит в том, чтобы сделать перемещаемыми все

столбцы. В примерах, лаказаиных на рис.

12.14 и 12.15, удаление левых полей из фиксированного столбца и перемещение ero либо влево, либо вправо позволит

358

Глава

12.

Разметка страницы на основе nлавающих элемеtПов

L.tt s!CS.Ь..r 1\onod Тhis cotumn has а !At wldttt, whlch . left (wldth 160) plxek о( whlt. spac• ь.tw.... slc~Мwar ar 10 drop.

Q_ 'ps>.rn dola< slt amet, consectet....-

~ tlncl<krt ut Laoreet dola<e 11>0!\N mfn1m ventem, quis nosuW exercf tcttiOn t.lt ьllqulp е~ е. <Omi10do consequм. Duls "'

V\Apuut<." veUt"""' mole<tle mnscquot, V< vero eros et iiCXtmS8\ e-t. tusto odfo dlgrtk-~ la<em lps>.rn doiO< slt amet, consectetuer eulsmod tlnci<Ь\t ut Laoreet dola<e magno rnlnfm vef'ltam, quis nostrud exercl tation ""' allquJp е1< е.> corrmodo consequat. Duls • • V\jputeh? veilt ~~ molesde> consequat, v< vero eros et aca.msan et iustO odlo dtgnls-s nn1lorem lpsut1 dotor s1t мW?t, c.onsecte n iЬh e..rt~ ttncidu\t ut L10reoet: dotofeo щ

Рис.

12.1 S.

Тhls column has а -

wldttt, which 8"- г plxol• of whtw spac• ь.twмn sic~Мwar an<' todrop.

lorem

lpsur~ doiO< sit amet.

,..tt~ · ·,...., "'

~ t~ollloPf

conoectetuer .ar fJn' ,......t'l'\4(!1\!1

Если один столбец nеремещен влево, а другой столбец с фиксированной шириной

«обертывается" вокруг него,

lnternet Explorer версий 6 и

ниже добавляет трехnиксельный

nромежуток между ними (слева). В ди3айнах с фиксированной шириной это может привести к смещению столбца под плавающий элемент (справа)

избежать nоявления любого из описанных вариантов nроблемы трехnиксельного nромежутка:

#mainColumn { float; left: Это решение кажется быстрым, но на самом деле оно сложнее, так как вам nри дется уnравлять еще одним nлавающим элементом в дизайне. ПРИМЕЧАНИЕ----------------------------------------------- Хотя многие ошибки в

IE 7 были устранены, некоторые все же встречаются. Прочитать о них вы http://css-discuss.incutio.com/?page=IE7. К счастью, брауэер IE 8, который все вытесняет IE 7, работает с CSS очень хорошо.

можете на странице сrре.митеnьнее

Другие nроблемы

Internet Explorer

Помимо оnисанных, в Internet Explorer версий 6 и ниже могут nроявиться еще некоторые ошибки разметок, основанных на nеремещаемых объектах. Многие из ни х настолько редкие, что вы можете никогда не столкнуться с ними в своих nро

ектах. Но на всякий случай уnомяну об отдельных возможных nроблемах, которые могут nоявиться nри просмотре страницы в данном браузере.

Обработка оwибок в

lntemet ~plorer

359

О Если нижняя часть плавающего элемента просто исчезает, это может быть

~ошuб1Gа zwzьomuны». Для получения информации о причине и способах реше ния зайдите на сайт

http://www.positioniseverything.net/explorer/guillotine.html.

О Содержимое внутри плавающего элемекrа не показывается , но иноrда про

является, если вы изменяете размеры окна браузера Или прокручиваете страни цу. Эту странность называют ошибкой peek-a-boo («На просвен ). Узнайте о ней подробнее на сайте http:/jwww.positioniseverything.net/explorer/peekaboo.html.

Как вы уже, вероятно, nоняли, в

lntemet Explorerб

Помимо zoom, есть несколько других СSS-свойств, также

nроявляется много ошибок nри отображении стра

включающих разметку в lnternet Explorer: pos1tion. absolute:,float: left:,float: right:,display· inl ine-taЫe:, любое значение width и height. Свойство zoorn хорошо тем, что не влияет на то, как

CSS. Некоторый базовый СSS-стиль, который прекрасно выглядит в lnternet Explorer 8, Firefox или Safari, разрушается в lnternet Explorer версий 6 и ниже. К счастью, nоnулярность IE 6 ниц, созданных с nомощью

элемент выглядит в любом друrом браузере, в отли

уменьшается, но1ем не менее им все еще nоль3)1ются.

чие от реальных свойств CSS, таких как w1dth и height,

Как оказывается, вы можете устранить многие ошиб

nозтому Safari, Firefox и другие браузеры благоnолучно

ки зтого браузера, nодключая сnециальное свойство

не замечают его. 3то значит, что вы можете исnользо

1ayout. Оно не относится неnосредственно к CSS и при

вать свойство zoom везде, rде нужно устранить ошибку

этом ничего не делает с nравилами

HJML. Это nросто концеnция, встроенная nроектировщиками в lntemet Explorer (версий 7 и более ранних). При необходимости

!Е, добавляя разметку к элементу и nри этом не оnаса

браузер оnределяет, нужна элементу страницы раз

для CSS оно некорректно и не будет признано nравиль

метка илкнет.

ным WЗС (см. врезку «Информация для новичков»

ясь за nорчу страницы в друrих браузерах. Обратная сторона nрименения этоrо свойства состоит в том, что

в разд. «Внешние таблицы стилей» гл. 2).

8 lntemet Explorer nеремещаемые элементы, nyнКThl сnиска 11 абсолютно nозиционированные элементы

lntemet Explorer 7 (на момент наnисания этой книrи)

отображаются nо-разному в зависимости от того, есть

все еще выдает несколько ошибок, которые необходи

ли у них разметка. 8 nодразделе «Исnравление ошибок

мо устранять, добавляя разметку. Любое из перечис

lnternet Explorer» обучаiQЩего урока 2 гл. 9 вы видели, что lntemet Explorer б не делает всю область ссылки

ленных выше свойств добавит разметку к элементу

nригодной дnя щелчка, коrда ссыnка оnределена как

блочный элемент. Вы можете решить эту nроблему,

свойства: min-width, max-width, min-he1ght и maxheight (см. врезку «Информация для оnытных поль

создав стиль только дnя данного браузера:

зователей» в разд. «Исnользование nлавающих эле

* html

.nav

( zoom: l: }

Назначение стиля не в том, чтобы увеличить ссыnку. Свойство

zoomявляется сnецифичным для lnternet

в этом браузере, то же самое сделают и и1едующие

ментов в разметках» этой главы).

В этой книге nостоянно рассказывается, что следует исnользовать разметку, чтобы nреодолеть различные

fJcplorer и предна3flачено для увеличенw~элемекта стра

ошибки

ницы (исnользуя JavaScript). Однако свойство zoom так

рения данной темы зайдите на сайт www.satzansatz.

lnternet Explorer. Для всестороннего рассмот

lnternet Explorer б. По nри Microsoft, nодключение

de/cssd/onhavinglayout.html. Кроме того, Microsoft

чинам, известным только

также предлагает свои варианты исnравления оши

разметки заставляет браузер рассма..-ривать всю блоч

бок на сайте http://msdn.microsofl:.oom,len-us/liЬrзry/

ную обпасть ссылок как nригодную для щелчка.

ЬЬ250481(VS.85).aspx.

же инициирует разметку в

360

Глава

Обучающий урок столбцов

12.

Разметка страницы на основе плавающих элементое

разметки с множеством

В этом обучающем уроке мы рассмотрим, как создавать разметку на несколько столб цов, основанную на плавающих элементах. Кроме того, вы научитесь создавать сво

бодные дизайны на два и три столбца и дизайны с фиксированной шириной. Чтобы приступить, загрузите файлы с сайта www.sawmac.com/cr.s2e/. Как это сде лать, описано в конце гл. 2. Файлы для этого урока находятся в папке 12\layoutl.

Структурирование

HTML

Первый шаг в создании разметки, основанной на

CSS, -

идентификация различ

ных элементов на странице. Вы делаете это, «упаковывая• части НТМL-кода в теги

<di v>,

каждый из которых представляет отдельный элемент страницы.

Откройте файл

start. html

в текстовом редакторе и установите курсор на пустой

строке после НТМL-комментария:

<! -- sidebar goes here -->.

Как вы можете видеть, часть работы в HTML уже сделана: на данный момент описаны баннер и нижний колонтитул. Перед тем как создавать какие-нибудь стили, вы должны добавить структуру и содержимое для страницы. Затем вы добавите тег <di v> для левого бокового меню.

Добавьтеоткрывающийтег<div>длябоковогоменю:<div

· нажмите клавишу Enter,

= "sidebar">.Зaтeм

чтобы создать новую строку.

Если бы вы создаваливеб-страницу с нуля, то в этом пункте пришлось бы до бавлять НТМL-код для бокового меню на странице и, возможно, определять список статей для сайта, ссылки на родственные сайты и т. д. В данном случае вам не придется этого делать. Код для неупорядоченного списка ссылок ждет

вас в другом файле. Осталось только скопировать его и добавить на страницу.

si debar. txt, скопируйте его содержимое, а затем вернитесь start. html. Вставьте скопированный НТМL-код после тега <di v>, кото рый вы создали в шаге 2. Боковое меню почти готово. Осталось лишь закрыть тег <di v>. 4. Сразу же после кода, который вы только что вставили, введите </di v>.

Откройте файл

к файлу

Вы только добавили на страницу первый элемент разметки. Чуть позже мы разработаем стиль этого элемента так, чтобы он был похож на столбец. Но сна чала вы должны добавить еще немного кода.

У становите курсор в пустую строку после следующего НТМL-комментария: -->,азатемнаберите<div id = "main">.

<!-- main content goes here

Этот раздел будет хранить главное содержимое страницы. Нужный НТМL-код вы также возьмете в другом файле.

Откройте файл

start. html

story. txt,

скопируйте его содержимое, вернитесь к файлу

и вставьте скопированный код после тега

<di v>,

который вы только

что создали. Добавьте закрывающий тег</ di v> точно так же, как в шаге

Это весь НТМL-код, который нужен для создания дизайна. Теперь пришло время переключиться на создание

CSS.

Обучающий урок

361

1: разметки с множеством сrолбцов

Соэдание стилей разметки Если вы предварительно просмотрите страницу, то увидите, что для баннера, на вигационных кнопок и текста стили уже разработаны. Так получилось потому, что у этой страницы есть присоединенная внешняя таблица стилей с некоторым базо вым форматированием. Далее нужно создать стили для форматирования столбцов страницы.

В текстовом редакторе щелкните кнопкой мыши перед закрывающим тегом </head> в верхней части файла. Введите <style type = "textlcss">, а затем на жмите клавишу

Enter.

открывающий тег для внутренней таблицы стилей. Как в других программах-примерах этой книги, вы задаете стили во внутренней таблице сти Этот код

лей, которая упрощает создание и тестирование стилей. Как только вы все сде

лаете, нужно переместить стили во внешнюю таблицу стилей, как описано в разд. •Внешние таблицы стилей~ гл.

Добавьте следующий стиль для бокового меню:

#sidebar { float: left: width: lбОрх: margin-top: lOpx: Он перемещает боковое меню на левую сторону страницы, задает ему ширину 160 пикселов и добавляет немного места, чтобы отделить меню от баннера, на ходящегося выше. Свойство

wi dth -

важное в этом стиле. Если только вы не

перемещаете изображение, для которого задана ширина, всегда нужно устанав ливать ширину плавающего элемента. В ином случае браузер установит шири ну на основе содержимого внутри плавающего элемента, что приведет к проти воречивым результатам.

3. Нажмите клавишу Enteг и наберите </ sty l е>, чтобы завершить внутреннюю таб лицу стилей. Предварительно просмотрите страницу в браузере.

Боковое меню теперь представляет собой столбец, выровненный по левому краю. Когда текст главного столбца достигает основания бокового меню, он обтекает основание бокового меню, как показано на рис. 12.16. Хоть это и ти пично для плавающих элементов, это не то, что нам нужно сейчас. Чтобы основной текст содержимого появился в виде отдельного столбца, следует

добавить достаточное по размеру левое поле. Это позволит структурировать основной текст за пределами бокового меню.

Создайте стиль для второго столбца:

#main { margin-left:

180рх:

Поскольку ширина бокового меню

160 пикселов,

180 пиксе 20 пикселов, созда

поле размером

лов отодвигает основное содержимое на дополнительные

вая промежуток между этими двумя столбцами. Это дополнительное пустое

362

Глава

Рис.

12. Разметка страницы на основе nлавающих элементов

12.16. Плавающий элемент в действительности не создает столбец на стран ице.

Он nросто смещает любое содержимое, которое обтекает его, до того места, где он заканчивается (обведено кружком). После этого содержимое вновь nереходит на свое место nод элементом

место не только облегчает прочтение текста, но и улучшает внешний вид стра· НИЦЫ .

Предварительно просмотрев страницу, вы увидите, что пришли к разметке

с двумя столбцами.

Добавление еще одного столбца Как вы моrли видеть, дизайн с двумя столбцами создать несложно. Добавив третий столбец, вы сможете преподнести своим nосетителям еще большее количество информации. Такую разметку также несложно создавать -действия в этом с,лучае

nрактически такие же, как в предыдущей части этого обучающего урока.

Обучающий урок

363

разметки с множеством столбцов

Откройте файл нитесь к файлу

secondary. txt. start. html.

Скопируйте из него весь НТМL-код, а затем вер

НТМL-код для следующего столбца идет между двумя разделами страницы.

Установите курсор сразу после закрывающего тега </di v> для элемента боково го меню (прямо перед комментарием<!--

нажмите клавишу

Enter, чтобы добавить

main content goes here

-->).Затем

пустую строку.

Часто бывает трудно найти нужный закрывающий тег

</di v>,

когда исполь

зуется много блоков для структурирования страницы. Вот почему НТМL комментарии, такие как этот, могут помочь идентифицировать и отслеживать НТМL-код на вашей странице.

Введите

<div id

"secondary">, нажмите Enter и вставьте НТМL-код, который 1. Вновь нажмите клавишу Enter и добавьте закрыва

вы скопировали в шаге ющий тег

</div>.

Когда вы закрываете тег

<di v>,

вы заканчиваете НТМL-код третьего столбца

страницы. Теперь начнем разрабатывать для него стиль.

Под стилем

#ma i n,

который вы создали в шаге

в предыдущем подразделе, до

бавьте новый стиль во внутреннюю таблицу стилей:

#secondary { float: right: width: 180рх: Задав такой стиль, вы передвигаете столбец в правую часть страницы, чтобы по

обе стороны главного содержимого располагались боковые меню. Здесь также появляется проблема с первым столбцом (см. рис.

12.16) -

главное содержимое

обтекает новое боковое меню. Чтобы устранить это, нужно добавить в стиль

#ma i n правое поле. 5.

Отредактируйте стиль

#ma i n следующим образом:

#main { margin-left: 180рх: margin-right: 200рх: Теперь для страницы создана завершенная разметка с тремя столбцами.

Проверьте страницу в браузере. Если вы измените размеры окна, то увидите, что страница приспосабливается, чтобы соответствовать им.

СОВЕТ -----------------------------------------------------8 этом дизайне для левого и nравого боковых меню установлена фиксированная ширина, так что, даже когда вы сделаете окно брауэера очень большим, они не изменят свои размеры. Вы также можете заставить эти столбцы менять ширину, просто устанавливая значения их ширины в процен тах, а также задавая левые и правые поля в процентах в стиле

#main.

Новый столбец, который вы только что добавили, выглядит не очень хорошо, но далее мы придадим ему более приятный внешний вид.

364

Глава

12.

Разметка страницы на основе плавающих элементов

Добавление «ложного сrолбца» Правое боковое меню визуально недостаточно выделяется. Это можно исправить с помощью темного цвета фона и некоторого форматирования текста.

1. Отредактируйте стиль #secondary, созданный ранее, добавив темный цвет фона. Завершенный стиль должен выглядеть так:

#secondary { float: right; width: 180рх: background-color:

#294Е56:

Теперь фон правого бокового меню действительно выделяется, в отличие от текста, который также является темным.

2. Добавьте еще один стиль внизу внутренней таблицы стилей, чтобы сделать весь текст в этом боковом меню белым:

#secondary * { color: #FFF: Этот стиль использует преимущества универсального селектора (см. подраз дел <<Универсальный селектор~ разд. ~стилизация групп тегов~ гл.

3).

Он, по

существу, дает указание ~установить белый цвет текста для каждого тега внут

ри. #seconda ry~. Это краткий способ создания; если же указывать стиль для каж дого элемента, то селекторов будет намного больше: #secondary

#secondary

р,

#secondary

hl, #secondary h2,

а и т. д.

Теперь нужно создать несколько стилей, чтобы отрегулировать размер шрифта, поля и другие свойства его отображения.

3. Добавьте следующие стили во внутреннюю таблицу стилей:

#secondary hЗ { font-size: 1.5em: background: #73AF87: padding: Зрх 5рх Зрх lOpx; }

#secondary h4 { font-size: 1.2em: margin: lOpx lOpx

5рх 10рх;

}

#secondary р { font-size: 1.2em: margin: Зрх 10рх lOpx line-height: 110%:

10рх;

Каждый из этих стилей регулирует размер шрифта для различных текстовых

тегов, используемых в боковом меню. Кроме того, добавляется цвет фона к за-

Обучающий -урок

365

1: разметки с множеством столбцов

головкам, которые определяют каждый раздел в боковом меню. Если вы теперь предварительно просмотрите страницу в браузере; она будет выглядеть так, как нарис.

12.17.

SMOFARMER YOU< onhne guiO$ to вpenm""" f"'"""9

Feature· Bathtub Hydroponics torem ..,~um Oolor •о' LOI'err) 'PS.Un1 tj010f iil o.n,el CМ~KII!Iut'! Od:J><'CI<Y.) ei·t••М dюm r'\\')f)\!rпmy nibh eut.m ьd krladunr IJIIo()f'-toet d060rн

magr•O о~сюm erof volufpol. 01 'WISt er1.m od rrtnm 'YPniOm.

~u~

rюstrud f'txerc-• l(}t.or) ulomcaper w ..clp,t IOЬot11S Ml \JI oЬqalf) ~-. ео commodo cO<>seqvof, Dui<;

outem "'~ eu,,, iме dofor'" l>er>0/.":1 '> vv~:юtote •NI еше mclesМ r.~t. •ei41Vm OOIOfe eu tevgюt n..ЧО foci Ut WISI en!m od n1rrum oliqurp Lorem ioS<Jn• dolor 141 011'(:1 conюctetvl>< (lc!<pi>cing eil sl'(l Фomnorщn>ml n:t>l'l •)t.N\mO<! '"'cO\JnlutloO<tJefOQ!cJ<> mogno o~QVOm erof vofutpat ut ..._,;\1 enifn oct f'l"\\lrWn ·'ef'!tйrn ovrs nostrvd '"~'~ loi>Ot\ IJI1omcorper wюp:t lot>o<t~ м1 vt oloQv.pexoo cnn n>q<jo consf'q<lot Dv~oulem'ffll"''"' wме dolor .n .hentkent ~ vt.Лpvrntu vebt &.а~ ntQ1es.bf" ('orнof'Q't:ol ..,,

illum clotote w teuljiot nvll<r ICic:

Dolor Eu Lorem ipwm do4or ~~ on>el <O<W!CieJve< ndiP«:•"9 e<t dюm "M\tmmv nit>t\ '~)t1М)d lif1Cick.tnt utiOcwr?fl1 dc""'arr· mogno o>quom ею/ vo4vlpol. Ul ""''" enim od nm<n' ven quis no-stщd e.м~rd totion u•om~Qfoer SW"JPI\ loьort.s n;-.J ot-qu!p е.х оо ccvnn1odo con-sf'!Qнol Dvt~ nurem vol е dOiot "'hend1enllt1 vUtpvlot,; vekt <>$>е I\'Юir1\tl!' c:onsriO<.,Cit ..,_,m do~c eu rcuo'OI nvlfo fnc:

ellllum do!orP eu feнgooJ /lutlo taco dotot <Jt amel. conV>Ctel<ler- od;p.scng ~~~~

LO<МIIPI<ml

Рис.

11.17. У nравого бокового меню темный фон, который выглядел бы лучше, если бы

nростирала1 до конца страницы. Однако nоскольку в среднем разделе страницы больше содержимого, фон правого бокового меню реэко обрывается (обведено кружком). Решение

исnольэование фонового изображения

ПРИМЕЧАНИЕ-------------------------------------------------

8 стиле #secondary, который оnределяет раэметху этого бокового меню, нет отступов. Однако текст не Нё~ТаЛКИ&ае'ТСJI nрямо на края бокового меню, nотому что другие стили добавляют nространство между меню и текстом внутри его. В чаСПiОСП1, отстуn в стмле hЗ и nоля в стмлях

h4 и

р добавляют

необходимое место, что nриносит двойную nольэу. Без отстуnа в боковом меню вы можете сделать так, чтобы цвет фона основных эаголоеков в боковом меню распредепялся по вcet1i ширине меню.

(«In the News» и «Aгound the Web»)

4. В боковом меню есть еще одна проблема: его фоновый цвет внезапно заканчи вается, не доходя до основания страницы . Все будет выглядеть намного лучше, если этот темный цвет будет простираться до правой стороны окна.

366

Глава

12.

Разметка страницы на основе мавающих элементов

Фоновому цвету правого бокового меню нужна помощь. Если хотите продлить цвет по всей высоте страницы, вы должны поместить изображение непосред ственно в фон самой страницы и повторять его вертикально, чтобы оно остава лось видимым независимо от высоты страницы.

Добавьте тег стиля

body вверху внутренней таблицы стилей:

body { background: url(images/bg/bg_column.gif) repeat-y right top: Файл

bg_ со l umn. gi f

содержит простое одноцветное изображение такой же ши

рины, что и правое боковое меню. Свойство и вниз, а значение

right

repeat-y

повторяет рисунок вверх

помещает его в правую часть страницы.

Установка ширины В настоящее время у страницы свободный дизайн (см. разд. «Типы разметок неб страницы~ гл.

11 ), означающий, что она расширяется, чтобы заполнить всю шири

ну окна браузера. Но допустим, вам больше хочется, чтобы страницы все время оставались одной и той же ширины, поэтому вам не нравится, как они выглядят на

широкоформатных мониторах или что случается с дизайном, когда окно браузера

уменьшается до очень маленьких размеров. Изменить свободный дизайн на дизайн с фиксированной шириной легко. Начните с добавления НТМL-кода.

Сразу после открывающего тега тег

<body> (<body id = "feature">) добавьте новый

<div>:

<div id="wrapper"> Вы «упаковываете>.> всю страницу в блок, который будете использовать для управления шириной страницы. Вы должны убедиться, что этот тег закрыт.

Добавьте закрывающий тег

</ di v> прямо перед закрывающим тегом </ body>:

</div> </body> Теперь, когда созданный блок включает в себя все содержимое страницы, вы можете управлять ее шириной, устанавливая ширину для данного тега.

3. Сразу под тегом стиля body, который вы создали ранее, добавьте стиль, который устанавливает ширину для нового блока:

#wrapper { width: 760рх: Предварительно просмотрите страницу в браузере, и вы увидите, что баннер, нижний колонтитул и другое содержимое на странице зажаты в блоке шириной 760 пикселов. Однако изображение, которое добавляет фон правому боковому меню, свободно перемещается в зависимости от шИрины окна браузера. Так происходит потому, что оно выравнивается относительно правого края окна. Что

бы устранить это, просто определите изображение как фон в стиле

#wrapper.

Обучающий урок

367

разметки с множеством столбцов

Удалите стиль

body,

который вы создали в шаге

предыдущего подраздела.

Добавьте объявление фона к стилю #wrapper, чтобы он выглядел таким образом:

#wrapper {

width: 760рх: background: url(images/bg/Ьg_column.gif) repeat-y right top; Предварительно просмотрите страницу в браузере. Она теперь должна выгля деть так, как показано на рис.

12.18.

Feature: Bathtub Hydroponlcs Lorem lpsum Dolor .Sal Lorem lpsvm dolor sltomet, consectet uer odlpisctng епt. sвс1 d!om nonvmmy niЬh euism od tinddunt vt tooreet dolore mogno oliqvom erat volvtpot. Ut W1~ enlm ad m!nim veniom, qvls nostrvd exercJ tatlon u!lamcorper svscJplt loЬortls n~ vt ollqvip ех ео commodo conseqvot. Ou!s ovtem vet eum lrlvre dolor in hendrerit ln vulpvtote vetlt esse molestle conЯ!QUOI, vel~m dolore ev fevgiot nvlla focJ

Ut wlsi erum od min!m ollquip lorem ipsvm dolor slt omet, consectetver odiplscing elit, sed d!om nonummy niЬh euismod tlncldunt ut looreet dolore mogno oliquom erot vorutpot. Ut wisl enlm ad mlnlm veniom, quls noS1rvd exerei totlon vlomcorper suseip!lloЬortls ~ vt oПquip ех ео commodo consequot. Dvis ovtem vel evm Jrlvre dolor 1n hendrerit 1n vulputote velt esse molestle consequot, vet ilum dolore ev fevglot nvllo focl Dolor Eu lorem ipsum dolor $11 omet, consectetver odlpisclng elit. sed dlom nonummy niЬh evismod tincidunt ut laoreet dolore magna ollquom erat volutpot. Ut wisl enlm Od mlnlm venlom, qv!s

Рмс. 12.18. Превращение свободного диэайна в дизайн с фиксированной шириной- лишь вопрос «упаковки» всего НТМL-кода тега

<body> в новый тег <div>, а

затем создания стиля,

который устанавливает ширину для этой «уnаковки»

Окончательная версия этой программы-примера находится в папке 12_finished\

layoutl.

368

Глава

Обучающий урок

12.

Разметка страницы на основе плавающих элементов

разметка

с отрицательными полями В этом уроке вы узнаете, как создавать плавающие разметки с множеством столб цов, используя методику отрицательных полей, рассмотренную в подразделе «Ис пользование отрицательных полей для размещения элементов>.> разд. «Исполь

зование плавающих элементов в разметках>.> текущей главы. Файлы для этого примера хранятся в папке

12\layout2.

Центрирование разметки В отличие от последнего примера, весь НТМL-код для этой страницы уже вставлен.

Все, что вам остается сделать, -добавить СSS-код, чтобы создать разметку. На стра нице есть шесть главных разделов, каждый из которых заключен в тег менеиным к нему

В текстовом редакторе откройте файл

Рисунок

<di v> с при

ID.

start. html

из папки

12\layout2.

12.19 показывает основную структуру НТМL-кода (слева) и заключи

тельный результат, к которому. вы должны стремиться (справа). В настоящее время разделы просто сложены один на другой, потому что вы еще не добавили СSS-разметку. Начните с создания разметки с фиксированной шириной и расположите ее по

середине окна браузера.

В области

<head> в НТМL-коде поместите курсор между открывающим и закры <styl е>.

вающим тегами

К странице прилагается внешняя таблица стилей, выполняющая большую

часть всего визуального форматирования. Вы добавите стили разметки во внут реннюю таблицу стилей, которую при желании позже сможете переместить во внешнюю таблицу стилей, как описано в подразделе «Прикрепление таблиц стилей с использованием

CSS>.>

разд. «Внешние таблицы стилей>.> гл.

Добавьте новый стиль для раздела

wrapper:

#wrapper { border-right: 2рх solid #000000: border-left: 2рх solid #000000: background: #FFFFFF url(images/column_bg.png) repeat-y right top: Эти свойства добавляют границу к каждой стороне страницы и помещают фо новое изображение в правую часть. Изображение повторяется вертикально вниз и обеспечивает фон для правого бокового меню. Эта настройка

пример ис

пользования МеТОДИКИ «ЛОЖНОГО столбца>.>, ОПИСаННОЙ В подразделе «Создание столбцов на всю высоту>.> разд. «Преодоление проблем перемещения>.> текущей главы.

Поскольку обертывающий тег

<di v>

охватывает и другие теги на странице,

установка ~го ширины определяет ширину для всей страницы.

Обучающий урок

369

разметка с отрицательными полями

Порядок описания в

СSS-раэметка

HTML

Окно брауэера

· wrapper

•

••

#main

#news

#mainNav

#legal

width: 760 Рмс.

12.19. Схемы nоказывают страницу в начале (слева) и

рх

в конце (справа). Сначала она является

лишь набором тегов <div>, заключенных в один тег <div>. Устанавливая ширину для «уnаковки• и задавая ее левое и nравое поля, вы создаете разметку, центрированную в окне браузера

4. Отредактируйте стиль #wrapper, который вы только что создали. Добавьте шири ну, а также левое и правое поля, чтобы стиль выглядел следующим образом:

#wrapper {

width:

760рх;

auto; margin-left: auto; margiп-right:

border-right: 2рх solid #000000: border- left: 2рх sol id #000000: background: #FFFFFF url(images/column_bg.png) repeat-y right top; Свойство

wi dth устанавливает полную ширину содержимого страницы разме 760 пикселов. Чтобы центрировать •упаковку» di v, установите для левого и правого полей значение auto. Оно говорит браузеру, что он должен вычислять ром

поля автоматически. Кроме того, поскольку значение применено и к левому,

и к правому полям, браузер должен распределить ширину между ними. Други ми словами, браузер добавляет одинаковое пространство с обеих сторон •упа ковки~. невзирая на ширину окна.

Теперь предварительно просмотрите страницу в браузере. Измените размер окна браузера, и вы увидите, что страница остается выровненной посередине окна. Но вы все еще можете улучшить ее внешний вид.

370 5.

Глава 12. Разметка страницы на основе nлаВающих элементов

В начале внутренней таблицы стилей добавьте новый стиль для тега <body>:

,body { margin : 0: padding : 0: background:

#Е6Е6Еб

url(images/page_bg .png) repeat-y center top :

Первые два свойства удаляют любое свободное место вокруг содержимого стра

ницы, позволяя ~упаковке~ свободно касаться краев окна брауэера. Самое ин тересное заключается в объявлении свойства

background. Во-первых, оно изме

няет фон страницы на неестественный серый (#ЕбЕ бЕб ) . Во - вторых, свойство добавляет изображение и повторяет его вертикально от верхнего края страницы до самого основания. Значение cent er помещает рисунок в центре окна. Таким образом, независимо от ширины окна изображение останется выровненным

посередине (см. разд. ~Позиционирование фоновых изображений~ гл.

8).

Сам

рисунок немного шире, чем ~упаковка~ размером. 760 пикселов, и к нему при менен эффект тени с левой и правой сторон. Появляется ощущение, что основ

ное содержимое страницы как бы прИподнято над страницей (рис.

12.20).

1psum dotor sit amet, consectetuer adipiscong e~t. sed diam nonumrny niЬh euosmod Ьnddunt ut laoreet magna aliquam erat volutpat. ut woso enim ad monim veniam, q..as nostrud exerci tatoon ullamcorper suscipit nosl ut aliquop ех еа commodo consequat. Duis autem vel eum onure. You'll find more ~nformatJon here.

~psum

dolor s.t amet, consectetuer adlposctng e5t, sed dtam nonummy niЬh euosmod tincldut>t utlaoreet magna aliquam erat volutpat. Ut wtsl enom ad mnrm venoam, qutS nostrud exerco tation ulamcorper 5USCJ!>1t nisl ut aliqiJip ех еа commodo consequat. Duos autem vel eum iriure. ipsum dolor sit amet, consectetuer adoposcong ebt, sed doam nonummy noЬh euosmod Ьncodunt ut laoreet magna aliquam erat volutpat. Ut wosi enom ad minom veniam, quos nostrud exercl tatJon ulamcorper suscopot rnsl ut aloqutp ех еа commodo consequat. Duis autem veJ eum iriure.

Rubber Duckies Needn't Apply ipsum dolor s1t amet, consectetuer adlposcong elit, sed diam nonummy niЬh euismod Ьnctdunt ut laoreet magna a~quam erat volutpat. Ut w1s1 enim ad monнn veniam, quis nostrud exerci tation ulamcOfJ)8r suscipit rusl ut aliquip ех еа commodo consequat. Duis autem vel eum irlure. ipsum dolor stt amet, consectetuer ~diposcong elo~ sed diam nonummy ntbh euismod ~odunt ut laoreet magna aliquam erat volutp~t. ut wisi enim ad monim veniam, quis nostгud exerci tation ulamcorper suscopit nisl ut a6q1Jip ех '"' commodo consequat. OUos autem vel eum inure.

opsum dolor sit amet, consectetuer adiptsc~ng elot, sed doam nonummy nobh euosmod Ьncidunt ut laoreet magna altquam erat volutpat. Ut wiso en1m ad minim veniam, quos nostnJd exerci tati~ ullamcorper suscipit nisl ut altqulp ех еа commo<lo consequat. Duis autem vel eum inure. ipsum dolor stt amet, consectetuer adipiscing elot, sed doam nonummy noЬh euosmod Ьnctdl.nt ut laoreet ~а a5quam erat volutpat. ut wisi enom ad rmnom veniam, qu~s nostrud exerci tation ullamcorper suscopot nosl ut aliquip ех еа commodo consequat. Duos autem vel eum iriufe. ipsum dolor sit amet, consectetuer a<foposcong еЫ, sed d<am nonummy nob~ eursmod tincodLwlt ut laoreet magna a5quam erat volutpat. Ut wosi enim ad rmnim venoam, quis nostnJd exerco tation ullamcorper susciptt ех еа commo<lo Duis autem vel eum ltiure.

Рмс. 12.20. Центрируя изображение в фоне тега

<body>, вы создаете эффект тени

nод содержимым страниЦы

Обучающий урок

371

разметка с отрицательными полями

Перемещение столбцов Теперь пришло время создать для этого дизайна три столбца. На левой схеме на

12.19 видно, что НТМL-код для раздела mai n, где находится главное содержи мое страницы, появляется перед НТМL-кодом либо Для левого бокового меню с ID, равным mai nNav, либо для правого бокового меню с ID, равным news. Несколь рис.

ко факторов делают этот дизайн отличным от базовой разметки с плавающими элементами, которую вы создавали в предыдущем уроке. Поскольку НТМL-код для главного раздела

( ma i n)

идет первым, вы должны сделать его плавающим, что

бы боковые меню обтекали его с любой стороны. Раздел

ma i n на веб-странице дол

жен располагаться посередине, между двумя боковыми меню. Обычно такое рас положение невозможно. Но мы будем с умом использовать отрицательные поля (см. подраздел

• Плавающие элементы внутри плавающих элементов>) разд. • Ис

пользо~ание плавающих элементов в разметках>) этой главы), чтобы достичь по ставленной цели.

Добавьте стиль к внутренней таблице стилей для раздела

ma i n:

#main { float: left: width: 419рх; padding-left: lOpx; border-left: lpx dashed #999999: Пока этот стиль довольно простой. Он размещает раздел в левой части страни цы, устанавливает его ширину, добавляет левую границу и небольшой проме жуток между текстом и границей. Затем нужно позиционировать раздел

news.

2. Добавьте следующий стиль, чтобы разместить правое боковое меню:

#news { fl oat: ri ght; width: lбОрх; Наконец, вы должны расположить навигационное меню.

Добавьте еще один стиль во внутреннюю таблицу стилей:

#nav { fl oat: 1eft; wi dth: lбОрх.; Страница должна выглядеть так, как на рис.

12.21. Видно, что есть три столбца,

расположенные бок о бок, но в неправильном порядке. Большой столбец слева должен находиться посередине.

Именно сейчас следует присоединить отрицательные поля. Основной процесс

идет таким образом: сначала необходимо добавить левое поле достаточного размера к главному столбцу, чтобы установить его в нужное место -посереди не страницы. Затем вы должны добавить отрицательное поле к навигационному

меню, чтобы отодвинуть его в левую сторону от главного содержимого.

372

Глава 12. Разметка страницы на основе мавающих элементое

Lorem lpsum dolor slt amet, coi\Se<tetuer ~dlpJs<IП9 ellt, sed FEA1VRES dlam nonummy rt4Ьh eulsmod tlncldunt ut taoreet dolore ~· ·~·~···- · ········,. magna •llquem entt volutpat. Ut wtst enlm ad mtnlm ven•am, "'" EXPERТS quJs nostrud e)terd tatJon ullamcorpe:r susclplt 'оьоrь.s nfsl ut " " UIZ •· • · •• ··-- ·· allqulp ех еа commodo consequat. Outs autem vel eum ltiure.. . Q . .. • You,l tind more fnformatJon ~re. "'" PAOJECfS

& Watch the Water Level L.orem fp.sum dolor sJt amet, c.onstctetuer niЬh

dlatn nonvmmy

adl~sdng еНt,

eutsmod tfnctdunt ut laore-et ~lore

sed ~~.~;::.~~~ос lt..twt:~

magna aHquarn erat volutpat. Ut wlsl enlm ad mln1m venlam, ~t"')."ftf>t а,11 I'!Wti\Crl"9

quls nostnJd exercl tatlon ullamcorper susdplt toЬortls nfsl ut t,..,~ tt•~ ~IC't А~ 110\1 v.~ allqutp ех еа commodo consequat. Ouls autem vel eum lriure. "::_~:,~.:n~~t:IJ. ,s 1

torem lpsum dolor stt amet, consectttuer adlpisclng ellt, sed ~tm"'!:d t' ~ ~ cr dl.am nonymmy n4bh eulsmod tfnc:Jdunt ut faoreet dOJore ~·~a;n:~ ~·=~ voмr magna elfquam el'at volutpat. Ut wfsl enfm ad !"ln(m venlam, ~"~а~·~ ~-мм rht1!\ • .., ., quts nostrud exercf tetlon ullamcorper susdplt loЬortfs nJsl ut ~" ~ "' ~nr·~;; ~~ oiJqulp ех еа commodo conиquat. OUis autem vel eum trture. ,,:.·;~~,~~.;~lt~f

RubЬer Duckies Needn't Apply

(N.f'll'\fo(ll'ti,M!olfp('f'O")' IYA

~·,.::;':.: ";~; ;:;::...

:=.

l..orem tpsum dolof" slt amet, cons!detuer adtpfselttg ellt. sed ;~:;/':: tfle dfam nonummy nlt>h e~smod tlnadunt ut laoreet dotore • ot: !Jo:Ol•t.t)'-!>n ГiМТ magna allquam erat volutpat. Ut wfsf enlm ad mlntm venlam, nostrud exe.rc1 ta:ticm loЬottls ntsl ut Рмс.

12.21. Обычно раэмещение плавающих элементов полностью зависит от их порядка

в НТМL-коде. Главное содержимое (слева) идет первым, поэтому оно не nоявляется между двумя боковыми меню. Но вы можете иэменить это, исnольэуя отрицательные поля

4. В стиле #main добавьте свойство margin- left : lбОрх:

#mai n { fl oat : left; width: 419рх ;

margin·left:

lбОрх:

paddi ng-l eft : lOpx; border-1eft: l px dashed #999999 ; Возвращаясь к шагу 3, мы видим, что навигационная паиель (которая, как пред· полагается, будет крайним левым столбцом) имеет ширину

160 пикселов, столь main (главную об

ко же вы использовали для левого поля. Отодвигая раздел

ласть) на

160 пиксело в, вы освобождаете место для навигационной панели. 5. Добавьте отрицательное левое поле к стилю #nav следующим образом:

#nav { float : left : wi dth : 1бОрх·;

marg;n-left:

- 590рх:

Почему выбрано такое значение, как -590 пикселов? В настоящий момент раз делы

nav и ma i n выровнены по левому краю.

Однако, поскольку НТМL-код для

373

Обучающий урок 2: разметка с отрицательными nолями

навигационной паиели идет после кода главного содержимого, она может быть

перемещена влево настолько, насколько будет смещен вправо раздел ma i n. Что бы навигационное меню достигло левого края страницы, оно должно полностью переместиться от правого края раздела

ma i n к левому краю страницы.

Ширина до правой части раздела

ma i n nредставляет собой сумму значений его 160 (ле вое поле)+ 10 (левый отступ) + 1 (левая граница) + 419 (ширина)= 590 пиксе лов. Так что, задавая навигационной паиели левое поле шириной - 590 пикселов, вы переместите ее за главный раздел - на его riредьщущее место. ширины, левого поля, отступа и границы. Таким образом, она составляет:

Просмотрите страницу в браузере, и вы увидите нечто похожее на то, что пока занона рис. 12.22. Этотспособ работает, если вы используете Firefox или Safari. Но с Internet Explorer 6 другая история . Слева от среднего столбца вы не уви дите никакой навигационной паиели - лишь nустое место. Причиной тому явля

ется ошибка двойного поля (см. разд. ~обработка ошибок в lnternet Explorer б• этой главы). Поскольку раздел mai n перемещен влево и у него есть левое поле, Internet Explorer 6 удвоит этот край, разрушая разметку. К счастью, эту ошибку можно легко устранить.

I..Ortm lp$um dotor srt emet.. c:onиctt'tuer ~Citptкln9 tll\,. sod d1oam fiOI\Utnmv nll)h: e~s,mod tirкkSUI'\t ut 1-aorмt dolo,.. magne ~llquam trьt v~utpa,t. Ut wl$1 enlm ad minlm v•niamf QUis no'trud ехом tallo.n uflamtorper susclptt ~ЬOrtts 1\i.sl ut ..fquip ех еа <ommodo coмt:qu.c. Ouil illutem \lef *Utn rr,ure. You'lt Пnd MOfO fnlorn18tlon ~re .

& \Valrh the \\later J.,e\e\ LOroм tpsum CS010f ан omet~ c.on.мa:o(...or ecJipis<-lng ellc, std diam nonummy f'IIЬh tutsmod Ut~Cidunt vt ••~et 6otort m~n~ atlquam «>ret volutp.-t. Ut wts) e.nlm od mtNm VCI"'ii~tтt, qws noS-tтud ox~rd t~~on iAiem,orper sшdpit loЬortls ntsl ut IIIQUip tx: о 'omfl'\odo CO/'$equat outs outttn vel eum 1fiurt Loгem it»um dofor 4it •met, (Oflsoctetuor edlpisang ellt, sed Oiam nonuмmy nrЬh tufstnod uncкtunt ut laore:et dotore mogna 1llquam маt YoJuts>at Ut wlsl tNm ad m1n1m ven~ьm, a;uts nosttud tl(trcf t6tron tJit4mcorpe.. s:usctplt loЬonts ntsl ut aiiQuJp ех еа. commodo tOП$equ~t- Outs autem vcl e-um triUit.

RнM>t!l' Dнckies Necdл 't Appl}'

I,.Ot~ lp$Um dOI-Or .J1t atnt.t.. COMtctttuer ИI!Яt<:fn9 Ollt, $od dlom nonun1my rwl;ttl ~L»smod dncJ<Nnt vt IOOfOit dolore M19f\& oiiQui!lm Ui!lt ve»tutp.at. Vt wi,. et\Jm ;s,d mlnlm venfam, Qufs r.osttud t:~o(CI utaon ullamcof))Of susC'I~t toЬorot nfll ut

t:'""'

oltqulp ew оа commo60 cor\Иquat. ouJs :tuttrn vet L.Ort:m tf)S-W'I'\ dOior Slt amtt, conяctetuer I<НptSt;tflg ttltt.

nibh euasmod tHIOdurtt: ut IЪOf"t d~o(e magno tJ!qu.m e,..t volutf)ot. Ut. wlsl orщn ild mln.im vtnlam, dl.м ~t)l.llf\11'\Y

cau;s мstrud exorc' tAt.lon uiJamcQt1)8r susctl)tt lo~s nltl vt 8l1qufp с~ ео commodo conseqU-'t. Dt.l•s atrtem vel eum lrture.

t.orem tpwm dolor Jlt tmet~ tonse:ctotvo,. •dlpjWng, е114 s.td dlam nonummr niьn eulsmocf tlnddunl tJt laortet dolore: Mt9n1 altquam •r•t vo&utpat Ut w1sl eni.М •d man1m v~am, ~~~

..,.....,.._-

Рмс:.12.22. Исnользуя отрицательные nоля, вы можете разместить столбцы

в любом nорядке на странице

374 6.

Глава

Добавьте свойство

12.

Разметка страницы на основе плавающих элементов

di sp l ау: i nl i ne к стилю #ma i n:

#main { display: inline: float: left; width: 419рх; margin-left: 160рх; padding-left: lOpx; border-left: lpx dashed #999999: Теперь, если вы просмотрите страницу в (см. рис.

Internet Explorer 6,

ошибки не будет

12.22).

Заключительная настройка Следующие несколько шагов продемонстрируют, насколько гибкой на самом деле является разметка CSS. Сначала мы позаботимся о записи об авторском праве, которая должна появиться у основания страницы. В настоящее время она «захва чена!> всеми плавающими элементами (см. рис.

12.22). Запись нуждается в отмене перемещения, чтобы мы могли разместить ее в положенном месте. 1.

В конце внутренней таблицы стилей добавьте последний стиль;

#legal { clear: both; margin-right: 160рх; padding: 5рх 5рх 160рх 20рх; border-top: lpx dashed #999999; font-weight: bold; color: #666666; Он задает множество правил форматирования к записи об авторском праве.

Наиболее важным является свойство с l еа r, которое устанавливает запись под всеми плавающими элементами. Правое поле отодвигает запись об авторском праве от правого бокового меню, так что верхняя граница (также определена

в этом стиле) не накладывается на фоновое изображение. Страница в основном готова. Напоследок сделаем еще кое-что, чтобы в который раз продемонстрировать мощь

CSS. Представьте, что вы можете поменять мес - спра ва. Это намного легче, чем звучит, - всего несколько изменений в двух стилях. 2. Отредактируйте стиль #nav, удаляя отрицательное поле и изменяя значение свойства fl oat с l eft на ri ght. Завершенный стиль должен выглядеть следу тами два боковых меню так, чтобы новости появились слева, а навигация

ющим образом:

#nav { float: right: width: 160рх; Навигационная паиель перемещается в правую сторону. Теперь отправим но вости влево.

375

Обучающий урок 2 : разметка с отрицательными полями

3. · В стиле #news добавьте свойство margin-1 eft : чение left:

-590рх и установите для

float зна

#news { float: left ; width: lбО рх; margi n-l eft : -.S90px ; Сохраните страницу и просмотрите ее в браузере (рис. 12.23). Столбцы поме нялись местами без каких-либо серьезных изменений в НТМL-коде. Все, что вы сделали,

поменяли два стиля. Если вы хотите зайти еще дальше, можете

переместить фоновое изображение , которое относится к •упаковке~, влево и определить границу, которая появляется в левой чаоти главного содержимо

го, в его правой части так, чтобы она проходила вдоль навигационного меню. 1 {n,mofмФ.:>r

г··-· -

1- ' ~ : ~

Monllo) f ar""f('IX

Ft:AtURES Lorem IJ)sum dolof sJt amet, consectвtu.r ac:fipd:ang @lit~ sed dtam nonummy niЬh eUtsmod tin<:IOurlt ut lioreet doiOre rn.gnil .. .. ~TS aJiquam erat volutpёtt. Ut W l$1 entm 411d '"""'"" ventam, qut5 nostrud exerd tаьоо uiAmCOf'J)ef susciiJ)tt SoЬotьs rмst ut 3liqtJ!p ~QU;~ el( е.а commodo consequat. OU.S autem veJ t~um 1'1Ufe. You"'l find mQfe tnformatJon here. "'~с.~---· ·

~~OI'ES Lorem lpsum dotor s•t arnet. conse:ctetuer ,adip1sctng eJ1t.. sed doam nonummy niЬh tuismod ljnc:Jdunt ut i<IQ(eet dolore ""'~~"" aliquam

erat votutpat. Ut Wt51 enim ad m.nm vl!ntam, qutS

nostrud e.xerc• tabon vl•mcOfPer suкtpat loЬorьs nisl ut a~quip ех еа

c:ommodo C:()()Sequat. Outs aut.E-m veJ Eum rr•ure. Lor&m 1psum dolor srt amet, c:onsectetuer adtptsc~ng elit,

иd

6am nonummy nil>h eU!Smod llnC!dчnt ut laoreet dolore magna aliquam el'at volutpat. Ut w151 enim ~d nUnim vef\i.arn_, qu~s nostтud •xerct Qtюn ulamc:Ot"p« susc:!plt JoЬortis na:st ut Dqu.p eJr е.а commodo cOПiequat. OUts avt•m vet eum 11U8.

RubЬer Duckies

Needn·t Арр1у

I..Otem .psum dokw stt am43~ consectetuer adtpiscing d!зм

noЬh

no"""""y

Ht, sed euosmod tinctdunt ut ioO<eot dola<e magno

al.quarn .,-.tt voJutp.at. Ut wJ$1

...WП ~ П'III'Wm verм•m.

quis

nostrud exerc1 tatiOn tJttJ,mcorper susфt loЬOrtls nis1 ut ahq~ ах еа ccнmnodo

con.sequat. o...s CJutem vel eum •nure. t.orвm ipsum dotor .stt .amet, consectetuer adipcsong ellt, sed diam I'\Of14Jmmy niЬh ewsmod t:mc:ldunt ut taoreet dolore magna al!quam erat votutp~t. Ut WISI entm а4 rтwnam ventam, q1Jit5 nostrud exorc• totion ulam<:~r suscop•t lotюrli• no$1 ut o!oquop

Рис.

12.23. Изменяя всего несколько СSS-стилей, вы можете передвигать элементы в различные

области страницы. В этом случае изменение nорядка двух стилей заставило поменяться местами левое и правое боковое меню без каких-либо изменений в НТМL-коде

Конечная версия этого примера находится в папке 12_finished\layout2.

Позиционирование элементов

на неб-странице

Когда Консорциум Всемирной паутины представил СSS-позиционирование, некото

рые разработчики подумали, что они смогут делать так, чтобы веб-страницы выгля дели как печатные документы, созданные в программах наподобие PageMaker, InDesign или Quark XPress. Благодаря липiь нескольким свойствам СSS-позицио нирование позволяет поместить элемент в определенном месте на странице, ска

жем в

100 пикселах

от вершины страницы и

200 пикселах от левого края. Точное CSS- Р (как его называли}, казалось,

пиксельное размещение, возможное благодаря

обещало, что вы наконец сможете проектировать страницу, просто помещая фото графию в одном месте, заголовок

в другом и т. д.

К сожалению, те возможности управления, которых разработчики ожидали от

CSS- Р, так и не были реализованы. Всегда существовали различия в том, как разные браузеры отображали элементы, расположенные с помощью CSS. Но, что еще более существенно, Сеть работает не так, как печатная брошюра, журнал или книга. Веб страницы намного более изменчивы, чем печатные. Как только журнал тиражирует ся в издательстве, читатели не могут изменить размер страницы или шрифта. Един ственной возможностью изменить вид журнала остается пролить на него кофе.

Веб-посетители, с другой стороны, могут переделать вашу ручную работу. Они

могут увеличить размер шрифта в своем браузере, что, возможно, приведет к тому, что текст выйдет за пределы четко размещенных элементов разметки, которым

заданы определенные размеры. Но все не так плохо: пока вы не пытаетесь навязать конкретные ширину, высоту и расположение каждого элемента, свойства СSS-по

зиционирования будут для вас мощными и полезными. Вы можете использовать их, чтобы разместить текстовый заголовок вверху над фотографией, создать раз

метку страницы на несколько столбцов, поместить логотип где-нибудь на страни це и т. д.

Как работают свойства позиционирования СSS-свойство

pos i t i оп позволяет управлять тем, где и как браузер отобразит опре

деленные элементы. Используя его, вы можете, например, поместить боковое меню на странице там, где вы этого желаете, или убедиться, что навигационная паиель

377

как работают свойства позиционирования

наверху страницы останется там, даже когда пользователи прокручивают страницу

вниз.

CSS предлагает четыре типа позиционирования.

О Абсототное. Такое позиционирование позволяет определять расположение эле мента, задавая позиции

left, right, top

или

bottom в

пикселах,

em или

процентах

(для получения дополнительной информации о выборе между различными еди ницами измерения см. гл. 6). Вы можете поместить блок на расстоянии 20 пиксе лов от верхнего и 200 пикселовот левого края страницы, как показано на рис.

13.1,

посередине (далее вы узнаете, как писать код с этими инструкциями). Кроме того, абсолютно размещенные элементы полностью отделены от потока страницы, определенного НТМL-кодом. Другими словами, остальные элементы

на странице не знают, что существует aбcOЛJSITHO позиционировааный элемент.

Они могут даже полностью исчезнуть, попав под него, если вы будете невнима тельны.

ПРИМЕЧАНИЕ----------------------------------------------- Не пытайтесь применять одновременно свойство

float

и любой тип позиционирования, кроме ста

тического (рассмотрен ниже). Перемещаемые объекты и позиционирование (абсолютное или фик аtрованное) не моrут применяться к одному и тому же элементу.

О Оrносительное. Элемент с таким позиционированием размещается относитель но его текущего положения в потоке

HTML. Так, например, устанавливая зна top - 20 пиксело в и значение l eft - 200 пиксело в для относительно раз мещенного заголовка, вы переместите его на 20 пикселов вниз и 200 пикселов

чение

влево от того места, где он появился бы на странице.

В отличие от абсолютного позиционирования, здесь остальные элементы стра ницы регулируют старое НТМL-размещение относительно позиционирован

ного объекта. Соответственно, Перемещение объекта с относительным позицио tшрованием оставляет 4<дыруi), на месте которой он должен был находиться. Посмотрите на темную полосу на рис. 13.1, внизу. Это то место, где появился бы относительно позиционированный блок, если бы ему не было дано указание на перемещение. Основная польза относительного позиционирования не в том,

чтобы переместить элемент, а в установке новой точки привязки для абсолютно позиционированных элементов, которые вложены в него (больше об этой кон

цепции вы узнаете в подразделе 4<Когда абсолютное позиционирование являет ся относительным!) данного раздела).

О Фиксироваш10е. Фиксированный элемент запирается в определенном месте на экране. Определение такого позиционирования играет ту же роль, что и уста

новка значения

fixed для свойства background-attachrnent (см. подраздел 4<Фикса

ция изображения на месте!) разд. 4<Позиционирование фоновых изображений!) гл.

8).

Когда посетитель прокручивает страницу, фиксированные элементы ос

таются на экране как абзацы и заголовки, в то время как фотографии прокру чиваются вместе со страницей.

ИспоЛьзование фиксированных элементов- отличный способ создать непо

движное боковое меню или воспроизвести эффект НТМL-фреймов, где про кручивается только определенная часть страницы. Вы скоро узнаете, как созда ется такой эффект.

378

Глава

13.

Позиционирование элементов на веб-странице

ПРИМЕЧдНИЕ----------------------------------------------- Intеmеt

Explorer б и более ранние flxed) и игнорируют его.

версии не nоддерживают фиксированное nозиционирование

(значение

О Статическое позиционирование просто означает, что содержимое соответству ет нормальному нисходящему потоку

HTML (см. рис. 13.1, вверху).

Но зачем

вам назначать элементу статическое позиционирование? Скорее всего, вы ни

когда не будете делать этого.

)

11 StltleaUy pos1ttoned «<lv> Нothlna to ие мrе.

I.Orem tpsum do\or slt omet, consect~ttН!r ad1ptsdnt ~Ut, Sf!d dlam nonummy niЬh eul!mod ttncldunt ut e.c>rнt doto.... masм o\lquam trot .otutpat. Ut wf11 tntm od mlntm vtnlмl, quls

nostru<l ~xerd tatton utlameorper susdplt \oЬortiS ntst ut atlqulp ех еа commodo conщuat. Duls aut~m ve\ eum lr1ure do\or ln Нlum dolore eu l~u&lat nutla lad

#2 Absolute

hюdrer1t

ln vulputat~ ~llt MSf!

nAЬsokhlyposltloМd

motest~ conиquat, vel

<41V>

rm 11Dit1nt- tlle P~F. 20 рЬее~S c1own

, Lomn tpsum dotor slt omet , rюm tlle t09 or the l)ale • lnd 2110 p\JC81s ntЬh ~ulsmod ~ ttncldunt ut taol'l<!t dolore overtrom the teft edt«- n..otller P8le m venlam, qul$ : nostrud exert:t tatton ullamco e~~u don' llnow rm here. consequot. ~ l>uts autem vet eum trlure do\or tn hendrer1t ln vutputate ~Ut esse motмtle conщuat, vel

(J~~~~~·J ~~!~_.. ... ~. . ,..~--~у--··--.-,..... ____,._..,. ............_.,._ ....~. .

_____________________

868

е')

Rtlai!Ye Posltlonlng

'е hnpдш.locaJfchl2/rtlatiJ Cёi· Goo9•• Lo<otJot\

S<m/1

)

(!) ..-.,.,

#3 Relative

Pwc. 13.1. CSS nредлагает несколько nутей воздействия на раэмещение элементов на веб-странице

379

Как работают свойства nозиционирования

Итак, можно сделать выводы. Статическое размещение- это то, как браузеры представляли содержимое с начала существования Сети. Они просто показывали

HTML

в нисходящем порядке (сверху вниз). Абсолютное размещение удаляет

элемент из потока страницы, определяя его на самый верх, иногда перекрывая ка

кое-нибудь другое содержимое. Относительное позиционирование размещает эле

мент относительно того места, где он появился бы на странице, и оставляет «дыру~ там, где этот элемент находился бы без относительного позиционирования.

Чтобы изменить расположение любого элемента, просто используйте свойство

position, которому присваивается одно из этих четырех значений: static, absol ute, re l at i ve, fi xed. Чтобы создать абсолют-но позиционированный элемент, добавьте это свойство к стилю:

position: absolute: Статическое позиционирование- это обычный метод расположения элемен тов, так что, если вы только не отменяете ранее созданный стиль, в котором уже указано расположение

abso l ute, re l at i ve

или

fi xed,

вам не нужно определять это

позиционирование. Кроме того, статические элементы не подчиняются ни одному

из значений позиционирования, обсуждаемых далее. Установка значений позиционирования

это обычно только часть сражения.

Чтобы на самом деле определить элемент где-нибудь на странице, вы должны ра зобраться с различными свойствами позиционирования.

Установка значений расположения Область отображения браузера, также называемая областью просмотра, имеет верхний, нижний, правый и левый края. Для каждого из этих четырех краев есть соответствующее СSS-свойство:

top, bottom, l eft

ri ght.

Вам не нужно задавать

значения для всех четырех сторон. Обычно достаточно двух, чтобы определить элемент на странице. Вы можете, если хотите, поместить элемент на расстоянии

1О em от левого края страницы и 20 em от вершины. ПPИMEЧAHИE-----------------------------------------------

Internet Explorer свойств Ьottom и

б иногда неверно устанавливает элементы, которые позиционируются с nомощью

right

(см. врезку «Ошибки брауэеров» далее).

Чтобы определить расстояние от края страницы до соответствующей стороны элемента, используйте любую из действующих в

em,

CSS единиц измерения: пикселы,

проценты и т. д. При позиционировании можно также использовать отрица

тельные значения, например

l eft: -lOpx:, чтобы переместить элемент частично за

страницу (или от другого элемента). Это приведет к появлению особого визуаль ного эффекта, который будет описан в подразделе «Исключение элемента за пре

делы блока~ разд. «Мощные стратегии позиционирования~ этой главы. После свойства

positi оп вы указываете два свойства (top, bottom, left или right).

Если вы хотите, чтобы элемент принял ширину, меньше допустимой (например,

чтобы сделать тонкое боковое меню), то можете установить свойство

width. Чтобы

поместить баннер страницы в определенном месте относительно верхнего и левого краев окна, создайте следующий стиль:

380

Глава

13. Позиционирование элементов

на веб-странице

#Ьanner

{ position: absolute: left: lOOpx: top: 50рх: width : 760рх: Этот стиль поместит баннер, как показано на рис.

left:

100рх

top: SOpx

top: SOpx Рис.

13.2, вверху.

right:

100рх

13.2. Польза абсолютного расnоложения состоит в возможности nоместить элемент

относительно nравого края окна браузера (посередине). Если ширина окна изменится, расстояние от nравого края окна до nравого края элемента останется неизменным (внизу)

Рассмотрим другой пример: поместим элемент таким образом, чтобы он всегда

оставался на фиксированном расстоянии от правой стороны браузера. Когда вы

381

как работают свойства позиционирования

используете свойство

ri ght, браузер измеряет расстояние от правого края окна до правого края элемента (см. рис. 13.2, посередине). Чтобы поместить баннер на рас стоянии

100 пикселов от правого края окна,

и ранее, но просто измените

вы создадите тот же самый стиль, что

1eft на ri ght:

#Ьanner

{ position: abso1ute: right: lOOpx; top: 50рх: width: 760рх: Поскольку рассчитываемая позиция основывается на правой стороне окна,

pe-

ry лирование его размера автоматически меняет расположение баннера, что вы мо жете видеть на рис.

13.2, внизу. Хоть баннер и перемещается, расстояние от правой

стороны элемента до правого края окна браузера остается неизменным. Формально вы можете указать свойства для левой и правой позиций, а также

для верхней и нижней и позволить браузеру определить ширину и высоту элемен та. Скажем, вы хотите, чтобы центральный блок текста размещался на расстоянии

100 пиксело в от вершины окна и 100 пиксело в от левой и правой его сторон. Чтобы определить блок, вы можете использовать стиль абсолютного позиционирования, который установит свойствам top,

1eft и ri ght значение 100 пикселов. В окне брау

зера левый край блока начинается на расстоянии окна, а правый край находится на расстоянии

(рис.

13.3, вверху).

100 пикселов от левой стороны 100 пиксело в от правой стороны

Точная ширина блока при этом зависит от ширины окна брау

зера. Более широкое окно увеличит блок; чем тоньше окно, тем меньше будет блок. Левая и правая позиции, однако, остаются теми же.

К сожалению, Internet Explorer версии 6 и ниже не понимает это должным обраэом-(см. рис. 13.3, внизу). Браузер показывает левую позицию корректно, но просто игнорирует любые правые значения. Таким образом, пока Internet Explorer 6 нет рядом, лучше придерживайтесь значений 1eft или ri ght и исполь зуйте свойства wi dth для определения ширины абсолютно позиционированного элемента.

Свойства

width

height,

о которых вы узнали в гл.

7, аналогично

работают для

позиционированных элементов. Чтобы поместить серый блок размером 50 х

50 пик

селов в верхний правый угол окна браузера, создайте такой стиль: .Ьох

{

position: abso1ute: right: 0: top: О: width: 50рх: height: 50рх: background-co1or: #333: Здесь надо вспомнить предостережение, которое давалось в разд. ~Определение параметров высоты и ширины~ гл.

7: будьте внимательны с установкой высоты для

элементов. Если вы не разрабатываете какую-нибудь графику с уже заданной

382

Глава

.,,,fl

''/>jlll.tllt

13.

Позиционирование элементов на веб·странице

'"11

~ х

!lltljojl!flcwGo~r••

ф. · -

+ . f!i о ~ ID Nlp:/!cso~~.-...мm 1&1- t:>css·

-а о""

~ ....... "'.._.. w.-..... 1 3 ) - еа~- c:J- 0тoo~oo!tJ

_ __iti

Absolutely positioned <div> Тор: 100рх

100рх

Left:

Rftht: 1ООрх "

c:I' Dont

. 1.·

) ' ,..

' &lt

r.,..

• н.-.

о·.:· :.. о. · · ~· ~ ~ ! Р-т ~·- е :' ~-~

• · o liJ

..... ·,.;j a ~ ·

..i,h;.[f]h._;:/!csoJO<II/c!t-291>-.h;..

Absolutely positioned <div> Тор: 100рх

Left:

100рх

Rfght: 1ООрх --

Рмс. 13.3. Получ ив только левую и правую позиции, Firefox правильно вычисляет ширину серого блока (ввepxy). lnternet Explorer 6, однако, игнорирует значение right и устанавливает ширину блока на основании ширины его содержимого

высотой, то не можете знать, насколько высоким будет на странице конкретный

элемент. Вы могли бы определить для бокового меню высоту 200 пиксело в, но если вы заканчиваете

ero оп исание добавлением

слов или картинок, которые сделают

383

Как работают свойства nозиционирования

боковое меню больше чем

200 пикселов в высоту, то в конечном счете содержимое

меню выйдет за его пределы. Даже если вы уверены, что содержимое поместится,

посетитель всегда может увеличить размер шрифта своего браузера, сделав текст достаточно большим, чтобы он мог 4:Выпасть• из блока. К тому же, когда вы определяете ширину и высоту в стиле, а содержимое внут

ри разрабатываемого злемента оказывается шире или выше, могут произойти

странные вещи (см. подраздел 4:Управление поведением блочных элементов с по~ мощью свойства overflow• разд. •Определение параметров высоты и ширины~ гл. где рассказывается, как .использовать СSS-свойство

overfl ow).

Когда абсолютное позиционирование является относительным Ранее в этой главе мы говорили о расположении злемента в конкретном месте

в окне браузера. Однако абсолютное позиционирование не всегда работает таким

образом. На самом деле абсолютно позиционированный злемент помещается относи тельно границ его ближайшего предка. Проще говоря, если вы уже создали злемент

с абсолютным расположением (скажем, тег <di v>, который появится на расстоянии

100 пикселовот вершины окна браузера), то любые абсолютно позиционирован ные элементы с НТМL-кодом внутри этого тега

<di v>

размещаются относительно

верхнего, нижнего, левого и правого краев области тега. ПРИМЕЧАНИЕ------------------------------------------------- Если вы не nомните, что такое родительские элементы и nредки, nерейдите к nодразделу «Дерево

HTML»

раэд. «Стилизация вложенных тегов» гл.

В верхнем изображении на рис. рован на расстоянии

13.4 светло-серый блок абсолютно позициони 5 em от верхнего и левого краев окна браузера.

Есть также тег <di v>, вложенный в этот блок. Применение абсолютного пози ционирования для этого тега позволит поместить его относительно абсолютно позиционированного родительского элемента. Установка свойству

bottom значе

ния О переместит блок не к осноJ}анию экрана, а к основанию его предка. Анало гично свойство

right

для этого вложенного тега

его родителя (см. рис.

<div>

относится к правому краю

13.4, внизу).

Каждый раз, когда вы используете абсолютное позиционирование, чтобы уста новить элемент на странице, его точное место зависит от расположения любых других тегов, в которые вложен разрабатываемый элемент. Позиционирование подчиняется следующим правилам:

О тег расположен относительно окна браузера, если у него абсолютное позицио нирование и он не находится внутри любого другого тега, к которому примене

но абсолютное, относительное или фиксированное позиционирование; О тег определен относительно сторон другого элемента, если он находится внутри

другого тега с абсолютным, относительным или фиксированным позициониро ванием.

384

Глава

13.

Позиционирование элементов на веб-сrранице

top: 5em

left: 5em

Nf~ttd

AЬsolutely

<dlv>

posttioned <div>

Left: Sem ••mtЧtiФtiФ'ШШШiii1111

Absolutely positioned <div> Тор:

Sem

right: 5em

Left: Sem bottom:

Рмс.

13.4. Вы можете

разместить элемент относительно окна брауэера (вверху)

или относительно позиционированного предка (внизу)

Когда и где испопьэовать относительное nозиционирование Вы получаете существенную выгоду, размещая элемент относительно другого теrа: если этот тег nередвигается, позиционированный элемент передвигается вместе

с ним. Скажем, вы оnределили изображение внутри тега <hl> и хотите, чтобы оно появилось в правой части заголовка. Если вы просто поместите изображение в кон кретном месте в окне браузера в левой части заголовка, то рискуете потерять его

из виду. Если заголовок будет nеремещен, абсолютно расnоложенное изображение останется «приклеенным>) к назначенному ему месту. Вместо этого лучше опреде лить изображение относительно тега

<hl> так, что, когда заголовок будет переме

щен, изображение переместится вместе с ним (две веб-страницы внизу рис.

13.5).

385

Как работают свойства поэиционирования

•

111101 IYIII ..IICI

- - - --·--- -·· ··- ~-~---- ------ - -- ·--·---·- · - - · -·

• • .Jo- . .

· -

•

t.orem lpsum dolor slt amet, consectetuer edlpls.clng ellt. sed dlem nonummy nibh eulsmod tlncldunt ut l~otнt ctotore fna9na 111ll quem er1t volvtpat. Ut wltt entm a<l mintm venl•m. quls

nostruct exerd tat1on utlamGOtper suscipit loЬOrtts nlsl ut attqulp е• еа cornmocto consequ.t. Duls flnd n1ore Jnfof't'nllltlon ht:r•.

autem vel eum i?Jure. You'll •

IIТIТII IYIIIfiiiCI , ; ~e~~~z-~;~;;;;,~~~;;;;~~~-~~-dlam nonummy nlbh ttJISrnod tlrкtdunt ut Jaoreet dolore maSJn.a ellquam entt volutpat. ut wisl enlm ad mtnlm ven•am, q~s ' no$trud e)(ttCI t..tion ult11mcorper susctptt loЬOn:ts nlsl ut allqulp commodo consequat. Ouls aute:m vet eum lrture. You11 tind mor;t tntorm1tlon here.

ех ее

Watch the Water Level

-~ lam11 IYIIIfllll!!_ , •• ,..

: U>rem lpsum 6ol0f slt amet, consectetuer adlpisc:lng ellt# dlam nonummy niЬh eulsmod tlncldunt ut IAOret't dofore magм at~quam trat votutpat. Ut wlsl enlm ad mlnlm ventam. Quis nostrud ••ercl tatlon ullamcorper suкlpit JoЬOrti J n(~ ut lllqUip ех еа c.ommodo conиquar. Du's autern val eum lrlure. You'll t•~. tr~or•

lnlormltfon

htr~ .

Watch the Water Level

l.ort:rn II)SUI"'" dolor

•щ ёlmP.t. C' OI'\\~rf('f~JP.r ~dipi scing

eltt. sr.d

thls lmportьll't $tOty with art even mof'e de.monstrat.on of css. Not:Jce hOw tne eЬsotutely ·дn~wtrsary 6adge'" moves 11009 wlth lts parent <hl> щ. rn. <ltl> has & posluon appHed \0 1t.

lnterтvpt

~mpot'Uf't

poslttoned

,.,..,tlve

· 1111111 IYIIIfiiiCI torem ipsum dolor slt amet. c:onse:('tetuer adip1sc:•ng elit, dCam nonummy nlbh eu(smod t:lncJdunt ut l~oreet dolore magм <t11(fulltn

PIIIК.

~r.at

vO(utp•f. U, wisl enlm ad mlnJm VP.ni an\,

13.5. Пример использования

цui s

отн.ос·и:гельноrо nозиционирования применительно

к ~_эображению

386

Глава

13.

Позиционирование элементов на веб-странице

ПРИМЕЧАНИЕ-------------------------------------------------

Испольэуйте свойство Ьackgrouпd-image (см. раэд. «Фоновые изображения» гл. 8), чтОбы поместить изображение в фон тега <h1>. Однако если изображение будет выше, чем тег <h1>, или вы хотите, чтобы оно появилось эа пределами границ заголовка (см. третью сверху веб-страницу на рис. 13.5), то используйте описанную эдесь методику относительного позиционирования.

Чтобы установить изображение на странице, вы могли использовать значение

re l at i ve

свойства

pos i t i on,

но здесь также есть недостатки. Когда вы устанавлива

ете относительное позиционирование для элемента, а затем размещаете его (воз

можно, используя свойства

l eft

top ),

элемент перемещается на определенное

расстояние от того места, где он появился бы в потоке

HTML.

Другими словами,

он перемещается относительно своего текущего положения. В результате на его

исходном месте остается пустое пространство, где элемент находился бы без ваше го позиционирования (см. рис.

13.1, в1tизу).

Рассмотрим представленный рисунок. На верхней веб-странице видно, что круглая графическая кнопка помещена внутри тега

<hl>

(см. рис.

13.5, вверху). ri ght: - 35рх:

На второй странице к кнопке применено абсолютное позиционирование:

top: - 35рх:, которое перемещает ее за пределы области тега <h 1> и определяет в верхнем правом углу окна браузера (на самом деле кнопка находится немного за пределами окна благодаря отрицательным значениям позиционирования) (см. рис.

13.5, вторая страница сверху). В коде третьей веб-страницы к тегу <hl> добавлено свойство

posi ti on: rel ati ve,

которое создает новую среду позиционирования для тега <i mg>. Те же самые значения

top

right

перемещают тег

<img> к верхнему

правому углу заголовка (см. рис.

13.5,

третья страница сверху). Когда вы передвигаете заголовок ниже, графика также

передвигается (см. рис.

13.5, внизу).

Лучший способ использовать относительное расположение состоит в том, что бы создать новую среду позиционирования для вложенных тегов. Например, тег в примере в начале этого раздела является владельцем тега

<img>,

<hl>

который нахо

дится внутри его. При установке относительного позиционирования тега

<hl>

любое абсолютное позиционирование, которое выприменитек тегу <img>, будет определено относительно четырех сторон заголовка <hl>, а не окна браузера. Код

CSS выглядит следующим образом: hl { positioп: relative; hl img { position: absolute: top: 0: right: 0: Установка свойствам

top и ri ght изображения значения О перемещает его в

верх

ний правый угол заголовка, а не окна браузера. В CSS термин <<относительныЙ!> (relative) означает не совсем то же самое, что в реальном мире. Все же, если вы хотите поместить тег <img> относительно тега <hl>,

вашей первой мыслью может быть определение для изображения относительного позиционирования. На самом деле элемент, который вы хотите разместить,

бражение

изо

получает абсолютное позиционирование, в то время как элемент,

387

как работают CJ!OЙcr&a позиционирования

относительно которого вы хотите определить изображение, чает значение

relative.

Представьте, что

relative означает

заголовок

полу

~относительно меня•.

Когда вы применяете относительное позиционирование для тега, это означает, что •все элементы, заданные внутри его, должны размещаться относительно его место положения•.

П~МЕЧАНИЕ----------------------------------------------- Поскольку вы будете часто применять относительное позиционирование просто для задания новой среды расnоложения вложенных теrов, вам даже не нужно исnользовать значения top, Ьottom, left и

right. У тега <hl>

есть свойство positioп :

relative,

но нет значений

top,

Ьottom,

left и right.

ОШИБКИ БРАУЗЕРОВ

lnternet Explorer нбывает свое место Иногда вы будете мсnольэовать mойства nозмцмонм

Как м большинство других ошибок в этом браузе

роваммя ьottom и right, чтобы nоместмть что-нибудь

ре, она исnравлена в седьмой и последующих вер

в нижнем nравом уrлу страницы или в нижнем углу

сиях. Исправление здесь заключается в том, чтобы

дpyroro элеменtа. Скажем, вы XOТifl! ра3МЮМТЬ ссып

задать элементу, относительно которого вы хотите

ку Contact Us в нижнем левом ymy баннера. Если у

nоместить какой-либо объект, специальное свойство

стмля баниера абсолютное или относительное nози

layout.

ционирование м вы nомещаете <еылку абсолютно, то

right для

большинство браузеров разместят ее относительно

Если вы исnользуете свойства ЬOttom или

сторонбаннера, как И ДОЛЖНЫ.

абсолютно nозиционированного элемента, а lnternet

Explorer все равно выдает этот элемент в другом Однако это не относится к

lnternet Explorer версий 6

месте, nерейдкте к врезке «Информация для оnытных

м ниже. Кажущмеся nредельно nонятнымм, mойства

nользователей» в разд. «Обработка ошибок вlnternet

ЬOttomм right моrут ввести потбраузер в забпужде

Explorer 6» гл. 12 и nримените одно из решений, оnи

нме.lntеmеt Explorer иногда nродолжает IЮ10льзовать

санныхтам.

IIИЖНМЙ м nравый края ве6-<Траницы как ссыпкм, так

'ПО в мтоrе ваш эnемемт будет расnоложен значитель

Кроме того, примеры решения этой nроблемы nриво

но 11мже или гораздо nравее, чем вы оЖI\Дали.

дятся повсюду в этой rлаве.

Наложение элементов Как вы можете видеть на рис.

13.6, абсолютно позиционированные

элементы

расположены на nереднем плане веб-страницы и могут даже находиться спере ди (или сзади) других позиционированных элементов. Такое наложение опре

деляется индексом позиционного уровня (z-index). Если вы знакомы с понятием

слоев в Photoshop, Fireworks или Adobe InDesign, то знаете, как работает иНдекс позиционного уровня: он представляет порядок, в котором элементы наклады

ваются на верхнюю поверхность страницы.

Когда вы используете индекс позиционного уровня, чтобы управлять поряд ком наложения элементов, родительские элементы определяют порядок нало

жения для с~оих детей. В двух верхних примерах на рис.

13.6 текстовый

блок

не позиционирован : он разделяет индекс позиционного уровня неnосредствен

но самой страницы, для которой значение z- i ndex равно О. Таким образом, кнопки

388

Глава

13.

Позиционирование элементое на веб-сrранице

в этих двух текстовых блоках накладываются поверх страницы . Однако для тексто вого блока в нижнем изображении задано абсолютное позиционирование с z- i ndex, равным 1000. Тег <di v>, содержащий текстовый блок, становится отправной точкой для укладки в него изображений. Так что, хоть z- i ndex области <di v> равен 1000, его вложенные дети (с более низкими значениями z- i ndex) появятся сверху, в то время как сам текстовый блок находится над страницей.

,............................................................................

z-index: 2

( Attention CosmoFarmer and ; Nationaf Exosperator Readers

z-index: 3

i C0$1ТIO/'orrnerls prou<l t<l announc:e ~ 54\'\ni$

z-index: 1

l oppo<t\lnfty tl\~ )'OU wotl't Wac>t tO P05S up. SUb·~-

; to&y for thetow,lowprtc.. of$~49 andyoullrecel"" " 1 one Y.OI'wt>salptroo to Ьoth ~мs ("'""lnf6 months of оое, antl611'10<\tМof tl\& <lthм.)

L............................- ........................,.................................................."

r·····..

~······· ·

z-index: 1

....................

j Attention CosmoFarme.r and ! National Ex;ssperator Readers

1CosmoF~ proud to aмounce H<l~ngs

z-index: 3

l opportunity Utat wu won'l. wan t to pass up. S<Jb,«:Ji118111• 1 to&y for tl\& tow, low p«::c:e of $249 anQ"youV r<>C9\ve ~ [ one У""' subsalption to Щ>tl\ ~n.к ( - i n! 6 ; months of one, ...,d 611)011tl\$ of the other.}

......... ...............,___,...........-...........................- .............._,_, ..,

j Attentfon CosmoF4rmer and j Nattonal Exasperator Readers f Cosmof- is proud to 3CIJIOUI\ce а S<!Vfngs : opportunlty 1/rat j/011 WOR' t W3C\t t\> POSS </):>. suь~:~~~~~· } to&y for tlh>low, lov< prlt@ of$249 ..,dyou11 tкelv.e 4 ; one у- wЬsqlpllon \о Ьoth ~м• (mtt<ll'llnv 6 -----1- - ; months of C)Cie, 4nd 611'10<\thf of the,othe<.)

z-index: 200 z-index: 1000

L..,_,,......".......................................................c....................... ..........: Рмс.

13.6. Веб-страница имеет многослойную структуру

Чтобы сказать это другими словами, подумайте о неб-странице как о листе бу

маги, а об абсолютно размещаемом элементе - как о записке, приклеиваемой свер ху. Каждый раз, когда вы добавляете на страницу абсолютно позиционированный элемент, вы ~приклеиваете» на нее заnиску. Конечно, если вы делаете это, то рис

куете закрыть что-нибудь уже наnисанное на странице. Обычно порядок наложения элементов следует их порядку в НТМL-коде стра ницы. На странице с двумя абсоЛЮ'FНО позиционированными тегами <di v> второй теr из

HTML появится выше другого тега <di v>.

Однако вы можете управлять по

рядком, в котором накладываются элементы , используя СSS-свойство

z- i ndex.

Свойство получает числовое значение:

z-index : 3 : Чем больше значение, тем ближе к вершине набора появится элемент. Скажем, у вас есть три абсолютно позиционированных изображения и части каждого из них

389

Как работают свойства позиционирования

в некоторой степени перекрываются. Изображение, имеющее больший индекс по зиционного уровня, появится над другими (см. рис.

13.6,

вверху). Когда вы меня

ете индекс позиционного уровня одного или нескольких изображений, вы изме няете порядок их наложения (см. рис.

13.6, nocepeдu1te).

сов~---------------------------------------------------Это прекрасно, если у вас будут промежутки в значениях индекса позиционного уровня. Другими

словами, значения

10, 20, 30

определяют то же самое, что и

1, 2, 3.

В действительности, простор

в числовых значениях дает вам возможность позже вставлять в набор больше элементов. Если вы хотите быть уверенными, что ничего никогда не появится над раэмещаемым элементом, эадайте ему очень большой индекс позиционного уровня, например z-iпdex: те, поскольку максимальное эначение, которое обрабатывает

10 000;. Но не переусердствуй Firefox, равняется 2 147 483 647.

Скрытие частей страницы Другое СSS-свойство, часто используемое с абсолютно позиционированными элементами,- свойство

visibility.

Оно позволяет скрыть часть страницы (или

по казать ее). Скажем, вы хотите, чтобы над изображением внезапно появлялось всплывающее сообщение, когда пользователь передвигает над ним указатель мыши. Вы делаете заголовок невидимым, когда страница загружается впервые

(vi si Ьi l ity: hidden), и

переключаетесь на режим видимости

когда указатель передвигается над изображением. На рис.

(vi siЬi l ity: vi siЬl е), 13.7 можно увидеть при

мер такого сообщения. Для создания такого эффекта, как на рис.

13.7,

в1tизу, программисты обычно

используют JavaScript, но вы можете использовать СSS-псевдокласс

: hover. hidden свойства visiЬility подобно значению nопе свойства display (см. разд. «добавление границ~> гл. 7), но между ними есть существенное различие. Когда вы устанавливаете свойству di sp l ау элемента значение поnе, он буквально исчезает со страницы, не оставляя следов. Однако установка свойству vi s i Ьi l i ty значения hi dden предотвращает показ браузером содержимого элемента, но остав ·Значение

ляет пустое пространство в том месте, где должен был находиться элемент. При ис пользовании с абсолютно позиционированными элементами, которые уже удаля ются из потока страницы, свойства

vi s i Ь i l i ty: hi dden

di s р l ау :

nопе ведут себя

одинаково.

Самый распространенный способ переключать режим элемента от скрытого к видимому и наоборот- чepeзjavaScript. Однако вам не нужно изучать програм

мирование нajavaScript, чтобы использовать свойство visiЬility (или Вы можете использовать псевдокласс

менты~> гл.

: hover (см.

display).

раэд. «Псевдоклассы и псевдоэле

3), чтобы сделать невидимый элемент видимым.

сов~---------------------------------------------------Для получения информации о баэовом СSS-методе добавления всплывающего окна с подсказкой

вспомогательного текста, который появляется, когда посетитель передвигает указатель мыши над

ссылкой,- эайдите на страницу http://psacake.com/web/jl.asp. У вас также есть возможность вос пользоваться JavaScript: плагин the jQuery Tooltip является полноценной и простой в использовании подсказкой, основанной на фреймварке

tooltip.

jQuery: http://bassistaпce.de/jquery-plugiпs/jquery-plugin

390 -

Глава

13.

Позиционирование элементов на веб-странице

.Jottl~ut.John

Cnattonl'&en er~asne~a а banCI оС ~sц,ped ftl'leg.ICtS VIWI.И N OOf'oltofS811'1 U01a. ~ W\"0 sr.p ~ ••~ous

RtMI.We

11П18

***' $

11\l#f"'....

-----.;

11П18

***

$,... ....,_..

***' &

!'М

....., _ ....

~~==·" ':.Jn....

cnnt.a NstO on t":.fAarlnt- .-".nonr $WOIIOI'Itt Olt*'IO mtmot~t аЬо\11 OOtllton

swo..

Otk~t Stom\ hrt Ф9fUC'IJ'C'J rntntot. 'fiO) (PNt Si.itSfWdl. ancJO)t "" Of 1t1ot ut\C fЦОП tC) ~tm indUWi.Cl\&lmOt ff'! ordotf to dtil ~ 1t1e ur.oear.ЬW nut "~" f'l'lt$$ion5 jnd uncttialo '!'lltf Оt.С.М-<мN\1!1 JamМ! fOO.CC»Ln atS91

~··

Рмс.

13.7 . Свойство visibllity полезно для скрытия части

страницы, которую вы хотите по казать

позже. На верхнем рисунке показан список кинофильмов. Перемещение указателя мыши над одним из изображений приводит к появлению сообщения (внизу)

Мощные стратегии позиционирования Как говорилось в начале этой главы, если вы попытайтесь использовать СSS-по зиционирование для размещения каждого элемента страницы, то можете столк-

391

Мощные стратегии позиционирования

нуться с проблемой. Поскольку просто невозможно предсказать все мыслимые комбинации браузеров и параметров настройки, используемые вашими посетите

лями, позиционирование под управлением

CSS

работает лучше всего в качестве

«тактического оружия~. Используйте его аккуратно, чтобы обеспечить точное раз мещение определенных элементов.

В этом разделе вы узнаете, как использовать абсолютное позиционирование, чтобы добавлять маленькие, но важные детали к дизайну своей страницы, как аб солютно позиционировать определенные элементы разметки и закреплять важные

элементы страницы в одном месте, в то время как остальное содержимое будет прокручиваться.

Позиционирование внутри элемента Один из самых эффективных способов использования позиционирования состоит в том, чтобы размещать маленькие элементы относительно других объектов на странице. Абсолютное позиционирование может повторять тип выравнивания по правому краю, которое вы задаете с плавающей разметкой. На рис. верхнем заголовке кажется высоко расположенной, но с

CSS

13.8 ( 1) дата на

вы можете перемес

тять ее к правому краю нижнего заголовка.

Чтобы поместить дату отдельно от остальной части заголовка, вам нужно за ключить ее в НТМL-тег. Тег <span> (см. врезку «Бриллиант без огранки~ в разд. «Се лекторы классов: точное управление~ гл.

3)-

распространенный выбор при ис

пользовании класса для расположенного в линию текста, чтобы определить его

отдельно от остальной части абзаца.

<h1?<span c1ass="date">Nov. 10: 2006</span> CosmoFarmer Bought

Ву

Goog1e</hl>

Теперь стоит вопрос о создании стилей. Во-первых, вы должны задать содержа щему элементу (здесь- тегу

<h1>)

значение

relative

(относительное позициони

рование). Затем применяте абсолютное позиционирование (значение

abso 1ute) для

элемента, который желаете разместить, -даты. Здесь приведен СSS-код для ниж

него изображения в первом примере на рис.

h1 { position: re1ative: width: 100%: border-bottom: 1рх dashed #999999: }

h1 span.date { position: absolute: Ьottom: 0: right: 0: font-size: .5em: background-co1or: #Е9Е9Е9: со 1о г: Ь1 ack : padding: 2рх 7рх О 7рх:

13.8 ( 1):

392

Глава

~~У-~ . 10, 2006

CosmoFarmer

13.

Позиционирование элементов на веб-странице

C~~m.oFarm.er..B()IJ8.~~ Ву G~lf!.... ...

CeleЬrates

6 Years

CosmoFarmer Celebrates 6 Years

The dreaded dandellon

Рис.

1~.8. Абсолютное

nозиционирование nрекрасно nодходит для nростых элементов дизайна,

наnример для размещения даты в нижнем nравом углу заголовка (7), выдавливания изображения из содержащего его блока (2) или размещения заголовка nоверх фотографии (3)

Некоторые из приведенных выше свойств, например

border-bottom, представле

ны просто для наглядности. Ключевые свойства выделены полужирным шрифтом:

pos i t i on, bottom и ri ght.

Как только вы задаете заголовку относительное позицИо

нирование, вы можете поместить тег

угол заголовка, установив свойствам

<span>, содержащий дату, в bottom и right значение О.

нижний правый

ПPИMEЧAHИE----------------------------------------------- версий б и ниже может неnравильно nонять размещение элемента, когда вы ис· пользуете свойства Ьottom и right. В этом примере объявление widtt!: 100%; в стиле тега <h1>

Internet Explorer

устраняет проблему, что обсуждалось во врезке «Ошибки брауэеров• выше в этой главе.

Исключение элемента эа пределы блока Вы можете также использовать позиционирование для размещения элемента таким

образом, чтобы он «выглядывал>) из-за другого элемента. На рис. изображение показывает заголовок с графикой. Так, тег

13.8 (2) верхнее <img> помещен внуrрь те

га <hl> как часть заголовка. Использование абсолютного позиционирования и от рицательных значений свойств

top

1eft

позволяет переместить изображение

393

Мощные стратегии позиционирования

к левому краю заголовка и вытеснить его за верхний и левый края. Рассмотрим СSS-код, который используется в этом примере:

h1 { position: relative: margin-top: 35рх: padding-left: 55рх: border-bottom: 1рх dashed #999999: }

h1 img { position: absolute: top: -ЗОрх: left: -ЗОрх: Основная концепция этого кода такая же, что и в предыдущем примере, но с не

которыми дополнениями. Во-первых, значения

top и l eft изображения отрицатель

ные, так что графика фактически появляется на расстоянии ной заголовка и

30 пикселов

30 пиксело в над верши

слева от левого края заголовка. Будьте внимательны,

когда используете отрицательные значения. В результате может получиться так, что

элемент будет частично (или полностью) расположен вне страницы или будет пере крывать содержимое другого элемента. Для предотвращения того, чтобы отрица тельно позиционированный элемент выходил за рамки окна браузера, добавьте достаточно полей или отступов либо к самому элементу, либо к включающему его относительно позиционированному тегу- в данном примере к тегу

<h1>. Дополни

тельные поля обеспечат достаточно места для выступающего изображения. В данном случае, чтобы предотвратить перекрытие изображением любого содержимого над заголовком, добавьте поле сверху. Левый отступ шириной 55 пикселов также «вы толкнет• текст заголовка из-под абсолютно позиционированного изображения. Как и в предыдущем примере, Internet Explorer готов доставить неприятности. Но, что еще хуже, добавление wi dth: 100% на этот раз даже не устранит проблемы. Поскольку у тега <h1> есть отступ, установка его ширине значения 100% в действи тельности сделает заголовок шире, чем

100%

страницы (см. разд. «Определение

параметров высоты и ширины• гл. 7 для получения подробной информации). Реше ние существует, но оно использует нестандартное СSS-свойство zoom. Просто добавь

zoom: 1 к стилю тега <h1>: h1 { position: relative: margin-top: 35рх: padding-left: 55рх; border-bottom: 1рх dashed #999999: zoom: 1:

те

сов~------~-------------------------------------------свойство

zoom не причиняет вреда другим браузерам, хоть и препятствует тому, чтобы ваш СSS-код

был корректно принят (см. врезку «Информация для новичков» в раэд. «Внешние таблицы стилей» гл. 2). Вы можете использовать условные комментарии Intemet Explorer, чтобы скрыть несг.~ндартное свойство, как описывается в раэд. «Уnравление браузером Intemet Explorer» гл. 15. Лучшее решение состоит в том, чтобы создать отдельную внешнюю таблицу стилей только для этого браузера.

394

Глава

13.

Позиционирование элементов на веб-сrранице

Использование СSS-позиционирования для разметки страницы Как говорилось в самом начале главы, попытка поместить каждый элемент на стра

нице в определенном месте окна браузера обычно заканчивается не очень хорошо. Аккуратно используя абсолютное позиционирование, вы сможете создать много стандартных макетов веб-страниц (как вы видели в предыдущей главе). Из этого

раздела вы узнаете, как разрабатывать свободную разметку на три столбца, приме няя именно абсолютное позиционирование. У страницы будет баннер, левое и пра вое боковые меню, область главного содержимого и нижний колонтитул для ин формации об авторском праве. ПРИМЕЧАНИЕ------------------------------------------------- Эта раздел научит вас общему подходу к абсолютному позиционированию, который вы можете

использовать практически с любым макетом страницы. В обучающем уроке в конце этой главы вы найдете практический пример по созданию разметки с абсолютным позиционированием.

Каждый раз, когда вы используете абсолютное позиционирование, держите

в уме такое правило: нельзя разместить все. Чтобы получить хорошую разметку, обычно вы должны использовать абсолютное позиционирование только для не скольких элементов страницы.

Рассмотрим простую методику, которую вы можете использовать, чтобы выяс

нить, какие именно элементы нужно размещать. Скажем, вы хотите разработать схему с тремя столбцами, как показало на рис.

13.9, справа.

Сначала рассмотрите,

как различные разделы страницы следуют нормальному порядку НТМL-кода без какого-либо СSS-позиционирования (см. рис.

13.9, слева). Затем для каждого разме

щаемого элемента своей страницы спросите себя: 4Будет ли он находиться в нуж ном месте, если я вообще не стану размещать его?~

Схема на рис.

13.9, слева,

демонстрирует, как разбить НТМL-код страницы на

разделы, каждый из которых определен в теге

ром

(ID).

Схема на рис.

13.9, справа,

<di v> с уникальным идентификато

показывает конечную разметку на три столбца

и необходимые типы позиционирования: относительное- для тега

<di v>, охваты

вающего содержимое (см. рис. левого и правого боковых

13.9, R); абсолютное -для корректного размещения меню (см. рис. 13.9, АР). Наконец, область с главным

содержимым нуждается в небольших левом и правом полях, чтобы препятствовать ее перекрытию боковыми меню ( показало стрелками на рис.

13.9).

Теперь пройдемся по элементам страницы, представленной на схеме на рис.

13.9,

слева.

О Баннер. Баннер

(1)

находится наверху страницы. Это как раз то место, где вы

хотите его видеть, так что для него не потребуется абсолютного позициониро вания. Вы можете использовать комбинацию полей и отступов, чтобы немного <<освободить>> содержимое (возможно, добавить немного пустого пространства над баниером или слева от него). О

• У паковка•

содержимого. Этот тег

<d i v>

является специальным элементом,

который содержит все остальные элементы на странице

(2 ). Поскольку он хранит

содержимое страницы, просто спросите себя, хотите ли вы, чтобы оно появилось

395

Мощные стратегии nозиционирования

Порядок описания в

.......

СSS-раэметка

HTML

о ...

баннер

-lr:Пil заголовок содержимого

11 D

1i ~

основное содержимое

!в !в lп

'-левое боковое меню

nравое боковое меню

1 нижний колонтитул

+--

lп

Рис. 13.9. Пример разметки страницы с исnользованием СSS-nозиционирования

под баннером. По плану основное содержимое страницы должно располагаться именно под баннером, поэтому здесь также не нужно применять абсолютное позиционирование.

ПРИМЕЧАНИ Е----------------------------------------------- Вообще, роль этой «уnаковки» для содержимого заключается в том, чтобы nомочь вам разместить элементы, наnример боковое меню, на странице.

О Основное содержимое. Главная часть страницы также находится непосред ственно под баниером (3). Вам надо будет задать поля слева и справа, чтобы создать место для боковых меню, но для этого не требуется абсолютное пози ционирование.

О Левое боковое меню. На рис.

13.9, слева, меню (4) появляется внизу страницы,

под главным содержимым . Но разве оно должно быть там? Конечно, нет. Таким

образом, для этого раздела необходимо абсолютное позиционирование. О Правое боковое меню. Вместо того чтобы находиться справа, как следует из названия, меню (5) появляется внизу страницы под левым боковым меню. Здесь снова нужно абсолютное позиционирование, чтобы поместить этот эле мент в должном месте - под баниером в правой части страницы. О Нижний колонтитул. На рис. 13.9, слева, нижн.ий колонтитул появляется внизу страницы (6)- как раз там, где вы хотите его видеть, так что здесь не нужно применять специальное позиционирование.

396

Глава

13.

Позиционирование элементов на веб-странице

ПРИМЕЧАНИЕ------------------------------------------------- Испольэовать абсолютное позиционирование для размещения нижнего колонтитула внизу окна

брауэера

плохая идея. Если содержимое страницы окажется больше высоты окна брауэера, то

нижний колонтитул будет прокручиваться (и окажется наверху) наряду с остальными элементами страницы, когда пользователь решит прокрутить ее. Лучшее решение

использовать фиксирован

ное позиционирование, которое описано в следующем подразделе.

Теперь, когда вы сможете решить, где использовать СSS-позиционирование

в своем проекте, приведу краткий обзор процесса построения разметки на три столбца.

Добавление тегов

<div> для каждого раздела страницы.

Эти теги позволяют

разбить содержимое страницы на отдельные блоки разметки для баннера, бо кового меню и т. д. Как и в случае с перемещаемыми элементами, которые мы

обсуждали в предыдущей главе, вы добавляете

<di v>

к этим контейнерным тегам

и, таким образом, можете создавать специфические СSS-стили для фор

матирования каждой части страницы (например,

Левое изображение на рис.

<di v> появляются

<div id = "баннер">). 13.9 показывает порядок, в котором различные тern

в НТМL-коде для разметки на три столбца. При использова

нии абсолютного позиционирования вам не надо беспокоиться (в отличие от перемещаемых элементов) о порядке тегов

· абсолютно

<di v> в НТМL-коде.

тока файла: сразу после открывающего тега

тегом

Код для любого

позиционированного элемента может появиться в любом месте по

</body>

<body>,

прямо перед закрывающим

или где-нибудь между ними. Свойства позиционирования опре

деляют, где элемент появится на экране, а не его место в НТМL-коде.

Включите весь НТМL-код для главного соДержимого, боковых ме100 и ниж <div>. Этот <div> (см. рис. 13.9, 2) собирает все

него колонтитула в другой тег

разделы содержимого в одну <<упаковку~. Добавьте сможете разрабатывать его (например,

<div id

ID к тегу, после чего вы "contentWrapper">). Этот тег

обеспечивает среду для позиционирования боковых меню, что вы увидите да лее.

Задайте содержащему тегу <div> относительную позИЦJПО. Используйте свой ство

pos i t i on

и значение

re l at i ve,

чтобы создать стиль такого вида:

#contentWrapper { position: relative: } Помните, что если вы не указываете значения

top, bottom, l eft

или

ri ght

для

относительно позиционированного элемента, он появится в том месте, где

и должен был появиться без позиционирования, в нашем случае

непосред

ственно под баннером. Относительное позиционирование на самом деле изме няет расположение элементов в теге

<di v>.

Теперь, когда вы используете абсо

лютное позиционирование для размещения боковых меню (а это следующий шаг), вы можете установnть значения

top относительно

4упаковки~. а не окна

браузера. Таким образом, если вы добавляете больше содержимого баниеру и делаете его выше, содержащий тег

<di v> и все внутри его смещается аккурат

но вниз по странице. Без тега

ваши боковые меню должны были разме

<div>

щаться относительно верхнего края окна браузера и вы должны были указать их значения

top.

397

Мощные стратегии позиционирования

Приме101те абсолютное позиционирова101е для боковых меню. Поскольку все остальное содержимое на странице прекрасно помещается там, где оно находит

ся, вы должны разместить только боковые меню. Поскольку вы располагаете

боковые меню относительно содержащего ихтега <di v>, который настраивается в шаге

3, можете просто задать значение О позициям top и l eft левого бокового top и ri ght правого бокового меню.

меню и позициям

#leftSidebar { position: absolute: left: 0: top: 0: width: 175рх: } #rightSidebar { position: absolute: right: 0: top: 0: wi dth : 180рх; Задание ширины ограничивает боковые меню. Если вы не установите ширину,

то боковые меню займут максимально возможное место, не оставив ничего для главного содержимого страницы.

сов~------------------------------~-------------------вы можете отрегулировать значения

top, left

right

как вам нравится. Если левое боковое меню

будет лучше выглядеть после задания небольших отступов от левого и верхнего краев «уnаковки», измените значения

lefl:

top,

скажем, на

lOpx

или укажите любое другое подходящее значение.

Отреrулируйте края главного содержимого. Поскольку для левого и правого

боковых меню задано абсолютное позиционирование, они удаляются из потока страницы. Главное содержимое даже «не знает», что они существуют, так что оно просто идет прямо под ними. Однако главное содержимое находится в пра

вильном месте на странице

под баннером, поэтому вам не нужно переносить

его. Все, что вы должны сделать,

немного отдалить основное содержимое от

левого и правого краев, чтобы очистить боковые меню.

Чтобы сделать это, добавьте левое и правое поля к тегу <di v> с главным содер жимым. Установите значение для каждого поля, равное или большее, чем ши рина бокового меню:

#mainContent { margin- left: 185рх: margin-right: 190рх; В этом коде поля получились немного больше, чем ширина каждого бокового

меню. Обычно полезно чуть увеличить края, чтобы были видны промежутки между различными элементами на странице.

Хоть все и получилось красиво, у этой разметки есть свое слабое место. Каждый раз, когда вы используете абсолютно позиционированные столбцы (как эти

398

Глава

13. Позиционирование

элементов на веб-странице

боковые меню), они потенциально могут вырасти и перекрыть часть нижнего колонтитула или других, более низких элементов

HTML (рис. 13.10). В отличие

от перемещаемых элементов, где вы можете очистить элемент и заставить его

появиться ниже свободно расположенного столбца, CSS не дает вам никакого способа очистить низ позиционированного столбца. Лучшее, что вы можете сделать, - найти обходной путь, как в следующем шаге. Порядок оnисания в

HTML

]

баннер

•

fJ основное содержимое

1• [11

1•

СSS-раэметка

левое

боковое меню nравое

~5Q!!2.1 меню "'

..1

НИЖНИЙ колонти~л

CosmoFarmer 2.0 YOW'OII!!ne gu!C!e \о apart,ln8DL ~

cOsmoFaлner Celebrates 6 Years ofUseful Advice for Apartment Farmers

Рмс. 13.10. Если абсолютно nоэиционированный столбец длиннее, чем любое статически размещенное содержимое, которое должно nоявиться вниэу столбца, nроиэойдет наложение. Устранить nроблему ~ожно, соэдав nоле для нижнего колонтитула

При необходимости добавьте поля к 101жнему колонтитулу, чтобы предотвра тить его перекрытне боковыми меню. Другой вариант - просто убедитесь, что

399

Мощные стратегии nозиционирования

любые абсолютно позиционированные столбцы никогда не окажутся длиннее главного содержимого. Когда главное содержимое достаточно длинное, оно вы

' под столбцами и вы избежите теснит нижний колонтитул, который окажется проблем. СОВЕТ---------------------------------------------------- Еспи вам нравится применять все новшества, то можете nоnробовать JavaScript-peшeниe этой проблемы, оnисанное по адресу

www.shauninman.com/plete/2006/05/clearance-position-inline-

absolute.php. Вы можете изменять эту методику базовой разметки страницы любыми путями. Удалите правое боковое меню и свойство

right-margin

тега

<div> с

главным содер

жимым, и вы получите разметку с двумя столбцами. Или вместо этого удалите левое боковое меню, чтобы создать разметку с двумя столбцами, но с более тонким столбцом справа. Вы можете также использовать эту базовую схему в разметке с фиксированной шириной. Просто установите ширину для баниера и ширину для тега

<di v> с

содержимым таким образом:

#banner. #contentWrapper { width:

760рх:

Соэдание СSS-стиля для шапки страницы

с использованием фиксированного позиционирования В каких-то случаях бывает нужно, чтобы некоторые элементы страницы были постоянно видимыми, например навигационная панель, поле для поиска или

логотип сайта, а, как известно, большинство веб-страниц длиннее высоты экрана. Фреймы

HTML были

когда-то единственным способом «удержатм важные эле

менты, в то время как другое содержимое прокручиналось и исчезало из области видимости. Однако у НТМL-фреймов есть важные недостатки. Поскольку каж

дый фрейм описывается в отдельном файле веб-страницы, приходится создавать

несколько НТМL-файлов, чтобы сделать одну полноценную веб-страницу (на зываемую страницей, содержащей набор фреймов). Это не только отнимало мно

го времени у разработчиков, но и усложняло ПОJ1СК по сайту для поисковых ма шин.

НТМL-страницы, содержащие набор фреймов, могут также быть неудобными

для посетителей, которые используют экранных дикторов из-за проблем со зрени ем, или тех, кто хочет распечатать страницы сайта.

Тем не менее идея фреймов все еще пригодна, так что

CSS

предлагает вариант

позиционирования, который позволит вам получить видимость фреймов с мень

шим количеством работы. Вы можете просмотреть страницу, созданную с исполь зованием фиксированного позиционирования, на рис.

fixed

свойства

position,

13.11.

Используя значение

вы можете имитировать НТМL-фреймы, фиксируя неко

торые элементы в определенных местах, но все еще разрешая пользователям про

кручивать содержимое очень длинной веб-страницы.