Как сделать линий в html

• Введите
  

  ---

  , чтобы изменить толщину линии. Замените «#» числовым значением толщины (например, size=»10″).
• Введите
  

  ---

  , чтобы изменить ширину линии. Замените «#» количеством пикселей или процентным отношением к ширине страницы (например, width=»200″ или width=»75%»).
• Введите
  

  ---

  , чтобы изменить цвет линии. Замените «#» названием цвета или его шестнадцатеричным кодом (например, color=»red» или color=»# FF0000″).
• Введите
  

  ---

  , чтобы выровнять линию. Замените «#» на «right» (по правому краю), «left» (по левому краю) или «center» (по центру) (например,

  ---

  ).

• Откройте меню Файл.
• Нажмите Сохранить как.
• Введите имя для файла в поле «Имя файла».
• Добавьте .html после имени файла.
• Нажмите Сохранить.

 html> body> h1>Заголовокh1> hr size="6" width="50%" align="left" color="green"> p1>Данная строка должна быть отделена от заголовка линией.p1> body> html> 

Работа в CSS/HTML5

• Откройте Блокнот или другой текстовый редактор/редактор кода.
• Откройте меню Файл.
• Нажмите Открыть.
• Выберите файл HTML.
• Нажмите Открыть

• Введите в верхней части документа.
• Дважды нажмите ↵ Enter , чтобы добавить две новые строки.
• Введите , чтобы закрыть заголовок.

• В качестве альтернативного способа можно использовать внешнюю таблицу стилей. Прочтите статью «Как вставить файл CSS в HTML», чтобы узнать, как связать внешний файл CSS с файлом HTML.

Введите hr < .Это тег CSS для стилизации горизонтальной линии. Добавьте его после тега «style» в заголовке или во внешнем файле CSS.

• Введите width: ##px; , чтобы настроить ширину линии. Замените «##» значением ширины линии в пикселях. Вместо пикселей (px) можно использовать процентное отношение (%).
• Введите height: ##px; , чтобы настроить толщину линии. Замените «##» значением толщины линии в пикселях.
• Введите background-color: ##; , чтобы указать цвет линии. Замените «##» названием цвета или решеткой (#), после которой будет идти шестнадцатеричный код цвета.
• Введите margin-right: ##px; , чтобы указать количество пикселей от правого края. Замените «##» числовым количеством пикселей или кодом «auto». Введите «auto», чтобы выровнять линию по левому краю или по центру.
• Введите margin-left: ##px; , чтобы указать количество пикселей от левого края. Замените «##» числовым количеством пикселей или кодом «auto». Введите «auto», чтобы выровнять линию по правому краю или по центру.
• Введите margin-top: ##px; , чтобы указать верхний отступ для линии. Замените «##» числом, соответствующим ширине отступа в пикселях.
• Введите margin-bottom: ##px; , чтобы указать нижний отступ для линии. Замените «##» числом, соответствующим ширине отступа в пикселях.
• Введите border-width: ##px; , чтобы нарисовать рамку вокруг линии (необязательно). Замените «##» числом, соответствующим толщине рамки в пикселях.
• Введите border-color: ##; , чтобы указать цвет рамки (необязательно). Замените «##» названием цвета или решеткой (#), после которой будет идти шестнадцатеричный код цвета.

 html> head> style type="text/css"> hr  width: 50%; height: 20px; background-color: red; margin-right: auto; margin-left: auto; margin-top: 5px; margin-bottom: 5px; border-width: 2px; border-color: green; > style> head> body> h1>Заголовокh1> hr> p1>Данная строка должна быть отделена от заголовка горизонтальной линией p1> body> html> 

Источник

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.

Источник

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

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

Навигация по статье:

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

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

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

. Внешний вид такой линии зависит от заданных параметров.

В примере для

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

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

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

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

Для тега

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

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

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

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

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

Так же для стилизации тега

вы можете использовать CSS-стили. Задавать визуальное оформление с помощью стилей целесообразно в том случае если у вас достаточно часто на странице используется тег

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

Задать стили для тега

вы можете двумя способами:

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

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

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

Так как линия сделанная с помощью тега

является блочным элементом, то для нее можно использовать практически все стили, предназначенные для блоков.

Если вам нужно задать одинаковый стиль для всех тегов

на вашем сайте, то необходимо использовать следующий селектор:

Источник