Основы CSS: селекторы, цвета, шрифты и каскад

В этом уроке ты узнаешь

Подключать CSS к странице и называть части правила
Использовать селекторы по тегу, классу, id, потомку и псевдоклассу
Применять цвета, единицы (px, %, em, rem) и свойства шрифта
Объяснять каскад, специфичность и наследование

Страницы, которые ты писал до сих пор, хорошо устроены, но выглядят скучновато: белый фон, чёрный текст, стандартный шрифт. CSS (Cascading Style Sheets — каскадные таблицы стилей) отвечает за внешний вид страницы. Самое интересное: подключив к тому же HTML другой CSS-файл, можно полностью изменить страницу, не тронув ни строчки HTML.

Правило CSS и его подключение

CSS состоит из правил. Правило включает селектор (какие элементы) и объявления в фигурных скобках (что изменить). Каждое объявление — это свойство и значение, между ними двоеточие, а в конце точка с запятой.

CSS

/* selector   { property: value; } */
h1 {
  color: #e34f26;
  font-size: 32px;
}

h1 — селектор, color и font-size — свойства, #e34f26 и 32px — значения. /* … */ — комментарий в CSS.

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

HTML

<!-- 1. External file, inside <head> (best choice) -->
<link rel="stylesheet" href="styles.css">

<!-- 2. A <style> block, inside <head> -->
<style>
  p { color: navy; }
</style>

<!-- 3. The style attribute on one element -->
<p style="color: navy;">Hello</p>

Селекторы

Селектор	Что выбирает
`p`	все элементы `<p>` (селектор по тегу)
`.note`	все элементы с `class="note"`
`#logo`	единственный элемент с `id="logo"`
`nav a`	все `<a>` внутри `<nav>` (селектор потомков)
`h2, h3`	и `<h2>`, и `<h3>` (группировка)
`a:hover`	ссылку, на которую наведена мышь (псевдокласс)

HTML· Измени код и запусти снова

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  p { color: #334155; }
  .note { background: #fef3c7; padding: 6px 10px; border-radius: 6px; }
  #main-title { color: #7c3aed; }
  li a { color: #0891b2; font-weight: bold; }
  h2, h3 { font-family: Georgia, serif; }
  a:hover { color: #db2777; }
</style>

<h2 id="main-title">CSS selectors</h2>
<p>A normal paragraph.</p>
<p class="note">A paragraph with the class note.</p>
<ul>
  <li><a href="#">A link inside a list</a></li>
</ul>
<h3>Another heading</h3>
<a href="#">A link outside the list</a>

Предпросмотр

Наведи мышь на ссылки — :hover меняет их цвет. Добавь class="note" и первому абзацу и посмотри, что изменится.

Цвета и единицы измерения

color меняет цвет текста, а background — фон. Цвет можно записать по-разному: названием (tomato), шестнадцатеричным кодом (#0ea5e9 — доли красного, зелёного и синего), через rgb() (каждый канал 0–255) и через hsl() (тон 0–360°, насыщенность и светлота в процентах). Внутри rgb() и hsl() можно задать и прозрачность, например / 0.5.

HTML· Измени код и запусти снова

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  div { margin: 6px 0; padding: 10px; border-radius: 8px; color: white; }
  .name { background: tomato; }
  .hex { background: #0ea5e9; }
  .short { background: #f60; }
  .rgb { background: rgb(34, 197, 94); }
  .alpha { background: rgb(124 58 237 / 0.4); color: #1e293b; }
  .hsl { background: hsl(330, 80%, 55%); }
</style>

<div class="name">tomato: a color name</div>
<div class="hex">#0ea5e9: hex code</div>
<div class="short">#f60: short hex for #ff6600</div>
<div class="rgb">rgb(34, 197, 94)</div>
<div class="alpha">rgb(124 58 237 / 0.4): 40% visible</div>
<div class="hsl">hsl(330, 80%, 55%)</div>

Предпросмотр

В hsl() поменяй только первое число (тон): 0 — красный, 120 — зелёный, 240 — синий.

Единица	Относительно чего	Где применяют
`px`	фиксированный размер (пиксель экрана)	рамки, небольшие отступы
`%`	размер родительского элемента	ширина
`em`	собственный размер шрифта элемента (в `font-size` — шрифт родителя)	отступы, растущие вместе с текстом
`rem`	размер шрифта корня (`<html>`), обычно 16px	размеры шрифта, отступы
`vw`, `vh`	1% ширины / высоты окна	полноэкранные блоки

HTML· Измени код и запусти снова

<style>
  html { font-size: 16px; }
  body { font-family: system-ui, sans-serif; padding: 12px; }
  .box { font-size: 20px; border: 2px dashed #94a3b8; padding: 8px; }
  .em { font-size: 1.5em; }
  .rem { font-size: 1.5rem; }
  .half { width: 50%; background: #bae6fd; }
</style>

<div class="box">
  The parent's text is 20px
  <p class="em">1.5em = 1.5 × 20px = 30px</p>
  <p class="rem">1.5rem = 1.5 × 16px = 24px</p>
  <p class="half">width: 50% of the parent</p>
</div>

Предпросмотр

Сделай размер шрифта .box равным 30px: текст с em вырастет, а текст с rem не изменится.

Шрифты и текст

font-family выбирает шрифт. В списке указывают несколько шрифтов: если первого нет на компьютере пользователя, браузер берёт следующий. Список должен заканчиваться общим семейством: sans-serif, serif или monospace. system-ui — это системный шрифт самого устройства. font-size задаёт размер, font-weight — насыщенность (400 — обычный, 700 — жирный), line-height — межстрочный интервал, а text-align — выравнивание.

HTML· Измени код и запусти снова

<style>
  body { font-family: system-ui, sans-serif; padding: 16px; background: #f8fafc; }
  .card { max-width: 340px; padding: 16px; background: white; border-radius: 12px; }
  h2 { font-family: Georgia, 'Times New Roman', serif; margin-top: 0; }
  .tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
         text-transform: uppercase; color: #0d9488; }
  p { line-height: 1.6; color: #475569; }
  .price { font-size: 1.5rem; font-weight: 700; text-align: right; color: #1e293b; }
</style>

<div class="card">
  <div class="tag">New book</div>
  <h2>The Caspian Sea</h2>
  <p>A short guide to the largest lake on Earth, its coasts and its wildlife.</p>
  <div class="price">12 AZN</div>
</div>

Предпросмотр

Уменьши line-height до 1 и посмотри, как текст станет тесным. text-transform: uppercase показывает текст заглавными буквами, не меняя HTML.

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

Если несколько правил задают одному элементу одно и то же свойство с разными значениями, какое победит? Это решает каскад. Сначала учитывается специфичность: чем точнее селектор, тем он сильнее — атрибут style > id > класс и псевдокласс > тег. Если специфичность одинаковая, побеждает правило, написанное позже.

HTML· Измени код и запусти снова

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; font-size: 18px; }
  p { color: green; }
  .warning { color: darkorange; }
  #special { color: crimson; }
  p { color: royalblue; }
  .box { color: purple; border: 2px solid #cbd5e1; padding: 8px; }
</style>

<p>1. Which color am I?</p>
<p class="warning">2. And me?</p>
<p class="warning" id="special">3. And me?</p>
<div class="box">4. I am purple, and so is my <em>child</em>.</div>

Предпросмотр

Сначала угадай, потом проверь в предпросмотре. 1 — синий (специфичность одинаковая, побеждает последнее правило), 2 — оранжевый (класс сильнее тега), 3 — малиновый (id сильнее класса), а в 4 <em> наследует цвет от родителя, но не рамку.

Определение

Наследование

Автоматическая передача значения некоторых свойств от родителя к дочерним элементам. Свойства, связанные с текстом (color, font-family, font-size, line-height), наследуются, а связанные с блоком (border, margin, padding, background) — нет. Поэтому шрифт достаточно один раз задать для body.

Главное

Правило CSS = селектор + { свойство: значение; }; на настоящих сайтах CSS подключают отдельным файлом через <link>.
Основные селекторы: p (тег), .class, #id, nav a (потомок), a:hover (псевдокласс).
Цвета: название, hex, rgb(), hsl(); единицы: px — фиксированная, а %, em, rem, vw — относительные.
При конфликте решает специфичность (style > id > класс > тег), а при равенстве побеждает последнее правило.
Текстовые свойства (color, font-*) наследуются, а свойства блока (margin, border, padding) — нет.

Проверь себя

Вопросов: 10. Каждый правильный ответ приносит XP.

1 / 10

Какой селектор выбирает все элементы с class="card"?