Опубликовано: 14.02.2021

Горизонтальный разделитель

Создание разделительных линий в веб-документе

Для создания горизонтальных разделительных линий (иногда их ещё называют линейками) в HTML-документах используется одиночный тег <hr> (сокр. от англ. horizontal rule — «горизонтальная линия»). Данный элемент относится к элементам структурирования текста и служит для визуального и логического разграничения различных текстовых фрагментов.

В настоящее время в теге могут использоваться только универсальные атрибуты и атрибуты событий. Все собственные атрибуты тега, использовавшиеся ранее, были признаны устаревшими и не рекомендованы к применению спецификацией HTML 4.01 (см. спецификацию).

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

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Example</title>
   </head>
   <body>
      <hr>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
         sed diem nonummy nibh euismod tincidunt ut lacreet dolore
         magna aliguam erat volutpat. Ut wisis enim ad minim veniam,
         quis nostrud exerci tution ullamcorper suscipit lobortis
         nisl ut aliquip ex ea commodo consequat.</p>
      <hr>
   </body>
</html>

Результат в браузере:

Вид в браузере

Установка цвета, толщины и стиля линии средствами CSS

В браузерах элемент <hr> реализован как блочный элемент нулевой высоты с рамкой серого цвета толщиной в 1px. Конкретные оттенки используемых цветов зависят от браузера. Стиль линий по умолчанию — inset.

Чтобы убедиться в этом, достаточно в стилевых правилах задать элементу высоту, отличную от нуля, и толщину рамки, отличную от единицы:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Example</title>
      <style>
         hr {
            height: 20px;        /* Высота элемента */
            border-width: 6px;   /* Толщина рамки */
         }
      </style>
   </head>
   <body>
      <hr>
   </body>
</html>

И вот что мы получим в браузере:

Результат в браузере

То есть, чтобы получить, например, двойную горизонтальную линию оранжевого цвета, следует использовать следующие стилевые правила:

<style>
   hr {
       height: 2px;          /* Высота элемента */
       border-top: 1px solid #ff8c00;     /* Вид верхней линии рамки */
       border-bottom: 1px solid #ff8c00;  /* Вид нижней линии рамки */
       border-left: none;    /* Убираем лишнюю левую линию рамки */
       border-right: none;   /* Убираем лишнюю правую линию рамки */
   }
</style>

Либо другой вариант с тем же визуальным эффектом:

<style>
   hr {
       border-top: 4px double #ff8c00;   /* Вид верхней линии рамки */
       border-bottom: none;   /* Убираем лишнюю нижнюю линию рамки */
       border-left: none;     /* Убираем лишнюю левую линию рамки */
       border-right: none;    /* Убираем лишнюю правую линию рамки */
   }
</style>

Результат в браузере:

Вид разделительной линии в браузере

Примечание: При нулевой высоте элемента боковые линии рамки не видны, но, если их вывод не отменить явно с помощью соответствующих свойств border-left и border-right, как это сделано в вышеприведённых и нижеприведённых примерах, то при использовании линий толщиной более 2px на концах линии будут наблюдаться небольшие «дефекты» из-за того, что браузер будет пытаться согласовать размеры этих концов с размерами концов фактически невидимых боковых линий.

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

<style>
   hr {
       border-top: 3px solid #ff8c00;      /* Вид верхней линии рамки */
       border-bottom: 3px solid #00bfff;   /* Вид нижней линии рамки */
       border-left: none;    /* Убираем лишнюю левую линию рамки */
       border-right: none;   /* Убираем лишнюю правую линию рамки */
   }
</style>

Вид в браузере:

Вид разделительной линии в браузере

Трёхцветные линейки

Получить трёхцветную разделительную линию можно используя цвет фона элемента <hr>, то есть его свойство background-color:

<style>
   hr {
       height: 3px;          /* Высота элемента */
       border-top: 3px solid green;    /* Вид верхней линии рамки */
       background-color: yellow;       /* Цвет фона элемента HR */
       border-bottom: 3px solid red;   /* Вид нижней линии рамки */
       border-left: none;    /* Убираем лишнюю левую линию рамки */
       border-right: none;   /* Убираем лишнюю правую линию рамки */
   }
</style>

Вид в браузере:

Вид разделительной линии в браузере

Линейки с эффектом градиента

Используя функции градиента в свойстве background-image элемента <hr>, можно получить линию с эффектом градиента, например:

<style>
   hr {
       /* Высота элемента */
       height:  3px;
       /* Убираем все линии рамки */
       border: none;
       /* Устанавливаем градиент */
       background-image: linear-gradient(to left, green, yellow, red);
   }
</style>

Вид в браузере:

Вид разделительной линии в браузере

Линейки с фоновым рисунком

Не менее оригинальные разделительные линии можно получить, используя в качестве фона для элемента <hr> небольшие рисунки. Например, такой вот несложный для воспроизведения рисунок   можно использовать для оформления сайта на морскую тематику.

<style>
   hr {
       /* Высота элемента */
       height:  12px;
       /* Убираем все линии рамки */
       border: none;
       /* Устанавливаем фоновый рисунок */
       background: url('files/chain.gif') repeat-x;
   }
</style>

Вид в браузере:

Вид в браузере

Другие статьи по схожей тематике