<style>
- 25 января 2023
Тег <style>
используется для определения стилей для HTML-документов. Он является важным компонентом каскадных таблиц стилей (CSS), которые позволяют разработчикам создавать визуально привлекательные веб-страницы, определяя различные стили, такие как цвета, шрифты и макеты.
Синтаксис тега <style>
<style>
/* Код CSS здесь */
</style>
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <style>
не считается семантическим, так как не придает никакого конкретного значения содержимому.
Примеры использования
Встраивание правил CSS:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f2f2f2;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Добро пожаловать на мой сайт!</h1>
<p>Это пример параграфа.</p>
</body>
</html>
Ссылка на внешнюю таблицу стилей:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Добро пожаловать на мой сайт!</h1>
<p>Это пример параграфа.</p>
</body>
</html>
styles.css
body {
background-color: #f2f2f2;
}
h1 {
color: blue;
}
Для чего использовать тег <style>
Используйте <style>
во всех этих случаях с осторожностью — почему, рассказали в статье «Почему инлайнить стили — плохо».
- Для придания стиля определенным элементам на странице, таким как заголовки, абзацы или списки.
- Для добавления анимации и переходов: используйте для добавления анимации и переходов, которые улучшают восприятие страницы пользователем.
- Для стилизации элементов формы: используйте для стилизации элементов формы, таких как поля ввода и кнопки.
- Чтобы отменить стили браузера по умолчанию: используйте, чтобы отменить стили по умолчанию, применяемые браузером к определенным элементам.
- Чтобы добавить пользовательские шрифты: используйте для импорта и применения пользовательских шрифтов на странице.
- Для придания стиля таблицам: используйте для применения стилей к таблицам, таких как добавление границ, изменение цвета фона и форматирование заголовков таблиц.
Атрибуты тега <style>
type
— MIME-тип таблицы стилей.
media
— типы носителей, для которы будет использоваться стиль.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
На тег <style>
наложены те же ограничения, что и на CSS. Его нельзя использовать для изменения внешнего вида или поведения определенных элементов, таких как элементы формы, iframe
и некоторые псевдоэлементы.
Нюансы
- Если на одной странице используется несколько тегов
<style>
, стили, заданные в более поздних тегах, отменяют стили, заданные в более ранних тегах. - Если в тег
<style>
необходимо вставить большое количество CSS-кода, то вместо этого может быть более эффективной ссылка на внешнюю таблицу стилей.
Поддержка браузеров
Тег поддерживается всеми современными браузерами.
Актуальная информация — на сaniuse.
Альтернативные теги
Альтернативных тегов для тега <style>
не существует.
Чем заменить тег
Прямой замены тегу <style>
не существует.
Актуальность
Тег <style>
не является устаревшим.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023