CSS. 100 и 1 совет

Скачать книгу (или купить)

Описание книги

Данная книга будет интересна всем, кому приходится работать с CSS, а в особенности веб-дизайнерам и разработчикам, которые, конечно, видели много красивых веб-сайтов, основанных на применении CSS, но у которых нет времени на то, чтобы проштудировать огромное количество теоретических и накопленных практических материалов при создании собственного сайта. В этой книге вы найдете готовые решения различных проблем, которые могут быть использованы непосредственно в представленном здесь виде или взяты за основу при создании собственных решений.

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

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

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

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

Каждый пример сопровождается комментарием, объясняющим механизм работы данного метода. Это позволит вам использовать эти примеры в дальнейшем, модифицируя их в соответствии с решаемыми в данный момент проблемами.

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

Оглавление книги «CSS. 100 и 1 совет»

Предисловие

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-таблиц

Заключение

Алфавитный указатель

Дальше: HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера