Стилизуем горизонтальные разделители с помощью CSS

Hr HTML

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

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

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

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

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

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

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

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

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

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

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

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

Источник

HTML тег

HTML тег

---

(horizontal rule) определяет горизонтальную линию, которая вставляет разрыв строки до и после себя и занимает всю доступную ширину. Горизонтальная линия будет полезна для разделения тематического вступления и основного текста, например смена сцен в рассказе или переход к дополнительной информации в рамках раздела справочника.

Примечание: горизонтальная линия используется для визуального и логического разделения контента, но в ней отпадает необходимость, если сразу после нее идет заголовок или тег, начинающий новый раздел, или логический блок ( , ), так как эти элементы по умолчанию подразумевают тематические изменения.

По умолчанию, цвет горизонтальной линии серый, а толщина составляет 1px. Для изменения цвета, толщины и стиля линии можно воспользоваться CSS свойством border, позволяющим изменить сразу все три параметра. Или использовать свойства: border-color, border-width и border-style для изменения только одного из параметров:

Разделительная линия:

---

Изменяем цвет линии:

---

Изменяем толщину линии:

---

Пунктирная линия html:

Атрибуты

HTML тег

---

поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Пример

HTML
 
HTML это язык разметки гипертекста.
 
CSS
 
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.

Источник

HTML Horizontal Line – HR Tag Example

Kolade Chris

You can use the HTML

---

tag to separate out different topics on a page.

We often use this tag when we want to create a thematic break or separate items on an HTML page.

In this article, you’ll learn how to use this tag in your HTML code.

Table of Contents

• Basic Syntax
• Attributes of
  

  ---

  Tag

• The Width Attribute
• The Color Attribute
• The Size Attribute
• The Align Attribute
• Conclusion

Basic Syntax

The

---

tag is an empty element. This means that it only has an opening tag,

---

.

Starting in HTML5, we now need to attach a slash to the tag of an empty element. So, instead of having just

---

, you should make it

---

.

In browsers, the

---

tag is displayed as a horizontal rule or line, like this:

Attributes of

---

Tag

The

---

tag accepts attributes such as width , color , size , and align .

Before showing you how the individual attributes look and work, I will be setting everything in the body to center with this CSS code:

The Width Attribute

The width attribute is used for specifying a width for the

---

tag. It takes pixels or percentage as a value.

The Color Attribute

The color attribute is used to specify a color for the

---

tag.

Here is how it would look if we set a green color for the

---

tag:

The Size Attribute

You can define a height for the

---

tag with the size attribute. The value must be set in pixels.

A height of 50px looks like the screenshot below:

The Align Attribute

The align attribute is used to set an alignment for the

---

tag. It takes left , center and right values.

The default is left – meaning if an alignment is not set, the

---

tag automatically aligns to the left.

Setting an alignment of right for the

---

tag looks like this:

Conclusion

This article shows you what the

---

tag looks like, what it is used for, and the attributes it accepts.

Since the

---

tag appears as a horizontal rule in browsers, you might be thinking of using it to draw a line.

But you shouldn’t do this because the horizontal rule appears as is only presentationally, not semantically. Instead, you should draw a line with a div or span as the case may be.

If you find this article helpful, share it with your friends and family.

Kolade Chris

Web developer and technical writer focusing on frontend technologies. I also dabble in a lot of other technologies.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Источник