Skip to main content

Що робить атрибут style?

HTMLJunior~1 хв читання
Запропонувати правку

Атрибут style використовується для вбудованого (inline) оформлення HTML-елемента, тобто для задання CSS-властивостей прямо всередині тега, без окремого файлу стилів.

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

1. Синтаксис

Атрибут style пишеться всередині відкривального тега, а його значення - це набір CSS-властивостей, розділених крапкою з комою:

html
<p style="color: blue; font-size: 18px;">Приклад тексту</p>

Тут:

  • color: blue; - колір тексту;
  • font-size: 18px; - розмір шрифту.

2. Що можна задати через style

Майже будь-яку CSS-властивість:

  • Колір (color, background-color)
  • Розмір і відступи (width, height, margin, padding)
  • Шрифт (font-family, font-size, font-weight)
  • Межі (border)
  • Вирівнювання (text-align, display, position)

Приклад:

html
<div style="background-color: #eee; padding: 10px; border-radius: 8px;"> Це блок з оформленням через style </div>

3. Пріоритет вбудованих стилів

Якщо елемент має:

  • зовнішній CSS-файл,
  • внутрішній <style> у <head>,
  • і атрибут style,

то вбудований стиль має найвищий пріоритет.

Приклад:

html
<p style="color: red;">Цей текст буде червоним, навіть якщо в CSS задано інший колір.</p>

4. Коли краще не використовувати style

Хоча style зручний для швидких правок, у професійній верстці перевагу віддають:

  • окремим CSS-файлам (style.css),
  • класам (class="btn").

Причини:

  • код стає чистішим і легшим у підтримці,
  • можна миттєво змінити стиль одразу для багатьох елементів,
  • розділяються структура (HTML) і оформлення (CSS).

Підсумок:

ХарактеристикаОпис
ПризначенняЗастосовує CSS-властивості до окремого елемента
Синтаксисstyle="властивість: значення;"
Приклад<p style="color:red;">Текст</p>
ПріоритетНайвищий серед усіх джерел стилів
МінусиПорушує чистоту коду, незручний для масштабних проєктів

Простими словами: style - це спосіб прикрасити елемент напряму, не звертаючись до зовнішнього CSS. Він підходить для дрібних правок, але не для повноцінної стилізації сайту.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку