Атрибут style тега <main>

Описание

Атрибут style для тега <main> позволяет задавать CSS-стили непосредственно для основного содержимого страницы. Эти стили применяются только к этому конкретному элементу и имеют наивысший приоритет (кроме стилей с !important).

Пример использования:
<main style="background-color: #f5f5f5; padding: 20px; border-radius: 8px;"> <h1>Стилизованный контент</h1> <p>Основное содержимое страницы с индивидуальным оформлением.</p> </main>

Особенности inline-стилей:

Характеристика Описание Пример
Приоритет Выше, чем внешние и внутренние стили Переопределяет CSS из <style> и .css файлов
Синтаксис Как в CSS, но без селекторов style="color: red; margin: 0;"
Производительность Может снижать при массовом использовании Лучше для единичных элементов

Рекомендации по использованию:

  • Используйте для разовых стилевых правок
  • Избегайте для сложной стилизации - лучше CSS-классы
  • Не злоупотребляйте - усложняет поддержку кода
  • Для динамических стилей предпочтительнее JavaScript + классы
  • Используйте camelCase для JavaScript-доступа

Динамическое изменение стилей:

<main id="main-content"> <h1>Динамические стили</h1> <button onclick="changeStyle()">Изменить оформление</button> </main> <script> function changeStyle() { const main = document.getElementById('main-content'); main.style.backgroundColor = '#e3f2fd'; main.style.padding = '25px'; main.style.borderLeft = '4px solid #2196F3'; } </script>

Ограничения:

  • Не поддерживает медиа-запросы
  • Нет возможности использовать псевдоклассы
  • Сложно переопределить (требуется !important в CSS)
  • Увеличивает размер HTML-документа

Лучшие практики:

<!-- Плохо: избыточные inline-стили --> <main style="margin: 0; padding: 20px; background: white; border: 1px solid #ddd; border-radius: 4px;"> ... </main> <!-- Хорошо: вынесено в CSS класс --> <main class="content-wrapper"> ... </main> <style> .content-wrapper { margin: 0; padding: 20px; background: white; border: 1px solid #ddd; border-radius: 4px; } </style>

Примечание: Хотя атрибут style удобен для быстрых прототипов и единичных стилевых правок, в production-коде рекомендуется использовать внешние CSS-файлы или CSS-модули для лучшей поддерживаемости и производительности.