HTML тег - style - определение и примеры использования
Меню
Веб-разработка
Тег style HTML

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


Тег <style> - синтаксис и код

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

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

<html>
<head>
<style>
  h3 {color:red;}
  p {color:green;}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Параграф.</p>
</body>
</html>

Заголовок

Параграф


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

  • HTML - тег <style> используется для определения информации о стиле (CSS) документа;
  • Внутри элемента <style> вы указываете, как HTML-элементы должны отображаться в браузере;
  • Элемент <style> должен быть включен в раздел <head> документа.
Рекомендация: чтобы создать ссылку на внешнюю таблицу стилей, используйте тег <link>.
Примечание: когда браузер читает таблицу стилей, он форматирует HTML-документ в соответствии с информацией, содержащейся в таблице стилей. Если некоторые свойства были определены для одного и того же селектора (элемента) в разных таблицах стилей, будет использовано значение из последней прочитанной таблицы стилей (см. пример ниже)!

Поддержка <style> браузерами

Yandex Browser Поддерживает
Edge Поддерживает
Firefox Поддерживает
Safari Поддерживает
Opera Поддерживает

Атрибуты

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

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

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

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

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


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

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

<html>
<head>
<style>
  h3 {color:red;}
  p {color:green;}
</style>
<style>
  h3 {color:green;}
  p {color:red;}
</style>
</head>
<body>
  <h1>Это заголовок</h1>
  <p>Это параграф.</p>
</body>
</html>

Заголовок

Параграф


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

Руководство по HTML: HTML CSS


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

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

style {
  display: none;
}


Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

 

Поделиться ссылкой