Веб-дизайн активно развивается. Если раньше разработчикам приходилось долго разбираться с HTML и графикой, то сегодня CSS (Каскадные таблицы стилей) позволяют без лишних усилий разрабатывать красивые, удобные и функциональные сайты. Однако это не просто инструмент для украшения сайтов; CSS предоставляет полноценную возможность управлять внешним видом ваших веб-страниц - от шрифтов и цветов до макета страницы. Данная книга доступно объясняет основы этого мощного инструмента дизайна и помогает научиться созданию новых и апгрейду уже существующих сайтов. Краткое содержание Об авторе 18 О творческой команде 19 Благодарности 20 Введение 21 От издательства 34 Часть 1. Основы CSS Глава 1. Пересмотр языка HTML для совместного использования с CSS 36 Глава 2. Создание стилей и таблиц стилей 49 Глава 3. Селекторы: определение элементов стилизации 67 Глава 4. Механизм наследования 96 Глава 5. Управление сложной структурой стилей: каскадность 105 Часть 2. Применение CSS Глава б. Форматирование текста 122 Глава 7. Поля, отступы, границы 158 Глава 8. Добавление графики на веб-страницы 199 Глава 9. Приводим в порядок навигацию сайта 239 Глава 10. Форматирование таблиц и форм 285 Часть 3. Макет страницы Глава 11. Разметка страницы на основе плавающих элементов 312 Глава 12. Позиционирование элементов на веб-странице 364 Часть 4. CSS для опытных разработчиков Глава 13. CSS для распечатываемых веб-страниц 406 Глава 14. Совершенствуем навыки в CSS 425 Приложения Приложение 1. Справочник свойств CSS 446 Приложение 2. CSS в Dreamweaver 8 473 Приложение 3. Ресурсы по CSS 497 Алфавитный указатель 504 Оглавление Об авторе 18 О творческой команде 19 Благодарности 20 Введение 21 Как работает CSS 21 Преимущества CSS 22 Что необходимо знать 22 HTML: структура языка 23 Как работают HTML-теги 23 XHTML: современный HTML 25 Зачем нужен тип документа (doctype) 26 Программное обеспечение для CSS 27 Бесплатные программы 27 Коммерческое программное обеспечение 27 Об этой книге 28 Основные разделы книги 29 Примеры программного кода на CSS 30 О сайте MissingManuals.com 30 Основная терминология 31 О стрелках 31 Соглашения, принятые в данной книге 32 Технология Safari® 33 От издательства 34 Часть 1. Основы CSS Глава 1. Пересмотр языка HTML для совместного использования с CSS 36 HTML: прошлое и настоящее 36 Прошлое HTML: все выглядело прилично 38 Настоящее HTML: подмостки CSS 38 Написание HTML-кода для CSS 39 Способ мышления 39 Два новых HTML-тега 41 Что нужно забыть о HTML 42 Подсказки для вашего обучения 43 Важность doctype 46 Глава 2. Создание стилей и таблиц стилей 49 Что такое стиль 50 Понимание таблиц стилей 52 Внутренние таблицы стилей 53 Внешние таблицы стилей 54 Связывание таблиц стилей с HTML-кодом 55 Прикрепление таблиц стилей с использованием CSS 56 Обучающий урок: создание первых стилей 57 Создание встроенного стиля 58 Создание внутренней таблицы стилей 60 Создание внешней таблицы стилей , 63 Глава 3. Селекторы: определение элементов стилизации 67 Селекторы типов: дизайн страницы 67 Селекторы классов: точное управление 69 ID-селекторы: определение элементов веб-страниц 72 Стилизация вложенных тегов 74 Дерево HTML 74 Создание селекторов потомков 76 Стилизация групп тегов 78 Создание групповых селекторов 78 Универсальный селектор 78 Псевдоклассы и псевдоэлементы 79 Стилизация ссылок 79 Дополнительные псевдоклассы и псевдоэлементы 80 Другие селекторы 83 Селекторы дочерних элементов 83 Селекторы сестринских элементов 85 Селекторы атрибутов 85 Обучающий урок: примеры использования селекторов 86 Создание групповых селекторов 88 Создание селекторов классов 90 Создание ID-селекторов 92 Создание селекторов потомков 94 Глава 4. Механизм наследования 96 Что такое наследование? 96 Упрощение таблиц стилей через наследование 97 Ограничения наследования 98 Обучающий урок: наследование 100 Одноуровневое наследование 100 Наследование для стилизации веб-страницы 102 Исключения механизма наследования 103 Глава 5. Управление сложной структурой стилей: каскадность Ю5 Каскадность стилей 105 Объединение унаследованных стилей 106 Превосходство близкого родительского элемента-предка 107 Преимущества непосредственно примененного стиля 108 Множество стилей для одного тега 108 Особенности механизма каскадности: какие стили имеют преимущество HO Управление каскадностью 113 Изменение значимости 113 Выборочная отмена значимости 114 Обучающий урок: механизм каскадности в действии 116 Создание комбинированных стилей 116 Сочетание каскадности и наследования 117 Разрешение конфликтов 119 Часть 2. Применение CSS Глава 6. Форматирование текста 122 Стилизация текста 122 Выбор шрифта 124 Придание тексту цветового оформления 126 Установка размера шрифта 127 Пикселы 128 Ключевые слова, проценты и единица измерения ет, 129 Форматирование символов и слов 132 Курсив и полужирный шрифт 132 Прописные буквы 133 Украшение текста 134 Межсимвольный и межсловный интервал 135 Форматирование абзацев текста 137 Установка межстрочного интервала 137 Выравнивание текста 139 Отступ первой строки абзаца и удаление полей абзацев 140 Форматирование первой буквы, первой строки абзаца 141 Стилизация списков 142 Типы списков 142 Позиционирование маркеров и нумерации списков 145 Графические маркеры 146 Обучающий урок: форматирование текста в действии 148 Настройка параметров страницы 148 Форматирование заголовков и абзацев 150 Форматирование списков 153 Последние штрихи 154 Глава 7. Поля, отступы, границы 158 Понятие блочной модели 158 Управление размерами полей и отступов 160 Сокращенный набор свойств margin и padding 162 Конфликты полей 163 Удаление пустых полей с помощью отрицательных значений 164 Отображение встроенных и блочных элементов 166 Добавление границ 168 Сокращенный набор свойства border 169 Форматирование отдельных границ 170 Установка цвета фона 172 Определение параметров высоты и ширины 172 Вычисление фактических размеров блочных элементов 173 Управление поведением блочных элементов с помощью свойства overflow 175 Исправление ошибок блочной модели Internet Explorer 5 177 Управление обтеканием содержимого плавающих элементов 180 Фон, границы и плавающие элементы 183 Отмена правил обтекания 184 Обучающий урок: поля, фоновые параметры, границы 186 Управление полями страницы 186 Настройка интервалов между тегами 188 Выделение текста с помощью фоновых параметров и границ . . . 190 Создание бокового меню 191 Устранение ошибок браузера 195 Двигаемся дальше 198 лава 8. Добавление графики на веб-страницы 199 CSS и тег <img > 199 Фоновые изображения 200 Управление повтором фоновых изображений 204 Позиционирование фоновых изображений 205 Ключевые слова 206 Точные значения 208 Процентные значения 209 Фиксация изображения на месте 210 Сокращенный вариант свойства background 212 Обучающий урок 1: создание фотогалереи 213 Заключение изображения в рамку 213 Добавление подписей к изображениям 215 Создание фотогалереи 218 Добавление теней 223 Обучающий урок 2: использование фоновых изображений 226 Добавление в веб-страницу фонового изображения 226 Замена границ изображениями 230 Использование графики для маркированных списков 232 Закругление углов бокового меню 233 Создание внешней таблицы стилей 237 Глава 9. Приводим в порядок навигацию сайта 239 Выборка стилизуемых ссылок 239 Понимание состояний ссылок 239 Выборка отдельных ссылок 241 Стилизация ссылок 242 Подчеркивание ссылок 243 Создание кнопок 245 Использование изображений 246 Создание панелей навигации 249 Использование маркированных списков 249 Вертикальные панели навигации 250 Горизонтальные панели навигации 253 Современные методы стилизации ссылок 259 Большие активизируемые кнопки 259 CSS-стиль для предварительной загрузки ролловеров. 261 Вкладки 263 Обучающий урок: стилизация ссылок 265 Простейшее форматирование ссылок 265 Добавление для ссылки фонового изображения 268 Выделение внешних ссылок 270 Обозначение посещенных страниц 272 Создание вертикальной панели навигации 272 Добавление ролловеров и выделение текущего раздела сайта стилем выбранных ссылок 277 Исправление ошибок Internet Explorer 279 Переход от вертикальной панели навигации к горизонтальной... 281 Глава 10. Форматирование таблиц и форм 285 Правильное использование таблиц 285 Создание стилей для таблиц 287 Добавление отступов 288 Настройка горизонтального и вертикального выравнивания 288 Создание границ 290 Применение стилей к строкам и столбцам 292 Создание стилей для форм 293 Элементы HTML-форм 294 Компоновка форм с помощью CSS 297 Обучающий урок 1: создание стилей для таблиц 299 Обучающий урок 2: создание стилей для форм 303 Часть 3. Макет страницы пава 11. Разметка страницы на основе плавающих элементов 312 Как работает CSS-разметка 312 Типы разметок веб-страницы 314 Основы плавающих разметок 316 Использование плавающих элементов в разметках 320 Перемещение всех столбцов 320 Плавающие элементы внутри плавающих элементов 323 Использование отрицательных полей для размещения элементов 324 Преодоление проблем перемещения 330 Отмена и установка перемещения для элементов 330 Создание столбцов на всю высоту 334 Предотвращение перепадов плавающих элементов 338 Обработка ошибок в Internet Explorer 340 Ошибка двойного поля 341 Трехпиксельные промежутки 343 Другие проблемы Internet Explorer 345 Обучающий урок 1: разметки с множеством столбцов 346 Структурирование HTML 346 Создание стилей разметки 347 Добавление еще одного столбца 348 Добавление "ложного столбца" 350 Установка ширины 353 Обучающий урок 2: разметка с отрицательными полями 354 Центрирование разметки 355 Перемещение столбцов 358 Заключительная настройка. 362 Глава 12. Позиционирование элементов на веб-странице 364 Как работают свойства позиционирования 364 Установка значений расположения 367 Когда абсолютное позиционирование является относительным. . 371 Когда и где использовать относительное позиционирование.... 373 Наложение элементов 376 Скрытие частей страницы 377 Мощные стратегии позиционирования 379 Позиционирование внутри элемента 379 Исключение элемента за пределы блока 381 Использование CSS-позиционирования для разметки страницы. . 382 Создание CSS-стиля для шапки страницы с использованием фиксированного позиционирования 387 Обучающий урок: позиционирование элементов страницы 391 Улучшение баннера страницы 392 Добавление надписи к фотографии 396 Разбиение страницы 399 Часть 4. CSS для опытных разработчиков Глава 13. CSS для распечатываемых веб-страниц 406 Как работают аппаратно-зависимые таблицы стилей 406 Как добавлять аппаратно-зависимые таблицы стилей 408 Определение типа устройства для внешней таблицы стилей 409 Определение типа устройства внутри таблицы стилей 409 Создание таблиц стилей для печати 410 Использование правила !important для отмены экранного стиля 410 Изменяем текстовые стили 412 Стилизация фонов для печати 413 Скрытие нежелательных областей страницы 415 Добавление разрывов страницы для печати 416 Обучающий урок: создание таблицы стилей для печати 418 Удаление ненужных элементов страницы 418 Удаление фона и установка разметки 420 Переформатирование текста 422 Отображение логотипа 423 Отображение URL 423 Глава 14. Совершенствуем навыки в CSS 425 Добавление комментариев 425 Организация стилей и таблиц стилей 426 Давайте стилям понятные имена 426 Используйте несколько классов, чтобы сэкономить время 427 Группируйте стили 430 Используйте несколько таблиц стилей 430 Устранение столкновений стилей в браузере 433 Использование селекторов потомков 436 Разделяйте свои страницы 436 Идентифицируйте содержимое тега <body> 438 Управление браузером Internet Explorer 441 Дизайн для современных браузеров 441 Изолируйте CSS для Internet Explorer условными комментариями 442 Приложения Приложение 1. Справочник свойств CSS 446 Значения CSS 446 Цвета 446 Длины и размеры 447 Ключевые слова 448 URL-адреса 449 Свойства текста 450 color 450 font 450 font-family 451 font-size 451 font-style 451 font-variant 451 font-weight 452 letter-spacing 452 line-height 452 text-align 452 text-decoration (не наследуется) 452 text-indent 453 text-transform 453 vertical-align (не наследуется) 453 white-space (не наследуется) 454 word-spacing 454 Наследуемые свойства списков 454 list-style 454 list-style-image 455 list-style-position 455 list-style-type 455 Отступы, границы и поля 455 border 455 border-top, border-right, border-bottom, border-left 456 border-color 456 border-top-color, border-right-color, border-bottom-color, border-left-color 456 border-style 456 border-top-style, border-right-style, border-bottom-style, border-left-style 456 border-width 456 border-top-width, border-right-width, border-bottom-width, border-left-width 457 outline 457 outline-color 457 outline-style 457 outline-width 457 padding 458 padding-top 458 padding-right 458 padding-bottom 458 padding-left 458 margin 458 margin-top 459 margin-right 459 margin-bottom 459 margin-left 459 Фон 459 background 460 background-attachment 460 background-color 460 background-image 460 background-position 461 background-repeat 461 Свойства разметки страницы 462 bottom 462 clear 462 clip 462 display 463 float 463 height 464 left 464 max-height 465 max-width 465 min-height 465 min-width 465 overflow 466 position 466 right 467 top 467 visibility 467 width 468 z-index 468 Свойства таблицы 469 border-collapse 469 border-spacing 469 caption-side 469 empty-cells 470 table-layout 470 Различные свойства 470 content 470 cursor 471 orphans 471 page-break-after 471 page-break-before 472 page-break-inside 472 widows 472 Приложение 2. CSS в Dreamweaver 8 473 Создание стилей 473 Этап I, Установка типа CSS 474 Этап 2. Определение стиля 476 Добавление стилей к веб-страницам 477 Соединение с внешней таблицей стилей 477 Применение класса стиля 479 Отмена класса стиля 481 Редактирование стилей 481 Управление стилями 487 Удаление стиля 488 Переименование класса стиля 488 Дублирование стиля 489 Просмотр CSS-кода на панели CSS Styles (Стили CSS) 490 Режим текущего выбранного элемента .491 Расшифровка каскада 493 Свойства CSS 494 Приложение 3. Ресурсы ПО CSS 497 Справочники 497 Помощь по CSS 498 CSS-навигация 498 CSS и графика 499 Разметка CSS 499 Ошибки браузера 501 Выставочные сайты 501 Книги по CSS 502 Необходимые RSS-каналы 502 Программное обеспечение для CSS .... 503 Алфавитный указатель 504