Курс CSS · оформление веб-страниц с нуля

1

МОДУЛЬ 1

Знакомство с CSS

Что такое CSS и зачем он нужен

Страница, написанная только на HTML, выглядит как чёрный текст в простом виде. CSS добавляет этой странице цвет, красивый шрифт и расположение. Ниже слева — код CSS, справа — результат. Измените значение color и посмотрите, как сразу поменяется цвет заголовка.

ЗаданиеЗадайте заголовку (h1) цвет: в style.css напишите color: #2f6bed;. Результат сразу увидите в окне справа.

HTML (скелет)<h1>Привет</h1>

Говорит, что есть: заголовок, текст, картинка. Без оформления, в простом виде.

CSS (облик)h1 { color: blue }

Говорит, как это выглядит: цвет, размер, расположение. Оживляет страницу.

Главная мысль: CSS — это слой оформления для HTML. Один и тот же HTML можно с разным CSS показать совершенно по-другому.

3 способа подключить CSS

CSS можно добавить к HTML-странице тремя разными путями. Лучший — способ 3: отдельный файл .css. Потому что один файл работает на весь сайт и код остаётся чистым. Именно так устроен и редактор этого курса: CSS вы пишете во вкладке style.css.

/* Способ 1: inline (внутри элемента) */ <h1 style="color: blue">Привет</h1> /* Способ 2: внутренний (тег style в head) */ <style> h1 { color: blue } </style> /* Способ 3: внешний файл (лучший) */ <link rel="stylesheet" href="style.css">

ЗаданиеЗадайте абзацу (p) размер шрифта: напишите font-size: 20px;. Проверьте сами, как работает внешний CSS.

Совет: На практике почти всегда используют внешний файл (style.css). Способ inline — только для мелких, разовых случаев.

Синтаксис: селектор, свойство, значение

Каждое правило CSS имеет одинаковое строение. Сначала селектор (кого оформляем), затем в фигурных скобках пары свойство: значение. В конце каждой пары ставится точка с запятой (;).

селектор { свойство: значение; } = основная форма правила CSS

ЗаданиеЗадайте заголовку (h1) цвет (color) и сделайте абзац (p) крупнее (font-size: 18px или больше).

Упражнения

Теперь попробуйте самостоятельно. В каждом упражнении напишите одно правило CSS в style.css. Если верно, кружок подтвердится зелёной галочкой.

Тест модуля 1

Чтобы завершить модуль, дайте не менее 4/5 правильных ответов.

2

МОДУЛЬ 2

Селекторы и специфичность

Селекторы элемента, класса и id

Селектор говорит CSS, какой элемент оформлять. Есть три основных типа: по имени элемента (без знака), по классу (с точкой .) и по id (с решёткой #). Класс можно задать нескольким элементам, а id должен быть на странице только один.

Три основных селектора: элемент (без знака), .class (точка), #id (решётка)

ЗаданиеС помощью селектора класса сделайте текст .sarlavha синим: .sarlavha { color: #2f6bed; }. Оба элемента .sarlavha изменятся одновременно.

Главная мысль: класс можно задать многим элементам (переиспользуется), а id — только одному элементу на странице.

Комбинаторы: группировка, потомок, ребёнок, сосед

Селекторы можно объединять, чтобы точнее нацеливаться. Например, чтобы выбрать элемент только внутри другого элемента, используется селектор потомка (пробел).

h1, h2 /* группировка: и h1, и h2 */ div p /* потомок: любой p внутри div */ div > p /* ребёнок: p — прямой потомок div */ h1 + p /* соседний: первый p сразу после h1 */ h1 ~ p /* сиблинги: все p после h1 */

ЗаданиеСделайте синим только абзац внутри .quti. Для этого используйте селектор потомка: .quti p. Абзац снаружи трогать не нужно.

Псевдоклассы: состояние и порядок

Псевдокласс нацеливается на состояние или порядок элемента. Они пишутся с двоеточием (:). Самые используемые:

a:hover /* когда курсор наведён */ li:first-child /* первый дочерний элемент */ li:last-child /* последний дочерний элемент */ li:nth-child(2) /* 2-й дочерний элемент */ li:nth-child(even) /* с чётным номером */ p:not(.tashqi) /* все p, кроме .tashqi */

ЗаданиеС помощью псевдокласса сделайте первый элемент списка жирным: li:first-child { font-weight: bold; }.

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

Псевдоэлементы: ::before и ::after

С помощью псевдоэлемента можно добавить дополнительную часть перед элементом или после него: ::before (перед) и ::after (после). Они пишутся с двойным двоеточием (::) и требуют свойства content.

::before добавляет часть перед элементом, ::after — после

ЗаданиеВыведите какой-нибудь текст перед именем. Используйте ::before и content, например: content: "Привет, ".

Специфичность, каскад и наследование

Иногда к одному элементу подходит несколько правил. Какое из них победит? Это решает специфичность: селектор id сильнее класса, а класс сильнее элемента. Inline-стиль (style="") сильнее всех.

Вес специфичности: element < class < id < inline

ЗаданиеПравило специфичности: селектор id самый сильный. Сделайте #maxsus синим: #maxsus { color: #2f6bed; }. Он перебьёт и элемент, и класс.

КАСКАДпоследнее правило

Если специфичность одинакова, побеждает правило, стоящее в файле ниже (последнее).

НАСЛЕДОВАНИЕнаследуется

Некоторые свойства (color, font) переходят от родителя к детям. А border, padding — не переходят.

Осторожно: !important принудительно перебивает любое правило. Используйте его как можно реже, потому что потом сложнее исправлять.

Упражнения

Попробуйте селекторы самостоятельно. В каждом упражнении выберите правильный селектор и напишите CSS.

Тест модуля 2

Чтобы завершить модуль, дайте не менее 5/6 правильных ответов.

3

МОДУЛЬ 3

Цвета и фон

Форматы цвета и прозрачность

В CSS цвет можно записать несколькими способами. Цвета экрана получаются из смеси красного, зелёного и синего лучей (RGB). Приведённые ниже форматы могут давать одинаковый результат, различается лишь запись.

RGB: красный, зелёный и синий лучи складываются и образуют другие цвета

color: tomato; /* именованный цвет */ color: #2f6bed; /* hex: # + 6 символов */ color: rgb(47, 107, 237); /* красный, зелёный, синий: 0-255 */ color: rgba(47,107,237,.5); /* + прозрачность: 0-1 */ color: hsl(217, 85%, 56%); /* тон, насыщенность, светлота */

ЗаданиеЗадайте цвет в формате hex: .p2 { color: #2f6bed; }. Hex — это шестизначный код цвета, начинающийся с #.

Совет: последнее число в rgba и hsla (от 0 до 1) задаёт прозрачность. 1 = полностью, 0 = невидимо.

background-color и background-image

Если color задаёт цвет текста, то background-color закрашивает задний фон элемента. Чтобы вместо фона поставить картинку, используется background-image.

ЗаданиеЗадайте блоку (.quti) какой-нибудь цвет фона. Используйте background или background-color (например: background: #2f6bed).

Размер и положение фона

Можно настроить, как фоновая картинка располагается в блоке: background-size (размер), background-position (положение), background-repeat (повторение). Два важных размера:

cover

Картинка заполняет весь блок. При необходимости края обрезаются. Пустого места не остаётся.

contain

Вся картинка помещается внутрь. Не обрезается, но вокруг может остаться пустое место.

ЗаданиеПусть картинка полностью помещается в блок: задайте .contain свойство background-size: contain;. Посмотрите разницу с cover.

Примечание: background-repeat: no-repeat запрещает повторение картинки. Картинка в этом примере загружается из интернета.

Градиенты: плавные переходы цвета

Градиент — это плавный переход между двумя или более цветами. Он считается картинкой, поэтому задаётся в background. Есть три основных вида:

linear-gradient(to right, red, blue) /* линейный */ radial-gradient(circle, red, blue) /* радиальный */ conic-gradient(red, blue, red) /* конический */

ЗаданиеЗадайте третьему блоку (.g3) свой градиентный фон. Например: background: linear-gradient(to right, #16a34a, #22c55e).

Полезно знать: conic-gradient вращает цвета по кругу, удобно для диаграмм и часов.

Сокращение background и несколько слоёв

Сокращение background позволяет записать все настройки фона в одной строке. Кроме того, можно наложить несколько слоёв фона друг на друга, разделив их запятой. Слой, написанный выше, будет верхним.

ЗаданиеЗадайте блоку (.karta) градиентный фон: background: linear-gradient(120deg, #2f6bed, #1d4ed8);. Два цвета плавно переходят друг в друга.

SHORTHANDbackground: ...

Записывает цвет, картинку, размер, положение в одну строку. Сокращает код.

НЕСКОЛЬКО СЛОЁВfon1, fon2

Слои, разделённые запятой. Например, полупрозрачное градиентное покрытие поверх картинки.

Упражнения

Попробуйте цвета и фон самостоятельно. Используйте разные форматы цвета и градиент.

Тест модуля 3

Чтобы завершить модуль, дайте не менее 5/6 правильных ответов.

4

МОДУЛЬ 4

Текст и типографика

font-family: семейства шрифтов

font-family задаёт, каким шрифтом написан текст. Шрифты делятся на три больших семейства, у каждого свой вид и назначение.

serif (у букв есть засечки) · sans-serif (без засечек, ровные) · monospace (буквы одной ширины)

font-family: Georgia, 'Times New Roman', serif; /* семейство serif */ font-family: Arial, Helvetica, sans-serif; /* sans-serif */ font-family: 'Courier New', monospace; /* моноширинный */

ЗаданиеЗадайте третьему абзацу (.mono) моноширинный шрифт: font-family: 'Courier New', monospace;. Все буквы будут одной ширины.

Совет: это стек шрифтов. Если первый шрифт не найден, браузер берёт следующий. В конце всегда пишите общее семейство (serif или sans-serif).

font-size и единицы измерения

font-size задаёт размер текста. Есть несколько единиц: px — точные пиксели, em — относительно шрифта родителя, rem — относительно шрифта корня (html), % — тоже относительная.

font-size: 16px; /* точные пиксели (абсолютные) */ font-size: 1.5em; /* в 1.5 раза от шрифта родителя */ font-size: 1.5rem; /* в 1.5 раза от шрифта html */ font-size: 120%; /* 120% от шрифта родителя */

ЗаданиеСделайте font-size текста (.matn) равным 20px или больше.

Жирность, курсив и межстрочный интервал

font-weight задаёт жирность (normal/bold или от 100 до 900), font-style: italic делает текст курсивным, а line-height управляет расстоянием между строками.

font-weight: bold; /* или 700; обычный = 400 */ font-style: italic; /* наклонный (курсивный) текст */ line-height: 1.6; /* межстрочный интервал */

ЗаданиеСделайте второй абзац (.b) жирным: font-weight: bold;.

Совет: безразмерное число вроде line-height: 1.6 умножается на размер шрифта и даёт самый удобный для чтения результат.

Выравнивание и оформление текста

Текст можно оформить по-разному: text-align — выравнивание (влево/по центру/вправо/по ширине), text-decoration — подчёркивание, text-transform — заглавные или строчные буквы, letter-spacing — расстояние между буквами.

text-align: center; /* left / right / center / justify */ text-decoration: underline; /* подчёркивание; none = убирает */ text-transform: uppercase; /* ЗАГЛАВНЫЕ буквы; lowercase = строчные */ letter-spacing: 2px; /* раздвигает буквы */

ЗаданиеВыровняйте заголовок (h2) по центру: text-align: center.

text-shadow и веб-шрифты

text-shadow добавляет тень тексту: пишется в порядке горизонталь вертикаль размытие цвет. Кроме того, к странице можно подключить готовые шрифты из сервисов вроде Google Fonts.

ЗаданиеЗадайте заголовку (.soya) тень текста: text-shadow: 2px 2px 0 #bcd0f7;.

/* подключение готового шрифта, например Google Fonts (в начале CSS) */ @import url('https://fonts.googleapis.com/css2?family=Roboto'); font-family: 'Roboto', sans-serif; /* теперь работает этот шрифт */

text-shadow2px 2px 4px #333

Тень делает текст заметнее и объёмнее. Можно задать и несколько теней через запятую.

ВЕБ-ШРИФТ@import или <link>

Готовые шрифты придают странице особый вид. Помимо системных шрифтов вы подключаете любой нужный.

Упражнения

Попробуйте текст и типографику самостоятельно. Меняйте размер, жирность и выравнивание.

Тест модуля 4

Чтобы завершить модуль, дайте не менее 5/6 правильных ответов.

5

МОДУЛЬ 5

Box Model

Box Model: каждый элемент — это блок

В CSS каждый элемент похож на блок из четырёх слоёв. Изнутри наружу: content (текст), padding (внутренний отступ), border (граница) и margin (внешний отступ). Понимание этого строения — основа расположения.

content (текст) → padding (внутренний отступ) → border (граница) → margin (внешний отступ)

ЗаданиеЗадайте блоку (.quti) границу: border: 3px solid #2f6bed;. Это внешняя линия блочной модели.

Запомните: padding создаёт отступ внутри блока, а margin — снаружи блока. Многие путаницы возникают именно из-за смешения этих двух.

padding: внутренний отступ

padding создаёт отступ между текстом (content) и границей (border). Его можно задать одним или несколькими значениями.

padding: 20px; /* со всех 4 сторон одинаково */ padding: 10px 20px; /* сверху-снизу 10, слева-справа 20 */ padding: 5px 10px 15px 20px; /* сверху справа снизу слева */ padding-left: 12px; /* только слева */

ЗаданиеЗадайте блоку (.quti) padding в 16px или больше.

border и border-radius

border рисует блоку границу и состоит из трёх частей: толщина стиль цвет. А border-radius скругляет углы.

border: 2px solid #2f6bed; /* толщина стиль цвет */ border-radius: 12px; /* скругляет углы */ border-bottom: 3px dashed #999; /* только нижняя граница */ border-radius: 50%; /* превращает квадрат в круг */

ЗаданиеЗадайте второму блоку (.b) скруглённые углы: border-radius: 14px;.

Стили: solid (сплошная), dashed (штриховая), dotted (точечная). Если границы нет, пишут none.

margin и центрирование

margin создаёт отступ снаружи блока, между элементами. Самый полезный приём: разместить блок с заданной шириной по горизонтали по центру с помощью margin: 0 auto.

margin: 24px; /* внешний отступ со всех 4 сторон */ margin: 0 auto; /* по центру горизонтали (нужен width) */ margin-bottom: 16px; /* только нижний отступ */

ЗаданиеРазместите блок (.quti) по центру горизонтали: margin: 0 auto.

box-sizing: способ измерения блока

По умолчанию width измеряет только content, а padding и border добавляются как дополнительная ширина (content-box). А border-box включает padding и border внутрь width, поэтому размер остаётся точным.

box-sizing: content-box; /* default: width = только content */ box-sizing: border-box; /* width = content + padding + border */ * { box-sizing: border-box; } /* современный стандарт */

ЗаданиеЗадайте первому блоку (.cb) box-sizing: content-box;. Тогда граница и padding добавятся снаружи ширины (общая ширина 228px). А .bb с border-box — ровно 180px.

content-boxwidth = 180px

Общая ширина = 180 + padding + border. То есть реальная ширина получается больше указанной. Это вносит путаницу.

border-boxобщая ширина = 180px

Padding и border считаются внутри width, размер остаётся точным. Поэтому многие проекты делают это стандартом.

Упражнения

Попробуйте box model самостоятельно. Меняйте padding, границу и скруглённые углы.

Тест модуля 5

Чтобы завершить модуль, дайте не менее 5/6 правильных ответов.

6

МОДУЛЬ 6

Display и расположение

display: как располагаются элементы

display задаёт, как элемент течёт по странице. block начинается с новой строки и занимает всю ширину, inline располагается в ряд, как текст, inline-block объединяет оба варианта, а none полностью скрывает элемент.

block: каждый с новой строки, занимает всю ширину · inline: в ряд, как текст

display: block; /* новая строка, вся ширина (div, p) */ display: inline; /* в ряд, ширина не задаётся (span, a) */ display: inline-block; /* в ряд, но ширина/высота задаются */ display: none; /* полностью скрывает (и места нет) */

ЗаданиеРазместите теги (.tag) в ряд: display: inline-block;. Элементы span встанут в одну строку и примут размеры.

Разница: display: none убирает элемент вместе с его местом, а visibility: hidden скрывает, но сохраняет место.

position: виды позиционирования

position управляет тем, где стоит элемент. static — обычное состояние, relative сдвигает от своего места, absolute выводит из потока и располагает относительно ближайшего позиционированного родителя, fixed закрепляет на экране.

position: static; /* default: обычный поток */ position: relative; /* сдвигается от своего места через top/left */ position: absolute; /* относительно родителя (relative) */ position: fixed; /* закреплён на экране, не скроллится */

ЗаданиеСделайте цель (.bola) position: absolute и поместите в угол родительского блока.

top/left и z-index

Позиционированный элемент сдвигается через top, right, bottom, left. Когда элементы накладываются друг на друга, z-index задаёт, какой из них будет сверху (большее число = сверху).

position: absolute; top: 10px; left: 20px; /* сверху 10, слева 20 */ z-index: 10; /* большее число оказывается сверху */

ЗаданиеВыведите первый блок (.q1) на самый верх: z-index: 5;. Больший z-index стоит выше.

Внимание: z-index работает только на элементах с заданным position (отличным от static).

float и clear

float обтекает элемент влево или вправо, а текст обтекает его вокруг. Раньше на этом строили весь макет страницы. А clear опускает следующий за плавающим элемент вниз.

float: left; /* плывёт влево, текст обтекает справа */ float: right; /* плывёт вправо, текст обтекает слева */ clear: both; /* опускается вниз после плавающих */

ЗаданиеСделайте блок картинки (.rasm) float: left, чтобы текст обтекал его справа.

overflow: лишний контент

Если контент не помещается в контейнер, overflow управляет тем, что произойдёт: вытечет наружу, обрежется или появится прокрутка.

overflow: visible; /* default: вытекает наружу */ overflow: hidden; /* обрезает лишнее */ overflow: scroll; /* всегда есть полоса прокрутки */ overflow: auto; /* прокрутка при необходимости */

ЗаданиеЗадайте контейнеру (.quti) overflow: auto;. Не поместившийся текст станет доступен через прокрутку.

hiddenобрезает

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

autoпрокрутка при нужде

Если контент помещается — обычный вид, если нет — появляется прокрутка. Самый удобный выбор для длинных списков.

Упражнения

Попробуйте расположение самостоятельно. Меняйте display, position и overflow.

Тест модуля 6

Чтобы завершить модуль, дайте не менее 5/6 правильных ответов.

7

МОДУЛЬ 7

Flexbox

Flexbox: гибкое расположение

Flexbox легко располагает элементы вдоль ряда (или столбца). Элемент с display: flex становится контейнером, а его прямые потомки — flex-элементами. Есть две оси: главная ось (main) и поперечная ось (cross).

display: flex → контейнер + 3 flex-элемента, выстраиваются вдоль главной оси

.konteyner { display: flex; /* делает потомков flex-элементами */ }

ЗаданиеРазместите блоки в ряд: задайте .qator свойство display: flex;. Flex-контейнер выстроит потомков в одну строку.

Важно: display: flex влияет только на прямых потомков, а не на внуков. Flexbox — основа современного расположения.

flex-direction: направление

flex-direction задаёт направление главной оси: располагаются ли элементы в ряд (по горизонтали) или в столбец (по вертикали).

flex-direction: row; /* default: слева направо */ flex-direction: column; /* сверху вниз */ flex-direction: row-reverse; /* справа налево */ flex-direction: column-reverse; /* снизу вверх */

ЗаданиеПревратите .qator в вертикальный столбец: flex-direction: column;. Теперь блоки выстроятся друг над другом.

Внимание: при смене направления главная и поперечная оси тоже меняются местами. При column главная ось становится вертикальной.

justify-content: главная ось

justify-content распределяет элементы вдоль главной оси (в row — по горизонтали). Управляет тем, как делится свободное место.

justify-content: flex-start; /* к началу (default) */ justify-content: center; /* по центру */ justify-content: space-between; /* к краям, промежутки равны */ justify-content: space-around; /* равномерно вокруг каждого элемента */

ЗаданиеРазместите элементы по центру главной оси: justify-content: center.

align-items: поперечная ось

align-items выравнивает элементы вдоль поперечной оси (в row — по вертикали). В сочетании с justify-content можно поместить любой элемент точно по центру.

align-items: stretch; /* default: растягивается на всю высоту */ align-items: center; /* по центру поперечной оси */ align-items: flex-start; /* к началу (вверх) */ align-items: flex-end; /* к концу (вниз) */

ЗаданиеВыровняйте элементы по центру поперечной оси: align-items: center.

flex-wrap, gap и flex

Если элементы не помещаются, flex-wrap: wrap переносит их на следующую строку. gap задаёт промежуток между элементами. А заданное самому элементу flex: 1 означает, что он растягивается, заполняя свободное место.

flex-wrap: wrap; /* переносит на следующую строку */ gap: 12px; /* промежуток между элементами */ flex: 1; /* элемент заполняет свободное место (элементу) */

ЗаданиеПусть третий элемент (.katta) растянется, заполнив свободное место: flex: 1;.

gapмежду элементами

Если вместо margin использовать gap, промежуток появляется только между элементами, но не по краям. Чисто и удобно.

flex: 1равное деление

Если нескольким элементам задать flex: 1, они поровну поделят оставшееся место. Идеально для адаптивных панелей.

Упражнения

Попробуйте Flexbox самостоятельно. Меняйте display, направление и выравнивание.

Тест модуля 7

Чтобы завершить модуль, дайте не менее 5/6 правильных ответов.

8

МОДУЛЬ 8

CSS Grid

Grid: двумерное расположение

Если Flexbox одномерный (ряд или столбец), то Grid двумерный: управляет строками и столбцами одновременно. Элемент с display: grid становится grid-контейнером, а grid-template-columns задаёт структуру столбцов.

Grid = сетка из строк × столбцов; элементы попадают в ячейки

.panjara { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 3 равных столбца */ }

ЗаданиеЗадайте .panjara 3 равных столбца: grid-template-columns: 1fr 1fr 1fr;. fr делит свободное место на равные доли.

Правило: для сложного макета страницы (header, sidebar, контент) удобнее Grid, а для элементов в одном ряду — Flexbox. Часто оба используют вместе.

grid-template-columns и fr

Число и ширину столбцов задаёт grid-template-columns. Единица fr означает долю доступного свободного места: 1fr 1fr — два равных столбца, а 2fr 1fr — первый вдвое шире.

grid-template-columns: 200px 200px; /* 2 точных столбца */ grid-template-columns: 1fr 1fr 1fr; /* 3 равных столбца */ grid-template-columns: 2fr 1fr; /* один вдвое шире */

ЗаданиеСделайте сетку display: grid и с помощью grid-template-columns создайте 3 равных столбца.

gap и repeat()

gap задаёт промежуток между ячейками (работает и в grid, и в flex). А repeat() коротко записывает повторяющиеся столбцы: repeat(3, 1fr) = 1fr 1fr 1fr.

gap: 12px; /* между строками и столбцами */ grid-template-columns: repeat(3, 1fr); /* 3 равных столбца (коротко) */ grid-template-columns: repeat(4, 100px); /* 4 столбца по 100px */

ЗаданиеЗадайте промежуток между ячейками сетки: .panjara — gap: 12px;.

Мощный приём: repeat(auto-fit, minmax(120px, 1fr)) автоматически подбирает число столбцов под ширину экрана (адаптивная галерея).

grid-column и grid-row: растягивание

Элемент можно растянуть на несколько столбцов или строк. grid-column: span 2 делает элемент шириной в 2 столбца. Можно задать и через линии: grid-column: 1 / 3.

grid-column: span 2; /* растягивается на ширину 2 столбцов */ grid-row: span 2; /* растягивается на высоту 2 строк */ grid-column: 1 / 3; /* от линии 1 до линии 3 */

ЗаданиеРастяните первую ячейку (.katta) на 2 столбца с помощью grid-column: span 2.

grid-template-areas: именованный макет

Самый наглядный способ Grid: даёте каждой ячейке имя и рисуете макет как ASCII-картинку. Так вы легко размещаете header, sidebar и контент.

.panjara { grid-template-areas: "header header" "sidebar kontent"; } .head { grid-area: header; }

ЗаданиеНазовите области макета: задайте .panjara свойство grid-template-areas (head сверху, side и main снизу). Каждый элемент попадёт на своё место через grid-area.

Grid2 измерения

Макет всей страницы: строки и столбцы одновременно. Идеально для header, sidebar, контента, footer.

Flexbox1 измерение

Элементы в одном ряду: navbar, ряд кнопок, карточки. Используется и внутри Grid.

Упражнения

Попробуйте Grid самостоятельно. Меняйте столбцы, gap и растягивание.

Тест модуля 8

Чтобы завершить модуль, дайте не менее 5/6 правильных ответов.

9

МОДУЛЬ 9

Адаптивный дизайн

Responsive: адаптация ко всем экранам

Адаптивный дизайн показывает страницу одинаково красиво на телефоне, планшете и компьютере. Его основа — относительные единицы: % (относительно родителя), vw/vh (ширина/высота экрана), rem (относительно корневого шрифта).

Одна страница: на широком экране в ряд, на телефоне — друг под другом

width: 60%; /* 60% от ширины родителя */ font-size: 1.2rem; /* в 1.2 раза от шрифта html */ width: 80vw; /* 80% от ширины экрана */

ЗаданиеЗадайте .quti относительную ширину: width: 60%;. Он займёт 60 процентов родительского контейнера и подстроится при изменении экрана.

Основа: без тега <meta name="viewport"> в HTML адаптивность не работает. Вместо точных px выбирайте относительные единицы.

max-width: не выходить за пределы

max-width ограничивает максимальную ширину элемента. max-width: 100% не даёт картинке или блоку выйти за пределы контейнера. Это одно из важнейших правил адаптивного дизайна.

max-width: 100%; /* не превышает контейнер (картинка) */ max-width: 600px; /* строка текста не слишком длинная */ min-width: 200px; /* не сжимается слишком сильно */

ЗаданиеВпишите блок (.rasm) в контейнер с помощью max-width: 100% (чтобы не выходил за пределы).

@media: стиль в зависимости от экрана

Правило @media задаёт другой стиль в зависимости от ширины экрана. С max-width пишут правила для узких экранов, с min-width — для широких. Это называется breakpoint (точка перелома).

/* для узкого экрана (телефон) */ @media (max-width: 600px) { .karta { background: #1d4ed8; } }

ЗаданиеЗадайте .karta свойство border-radius: 10px;. Правило @media ниже меняет цвет фона, когда экран уже 600px (в коде уже готово).

Попробуйте: окно результата ниже узкое, поэтому виден мобильный стиль (тёмно-синий). Меняйте значение breakpoint и наблюдайте за эффектом.

max-widthdesktop-first

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

min-widthmobile-first

Сначала стиль телефона (основа), затем добавляется для широких экранов. Современная рекомендация.

Подход mobile-first

Современная рекомендация: сначала напишите основной стиль для телефона, затем через @media (min-width: ...) добавьте дополнения для больших экранов. Это делает код чистым и лёгким.

.karta { /* основа = телефон */ font-size: 14px; padding: 16px; } @media (min-width: 600px) { /* дополнение для широкого экрана */ .karta { font-size: 20px; } }

ЗаданиеЗадайте .karta основной (мобильный) фон: background: #2f6bed;. А @media (min-width: 600px) увеличивает padding и шрифт на большем экране.

Причина: пользователей телефонов много. Начать с простого для них, а затем добавить возможности — быстрее и надёжнее.

clamp(), min() и max()

Эти функции дают гибкий размер без media query. clamp(min, ideal, max) удерживает значение между двумя границами: clamp(16px, 4vw, 28px) — текст меняется в зависимости от экрана, но не становится меньше 16px и больше 28px.

font-size: clamp(16px, 4vw, 28px); /* гибко, но в пределах */ width: min(90%, 500px); /* выбирается меньшее */ padding: max(16px, 3vw); /* выбирается большее */

ЗаданиеЗадайте заголовку (.quti) гибкий размер: font-size: clamp(18px, 5vw, 28px).

Упражнения

Попробуйте адаптивные правила самостоятельно. Задавайте ограничения через max-width и min-width.

Тест модуля 9

Чтобы завершить модуль, дайте не менее 5/6 правильных ответов.

10

МОДУЛЬ 10

Анимация и transform

transform: сдвиг и вращение

transform сдвигает, вращает, увеличивает или наклоняет элемент, не нарушая макет. Это основа анимации, потому что работает очень быстро.

translate (сдвиг) · rotate (вращение) · scale (увеличение)

transform: translate(20px, 10px); /* сдвигает */ transform: rotate(15deg); /* вращает */ transform: scale(1.2); /* увеличивает */ transform: skew(10deg); /* наклоняет */

ЗаданиеПоверните .quti: transform: rotate(8deg);. transform вращает, увеличивает или сдвигает элемент.

Комбинирование: несколько можно записать вместе: transform: rotate(10deg) scale(1.1). Порядок важен.

transition: плавный переход

transition делает изменение не мгновенным, а плавным (с анимацией). Например, цвет кнопки при :hover меняется постепенно. Пишется в порядке transition: свойство длительность кривая.

transition: 0.3s; /* все изменения за 0.3s */ transition: background 0.4s ease; /* только фон, плавно */ transition: transform 0.3s, color 0.2s; /* несколько свойств */

ЗаданиеЗадайте блоку (.quti) transition: 0.3s, затем наведите на него курсор (переход будет плавным).

Интерактивность с :hover

Если :hover и transition использовать вместе, получаются живые и приятные кнопки. При наведении курсора элемент красиво меняется.

.tugma { transition: 0.25s; } .tugma:hover { transform: translateY(-3px); /* поднимается вверх */ }

ЗаданиеЗадайте кнопке плавный переход: .tugma — transition: 0.25s;. Правило :hover ниже за счёт transition сработает мягко.

Попробуйте: наведите курсор на кнопку в окне результата — она поднимется и сменит цвет.

@keyframes и animation

Для сложной, самостоятельно работающей анимации @keyframes задаёт этапы (from/to или 0%–100%), а animation применяет её к элементу.

@keyframes aylanish { from { transform: rotate(0); } to { transform: rotate(360deg); } } .element { animation: aylanish 2s linear infinite; }

ЗаданиеПримените к блоку (.quti) готовую анимацию: animation: aylanish 2s linear infinite.

Настройки animation

Для полного управления анимацией есть отдельные свойства: длительность, кривая скорости, сколько раз повторяется и задержка.

animation-duration: 2s; /* длительность */ animation-timing-function: ease-in-out; /* кривая скорости */ animation-iteration-count: infinite; /* сколько раз (или 3) */ animation-delay: 0.5s; /* задержка */

ЗаданиеПримените к .yurak анимацию пульса: animation: puls 1.2s ease-in-out infinite;. @keyframes puls уже готов в коде.

timing-functionease / linear

Изменение скорости движения. ease — естественнее, linear — равномерно. ease-in-out используют часто.

iteration-countinfinite / 3

infinite повторяет бесконечно, а при заданном числе срабатывает столько раз и останавливается.

Упражнения

Попробуйте анимацию и transform самостоятельно. Меняйте transform, transition и прозрачность.

Тест модуля 10

Чтобы завершить модуль, дайте не менее 5/6 правильных ответов.

11

МОДУЛЬ 11

Продвинутый CSS

Переменные CSS (--var)

Переменные CSS позволяют хранить значение в одном месте и использовать во многих. Они объявляются в виде --имя (обычно в :root) и вызываются через var(--имя). Если изменить цвет в одном месте, он обновится везде.

Одна переменная → много элементов получают одно значение

:root { --asosiy: #2f6bed; /* объявление переменной */ } .tugma { background: var(--asosiy); } /* использование */

ЗаданиеСделайте переменную --asosiy в корне равной #22c55e (зелёный) — блок тоже станет зелёным.

calc(): вычисления внутри CSS

calc() выполняет математические вычисления, смешивая разные единицы. Например, calc(100% - 40px) вычитает 40px из полной ширины — очень полезно там, где нельзя сложить проценты с пикселями.

width: calc(100% - 40px); /* полная ширина минус 40px */ font-size: calc(1rem + 2px); /* сложение единиц */ height: calc(100vh - 60px); /* высота экрана минус header */

ЗаданиеЗадайте .quti ширину через calc(): width: calc(100% - 40px);. calc считает, складывая разные единицы.

Внимание: вокруг операций (+, -) обязателен пробел: calc(100% - 40px) верно, а calc(100%-40px) не работает.

filter: визуальные эффекты

filter добавляет элементу размытие, яркость, чёрно-белый и другие эффекты. Особенно мощно работает с картинками.

filter: blur(4px); /* размывает */ filter: grayscale(100%); /* делает чёрно-белым */ filter: brightness(1.4); /* повышает яркость */ filter: drop-shadow(0 4px 6px #999); /* тень */

ЗаданиеРазмойте блок .a: filter: blur(2px);. filter добавляет элементу визуальный эффект (blur, grayscale).

Комбинирование: несколько эффектов можно записать вместе: filter: grayscale(50%) brightness(1.2).

object-fit и aspect-ratio

object-fit: cover заполняет контейнер картинкой без искажения пропорций (обрезая лишнее). А aspect-ratio задаёт элементу постоянное соотношение сторон — например 16 / 9, как рамка видео.

object-fit: cover; /* заполняет, сохраняя пропорции */ object-fit: contain; /* помещает целиком */ aspect-ratio: 16 / 9; /* постоянное соотношение */

ЗаданиеЗадайте блоку (.quti) aspect-ratio: 16 / 9 — высота вычислится автоматически.

clip-path: обрезка формы

clip-path обрезает элемент в форму, отличную от прямоугольника (треугольник, круг, многоугольник). Видна только указанная область.

clip-path: circle(50%); /* круг */ clip-path: polygon(50% 0, 0 100%, 100% 100%); /* треугольник */ clip-path: inset(10px); /* обрезка внутрь */

ЗаданиеСделайте из .uchburchak треугольник: clip-path: polygon(50% 0%, 0% 100%, 100% 100%);. clip-path обрезает элемент в любую форму.

circle()круг

Обрезает элемент в форме круга. Простое решение для аватара или круглых кнопок.

polygon()многоугольник

Произвольная форма из точек: треугольник, ромб, звезда. Для креативных секций.

Упражнения

Попробуйте продвинутый CSS самостоятельно. Работайте с calc, filter и aspect-ratio.

Тест модуля 11

Чтобы завершить модуль, дайте не менее 5/6 правильных ответов.

12

МОДУЛЬ 12

Современный CSS и итоговый проект

Тёмная тема (dark mode)

Современные сайты работают в двух темах. @media (prefers-color-scheme: dark) определяет выбор в системе пользователя, а переменные CSS позволяют менять цвета в одном месте.

Один сайт, две темы: автоматически переключается через переменную + prefers-color-scheme

:root { --fon: white; --matn: #0f172a; } @media (prefers-color-scheme: dark) { :root { --fon: #0f172a; --matn: white; } }

ЗаданиеСмените цвет через переменную темы: в :root сделайте --fon равной #22c55e. Одна переменная управляет всей темой (dark mode работает на этой основе).

Секрет: пишите цвета не напрямую, а через var(--fon). Тогда для смены темы достаточно обновить только переменные.

:has() — родительский селектор

Долгожданная возможность: :has() выбирает родительский элемент по тому, что внутри него. Например, карточку с картинкой внутри можно оформить иначе — раньше это делали только с помощью JavaScript.

.karta:has(img) { border: 2px solid #2f6bed; } /* если внутри есть картинка */ label:has(input:checked) { font-weight: bold; } /* если отмечено */

ЗаданиеЗадайте синий фон карточке, внутри которой есть .belgi: .karta:has(.belgi) { background: #2f6bed }.

CSS nesting (вложенная запись)

Современный CSS разрешает писать правила вложенно — как в Sass, но в чистом CSS. Символ & обозначает родительский селектор. Это держит связанные правила вместе и делает код упорядоченным.

.karta { padding: 16px; & p { color: gray; } /* то же, что .karta p */ &:hover { background: #eef; } /* .karta:hover */ }

ЗаданиеВложите внутрь .karta вложенное (nested) правило, сделайте абзац жёлтым: & p { color: gold; }.

BEM: стиль именования классов

В больших проектах, чтобы имена классов не путались, используют методологию BEM: block__element--modifier. Это делает имена точными, уникальными и понятными.

.karta { } /* Block: самостоятельный компонент */ .karta__sarlavha { } /* Element: часть (два подчёркивания __) */ .karta--faol { } /* Modifier: состояние (два дефиса --) */

ЗаданиеЗадайте стиль классу-модификатору: .karta--faol — border: 2px solid #2f6bed;. В BEM --faol обозначает состояние карточки.

Польза: по имени .karta__tugma сразу видно, что это кнопка внутри карточки. Конфликтов имён не будет.

Доступность (a11y) и итоговые советы

Хороший сайт должен быть удобен для всех. Достаточный контраст между текстом и фоном, видимый фокус для клавиатуры и уменьшение анимации для чувствительных к движению пользователей — вот признаки профессиональной работы.

:focus-visible { outline: 2px solid #2f6bed; /* чтобы был виден фокус клавиатуры */ } @media (prefers-reduced-motion: reduce) { * { animation: none; } /* уменьшить движение */ }

ЗаданиеЗадайте кнопке cursor: pointer; (показывает, что она интерактивна). Правило :focus-visible ниже рисует видимое кольцо при фокусе через Tab (важно для пользователей клавиатуры).

Контрастчитаемость

На светлом фоне светлый текст не читается. При выборе цвета убедитесь, что контраст достаточен.

Семантикаправильный тег

Для кнопки используйте <button>, для заголовка — <h1>: CSS оформляет, а HTML придаёт смысл.

Отличный результат! Вы освоили основы современного CSS. В следующих модулях вас ждут формы, единицы измерения и 3D-трансформации, а в конце — итоговый экзамен.

Упражнения

Попробуйте современный CSS самостоятельно. Работайте с nesting, accent-color и outline.

Тест модуля 12

Чтобы завершить модуль, дайте не менее 5/6 правильных ответов.

13

МОДУЛЬ 13

Оформление форм

Стиль input, textarea и select

Элементы формы (текстовое поле, многострочный textarea, выпадающий select) приходят в старом, некрасивом стандартном виде браузера. С помощью CSS вы задаёте им границу, внутренний отступ, радиус скругления и шрифт, подгоняя под стиль вашего сайта. Если сделать ширину width: 100%, поле займёт весь контейнер.

input, textarea, select { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; /* предотвращает зум на мобильном */ }

ЗаданиеЗадайте полю input border-radius: 8px, чтобы скруглить углы.

Совет: если сделать шрифт 16px или больше, на телефоне при нажатии на поле страница не будет автоматически увеличиваться.

Состояния фокуса, hover и disabled

Когда пользователь нажимает на поле (фокус), наводит курсор (hover) или поле отключено (disabled), его нужно показывать иначе. Для :focus стандартное кольцо браузера сделайте красивее через outline или box-shadow. А :focus-visible виден только при переходе с клавиатуры.

input:focus { border-color: #2f6bed; outline: none; box-shadow: 0 0 0 3px #bfdbfe; /* мягкое кольцо фокуса */ } input:disabled { background: #f1f5f9; cursor: not-allowed; }

ЗаданиеЗадайте полю внутренний отступ: input — padding: 11px 13px;. Правила :focus и :disabled ниже задают стиль в зависимости от состояния поля (попробуйте нажать на поле).

Внимание: если пишете outline: none, обязательно вместо него задайте вид фокуса через box-shadow или border. Иначе пользователь клавиатуры не поймёт, где он находится.

Состояния проверки и placeholder

CSS может задавать стиль в зависимости от состояния формы: :checked (отмечено), :required (обязательное), :valid / :invalid (заполнено верно или с ошибкой), :placeholder-shown (ещё не введено). А псевдоэлемент ::placeholder оформляет серый текст в пустом поле.

input::placeholder { color: #94a3b8; font-style: italic; } input:invalid { border-color: #ef4444; /* красный, если заполнено с ошибкой */ } input:valid { border-color: #22c55e; /* зелёный, если верно */ }

ЗаданиеЗадайте input границу: border: 2px solid #cbd5e1;. Правила :valid и :invalid меняют цвет границы, когда email введён верно или с ошибкой.

:requiredобязательное

Выделяет обязательные для заполнения поля, например звёздочкой или цветом.

:checkedотмечено

Срабатывает, когда checkbox или radio отмечены. Главный инструмент при создании кастомных кнопок и toggle.

accent-color и кастомный checkbox

Цвет checkbox, radio и слайдера (range) можно перекрасить в цвет бренда одним свойством: accent-color. Это самый простой путь. Если нужен полностью кастомный вид, отключите стандартную форму через appearance: none и рисуйте сами с нуля.

/* Проще всего: изменить только цвет */ input[type="checkbox"], input[type="radio"] { accent-color: #2f6bed; width: 18px; height: 18px; }

ЗаданиеЗадайте флажку (input) accent-color: #2f6bed, чтобы галочка была синей.

Структура и расположение формы

Красивая форма — это не только цвет, но и структура. Свяжите каждое поле с <label> (при клике поле получает фокус). Связанные поля группируйте в <fieldset>. Для расположения очень удобен Flexbox: flex-direction: column и gap выстраивают поля ровно, с равными промежутками.

form { display: flex; flex-direction: column; gap: 14px; /* равный промежуток между полями */ } label { font-weight: 600; margin-bottom: 4px; }

ЗаданиеВыстройте форму вертикально: задайте form свойства display: flex; и flex-direction: column;. Пары label и input выстроятся друг под другом.

Удобство: если связать <label for="email"> и <input id="email">, поле активируется и при клике на подпись — пользоваться становится проще.

Упражнения

Попробуйте стиль формы самостоятельно. Работайте с радиусом границы, accent-color и внутренним отступом.

Тест модуля 13

Чтобы завершить модуль, дайте не менее 5/6 правильных ответов.

14

МОДУЛЬ 14

Единицы измерения (units)

px и абсолютные единицы

В CSS есть два вида задания размера: абсолютные (неизменные) и относительные (зависящие от чего-либо). px (пиксель) — самая используемая абсолютная единица: одна точка на экране. Она даёт точный контроль, поэтому отлично подходит для границы (border) и тонких размеров. pt (пункт) используют в основном для печати (print).

border: 1px solid #ccc; /* px идеален для тонкой границы */ width: 300px; /* точная, неизменная ширина */ border-radius: 8px;

ЗаданиеЗадайте блоку абсолютную ширину: width: 300px;. Пиксель (px) — жёсткая единица, не зависящая от экрана.

Правило: не используйте везде только px. Для текста и расположения относительные единицы (rem, %) делают страницу гибкой и соответствующей настройкам пользователя.

Проценты (%): относительно родителя

% — относительная единица: значение вычисляется относительно родительского элемента. width: 50% берёт половину ширины родителя. Если родитель расширяется или сужается, потомок меняется вместе с ним. Поэтому проценты — основа адаптивных (responsive) макетов.

Потомок занимает половину ширины родителя (140px)

ЗаданиеЗадайте потомку (.bola) width: 50%, чтобы он занял половину родителя (200px).

em: относительно текущего шрифта

em — относительная единица: относительно font-size текущего (родительского) элемента. Если шрифт родителя 16px, то 1em = 16px, 2em = 32px. При изменении шрифта размеры в em меняются пропорционально ему. Внимание: em накапливается (compounding) — во вложенных элементах может разрастаться.

.ota { font-size: 16px; } .bola { font-size: 2em; } /* 2 x 16px = 32px */ .bola { padding: 1em; } /* внутренний отступ под шрифт */

ЗаданиеЗадайте потомку (.bola) font-size: 2em. Родитель 16px, значит текст станет 32px.

rem: относительно корня

rem (root em) всегда вычисляется относительно font-size корневого (html) элемента. Стандартный шрифт html — 16px, значит 1rem = 16px, 2rem = 32px. Главное отличие от em: rem не накапливается, всегда берётся от корня. Поэтому он предсказуем и предпочтителен в современных проектах — весь сайт можно масштабировать из одного места (шрифт html).

html { font-size: 16px; } /* размер корня */ .sarlavha { font-size: 2rem; } /* 32px, независимо от родителя */

emот шрифта родителя

Зависит от родителя. При вложении накапливается и неожиданно разрастается.

remот корня

Всегда зависит от шрифта html, стабилен. Самый надёжный выбор для размеров текста.

ЗаданиеЗадайте заголовку (.sarlavha) font-size: 2rem. Корень 16px, значит станет 32px.

единицы viewport: vw, vh

Единицы viewport относятся к размеру экрана (окна браузера): vw = 1% ширины окна (viewport), vh = 1% высоты. Значит 100vw — вся ширина экрана, 100vh — вся высота экрана. vmin и vmax — 1% меньшего или большего размера. Они очень удобны для крупных заголовков и полноэкранных секций.

font-size: 5vw; /* при расширении экрана текст растёт */ height: 100vh; /* вся высота экрана */ width: 90vw; /* 90% ширины экрана */

ЗаданиеЗадайте баннеру единицу viewport: font-size: 5vw;. vw равен одному проценту ширины экрана (5vw = 5 процентов); при расширении окна шрифт растёт.

Сильная пара: единицы viewport лучше всего работают вместе с clamp() (модуль 9): clamp(18px, 5vw, 40px) плавно подстраивает текст в пределах границ.

Упражнения

Попробуйте единицы самостоятельно. Задавайте размеры через проценты, em и rem.

Тест модуля 14

Чтобы завершить модуль, дайте не менее 5/6 правильных ответов.

15

МОДУЛЬ 15

3D-трансформации

perspective: создание 3D-сцены

В модуле 10 мы рассмотрели 2D-трансформации. 3D-трансформации двигают элемент ещё и в глубину (ближе или дальше от экрана). Для этого сначала нужна 3D-сцена: задайте свойство perspective родительскому элементу. Оно задаёт расстояние между глазом и экраном. Малое значение (например, 400px) даёт сильный, преувеличенный эффект, а большое — мягкий.

perspective придаёт родительскому элементу 3D-глубину

.sahna { perspective: 800px; /* родитель: открывает 3D-пространство */ }

ЗаданиеЗадайте сцене (.sahna) perspective: 800px, чтобы открылось 3D-пространство.

rotateX, rotateY, rotateZ

В 3D-пространстве элемент может вращаться вокруг трёх осей: rotateX вокруг горизонтальной оси (наклоняется вперёд или назад), rotateY вокруг вертикальной оси (поворачивается вбок, как дверь), а rotateZ в плоскости экрана (обычное 2D-вращение). Если использовать их вместе с perspective, появляется настоящее ощущение объёма.

transform: rotateX(45deg); /* наклоняется вперёд */ transform: rotateY(45deg); /* поворачивается вбок */ transform: rotateZ(45deg); /* вращается в плоскости */

ЗаданиеЗадайте блоку (.quti) transform: rotateY(40deg), чтобы он повернулся вбок.

translateZ va translate3d

translateZ сдвигает элемент вдоль оси Z — ближе к экрану (положительное значение) или дальше от него (отрицательное). Это видно только при наличии perspective: положительный translateZ делает элемент крупнее (ближе). А translate3d(x, y, z) сдвигает по трём осям одновременно.

transform: translateZ(60px); /* приближается к экрану */ transform: translate3d(10px, 0, 40px); /* x, y, z вместе */

ЗаданиеПриблизьте .quti вдоль оси Z: transform: translateZ(50px);. Благодаря perspective блок будет выглядеть крупнее (ближе).

Примечание: эффект translateZ виден только если у родительского элемента есть perspective. Без perspective сдвиг по Z незаметен.

preserve-3d и backface-visibility

Для 3D нужны два важных вспомогательных свойства. transform-style: preserve-3d сохраняет потомков элемента в 3D-пространстве (иначе они станут плоскими, 2D). А backface-visibility: hidden скрывает обратную сторону элемента — она не видна, когда элемент повёрнут задом. Это особенно нужно для карт с переворотом (flip).

.karta { transform-style: preserve-3d; /* потомки остаются в 3D */ } .yuz { backface-visibility: hidden; /* обратная сторона скрывается */ }

ЗаданиеЗадайте карте (.karta) transform-style: preserve-3d.

3D-карта с переворотом (проект)

Теперь объединим все знания. Чтобы сделать переворачивающуюся карту: у родителя perspective, у карты transform-style: preserve-3d и transition, у обеих сторон backface-visibility: hidden, а обратная сторона изначально повёрнута через rotateY(180deg). Если при hover повернуть всю карту на rotateY(180deg), она плавно перевернётся и покажет обратную сторону. Наведите курсор на карту ниже!

ЗаданиеДля 3D-карты с переворотом: задайте .karta свойство transform-style: preserve-3d;. Затем, если навести курсор на карту, она повернётся на 180 градусов.

perspectiveу родителя

Открывает 3D-глубину. Без него вращение выглядит плоским, без объёма.

backface-visibilityна сторонах

Обеспечивает, чтобы обратная сторона не была видна, когда карта повёрнута задом.

Упражнения

Попробуйте 3D-трансформации самостоятельно. Работайте с perspective, rotate и preserve-3d.

Тест модуля 15

Чтобы завершить модуль, дайте не менее 5/6 правильных ответов.

ИТОГОВЫЙ ЭКЗАМЕН

Практический экзамен и итоговый тест

Часть 1: Практический экзамен

Это самое большое испытание курса. Нажмите кнопку — откроется полноэкранная кодовая студия: слева вы пишете CSS, справа будут вкладки «Образец» (готовый дизайн, которого нужно достичь) и «Результат» (ваш живой результат). HTML готов, нужно только написать CSS и сделать карточку профиля из образца 1:1. Экзамен считается сданным, когда выполнены все 10 требований.

Слева вы пишете CSS, справа сравниваете Образец и Результат.

Часть 2: Итоговый тест из 50 вопросов

50 вопросов по всем 15 модулям. Чтобы получить сертификат, дайте не менее 40/50 правильных ответов.

CSS: научитесь оформлять страницы

Знакомство с CSS

Что такое CSS и зачем он нужен

3 способа подключить CSS

Синтаксис: селектор, свойство, значение

Упражнения

Тест модуля 1

Селекторы и специфичность

Селекторы элемента, класса и id

Комбинаторы: группировка, потомок, ребёнок, сосед

Псевдоклассы: состояние и порядок

Псевдоэлементы: ::before и ::after

Специфичность, каскад и наследование

Упражнения

Тест модуля 2

Цвета и фон

Форматы цвета и прозрачность

background-color и background-image

Размер и положение фона

Градиенты: плавные переходы цвета

Сокращение background и несколько слоёв

Упражнения

Тест модуля 3

Текст и типографика

font-family: семейства шрифтов

font-size и единицы измерения

Жирность, курсив и межстрочный интервал

Выравнивание и оформление текста

text-shadow и веб-шрифты

Упражнения

Тест модуля 4

Box Model

Box Model: каждый элемент — это блок

padding: внутренний отступ

border и border-radius

margin и центрирование

box-sizing: способ измерения блока

Упражнения

Тест модуля 5

Display и расположение

display: как располагаются элементы

position: виды позиционирования

top/left и z-index

float и clear

overflow: лишний контент

Упражнения

Тест модуля 6

Flexbox

Flexbox: гибкое расположение

flex-direction: направление

justify-content: главная ось

align-items: поперечная ось

flex-wrap, gap и flex

Упражнения

Тест модуля 7

CSS Grid

Grid: двумерное расположение

grid-template-columns и fr

gap и repeat()

grid-column и grid-row: растягивание

grid-template-areas: именованный макет

Упражнения

Тест модуля 8

Адаптивный дизайн

Responsive: адаптация ко всем экранам

max-width: не выходить за пределы

@media: стиль в зависимости от экрана

Подход mobile-first

clamp(), min() и max()

Упражнения

Тест модуля 9

Анимация и transform

transform: сдвиг и вращение

transition: плавный переход

Интерактивность с :hover

@keyframes и animation

Настройки animation

Упражнения

Тест модуля 10

Продвинутый CSS