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

Описание

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

Пример использования:
<hr style="border: none; height: 3px; background: linear-gradient(to right, #3498db, #e74c3c); margin: 2rem 0;">

Часто используемые свойства:

Свойство Пример Описание
border border: none Убирает стандартную границу
height height: 4px Задает толщину линии
background background: #2c3e50 Цвет или градиент
margin margin: 20px 0 Отступы сверху и снизу

Примеры различных стилей:

<!-- Градиентный разделитель --> <hr style="border: none; height: 4px; background: linear-gradient(90deg, red, blue);"> <!-- Пунктирная линия --> <hr style="border: none; border-top: 2px dashed #7f8c8d;"> <!-- Тонкая серая линия --> <hr style="border: none; height: 1px; background-color: #eee;">

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

<hr id="dynamicHr"> <button onclick="changeHrStyle()">Изменить стиль</button> <script> function changeHrStyle() { const hr = document.getElementById('dynamicHr'); hr.style.border = 'none'; hr.style.height = '5px'; hr.style.background = 'linear-gradient(to right, #1abc9c, #3498db)'; hr.style.borderRadius = '5px'; } </script>

Ограничения inline-стилей:

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

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

  • Используйте для:
    • Быстрого прототипирования
    • Уникальных стилей для одного элемента
    • Динамического изменения стилей через JS
  • Избегайте:
    • Массового применения
    • Дублирования одинаковых стилей
    • Использования для критического CSS

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