CSS. Рецепты программирования
Книга «CSS. Рецепты программирования» ориентирована на веб-дизайнеров и разработчиков, сталкивающихся с проблемами проектирования средствами каскадных таблиц стилей (Cascading Style Sheets). С ее помощью веб-разработчики смогут решать общие задачи, связанные с веб-дизайном посредством каскадных таблиц стилей. Излагаемые сведения идеально подходят тем, кто хотел бы использовать CSS в своих проектах, но старается избегать изучения новой технологии. Модульная структура изложения материала делает это издание незаменимым справочным пособием для дизайнеров и разработчиков любого уровня. Решая разные проблемы, начиная с управления типографикой, ссылками и навигацией и заканчивая макетами разметки, Кристофер Шмитт не только четко поясняет применение стилей для решения поставленной задачи, но и сообщает о проблемах, которые могут быть связаны с определенными веб-обозревателями. Предлагая в дополнение полезные приемы и хитрости для решения каждодневных задач, он снабжает вас важными знаниями, столь необходимыми для того, чтобы стать успешным дизайнером CSS.
Обзор книги «CSS. Рецепты программирования»
Использование базовых элементов HTML, посвящена анализу возможных решений на основе семантической разметки контента.
- Выбор текстового редактора
- Кодирование простейшей HTML-страницы
- О DOCTYPE и его влиянии на макет страниц в Web-обозревателе
- Разметка заголовков
- Подобающее цитирование
- Вставка изображения
- Вставка звуковых файлов средствами HTML5
- Встраивание видео средствами HTML5
- Эффективное применение strong и em
- Создание списков
- Формирование ссылки на Web-страницу
- Разметка таблиц
- Создание vCard (hCard) средствами HTML
- Разметка события (hCalendar)
- Проверка правильности HTML-разметки
- Применение правил CSS к Web-странице
- Применение базовых селекторов для стилевого оформления
- Применение селекторов прямого потомка
- Применение селекторов соседнего элемента
- Применение селекторов атрибута
- Применение псевдоклассов
- Применение псевдоэлементов
- Когда использовать селекторы класса и селекторы ID
- О свойствах CSS
- Представление о блочной модели
- Связь стилей с Web-страницей
- Об источниках CSS
- Порядок сортировки правил в CSS
- Применение !important для переопределения отдельных правил CSS
- Определение специфичности
- Как применять разные типы таблиц стилей
- Вставка комментариев в таблицы CSS
- Организация информации в таблице стилей
- Работа со свойствами с сокращенной формой записи
- Задание альтернативной таблицы стилей
- Применение плавающей модели
- Применение автовыравнивания плавающих элементов
- Применение абсолютного позиционирования
- Применение относительного позиционирования
- Применение сцепленного позиционирования
- Создание стека элементов с помощью z-index
- Проверка правил CSS
- Задание шрифтов
- Применение Web-безопасных шрифтов
- Задание стилизованного амперсанда
- Внедрение файлов шрифтов
- Принудительная разбивка действительно длинных слов
- Задание размеров шрифта
- Достижение большего соответствия размеров шрифтов в разных Web-обозревателях
- Установка дефисов, длинных и коротких тире
- Центрирование текста
- Задание выравнивания текста по ширине
- Обозначение избыточного текста многоточием
- Удаление свободного пространства между заголовками и абзацами
- Задание простой буквицы
- Формирование центрированной приподнятой буквицы большего размера
- Декоративное оформление приподнятой буквицы с помощью изображения
- Создание заголовка со стилизованным текстом
- Создание заголовка со стилизованным текстом и рамкой
- Стилевое оформление заголовка с помощью текста и изображения
- Создание врезки в HTML-тексте
- Расположение врезки сбоку от колонки
- Создание врезки с рамкой
- Создание врезки с изображениями
- Задание отступа в первой строке абзаца
- Задание отступа для всего абзаца
- Создание обратного отступа
- Стилевое оформление первой строки абзаца
- Стилевое оформление первой строки абзаца с помощью изображения
- Создание эффекта выделенного текста
- Изменение цвета при выделении текста
- Изменение межстрочных интервалов
- Добавление графической обработки HTML-текста
- Вставка тени за текстом
- Корректировка межбуквенных и межсловных пробелов
- Достижение ритмичности базовых линий в Web-типографике
- Стилевое оформление верхних и нижних индексов без нарушения базовой линии
- Отображение нескольких колонок текста
- Преобразование средствами CSS цветных изображений в черно-белые в IE
- Вывод рамки вокруг изображения
- Установка вокруг изображения рамки со скругленными углами
- Удаление рамок, устанавливаемых по умолчанию вокруг изображений в некоторых Web-обозревателях
- Установка фонового изображения
- Создание полосы фоновых изображений
- Размещение фонового изображения
- Применение нескольких фоновых изображений в одном HTML-элементе
- Расположение изображений на рамке блока
- Создание закрепленного фонового изображения
- Изменение размеров изображений при изменении размеров окна Web-обозревателя
- Растяжение изображения на все окно Web-обозревателя
- Создание масштабируемых изображений
- Задание способа визуализации изображений в Web-обозревателе
- Поворот изображений средствами CSS
- Задание градиентов средствами CSS
- Создание прозрачных PNG-изображений для IE6 и более поздних версий
- Применение PNG-файлов с прозрачностью с помощью JavaScript
- Наложение HTML-текста на изображение
- Замещение HTML-текста изображением
- Создание панорамного представления изображения
- Комбинирование разных графических форматов
- Скругленные углы колонок с фиксированной шириной
- Скругленные углы (метод раздвижных дверей)
- Скругленные углы (метод горной вершины)
- Скругление углов с помощью JavaScript
- Вставка тени от элемента средствами CSS
- Вставка тени за изображением
- Вставка сглаженной тени за изображением
- Создание выносок с текстом
- Как помешать людям похищать ваши изображения
- Автоматическая вставка отражений в изображения
- Применение изображений-спрайтов
- Обрезка фоновых изображений
- Применение масок к изображениям и рамкам
- Удаление полей страницы
- Сброс стилей, назначаемых Web-обозревателем по умолчанию
- Раскрашивание полосы прокрутки в IE
- Методы центрирования элементов на Web-странице
- Создание рамки страницы
- Вывод рамки вокруг окна просмотра Web-обозревателя
- Настройка горизонтального разделителя
- Добавление просмотра изображения в режиме Lightbox
- Изменение непрозрачности элементов
- Регулировка непрозрачности цвета фона
- Изменение формата списка
- Изменение цвета маркера списка
- Задание в списке отступов, одинаково отображаемых в разных Web-обозревателях
- Установка разделителей между элементами списка
- Создание пользовательских текстовых маркеров в списках
- Создание пользовательских маркеров-изображений в списках
- Вставка больших пользовательских маркеров-изображений в списки
- Улучшение представления списка с помощью графики
- Создание внутристрочных списков
- Создание обратных отступов в списке
- Смещение маркера внутрь списка
- Стилевое оформление списка определений
- Традиционное отображение киносценария с помощью элемента языка HTML5 dialog
- Превращение списка в дерево каталогов
- Создание системы "звездного" рейтинга
Ссылки и навигация. Здесь показано, как использовать CSS для управления представлением ссылок и наборов ссылок. Рассматриваются как простые решения, например удаление подчеркивания ссылок, так и более сложные, такие как создание динамического визуального меню.
- Легкое создание текстовых меню и подменю
- Удаление подчеркивания ссылок и другие приемы стилевого оформления
- Изменение цвета ссылок
- Удаление пунктирных линий при щелчке мышью по ссылкам в Internet Explorer
- Изменение цвета ссылок в разных секциях страницы
- Вывод пиктограмм в конце ссылок разных типов
- Меняющиеся курсоры
- Изменение внешнего вида ссылки при наведении указателя мыши без применения JavaScript
- Анимация ссылок с помощью свойств CSS3 transition при наведении указателя мыши
- Создание навигационных текстовых меню и визуальных эффектов при наведении указателя мыши на его пункты
- Вставка подменю в вертикальные меню
- Создание горизонтальных навигационных меню
- Построение горизонтальных навигационных меню с раскрывающимися меню
- Создание навигационного меню с клавишами доступа
- Создание переходов с помощью ссылок-цепочек
- Создание с помощью изображений визуальных эффектов наведения указателя мыши на ссылку
- Создание сворачиваемых меню
- Создание контекстных меню
- Создание всплывающих подсказок с помощью атрибута title
- Разработка динамического меню из закладок
- Изменяющиеся стили ссылок-якорей
- Изменение пробельной зоны вокруг формы
- Удаление пробельной зоны вокруг формы
- Задание стилей для элементов ввода
- Изменение стилей элементов формы при щелчке по ним кнопкой мыши
- Применение разных стилей к разным элементам ввода в одной форме
- Назначение стилей элементам textarea
- Задание стилей элементов select и option
- Создание поля поиска в стиле Macintosh
- Стили кнопок формы
- Создание изображения кнопки Submit
- Установка кнопки Submit-Once-Only
- Создание кнопки Submit в виде HTML-текста
- Как заставить текстовую HTML-ссылку действовать как кнопка Submit
- Разработка Web-формы без таблиц
- Разработка формы из двух колонок без применения таблиц
- Включение в форму информации для пользователей
- Стилевое оформление клавиш доступа в Web-формах
- Группировка общих элементов формы
- Ввод данных в форму в виде электронной таблицы
- Пример дизайна: простая регистрационная форма
- Пример дизайна: бланк регистрации
- Задание границ и отступов в ячейках и таблицах
- Задание объема свободного пространства вокруг ячейки
- Задание стиля заголовка
- Задание стилей в ячейках таблицы
- Задание стилей для элементов шапки таблицы
- Удаление зазоров у изображений, помещенных в ячейки таблицы
- Устранение зазоров между ячейками таблицы
- Создание чередующихся цветов фона в строках таблицы
- Создание эффекта выделения цветом строки таблицы
- Пример проекта: элегантный календарь
- Применение к Web-странице таблицы стилей для печати
- Замена цветного логотипа черно-белым при печати Web-страниц
- Создание готовой к печати Web-формы
- Отображение URI после ссылок
- Вставка специальных символов перед ссылками
- Вставка в документ для печати разрывов страниц
- Пример дизайна: версия страницы для печати, созданная средствами CSS
- Построение одноколоночного макета
- Создание двухколоночного макета
- Построение двухколоночного макета с колонками фиксированной ширины
- Создание "резинового" многоколоночного макета с помощью плавающей модели
- Создание с помощью плавающей модели макета с тремя колонками фиксированной ширины
- Создание с помощью позиционирования "резинового" многоколоночного макета
- Создание с помощью позиционирования многоколоночного макета с колонками фиксированной ширины
- Использование плавающей модели для отображения колонок в произвольном порядке
- Проектирование асимметричного макета
- Проектирование макетов, не зависящих от разрешения
- Переопределение встроенных стилей
- Диагностика ошибок CSS и проблем Web-обозревателей
- Применение букмарклетов для поиска ошибок
- Применение расширений Web-обозревателя для поиска ошибок
- Исправление Internet Explorer 6
- Исправление Internet Explorer 6 с помощью JavaScript
- Использование условных комментариев для передачи стилей в разные версии Internet Explorer
- Применение фильтров CSS для передачи правил в практически любой Web-обозреватель
- Установка интеллектуальной системы передачи CSS для современных Web-обозревателей
- Тестирование дизайна сайта на нескольких платформах с помощью единственного компьютера
- Проверка Web-сайта с помощью текстового Web-обозревателя
- Существенное увеличение размера шрифта
- Создание неожиданного сочетания
- Комбинирование разнородных элементов для создания контраста
- Привлечение взгляда с помощью контраста
- Проверка достаточности цветового контраста
- Выделение цитаты с помощью эффектных кавычек
- Задание перемещающейся фоновой сцены при изменении пользователем размеров окна
- Вставка анимации в элементы на странице
- Создание отображения фейерверков при прокрутке страницы пользователем
- Настройка таблицы стилей для просмотра исходного кода в Firefox
- Проектирование с помощью сетки (наборы CSS)
- Пример дизайна: связный Web-дизайн
- Пример дизайна: флаг США
- Проверка, включен ли JavaScript в Web-обозревателе
- Применение разных таблиц стилей в зависимости от времени суток
- Перенаправление на сайт для мобильных устройств в зависимости от ширины экрана Web-обозревателя
- Вставка в Web-страницу библиотеки JavaScript
- Применение селекторов CSS3 в IE6 и IE7
- Создание с помощью JavaScript HTML-таблицы с окраской зебры
- Выделение цветом строки таблицы при наведении указателя мыши
- Визуальное оформление простого наведения указателя мыши
- Формирование строки одной высоты из элементов с разным объемом контента
- Задание ссылки, открывающей новое окно
- Превращение элемента div целиком в элемент, активируемый щелчком мыши
- Поддержка средствами JavaScript формата PNG в IE6
- Предоставление кода на HTML5 и свойств CSS3 Web-обозревателям, способным их обрабатывать
- Источники
- Свойства CSS 2.1 и специализированные дополнения
- Селекторы, псевдоклассы и псевдоэлементы CSS 2.1
- Селекторы и псевдоклассы CSS3
- Стилевое оформление элементов форм
Используйте книгу «CSS. Рецепты программирования» как руководство и обращайтесь к ней, когда вам нужен новый метод или искусственный прием, и вы готовы к его изучению. Даже если вы считаете себя специалистом в области CSS, но не владеете основами дизайна, эту книгу полезно держать рядом с компьютером.
Формат: PDF + Примеры
Качество: eBook
Страниц: 672
Купить книгу «CSS. Рецепты программирования»
Интернет-магазин OZON.RU: CSS. Рецепты программирования / Интернет-магазин OZON.RU / Описание товара / CSS. Рецепты программирования / Интернет-магазин OZON.RU / Оформить заказ
Скачать бесплатно книгу «CSS. Рецепты программирования»
- Архив CSS_Cookbook.rar 36.01 Мб: CSS. Рецепты программирования / Depositfiles.com / Архив CSS_Cookbook.rar