Книга css3 3е издание Серия Бестселлеры OReilly
 Скачать 20.28 Mb.
|
|
Д. Макфарланд Большая книга CSS3 3-е издание Серия «Бестселлеры O’Reilly» Перевел с английского Н. Вильчинский Заведующий редакцией Д. Виницкий Ведущий редактор Е. Каляева Научный редактор Н. Вильчинский Художник Л. Адуевская Корректор Е. Павлович Верстка О. Богданович ББК 32.988.02-018 УДК 004.738.8 Макфарланд Д. М17 Большая книга CSS3. 3-е изд. — СПб.: Питер, 2014. — 608 с.: ил. — (Серия «Бест- селлеры O’Reilly»). ISBN 978-5-496-00428-2 C помощью технологии CSS3 (каскадные таблицы стилей) можно создавать уникальные, современные оформления веб-сайтов. Но даже самый опытный веб-разработчик может не знать всех приемов приме- нения CSS3. Прочитав в этой книге множество практических примеров, а также советов, вы перейдете на новый уровень создания сайтов с помощью HTML и CSS. Вы узнаете, как разрабатывать веб-страницы, которые одинаково быстро работают и одинаково выглядят как на ПК, так и на смартфонах и планшетах. В книге рассмотрены следующие темы: написание HTML5-, CSS3-тегов, которые распознаются во всех браузерах; форматирование текста, добавление на страницы навигации; создание таблиц и форм; приемы веб-дизайна для создания уникального оформления сайтов; создание сайтов для любых устройств с помощью адаптивного дизайна. 12+ (В соответствии с Федеральным законом от 29 декабря 2010 г. № 436-ФЗ.) ISBN 978-1449325947 англ. Copyright © 2013 Sawyer McFarland Media, Inc. All rights reserved. Authorized Russian translation of the English edition of CSS3: The Missing Manual, 3rd Edition (ISBN 9781449325947). This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same ISBN 978-5-496-00428-2 © Перевод на русский язык ООО Издательство «Питер», 2014 © Издание на русском языке, оформление ООО Издательство «Питер», 2014 Права на издание получены по соглашению с O’Reilly. Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав. Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как надеж- ные. Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не может гаран- тировать абсолютную точность и полноту приводимых сведений и не несет ответственности за возможные ошибки, связанные с использованием книги. ООО «Питер Пресс», 192102, Санкт-Петербург, ул. Андреевская (д. Волкова), 3, литер А, пом. 7Н. Налоговая льгота — общероссийский классификатор продукции ОК 005-93, том 2; 95 3005 — литература учебная. Подписано в печать 06.11.13. Формат 70×100/16. Усл. п. л. 49,020. Тираж 2700. Заказ Отпечатано в полном соответствии с качеством предоставленных издательством материалов в ГППО «Псковская областная типография». 180004, Псков, ул. Ротная, 34. Краткое содержание Об авторе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13 О творческой команде . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14 Благодарности . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15 Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16 Часть 1. Основы CSS Глава 1. HTML для CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30 Глава 2. Создание стилей и таблиц стилей . . . . . . . . . . . . . . . . . . . . . .49 Глава 3. Селекторы: определение элементов стилизации . . . . . . . . . . .69 Глава 4. Механизм наследования стилей . . . . . . . . . . . . . . . . . . . . . .106 Глава 5. Управление сложной структурой стилей: каскадность . . . . . . .116 Часть 2. Применение CSS Глава 6. Форматирование текста . . . . . . . . . . . . . . . . . . . . . . . . . . . .138 Глава 7. Поля, отступы, границы . . . . . . . . . . . . . . . . . . . . . . . . . . . .205 Глава 8. Добавление графики на веб-страницы . . . . . . . . . . . . . . . . .251 Глава 9. Приводим в порядок навигацию сайта . . . . . . . . . . . . . . . . .306 Глава 10. Осуществление преобразований, переходов и анимации с помощью CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . .348 Глава 11. Форматирование таблиц и форм . . . . . . . . . . . . . . . . . . . . .387 6 Краткое содержание Часть 3. Макет страницы Глава 12. Введение в разметку CSS . . . . . . . . . . . . . . . . . . . . . . . . . .414 Глава 13. Разметка страницы на основе плавающих элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .427 Глава 14. Адаптивный веб-дизайн . . . . . . . . . . . . . . . . . . . . . . . . . . .464 Глава 15. Позиционирование элементов на веб-странице . . . . . . . . .499 Часть 4. CSS для продвинутых Глава 16. CSS для распечатываемых веб-страниц . . . . . . . . . . . . . . .527 Глава 17. Совершенствуем навыки работы с CSS . . . . . . . . . . . . . . . .546 Приложения Приложение 1. Справочник свойств CSS . . . . . . . . . . . . . . . . . . . . . .569 Приложение 2. Информационные ресурсы, касающиеся CSS . . . . . . .603 Оглавление Об авторе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 О творческой команде . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Благодарности . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Как работает CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Преимущества CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Что необходимо знать . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 HTML: структура языка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Типы документов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Как работают HTML-теги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Немного слов о XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 HTML5 — новый виток эволюции . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Программное обеспечение, используемое для CSS . . . . . . . . . . . . . . . . . . 21 Об этой книге . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Основные разделы книги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Основная терминология . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 О путях к папкам и командах меню . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Соглашения, принятые в данной книге . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Интернет-ресурсы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 От издательства . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Часть 1. Основы CSS Глава 1. HTML для CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 HTML: прошлое и настоящее . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Написание HTML-кода для CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Осмысление тегов и . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 8 Оглавление Дополнительные теги в HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Составление своего представления о макете страницы . . . . . . . . . . . . . . 38 Важность doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Обеспечение использования самой последней версии Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Глава 2. Создание стилей и таблиц стилей . . . . . . . . . . . . . . . . . . . . 49 Что такое стиль . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Понимание таблиц стилей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Внутренние таблицы стилей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Внешние таблицы стилей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Обучающий урок: создание первых стилей . . . . . . . . . . . . . . . . . . . . . . . . 58 Глава 3. Селекторы: определение элементов стилизации . . . . . . . 69 Селекторы типов: дизайн страницы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Селекторы классов: точное управление . . . . . . . . . . . . . . . . . . . . . . . . . . 71 ID-селекторы: определение элементов веб-страниц . . . . . . . . . . . . . . . . . 74 Стилизация групп тегов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Стилизация вложенных тегов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Создание модулей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Псевдоклассы и псевдоэлементы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Селекторы дочерних элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Селекторы типов дочерних элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Селектор :not() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Обучающий урок: примеры использования селекторов . . . . . . . . . . . . . . . 95 Глава 4. Механизм наследования стилей . . . . . . . . . . . . . . . . . . . . . 106 Что такое наследование? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Упрощение таблиц стилей через наследование . . . . . . . . . . . . . . . . . . . 108 Ограничения наследования . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Обучающий урок: наследование . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Глава 5. Управление сложной структурой стилей: каскадность . 116 Каскадность стилей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Особенности механизма каскадности: какие стили имеют преимущество 121 Управление каскадностью . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Как избежать войн значимости . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Начинаем с чистого листа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Обучающий урок: механизм каскадности в действии . . . . . . . . . . . . . . . 131 Оглавление 9 Часть 2. Применение CSS Глава 6. Форматирование текста . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Использование шрифтов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Выбор обычного шрифта . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Использование веб-шрифтов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Типы файлов шрифтов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Правовые вопросы использования веб-шрифтов . . . . . . . . . . . . . . . . . . 145 Поиск веб-шрифтов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Создание нескольких форматов шрифтов . . . . . . . . . . . . . . . . . . . . . . . . 146 Использование директивы @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Создание стилей с использованием веб-шрифтов . . . . . . . . . . . . . . . . . . 151 Работа с полужирными и курсивными вариантами . . . . . . . . . . . . . . . . . 152 Простой способ добавления полужирного и курсивного вариантов . . . . . 153 Добавление полужирного и курсивного вариантов и поддержка Internet Explorer 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 Google web fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 Придание тексту цветового оформления . . . . . . . . . . . . . . . . . . . . . . . . 166 Установка размера шрифта . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Форматирование символов и слов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Добавление текстовых теней . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 Форматирование абзацев текста . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 Форматирование первой буквы, первой строки абзаца . . . . . . . . . . . . . . 185 Стилизация списков . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 Обучающий урок: форматирование текста в действии . . . . . . . . . . . . . . 192 Глава 7. Поля, отступы, границы . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Понятие блочной модели . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Управление размерами полей и отступов . . . . . . . . . . . . . . . . . . . . . . . . 207 Добавление границ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Установка цвета фона . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Создание скругленных углов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Добавление теней . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Определение параметров высоты и ширины . . . . . . . . . . . . . . . . . . . . . . 226 10 Оглавление Переопределение ширины блока с помощью box-sizing . . . . . . . . . . . . . . 229 Задание максимальных и минимальных значений высоты и ширины . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Управление обтеканием содержимого плавающих элементов . . . . . . . . . 234 Обучающий урок: поля, фоновые параметры, границы . . . . . . . . . . . . . . 239 Двигаемся дальше . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Глава 8. Добавление графики на веб-страницы . . . . . . . . . . . . . . . 251 CSS и тег Добавление фоновых изображений . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 Управление повтором фоновых изображений . . . . . . . . . . . . . . . . . . . . . 257 Позиционирование фоновых изображений . . . . . . . . . . . . . . . . . . . . . . . 258 Определение начальной позиции фонового изображения и порядка его отсечения . . . . . . . . . . . . . . . . . . . . . . . 265 Масштабирование фоновых изображений . . . . . . . . . . . . . . . . . . . . . . . 266 Сокращенный вариант свойства background . . . . . . . . . . . . . . . . . . . . . . 268 Использование нескольких фоновых изображений . . . . . . . . . . . . . . . . . 270 Использование градиентных фонов . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Линейные градиенты . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Цветовые опорные точки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 Префиксы производителей и поддержка Internet Explorer . . . . . . . . . . . . 278 Повторяющиеся линейные градиенты . . . . . . . . . . . . . . . . . . . . . . . . . . 279 Радиальные градиенты . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 Повторяющиеся радиальные градиенты . . . . . . . . . . . . . . . . . . . . . . . . . 283 Применение градиентов, создаваемых с помощью Colorzilla . . . . . . . . . . 283 Обучающий урок 1: совершенствуем изображения . . . . . . . . . . . . . . . . . 286 Обучающий урок 2: создание фотогалереи . . . . . . . . . . . . . . . . . . . . . . 291 Обучающий урок 3: использование фоновых изображений . . . . . . . . . . . 297 Получение свитка, появляющегося в Internet Explorer 8 . . . . . . . . . . . . . 304 Глава 9. Приводим в порядок навигацию сайта . . . . . . . . . . . . . . . 306 Выборка стилизуемых ссылок . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306 Стилизация ссылок . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 Создание панелей навигации . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318 CSS-стиль для предварительной загрузки ролловеров . . . . . . . . . . . . . . 327 Стилизация отдельных видов ссылок . . . . . . . . . . . . . . . . . . . . . . . . . . . 329 Обучающий урок 1: стилизация ссылок . . . . . . . . . . . . . . . . . . . . . . . . . 331 Обучающий урок 2: создание панели навигации . . . . . . . . . . . . . . . . . . 338 Оглавление 11 Глава 10. Осуществление преобразований, переходов и анимации с помощью CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348 Преобразования . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348 Переходы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358 Анимация . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366 Обучающий урок . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379 Глава 11. Форматирование таблиц и форм . . . . . . . . . . . . . . . . . . . 387 Правильное использование таблиц . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387 Создание стилей для таблиц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390 Создание стилей для форм . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396 Обучающий урок 1: создание стилей для таблиц . . . . . . . . . . . . . . . . . . 402 Обучающий урок 2: создание стилей для форм . . . . . . . . . . . . . . . . . . . 407 Часть 3. Макет страницы Глава 12. Введение в разметку CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 414 Типы разметок веб-страницы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414 Как работает CSS-разметка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416 Стратегии разметки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422 Глава 13. Разметка страницы на основе плавающих элементов . . . . . . . . . . . . . . . . . . . . . . . . . 427 Использование плавающих элементов в разметках . . . . . . . . . . . . . . . . . 430 Решение проблем плавающих элементов . . . . . . . . . . . . . . . . . . . . . . . . 436 Обучающий урок. Многоколоночная разметка . . . . . . . . . . . . . . . . . . . . 451 Глава 14. Адаптивный веб-дизайн . . . . . . . . . . . . . . . . . . . . . . . . . . . 464 Основы адаптивного веб-дизайна . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464 Настройка веб-страницы для RWD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466 Медиазапросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467 Гибкие сетки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476 Изменчивые изображения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482 Обучающий урок по адаптивному веб-дизайну . . . . . . . . . . . . . . . . . . . . 486 Глава 15. Позиционирование элементов на веб-странице . . . . . . 499 Как работают свойства позиционирования . . . . . . . . . . . . . . . . . . . . . . . 499 Эффективные стратегии позиционирования . . . . . . . . . . . . . . . . . . . . . . 513 Обучающий урок: позиционирование элементов страницы . . . . . . . . . . . 518 12 Оглавление Часть 4. CSS для продвинутых Глава 16. CSS для распечатываемых веб-страниц . . . . . . . . . . . . . 527 Как работают аппаратно-зависимые таблицы стилей . . . . . . . . . . . . . . . 527 Как добавлять аппаратно-зависимые таблицы стилей . . . . . . . . . . . . . . 530 Создание таблиц стилей для печати . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531 Обучающий урок: создание таблицы стилей для печати . . . . . . . . . . . . . 539 Глава 17. Совершенствуем навыки работы с CSS . . . . . . . . . . . . . . 546 Добавление комментариев . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546 Организация стилей и таблиц стилей . . . . . . . . . . . . . . . . . . . . . . . . . . . 547 Устранение столкновений стилей в браузере . . . . . . . . . . . . . . . . . . . . . 555 Использование селекторов потомков . . . . . . . . . . . . . . . . . . . . . . . . . . . 559 Различный код CSS для Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . 564 Приложения Приложение 1. Справочник свойств CSS . . . . . . . . . . . . . . . . . . . . 569 Значения CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 Свойства текста . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573 Свойства списков . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 578 Отступы, границы и поля . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579 Фоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 584 Свойства разметки страницы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587 Свойства анимации, преобразований и переходов . . . . . . . . . . . . . . . . . 593 Свойства таблицы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 598 Различные свойства . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600 Приложение 2. Информационные ресурсы, касающиеся CSS . . 603 Справочники . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603 Справочная информация по CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604 Подсказки, приемы и советы по CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604 CSS-навигация . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 605 Разметка CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606 Выставочные сайты . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607 Программное обеспечение для CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607 Об авторе Дэвид Сойер Макфарланд — президент Sawyer McFarland Media, Inc., компании по обучению и разработке интернет- приложений в Портленде, штат Орегон (США). Он создает сайты с 1995 года: именно тогда он создал свой первый про- ект — онлайн-журнал для специалистов в области коммуни- каций. Он работал веб-мастером в Калифорнийском универ- ситете в Беркли и в Центре мультимедийных исследований Беркли (Berkeley Multimedia Research Center), а также уча- ствовал в проектировании и создании огромного количества сайтов для всевозможных клиентов, включая Macworld.com. Кроме всего прочего, Дэвид является писателем, тренером и инструктором. Он преподавал веб-дизайн в Высшей школе журналистики в Беркли, Центре элек- тронного искусства (Electronic Art), Колледже искусств, Центре новой прессы и Го- сударственном университете Портленда. Дэвид написал статьи о Сети для журна- лов Practical Web Design, MX Developer's Journal и Macworld, а также для портала CreativePro.com. С Дэвидом вы можете связаться по электронной почте: missing@sawmac.com (если же вам нужна техническая помощь, то обращайтесь к ресурсам, указанным в приложении 2). О творческой команде Нэн Барбер (редактор) начала работать с серией Missing Manual еще в прошлом веке. Живет в Массачусетсе вместе со своим мужем. Ее электронный адрес: nanbarber@ oreilly.com Холли Байер (выпускающий редактор) живет в Старом Кембридже, штат Массачусетс, любит готовить, мастерить разные вешицы и увлекается совре- менным дизайном в духе середины прошлого столетия. Ее электронный адрес: holly@oreil ly.com Нэнси Рэйнхарт (корректор) живет на Среднем Западе, проводя летние выход- ные на озере, плавая на лодке, купаясь и жадно читая книги. Нэн не только вне- штатный литературный редактор и корректор, но и автор любовных романов. С ее работами можно ознакомиться на сайте www.nanreinhardt.com . Ее электронный ад- рес: nanleigh1@gmail.com Дэниел Дж. Куинн (технический редактор) внештатный веб-дизайнер, име- ющий веб-сайт DQuinn.net . Последние пять лет работал старшим специалистом по пользовательскому интерфейсу в отмеченном разными наградами агентстве по со- зданию цифровых продуктов Genuine Interactive. Специализировался на WordPress и стратегии контента для таких брендов, как Sam Adams, MassMutual и Children's Hospital Boston. В настоящее время Дэниел работает веб-разработчиком в отделе цифровых коммуникаций Гарвардского университета. Он периодически сотрудни- чает с командой местных дизайнеров. Его электронный адрес: daniel@dquinn.net Джейсон Арнольд (технический редактор) живет в Санта Роза, Калифорния с женой и тремя дочерьми. Работает техническим специалистом по телеметриче- ским системам в районной больнице Хелдсбурга и учит детей кэмпо-карате. В на- стоящее время он занят получением ученой степени в профессиональном коллед- же в Санта Роза. Свободное время он посвящает кэмпо-карате со своими дочерьми и всегда готов работать над дополнительными техническими проектами. Благодарности Большое спасибо всем, кто помогал в работе над этой книгой, включая моих сту- дентов, которые всегда оценивали технические издания с позиции новичков. Бла- годарю своих технических редакторов, Дэниела Куинна и Джейсона Арнольда, которые предостерегли меня от досадных ошибок, а также Зое Гилленуотер за ее бесценный вклад в первое издание книги. Кроме того, мы все в долгу перед веб- дизайнерами, которые стали новаторами, творчески используя CSS, и которые поделились своими наработками в сообществе, посвященном веб-дизайну. Наконец, спасибо Дэвиду Погу, чей неувядающий энтузиазм и выносливость ободряли меня; Нэн Барбер — за очистку моих рукописей и прочую помощь в на- писании этой книги; моей жене Сколле — за любовь и поддержку; моему сыну Грэхему, который убеждал меня в том, что я закончу эту книгу гораздо быстрее, если в каждой главе буду писать «Тра-ля-ля!»; моей чудесной дочке Кейт, чья улыбка всегда меня воодушевляла, и всей моей семье: маме, Дугу, Мари, Дэвиду, Марисе, Тессе, Филис, Лес, Дел, Патриции и Майку. Введение Каскадные таблицы стилей, или Cascading Style Sheets (CSS), обеспечивают твор- ческую свободу в разметке и дизайне веб-страниц. Пользуясь CSS, вы сможете украсить текст страниц привлекательными заголовками, буквицами, рамками, как в красочных глянцевых журналах. Можно точно разместить и позиционировать изображения, создать столбцы и баннеры, выделить ссылки динамическими эф- фектами. Кроме того, можно добиться постепенного появления и исчезновения элементов, перемещения объектов по странице или медленного изменения цвета кнопки при прохождении над ней указателя мыши. Вы думаете, что все это довольно сложно? Напротив! Каскадные таблицы сти- лей как раз и предназначены для упрощения процесса оформления веб-страниц. Следующие несколько страниц будут посвящены основам CSS, а при изучении гл. 1 вы перейдете к непосредственной работе по созданию веб-страниц, улучшен- ных с помощью CSS. Как работает CSS CSS работает с HTML, но не имеет к HTML никакого отношения. Это совершен- но другой язык. HTML структурирует документ, упорядочивая информацию в за- головки, абзацы, маркированные списки и т. д., в то время как CSS тесно взаимо- действует с браузером, чтобы оформление HTML-документа имело совершенный вид. Например, вы могли бы использовать HTML, чтобы превратить фразу в заго- ловок, отделяя его от содержания страницы, но лучше применять CSS для форма- тирования заголовка, скажем, большим полужирным красным шрифтом с пози- ционированием на 50 пикселов от левого края окна. В CSS это форматирование текста включает в себя стиль — правило, описывающее внешний вид конкретной части веб-страницы. А таблица стилей (style sheet) является набором таких сти- лей. Можно также создавать стили специально для работы с изображениями. На- пример, с помощью стилей можно выровнять изображение по правому краю веб- страницы, поместить его в цветную рамку, отделить от окружающего текста на 50 пикселов. Создав стиль один раз, можно применять его к текстовым фрагментам, изобра- жениям, заголовкам и любым другим элементам страницы сколько угодно. Напри- мер, вы можете выбрать абзац текста и применить к нему стиль, тут же изменя- ющий размер, цвет и шрифт текста. Можно также сделать стили для определенных HTML-тегов так, чтобы, например, все заголовки первого уровня (теги ) на вашем сайте были отображены в одинаковом стиле, независимо от того, где они размещены. Введение 17 Преимущества CSS До появления CSS дизайнеры веб-страниц были ограничены возможностями раз- метки и оформления языка HTML. И если вы занимались серфингом в Интернете в 1995 году, то уясните разницу в возможностях CSS и HTML. Читая дальше эту книгу, вы поймете, что HTML все еще является основой создания страниц в Сети, но это отнюдь не средство формирования их дизайна. Безусловно, HTML обеспечи- вает простейшее форматирование текста, изображений, таблиц и других элементов страниц, и оформитель может придать им прекрасный внешний вид. Как правило, в результате веб-страницы получаются громоздкими и медленно загружаются. Таблицы стилей CSS, напротив, имеют следующие преимущества. Больше возможностей форматирования, нежели в HTML. В CSS вы можете фор- матировать абзацы по мере их появления в тексте (например, с абзацным отсту- пом и с произвольным интервалом между абзацами) и изменять межстрочный интервал (расстояние между двумя соседними строками текста в абзаце). При использовании CSS вы решаете, каким образом добавить фоновое изобра- жение на страницу. Оно может отображаться в виде неперекрывающейся мозаи- ки, повторяться и т. д. Еще более значимо то, что стили CSS занимают намного меньше места, чем фор- матирующие команды HTML. Например, тег . Применяя CSS, вы можете уменьшить размер веб-страниц. В результате они будут стильно выглядеть и бы- стрее загружаться. Стилевые таблицы также облегчают обновление сайта. Можно собрать все сти- ли в единственный внешний файл и связать его со всеми страницами сайта. Ко- гда вы редактируете стиль, изменения моментально затрагивают все элементы страниц сайта, где есть ссылка на описанный в таблице стиль. Вы можете пол- ностью изменить внешний вид путем редактирования единственного файла таб- лицы стилей. Что необходимо знать Эта книга предполагает, что вы уже знакомы с языком HTML (и, возможно, име- ете небольшой опыт работы с CSS). Подразумевается, что вы создали пару сайтов (или по крайней мере несколько веб-страниц) и знакомы с основными тегами, такими как , , |