2011г.
Количество страниц: 560

Современные технологии веб-дизайна активно развиваются. Если раньше процесс графического оформления сайта представлял собой скрупулезную работу в HTML, то сегодня CSS позволяет без лишних усилий создавать действительно уникальные, удобные и функциональные сайты. CSS (каскадные таблицы стилей) — это технология описания внешнего вида документа с помощью языка разметки, позволяющая легко и быстро задавать параметры графического отображения веб-страницы. Это не просто полезный инструмент для «украшения»: используя CSS, можно в полном объеме управлять внешним видом сайтов (от шрифта и цвета до макета страницы). Данная книга Большая книга CSS. Изд.2 .Макфарланд доступно и подробно объясняет основы этого мощного инструмента веб-дизайна и помогает научиться как созданию новых, так и апгрейду уже существующих сайтов. Во втором издании книги материал в значительной степени переработан с учетом самых современных интернет-технологий, а также актуальных и анонсируемых обновлений CSS.

Оглавление книги

Большая книга CSS. Изд.2 .Макфарланд

Об авторе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 Технология Safari® От издательства. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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