HTML - тег <style>


Пример

Использование элемента <style> для применения простой таблицы стилей к HTML-документу:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>

Другие примеры «Попробуйте сами» ниже.


Определение и использование

Тег <style>используется для определения информации о стиле (CSS) для документа.

Внутри <style>элемента вы указываете, как элементы HTML должны отображаться в браузере.


Советы и примечания

Примечание. Когда браузер читает таблицу стилей, он форматирует HTML-документ в соответствии с информацией, содержащейся в таблице стилей. Если некоторые свойства были определены для одного и того же селектора (элемента) в разных таблицах стилей, будет использовано значение из последней прочитанной таблицы стилей (см. пример ниже)!

Совет: Чтобы создать ссылку на внешнюю таблицу стилей, используйте тег <link> .

Совет. Чтобы узнать больше о таблицах стилей, прочитайте наш учебник по CSS .


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

Element
<style> Yes Yes Yes Yes Yes


Атрибуты

Attribute Value Description
media media_query Specifies what media/device the media resource is optimized for
type text/css Specifies the media type of the <style> tag

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

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


Атрибуты события

Тег <style>также поддерживает атрибуты событий в HTML .


Дополнительные примеры

Пример

Несколько стилей для одних и тех же элементов:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Связанные страницы

Учебник по HTML: HTML CSS

Учебник по CSS : Учебник по CSS

Справочник по HTML DOM: объект стиля


Настройки CSS по умолчанию

Большинство браузеров будут отображать <style>элемент со следующими значениями по умолчанию:

style {
  display: none;
}