Это второй раздел курса CSS для начинающих - переходим от голой HTML-разметки к оформлению страницы. Здесь ты научишься управлять цветом и отступами, расставлять элементы с помощью Flexbox и CSS Grid и делать вёрстку одинаково удобной и на телефоне, и на мониторе. Уроки идут по порядку: от первого подключённого файла стилей до гибкой адаптивной сетки в конце раздела.
1. Введение в CSS
3 статьиПервая группа объясняет, что такое CSS и как подключить его к HTML-странице тремя разными способами.
Что такое CSS и как он работает
Зачем нужен CSS и как браузер применяет стили к разметке
Три способа подключения CSS: инлайн, внутренний и внешний
style-атрибут, тег style и внешний файл - когда что использовать
Комментарии в CSS: как закомментировать код
Синтаксис /* */, почему не работает // и когда пригодятся пояснения в стилях
2. Селекторы
8 статейЗдесь разбираются все основные виды CSS-селекторов - от простого тега до сложных комбинаторов и псевдоклассов - и то, как браузер выбирает нужное правило при конфликте.
Селекторы типа, класса и id - три базовых способа выбора элементов
С чего начинается любой CSS-селектор
Групповые и универсальный селекторы
Как применить одни стили сразу к нескольким элементам
Селекторы по атрибуту: [attr] и [attr=value]
Выбираем элементы по наличию или значению атрибута
Комбинаторы: потомок, дочерний, соседние элементы
Пробел, >, + и ~ - четыре способа связать селекторы
Псевдоклассы: :hover, :focus, :nth-child и другие
Состояния и позиция элемента без единого класса в разметке
Псевдоэлементы ::before и ::after
Добавляем контент через CSS, не трогая HTML
Каскад и специфичность: что побеждает в CSS
Почему одно правило перебивает другое
Наследование: какие свойства передаются от родителя
Что наследуется автоматически, а что нужно задавать явно
3. Текст
6 статейЭта группа посвящена оформлению текста: цвет, шрифты, размер, начертание, выравнивание и подчёркивание.
Цвет текста: свойство color
Именованные цвета, HEX и RGB для текста
Семейство шрифтов: font-family
Как задать шрифт и почему нужен запасной вариант
Подключение своих шрифтов: @font-face и Google Fonts
Как добавить шрифт, которого нет на компьютере пользователя
Размер шрифта и единицы измерения: px, em, rem
Абсолютные и относительные единицы для font-size
Насыщенность шрифта: font-weight
Жирность текста числом и ключевым словом
Выравнивание и оформление текста: text-align и text-decoration
Выравнивание по горизонтали, подчёркивание и зачёркивание
4. Цвета и фоны
3 статьиЗдесь показано, как задать цвет и фон элемента - от простой заливки до градиента и фоновой картинки.
Цвет фона: background-color
Заливка фона элемента одним свойством
Форматы цвета: HEX, RGB и RGBA
Три способа записать один и тот же цвет - и когда нужна прозрачность
Градиенты и фоновые изображения: background-image, linear-gradient
Фоновая картинка, повтор, позиционирование и линейный градиент
5. Блочная модель
9 статейЭта группа - основа CSS-вёрстки: как устроен любой элемент изнутри, от отступов и границ до размеров, скруглений и теней.
Что такое блочная модель CSS
Контент, padding, border и margin - как они складываются в размер элемента
Внутренние отступы: padding
Отступ между содержимым и границей элемента
Внешние отступы: margin
Расстояние между элементами и схлопывание отступов
Границы: border
Толщина, стиль и цвет границы одним свойством
Ширина и высота: width и height
Как задать размер элемента и что такое max-width
Box-sizing: content-box и border-box
Почему добавление padding иногда ломает вёрстку
Скругление углов: border-radius
От слегка скруглённых кнопок до идеального круга
Overflow: что делать с содержимым, которое не помещается
visible, hidden, scroll и auto на практике
Тени: box-shadow
Тень элемента, несколько теней и внутренняя тень
6. Flexbox
5 статейFlexbox - главный инструмент современной вёрстки для расположения элементов в ряд или столбец без float и лишних вычислений.
Что такое Flexbox и зачем он нужен
Гибкое расположение элементов вместо float и вычисления отступов
Направление: flex-direction
Строка или столбец - куда выстраиваются flex-элементы
Выравнивание по главной оси: justify-content
Распределение элементов вдоль направления flex-контейнера
Выравнивание по поперечной оси: align-items
Выравнивание элементов поперёк направления контейнера
Идеальное центрирование элемента на CSS
Классическая задача, которую flexbox решает в две строки
7. CSS Grid
3 статьиCSS Grid добавляет вторую ось раскладки - здесь показано, как построить двумерную сетку и разместить элементы в её ячейках.
8. Позиционирование
7 статейЭта группа разбирает свойство position во всех значениях - от обычного потока до фиксированных и липких элементов - и порядок наложения через z-index.
Блочные и строчные элементы: display block, inline, inline-block
Как display определяет поведение элемента на странице
Основы позиционирования: свойство position
Обзор всех значений position перед разбором каждого
Относительное позиционирование
Сдвиг элемента от его обычного места без выхода из потока
Абсолютное позиционирование
Элемент вне потока и его ближайший позиционированный родитель
Фиксированное позиционирование
Элемент, который остаётся на месте при прокрутке страницы
«Прилипающее» позиционирование: position sticky
Гибрид relative и fixed для липких заголовков и меню
Z-index и порядок наложения
Какой элемент окажется сверху, если они перекрываются
9. Адаптивный дизайн
6 статейЗдесь вёрстка учится подстраиваться под экран - от метатега viewport до медиа-запросов и гибких изображений.
Что такое адаптивный дизайн
Зачем страница должна выглядеть по-разному на разных экранах
Метатег viewport
Без этой строки в head мобильная адаптация не работает
Гибкие макеты: относительные единицы вместо px
Проценты и относительные единицы вместо фиксированных пикселей
Единицы измерения viewport: vw, vh, vmin, vmax
Размеры, которые считаются от ширины и высоты экрана
Основы media queries
Разные стили для разных размеров экрана в одном файле
Гибкие изображения
Как картинка не вылезает за пределы контейнера на любом экране
10. Переменные и вычисления
2 статьиЗаключительная техническая группа показывает, как CSS-переменные и функция calc() избавляют от повторов и ручных вычислений.
11. Итоги курса
1 статьяПоследний урок курса собирает пройденные темы в единый чек-лист перед переходом к самостоятельной адаптивной вёрстке.