Советы по CSS

 Сборник готовых советов.

 

 

 

 

 


Рейчел Эндрю "CSS 100 и 1 совет" Символ-Плюс, 2010 год, 333 стр., (6,00 мб pdf)

Руководство для ленивых, построено по принципу готовых решений - "смотри и делай ". В книге собраны шаблоны CSS кода для часто встречающихся проблем, который можно сразу использовать на практике.

Основываясь на этих примерах, можно разрабатывать собственные таблицы CSS. Книга даст ответы на сложные вопросы и поможет в практических методах использования различных стилей: создание сложных шаблонов страниц, элементов навигации и форм, решение вопросов со взаимодействием стилей с различными браузерами.

Представленное руководство вполне подойдет и для начинающего WEB-разработчика. Вначале дается обзор основных функций и особенностей каскадных таблиц, а по мере изучения и продвижения по содержанию книги сложность примеров постепенно растет.

Если у вас уже есть базовые знания CSS, то восприятие материала существенно облегчится. В третьем издании полностью пересмотрен и обновлен весь материал, продиктовано это необходимостью взаимодействия с современными браузерами, включая Firefox 3 и Internet Explorer 8.

Книга вполне может использоваться как справочник с готовыми решениями, что зачастую позволит сократить время на создание сайта. Перечень решений приводимых в книге можно узнать из оглавления.

Оглавление
Предисловие 13

1. CSS: основы основ 20
Определение стиля с помощью CSS 20
Что такое селекторы и как их правильно использовать 25
Каким образом броузер определяет, какие стили нужно использовать 32
Заключение 34

2. Оформление текста и другие базовые возможности 35
Задание определенного шрифта для текста 35
Выбор единиц измерения размера шрифтов: пикселы, пункты, пики или что-то другое 37
Удаление подчеркивания ссылок 44
Создание ссылки, меняющей цвет при наведении на нее указателя мыши 46
Использование на одной странице различных стилей ссылок 48
Присваивание первому элементу в списке отличного от последующих элементов стиля 50
Создание цветного фона для заголовка 51
Подчеркивание заголовков 52
Устранение отступа между элементом h1 и следующим за ним абзацем 53
Выделение текста на странице 55
Изменение высоты строки (межстрочного интервала) в тексте 56
Выравнивание текста по ширине 57
Изменение стиля горизонтальной линии 58
Вывод текста с отступом 59
Центрирование текста 60
Вывод текста заглавными буквами с помощью CSS 61
Изменение стиля маркеров списка или удаление маркеров 62
Использование изображения вместо маркера списка 64
Удаление у пунктов списка отступа слева 64
Размещение пунктов списка по горизонтали 66
Удаление отступов от края страницы 66
Удаление отступов по умолчанию для всех элементов страницы 67
Добавление комментария в файл с каскадной таблицей стилей 69
Заключение 69

3. CSS и графика 70
Добавление рамки к изображению 70
Удаление средствами CSS синей рамки вокруг изображения,
выполняющего функцию ссылки 72
Задание фонового изображения для страницы с помощью CSS 72
Как изменить способ размножения фонового изображения 74
Как позиционировать фоновое изображение 76
Как сделать фоновое изображение неподвижным при прокрутке контента 79
Для каких элементов можно задавать фоновое изображение 81
Размещение текста поверх изображения 84
Как задать для документа более одного фонового изображения 85
Применение эффекта прозрачности 87
Создание сложных рамок вокруг изображений, например двойных 89
Заключение 91

4. Навигация 92
Оформление списка в виде навигационного меню 93
Изменение вида ссылки при наведении на нее указателя мыши с помощью CSS без использования изображений или сценариев на JavaScript 96
Создание навигационного меню с подпунктами с помощью списков и таблиц стилей 98
Создание горизонтального меню с помощью списков и CSS 102
Создание средствами CSS навигационной панели с кнопками 105
Создание с помощью CSS панели навигации на основе вкладок 107
Выделение ссылок, ведущих на внешний сайт 113
Изменение вида курсора 116
Реализация смены изображений на панели навигации без использования JavaScript 118
Оформление карты сайта 122
Создание выпадающего меню исключительно средствами CSS 125
Создание доступного навигационного меню на основе изображений с помощью CSS 126
Заключение 131

5. Табличные данные 132
Представление табличных данных с помощью CSS 132
Организация табличных данных: удобство доступа и наглядность 134
Создание рамки вокруг таблицы без использования HTML-атрибута border 137
Удаление пустого пространства между ячейками, появляющегося после добавления рамок 139
Представление табличных данных в привлекательной и удобной форме 139
Чередование фонового цвета строк таблицы 143
Изменение фонового цвета строки при наведении на нее указателя мыши 147
Чередование фонового цвета столбцов таблицы 150
Создание календаря с помощью CSS 153
Заключение 163

6. Формы и пользовательские интерфейсы 164
Изменение вида элементов формы с помощью CSS 165
Использование разных стилей для разных полей одной и той же формы 168
Избавление от переносов строки и потери места на странице 171
Придание кнопке подтверждения вида текста 172
Возможность заполнения формы для пользователей текстовых устройств 173
Создание двухколоночной формы с помощью CSS вместо таблиц 176
Группировка связанных полей формы 180
Задание стиля для клавиш быстрого доступа 184
Использование цветного фона для меню, созданного с помощью элементов select 186
Создание таблицы стилей для формы с возможностью ввода данных, как в электронную таблицу 188
Выделение поля формы, по которому пользователь щелкает мышью194

7. Кросс-браузерные решения 197
В каких броузерах следует протестировать свой сайт? 198
Тестирование сайта в различных броузерах при наличии только одной ОС 199
Сервисы, показывающие вид сайта в различных броузерах 203
Возможность поддержки нескольких версий Internet Explorer в Windows 205
Определение круга браузеров, для которых необходимо поддерживать все аспекты дизайна страницы 206
Указание базовой таблицы стилей для самых старых броузеров 207
Что такое режим совместимости и как его избежать 211
Задание разных таблиц стилей для Internet Explorer 6 и 7 213
Уход от наиболее распространенных ошибок в Internet Explorer 6 и 7 215
Достижение прозрачности изображения в формате PNG в Internet Explorer 6 219
Корректное отображение в IE 8 сайта, соответствующего стандартам W3C 223
Что делать, если CSS не работает 224
Интерпретация сообщений, выводимых инструментом W3C Validator 227
Заключение 229

8. Доступность и альтернативные устройства 230
Аспекты доступности, о которых следует помнить
при использовании CSS 230
Тестирование сайта в текстовом броузере 232
Тестирование сайта с помощью экранного диктора 234
Создание отдельных таблиц стилей для различных устройств 235
Создание таблицы стилей для печатной версии документа 238
Добавление на сайт альтернативных таблиц стилей 246
Нужно ли отображать на сайте инструменты для изменения размера шрифта или переключения между различными таблицами стилей? 251
Создание альтернативных таблиц стилей без копирования кода из основной таблицы 252
Заключение 256

9. Позиционирование элементов с помощью CSS 257
В каких случаях следует использовать классы, а в каких – идентификатор 257
Отображение строкового элемента как блочного, и наоборот 258
Задание внешних и внутренних отступов с помощью CSS 261
Обтекание текстом изображения 264
Как избежать смещения следующего элемента вверх при использовании свойства float 266
Как расположить логотип сайта слева, а слоган – справа 270
Позиционирование элемента на странице с помощью CSS 273
Центрирование блока на странице 277
Создание блока с закругленными краями 279
Создание «резинового» макета: слева – меню, а справа – область с контентом286
Изменение расположения элементов макета
на противоположное, чтобы меню было справа 292
Макет фиксированной ширины с двумя колонками по центру страницы 294
Создание колонки, занимающей все доступное пространство по высоте 305
Добавление тени к блоку 307
Создание макета с тремя колонками средствами CSS 310
Добавление к «резиновому» макету нижнего блока 315
Создание галереи миниатюр 318
Создание макета страницы с помощью CSS-таблиц 323
Заключение 328
Алфавитный указатель 330
Скачать