CSS3: The Missing Manual / Большая книга CSS3 Год: 2014 Автор: McFarland D.S. / Макфарланд Д.С. Переводчик: Н. Вильчинский Жанр: Веб-дизайн Издательство: Питер, 2014 ISBN: 978-5-496-00428-2 Серия: Бестселлеры O’Reilly Язык: Русский Формат: PDF Качество: Изначально компьютерное (eBook) Интерактивное оглавление: Да Количество страниц: 608 Описание: C помощью технологии CSS3 (каскадные таблицы стилей) можно создавать уникальные, современные оформления веб-сайтов. Но даже самый опытный веб-разработчик может не знать всех приемов применения CSS3. Прочитав в этой книге множество практических примеров, а также советов, вы перейдете на новый уровень создания сайтов с помощью HTML и CSS. Вы узнаете, как разрабатывать веб-страницы, которые одинаково быстро работают и одинаково выглядят, как на ПК, так и на смартфонах и планшетах.
В книге рассмотрены следующие темы:
- написание HTML5-, CSS3-тегов, которые распознаются во всех браузерах;
- форматирование текста, добавление на страницы навигации;
- создание таблиц и форм;
- приемы веб-дизайна для создания уникального оформления сайтов;
- создание сайтов для любых устройств с помощью адаптивного дизайна.
Примеры страниц
Оглавление
Оглавление
Об авторе.......................................................13
О творческой команде............................................14
Благодарности...................................................15
Введение........................................................16
Как работает CSS............................................16
Преимущества CSS............................................17
Что необходимо знать........................................17
HTML: структура языка.......................................18
Типы документов.............................................18
Как работают HTML-теги......................................19
Немного слов о XHTML........................................20
HTML5 — новый виток эволюции................................21
Программное обеспечение, используемое для CSS...............21
Об этой книге...............................................23
Основные разделы книги......................................24
Основная терминология.......................................25
О путях к папкам и командах меню............................26
Соглашения, принятые в данной книге.........................26
Интернет-ресурсы............................................27
От издательства.................................................28
Часть 1. Основы CSS
Глава 1. HTML для CSS...........................................30
HTML: прошлое и настоящее...................................30
Написание HTML-кода для CSS.................................33
Осмысление тегов <div> и <span>.............................35
Дополнительные теги в HTML5......................................36
Составление своего представления о макете страницы...............38
Важность doctype.................................................44
Обеспечение использования самой последней
версии Internet Explorer......................................46
Глава 2. Создание стилей и таблиц стилей.............................49
Что такое стиль..................................................49
Понимание таблиц стилей..........................................52
Внутренние таблицы стилей........................................54
Внешние таблицы стилей...........................................55
Обучающий урок: создание первых стилей...........................58
Глава 3. Селекторы: определение элементов стилизации.................69
Селекторы типов: дизайн страницы.................................69
Селекторы классов: точное управление.............................71
ID-селекторы: определение элементов веб-страниц..................74
Стилизация групп тегов...........................................76
Стилизация вложенных тегов.......................................77
Создание модулей.................................................81
Псевдокпассы и псевдоэлементы....................................82
Селекторы дочерних элементов.....................................88
Селекторы типов дочерних элементов...............................91
Селектор :not()..................................................94
Обучающий урок: примеры использования селекторов.................95
Глава 4. Механизм наследования стилей...............................106
Что такое наследование?.........................................106
Упрощение таблиц стилей через наследование......................108
Ограничения наследования........................................108
Обучающий урок: наследование....................................110
Глава 5. Управление сложной структурой стилей: каскадность . 116
Каскадность стилей..............................................116
Особенности механизма каскадности: какие стили имеют преимущество 121
Управление каскадностью.........................................124
Как избежать войн значимости....................................127
Начинаем с чистого листа........................................128
Обучающий урок: механизм каскадности в действии.................131
Часть 2. Применение CSS
Глава 6. Форматирование текста...................................138
Использование шрифтов........................................138
Выбор обычного шрифта........................................140
Использование веб-шрифтов....................................143
Типы файлов шрифтов..........................................143
Правовые вопросы использования веб-шрифтов...................145
Поиск веб-шрифтов............................................145
Создание нескольких форматов шрифтов.........................146
Использование директивы @font-face...........................149
Создание стилей с использованием веб-шрифтов.................151
Работа с полужирными и курсивными вариантами.................152
Простой способ добавления полужирного и курсивного вариантов.153
Добавление полужирного и курсивного вариантов
и поддержка Internet Explorer 8...........................155
Google web fonts.............................................158
Придание тексту цветового оформления.........................166
Установка размера шрифта.....................................169
Форматирование символов и слов...............................175
Добавление текстовых теней...................................178
Форматирование абзацев текста................................180
Форматирование первой буквы, первой строки абзаца............185
Стилизация списков...........................................187
Обучающий урок: форматирование текста в действии.............192
Глава 7. Поля, отступы, границы....................................205
Понятие блочной модели.........................................205
Управление размерами полей и отступов..........................207
Добавление границ..............................................215
Установка цвета фона...........................................219
Создание скругленных углов.....................................220
Добавление теней...............................................223
Определение параметров высоты и ширины.........................226
Переопределение ширины блока с помощью box-sizing..............229
Задание максимальных и минимальных
значений высоты и ширины....................................233
Управление обтеканием содержимого плавающих элементов..........234
Обучающий урок: поля, фоновые параметры, границы...............239
Двигаемся дальше...............................................250
Глава 8. Добавление графики на веб-страницы........................251
CSS и тег <img>................................................251
Добавление фоновых изображений.................................252
Управление повтором фоновых изображений........................257
Позиционирование фоновых изображений...........................258
Определение начальной позиции фонового
изображения и порядка его отсечения.........................265
Масштабирование фоновых изображений............................266
Сокращенный вариант свойства background........................268
Использование нескольких фоновых изображений...................270
Использование градиентных фонов................................273
Линейные градиенты.............................................273
Цветовые опорные точки.........................................276
Префиксы производителей и поддержка Internet Explorer..........278
Повторяющиеся линейные градиенты...............................279
Радиальные градиенты...........................................281
Повторяющиеся радиальные градиенты.............................283
Применение градиентов, создаваемых с помощью Colorzilla........283
Обучающий урок 1: совершенствуем изображения...................286
Обучающий урок 2: создание фотогалереи.........................291
Обучающий урок 3: использование фоновых изображений............297
Получение свитка, появляющегося в Internet Explorer 8..........304
Глава 9. Приводим в порядок навигацию сайта........................306
Выборка стилизуемых ссылок.....................................306
Стилизация ссылок..............................................310
Создание панелей навигации.....................................318
CSS-стиль для предварительной загрузки ролловеров..............327
Стилизация отдельных видов ссылок..............................329
Обучающий урок 1: стилизация ссылок............................331
Обучающий урок 2: создание панели навигации....................338
Глава 10. Осуществление преобразований, переходов
и анимации с помощью CSS...................................348
Преобразования ........................................... 348
Переходы...................................................358
Анимация...................................................Збб
Обучающий урок.............................................379
Глава 11. Форматирование таблиц и форм.........................387
Правильное использование таблиц............................387
Создание стилей для таблиц.................................390
Создание стилей для форм...................................396
Обучающий урок 1: создание стилей для таблиц...............402
Обучающий урок 2: создание стилей для форм.................407
Часть 3. Макет страницы
Глава 12. Введение в разметку CSS..............................414
Типы разметок веб-страницы.................................414
Как работает CSS-разметка..................................416
Стратегии разметки.........................................422
Глава 13. Разметка страницы
на основе плавающих элементов..............................427
Использование плавающих элементов в разметках..............430
Решение проблем плавающих элементов........................436
Обучающий урок. Многоколоночная разметка...................451
Глава 14. Адаптивный веб-дизайн................................464
Основы адаптивного веб-дизайна.............................464
Настройка веб-страницы для RWD.............................466
Медиазапросы...............................................467
Гибкие сетки...............................................476
Изменчивые изображения.....................................482
Обучающий урок по адаптивному веб-дизайну..................486
Глава 15. Позиционирование элементов на веб-странице..........499
Как работают свойства позиционирования.....................499
Эффективные стратегии позиционирования.....................513
Обучающий урок: позиционирование элементов страницы........518
Часть 4. CSS для продвинутых
Глава 16. CSS для распечатываемых веб-страниц..................527
Как работают аппаратно-зависимые таблицы стилей............527
Как добавлять аппаратно-зависимые таблицы стилей...........530
Создание таблиц стилей для печати..........................531
Обучающий урок: создание таблицы стилей для печати.........539
Глава 17. Совершенствуем навыки работы с CSS...................546
Добавление комментариев....................................546
Организация стилей и таблиц стилей.........................547
Устранение столкновений стилей в браузере..................555
Использование селекторов потомков..........................559
Различный код CSS для Internet Explorer....................564
Приложения
Приложение 1. Справочник свойств CSS...........................569
Значения CSS...............................................569
Свойства текста............................................573
Свойства списков...........................................578
Отступы, границы и поля....................................579
Фоны.......................................................584
Свойства разметки страницы.................................587
Свойства анимации, преобразований и переходов..............593
Свойства таблицы...........................................598
Различные свойства.........................................600
Приложение 2. Информационные ресурсы, касающиеся CSS .. 603
Справочники................................................603
Справочная информация по CSS...............................604
Подсказки, приемы и советы по CSS..........................604
CSS-навигация..............................................605
Разметка CSS...............................................606
Выставочные сайты..........................................607
Программное обеспечение для CSS............................607
Очень желательно изучить сначала хотя бы азы HTML (структура html-документа, основные html-элементы, вставка изображений, гиперссылок, таблиц). Подойдет любой учебник по HTML (даже не обязательно HTML5) за последние лет пять.
Потом можно браться и за эту книгу, на мой взгляд, это лучший учебник по CSS. После нее для закрепления навыков и изучения адаптивной верстки советую книгу "HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств" (Автор: Бен Фрейн) https://rutr.life/forum/viewtopic.php?t=4527828 В качестве бонусов в изучении CSS3 (если вы хотите стать верстальщиком или веб-дизайнером) можно посмотреть еще 2 книги, они небольшие по объему и легко читаются:
"Сила CSS3. Освой новейший стандарт веб-разработок" (Автор: Зои Джилленуотер) https://rutr.life/forum/viewtopic.php?t=4212257
"CSS ручной работы" (Автор: Дэн Седерхольм) https://rutr.life/forum/viewtopic.php?t=4214664
Очень желательно изучить сначала хотя бы азы HTML (структура html-документа, основные html-элементы, вставка изображений, гиперссылок, таблиц). Подойдет любой учебник по HTML (даже не обязательно HTML5) за последние лет пять.
Потом можно браться и за эту книгу, на мой взгляд, это лучший учебник по CSS. После нее для закрепления навыков и изучения адаптивной верстки советую книгу "HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств" (Автор: Бен Фрейн) https://rutr.life/forum/viewtopic.php?t=4527828 В качестве бонусов в изучении CSS3 (если вы хотите стать верстальщиком или веб-дизайнером) можно посмотреть еще 2 книги, они небольшие по объему и легко читаются:
"Сила CSS3. Освой новейший стандарт веб-разработок" (Автор: Зои Джилленуотер) https://rutr.life/forum/viewtopic.php?t=4212257
"CSS ручной работы" (Автор: Дэн Седерхольм) https://rutr.life/forum/viewtopic.php?t=4214664
Очень желательно изучить сначала хотя бы азы HTML (структура html-документа, основные html-элементы, вставка изображений, гиперссылок, таблиц). Подойдет любой учебник по HTML (даже не обязательно HTML5) за последние лет пять.
Потом можно браться и за эту книгу, на мой взгляд, это лучший учебник по CSS. После нее для закрепления навыков и изучения адаптивной верстки советую книгу "HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств" (Автор: Бен Фрейн) https://rutr.life/forum/viewtopic.php?t=4527828 В качестве бонусов в изучении CSS3 (если вы хотите стать верстальщиком или веб-дизайнером) можно посмотреть еще 2 книги, они небольшие по объему и легко читаются:
"Сила CSS3. Освой новейший стандарт веб-разработок" (Автор: Зои Джилленуотер) https://rutr.life/forum/viewtopic.php?t=4212257
"CSS ручной работы" (Автор: Дэн Седерхольм) https://rutr.life/forum/viewtopic.php?t=4214664
На мой взгляд лучше не упирать особо на книги. По одной на HTML и CSS3 более чем достаточно. Потом уже лучше на практике постигать все, а для вдохновения заходить на codepen.io
в целом книга хорошая, но я в шоке с ужасающих ошибок в переводе, которые могут заставить новичка просто опустить руки... например абзац:
Цитата:
Второй заголовок на рис. 7.5 (который начинается со слов Raise
Tuna) имеет верхнее поле, равное 10 пикселам. Оно поднимает заголовок вверх,
что обеспечивает небольшое наложение текста на пространство вышестоящего
заголовка.
в оригинале звучит, как:
Цитата:
The second headline of Figure
7-5 (the one that begins “Raise Tuna”) has a top margin of –10px applied to it. This
moves the headline up 10 pixels so it slightly overlaps the space occupied by the
headline above it.
это ж просто капец какой-то.... "спутать" в учебной книге -10 пивселей и 10 пикселей
Книга супер, всем советую кто после познания основ HTML решил изучить CSS, прочитав книгу до конца, запоминаются большинство свойств CSS и их применение, после этих книг рекомендую прочитать еще пару книг про CSS, а дальше изучать Javascript(основы), а далее Jquery(я на данном этапе)
Доп.материалы(для практики): "По ходу чтения книги вам будут попадаться живые примеры — пошаговые обучающие уроки, которые вы сможете выполнять, используя исходные данные
(графические образы и незаконченные веб-страницы)" oreilly.com/pub/missingmanuals/css3tmm3 Download
Доп.материалы(для практики):
"По ходу чтения книги вам будут попадаться живые примеры — пошаговые обучающие уроки, которые вы сможете выполнять, используя исходные данные (графические образы и незаконченные веб-страницы)"
oreilly.com/pub/missingmanuals/css3tmm3
Спасибо тебе, добрый человек, как раз искал эти исходники.
Доп.материалы(для практики):
"По ходу чтения книги вам будут попадаться живые примеры — пошаговые обучающие уроки, которые вы сможете выполнять, используя исходные данные (графические образы и незаконченные веб-страницы)"
oreilly.com/pub/missingmanuals/css3tmm3
Спасибо тебе, добрый человек, как раз искал эти исходники.
Пожалуйста
Книга хороша, но будьте внимательны, как писала выше Манечка много ошибок в переводе\опечатки. Ранее в книге встречал, но вот более наглядно :
Там таких опечаток много и это не есть гуд конечно (в издании 2015 года ничего не поправили). Но при чтение данной книги они практически не мешают ибо сходу отлавливаются. При условии что вы усвоили материал, понимаете что и зачем делаете в уроке а не просто бездумно копируете код.
Книга - лучшее что есть для освоения css, на мой взгляд.
На амазоне вышло издание 15 года. Я сначала подумал, что вау, новое издание, надо заказать. А потом понял, что там скорее всего добавили про реализацию flexbox или grid. Будете ли грузить? У меня на руках русская версия, как раз эта. Согласен с предыдущими ораторами в том, что на данный момент - она лучшая для повторения и изучения фишек.
Спасибо товарищу Nismo за другие ссылки и советы.Издания интересные, к сожалению пока засел только на них, и так не сдвинулся плотно к JS и Jquery. Но не теряю надежду продвинуться во front-end
Доп.материалы(для практики):
"По ходу чтения книги вам будут попадаться живые примеры — пошаговые обучающие уроки, которые вы сможете выполнять, используя исходные данные (графические образы и незаконченные веб-страницы)"
oreilly.com/pub/missingmanuals/css3tmm3
Спасибо тебе, добрый человек, как раз искал эти исходники.
Пожалуйста
Книга хороша, но будьте внимательны, как писала выше Манечка много ошибок в переводе\опечатки. Ранее в книге встречал, но вот более наглядно :
В таких книгах подобные опечатки постоянно появляются. Заставляют внимательно читать приводимый код, а не тупо копипастить