CSS для профессионалов, Руководство по разработке в примерах от сообщества Stack Overflow, 2025.
Это подробное руководство по каскадным таблицам стилей (CSS), основанное на лучших практиках и решениях, предложенных специалистами крупнейшего в мире сообщества разработчиков — Stack Overflow.
Книга охватывает весь спектр возможностей CSS: от базового синтаксиса и правил форматирования до сложных тем, таких как Flexbox, Grid, анимации, трансформации и управление слоями. В ней представлены разъяснения ключевых концепций, примеры кода и советы по оптимизации, которые помогут как начинающим, так и опытным разработчикам углубить свои знания и улучшить навыки веб-стилизации.
Вы узнаете, как правильно работать с селекторами, медиазапросами, типографикой, тенями, градиентами, масками, фильтрами и многими другими аспектами CSS. Особое внимание уделено кроссбраузерной совместимости, производительности и современным подходам к верстке.
Это идеальное руководство для тех, кто хочет освоить CSS с нуля или вывести свои знания на новый уровень, изучая проверенные временем решения, которыми делятся эксперты Stack Overflow.
Внешняя таблица стилей.
Внешняя таблица стилей CSS может быть применена к любому количеству HTML-документов путем добавления элемента <link> в каждый HTML-документ.
Атрибут rel тега <link> должен быть установлен в значение stylesheet, а атрибут href — в относительный или абсолютный путь к таблице стилей. Хотя использование относительных путей считается хорошей практикой, абсолютные пути также могут быть задействованы. В HTML5 атрибут type может быть опущен.
Рекомендуется размещать тег <link> внутри тега <head> HTML-документа, чтобы стили загружались до того, как будут применены к элементам. В противном случае пользователи могут увидеть кратковременное отображение нестилизованного контента.
ОГЛАВЛЕНИЕ.
Раздел 1. Начало работы с CSS.
Глава 1.1. Внешняя таблица стилей.
Глава 1.2. Внутренние стили.
Глава 1.3. Правило CSS @import (одно из правил CSS at-rule).
Глава 1.4. Встроенные стили (Inline Styles).
Глава 1.5. Изменение CSS с помощью JavaScript.
Глава 1.6. Стилизация списков с помощью CSS.
Раздел 2. Структура и форматирование СSS-правила.
Глава 2.1. Списки свойств.
Глава 2.2. Множественные селекторы.
Глава 2.3. Правила, селекторы и блоки объявлений.
Раздел 3. Комментарии.
Глава 3.1. Однострочные комментарии.
Глава 3.2. Мноrострочные комментарии.
Раздел 4. Селекторы.
Глава 4.1. Базовые селекторы.
Глава 4.2. Селекторы атрибутов.
Глава 4.3. Комбинаторы.
Глава 4.4. Псевдоклассы.
Глава 4.5. Псевдокласс :nth-child.
Глава 4.6. Селекторы по имени класса.
Глава 4.7. Выбор элемента по ero 1D без высокой специфичности селектора ID.
Глава 4.8. Селектор :last-of-type.
Глава 4.9. Пример селектора :in-range в CSS3.
Глава 4.10. А. Пример псевдокласса :not О в. Псевдокласс :focus-within в css.
Глава 4.11. Глобальный булевый флажок с использованием checkЬox: checked и - (общий комбинатор соседних элементов).
Глава 4.12. Селекторы по 1D.
Глава 4.13. Как стилизовать элемент Range input.
Глава 4.14. Пример псевдокласса :only-child.
Раздел 5. Фоны.
Глава 5.1. Цвет фона.
Глава 5.2. Градиенты фона.
Глава 5.3. Фоновое изображение.
Глава 5.4. Сокращенная запись при работе с фоном (Background Shorthand).
Глава 5.5. Размер фона (Background Size).
Глава 5.6. Позиция фона (Background Position).
Глава 5.7. Свойство background-origin.
Глава 5.8. Множественные фоновые изображения.
Глава 5.9. Свойство background-attachment.
Глава 5.10. Свойство background-clip.
Глава 5.11. Свойство background-repeat.
Глава 5.12. Свойство background-blend-mode.
Глава 5.13. Цвет фона с прозрачностью.
Раздел 6. Центрирование.
Глава 6.1. Использование Flexbox.
Глава 6.2. Использование CSS transform.
Глава 6.3. Использование margin: 0 auto;.
Глава 6.4. Использование text-align.
Глава 6.5. Использование position: absolute.
Глава 6.6. Использование саlс().
Глава 6.7. Использование line-height.
Глава 6.8. Вертикальное выравнивание чего угодно с помощью трех строк кода.
Глава 6.9. Центрирование относительно другого элемента.
Глава 6.10. Метод «призрачного элемента».
Глава 6.11. Центрирование по вертикали и горизонтали без учета высоты и ширины.
Глава 6.12. Вертикальное выравнивание изображения внутри div.
Глава 6.13. Центрирование с фиксированным размером.
Глава 6.14. Вертикальное выравнивание элементов с динамической высотой.
Глава 6.15. Горизонтальное и вертикальное центрирование с использованием табличной верстки.
Раздел 7. Блочная модель (Вох Model).
Глава 7.1. Что такое блочная модель?.
Глава 7.2. box-sizing.
Раздел 8. Внешние отступы (Margins).
Глава 8.1. Схлопывание отступов (Margin Collapsing).
Глава 8.2. Применение внешнего отступа (margin) на определенной стороне.
Глава 8.3. Упрощение свойства margin.
Глава 8.4. Горизонтальное центрирование элементов на странице с использованием margin.
Глава 8.5. Пример 1.
Глава 8.6. Отрицательные отступы (margin).
Раздел 9. Внутренние отступы (Padding).
Глава 9.1. Сокращенная запись внутренних отступов (padding).
Глава 9.2. Внутренние отступы для определенной стороны.
Раздел 10. Граница.
Глава 10.1. border-radius.
Глава 10.2. border-style.
Глава 10.3. Множественные rраницы.
Глава 10.4. border (сокращенные записи).
Глава 10.5. border-collapse.
Глава 10.6. border-image.
Глава 10.7. Создание многоцветной rраницы с использованием border-image.
Глава 10.8. border-[left I right I top I bottom].
Раздел 11. Контуры (Outlines).
Глава 11.1. Обзор.
Глава 11.2. outline-style.
Раздел 12. Переполнение (Overflow).
Глава 12.1. overflow-wrap.
Глава 12.2. overflow-x и overflow-y.
Глава 12.3. overflow: scroll.
Глава 12.4. overflow: visiЬ!e.
Глава 12.5. Создание блочного контекста форматирования с помощью overflow.
Раздел 13. Медиазапросы.
Глава 13.1. Терминология и структура.
Глава 13.2. Базовый пример.
Глава 13.3. Тип медиа (mediatype).
Глава 13.4. Медиазапросы для Retina и нe-Retina экранов.
Глава 13.5. Ширина (width) против области просмотра (viewport).
Глава 13.6. Использование медиазапросов для адаптации к разным размерам экрана.
Глава 13.7. Использование в теге <link>.
Глава 13.8. Медиазапросы и JE8.
Раздел 14. Плавающие элементы (Floats).
Глава 14.1. Обтекание изображения текстом.
Глава 14.2. Свойств о clear.
Глава 14.3. Clearfix.
Глава 14.4. Строчные DIV с использованием float.
Глава 14.5. Использование свойства overflow для очистки плавающих элементов.
Глава 14.6. Простой макет из двух колонок фиксированной ширины.
Глава 14.7. Простой макет из трех колонок фиксированной ширины.
Глава 14.8. Двухколоночный макет «Ленивый/Жадный».
Раздел 15. Типографика.
Глава 15.1. Сокращенная запись для шрифта (Font Shorthand).
Глава 15.2. quotes.
Глава 15.3. Размер шрифта.
Глава 15.4. Направление текста.
Глава 15.5. Стек шрифтов (Font Stacks).
Глава 15.6. Переполнение текста (Text Overflow).
Глава 15.7. Тень текста (Text Shadow).
Глава 15.8. Трансформация текста (Text Transform).
Глава 15.9. Межбуквенный интервал (Letter Spacing).
Глава 15.10. Отступ текста (Text Indent).
Глава 15.11. Оформление текста (Text Decoration).
Глава 15.12. Межсловный интервал (Word Spacing).
Глава 15.13. Вариант шрифта (Font Variant).
Раздел 16. Flexbox.
Глава 16.1. Динамическое вертикальное и горизонтальное выравнивание (align-items, justify-content).
Глава 16.2. Липкий футер с переменной высотой.
Глава 16.3. Оптимальное размещение элементов внутри контейнера.
Глава 16.4. «Святой Грааль » (Holy Grail Layout) с использованием Flexbox.
Глава 16.5. Идеальное выравнивание кнопок внутри карточек с использованием Flexbox.
Глава 16.6. Одинаковая высота вложенных контейнеров.
Раздел 17. Каскадирова1mе и специфичность.
Глава 17.1. Расчет специфичности селекторов.
Глава 17.2. Объявление !important.
Глава 17.3. Каскадирование (Cascading).
Глава 17.4. Более сложный пример специфичности.
Раздел 18. Цвета.
Глава 18.1. currentColor.
Глава 18.2. Ключевые слова цветов.
Глава 18.3. Шестнадцатеричные значения (Hexadecimal Value).
Глава 18.4. Нотация rgb().
Глава 18.5. Нотация rgba().
Глава 18.6. Нотация hsl().
Глава 18.7. Нотация hsla().
Раздел 19. Прозрачность (Opacity).
Глава 19.1. Свойство opacity.
Глава 19.2. Совместимость с IE для свойства opacity.
Раздел 20. Единицы измерения длины.
Глава 20.1. Создание масштабируемых элементов с использованием rem и em.
Глава 20.2. Размер шрифта с rem.
Глава 20.3. vmin и vmax.
Глава 20.4. vh и vw.
Глава 20.5. Использование процентов %.
Раздел 21. Псевдоэлементы.
Глава 21.1. Псевдоэлементы.
Глава 21.2. Псевдоэлементы в списках.
Раздел 22. Позиционирование.
Глава 22.1. Перекрытие элементов с помощью z-index.
Глава 22.2. Абсолютное позиционирование.
Глава 22.3. Фиксированное позиционирование.
Глава 22.4. Относительное позиционирование.
Глава 22.5. Статическое позиционирование.
Раздел 23. Управление макетом.
Глава 23.1. Свойство display.
Глава 23.2. Создание структуры таблицы с использованием div.
Раздел 24. Grid.
Глава 24.1. Базовый пример.
Раздел 25. Таблицы.
Глава 25.1. taЫe-layout.
Глава 25.2. empty-cells.
Глава 25.3. border-collapse.
Глава 25.4. border-spacing.
Глава 25.5. caption-side.
Раздел 26. Переходы (тransitions).
Глава 26.1. Сокращенная запись перехода (Transition shorthand).
Глава 26.2. Функция cuЬic-bezier.
Глава 26.3. Переход (длинная запись).
Раздел 27. Анимация.
Глава 27.1. Анимации с использованием ключевых кадров (keyframes).
Глава 27.2. Анимации с использованием свойства transition.
Глава 27.3. Примеры синтаксиса.
Глава 27.4. Увеличение производительности анимаций с использованием атрибута will-change.
Раздел 28. 2D-трансформация.
Глава 28.1. Поворот (Rotate).
Глава 28.2. Масштабирование (Scale).
Глава 28.3. Скос (Skew).
Глава 28.4. Множественные трансформации.
Глава 28.5. Перемещение (Translate).
Глава 28.6. Центр трансформации (Transform Origin).
Раздел 29. 3D-трансформация.
Глава 29.1. Форма стрелки компаса или иглы с использованием 3D-трансформаций.
Глава 29.2. 3D-эффект текста с тенью.
Глава 29.3. backface-visiЬility.
Глава 29.4. 3D-куб.
Раздел 30. Свойство Filter.
Глава 30.1. Размытие (Вlur).
Глава 30.2. Тень (Drop Shadow) (используйте box-shadow, если возможно).
Глава 30.3. Поворот оттенка (Hue Rotate).
Глава 30.4. Множественные значения фильтров.
Глава 30.5. Инверсия цвета (Invert Color).
Раздел 31. Стилизация курсора.
Глава 31.1. Изменение типа курсора.
Глава 31.2. pointer-events.
Глава 31.3. caret-color.
Раздел 32. box-shadow.
Глава 32.1. Тень только снизу с использованием псевдоэлемента.
Глава 32.2. Внешняя тень.
Глава 32.3. Внутренняя тень.
Глава 32.4. Множественные тени.
Раздел 33. Формы для плавающих элементов (Floats).
Глава 33.1. Свойство Shape Outside с базовой формой - circle().
Глава 33.2. Свойство Shape Margin.
Раздел 34. Стили списков.
Глава 34.1. Позиция маркера.
Глава 34.2. Удаление маркеров/ номеров.
Глава 34.3. Тип маркера или нумерации.
Раздел 35. Счетчики (Counters).
Глава 35.1. Применение стиля римских цифр к выводу счетчика.
Глава 35.2. Нумерация каждого элемента с использованием СSS-счетчика.
Глава 35.3. Реализация многоуровневой нумерации с использованием СSS-счетчиков.
Раздел 36. Функции.
Глава 36.1. Функция calc().
Глава 36.2. Функция attr().
Глава 36.3. Функция var().
Глава 36.4. Функция radial-gradient().
Глава 36.5. Функция linear-gradient().
Раздел 37. Пользовательские свойства (переменные).
Глава 37.1. Переменные для цвета.
Глава 37.2. Переменные для размеров.
Глава 37.3. Каскадирование переменных.
Глава 37.4. Допустимые и недопустимые имена.
Глава 37.5. Использование с медиазапросами.
Раздел 38. Фигуры из одного элемента.
Глава 38.1. Трапеция.
Глава 38.2. Треугольники.
Глава 38.3. Круги и эллипсы.
Глава 38.4. «Взрывы».
Глава 38.5. Квадрат.
Глава 38.6. Куб.
Глава 38.7. Пирамида.
Раздел 39. Колонки.
Глава 39.1. Простой пример (column-count).
Глава 39.2. Ширина колонки.
Раздел 40. Мноrоколоночная верстка.
Глава 40.1. Создание нескольких колонок.
Глава 40.2. Базовый пример.
Раздел 41. Верстка с использованием Inline-Block.
Глава 41.1. Выровненная по ширине навигационная панель.
Раздел 42. Наследование.
Глава 42.1. Автоматическое наследование.
Глава 42.2. Принудительное наследование.
Раздел 43. СSS-спрайты для изображений.
Глава 43.1. Базовая реализация.
Раздел 44. Обрезка и маскирование.
Глава 44.1. Обрезка и маскирование: обзор и различия.
Глава 44.2. Простая маска, которая делает изображение плавно прозрачным.
Глава 44.3. Обрезка (круr).
Глава 44.4. Обрезка (многоугольник).
Глава 44.5. Использование масок для вырезания отверстия в центре изображения.
Глава 44.6. Использование масок для создания изображений с неправильными формами.
Раздел 45. Фрагментация.
Глава 45.1. Разрыв страницы для печати (Media print page-break).
Раздел 46. CSS Object Model (CSSOM).
Глава 46.1. Добавление правила background-image через CSSOM.
Глава 46.2. Введение.
Раздел 47. Feature Queries.
Глава 47.1. Основное использование @supports.
Глава 47.2. Цепочка проверок возможностей.
Раздел 48. Контекст наложения (Stacking Context).
Глава 48.1. Контекст наложения.
Раздел 49. Контексты форматирования блоков.
Глава 49.1. Использование свойства overflow со значением, отличным от visiЫe.
Раздел 50. Вертикальное центрирование.
Глава 50.1. Центрирование с помощью display: tаЫе.
Глава 50.2. Центрирование с помощью FlexЬox.
Глава 50.3. Центрирование с помощью Transform.
Глава 50.4. Центрирование текста с помощью line-height.
Глава 50.5. Центрирование с помощью position: absolute.
Глава 50.6. Центрирование с помощью псевдоэлемента.
Раздел 51. Масштабирование и размещение объектов.
Глава 51.1. object-fit.
Раздел 52. Шаблоны проектирования CSS.
Глава 52.1. ВЕМ.
Раздел 53. Поддержка браузеров и префиксы.
Глава 53.1. Переходы (Transitions).
Глава 53.2. Трансформации (Transform).
Раздел 54. Нормализация стилей браузера.
Глава 54.1. normalize.css.
Глава 54.2. Подходы и примеры.
Раздел 55. Хаки для Internet Explorer.
Глава 55.1. Добавление поддержки Inline Block для IE6 и IE7.
Глава 55.2. Режим высокой контрастности в Internet Explorer 10 и выше.
Глава 55.3. Только для Internet Explorer 6 и Internet Explorer 7.
Глава 55.4. Только для Internet Explorer 8.
Раздел 56. Производительность.
Глава 56.1. Используйте transform и opacity, чтобы избежать срабатывания пересчета макета (layout).
Благодарности.
Купить .
Дата публикации:
Теги: учебник по веб-дизайну :: веб-дизайн :: CSS :: HTML :: селектор :: фон :: медиазапрос
Смотрите также учебники, книги и учебные материалы:
Предыдущие статьи:
