CSS: селекторы и базовые стили

CSS - это как законы физики для твоих блоков. Один неправильный селектор - и всё начинает летать.

Подключение CSS

Три способа:

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

<!-- 2. В теге <style> (для быстрых экспериментов) -->
<style>
  h1 { color: #1a202c; }
</style>

<!-- 3. Инлайн (избегай) -->
<p style="color: red;">Красный текст</p>

Внешний файл - стандарт. Он кешируется браузером, и одни стили используются на всех страницах.

Селекторы

/* Тег */
h1 { font-size: 36px; }

/* Класс (точка) - основной способ */
.card { border: 1px solid #e2e8f0; border-radius: 12px; }

/* ID (решётка) - уникальный, используй редко */
#app { max-width: 960px; margin: 0 auto; }

/* Вложенность */
.card .title { font-weight: bold; }

/* Прямой потомок */
.nav > a { text-decoration: none; }

/* Псевдоклассы */
a:hover { color: #3182ce; }
input:focus { outline: 2px solid #3182ce; }
li:first-child { font-weight: bold; }
tr:nth-child(even) { background: #f7fafc; }

/* Псевдоэлементы */
.required::after { content: " *"; color: red; }

В реальных проектах 90% стилей пишутся через классы. Теговые селекторы (`h1`, `p`) - для базовых reset-стилей. ID - почти не используются в CSS (слишком высокая специфичность).

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

Когда два правила конфликтуют, побеждает более специфичный:

Inline style (1000)  >  #id (100)  >  .class (10)  >  tag (1)

p { color: black; }           /* специфичность: 1 */
.highlight { color: blue; }   /* специфичность: 10 - побеждает */
#main p { color: red; }       /* специфичность: 101 - побеждает оба */

При равной специфичности побеждает правило, которое объявлено последним.

`!important` перебивает любую специфичность. Это как заклеить лампочку изолентой: свет пропал, но проблема осталась. Разберись со специфичностью, а не добавляй `!important`.

Box Model

Каждый элемент - это «коробка» из 4 слоёв:

Box Model: вложенные слои margin (внешний отступ), border (рамка), padding (внутренний отступ) и content (содержимое)

.card {
  width: 300px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  margin: 24px;
}

По умолчанию width - это ширина контента. padding и border добавляются сверху. Чтобы width включал всё - используй box-sizing:

*, *::before, *::after {
  box-sizing: border-box;
}

`box-sizing: border-box` делает width = content + padding + border. Без него width 300px + padding 16px = 332px реально. С ним - ровно 300px. Добавляй это правило в начало каждого проекта.

Цвета

.text { color: #1a202c; }               /* HEX */
.bg { background: rgb(26, 32, 44); }    /* RGB */
.overlay { background: rgba(0, 0, 0, 0.5); }  /* RGBA (полупрозрачный) */
.accent { color: hsl(210, 100%, 50%); } /* HSL (оттенок, насыщенность, яркость) */

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

.fixed { width: 300px; }          /* пиксели - фиксированный */
.fluid { width: 50%; }            /* проценты - от родителя */
.text { font-size: 1rem; }        /* rem - от корневого размера шрифта */
.spacing { margin: 1.5em; }       /* em - от текущего размера шрифта */
.full { height: 100vh; }          /* vh - процент высоты экрана */

rem - предпочтительная единица для шрифтов и отступов. 1rem = размер шрифта в <html> (обычно 16px). Если пользователь увеличит шрифт в настройках браузера - всё масштабируется.

Типографика

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1a202c;
}

h1 { font-size: 2.25rem; font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 600; }

.muted { color: #718096; }
.small { font-size: 0.875rem; }

line-height: 1.6 - полуторный интервал, оптимален для чтения.

Переходы (transitions)

.button {
  background: #3182ce;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.button:hover {
  background: #2c5282;
}

transition анимирует изменение свойства. Без него цвет переключится мгновенно - с ним плавно за 0.2 секунды.

CSS-переменные (Custom Properties)

:root {
 --color-primary: #3182ce;
 --color-text: #1a202c;
 --spacing: 16px;
 --radius: 8px;
}

.card {
  color: var(--color-text);
  padding: var(--spacing);
  border-radius: var(--radius);
}

.button {
  background: var(--color-primary);
}

Переменные упрощают поддержку: меняешь значение в одном месте (:root) - обновляется везде.

Мини-задание

Добавь box-sizing: border-box для всех элементов
Сделай .card со скруглением, паддингом 16px и тенью
Сделай .muted серым текстом, .small меньшим шрифтом
Добавь :hover с transition на кнопку
Создай CSS-переменные для цветов и отступов в :root