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