CSS Шаг 2 · 25 минут

CSS. Как выглядит

Второй слой — оформление: как элементы выглядят и где стоят. Всё, что ты настраиваешь в панели Design.

После этого шага ты сможешь

увидеть в CSS Design-панель, записанную текстом;
объяснить, почему одно правило меняет сразу все кнопки;
сказать, что расположение, адаптив и hover — это CSS, а не поведение.

2.1

Правило: кому и что

состоит из правил. Каждое отвечает на два вопроса: кому и что.

.button комуимя { background чтосвойство : #2f6fed какоезначение ; }

CSS не знает, что такое кнопка. Он знает имя .button и список свойств. Нашёл всех с таким именем — применил ко всем.

ДЕМО 2A Одно имя — все кнопки

Поменяй цвет фона #2f6fed на другой, например #1f8a5b или tomato. Изменились все три кнопки сразу.
Поменяй число у скругления: вместо 8 поставь 20 или 0.

Класс работает как стиль в Figma: поменяла в одном месте — изменилось везде, где он применён.

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

2.2

Design-панель — это и есть CSS

Слева панель свойств, как в Figma. Двигай ползунки и смотри на код под кнопкой: он пишется сам, строка, которая изменилась, подсвечивается.

Fill

Corner radius 8

Padding 10

Font size 15

Drop shadow

Ты уже умеешь писать CSS. Ты делаешь это ползунками.

Соответствия, которые встречаются чаще всего:

Figma	CSS
Fill	`background` (фон), `color` (текст)
Stroke	`border`
Corner radius	`border-radius`
Drop shadow	`box-shadow`
Текстовый стиль	`font-size`, `font-weight`, `font-family`

2.3

Расположение, адаптив и состояния — тоже CSS

CSS отвечает не только за цвета. Auto layout, брейкпоинты, вариант Hover — всё это оформление, и всё это CSS.

Если что-то «выглядит иначе при наведении» или «иначе на телефоне» — это не поведение, это CSS.

ДЕМО 2C Не только цвет

Одна и та же строка профиля. Переключи ширину экрана и состояние кнопки. Код справа только для чтения: смотри, какие правила подсвечиваются.

Ширина экрана

Широкий Узкий

Кнопка

Обычная Hover

Или наведи курсор на кнопку в превью.

Ширина превью: 560 px

Названия свойств здесь неважны. Важно, где это живёт: брейкпоинт и hover записаны в том же CSS, рядом с цветом.

2.4

Оформляем карточку

Та же карточка, что в шаге 1, теперь с CSS. Комментарии делят код на блоки: карточка, содержимое, кнопка и её состояния.

ДЕМО 2D Карточка: оформление

Поменяй цвет кнопки: в блоке «Кнопка и её состояния» замени #2f6fed на любой другой цвет.

Теперь карточка выглядит как макет. Кнопка выглядит готовой. Нажми на неё. Ничего. Поведение — следующий шаг.

Проверь себя

Все кнопки на сайте должны стать зелёными. Сколько мест менять?

Одно: правило их общего класса. Все кнопки с этим именем изменятся сразу.
Кнопка темнеет при наведении. Это CSS или JS?

CSS. Это вариант Hover, состояние оформления.
На телефоне карточки встают в колонку. Это CSS или JS?

CSS. Это брейкпоинт: как карточки стоят на узком экране.