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;
}