Тег <style> используется для определения стилей для HTML-документов. Он является важным компонентом каскадных таблиц стилей (CSS), которые позволяют разработчикам создавать визуально привлекательные веб-страницы, определяя различные стили, такие как цвета, шрифты и макеты.

Синтаксис тега <style>

<style>
    /* Код CSS здесь */
</style>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <style> не считается семантическим, так как не придает никакого конкретного значения содержимому.

Примеры использования

Встраивание правил CSS:

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color: #f2f2f2;
            }
            h1 {
             color: blue;
            }
        </style>
    </head>
    <body>
        <h1>Добро пожаловать на мой сайт!</h1>
        <p>Это пример параграфа.</p>
    </body>
</html>

Ссылка на внешнюю таблицу стилей:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <h1>Добро пожаловать на мой сайт!</h1>
        <p>Это пример параграфа.</p>
    </body>
</html>

styles.css

body {
    background-color: #f2f2f2;
}

h1 {
    color: blue;
}

Для чего использовать тег <style>

Используйте <style> во всех этих случаях с осторожностью — почему, рассказали в статье «Почему инлайнить стили — плохо».

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

Атрибуты тега <style>

type — MIME-тип таблицы стилей.

media — типы носителей, для которы будет использоваться стиль.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

На тег <style> наложены те же ограничения, что и на CSS. Его нельзя использовать для изменения внешнего вида или поведения определенных элементов, таких как элементы формы, iframe и некоторые псевдоэлементы.

Нюансы

  • Если на одной странице используется несколько тегов <style>, стили, заданные в более поздних тегах, отменяют стили, заданные в более ранних тегах.
  • Если в тег <style> необходимо вставить большое количество CSS-кода, то вместо этого может быть более эффективной ссылка на внешнюю таблицу стилей.

Поддержка браузеров

Тег поддерживается всеми современными браузерами.

Актуальная информация — на сaniuse.

Альтернативные теги

Альтернативных тегов для тега <style> не существует.

Чем заменить тег

Прямой замены тегу <style> не существует.

Актуальность

Тег <style> не является устаревшим.


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023