HTML-тег <style>
Тег <style> задаёт стили элементов страницы. Описание, синтаксис, атрибуты и примеры.
Тег <style> встраивает правила CSS непосредственно в HTML-документ. Он определяет, как элементы на странице должны отображаться, без использования отдельного файла таблицы стилей. Такой подход принято называть внутренним (или встроенным) CSS.
Чтобы загрузить CSS из отдельного файла, используйте элемент <link rel="stylesheet">.
Страница может содержать более одного элемента <style>, и правила из всех них объединяются.
Почему <style> размещается в <head>
CSS внутри тега <style> предназначен для браузера, а не для читателя, поэтому он помещается внутри элемента <head>. Для этого есть веские причины:
- Это блокирующий рендеринг. Браузер должен прочитать и применить CSS, прежде чем сможет отрисовать страницу. Размещение стилей в
<head>позволяет браузеру узнать, как должно выглядеть всё содержимое, до отрисовки тела документа. - Это предотвращает FOUC (мелькание неоформленного содержимого). Если стили определены в конце документа, браузер может кратко отобразить неоформленное содержимое, а затем применить к нему стили — что вызывает заметное мерцание и сдвиг макета.
HTML5 технически допускает размещение элемента <style> внутри <body> (браузер всё равно применит правила), однако это не рекомендуется: это может вызвать перерасчёт макета и описанный выше FOUC. Держите стили в <head>.
В более ранних версиях HTML и в XHTML атрибут type="text/css" был обязателен для тега <style>. В HTML5 он используется по умолчанию и может быть опущен.
Три способа подключения CSS
Тег <style> — лишь один из трёх способов применить CSS. Выбор правильного имеет значение:
| Метод | Как | Подходит для |
|---|---|---|
Инлайновый атрибут style | <p style="color: red;"> | Единичное переопределение на одном элементе. Сложно поддерживать и обладает наивысшей специфичностью — используйте редко. |
Внутренний <style> | Блок <style> в <head> | Стили, нужные только одной странице, или критический CSS, который нужно встроить, чтобы избежать дополнительного запроса. |
Внешний <link rel="stylesheet"> | Отдельный файл .css | Стили, общие для множества страниц. Кэшируются браузером и разделяют содержимое и оформление — стандартный выбор для реальных сайтов. |
Подробное сравнение смотрите в разделе HTML Styles.
Синтаксис
Тег <style> является парным. Содержимое записывается между открывающим (<style>) и закрывающим (</style>) тегами.
Пример HTML-тега <style>:
HTML-тег <style>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: #1c87c9;
}
p {
color: #8ebf42;
}
</style>
</head>
<body>
<h1>Text heading.</h1>
<p>First paragraph.</p>
</body>
</html>Селекторы (h1, p) внутри блока нацелены на элементы тела документа, а объявления в фигурных скобках задают их стили.
Результат
Условное применение стилей с помощью media
Атрибут media позволяет применять блок <style> только тогда, когда соответствующий медиазапрос совпадает — например, только на маленьких экранах, только на экранах (не при печати) или только при печати. Правила блока, чей запрос не совпадает, игнорируются.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!-- Always applies -->
<style>
p {
color: #1c87c9;
}
</style>
<!-- Applies only on screens up to 600px wide -->
<style media="screen and (max-width: 600px)">
p {
color: #8ebf42;
font-size: 20px;
}
</style>
</head>
<body>
<p>Resize the window: this text turns green and grows on narrow screens.</p>
</body>
</html>То же самое можно сделать с помощью элемента <link> (<link rel="stylesheet" media="..." href="...">).
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| media | media_query | Указывает медиа, для которых применяются стили, например screen and (max-width: 600px). Если не указан, стили применяются ко всем медиа. |
| type | text/css | Указывает MIME-тип таблицы стилей. Необязателен в HTML5, так как text/css используется по умолчанию. |
Устаревший атрибут scoped
Вы можете встретить упоминания атрибута scoped, который был призван ограничить действие правил блока <style> родительским элементом и его потомками. Он так и не получил широкой поддержки и был удалён из стандарта HTML — не используйте его. Для ограничения области действия CSS сегодня используйте один из современных подходов:
- Shadow DOM (через пользовательские элементы / веб-компоненты), где стили полностью инкапсулированы и не просачиваются внутрь или наружу.
- Скопированные имена классов — уникальный префикс класса на компонент, задаваемый вручную или генерируемый инструментами, такими как CSS Modules.