CSS: 100 и 1 совет

Description

Перевод А. Минаевой. «CSS: 100 и 1 совет» представляет интерес для веб-дизайнеров и разработчиков, у которых нет времени на штудирование огромного количества теоретических материалов при создании собственного сайта. Это сборник готовых решений наиболее распространенных проблем, которые можно сразу применить на прак тике; более того, они могут послужить основой для разработки собственных методов. Здесь представлены ответы на сложные вопросы и практические методы использования CSS, примеры создания сложных макетов страниц, эле мен тов навигации и форм, решение проблем, связанных с особенностями различных броузеров. Чтение книги не требует специальной подготовки: первая глава содержит обзор основных особенностей CSS, но в дальнейшем сложность приводимых методов постепенно возрастает, так что наличие у читателя базовых знаний CSS существенно облегчит восприятие материала. Третье издание полностью пересмотрено и обновлено с целью охвата новейших технологий и особенностей самых современных броузеров, включая Firefox 3 и Internet Explorer 8. Данную книгу можно использовать как справочник для поиска подходящего решения при создании сайта и тем самым выиграть время и сдать проект в срок. Предисловие Глава 1. CSS: основы основ Определение стиля с помощью CSS Что такое селекторы и как их правильно использовать Каким образом броузер определяет, какие стили нужно использовать Заключение Глава 2. Оформление текста и другие базовые возможности Задание определенного шрифта для текста Выбор единиц измерения размера шрифтов: пикселы, пункты, пики или что-то другое Удаление подчеркивания ссылок Создание ссылки, меняющей цвет при наведении на нее указателя мыши Использование на одной странице различных стилей ссылок Присваивание первому элементу в списке отличного от последующих элементов стиля Создание цветного фона для заголовка Подчеркивание заголовков Устранение отступа между элементом h1 и следующим за ним абзацем Выделение текста на странице Изменение высоты строки (межстрочного интервала) в тексте Выравнивание текста по ширине Изменение стиля горизонтальной линии Вывод текста с отступом Центрирование текста Вывод текста заглавными буквами с помощью CSS Изменение стиля маркеров списка или удаление маркеров Использование изображения вместо маркера списка Удаление у пунктов списка отступа слева Размещение пунктов списка по горизонтали Удаление отступов от края страницы Удаление отступов по умолчанию для всех элементов страницы Добавление комментария в файл с каскадной таблицей стилей Заключение Глава 3. CSS и графика Добавление рамки к изображению Удаление средствами CSS синей рамки вокруг изображения, выполняющего функцию ссылки Задание фонового изображения для страницы с помощью CSS Как изменить способ размножения фонового изображения Как позиционировать фоновое изображение Как сделать фоновое изображение неподвижным при прокрутке контента Для каких элементов можно задавать фоновое изображение Размещение текста поверх изображения Как задать для документа более одного фонового изображения Применение эффекта прозрачности Создание сложных рамок вокруг изображений, например двойных Заключение Глава 4. Навигация Оформление списка в виде навигационного меню Изменение вида ссылки при наведении на нее указателя мыши с помощью CSS без использования изображений или сценариев на JavaScript Создание навигационного меню с подпунктами с помощью списков и таблиц стилей Создание горизонтального меню с помощью списков и CSS Создание средствами CSS навигационной панели с кнопками Создание с помощью CSS панели навигации на основе вкладок Выделение ссылок, ведущих на внешний сайт Изменение вида курсора Реализация смены изображений на панели навигации без использования JavaScript Оформление карты сайта Создание выпадающего меню исключительно средствами CSS Создание доступного навигационного меню на основе изображений с помощью CSS Заключение Глава 5. Табличные данные Представление табличных данных с помощью CSS Организация табличных данных: удобство доступа и наглядность Создание рамки вокруг таблицы без использования HTML-атрибута border Удаление пустого пространства между ячейками, появляющегося после добавления рамок Представление табличных данных в привлекательной и удобной форме Чередование фонового цвета строк таблицы Изменение фонового цвета строки при наведении на нее указателя мыши Чередование фонового цвета столбцов таблицы Создание календаря с помощью CSS Заключение Глава 6. Формы и пользовательские интерфейсы Изменение вида элементов формы с помощью CSS Использование разных стилей для разных полей одной и той же формы Избавление от переносов строки и потери места на странице Придание кнопке подтверждения вида текста Возможность заполнения формы для пользователей текстовых устройств Создание двухколоночной формы с помощью CSS вместо таблиц Группировка связанных полей формы Задание стиля для клавиш быстрого доступа Использование цветного фона для меню, созданного с помощью элементов select Создание таблицы стилей для формы с возможностью ввода данных, как в электронную таблицу Выделение поля формы, по которому пользователь щелкает мышью Глава 7. Кросс-броузерные решения В каких броузерах следует протестировать свой сайт? Тестирование сайта в различных броузерах при наличии только одной ОС Сервисы, показывающие вид сайта в различных броузерах Возможность поддержки нескольких версий Internet Explorer в Windows Определение круга броузеров, для которых необходимо поддерживать все аспекты дизайна страницы Указание базовой таблицы стилей для самых старых броузеров Что такое режим совместимости и как его избежать Задание разных таблиц стилей для Internet Explorer 6 и 7 Уход от наиболее распространенных ошибок в Internet Explorer 6 и 7 Достижение прозрачности изображения в формате PNG в Internet Explorer 6 Корректное отображение в IE 8 сайта, соответствующего стандартам W3C Что делать, если CSS не работает Интерпретация сообщений, выводимых инструментом W3C Validator Заключение Глава 8. Доступность и альтернативные устройства Аспекты доступности, о которых следует помнить при использовании CSS Тестирование сайта в текстовом броузере Тестирование сайта с помощью экранного диктора Создание отдельных таблиц стилей для различных устройств Создание таблицы стилей для печатной версии документа Добавление на сайт альтернативных таблиц стилей Нужно ли отображать на сайте инструменты для изменения размера шрифта или переключения между различными таблицами стилей? Создание альтернативных таблиц стилей без копирования кода из основной таблицы Заключение Глава 9. Позиционирование элементов с помощью CSS В каких случаях следует использовать классы, а в каких – идентификатор Отображение строкового элемента как блочного, и наоборот Задание внешних и внутренних отступов с помощью CSS Обтекание текстом изображения Как избежать смещения следующего элемента вверх при использовании свойства float Как расположить логотип сайта слева, а слоган – справа Позиционирование элемента на странице с помощью CSS Центрирование блока на странице Создание блока с закругленными краями Создание «резинового» макета: слева – меню, а справа – область с контентом Изменение расположения элементов макета на противоположное, чтобы меню было справа Макет фиксированной ширины с двумя колонками по центру страницы Создание колонки, занимающей все доступное пространство по высоте Добавление тени к блоку Создание макета с тремя колонками средствами CSS Добавление к «резиновому» макету нижнего блока Создание галереи миниатюр Создание макета страницы с помощью CSS-таблиц Заключение Алфавитный указатель