HTML <style> тег

  • Предыдущая страница <strong>
  • Следующая страница <sub>

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

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

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

Обратите внимание, что элемент style определяет встроенные в документ CSS стили, а элемент link используется для импорта стилей из внешних таблиц стилей.

Элемент style может出现在 различных частях документа HTML. Документ может содержать несколько элементов style, поэтому не нужно добавлять все стили в раздел head. Эта функция особенно полезна при использовании шаблонных двигателей для генерации страниц, так как это позволяет补充 стили, определенные шаблоном, специфичными для страницы стилями.

См. также:

HTML курс:HTML CSS

CSS курс:Учебник CSS

HTML DOM справочник:Объект Style

Пример

Пример 1

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

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это абзац.</p>
</body>
</html>

Попробуйте сами

Пример 2

Множественные стили для одного и того же элемента:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это абзац.</p>
</body>
</html>

Попробуйте сами

Подсказки и комментарии

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

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

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

Свойство

Свойство Значение Описание
media Медиа-запросы Определяет媒体, используемые для стиля.
type text/css Определяет тип медиа для тега <style>.

Глобальные свойства

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

свойства событий

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

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

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

style {
  display: none;
}

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <strong>
  • Следующая страница <sub>