Тег <style>
Описание
Тег <style> предназначен для встраивания CSS-стилей непосредственно в HTML-документ. Это контейнерный тег, который обычно размещается в разделе <head>, но может использоваться и в теле документа (с ограничениями).
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
}
</style>
</head>
Ключевые особенности:
- Может содержать любые валидные CSS-правила
- Поддерживает медиа-запросы внутри стилей
- Допускается несколько тегов style в документе
- Приоритетность: после внешних стилей, перед inline-стилями
- Может использоваться в body (но не рекомендуется)
Рекомендации по использованию:
- Размещайте в
<head>для оптимальной производительности - Для больших проектов используйте внешние CSS-файлы
- Применяйте для критического CSS (above-the-fold)
- Используйте media-атрибут для адаптивных стилей
- Избегайте
!importantво встроенных стилях
Тег <style> является важным инструментом управления представлением веб-страниц, но требует взвешенного подхода к балансу между встроенными и внешними стилями.
Атрибуты
| media | Определяет медиа-тип для стилей |
| type | Указывает MIME-тип (обычно "text/css") |
| nonce | Криптографический nonce для CSP |
| title | Альтернативные наборы стилей |
| blocking | Указывает что ресурс должен блокировать рендеринг |
| accesskey | Горячая клавиша для активации |
| class | CSS-классы для стилизации |
| contenteditable | Разрешает редактирование |
| dir | Направление текста |
| hidden | Скрывает элемент |
| id | Уникальный идентификатор |
| lang | Язык содержимого |
| style | Инлайновые стили |
| tabindex | Порядок перехода |
| title | Всплывающая подсказка |
| translate | Определяет возможность перевода |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 2.0 | 1.0 | 3.5 | 1.0 | 1.0 |