Тег <style> прописывается внутри <head> и содержит CSS-правила прямо внутри HTML-документа, без отдельного файла - в отличие от <link>, который подключает CSS-файл извне. Важно не путать тег <style> с атрибутом style="" - это разные вещи, и путают их очень часто.
В этой статье
<style>
p { color: #1e7a30; }
</style>Тег style и атрибут style - разные вещи
Тег <style> - один блок CSS-правил на всю страницу (или её часть), с обычным CSS-синтаксисом внутри (селектор плюс фигурные скобки). Атрибут style="" - совсем другое: он ставится прямо на конкретный тег (<div style="color: red">, <p style="..."> и на любой другой) и действует только на этот один элемент, без селекторов - сразу список CSS-свойств через точку с запятой. Про инлайн-атрибут style подробно рассказано в отдельном разделе курса - инлайн-стиль: атрибут style.
Пример: как работает тег style
Переключите чекбокс - CSS-правило внутри тега <style> буквально включается и выключается:
Здесь буквально включается и выключается тот же самый тег <style>, что показан в примере кода выше, а не имитация другими средствами - через встроенное в браузер свойство disabled у подключённой таблицы стилей.
Атрибут media - условные стили
media задаёт, при каком носителе применяются правила из этого тега. По умолчанию (без атрибута) это all - стили работают везде. Значение media="print" ограничивает блок только версией для печати - на экране эти правила вообще не действуют, а сработают, только если страницу отправят на печать. Атрибут принимает и полноценный медиа-запрос, например media="(max-width: 600px)" - тогда блок включается и выключается вместе с шириной экрана, без единой строчки JavaScript.
<style media="print">
body { font-size: 12pt; color: #000; }
</style>
<style media="(max-width: 600px)">
.sidebar { display: none; }
</style>В первом блоке правила применятся только на печатной версии страницы. Во втором - только пока ширина экрана не больше 600px, а как только окно станет шире, блок сам отключится - браузер проверяет условие постоянно, а не один раз при загрузке.
Пример: стиль, который работает только при печати
Переключите чекбокс - он меняет значение media у тега <style> между print и all, показывая, действует правило прямо сейчас или нет:
Это не имитация - у тега <style> в этом примере на самом деле меняется значение media, и браузер решает, применять правило или нет, точно так же, как решал бы для реальной печати страницы.
Остальные атрибуты тега style: blocking, nonce, type
| Атрибут | Статус | Комментарий |
|---|---|---|
media | актуален | Условие применения блока - носитель или медиа-запрос, разобрано выше |
blocking="render" | актуален | Явно блокирует отрисовку страницы, пока стили не применены. Нужен только тегу <style>, добавленному через JavaScript - у тега, который браузер находит при обычном разборе HTML, блокировка уже включена по умолчанию |
nonce | актуален | Разовый код, разрешающий inline-стили при включённой строгой политике безопасности (Content-Security-Policy). Нужен, только если на сайте настроен CSP |
type | не нужен | Раньше требовалось писать type="text/css", сейчас атрибут устарел - браузеры и так знают, что внутри тега CSS |
<script>
var s = document.createElement('style');
s.textContent = '.hero { opacity: 1; }';
s.setAttribute('blocking', 'render');
document.head.appendChild(s);
</script>
<style nonce="a8fJ92kLq">
.hero { opacity: 1; }
</style>Оба примера - редкие, продвинутые случаи: blocking нужен, только если тег <style> создаётся скриптом уже после загрузки страницы, а nonce - только если на сайте настроен строгий Content-Security-Policy. На обычной странице без этого ни один из атрибутов не понадобится.
style или link - что использовать
Оба тега подключают CSS, но для разных задач. <link> ссылается на отдельный файл - браузер загружает его один раз и хранит в кэше, поэтому при переходе на следующую страницу сайта эти стили уже не нужно скачивать заново. <style> - часть самого HTML-документа: он не кэшируется отдельно и скачивается с каждой страницей заново, зато не требует лишнего сетевого запроса и применяется мгновенно, ещё до того, как файл через <link> вообще успеет загрузиться.
Поэтому на практике часто используют оба сразу: через <style> в head кладут только "критические" стили для самого первого экрана страницы - то, что видно сразу при загрузке, а основную часть CSS подключают отдельным файлом через <link>. Для небольшой страницы или тестового примера разница не так важна, а вот на крупном сайте с десятками страниц дублировать весь CSS через <style> на каждой из них - лишняя нагрузка на загрузку.
Типичные ошибки при работе с тегом style
С <style> ошибки почти всегда завязаны либо на путаницу с одноимённым атрибутом, либо на порядок нескольких блоков стилей на странице:
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Путают тег <style> с атрибутом style="" | Ищут "как работает style" и получают код одного, когда на самом деле нужен другой - это разные механизмы с разным синтаксисом | Тег <style> - CSS-блок с селекторами на всю страницу, атрибут style - свойства для одного элемента |
В коде несколько тегов <style> с конфликтующими правилами | При одинаковой специфичности побеждает правило из тега, который идёт в коде позже - независимо от того, что "логичнее" | Не дублировать одни и те же селекторы в разных <style>, при конфликте проверять порядок |
<style> стоит вне <head> и <body> - например, до <!DOCTYPE html> | Невалидная разметка - браузер может проигнорировать тег или переместить его непредсказуемо | Тег должен находиться внутри <head> (стандартное место) или внутри <body>, если стили нужны только для конкретного фрагмента страницы |
Тег <style> добавлен через JavaScript без blocking="render" | Страница успевает отрисоваться без этих стилей, а через мгновение "дёргается" - эффект мелькания неоформленного контента (FOUC) | Добавлять blocking="render", если такой тег действительно должен остановить отрисовку до применения стилей |
Через <style> дублируют весь CSS сайта на каждой странице | В отличие от файла через <link>, содержимое <style> не кэшируется отдельно - браузер скачивает те же стили заново с каждой страницей | В <style> держать только критические стили первого экрана, остальное - через <link> |
