Исполняемые доки CSS: Inline CSS

Q: Что такое inline CSS?

Inline CSS это CSS, записанный в атрибуте style элемента, например . Объявления действуют только на этот элемент, без селектора.

Q: Какие есть 3 способа подключить CSS к HTML?

Встроенный, через атрибут style у элемента; внутренний, через элемент на странице; и внешний, через отдельный файл .css, подключенный тегом в . Для целого сайта обычно выбирают внешний файл.

Q: Переопределяет ли inline CSS внешний CSS?

Да, в большинстве случаев. Объявление в атрибуте style сильнее любого селектора в таблице стилей, какой бы ни была его специфичность. Таблица стилей побеждает только с !important, а встроенный !important сильнее и его.

Q: Можно ли использовать hover в inline CSS?

Нет. Атрибут style принимает только объявления, поэтому псевдоклассы вроде :hover, псевдоэлементы вроде ::before и правила @media туда не записать. Поместите их в элемент или в таблицу стилей.

Inline CSS: атрибут style и 3 способа подключить CSS

Inline CSS записывает объявления прямо в элемент через атрибут style. Разберем синтаксис, когда встроенные стили уместны, почему они сильнее таблиц стилей и чем отличаются от внутреннего и внешнего CSS.

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

Что такое inline CSS

Inline CSS это CSS, записанный прямо в HTML-элементе через атрибут style. Значение атрибута представляет собой список объявлений property: value;, и они применяются только к этому элементу.

<p>A normal paragraph.</p>

<p style="color: #2563eb;">A blue paragraph.</p>

<p style="color: #16a34a; font-weight: bold; font-size: 20px;">
  Green, bold and 20px.
</p>

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

Синтаксис

<element style="property: value; property: value;">

Часть	Пример	Примечание
Атрибут	`style="..."`	Глобальный атрибут: разрешен у любого HTML-элемента
Объявление	`color: #2563eb;`	Тот же синтаксис, что внутри правила таблицы стилей
Несколько объявлений	`padding: 8px; border: 1px solid #e5e7eb;`	Разделяются `;`
Кавычки внутри	`style="font-family: 'Courier New', monospace;"`	Внутри атрибута в двойных кавычках используйте одинарные

Все, что не является объявлением, запрещено. :hover, ::before, @media и селекторам в атрибуте style не место.

3 способа подключить CSS к HTML

CSS попадает на страницу тремя способами. Эта страница посвящена первому; у внешнего и внутреннего CSS своя страница.

Способ	Где находится CSS	Область действия	Типичное применение
Встроенный	Атрибут `style` у одного элемента	Этот элемент	Разовые значения, значения из JavaScript
Внутренний	Элемент `<style>` на странице	Эта страница	Одностраничные демо, шаблоны писем, критический CSS
Внешний	Файл `.css`, подключенный через `<link>`	Все страницы, которые его подключают	Оформление целого сайта

Один и тот же абзац, оформленный тремя способами (внешний файл показан комментарием, потому что превью неоткуда загрузить второй файл):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Three ways</title>
  <!-- External: <link rel="stylesheet" href="styles.css"> -->
  <style>
    /* Internal: one rule styles every matching element */
    .note {
      background: #e5e7eb;
      padding: 8px 12px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <p class="note">Styled by the internal rule.</p>
  <p class="note">Same rule, second paragraph.</p>
  <p class="note" style="background: #f59e0b;">Inline background wins here.</p>
</body>
</html>

Третий абзац сохраняет отступы и скругление из правила .note и меняет только фон, потому что встроенный стиль задает одно это свойство.

Почему встроенные стили побеждают

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline wins</title>
  <style>
    #title { color: #16a34a; }
    p { color: #111827; }
  </style>
</head>
<body>
  <p id="title" style="color: #2563eb;">Blue: the inline style beats the ID selector.</p>
</body>
</html>

Единственное исключение это !important. Объявление в таблице стилей с пометкой !important сильнее обычного встроенного объявления, а встроенный !important сильнее обоих. Именно поэтому встроенные стили усложняют поддержку сайта: чтобы изменить их из таблицы стилей, нужен !important, и начинается гонка. Полный порядок описан на странице про !important.

Когда inline CSS подходит

Встроенные стили уместны, когда значение это данные, а не дизайн: оно разное у каждого элемента и его пишет шаблон или JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Progress</title>
  <style>
    .track { background: #e5e7eb; border-radius: 999px; height: 12px; }
    .bar { background: #2563eb; height: 100%; border-radius: 999px; }
  </style>
</head>
<body>
  <p>Upload</p>
  <div class="track"><div class="bar" style="width: 35%;"></div></div>
  <p>Download</p>
  <div class="track"><div class="bar" style="width: 80%;"></div></div>
</body>
</html>

Внешний вид (цвета, высота, скругление) задан в таблице стилей. Встроенной осталась только ширина, которая у каждой полосы своя. JavaScript пишет тот же атрибут через element.style:

<button id="btn">Make it amber</button>
<p id="msg">Watch this text.</p>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    const msg = document.getElementById('msg');
    msg.style.color = '#f59e0b';
    msg.style.fontWeight = 'bold';
  });
</script>

После клика HTML абзаца выглядит так: style="color: rgb(245, 158, 11); font-weight: bold;". Имена свойств с дефисом в JavaScript пишутся в camelCase (font-weight превращается в fontWeight).

Часто лучший компромисс это CSS-переменная: встроенно задайте только переменную, style="--progress: 35%", а таблица стилей пусть ее использует. Подробнее в разделе переменные CSS.

Чего не умеет inline CSS

Нет состояний и псевдоэлементов. В атрибуте style нельзя написать :hover, :focus или ::before.
Нет медиазапросов. Встроенная ширина не изменится на телефоне.
Повторы. Десять кнопок с одинаковым встроенным стилем означают десять мест для правки.
Трудно переопределить. Его перебивает только !important в таблице стилей.
Content Security Policy. Строгая CSP без 'unsafe-inline' в style-src блокирует атрибуты style, записанные в HTML.

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

Селектор или скобки внутри style. style="p { color: red }" игнорируется. Туда пишут только объявления.
= вместо :. Правильно color: red, а не color=red.
Вложенные двойные кавычки. style="font-family: "Arial"" обрывает атрибут раньше времени. Внутри используйте одинарные кавычки.
Забытые единицы. style="width: 200" игнорируется; пишите 200px. Без единицы можно писать только длину 0.
Весь сайт на встроенных стилях. Вынесите повторяющиеся стили в класс в таблице стилей, а встроенными оставьте значения конкретных элементов.

Часто задаваемые вопросы

Что такое inline CSS?

Inline CSS это CSS, записанный в атрибуте style элемента, например <p style="color: red;">. Объявления действуют только на этот элемент, без селектора.

Какие есть 3 способа подключить CSS к HTML?

Встроенный, через атрибут style у элемента; внутренний, через элемент <style> на странице; и внешний, через отдельный файл .css, подключенный тегом <link rel="stylesheet" href="styles.css"> в <head>. Для целого сайта обычно выбирают внешний файл.

Переопределяет ли inline CSS внешний CSS?

Да, в большинстве случаев. Объявление в атрибуте style сильнее любого селектора в таблице стилей, какой бы ни была его специфичность. Таблица стилей побеждает только с !important, а встроенный !important сильнее и его.

Плохая ли практика inline CSS?

Для оформления целого сайта да: стили повторяются, в них нельзя использовать :hover и медиазапросы, их трудно переопределить. Для разовых значений, которые задает JavaScript или шаблон, например ширины индикатора прогресса или выбранного пользователем цвета, они подходят.

Можно ли использовать hover в inline CSS?

Нет. Атрибут style принимает только объявления, поэтому псевдоклассы вроде :hover, псевдоэлементы вроде ::before и правила @media туда не записать. Поместите их в элемент <style> или в таблицу стилей.

Связанные концепции