<style> – елемент стилістичної інформації

Елемент HTML <style> (стиль) містить стилістичну інформацію про документ або його частину. Він містить CSS, який застосовується до вмісту документа, що містить елемент <style>.

Спробуйте його в дії

Елемент <style> повинен додаватися всередині <head> документа. Загалом, краще розміщувати стилі в зовнішніх списках стилів і застосовувати їх за допомогою елементів <link>.

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

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

Атрибути

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

blocking

Цей атрибут явно вказує на те, що певні операції повинні бути заблоковані при отриманні критичних підресурсів. Імпортовані списки стилів, як правило, вважаються критичними підресурсами, тоді як background-image і шрифти — ні.

  • render: Візуалізація вмісту на екрані заблокована.
media

Цей атрибут визначає те, до яких носіїв застосовуватиметься стиль. Його значення є медійним запитом, який усталено дорівнює all, якщо цей атрибут відсутній.

nonce

Криптографічний однораз (число одноразового використання), призначений для того, щоб дозволити вбудовані стилі в Content-Security-Policy style-src. Сервер повинен згенерувати унікальне значення одноразу щоразу, коли передає політику. Критично важливо надати однораз, який не можна вгадати, оскільки без цього обхід політики ресурсу є тривіальним.

title

Цей атрибут задає набори альтернативних списків стилів.

Нерекомендовані атрибути

type

Цей атрибут не повинен бути заданий: якщо він заданий, то єдиними допустимими значеннями є порожній рядок і регістронезалежний збіг з text/css.

Приклади

Простий список стилів

У наступному прикладі до документа застосовується дуже простий список стилів:

<!doctype html>
<html lang="uk">
  <head>
    <meta charset="UTF-8" />
    <title>Тестова сторінка</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Це мій абзац.</p>
  </body>
</html>

Результат

Кілька елементів style

У цьому прикладі додано два елементи <style> — зверніть увагу на те, як конфліктні оголошення в пізнішому елементі <style> переважають ті, що в ранішому, якщо вони мають рівну специфічність.

<!doctype html>
<html lang="uk">
  <head>
    <meta charset="UTF-8" />
    <title>Тестова сторінка</title>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    </style>
    <style>
      p {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>Це мій абзац.</p>
  </body>
</html>

Result

Додання медійного запиту

Цей приклад заснований на попередньому, з доданням атрибута media до другого елемента <style>, тому він застосовується лише тоді, коли ширина області перегляду менша за 500px.

<!doctype html>
<html lang="uk">
  <head>
    <meta charset="UTF-8" />
    <title>Тестова сторінка</title>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    </style>
    <style media="all and (max-width: 500px)">
      p {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>Це мій абзац.</p>
  </body>
</html>

Результат

Технічний підсумок

Категорії вмісту Вміст метаданих, а якщо є атрибут scoped: потоковий вміст.
Дозволений вміст Текстовий вміст, що відповідає атрибуту type, тобто text/css.
Пропуск тега Жодний тег пропускати не можна.
Дозволені батьківські елементи Всі елементи, що приймають вміст метаданих.
Неявна роль ARIA Немає відповідної ролі
Дозволені ролі ARIA Жодної дозволеної ролі
Інтерфейс DOM HTMLStyleElement

Специфікації

Специфікація
HTML Standard (HTML)
# the-style-element

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
style
Chrome Full support 1
 Edge Full support 12
 Firefox Full support 1
 Internet Explorer Full support 3
 Opera Full support 3.5
 Safari Full support 1
 WebView Android Full support 1
 Chrome Android Full support 18
 Firefox for Android Full support 4
 Opera Android Full support 10.1
 Safari on iOS Full support 1
 Samsung Internet Full support 1.0
media
Chrome Full support 1
 Edge Full support 12
 Firefox Full support 1
 Internet Explorer Full support 3
 Opera Full support 3.5
 Safari Full support 1
 WebView Android Full support 1
 Chrome Android Full support 18
 Firefox for Android Full support 4
 Opera Android Full support 10.1
 Safari on iOS Full support 1
 Samsung Internet Full support 1.0
title
Chrome Full support 1
 Edge Full support 12
 Firefox Full support 1
 Internet Explorer Full support 3
 Opera Full support 3.5
 Safari Full support 1
 WebView Android Full support 1
 Chrome Android Full support 18
 Firefox for Android Full support 4
 Opera Android Full support 10.1
 Safari on iOS Full support 1
 Samsung Internet Full support 1.0
type
Нерекомендоване
Chrome Full support 1
 Edge Full support 12
 Firefox Full support 1
footnote
Internet Explorer Full support 3
 Opera Full support 3.5
 Safari Full support 1
 WebView Android Full support 1
 Chrome Android Full support 18
 Firefox for Android Full support 4
 Opera Android Full support 10.1
 Safari on iOS Full support 1
 Samsung Internet Full support 1.0

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.