Атрибут style записывает CSS-правила прямо в тег, минуя отдельную таблицу стилей: style="color: teal; font-size: 18px;". Такую запись называют инлайн-стилем - третьим способом подключить CSS к странице, помимо тега <style> и внешнего файла. Эти три способа подробно сравниваются в уроке Три способа подключения CSS.
<p style="color: teal; font-size: 18px;">Текст заметки</p>В этой статье
- Атрибут style в HTML: что это и как работает
- Как записать значение атрибута style: синтаксис
- Приоритет style: что сильнее - инлайн-стиль или класс
- CSS-переменные в атрибуте style
- Атрибут style в JavaScript
- Когда style не стоит использовать вместо класса
- Частые ошибки с атрибутом style
- Шпаргалка по атрибуту style
Атрибут style в HTML: что это и как работает
Атрибут style входит в глобальные атрибуты и допустим на любом теге, но действует только на тех, которые отображаются на странице. Его значение - не произвольный текст, а набор CSS-деклараций: те же пары «свойство: значение», что пишут внутри фигурных скобок в таблице стилей, только без селектора и без самих скобок. Браузер разбирает этот блок отдельно для каждого тега и применяет получившиеся правила только к нему одному.
Поэтому style удобен для точечной настройки: можно один раз поправить конкретный элемент, но при нескольких одинаковых блоках такую запись придётся повторять в каждом теге - в отличие от class, где одно название класса управляет сразу группой элементов.
Как записать значение атрибута style: синтаксис
Внутри style декларации разделяют точкой с запятой: style="свойство: значение; свойство: значение;". Правило простое, но есть особенности, из-за которых стиль ломается незаметно.
Пример: как браузер разбирает разные варианты записи
Выберите вариант записи и посмотрите, какие свойства браузер действительно применил.
Самая неожиданная деталь - пропущенная точка с запятой между двумя декларациями делает обе нерабочими, а не только вторую: браузер читает всю строку как одно нераспознанное свойство и отбрасывает её целиком. А вот лишние точки с запятой, двойные пробелы вокруг двоеточия и пустая строка в конце - не ошибка, браузер их просто игнорирует.
Приоритет style: что сильнее - инлайн-стиль или класс
У инлайн-стиля очень высокий приоритет в каскаде - выше любого обычного селектора в таблице стилей, будь то класс, id или тег. Поэтому style обычно побеждает правило класса, даже если класс написан позже по тексту CSS-файла. Но у этого приоритета есть потолок: правило с пометкой !important в таблице стилей снова побеждает обычный инлайн-стиль.
Пример: style против класса с !important
У карточки есть класс с правилом color: blue !important. Включите стиль в атрибуте и сравните, что сильнее.
Но и это можно обойти: если пометку !important добавить не только в класс, но и прямо в сам инлайн-стиль, побеждает снова он - внутри «важных» правил браузер опять сравнивает их обычным образом, а у инлайн-записи в этом сравнении приоритет выше, чем у любого селектора. Двойной !important обычно значит, что в CSS накопился конфликт. Его лучше распутать, а не усиливать новыми перебивающими правилами.
CSS-переменные в атрибуте style
Менее известная возможность style - через него можно задать не только обычное CSS-свойство, но и пользовательскую переменную, название которой начинается с двух дефисов: style="--accent: #ffb199;". Саму переменную при этом читает правило в таблице стилей через функцию var(), а инлайн-стиль лишь подставляет ей значение для одного конкретного элемента.
Пример: цвет карточки через CSS-переменную в style
Правило в CSS берёт цвет из переменной --accent. Кнопки задают эту переменную через атрибут style у блока.
Способ удобен, когда значение в стилях должно поменяться у одного элемента, а правило, которое его использует, при этом остаётся общим для всех - например, одна и та же карточка в разных местах страницы получает разный акцентный цвет, не дублируя весь набор CSS-свойств.
Атрибут style в JavaScript
В JavaScript у каждого элемента есть свойство style - отдельный объект с одним CSS-свойством на каждое поле. Названия через дефис в этом объекте превращаются в camelCase: font-weight становится style.fontWeight. Можно задавать свойства по одному, либо заменить всю строку целиком через style.cssText.
const box = document.querySelector(".box");
box.style.color = "crimson"; // одно свойство
box.style.setProperty("--accent", "#a9c9ff"); // CSS-переменная
box.style.cssText = ""; // очистить значение атрибута
box.removeAttribute("style"); // убрать атрибут целикомПример: разница между очисткой и удалением style
Нажимайте кнопки по очереди: атрибут меняется, а строка внизу показывает, что именно видит браузер.
Разница между style.cssText = "" и removeAttribute("style") заметна только в коде, а не на экране: после очистки атрибут остаётся на теге с пустым значением, hasAttribute("style") вернёт true. После удаления атрибута на теге не остаётся вовсе, и тот же метод вернёт false. Для скрипта, который проверяет наличие style, это разные состояния.
Когда style не стоит использовать вместо класса
Инлайн-стиль удобен для значения, которое вычисляется в скрипте и относится ровно к одному элементу: координаты перетаскиваемого блока, цвет по результату вычисления, ширина прогресс-бара. Как только одно и то же оформление нужно повторить у нескольких тегов, style превращается в дублирование кода: правило придётся вписывать в каждый тег заново и так же вручную править в каждом месте при любом изменении.
Для повторяющегося оформления подходит class: одно правило в таблице стилей меняет сразу все элементы с этим названием. Из-за высокого приоритета style ещё и мешает переопределять стиль через класс при наведении, медиазапросе или состоянии - тогда правило из CSS приходится дополнительно перебивать через !important, вместо обычного правила.
Частые ошибки с атрибутом style
Часть ошибок с style незаметна на глаз - стиль просто «не работает», и непонятно почему.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
style="color:red font-weight:bold" без точки с запятой | Браузер видит одну нераспознанную запись, не применяется ни одно из двух свойств | Разделять декларации точкой с запятой: color:red; font-weight:bold; |
style="fontWeight: bold" в camelCase | В самом атрибуте такое название свойства браузер не распознаёт, стиль не применяется | В атрибуте писать через дефис: font-weight: bold. CamelCase работает только у объекта element.style в JavaScript |
| Одинаковый style скопирован в десяток тегов | Правило оформления продублировано, при правке нужно менять каждый тег отдельно | Вынести повторяющееся оформление в класс и правило CSS |
style="" вместо удаления атрибута | Атрибут остаётся на теге пустым, скрипты видят style как существующий | Для полного удаления использовать removeAttribute("style") |
| Правило в style пытаются перебить классом | Инлайн-стиль почти всегда сильнее обычного селектора класса, класс не срабатывает | Лучше убрать правило из style и перенести в класс. Пометка !important в CSS нужна только в крайнем случае |
Шпаргалка по атрибуту style
| Правило | Что запомнить |
|---|---|
| Где работает | На любом теге |
| Синтаксис значения | свойство: значение; свойство: значение; |
| Разделитель деклараций | Точка с запятой |
| Пропущенная точка с запятой | Ломает обе соседние декларации |
| Приоритет в каскаде | Выше обычного селектора класса или id |
| Что сильнее style | Правило с !important в CSS |
| Что сильнее это правило | Инлайн-стиль со своим !important |
| CSS-переменная в style | style="--name: значение;" |
| Свойство в JS | element.style.fontWeight |
| Очистить значение | style.cssText = "" (атрибут остаётся) |
| Удалить атрибут | removeAttribute("style") |
