Example

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

Для создания горизонтальных разделительных линий (иногда их ещё называют линейками) в HTML-документах используется одиночный тег

---

(сокр. от англ. horizontal rule — «горизонтальная линия»). Данный элемент относится к элементам структурирования текста и служит для визуального и логического разграничения различных текстовых фрагментов.

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

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

    charset="utf-8"> Example  
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. 

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

В браузерах элемент

---

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

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

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

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

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

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

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

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

Получить трёхцветную разделительную линию можно используя цвет фона элемента

---

, то есть его свойство background-color :

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

Используя функции градиента в свойстве background-image элемента

---

, можно получить линию с эффектом градиента, например:

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

Не менее оригинальные разделительные линии можно получить, используя в качестве фона для элемента

---

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

Установка горизонтального размера линии

Рассмотрим ещё один пример стилизации разделительной линии:

Результат в браузере будет следующим:

По умолчанию элемент

---

занимает всю доступную ширину в родительском элементе. То есть обычно левый и правый концы разделительной линии совпадают с левой и правой границей текстового содержимого.

Задать какой-то свой размер элементу можно с помощью стилевого свойства width , устанавливающего горизонтальный размер элемента. Например, чтобы линия занимала только 50% доступной ширины, подкорректируем наше правило:

В браузере это отобразиться следующим образом:

Как видно из рисунка, линия стала короче в два раза. При этом она выровнена по центру, поскольку в браузерах для элементов

---

по умолчанию используется правило:

hr < margin-left: auto; /* Отступ слева */ margin-right: auto; /* Отступ справа */ >

Согласно же спецификации, при одновременном использовании для свойств margin-left и margin-right значения auto для элемента должны устанавливаться одинаковые отступы слева и справа, то есть, другими словами, элемент должен выравниваться по центру родительского элемента.

Если есть необходимость «прижать» разделительную линию к левому или правому краю, необходимо обнулить одно из вышеуказанных свойств — margin-left или margin-right :

Результат в браузере будет следующим:

Поскольку элемент

---

по умолчанию занимает всю доступную ширину в родительском элементе, регулировать его размер, а заодно и местоположение по горизонтали можно с помощью свойств margin-left и margin-right , не прибегая к использованию свойства width . Например, следующее правило позволяет «отрезать» у разделительной линии 15 пикселей слева и 30% от её первоначального размера справа:

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

Источник

СSS стили для горизонтальных линий

Сборник горизонтальных линий с тегом

---

разных видов и стилей.

Сплошные линии

Двойная линия

Многострочная линия

Двухцветная линия

Трехцветная линия

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

Вертикальный градиент

Линия с тенью

Замыленная линия

Линия «Полка»

Пунктирные линии

Пунктирная линия с фоном

Пунктирная линия с градиентом

Точечные линии

Линия из крупных точек

 
') 0 0 100% repeat; background-position: 50%; box-sizing: border-box; color: orange; > 

Разное

Вертикальные линии

Линии под углом

Наклонные линии

Комментарии 2

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

Подчеркивание текста можно сделать с помощью нескольких свойств CSS — background-image, background-size и.

Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.

Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет.

Источник

Hr HTML

Как правило, разделители на сайте используются для визуального отделения цитат и других смысловых блоков от основного контента страницы. Горизонтальные разделители для сайта могут быть проставлены с помощью тега hr. Выглядит горизонтальный разделитель следующим образом:

Тег hr может принимать следующие атрибуты:

• align — устанавливает выравнивание разделителя (right, center или left);
• color — задает цвет линии;
• size — определяет толщину линии;
• width — задает ширину линии;
• noshade — отменяет трехмерный эффект линии.

Применим теперь указанные атрибуты к горизонтальному разделителю:

  
 
Был бы двор, придворные найдутся.
 
 

Результат приведенного примера:

Был бы двор, придворные найдутся.

Стилизация разделителей с помощью CSS

Настроить отображение горизонтальных разделителей можно и с помощью CSS, и этот подход является более правильным. Ведь согласитесь, прописывать большой набор атрибутов при каждом добавлении линии — подход не совсем верный. Стилизацию hr CSS рассмотрим на следующем примере:

        
 
Был бы двор, придворные найдутся.
  
 

В конструкторе сайтов «Нубекс» есть несколько различных стилизованных разделителей, встраиваемых в контент сайта. Для получения более подробной информации читайте статью: Разделители для сайта.

Смотрите также:

Источник

---

: The Thematic Break (Horizontal Rule) element

Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.

Content categories	Flow content.
Permitted content	None, it is an empty element.
Tag omission	It must have start tag, but must not have an end tag.
Permitted parents	Any element that accepts flow content.
Implicit ARIA role	separator (en-US)
Permitted ARIA roles	presentation (en-US) or none (en-US)
DOM interface	HTMLHRElement (en-US)

Attributes

This element’s attributes include the global attributes.

Задаёт правило выравнивания.По умолчанию значение выставлено как left

Sets the rule to have no shading.

Устанавливает высоту в px

Задаёт длину линии в px либо в %

Example

HTML

p> Это первый параграф текста Это первый параграф текста Это первый параграф текста Это первый параграф текста p> hr /> p> Это второй параграф текста Это второй параграф текста Это второй параграф текста Это второй параграф текста p> 

Result

Specifications

Specification	Status	Comment
HTML Living Standard Определение ‘ ‘ в этой спецификации.	Живой стандарт	Definition of the element
HTML5 Определение ‘ ‘ в этой спецификации.	Рекомендация
HTML 4.01 Specification Определение ‘ ‘ в этой спецификации.	Рекомендация	The align , noshade , size , and width attributes are deprecated

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on 8 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник