САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

На сайте нет рекламы

HTML Тег <style>



Пример

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

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

<h1>Заголовок</h1>
<p>Параграф.</p>

</body>
</html>
Попробуйте сами »

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

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

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


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

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

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


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

Элемент
<style> Да Да Да Да Да


Атрибуты

Атрибут Значение Описание
media media_query Указывает, для какого носителя/устройства оптимизирован медиаресурс
type text/css Указывает тип носителя тега <style>

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

Тег <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>Это заголовок</h1>
<p>Это параграф.</p>

</body>
</html>
Попробуйте сами »

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

HTML Учебник: HTML CSS

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

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


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

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

style {
  display: none;
}