Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить атрибут style?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Атрибут `style`** використовується для вбудованого (inline) оформлення HTML-елемента, тобто для задання CSS-властивостей прямо всередині тега, без окремого файлу стилів. Він дозволяє швидко змінити зовнішній вигляд конкретного елемента, але зазвичай застосовується лише для поодиноких або тестових випадків, а не для повноцінної верстки. **Ключове:** інлайн-стиль має найвищий пріоритет серед усіх джерел стилів, але порушує чистоту коду і незручний для масштабних проєктів.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняАтрибут `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. Він підходить для дрібних правок, але не для повноцінної стилізації сайту.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.