Атрибут style у HTML — вбудовані стилі елемента

Опис та застосування

Глобальний атрибут style задає вбудований (inline) CSS стиль для елемента. Допускається використання декількох властивостей і значень, які необхідно розділяти між собою крапкою з комою.

правити

Загальний опис

правити

+ додати пораду чи нотатку

Синтаксис

<element style = "style_definitions">

Атрибут style може отримувати єдине значення:

style

Як значення вказуються стильові правила: спочатку слід ім'я стильової властивості, потім через двокрапку його значення. Стильові властивості поділяються між собою крапкою з комою.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	15	12	≤11

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<p style="color:red; background:yellow; display:inline-block;">Текст на який задано стилі за допомогою атрибуту style</p>

<p class="brand">Тільки клас <code>.brand</code></p>

<p class="brand" style="color: #c92a2a">Клас + <code>style="color:#c92a2a"</code> — виграє інлайн</p>

<p class="brand force" style="color: #c92a2a">Клас із <code>!important</code> + інлайн — тепер виграє таблиця стилів</p>

<div class="card" style="--pad: 26px">Інлайн доречний для змінної: тут <code>--pad: 26px</code></div>
<div class="card">А тут — типові 6px з таблиці стилів</div>

.brand {
  color: #0172ad;
  font-weight: bold;
}
.force {
  color: #0172ad !important;
}
.card {
  --pad: 6px;
  padding: var(--pad);
  border: 1px solid #0172ad;
  margin: 6px 0;
}