<style> - HTML-елемент для стилів

HTML-елемент <style> містить інформацію про стилі для документа або частини документа. Стилі який застосовуються до вмісту документа, що містить елемент <style>.

Елемент <style> використовується для вбудовування CSS-стилів безпосередньо в HTML-документ. Зазвичай його розміщують всередині тега <head>, щоб стилі завантажувалися до того, як браузер почне відображати тіло документа.

Хоча вбудовування стилів може бути корисним для невеликих проектів або для швидкого тестування, на великих сайтів рекомендується використовувати зовнішні таблиці стилів, які підключаються за допомогою елемента <link>. Це покращує кешування та організацію коду.

HTML
<style>...</style>

Атрибути

Цей тег може мати глобальні атрибути.

media

Визначає, для яких медіа-пристроїв призначені ці стилі (наприклад, screen, print, (max-width: 600px)). Це дозволяє створювати адаптивні стилі для різних умов перегляду.

nonce

Криптографічний нонс (number used once), який використовується для дозволу вбудованих стилів у Політиці безпеки контенту (CSP).

title

Визначає назву для набору альтернативних стилів. Якщо декілька елементів <style> або <link> мають однаковий title, вони групуються в один набір стилів.

blocking

Вказує, що певні операції (наприклад, рендеринг сторінки) повинні бути заблоковані до обробки цих стилів.

type

Цей атрибут визначав мову стилів. Раніше він був обов’язковим, але в HTML5 його значення за замовчуванням — text/css, тому його можна опускати.

Технічне резюме

Категорія контенту

Метадані.

Дозволений вміст

Текстовий вміст, що відповідає синтаксису CSS.

Пропуск тегів

Жоден, початковий та кінцевий теги є обов’язковими.

Дозволені батьківські елементи

Будь-який елемент, що приймає метадані. Найчастіше це <head>.

Роль ARIA

Немає відповідної ролі.

DOM інтерфейс

HTMLStyleElement

Приклади використання

Результат
<style>
    h1 {
      color: navy;
    }
    p {
      color: red;
    }
  </style>
  <h1>Приклад сторінки</h1>
  <p>Ця сторінка має синій та червоний текст.</p>

Стилі за замовчуванням

CSS
style {
  display: none;
}

Підтримка браузерів

<style>
blocking
media
type

Останнє оновлення: