Введение в CSS

CSS отвечает за внешний вид. Учимся подключать стили и писать первые правила.

Что такое CSS

CSS (Cascading Style Sheets) — каскадные таблицы стилей. Ключевое слово здесь «каскад»: правила применяются по порядку и дополняют друг друга. Одно правило выглядит так:

селектор {
  свойство: значение;
  свойство: значение;
}

p {
  color: #38bdf8;
  font-size: 16px;
}

Каждое существующее правило — либо как есть, либо «каскадом» передаётся потомкам.

Три способа подключения

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

Самые частые инструменты оформления текста:

header {
  background-color: #1e293b;
  color: #e2e8f0;
}

h1 {
  font-family: "Segoe UI", sans-serif;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
}

.link {
  color: #38bdf8;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

Раскроем каждое:

• color / background-color — цвет текста и фона;
• font-family — шрифт (с запасным вариантом);
• font-size — размер шрифта;
• font-weight — насыщенность (жирность);
• text-align — выравнивание;
• text-decoration — подчёркивание и прочее;
• :hover — псевдокласс для состояния «на курсоре».

Цвета в CSS

p { color: red; }              /* по имени */
p { color: #ff0000; }          /* hex */
p { color: rgb(255, 0, 0); }   /* rgb */
p { color: rgba(255, 0, 0, 0.5); } /* + прозрачность */

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

Живой пример

Стилизуем карточку за один шаг. Слева «голый» HTML, справа — то же, но с CSS:

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

Некоторые свойства передаются от родителя детям автоматически. Классика — цвет и шрифт:

body {
  color: #e2e8f0;          /* унаследуется всеми текстами */
  font-family: Arial, sans-serif;
}

А вот margin, padding, border и background не наследуются — просто потому, что иначе отступы «поехали» бы по всей странице.

Reset и Normalize

У браузеров разные стили «по умолчанию»: у одних у <ul> большие отступы, у других маленькие. Чтобы стартовать с чистого листа, подключают сброс:

/* Классический reset — решительно всё обнуляем */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

CSS-переменные (custom properties)

В CSS можно объявлять собственные переменные — они задаются в двойном дефисе и работают везде ниже по дереву:

:root {
  --accent: #38bdf8;
  --gap: 16px;
  --radius: 12px;
}

.card {
  color: var(--accent);
  border-radius: var(--radius);
  padding: var(--gap);
}

Адаптивные размеры: clamp()

Функция clamp() задаёт размер с минимумом, желаемым значением и максимумом. Идеальна для шрифтов, растущих с шириной окна:

h1 {
  font-size: clamp(1.5rem, 3vw + 1rem, 3rem);
}

Это означает: не меньше 1.5rem, стремиться к 3vw + 1rem, но не больше 3rem. Никаких media queries для одного заголовка.

Приоритет правил и !important

Когда два правила спорят, побеждает: инлайн-стиль > селектор по id > класс > тег. Если результат всё равно не тот, в ход идёт !important:

p { color: #38bdf8 !important; }  /* перебьёт класс и id */

Кастомные шрифты: @font-face и Google Fonts

Свои шрифты подключают директивой @font-face, а готовые — одной строкой из Google Fonts:

@font-face {
  font-family: "MyFont";
  src: url("../fonts/myfont.woff2") format("woff2");
  font-weight: 400;
}

/* или в head: */
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

Типографика: line-height, letter-spacing, text-decoration

Комфортное чтение — это не шутки. Три настройки решают 90% проблем с текстом:

body {
  line-height: 1.6;            /* межстрочный интервал */
  letter-spacing: 0.3px;      /* разрядка букв */
}

a { text-decoration: none; }   /* убрать подчёркивание */
.overline { text-decoration: overline; } /* линия сверху */

@media: screen, print и брейкпоинты

Запросы можно открывать на любой тип устройства. Например, для печати страница делается компактной:

@media screen and (min-width: 768px) {
  .menu { display: flex; }
}

@media print {
  nav, .ad { display: none; }   /* не печатаем меню и рекламу */
}

Группировка селекторов

Одно правило для нескольких элементов записывают через запятую:

h1, h2, h3 {
  color: #e2e8f0;
  font-weight: 700;
}

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

Стили «по событию»: :hover, :focus, :active:

a:hover  { color: #7dd3fc; }
a:focus  { outline: 2px solid #38bdf8; }
a:active { opacity: 0.7; }

Структурные псевдоклассы

Порядковые номера среди братьев: первый, последний, каждый чётный:

li:first-child  { color: #34d399; }
li:last-child   { font-weight: bold; }
li:nth-child(3)     { text-decoration: underline; }
li:nth-child(even)  { background: #1e293b; }

Атрибутные селекторы

Стиль по наличию атрибута или его значению:

input[type="text"] { border-color: #38bdf8; }
a[href^="https://"] { color: #7dd3fc; }  /* ^= начало */
a[href$=".pdf"] { color: #f87171; }       /* $= конец */

Каскад: кто победит

При одинаковой специфичности побеждает правило, объявленное позже (ниже в файле):

p { color: red; }
p { color: blue; }   /* победит: объявлено позже */

background: сокращённая запись

Одно свойство вместо четырёх:

.hero {
  background: #0f172a url("../img/bg.jpg") center / cover no-repeat;
  /* цвет | картинка | позиция / размер | повтор */
}

border: стили и стороны

Границы разделяются по сторонам, стилям и цветам:

.card {
  border: 1px solid #334155;       /* все стороны */
  border-left: 4px solid #38bdf8;  /* акцент слева */
  border-radius: 8px;
}

Прозрачность: opacity и rgba

Полупрозрачность бывает для всего блока или только для цвета:

.ghost  { opacity: 0.5; }            /* блеклый весь блок, включая детей */
.bg-fade{ background: rgba(15, 23, 42, 0.8); } /* прозрачный фон, текст чёткий */

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

Перечисляйте шрифты через запятую: если первого нет, возьмётся следующий:

body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

code {
  font-family: "Cascadia Code", Consolas, monospace;
}

line-height без единиц

Пишите межстрочный интервал числом без единицы — он унаследуется пропорционально:

body { line-height: 1.6; }   // 1.6 × размер шрифта

Выравнивание текста: text-align

Слева, по центру, справа или по ширине — куда прижимать строки:

h1    { text-align: center; }
.left { text-align: left; }
.right{ text-align: right; }
.just { text-align: justify; }

font: универсальная запись

Одно свойство, все настройки шрифта сразу:

.btn {
  font: 16px/1.4 Arial, sans-serif;   /* размер/строка шрифт */
  font-style: italic;
  font-weight: 600;
}

CSS-комментарии

Примечания к правилам — пишите их, когда логика не очевидна:

/* Тёмная зона не должна дотрагиваться до шапки */
.hero {
  padding-top: 0;
}

/* ===== Раздел: карточки ===== */
.card { ... }

Палитра в DevTools

Подбирайте цвета с пипетки и копируйте в код:

• Панель Styles: клик по цветному квадратику открывает пипетку;
• Клик рядом со значением — поменяется формат (hex/rgb/hsl);
• Смена цвета «на лету» не требует сохранения файла.

Тренировка

1. Вынесите стили в отдельный файл css/style.css и подключите его через <link>.
2. Задайте фон страницы, цвет заголовков и уберите подчёркивание у ссылок.
3. Сделайте кнопку-ссылка с :hover-эффектом.
4. Поиграйте с font-size в px, rem и em — почувствуйте разницу.