Hr HTML

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

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

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

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

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

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

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

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

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

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

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

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

Источник

С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 и т.д. Но бывают случаи когда нет.

Источник

Html красивая линия разделитель

Время чтения: меньше 5 мин

Обновлено 8 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Та самая горизонтальная черта, которая разделяет смысловые блоки на странице.

Пример

Скопировать ссылку «Пример» Скопировано

Разделим два абзаца горизонтальной чертой и немного стилизуем её.

 
Слово «динозавр» означает.
  
Среди палеонтологов.
  p>Слово «динозавр» означает. p> hr> p>Среди палеонтологов. p>    Скопировать Скопировано Не удалось скопировать   

 hr  width: 50px; margin: 30px auto; border: 1px solid black;> hr  width: 50px; margin: 30px auto; border: 1px solid black; >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Тег

---

помогает отделить независимые друг от друга блоки — например, подразделы в статье. Это блочный элемент, поэтому он встаёт в отдельном ряду, визуально разделяя информацию на странице.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Одиночный тег, который не нужно закрывать — просто ставим

---

в том месте, где нужен разделитель.

На практике

Скопировать ссылку «На практике» Скопировано

Лена Райан советует

Скопировать ссылку «Лена Райан советует» Скопировано

🛠 Конечно же, перед заголовком не стоит ставить

---

— заголовок сам по себе является тематическим и визуальным разделителем.

🛠 Внешний вид тега

---

по умолчанию обусловлен именно наличием рамки, поэтому для изменения, например, цвета линии достаточно изменить border — color .

Светлана Коробцева советует

Скопировать ссылку «Светлана Коробцева советует» Скопировано

🛠 Дизайнеры любят пользоваться линией как средством выразительности. Почти никогда такая линия не является смысловым разделителем, и поэтому не стоит верстать её как

---

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

В демо ниже все линии декоративные и потому свёрстаны как псевдоэлемент : : after , а разделяющий визуально одинаковые, но разные по смыслу абзацы

---

представлен в виде звёздочек.

 Типографика
Астеризм
Астеризм это типографский символ.
  
Одиночная звёздочка.
  span class="tag">Типографикаspan> h1 class="title">Астеризмh1> p class="paragraph">Астеризм это типографский символ. p> hr> p class="paragraph">Одиночная звёздочка. p>    Скопировать Скопировано Не удалось скопировать   

 .tag, .title  position: relative;> .tag::after, .title::after  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; background-color: black;> .tag::after  height: 1px;> .title::after  height: 2px;> hr  border: none; text-align: center;> hr::before  content: "***";> .tag, .title  position: relative; > .tag::after, .title::after  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; background-color: black; > .tag::after  height: 1px; > .title::after  height: 2px; > hr  border: none; text-align: center; > hr::before  content: "***"; >    Скопировать Скопировано Не удалось скопировать   

Источник

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

Для создания горизонтальных разделительных линий (иногда их ещё называют линейками) в 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% от её первоначального размера справа:

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

Источник