CSS — Визуальное оформление

Модуль 2: CSS — Визуальное оформление

Разберём синтаксис и способы подключения CSS, каскадность и специфичность, типографику, модель коробки, позиционирование, Flexbox, Grid, адаптивность и анимации.

2.1 Введение в CSS. Синтаксис и подключение

CSS управляет внешним видом HTML‑элементов. Правило состоит из селектора и деклараций: селектор { свойство: значение; }.

Способы подключения

<!-- 1) Встроенный (inline) -->
<h1 style="color:#4f46e5">Заголовок</h1>

<!-- 2) Внутренний (в <head>) -->
<style>
  h1 { color:#4f46e5; }
</style>

<!-- 3) Внешний файл (рекомендуется) -->
<link rel="stylesheet" href="styles.css">

Селекторы

/* По тегу */
p { line-height: 1.7; }
/* По классу */
.card { border-radius: 10px; }
/* По id */
#mainTitle { font-weight: 700; }
/* Комбинации */
nav a:hover { text-decoration: underline; }

Практика

Подключите внешний CSS к своей странице и измените шрифты, цвета заголовков и отступы абзацев.

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

Каскад — при конфликте правил берётся то, что ниже/точнее. Наследование — некоторые свойства (цвет, шрифты) наследуются потомками.

Специфичность (вес селектора)

Упрощённо: inline > id > класс/атрибут/псевдокласс > тег/псевдоэлемент.

h1 { color: black; }          /* тег */
.title { color: blue; }       /* класс */
#mainTitle { color: green; }  /* id */
/* Победит зелёный (id) */

Единицы измерения

.box { width: 50%; padding: 1rem; font-size: 1.125rem; }
.hero { height: 60vh; }
.small { font-size: 0.875em; }

Практика

Решите конфликт стилей для заголовка, поэкспериментируйте с px, rem, vh.

2.3 Работа с текстом и шрифтами

Базовые свойства

body { font-family: 'Montserrat', system-ui, sans-serif; line-height: 1.7; }
h1 { font-size: 2rem; font-weight: 700; text-align: center; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

Подключение Google Fonts

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">

Практика

Задайте базовую типографику для портфолио: шрифты, размеры и межстрочные интервалы для заголовков/текста.

2.4 Модель коробки (Box Model)

Каждый элемент — прямоугольник: content + padding + border + margin.

.card {
  width: 300px; /* ширина content */
  padding: 16px; /* внутренние отступы */
  border: 1px solid #e5e7eb; /* рамка */
  margin: 12px auto; /* внешние отступы */
  box-sizing: border-box; /* включает padding и border в width */
}

Практика

Сверстайте 3 карточки проекта: выровняйте по сетке, примените отступы, рамки и скругления.

2.5 Позиционирование элементов

.parent { position: relative; }
.child { position: absolute; top: 8px; right: 8px; }
.fixed-banner { position: fixed; bottom: 16px; right: 16px; }
.sticky-header { position: sticky; top: 0; }

Практика

Сделайте липкую шапку и значок (badge) в правом верхнем углу карточки через absolute.

2.6 Flexbox

.row {
  display: flex;
  gap: 16px;
  justify-content: space-between; /* выравнивание по главной оси */
  align-items: center;            /* выравнивание по поперечной оси */
}
.card { flex: 1 1 300px; }

Практика

Сверстайте горизонтальное меню и сетку карточек на Flexbox с переносом строк.

2.7 Grid Layout

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.item:nth-child(1) { grid-column: span 2; }

Практика

Сделайте фотогалерею 3×N, одну из карточек растяните на 2 колонки.

2.8 Адаптивная верстка и медиазапросы

Mobile‑First: сначала стили для мобильных, затем усложняем для больших экранов.

.container { padding: 16px; }
@media (min-width: 768px) {
  .container { max-width: 720px; margin: 0 auto; }
}
@media (min-width: 1024px) {
  .container { max-width: 960px; }
}

Практика

Сделайте главную портфолио адаптивной: навигация, сетки карточек, отступы.

2.9 Трансформации, переходы и анимации

.btn { transition: transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,.1); }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.05); } }
.card:hover { animation: pulse .8s ease-in-out alternate; }

Практика

Добавьте hover‑эффекты кнопкам и карточкам, анимируйте появление элементов.

2.10 Flexbox — углублённо

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

.row { display: flex; flex-wrap: wrap; gap: clamp(12px, 2vw, 24px); }
.card { flex: 1 1 clamp(220px, 30%, 360px); min-width: 220px; }
.row { align-content: start; /* выравнивание нескольких рядов */ }
.card { align-self: stretch; }

Известные ловушки

  • Сжатие контента: используйте min-width и min-height.
  • Неожиданное выравнивание — различайте align-items и align-content.

2.11 Grid — углублённо

Шаблоны областей, автоматическое размещение, функции minmax(), fit-content(), subgrid.

.layout {
  display: grid;
  grid-template-columns: [full-start] 1fr [content-start] minmax(0, 1200px) [content-end] 1fr [full-end];
}
.layout > * { grid-column: content; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.article { display: grid; grid-template-columns: 1fr 320px; grid-template-rows: auto 1fr; grid-template-areas:
  'title aside' 'content aside'; }
.article__title { grid-area: title; }
.article__content { grid-area: content; }
.article__aside { grid-area: aside; }

Subgrid: позволяет наследовать линии родителя для вложенных сеток (поддержка в современных браузерах).

2.12 Архитектуры CSS: БЭМ, ITCSS, Utility‑first

БЭМ

Именование: block__element--modifier. Пример: card, card__title, card--featured.

.card { /* блок */ }
.card__title { /* элемент */ }
.card--featured { /* модификатор */ }

ITCSS

Слои: Settings → Tools → Generic → Elements → Objects → Components → Utilities. От абстрактного к конкретному, уменьшает специфичность.

Правила поддержки

  • Минимизируйте специфичность: избегайте селекторов по id, вложенности > 2 уровней.
  • Компонентный подход: каждый блок изолирован, стили живут рядом.
  • Используйте design tokens через :root и CSS Custom Properties.
:root { --space-1: 8px; --space-2: 12px; --brand: #4f46e5; }
.button { padding: var(--space-1) var(--space-2); background: var(--brand); }

2.13 Адаптив: контейнерные запросы, ретина, медиа

Container Queries

.card-grid { container-type: inline-size; }
.card { display: grid; grid-template-columns: 1fr; }
@container (min-width: 480px) {
  .card { grid-template-columns: 1fr 1fr; }
}

Ретина и качество

  • image-set() для фоновых изображений; srcset для <img>.
  • Используйте aspect-ratio, указывайте width/height у медиа для предотвращения CLS.

Производительность CSS

  • Критический CSS: инлайните ключевые стили в <head>, остальное отложенно.
  • Избегайте тяжёлых теней и анимаций layout/paint; анимируйте transform и opacity.

Итоговый проект модуля 2

Полностью стилизуйте главную портфолио‑страницу: сетки (Flex/Grid), адаптивность, типографика, интерактивные hover‑эффекты.

  • Навигация (desktop/mobile), секции «Проекты» (карточки), «Контакты» (форма)
  • Светлая/тёмная темы — по желанию
  • Анимации появления элементов при наведении/прокрутке