2011г.
Современные технологии веб-дизайна активно развиваются. Если раньше процесс графического оформления сайта представлял собой скрупулезную работу в HTML, то сегодня
позволяет без лишних усилий создавать действительно уникальные, удобные и функциональные сайты. CSS (каскадные таблицы стилей) — это технология описания внешнего вида документа с помощью языка разметки, позволяющая легко и быстро задавать параметры графического отображения веб-страницы. Это не просто полезный инструмент для «украшения»: используя CSS, можно в полном объеме управлять внешним видом сайтов (от шрифта и цвета до макета страницы). Данная книга
доступно и подробно объясняет основы этого мощного инструмента веб-дизайна и помогает научиться как созданию новых, так и апгрейду уже существующих сайтов. Во втором издании книги материал в значительной степени переработан с учетом самых современных интернет-технологий, а также актуальных и анонсируемых обновлений
Об авторе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
О творческой команде . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Благодарности. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Введение. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Как работает CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Преимущества CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Что необходимо знать. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
HTML: структура языка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Как работают HTML-теги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
XHTML: современный HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
HTML 5 — новый виток . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Программное обеспечение для CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Об этой книге . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Основные разделы книги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Примеры программного кода на CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
О сайте MissingManuals.com. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Основная терминология. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
О стрелках. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Соглашения, использованные в данной книге . . . . . . . . . . . . . . . . . . . . . . 26
От издательства. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Часть 1. Основы CSS
Глава 1. CSS — новый подход к HTML . . . . . . . . . . . . . . . . . . . . . . . . . 30
HTML: прошлое и настоящее. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Написание HTML-кода для CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Важность doctype. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Долгожданный Internet Explorer 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Глава 2. Создание стилей и таблиц стилей. . . . . . . . . . . . . . . . . . . . . 44
Что такое стиль. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Понимание таблиц стилей. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Внутренние таблицы стилей. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Внешние таблицы стилей. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Обучающий урок: создание первых стилей .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. ..52
Глава 3. Селекторы: определение элементов стилизации . . . . . . . . . 63
Селекторы типов: дизайн страницы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Селекторы классов: точное управление. . . . . . . . . . . . . . . . . . . . . . . . . . . 65
ID-селекторы: определение элементов веб-страниц. . . . . . . . . . . . . . . . . . 67
Стилизация групп тегов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Стилизация вложенных тегов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Псевдоклассы и псевдоэлементы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Другие селекторы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Обучающий урок: примеры использования селекторов. . . . . . . . . . . . . . . . 85
Глава 4. Механизм наследования стилей. . . . . . . . . . . . . . . . . . . . . . . 96
Что такое наследование?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Упрощение таблиц стилей через наследование . . . . . . . . . . . . . . . . . . . . . 98
Ограничения наследования. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Обучающий урок: наследование . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Глава 5. Управление сложной структурой стилей:
каскадность. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Каскадность стилей. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Особенности механизма каскадности: какие стили имеют преимущество . . . 111
Управление каскадностью. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Начинаем с чистого листа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Обучающий урок: механизм каскадности в действии . . . . . . . . . . . . . . . . 119
Часть 2. Применение CSS
Глава 6. Форматирование текста. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Стилизация текста. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Установка размера шрифта. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Форматирование символов и слов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Форматирование абзацев текста . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Стилизация списков. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Обучающий урок: форматирование текста в действии. . . . . . . . . . . . . . . 154
Глава 7. Поля, отступы, границы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Понятие блочной модели. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Управление размерами полей и отступов. . . . . . . . . . . . . . . . . . . . . . . . . 167
Добавление границ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Установка цвета фона. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Определение параметров высоты и ширины. . . . . . . . . . . . . . . . . . . . . . . 180
Управление обтеканием содержимого плавающих элементов. . . . . . . . . . 185
Обучающий урок: поля, фоновые параметры, границы. . . . . . . . . . . . . . . 191
Двигаемся дальше. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Глава 8. Добавление графики на веб-страницы. . . . . . . . . . . . . . . . 203
CSS и тег
![]()
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Фоновые изображения. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Управление повтором фоновых изображений. . . . . . . . . . . . . . . . . . . . . . 209
Позиционирование фоновых изображений. . . . . . . . . . . . . . . . . . . . . . . . 210
Сокращенный вариант свойства background. . . . . . . . . . . . . . . . . . . . . . . 216
Обучающий урок 1: совершенствуем изображения. . . . . . . . . . . . . . . . . . 218
Обучающий урок 2: создание фотогалереи . . . . . . . . . . . . . . . . . . . . . . . 224
Обучающий урок 3: использование фоновых изображений. . . . . . . . . . . . 231
Двигаемся дальше. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Глава 9. Приводим в порядок навигацию сайта. . . . . . . . . . . . . . . . 243
Выборка стилизуемых ссылок. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Стилизация ссылок . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Создание панелей навигации. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Современные методы стилизации ссылок. . . . . . . . . . . . . . . . . . . . . . . . . 263
Обучающий урок 1: стилизация ссылок . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Обучающий урок 2: создание панели навигации . . . . . . . . . . . . . . . . . . . 278
Глава 10. Форматирование таблиц и форм. . . . . . . . . . . . . . . . . . . . 290
Правильное использование таблиц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Создание стилей для таблиц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Создание стилей для форм . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Обучающий урок 1: создание стилей для таблиц. . . . . . . . . . . . . . . . . . . 304
Обучающий урок 2: создание стилей для форм . . . . . . . . . . . . . . . . . . . . 311
Часть 3. Макет страницы
Глава 11. Введение в разметку CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Типы разметок веб-страницы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Как работает CSS-разметка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Стратегии разметки. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
Глава 12. Разметка страницы на основе плавающих
элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Использование плавающих элементов в разметках .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. 332
Преодоление проблем перемещения . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Обработка ошибок в Internet Explorer 6 . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Обучающий урок 1: разметки с множеством столбцов . . . . . . . . . . . . . . . 360
Обучающий урок 2: разметка с отрицательными полями . . . . . . . . . . . . . 368
Глава 13. Позиционирование элементов
на веб-странице. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
Как работают свойства позиционирования. . . . . . . . . . . . . . . . . . . . . . . . 376
Мощные стратегии позиционирования. . . . . . . . . . . . . . . . . . . . . . . . . . . 390
Обучающий урок: позиционирование элементов страницы. . . . . . . . . . . . 403
Глава 14. CSS для распечатываемых веб-страниц. . . . . . . . . . . . . . 417
Как работают аппаратно-зависимые таблицы стилей. . . . . . . . . . . . . . . . 417
Как добавлять аппаратно-зависимые таблицы стилей . . . . . . . . . . . . . . . 420
Создание таблиц стилей для печати. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421
Обучающий урок: создание таблицы стилей для печати. . . . . . . . . . . . . . 429
Глава 15. Совершенствуем навыки в CSS . . . . . . . . . . . . . . . . . . . . . 437
Добавление комментариев. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437
Организация стилей и таблиц стилей. . . . . . . . . . . . . . . . . . . . . . . . . . . . 438
Устранение столкновений стилей в браузере. . . . . . . . . . . . . . . . . . . . . . 446
Использование селекторов потомков. . . . . . . . . . . . . . . . . . . . . . . . . . . . 450
Управление браузером Internet Explorer. . . . . . . . . . . . . . . . . . . . . . . . . . 455
Глава 16. CSS 3 — на гребне волны . . . . . . . . . . . . . . . . . . . . . . . . . . 460
Обзор CSS 3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461
Селекторы в CSS 3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
Прозрачность . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467
RGBA-цвет. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
Тень для текста. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472
Свобода для шрифтов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474
Генерируемое содержимое страницы. . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
Приложения
Приложение 1. Справочник свойств CSS . . . . . . . . . . . . . . . . . . . . . 482
Приложение 2. CSS в Dreamweaver CS4. . . . . . . . . . . . . . . . . . . . . . 510
Приложение 3. Ресурсы по CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541
Алфавитный указатель. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 549
