Подключение стилей

Существует три способа подключить CSS к HTML-документу: inline-стили, внутренняя таблица стилей (<style>) и внешний файл (<link>), плюс директива @import.

Зачем нужно

Правильный выбор способа подключения влияет на производительность, поддерживаемость и масштабируемость проекта. Внешние файлы кэшируются браузером, inline-стили удобны для динамических значений, а внутренние стили — для единичных страниц.

Где используется

  • Внешние стили — основной способ в любом проекте
  • Inline-стили — динамические стили через JavaScript, email-вёрстка
  • Внутренние стили — быстрые прототипы, critical CSS
  • @import — организация CSS-файлов в крупных проектах

Предпосылки

1. Inline-стили (атрибут style)

Стили пишутся прямо в HTML-атрибуте style конкретного элемента.

<p style="color: red; font-size: 18px;">Красный текст</p>

<div style="
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
">
  Блок с серым фоном
</div>

Плюсы:

  • Высший приоритет (кроме !important)
  • Удобно для динамических стилей через JS

Минусы:

  • Нельзя использовать псевдоклассы (:hover) и медиа-запросы
  • Дублирование кода — нарушает DRY
  • Сложно поддерживать
  • Смешивает структуру и оформление

2. Внутренняя таблица стилей (<style>)

CSS пишется внутри тега <style> в <head> документа.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Пример</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    h1 {
      color: #333;
      border-bottom: 2px solid #007bff;
      padding-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Заголовок</h1>
  </div>
</body>
</html>

Плюсы:

  • Все стили видны в одном файле
  • Нет дополнительного HTTP-запроса
  • Подходит для critical CSS (стили выше сгиба)

Минусы:

  • Стили не кэшируются отдельно
  • Увеличивает размер HTML
  • Не переиспользуются между страницами

Основной и рекомендуемый способ. CSS хранится в отдельном .css-файле.

<!-- В <head> HTML-документа -->
<link rel="stylesheet" href="styles/main.css">

<!-- Можно подключить несколько файлов -->
<link rel="stylesheet" href="styles/reset.css">
<link rel="stylesheet" href="styles/layout.css">
<link rel="stylesheet" href="styles/components.css">

/* styles/main.css */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #fafafa;
}

.header {
  background-color: #1a1a2e;
  color: white;
  padding: 20px;
}

Плюсы:

  • Кэширование браузером — быстрая загрузка на повторных визитах
  • Разделение ответственности (HTML — структура, CSS — оформление)
  • Переиспользование между страницами
  • Легко поддерживать

Минусы:

  • Дополнительный HTTP-запрос при первой загрузке
<!-- Базовое подключение -->
<link rel="stylesheet" href="style.css">

<!-- С указанием media -->
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">

<!-- Предзагрузка (preload) -->
<link rel="preload" href="critical.css" as="style">

4. Директива @import

Импортирует один CSS-файл внутри другого.

/* main.css */
@import url('reset.css');
@import url('variables.css');
@import url('layout.css');
@import url('components.css');

/* @import должен быть в начале файла (до остальных правил) */
body {
  font-family: sans-serif;
}

/* С условием media */
@import url('print.css') print;
@import url('mobile.css') (max-width: 768px);

/* С layer */
@import url('vendor.css') layer(vendor);

Плюсы:

  • Организация больших CSS-проектов
  • Условный импорт по media

Минусы:

  • Блокирует параллельную загрузку — каждый @import создаёт последовательный запрос
  • Медленнее, чем несколько <link>
  • В продакшене лучше объединять файлы бандлером

Сравнительная таблица

Способ Приоритет Кэширование Переиспользование Рекомендация
inline style="" Высший Нет Нет Только для динамических стилей
<style> Средний Нет Нет Critical CSS, прототипы
<link> Средний Да Да Основной способ
@import Средний Да Да Только в dev, не в проде

Порядок подключения имеет значение

<head>
  <!-- 1. Сброс стилей -->
  <link rel="stylesheet" href="reset.css">
  <!-- 2. Библиотеки/фреймворки -->
  <link rel="stylesheet" href="bootstrap.css">
  <!-- 3. Основные стили проекта -->
  <link rel="stylesheet" href="main.css">
  <!-- 4. Переопределения -->
  <link rel="stylesheet" href="overrides.css">
</head>

Последний подключённый файл перезаписывает предыдущие при одинаковой специфичности.

Частые ошибки

  1. @import после обычных правил — будет проигнорирован:
    /* ОШИБКА */
body { color: black; }
@import url('theme.css'); /* не сработает */
  2. Использование @import в продакшене — создаёт водопад загрузок, замедляет рендеринг
  3. Забытый rel="stylesheet" — без него файл не подключится как стили:
    <!-- ОШИБКА -->
<link href="style.css">
<!-- ПРАВИЛЬНО -->
<link rel="stylesheet" href="style.css">
  4. Неправильный путь к файлу — относительные пути считаются от HTML-файла, не от корня проекта

Практика

  • Создать страницу с inline-стилями и переписать на внешний файл
  • Подключить 3 внешних CSS-файла в правильном порядке
  • Попробовать @import и сравнить в DevTools (вкладка Network) с <link>
  • Подключить print-стили через media="print"
  • Использовать <style> для critical CSS

Связанные темы

Ресурсы