CSS. Рецепты программирования

Содержание книги «CSS. Рецепты программирования»:

• 15 Введение
  • 16 Для кого предназначена эта книга
  • 16 Допущения, принятые в книге
  • 18 Содержание книги
  • 20 Соглашения, использованные в книге
  • 20 Использование кода примеров
  • 21 Как связаться с издательством O'Reilly
  • 22 Safari ® Books Online
  • 22 Благодарности
• 25 Глава 1. Использование базовых элементов HTML
  • 26 1.1. Выбор текстового редактора
  • 28 1.2. Кодирование простейшей HTML-страницы
  • 30 1.3. О DOCTYPE и его влиянии на макет страниц в Web-обозревателе
  • 34 1.4. Разметка заголовков
  • 36 1.5. Подобающее цитирование
  • 37 1.6. Вставка изображения
  • 39 1.7. Вставка звуковых файлов средствами HTML5
  • 40 1.8. Встраивание видеосредствами HTML5
  • 42 1.9. Эффективное применение strong и ет
  • 43 1.10. Создание списков
  • 45 1.11. Формирование ссылки на Web-страницу
  • 47 1.12. Разметка таблиц
  • 49 1.13. Создание vCard (hCard) средствами HTML
  • 51 1.14. Разметка события (hCalendar)
  • 51 1.15. Проверка правильности HTML-разметки
• 54 Глава 2. Основы CSS
  • 55 2.1. Применение правил CSS к Web-странице
  • 58 2.2. Применение базовых селекторов для стилевого оформления
  • 67 2.3. Применение селекторов прямого потомка
  • 68 2.4. Применение селекторов соседнего элемента
  • 70 2.5. Применение селекторов атрибута
  • 72 2.6. Применение псевдоклассов
  • 73 2.7. Применение псевдоэлементов
  • 75 2.8. Когда использовать селекторы класса и селекторы ID
  • 80 2.9. О свойствах CSS
  • 81 2.10. Представление о блочной модели
  • 87 2.11. Связь стилей с Web-страницей
  • 90 2.12. Об источниках CSS
  • 91 2.13. Порядок сортировки правил в CSS
  • 93 2.14. Применение !important для переопределения отдельных правил CSS
  • 94 2.15. Определение специфичности
  • 96 2.16. Как применять разные типы таблиц стилей
  • 101 2.17. Вставка комментариев в таблицы CSS
  • 102 2.18. Организация информации в таблице стилей
  • 104 2.19. Работа со свойствами с сокращенной формой записи
  • 106 2.20. Задание альтернативной таблицы стилей
  • 107 2.21. Применение плавающей модели
  • 109 2.22. Применение автовыравнивания плавающих элементов
  • 112 2.23. Применение абсолютного позиционирования
  • 114 2.24. Применение относительного позиционирования
  • 116 2.25. Применение сцепленного позиционирования
  • 118 2.26. Создание стека элементов с помощью z-index
  • 118 2.27. Проверка правил CSS
• 121 Глава 3. Web-типографика
  • 122 3.1. Задание шрифтов
  • 125 3.2. Применение Web-безопасных шрифтов
  • 128 3.3. Задание стилизованного амперсанда
  • 130 3.4. Внедрение файлов шрифтов
  • 134 3.5. Принудительная разбивка действительно длинных слов
  • 135 3.6. Задание размеров шрифта
  • 137 3.7. Достижение большего соответствия размеров шрифтов в разных Web-обозревателях
  • 141 3.8. Установка дефисов, длинных и коротких тире
  • 142 3.9. Центрирование текста
  • 142 3.10. Задание выравнивания текста по ширине
  • 144 3.11. Обозначение избыточного текста многоточием
  • 145 3.12. Удаление свободного пространства между заголовками и абзацами
  • 146 3.13. Задание простой буквицы
  • 147 3.14. Формирование центрированной приподнятой буквицы большего размера
  • 149 3.15. Декоративное оформление приподнятой буквицы с помощью изображения
  • 151 3.16. Создание заголовка со стилизованным текстом
  • 153 3.17. Создание заголовка со стилизованным текстом и рамкой
  • 155 3.18. Стилевое оформление заголовка с помощью текста и изображения
  • 157 3.19. Создание врезки в HTML-тексте
  • 159 3.20. Расположение врезки сбоку от колонки
  • 160 3.21. Создание врезки с рамкой
  • 162 3.22. Создание врезки с изображениями
  • 165 3.23. Задание отступа в первой строке абзаца
  • 166 3.24. Задание отступа для всего абзаца
  • 169 3.25. Создание обратного отступа
  • 171 3.26. Стилевое оформление первой строки абзаца
  • 173 3.27. Стилевое оформление первой строки абзаца с помощью изображения
  • 174 3.28. Создание эффекта выделенного текста
  • 175 3.29. Изменение цвета при выделении текста
  • 176 3.30. Изменение межстрочных интервалов
  • 178 3.31. Добавление графической обработки HTML-текста
  • 180 3.32. Вставка тени за текстом
  • 183 3.33. Корректировка межбуквенных и межсловных пробелов
  • 186 3.34. Достижение ритмичности базовых линий в Web-типографике
  • 188 3.35. Стилевое оформление верхних и нижних индексов без нарушения базовой линии
  • 189 3.36. Отображение нескольких колонок текста
• 192 Глава 4. Изображения
  • 192 4.1. Преобразование средствами CSS цветных изображений в черно-белые в IE
  • 193 4.2. Вывод рамки вокруг изображения
  • 195 4.3. Установка вокруг изображения рамки со скругленными углами
  • 197 4.4. Удаление рамок, устанавливаемых по умолчанию вокруг изображений в некоторых Web-обозревателях
  • 199 4.5. Установка фонового изображения
  • 200 4.6. Создание полосы фоновых изображений
  • 201 4.7. Размещение фонового изображения
  • 204 4.8. Применение нескольких фоновых изображений в одном HTML-элементе
  • 206 4.9. Расположение изображений на рамке блока
  • 209 4.10. Создание закрепленного фонового изображения
  • 212 4.11. Изменение размеров изображений при изменении размеров окна Web-обозревателя
  • 214 4.12. Растяжение изображения на все окно Web-обозревателя
  • 215 4.13. Создание масштабируемых изображений
  • 217 4.14. Задание способа визуализации изображений в Web-обозревателе
  • 218 4.15. Поворот изображений средствами CSS
  • 220 4.16. Задание градиентов средствами CSS
  • 222 4.17. Создание прозрачных PNG-изображений для IE6 и более поздних версий
  • 224 4.18. Применение PNG-файлов с прозрачностью с помощью JavaScript
  • 227 4.19. Наложение HTML-текста на изображение
  • 229 4.20. Замещение HTML-текста изображением
  • 232 4.21. Создание панорамного представления изображения
  • 233 4.22. Комбинирование разных графических форматов
  • 239 4.23. Скругленные углы колонок с фиксированной шириной
  • 241 4.24. Скругленные углы (метод раздвижных дверей)
  • 245 4.25. Скругленные углы (метод горной вершины)
  • 248 4.26. Скругление углов с помощью JavaScript
  • 252 4.27. Вставка тени от элемента средствами CSS
  • 253 4.28. Вставка тени за изображением
  • 256 4.29. Вставка сглаженной тени за изображением
  • 260 4.30. Создание выносок с текстом
  • 263 4.31. Как помешать людям похищать ваши изображения
  • 265 4.32. Автоматическая вставка отражений в изображения
  • 267 4.33. Применение изображений-спрайтов
  • 269 4.34. Обрезка фоновых изображений
  • 271 4.35. Применение масок к изображениям и рамкам
• 274 Глава 5. Элементы страницы
  • 274 5.1. Удаление полей страницы
  • 277 5.2. Сброс стилей, назначаемых Web-обозревателем по умолчанию
  • 281 5.3. Раскрашивание полосы прокрутки в IE
  • 284 5.4. Методы центрирования элементов на Web-странице
  • 289 5.5. Создание рамки страницы
  • 291 5.6. Вывод рамки вокруг окна просмотра Web-обозревателя
  • 293 5.7. Настройка горизонтального разделителя
  • 295 5.8. Добавление просмотра изображения в режиме Lightbox
  • 300 5.9. Изменение непрозрачности элементов
  • 302 5.10. Регулировка непрозрачности цвета фона
• 306 Глава 6. Списки
  • 307 6.1. Изменение формата списка
  • 309 6.2. Изменение цвета маркера списка
  • 310 6.3. Задание в списке отступов, одинаково отображаемых в разных Web-обозревателях
  • 311 6.4. Установка разделителей между элементами списка
  • 313 6.5. Создание пользовательских текстовых маркеров в списках
  • 315 6.6. Создание пользовательских маркеров-изображений в списках
  • 318 6.7. Вставка больших пользовательских маркеров-изображений в списки
  • 320 6.8. Улучшение представления списка с помощью графики
  • 324 6.9. Создание внутристрочных списков
  • 326 6.10. Создание обратных отступов в списке
  • 327 6.11. Смещение маркера внутрь списка
  • 329 6.12. Стилевое оформление списка определений
  • 335 6.13. Традиционное отображение киносценария с помощью элемента языка HTML5 dialog
  • 336 6.14. Превращение списка в дерево каталогов
  • 340 6.15. Создание системы «звездного» рейтинга
• 345 Глава 7. Ссылки и навигация
  • 345 7.1. Легкое создание текстовых меню и подменю
  • 347 7.2. Удаление подчеркивания ссылок и другие приемы стилевого оформления
  • 350 7.3. Изменение цвета ссылок
  • 351 7.4. Удаление пунктирных линий при щелчке мышью по ссылкам в Internet Explorer
  • 352 7.5. Изменение цвета ссылок в разных секциях страницы
  • 353 7.6. Вывод пиктограмм в конце ссылок разных типов
  • 354 7.7. Меняющиеся курсоры
  • 356 7.8. Изменение внешнего вида ссылки при наведении указателя мыши без применения JavaScript
  • 358 7.9. Анимация ссылок с помощью свойств CSS3 transition при наведении указателя мыши
  • 362 7.10. Создание навигационных текстовых меню и визуальных эффектов при наведении указателя мыши на его пункты
  • 366 7.11. Вставка подменю в вертикальные меню
  • 369 7.12. Создание горизонтальных навигационных меню
  • 375 7.13. Построение горизонтальных навигационных меню с раскрывающимися меню
  • 377 7.14. Создание навигационного меню с клавишами доступа
  • 379 7.15. Создание переходов с помощью ссылок-цепочек
  • 382 7.16. Создание с помощью изображений визуальных эффектов наведения указателя мыши на ссылку
  • 387 7.17. Создание сворачиваемых меню
  • 389 7.18. Создание контекстных меню
  • 392 7.19. Создание всплывающих подсказок с помощью атрибута title
  • 393 7.20. Разработка динамического меню из закладок
  • 395 7.21. Изменяющиеся стили ссылок-якорей
• 400 Глава 8. Формы
  • 400 8.1. Изменение пробельной зоны вокруг формы
  • 401 8.2. Удаление пробельной зоны вокруг формы
  • 402 8.3. Задание стилей для элементов ввода
  • 405 8.4. Изменение стилей элементов формы при щелчке по ним кнопкой мыши
  • 406 8.5. Применение разных стилей к разным элементам ввода в одной форме
  • 407 8.6. Назначение стилей элементам textarea
  • 409 8.7. Задание стилей элементов select и option
  • 411 8.8. Создание поля поиска в стиле Macintosh
  • 413 8.9. Стили кнопок формы
  • 417 8.10. Создание изображения кнопки Submit
  • 418 8.11. Установка кнопки Submit-Once-Only
  • 419 8.12. Создание кнопки Submit в виде HTML-текста
  • 421 8.13. Как заставить текстовую HTML-ссылку действовать как кнопка Submit
  • 422 8.14. Разработка Web-формы без таблиц
  • 424 8.15. Разработка формы из двух колонок без применения таблиц
  • 427 8.16. Включение в форму информации для пользователей
  • 429 8.17. Стилевое оформление клавиш доступа в Web-формах
  • 431 8.18. Группировка общих элементов формы
  • 432 8.19. Ввод данных в форму в виде электронной таблицы
  • 436 8.20. Пример дизайна: простая регистрационная форма
  • 442 8.21. Пример дизайна: бланк регистрации
• 454 Глава 9. Таблицы
  • 454 9.1. Задание границ и отступов в ячейках и таблицах
  • 457 9.2. Задание объема свободного пространства вокруг ячейки
  • 458 9.3. Задание стиля заголовка
  • 459 9.4. Задание стилей в ячейках таблицы
  • 461 9.5. Задание стилей для элементов шапки таблицы
  • 463 9.6. Удаление зазоров у изображений, помещенных в ячейки таблицы
  • 465 9.7. Устранение зазоров между ячейками таблицы
  • 466 9.8. Создание чередующихся цветов фона в строках таблицы
  • 469 9.9. Создание эффекта выделения цветом строки таблицы
  • 470 9.10. Пример проекта: элегантный календарь
• 480 Глава 10. Проектирование Web-страниц, предназначенных для печати
  • 480 10.1. Применение к Web-странице таблицы стилей для печати
  • 482 10.2. Замена цветного логотипа черно-белым при печати Web-страниц
  • 484 10.3. Создание готовой к печати Web-формы
  • 489 10.4. Отображение URI после ссылок
  • 490 10.5. Вставка специальных символов перед ссылками
  • 492 10.6. Вставка в документ для печати разрывов страниц
  • 493 10.7. Пример дизайна: версия страницы для печати, созданная средствами CSS
• 503 Глава 11. Макеты страниц
  • 503 11.1. Построение одноколоночного макета
  • 505 11.2. Создание двухколоночного макета
  • 509 11.3. Построение двухколоночного макета с колонками фиксированной ширины
  • 512 11.4. Создание «резинового» многоколоночного макета с помощью плавающей модели
  • 515 11.5. Создание с помощью плавающей модели макета с тремя колонками фиксированной ширины
  • 518 11.6. Создание с помощью позиционирования «резинового» многоколоночного макета
  • 521 11.7. Создание с помощью позиционирования многоколоночного макета с колонками фиксированной ширины
  • 522 11.8. Использование плавающей модели для отображения колонок в произвольном порядке
  • 541 11.9. Проектирование асимметричного макета
  • 544 11.10. Проектирование макетов, не зависящих от разрешения
• 548 Глава 12. Программистские трюки, искусственные приемы и выявление неисправностей
  • 549 12.1. Переопределение встроенных стилей
  • 549 12.2. Диагностика ошибок CSS и проблем Web-обозревателей
  • 551 12.3. Применение букмарклетов для поиска ошибок
  • 552 12.4. Применение расширений Web-обозревателя для поиска ошибок
  • 553 12.5. Исправление Internet Explorer 6
  • 555 12.6. Исправление Internet Explorer 6 с помощью JavaScript
  • 556 12.7. Использование условных комментариев для передачи стилей в разные версии Internet Explorer
  • 558 12.8. Применение фильтров CSS для передачи правил в практически любой Web-обозреватель
  • 559 12.9. Установка интеллектуальной системы передачи CSS для современных Web-обозревателей
  • 561 12.10. Тестирование дизайна сайта на нескольких платформах с помощью единственного компьютера
  • 562 12.11. Проверка Web-сайта с помощью текстового Web-обозревателя
• 564 Глава 13. Проектирование с помощью CSS
  • 564 13.1. Существенное увеличение размера шрифта
  • 566 13.2. Создание неожиданного сочетания
  • 569 13.3. Комбинирование разнородных элементов для создания контраста
  • 570 13.4. Привлечение взгляда с помощью контраста
  • 572 13.5. Проверка достаточности цветового контраста
  • 574 13.6. Выделение цитаты с помощью эффектных кавычек
  • 576 13.7. Задание перемещающейся фоновой сцены при изменении пользователем размеров окна
  • 578 13.8. Вставка анимации в элементы на странице
  • 583 13.9. Создание отображения фейерверков при прокрутке страницы пользователем
  • 584 13.10. Настройка таблицы стилей для просмотра исходного кода в Firefox
  • 585 13.11. Проектирование с помощью сетки (наборы CSS)
• 618 Глава 14. Взаимодействие с JavaScript
  • 618 14.1. Проверка, включен ли JavaScript в Web-обозревателе
  • 619 14.2. Применение разных таблиц стилей в зависимости от времени суток
  • 621 14.3. Перенаправление на сайт для мобильных устройств в зависимости от ширины экрана Web-обозревателя
  • 622 14.4. Вставка в Web-страницу библиотеки JavaScript
  • 623 14.5. Применение селекторов CSS3 в IE6 и IE7
  • 625 14.6. Создание с помощью JavaScript HTML-таблицы с окраской зебры
  • 627 14.7. Выделение цветом строки таблицы при наведении указателя мыши
  • 629 14.8. Визуальное оформление простого наведения указателя мыши
  • 630 14.9. Формирование строки одной высоты из элементов с разным объемом контента
  • 633 14.10. Задание ссылки, открывающей новое окно
  • 634 14.11. Превращение элемента div целиком в элемент, активируемый щелчком мыши
  • 636 14.12. Поддержка средствами JavaScript формата PNG в IE6
  • 638 14.13. Предоставление кода на HTML5 и свойств CSS3 Web-обозревателям, способным их обрабатывать
• 641 Приложение 1. Источники
  • 641 Основные обучающие материалы, относящиеся к языку HTML и технологии CSS
  • 642 Дизайнерские ресурсы
  • 643 Дискуссионные группы
  • 644 Справочные материалы
  • 645 Программные средства
• 647 Приложение 2. Свойства CSS 2.1 и специализированные дополнения
• 661 Приложение 3. Селекторы, псевдоклассы и псевдоэлементы CSS 2.1
• 664 Приложение 4. Селекторы и псевдоклассы CSS3
• 667 Приложение 5. Стилевое оформление элементов форм
• 668 Предметный указатель