HTML-тег `<style>`

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

TIP

Для подключения внешней таблицы стилей используйте тег <link>.

Содержимое тега <style> предназначено для браузеров, поэтому оно размещается внутри элемента <head>. Скрипты на странице обычно размещаются после кода CSS.

На одной странице можно использовать несколько элементов <style>.

DANGER

В более ранних версиях HTML и в XHTML атрибут type="text/css" был обязательным для тега <style>.

Синтаксис

Тег <style> используется парами. Содержимое записывается между открывающим (<style>) и закрывающим (</style>) тегами.

Пример использования HTML-тега `<style>`:

HTML-тег <style>

html

<!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>

Try it Yourself »

Результат

style example

Атрибуты

Атрибут	Значение	Описание
media	media_query	Указывает тип медиа, для которого применяются стили. По умолчанию стили применяются ко всем устройствам.
scoped	scoped	Указывает, что стиль применяется только к элементу, содержащему тег `<style>`, и его потомкам. При использовании тег `<style>` должен находиться внутри элемента, который он стилизует, а не в `<head>`. Примечание: Этот атрибут устарел в HTML5.2 и не рекомендуется к использованию в современной разработке.
type	text/css	Указывает MIME-тип таблицы стилей. В HTML5 он необязателен, так как `text/css` является значением по умолчанию.

Практика

Каковы особенности HTML-тега style, показанные на сайте w3docs?

HTML-тег style является встроенным элементом CSS.Он используется внутри раздела 'head'.HTML-тег style нельзя использовать внутри тега 'body'.Правила стиля внутри тега style влияют на элементы всей веб-страницы.HTML-тег style не поддерживает все глобальные атрибуты.

HTML-тег <style> ​

Синтаксис ​

Пример использования HTML-тега <style>: ​

Результат ​