БЫСТРАЯ ШПАРГАЛКА

Справочник CSS

Все свойства и инструменты курса собраны на одной странице и разделены по урокам. Каждое свойство — отдельной строкой; важные значения показаны вертикально, с отдельным коротким примером.

СТРУКТУРА СПРАВОЧНИКА

Разделы по урокам

Все главы доступны сразу

01Основы CSSПравила CSS, селекторы, цвета и базовое оформление текста.02Box Model и размерыРазмеры элемента, внутреннее и внешнее пространство, рамки и скругления.03Внешний вид и дизайн-системаТипографика, фон, мягкие тени и повторно используемые значения.04Display и FlexboxРежим отображения элемента и размещение группы элементов вдоль одной оси.05CSS Grid — сеткиСвойства для управления строками, колонками и размещением элементов в двумерной сетке.06Адаптивный дизайнМедиазапросы и гибкие размеры для экранов разной ширины.07Position и управление слоямиПоложение элемента относительно потока документа, предка или окна браузера.08Интерактивность без JavaScriptПсевдоклассы состояний и визуальная обратная связь при действиях пользователя.09Работа с реальными интерфейсамиНовые свойства не вводятся: здесь комбинируются ранее изученные инструменты.10Архитектура CSS-проектаИменование, повторное использование и организация правил.11ИИ в VS Code: ускоряем разработкуНовых CSS-свойств нет. ИИ помогает анализировать и писать код, но результат нужно проверить.12Отладка, проверка и финальный проектПроверяем применение изученных правил, находим ошибки и завершаем сайт.

Урок 01 · Основы CSS

Правила CSS, селекторы, цвета и базовое оформление текста.

Свойство / понятие	Короткое напоминание	Примеры
`+` Соседний комбинатор. Выбирает только следующий элемент, который находится на том же уровне и сразу после указанного элемента.	Непосредственный следующий сосед	Следующий элемент после метки `.course-label + p { color: #526A89; }`
`color` Задаёт цвет текста элемента.	Именованный цвет HEX RGB RGBA / альфа-канал	Именованный цвет `color: royalblue;` HEX `color: #1769C2;` RGB `color: rgb(23, 105, 194);` RGBA / альфа-канал `color: rgba(23, 105, 194, 0.6);`
`background-color` Задаёт сплошной цвет фона элемента. Само содержимое и размеры не меняет.	Именованный цвет HEX RGB RGBA / полупрозрачный фон Прозрачный фон	Именованный цвет `background-color: white;` HEX `background-color: #EAF4FC;` RGB `background-color: rgb(234, 244, 252);` RGBA / полупрозрачный фон `background-color: rgba(234, 244, 252, 0.9);` Прозрачный фон `background-color: transparent;`
`font-family` Выбирает семейство шрифта. Браузер пробует список слева направо; имена с пробелами берут в кавычки.	Название шрифта Запасной шрифт Общее семейство без засечек Моноширинный шрифт для кода	Название шрифта `font-family: "Nunito";` Запасной шрифт `font-family: "Nunito", Arial, sans-serif;` Общее семейство без засечек `font-family: sans-serif;` Моноширинный шрифт для кода `font-family: Consolas, monospace;`
`@font-face · дополнительно` Регистрирует локальный файл шрифта. После регистрации его имя можно использовать в font-family.	Файл WOFF2	Файл WOFF2 `@font-face { font-family: "Nunito Local"; src: url("../fonts/nunito.woff2") format("woff2"); font-weight: 400; font-style: normal; }`
`font-size` Задаёт размер текста. Для em в font-size база — размер шрифта родителя; для rem — размер шрифта корневого элемента html.	CSS-пиксели От корневого размера От размера шрифта родителя Частый размер для небольшого заголовка	CSS-пиксели `font-size: 18px;` От корневого размера `font-size: 1rem;` От размера шрифта родителя `font-size: 1.2em;` Частый размер для небольшого заголовка `font-size: 1.25rem;`
`font-weight` Задаёт толщину начертания. Используйте значения, которые поддерживает подключённый шрифт.	Обычное начертание · 400 Среднее · 500 Полужирное · 600 Жирное · 700 Очень жирное · 800 Ключевые слова	Обычное начертание · 400 `font-weight: 400;` Среднее · 500 `font-weight: 500;` Полужирное · 600 `font-weight: 600;` Жирное · 700 `font-weight: 700;` Очень жирное · 800 `font-weight: 800;` Ключевые слова `font-weight: normal; font-weight: bold;`
`font-style` Выбирает обычное или наклонное начертание. Не управляет толщиной текста.	Обычное Курсивное	Обычное `font-style: normal;` Курсивное `font-style: italic;`
`text-align` Выравнивает текст внутри своей области, но не перемещает сам блок.	По левому краю По центру По правому краю По ширине · использовать осторожно	По левому краю `text-align: left;` По центру `text-align: center;` По правому краю `text-align: right;` По ширине · использовать осторожно `text-align: justify;`
`text-decoration` Добавляет или убирает декоративную линию у текста. Работает не только со ссылками.	Убрать линию Подчеркнуть Зачеркнуть Линия над текстом	Убрать линию `text-decoration: none;` Подчеркнуть `text-decoration: underline;` Зачеркнуть `text-decoration: line-through;` Линия над текстом `text-decoration: overline;`

Урок 02 · Box Model и размеры

Размеры элемента, внутреннее и внешнее пространство, рамки и скругления.

Свойство / понятие	Короткое напоминание	Примеры
`width` Задаёт ширину элемента. Процент обычно рассчитывается относительно содержащего блока.	Автоматическая ширина CSS-пиксели Доля ширины родителя От корневого размера шрифта	Автоматическая ширина `width: auto;` CSS-пиксели `width: 320px;` Доля ширины родителя `width: 100%;` От корневого размера шрифта `width: 20rem;`
`height` Задаёт высоту элемента. Фиксированную высоту используют, когда содержимое заранее предсказуемо.	По содержимому Фиксированная высота	По содержимому `height: auto;` Фиксированная высота `height: 180px;`
`min-width` Задаёт минимальную ширину, ниже которой элемент не должен сжиматься.	Не меньше 220 пикселей Разрешить сжатие до нуля во flex/grid-контейнере	Не меньше 220 пикселей `min-width: 220px;` Разрешить сжатие до нуля во flex/grid-контейнере `min-width: 0;`
`max-width` Ограничивает максимальную ширину элемента. Часто сочетается с width: 100%.	Не шире 760 пикселей Адаптироваться к ширине контейнера	Не шире 760 пикселей `max-width: 760px;` Адаптироваться к ширине контейнера `width: 100%; max-width: 760px;`
`min-height` Задаёт минимальную высоту, но позволяет элементу увеличиваться, если содержимого больше.	Минимум 180 пикселей Минимум на весь экран по высоте	Минимум 180 пикселей `min-height: 180px;` Минимум на весь экран по высоте `min-height: 100vh;`
`box-sizing` Определяет, что входит в заданные width и height. Margin не включается ни в один из режимов.	content-box · по умолчанию border-box · размеры включают padding и border Частое общее правило	content-box · по умолчанию `box-sizing: content-box;` border-box · размеры включают padding и border `box-sizing: border-box;` Частое общее правило `* { box-sizing: border-box; }`
`padding` Создаёт внутреннее пространство между содержимым и рамкой.	Одно значение · все стороны Два · вертикаль / горизонталь Три · верх / горизонталь / низ Четыре · верх / право / низ / лево	Одно значение · все стороны `padding: 16px;` Два · вертикаль / горизонталь `padding: 12px 20px;` Три · верх / горизонталь / низ `padding: 10px 20px 14px;` Четыре · верх / право / низ / лево `padding: 10px 16px 14px 20px;`
`margin` Создаёт внешнее расстояние вокруг элемента. Схема сокращённой записи такая же, как у padding.	Одно значение · все стороны Два · вертикаль / горизонталь Три · верх / горизонталь / низ Четыре · верх / право / низ / лево Центрировать блок с заданной шириной	Одно значение · все стороны `margin: 16px;` Два · вертикаль / горизонталь `margin: 12px 20px;` Три · верх / горизонталь / низ `margin: 10px 20px 14px;` Четыре · верх / право / низ / лево `margin: 10px 16px 14px 20px;` Центрировать блок с заданной шириной `width: 760px; margin: 0 auto;`
`border-width` Задаёт толщину рамки. Можно указать одно значение или отдельно четыре стороны.	Тонкая рамка Более заметная рамка Разная толщина сторон	Тонкая рамка `border-width: 1px;` Более заметная рамка `border-width: 2px;` Разная толщина сторон `border-width: 1px 2px 1px 2px;`
`border-style` Определяет вид линии рамки. Без border-style рамка обычно не отображается.	Сплошная Штриховая Точечная Без рамки	Сплошная `border-style: solid;` Штриховая `border-style: dashed;` Точечная `border-style: dotted;` Без рамки `border-style: none;`
`border-color` Задаёт цвет рамки. Можно использовать те же цветовые форматы, что и для color.	Именованный цвет HEX RGB RGBA	Именованный цвет `border-color: steelblue;` HEX `border-color: #D5E1EF;` RGB `border-color: rgb(213, 225, 239);` RGBA `border-color: rgba(23, 105, 194, 0.35);`
`border` Сокращённо задаёт толщину, стиль и цвет. Частый читаемый порядок — толщина, стиль, цвет; компоненты могут идти и в другом порядке.	Толщина + тип + цвет Штриховая рамка Убрать рамку	Толщина + тип + цвет `border: 1px solid #D5E1EF;` Штриховая рамка `border: 2px dashed #1769C2;` Убрать рамку `border: none;`
`border-radius` Скругляет углы. Одно, два, три или четыре значения задают разные комбинации углов по часовой стрелке.	Одно · все четыре угла Два · верхний левый/нижний правый и верхний правый/нижний левый Три · верхний левый / верхний правый-нижний левый / нижний правый Четыре · верхний левый / верхний правый / нижний правый / нижний левый Круг для квадратного элемента	Одно · все четыре угла `border-radius: 12px;` Два · верхний левый/нижний правый и верхний правый/нижний левый `border-radius: 18px 6px;` Три · верхний левый / верхний правый-нижний левый / нижний правый `border-radius: 18px 8px 3px;` Четыре · верхний левый / верхний правый / нижний правый / нижний левый `border-radius: 18px 12px 6px 2px;` Круг для квадратного элемента `border-radius: 50%;`

Урок 03 · Внешний вид и дизайн-система

Типографика, фон, мягкие тени и повторно используемые значения.

Свойство / понятие	Короткое напоминание	Примеры
`line-height` Задаёт высоту строки и расстояние между строками текста. Для обычного текста удобно начинать с числа без единиц.	Плотно · короткий заголовок Обычный текст Больше воздуха в длинном тексте	Плотно · короткий заголовок `line-height: 1.2;` Обычный текст `line-height: 1.5;` Больше воздуха в длинном тексте `line-height: 1.7;`
`letter-spacing` Меняет расстояние между буквами. Для обычного текста достаточно небольшого значения; большие интервалы подходят только коротким меткам.	Обычный интервал Небольшое увеличение Фиксированный интервал	Обычный интервал `letter-spacing: normal;` Небольшое увеличение `letter-spacing: 0.03em;` Фиксированный интервал `letter-spacing: 1px;`
`text-transform` Меняет отображаемый регистр, но не изменяет исходный текст в HTML.	Оставить как написано Все буквы заглавные Все буквы строчные Начало каждого слова с заглавной	Оставить как написано `text-transform: none;` Все буквы заглавные `text-transform: uppercase;` Все буквы строчные `text-transform: lowercase;` Начало каждого слова с заглавной `text-transform: capitalize;`
`background-image` Добавляет изображение или градиент в фон элемента.	Фоновое изображение Линейный градиент	Фоновое изображение `background-image: url("cover.jpg");` Линейный градиент `background-image: linear-gradient(135deg, #EAF4FC, #FFFFFF);`
`background-position` Задаёт положение фонового изображения внутри области элемента.	По центру Сверху по центру Снизу справа	По центру `background-position: center;` Сверху по центру `background-position: center top;` Снизу справа `background-position: right bottom;`
`background-size` Определяет размер фонового изображения.	Заполнить область · возможна обрезка Показать изображение целиком Задать конкретную ширину	Заполнить область · возможна обрезка `background-size: cover;` Показать изображение целиком `background-size: contain;` Задать конкретную ширину `background-size: 240px auto;`
`background-repeat` Определяет, повторяется ли фоновое изображение.	Не повторять Повторять по обеим осям Повторять горизонтально Повторять вертикально	Не повторять `background-repeat: no-repeat;` Повторять по обеим осям `background-repeat: repeat;` Повторять горизонтально `background-repeat: repeat-x;` Повторять вертикально `background-repeat: repeat-y;`
`background` Сокращённо задаёт несколько параметров фона. Положение и размер разделяют символом /.	Цвет фона Изображение по центру без повторения Градиентный фон	Цвет фона `background: #EAF4FC;` Изображение по центру без повторения `background: url("cover.jpg") center / cover no-repeat;` Градиентный фон `background: linear-gradient(135deg, #EAF4FC, #FFFFFF);`
`box-shadow` Добавляет внешнюю или внутреннюю тень. Тень не заменяет рамку и не занимает место в Box Model.	Без тени Едва заметная тень Внутренняя тень	Без тени `box-shadow: none;` Едва заметная тень `box-shadow: 0 2px 8px rgba(25, 63, 120, 0.06);` Внутренняя тень `box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);`
`font` Сокращённо задаёт несколько характеристик шрифта. Порядок: необязательные style/weight, затем обязательный size, необязательный line-height после / и обязательный family. Неуказанные компоненты сбрасываются к начальным значениям.	Размер и семейство Жирность + размер / высота строки + семейство Курсив + жирность + размер + семейство	Размер и семейство `font: 18px "Nunito", Arial, sans-serif;` Жирность + размер / высота строки + семейство `font: 700 1.5rem/1.2 "Nunito", Arial, sans-serif;` Курсив + жирность + размер + семейство `font: italic 600 18px/1.4 "Nunito", Arial, sans-serif;`
`--имя и var()` Пользовательская переменная хранит повторяющееся значение. var() подставляет значение переменной; вторым аргументом можно задать запасной вариант.	Объявить переменную Использовать переменную Запасное значение	Объявить переменную `--ks-primary: #1769C2;` Использовать переменную `color: var(--ks-primary);` Запасное значение `color: var(--ks-primary, blue);`
`:root` Выбирает корневой элемент документа. В нём удобно объявлять общие переменные, доступные во всём документе.	Глобальные переменные	Глобальные переменные `:root { --ks-primary: #1769C2; --ks-radius: 12px; }`

Урок 04 · Display и Flexbox

Режим отображения элемента и размещение группы элементов вдоль одной оси.

Свойство / понятие	Короткое напоминание	Примеры
`display` Определяет, как элемент участвует в раскладке. Здесь собраны основные режимы, которые используются в курсе.	block · начинает новую строку и обычно занимает доступную ширину inline · располагается в строке, width/height обычно не задают inline-block · остаётся в строке, но принимает размеры none · элемент не отображается и не занимает место flex · создаёт Flex-контейнер grid · создаёт Grid-контейнер	block · начинает новую строку и обычно занимает доступную ширину `display: block;` inline · располагается в строке, width/height обычно не задают `display: inline;` inline-block · остаётся в строке, но принимает размеры `display: inline-block;` none · элемент не отображается и не занимает место `display: none;` flex · создаёт Flex-контейнер `display: flex;` grid · создаёт Grid-контейнер `display: grid;`
`flex-direction` Задаёт направление главной оси Flex-контейнера.	По горизонтали По вертикали	По горизонтали `flex-direction: row;` По вертикали `flex-direction: column;`
`justify-content` Распределяет элементы вдоль главной оси Flex-контейнера.	В начале По центру В конце Свободное место между элементами Равномерное пространство вокруг элементов Одинаковое пространство между элементами и по краям	В начале `justify-content: flex-start;` По центру `justify-content: center;` В конце `justify-content: flex-end;` Свободное место между элементами `justify-content: space-between;` Равномерное пространство вокруг элементов `justify-content: space-around;` Одинаковое пространство между элементами и по краям `justify-content: space-evenly;`
`align-items` Выравнивает все элементы по поперечной оси Flex-контейнера.	Растянуть по поперечной оси В начале поперечной оси По центру поперечной оси В конце поперечной оси По базовой линии текста	Растянуть по поперечной оси `align-items: stretch;` В начале поперечной оси `align-items: flex-start;` По центру поперечной оси `align-items: center;` В конце поперечной оси `align-items: flex-end;` По базовой линии текста `align-items: baseline;`
`gap` Задаёт промежуток между элементами Flex или Grid без внешних margin.	Один промежуток Строки / колонки	Один промежуток `gap: 16px;` Строки / колонки `gap: 12px 20px;`
`flex-wrap` Разрешает элементам переноситься на следующую строку.	Не переносить Переносить	Не переносить `flex-wrap: nowrap;` Переносить `flex-wrap: wrap;`
`flex-grow` Определяет, может ли элемент забирать свободное место. Число показывает долю в распределении.	Не увеличивать за счёт свободного места Участвовать в распределении свободного места	Не увеличивать за счёт свободного места `flex-grow: 0;` Участвовать в распределении свободного места `flex-grow: 1;`
`flex-shrink` Определяет, насколько элемент может сжиматься при нехватке места.	Разрешить стандартное сжатие Запретить сжатие	Разрешить стандартное сжатие `flex-shrink: 1;` Запретить сжатие `flex-shrink: 0;`
`flex-basis` Задаёт исходный основной размер элемента до распределения свободного места.	Брать исходный размер из width/height Нулевая база Исходный размер 220 пикселей	Брать исходный размер из width/height `flex-basis: auto;` Нулевая база `flex-basis: 0;` Исходный размер 220 пикселей `flex-basis: 220px;`
`flex` Сокращает flex-grow, flex-shrink и flex-basis. Частый вариант flex: 1 — сокращение для flex-grow: 1, flex-shrink: 1 и flex-basis: 0%.	Равномерно занимать свободное место Не расти и не сжиматься, база 240px Только разрешить рост	Равномерно занимать свободное место `flex: 1;` Не расти и не сжиматься, база 240px `flex: 0 0 240px;` Только разрешить рост `flex: 1 1 auto;`
`align-self` Переопределяет выравнивание по поперечной оси для одного Flex/Grid-элемента. Работает на самом элементе.	Оставить значение контейнера По центру В начале В конце Растянуть	Оставить значение контейнера `align-self: auto;` По центру `align-self: center;` В начале `align-self: flex-start;` В конце `align-self: flex-end;` Растянуть `align-self: stretch;`

Урок 05 · CSS Grid — сетки

Свойства для управления строками, колонками и размещением элементов в двумерной сетке.

Свойство / понятие	Короткое напоминание	Примеры
`grid-template-columns` Задаёт количество и размеры колонок сетки.	Две колонки одинаковой доли Одна колонка вдвое шире другой Фиксированная и гибкая колонка	Две колонки одинаковой доли `grid-template-columns: 1fr 1fr;` Одна колонка вдвое шире другой `grid-template-columns: 1fr 2fr;` Фиксированная и гибкая колонка `grid-template-columns: 240px 1fr;`
`grid-template-rows` Задаёт размеры строк сетки.	Автоматическая первая строка и гибкая вторая Две строки по 120px	Автоматическая первая строка и гибкая вторая `grid-template-rows: auto 1fr;` Две строки по 120px `grid-template-rows: 120px 120px;`
`fr` Гибкая доля свободного пространства в Grid. Доли распределяются пропорционально числам.	Одна равная доля Соотношение 1 к 2	Одна равная доля `grid-template-columns: 1fr;` Соотношение 1 к 2 `grid-template-columns: 1fr 2fr;`
`repeat()` Повторяет указанный шаблон дорожек.	Три одинаковые колонки Две колонки по 220px	Три одинаковые колонки `grid-template-columns: repeat(3, 1fr);` Две колонки по 220px `grid-template-columns: repeat(2, 220px);`
`minmax()` Задаёт минимальную и максимальную границы размера дорожки.	Минимум 220px, максимум — оставшееся пространство Две адаптивные колонки	Минимум 220px, максимум — оставшееся пространство `grid-template-columns: minmax(220px, 1fr);` Две адаптивные колонки `grid-template-columns: repeat(2, minmax(220px, 1fr));`
`grid-column` Указывает, какие колонки занимает элемент.	Занять две колонки От линии 1 до линии 3	Занять две колонки `grid-column: span 2;` От линии 1 до линии 3 `grid-column: 1 / 3;`
`grid-row` Указывает, какие строки занимает элемент.	Занять две строки От линии 1 до линии 3	Занять две строки `grid-row: span 2;` От линии 1 до линии 3 `grid-row: 1 / 3;`
`auto-fit` В repeat() подбирает количество повторяемых колонок под доступное место. Часто используется вместе с minmax().	Гибкое число колонок	Гибкое число колонок `grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));`
`justify-items` Выравнивает элементы внутри ячеек по горизонтальной оси в обычном горизонтальном письме.	В начале По центру Растянуть	В начале `justify-items: start;` По центру `justify-items: center;` Растянуть `justify-items: stretch;`
`align-items` Выравнивает элементы внутри ячеек по вертикальной оси в обычном горизонтальном письме.	В начале По центру Растянуть	В начале `align-items: start;` По центру `align-items: center;` Растянуть `align-items: stretch;`

Урок 06 · Адаптивный дизайн

Медиазапросы и гибкие размеры для экранов разной ширины.

Свойство / понятие	Короткое напоминание	Примеры
`@media` Применяет набор CSS-правил только при выполнении условия. При mobile-first базовые правила задают для узкого экрана, затем добавляют min-width.	Планшет и шире Узкий экран	Планшет и шире `@media (min-width: 768px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }` Узкий экран `@media (max-width: 640px) { .course-grid { grid-template-columns: 1fr; } }`
`min-width в @media` Условие срабатывает, когда viewport не уже указанного значения.	От 768px и шире	От 768px и шире `@media (min-width: 768px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }`
`max-width в @media` Условие срабатывает, когда viewport не шире указанного значения. Это условие экрана, а не ограничение ширины самого элемента.	До 640px	До 640px `@media (max-width: 640px) { .course-grid { grid-template-columns: 1fr; } }`
`vw` 1vw равен 1% ширины viewport. Используйте осторожно для размеров, которые зависят от ширины окна.	Половина ширины окна Гибкий заголовок с ограничениями	Половина ширины окна `width: 50vw;` Гибкий заголовок с ограничениями `font-size: clamp(28px, 4vw, 48px);`
`vh` 1vh равен 1% высоты viewport. Используется для размеров, связанных с высотой окна.	Минимальная высота секции	Минимальная высота секции `min-height: 100vh;`
`clamp()` Ограничивает значение снизу и сверху, сохраняя гибкое предпочтительное значение. Порядок: минимум, предпочтительное значение, максимум.	Размер заголовка от 28 до 48px Отступ от 16 до 32px	Размер заголовка от 28 до 48px `font-size: clamp(28px, 4vw, 48px);` Отступ от 16 до 32px `padding: clamp(16px, 3vw, 32px);`
`min()` Возвращает наименьшее из переданных значений. Удобно ограничивать размер, сравнивая относительную и фиксированную величины.	Не шире 760px и не шире доступного пространства	Не шире 760px и не шире доступного пространства `width: min(calc(100% - 32px), 760px);`
`max()` Возвращает наибольшее из переданных значений. Полезно задавать минимально достаточный размер.	Не меньше 24px или 3vw	Не меньше 24px или 3vw `padding: max(24px, 3vw);`
`Адаптивное изображение` Сохраняет пропорции картинки и не позволяет ей выходить за ширину родителя.	Не шире родителя и исходная высота	Не шире родителя и исходная высота `img { max-width: 100%; height: auto; }`

Урок 07 · Position и управление слоями

Положение элемента относительно потока документа, предка или окна браузера.

Свойство / понятие	Короткое напоминание	Примеры
`position` Выбирает режим позиционирования элемента.	static · обычный поток документа relative · сохраняет место, но может смещаться absolute · исключается из потока и позиционируется относительно подходящего предка fixed · позиционируется относительно окна просмотра sticky · ведёт себя обычно, пока не достигает точки закрепления при прокрутке	static · обычный поток документа `position: static;` relative · сохраняет место, но может смещаться `position: relative;` absolute · исключается из потока и позиционируется относительно подходящего предка `position: absolute;` fixed · позиционируется относительно окна просмотра `position: fixed;` sticky · ведёт себя обычно, пока не достигает точки закрепления при прокрутке `position: sticky; top: 0;`
`top` Задаёт смещение от верхней стороны для позиционируемого элемента.	Сдвиг на 12px от верха Прилипание к верхней границе окна	Сдвиг на 12px от верха `top: 12px;` Прилипание к верхней границе окна `position: sticky; top: 0;`
`right` Задаёт смещение от правой стороны.	Отступ справа 12px	Отступ справа 12px `right: 12px;`
`bottom` Задаёт смещение от нижней стороны.	Отступ снизу 20px	Отступ снизу 20px `bottom: 20px;`
`left` Задаёт смещение от левой стороны.	Отступ слева 16px	Отступ слева 16px `left: 16px;`
`z-index` Управляет порядком наложения внутри контекста наложения. Большое значение не всегда перекрывает элементы из другого контекста.	Обычный уровень Более высокий уровень в том же контексте	Обычный уровень `z-index: 1;` Более высокий уровень в том же контексте `z-index: 10;`

Урок 08 · Интерактивность без JavaScript

Псевдоклассы состояний и визуальная обратная связь при действиях пользователя.

Свойство / понятие	Короткое напоминание	Примеры
`:hover` Выбирает элемент, когда указатель находится над ним. Не используйте hover как единственный способ показать важное действие.	Кнопка при наведении	Кнопка при наведении `.button:hover { background-color: #1457A5; }`
`:active` Выбирает элемент в момент активации, например пока пользователь нажимает кнопку.	Кнопка во время нажатия	Кнопка во время нажатия `.button:active { transform: translateY(1px); }`
`:focus` Выбирает элемент, который получил фокус, например поле формы.	Поле при фокусе	Поле при фокусе `input:focus { outline: 2px solid #1769C2; }`
`:focus-visible` Показывает индикатор фокуса, когда браузер считает его уместным, обычно при клавиатурной навигации.	Видимый клавиатурный фокус	Видимый клавиатурный фокус `a:focus-visible { outline: 2px solid #1769C2; outline-offset: 3px; }`
`:disabled` Выбирает отключённый элемент формы.	Отключённая кнопка	Отключённая кнопка `.button:disabled { opacity: 0.5; cursor: not-allowed; }`
`:checked` Выбирает отмеченный checkbox или radio.	Отмеченный checkbox	Отмеченный checkbox `input:checked + span { color: #1769C2; font-weight: 700; }`
`cursor` Меняет вид указателя над элементом.	Рука над интерактивным элементом Текстовый курсор Действие недоступно	Рука над интерактивным элементом `cursor: pointer;` Текстовый курсор `cursor: text;` Действие недоступно `cursor: not-allowed;`
`opacity` Задаёт прозрачность всего элемента вместе с содержимым. Значение 0 — невидим, 1 — полностью непрозрачен.	Полностью непрозрачный Половина прозрачности Невидимый элемент	Полностью непрозрачный `opacity: 1;` Половина прозрачности `opacity: 0.5;` Невидимый элемент `opacity: 0;`
`outline` Рисует контур вокруг элемента и не занимает место в Box Model.	Контур фокуса	Контур фокуса `outline: 2px solid #1769C2;`
`outline-offset` Задаёт расстояние между элементом и его контуром.	Отодвинуть контур на 3px	Отодвинуть контур на 3px `outline-offset: 3px;`
`transition` Плавно меняет значения между состояниями. Указывайте конкретные свойства и длительность, а не применяйте all без необходимости.	Плавно изменить фон Фон и небольшое смещение	Плавно изменить фон `transition: background-color 0.2s ease;` Фон и небольшое смещение `transition: background-color 0.2s ease, transform 0.2s ease;`
`transform` Визуально изменяет положение, масштаб или поворот элемента. Само по себе не меняет место элемента в обычном потоке.	Немного поднять элемент Увеличить элемент	Немного поднять элемент `transform: translateY(-2px);` Увеличить элемент `transform: scale(1.03);`

Урок 09 · Работа с реальными интерфейсами

Новые свойства не вводятся: здесь комбинируются ранее изученные инструменты.

Новых CSS-свойств в этом уроке нет. Это напоминание, какие уже изученные группы обычно сочетают в интерфейсе.

Карточка

Размеры и Box Model

widthpaddingborderborder-radius

Сетка материалов

Двумерная компоновка

display: gridgrid-template-columnsminmax()

Урок 10 · Архитектура CSS-проекта

Именование, повторное использование и организация правил.

В этом уроке новые CSS-свойства не вводятся. Это краткие напоминания по именованию и повторному использованию стилей.

Понятие	Короткое напоминание	Пример
`BEM: блок` Самостоятельный компонент.	Имя описывает назначение элемента.	`.course-card {}`
`BEM: элемент` Часть блока.	Двойное подчёркивание отделяет часть от блока.	`.course-card__title {}`
`BEM: модификатор` Вариант блока или элемента.	Двойной дефис обозначает модификатор.	`.course-card--featured {}`

Урок 11 · ИИ в VS Code: ускоряем разработку

Новых CSS-свойств нет. ИИ помогает анализировать и писать код, но результат нужно проверить.

Новых CSS-свойств нет. Этот раздел помогает правильно формулировать задачи для ИИ и проверять предложенный код.

Что указать в запросе

Какой компонент нужен.

Какой результат должен быть виден.

Какие свойства уже изучены и разрешены.

Что нельзя менять в проекте.

«Измени только карточку курса. Используй свойства из пройденных уроков. Не меняй HTML и общие стили. Объясни каждое изменение».

Урок 12 · Отладка, проверка и финальный проект

Проверяем применение изученных правил, находим ошибки и завершаем сайт.

Новых CSS-свойств нет. В этом уроке проверяется уже изученный CSS и поиск причин, по которым результат отличается от ожидаемого.

Styles

Показывает совпавшие правила. Перечёркнутое объявление обычно проиграло каскад или не подходит текущему состоянию.

Computed

Показывает итоговые вычисленные значения, например font-size, width, margin и padding.

Box Model

Показывает content, padding, border и margin выбранного элемента.

Проверяйте страницу на ширинах 1440, 768, 390 и 320 пикселей, а также проверьте загрузку шрифтов и состояний фокуса.

Как пользоваться справочником

Это краткое напоминание, а не новая теория. Найдите урок и свойство, затем выберите нужное значение и посмотрите отдельный пример. Если нужно понять, почему свойство работает именно так, вернитесь к соответствующему объяснению в уроке.