<style>

25 января 2023

Тег <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-кода, то вместо этого может быть более эффективной ссылка на внешнюю таблицу стилей.