Пример
Использование элемента <style> для применения простой таблицы стилей к HTML-документу:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Абзац.</p>
</body>
</html>
Попробуйте сами »
Дополнительные примеры "Попробуйте сами" ниже.
Определение и использование
Тег <style> используется для определения информации о стиле (CSS) для документа.
Внутри элемента <style> вы указываете, как HTML-элементы должны отображаться в браузере.
Элемент <style> должен быть включен внутри раздела <head> документа.
Советы и примечания
Примечание: Когда браузер читает таблицу стилей, он форматирует 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;
}