CSS. Рецепты программирования
Интернет-портал MegaWEB

Интернет-портал MegaWEB содержит много ресурсов для веб-мастеров, интернет-разработчиков, веб-дизайнеров и seo-оптимизаторов. Это видеоуроки, книги и справочники в формате ebook: PDF-CHM-DJVU, а также программы и утилиты для того, чтобы сделать сайт или раскрутить сайт в сети Интернет.

Книга «CSS. Рецепты программирования»

 

CSS. Рецепты программирования

Книга «CSS. Рецепты программирования» ориентирована на веб-дизайнеров и разработчиков, сталкивающихся с проблемами проектирования средствами каскадных таблиц стилей (Cascading Style Sheets). С ее помощью веб-разработчики смогут решать общие задачи, связанные с веб-дизайном посредством каскадных таблиц стилей. Излагаемые сведения идеально подходят тем, кто хотел бы использовать CSS в своих проектах, но старается избегать изучения новой технологии. Модульная структура изложения материала делает это издание незаменимым справочным пособием для дизайнеров и разработчиков любого уровня. Решая разные проблемы, начиная с управления типографикой, ссылками и навигацией и заканчивая макетами разметки, Кристофер Шмитт не только четко поясняет применение стилей для решения поставленной задачи, но и сообщает о проблемах, которые могут быть связаны с определенными веб-обозревателями. Предлагая в дополнение полезные приемы и хитрости для решения каждодневных задач, он снабжает вас важными знаниями, столь необходимыми для того, чтобы стать успешным дизайнером CSS.

CSS. Рецепты программирования

Обзор книги «CSS. Рецепты программирования»

Использование базовых элементов HTML, посвящена анализу возможных решений на основе семантической разметки контента.
  • Выбор текстового редактора
  • Кодирование простейшей HTML-страницы
  • О DOCTYPE и его влиянии на макет страниц в Web-обозревателе
  • Разметка заголовков
  • Подобающее цитирование
  • Вставка изображения
  • Вставка звуковых файлов средствами HTML5
  • Встраивание видео средствами HTML5
  • Эффективное применение strong и em
  • Создание списков
  • Формирование ссылки на Web-страницу
  • Разметка таблиц
  • Создание vCard (hCard) средствами HTML
  • Разметка события (hCalendar)
  • Проверка правильности HTML-разметки
Основы CSS, содержит обсуждение основ CSS, а также некоторых средств, обеспечивающих наилучшие методы практической разработки.
  • Применение правил CSS к Web-странице
  • Применение базовых селекторов для стилевого оформления
  • Применение селекторов прямого потомка
  • Применение селекторов соседнего элемента
  • Применение селекторов атрибута
  • Применение псевдоклассов
  • Применение псевдоэлементов
  • Когда использовать селекторы класса и селекторы ID
  • О свойствах CSS
  • Представление о блочной модели
  • Связь стилей с Web-страницей
  • Об источниках CSS
  • Порядок сортировки правил в CSS
  • Применение !important для переопределения отдельных правил CSS
  • Определение специфичности
  • Как применять разные типы таблиц стилей
  • Вставка комментариев в таблицы CSS
  • Организация информации в таблице стилей
  • Работа со свойствами с сокращенной формой записи
  • Задание альтернативной таблицы стилей
  • Применение плавающей модели
  • Применение автовыравнивания плавающих элементов
  • Применение абсолютного позиционирования
  • Применение относительного позиционирования
  • Применение сцепленного позиционирования
  • Создание стека элементов с помощью z-index
  • Проверка правил CSS
Web-типографика, расскажет вам про способы применения CSS для задания шрифтов на веб-странице, заголовков, врезок, абзацных отступов и про многое другое.
  • Задание шрифтов
  • Применение Web-безопасных шрифтов
  • Задание стилизованного амперсанда
  • Внедрение файлов шрифтов
  • Принудительная разбивка действительно длинных слов
  • Задание размеров шрифта
  • Достижение большего соответствия размеров шрифтов в разных Web-обозревателях
  • Установка дефисов, длинных и коротких тире
  • Центрирование текста
  • Задание выравнивания текста по ширине
  • Обозначение избыточного текста многоточием
  • Удаление свободного пространства между заголовками и абзацами
  • Задание простой буквицы
  • Формирование центрированной приподнятой буквицы большего размера
  • Декоративное оформление приподнятой буквицы с помощью изображения
  • Создание заголовка со стилизованным текстом
  • Создание заголовка со стилизованным текстом и рамкой
  • Стилевое оформление заголовка с помощью текста и изображения
  • Создание врезки в HTML-тексте
  • Расположение врезки сбоку от колонки
  • Создание врезки с рамкой
  • Создание врезки с изображениями
  • Задание отступа в первой строке абзаца
  • Задание отступа для всего абзаца
  • Создание обратного отступа
  • Стилевое оформление первой строки абзаца
  • Стилевое оформление первой строки абзаца с помощью изображения
  • Создание эффекта выделенного текста
  • Изменение цвета при выделении текста
  • Изменение межстрочных интервалов
  • Добавление графической обработки HTML-текста
  • Вставка тени за текстом
  • Корректировка межбуквенных и межсловных пробелов
  • Достижение ритмичности базовых линий в Web-типографике
  • Стилевое оформление верхних и нижних индексов без нарушения базовой линии
  • Отображение нескольких колонок текста
Изображения, описывает средства CSS, непосредственно связанные с применением стилей и свойств, относящихся к веб-графике.
  • Преобразование средствами 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
  • Разработка динамического меню из закладок
  • Изменяющиеся стили ссылок-якорей
Формы, посвящена обсуждению приемов преодоления недостатков стандартных методов визуализации форм в веб-обозревателях. Предлагаемые решения включают среди прочего установку стилей для элементов формы, установку кнопки Submit с одноразовым нажатием и стилевое оформление регистрационной формы.
  • Изменение пробельной зоны вокруг формы
  • Удаление пробельной зоны вокруг формы
  • Задание стилей для элементов ввода
  • Изменение стилей элементов формы при щелчке по ним кнопкой мыши
  • Применение разных стилей к разным элементам ввода в одной форме
  • Назначение стилей элементам textarea
  • Задание стилей элементов select и option
  • Создание поля поиска в стиле Macintosh
  • Стили кнопок формы
  • Создание изображения кнопки Submit
  • Установка кнопки Submit-Once-Only
  • Создание кнопки Submit в виде HTML-текста
  • Как заставить текстовую HTML-ссылку действовать как кнопка Submit
  • Разработка Web-формы без таблиц
  • Разработка формы из двух колонок без применения таблиц
  • Включение в форму информации для пользователей
  • Стилевое оформление клавиш доступа в Web-формах
  • Группировка общих элементов формы
  • Ввод данных в форму в виде электронной таблицы
  • Пример дизайна: простая регистрационная форма
  • Пример дизайна: бланк регистрации
Таблицы, показывает, как задавать стили в HTML-таблицах. Несмотря на то, что CSS помогает исключить необходимость применения дизайн-проектов на базе HTML-таблиц, иногда все же требуется стилевое оформление табличных данных, таких как календари или статистические сведения.
  • Задание границ и отступов в ячейках и таблицах
  • Задание объема свободного пространства вокруг ячейки
  • Задание стиля заголовка
  • Задание стилей в ячейках таблицы
  • Задание стилей для элементов шапки таблицы
  • Удаление зазоров у изображений, помещенных в ячейки таблицы
  • Устранение зазоров между ячейками таблицы
  • Создание чередующихся цветов фона в строках таблицы
  • Создание эффекта выделения цветом строки таблицы
  • Пример проекта: элегантный календарь
Проектирование Web-страниц, предназначенных для печати. Здесь предоставлена информация о стилях, применяемых при печати веб-страниц. Обсуждаемые решения включают формирование отдельной таблицы стилей для печати веб-страницы, задание стилей для веб-форм и вставку URL после ссылок.
  • Применение к Web-странице таблицы стилей для печати
  • Замена цветного логотипа черно-белым при печати Web-страниц
  • Создание готовой к печати Web-формы
  • Отображение URI после ссылок
  • Вставка специальных символов перед ссылками
  • Вставка в документ для печати разрывов страниц
  • Пример дизайна: версия страницы для печати, созданная средствами CSS
Макеты страниц, рассказывает о том, как можно использовать технологию CSS для создания макетов. Здесь рассматриваются различные варианты формирования как одноколоночных, так и многоколоночных макетов.
  • Построение одноколоночного макета
  • Создание двухколоночного макета
  • Построение двухколоночного макета с колонками фиксированной ширины
  • Создание "резинового" многоколоночного макета с помощью плавающей модели
  • Создание с помощью плавающей модели макета с тремя колонками фиксированной ширины
  • Создание с помощью позиционирования "резинового" многоколоночного макета
  • Создание с помощью позиционирования многоколоночного макета с колонками фиксированной ширины
  • Использование плавающей модели для отображения колонок в произвольном порядке
  • Проектирование асимметричного макета
  • Проектирование макетов, не зависящих от разрешения
Программистские трюки, искусственные приемы и выявление неисправностей. Здесь вы найдете способы скрывания таблиц стилей, которые не могут быть обработаны определенными веб-обозревателями. Приведены примеры скрывания таблиц стилей от Internet Explorer для Windows и других версий.
  • Переопределение встроенных стилей
  • Диагностика ошибок CSS и проблем Web-обозревателей
  • Применение букмарклетов для поиска ошибок
  • Применение расширений Web-обозревателя для поиска ошибок
  • Исправление Internet Explorer 6
  • Исправление Internet Explorer 6 с помощью JavaScript
  • Использование условных комментариев для передачи стилей в разные версии Internet Explorer
  • Применение фильтров CSS для передачи правил в практически любой Web-обозреватель
  • Установка интеллектуальной системы передачи CSS для современных Web-обозревателей
  • Тестирование дизайна сайта на нескольких платформах с помощью единственного компьютера
  • Проверка Web-сайта с помощью текстового Web-обозревателя
Проектирование с помощью CSS, является определяющей. Подчеркивая, что технология CSS – лишь средство воплощения дизайна, она описывает роль текста увеличенного размера, значение контраста и способы создания панорамного отображения.
  • Существенное увеличение размера шрифта
  • Создание неожиданного сочетания
  • Комбинирование разнородных элементов для создания контраста
  • Привлечение взгляда с помощью контраста
  • Проверка достаточности цветового контраста
  • Выделение цитаты с помощью эффектных кавычек
  • Задание перемещающейся фоновой сцены при изменении пользователем размеров окна
  • Вставка анимации в элементы на странице
  • Создание отображения фейерверков при прокрутке страницы пользователем
  • Настройка таблицы стилей для просмотра исходного кода в Firefox
  • Проектирование с помощью сетки (наборы CSS)
  • Пример дизайна: связный Web-дизайн
  • Пример дизайна: флаг США
Взаимодействие с JavaScript, показывает, как для получения сложных визуальных эффектов применять JavaScript библиотеку jQuery.
  • Проверка, включен ли JavaScript в Web-обозревателе
  • Применение разных таблиц стилей в зависимости от времени суток
  • Перенаправление на сайт для мобильных устройств в зависимости от ширины экрана Web-обозревателя
  • Вставка в Web-страницу библиотеки JavaScript
  • Применение селекторов CSS3 в IE6 и IE7
  • Создание с помощью JavaScript HTML-таблицы с окраской зебры
  • Выделение цветом строки таблицы при наведении указателя мыши
  • Визуальное оформление простого наведения указателя мыши
  • Формирование строки одной высоты из элементов с разным объемом контента
  • Задание ссылки, открывающей новое окно
  • Превращение элемента div целиком в элемент, активируемый щелчком мыши
  • Поддержка средствами JavaScript формата PNG в IE6
  • Предоставление кода на HTML5 и свойств CSS3 Web-обозревателям, способным их обрабатывать
  1. Источники
  2. Свойства CSS 2.1 и специализированные дополнения
  3. Селекторы, псевдоклассы и псевдоэлементы CSS 2.1
  4. Селекторы и псевдоклассы CSS3
  5. Стилевое оформление элементов форм

Используйте книгу «CSS. Рецепты программирования» как руководство и обращайтесь к ней, когда вам нужен новый метод или искусственный прием, и вы готовы к его изучению. Даже если вы считаете себя специалистом в области CSS, но не владеете основами дизайна, эту книгу полезно держать рядом с компьютером.

Формат: PDF + Примеры
Качество: eBook
Страниц: 672

Купить книгу «CSS. Рецепты программирования»

Интернет-магазин OZON.RU: CSS. Рецепты программирования / Интернет-магазин OZON.RU / Описание товара / CSS. Рецепты программирования / Интернет-магазин OZON.RU / Оформить заказ

Скачать бесплатно книгу «CSS. Рецепты программирования»

26.02.20122150.0639

Карта сайта

 
]]>