Приветствую вас, дорогие друзья!

При верстке страницы, иногда, возникает необходимость выделения заголовка или какого-то блока на странице горизонтальной линией. Например, вот так:

Такую черту можно сделать несколькими способами. Сегодня мы рассмотрим вариант с добавлением горизонтальной линии HTML-тегом.

Специальный HTML-тег для задания горизонтальной линии

Итак, какой из тегов HTML рисует горизонтальную линию? Как это ни странно, в HTML для этой цели предусмотрен специальный тег <hr>. Внешний вид такой линии зависит от заданных параметров.

Пример использования:

В примере для <hr> не задано никаких параметров визуализации и результат выглядит вот так:

Горизонтальная линия HTML

---

В данном случае для тега были применены параметры, прописанные в теме WordPress моего сайта. В вашем случае горизонтальная линия HTML может выглядеть по-другому.

Визуализация горизонтальной линия HTML с помощью атрибутов

Для тега <hr> можно использовать специальные атрибуты, которые позволят задать необходимые параметры внешнего вида. Вот перечень доступных для использования атрибутов:

• align — выравнивание по горизонтали. Доступные значения: center, left, right. По умолчанию задано выравнивание по центру.
• color – цвет. Задается шестнадцатеричным числом или названием цвета.
• noshade — линия без трехмерных эффектов. Трехмерный эффект работает только в том случае если для линии не был задан цвет.
• size – толщина. Задается любым целым положительным числом. 0 задает толщину равную 1 пикселю.
• width – ширина. Можно задавать в пикселях или процентах.

Пример использования данных атрибутов:

Вот что получается:

Горизонтальная линия HTML

---

Стилизация горизонтальной линии HTML с помощью CSS

Так же для стилизации тега <hr> вы можете использовать CSS-стили. Задавать визуальное оформление с помощью стилей целесообразно в том случае если у вас достаточно часто на странице используется тег <hr>, так как это позволить существенно сократить размер кода страницы. Да и вообще, на мой взгляд, это удобнее.

Задать стили для тега <hr> вы можете двумя способами:

1. 1.В теле HTML-страницы перед закрытием тега при помощи тега
   
2. 2.Прописать стили оформления в файле style.css

Для стилизации горизонтальной линии HTML вы можете использовать следующие CSS-стили:

• width – задание ширины в пикселях или процентах
• height – высота в пикселях
• background-color – цвет линий
• border – при помощи данного стиля можно задать обводку для линии
• border-radius – задает скругление углов
• margin – отступ элемента по верхнему, правому, нижнему и левому краю. Для выравнивания по центу необходимо задать значение auto.
• float – стиль задающий обтекание элемента. В данном случае можно использовать для выравнивания по левому или по правому краю.

Если вам нужно задать одинаковый стиль для всех тегов <hr> на вашем сайте, то необходимо использовать следующий селектор:

В случае если вам нужно задать стилизацию для какого-то конкретного тега <hr> вы можете присвоить ему уникальный класс. Для этого внутри тега задаем название класса.

Например:

И далее в файле style.css задавать стили уже для этого класса.

Вот что получиться:

Горизонтальная линия HTML

---

Или же вы можете сформировать селектор на основе класса или идентификатора родительского блока, в котором находится тег.

Пример:

В этом случае стили так же будут применяться только для той горизонтальной линии HTML, которая находиться в этом блоке.

Надеюсь, данный прием работы будет для вас полезен и поможет вам улучшить дизайн вашего сайта с помощью горизонтальной линий HTML, и поможет вам выделить какие-то основные моменты на страницах с целью привлечения внимания посетителей.

На сегодня у меня все. Не забудьте поделиться статьей в социальных сетях и оставить комментарий.

До встречи в следующих статьях!

С уважением Юлия Гусарь