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

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

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

str0Горизонтальная линия на странице сайта обозначается тегом <hr> и вставляет линию, которая тянется от одного края контейнера до другого, разделяя все сверху и снизу от нее.

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

Горизонтальные линейки —это блочные элементы, поэтому их можно помещать между абзацами

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

Понятно, что <hr> — это презентационный элемент, потому что он всего лишь рисует линию на вашей странице. Авторы спецификации HTML5 попытались теснее связать его с логической структурой, описав не как «горизонтальную линейку», а как «тематический разрыв», другими словами, как основной способ разделения разных блоков контента, например, эпизодов в романе или разделов в научной статье. Но этот элемент все равно выглядит как линия.

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

Тег относится к блочным элементам, поэтому линия всегда начинается с новой строки, а после неё все элементы отображаются на следующей строке.

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

Однако браузеры неоднозначно подходят к этому вопросу, из-за чего придется использовать сразу несколько стилевых свойств. В частности, старые версии браузера Internet Explorer для цвета линии применяют свойство color, а остальные браузеры — background-color.

Но это еще не все, при этом обязательно следует указать толщину линии (свойство height) отличной от нуля и убрать рамку вокруг линии, задавая значение none у свойства border. Собирая все свойства воедино для селектора hr, получим универсальное решение для популярных браузеров (пример 1).

Пример 1. Горизонтальная линия

<!DOCTYPE html>
<html>
<head>
<meta charset= «utf-8»>
<title>Цвет горизонтальной линии</title>
<style>
hr {
border: none; /* Убираем границу */
background-color: red; /* Цвет линии */
color: red; /* Цвет линии для IE6-7 */
height: 2px; /* Толщина линии */
}
</style>
</head>
<body>
<hr>
<p>Текстовоя строка</p>
<hr>
</body>
</html>

Результат данного примера показан на рисунке.

Горизонтальная линия
Цветная горизонтальная линия

Для того, что бы расширить понятие о применении атрибутов, напишем такой код:

<html>
<head>
<title>Горизонтальные линии HTML</title>
</head>
<body>
<hr align=»left» width=»300″ size=»2″ color=» #36E052 » />
<br>
<hr align=»center» width=»400″ size=»5″ color=»Red» />
<br>
<hr align=»right» width=»300″ size=»2″ color=» #FFD002 » />
</body>
</html>

Горизонтальная линияА в этом коде длина линии будет задана в процентах – то есть, если вы сжимаете или увеличиваете окно браузера, то линия будет изменять длину в зависимости от заданного параметра (процентов).

<html>
<head>
<title>HTML line</title>
</head>
<body>
<hr align=»center» width=»75%» size=»32″ color=»#BC02FF» />
<br><br>
<hr align=»right» width=»60%» size=»8″ color=»#FF5702″ />
</body>
</html>

Горизонтальная линияВажно заметить, что длина линии может быть ориентирована относительно какого-то элемента, внутри которого она находится и этими элементами может быть – таблица (<table>) и блок (<div>).

Что и как делать, если необходимо нарисовать вертикальную линию на странице сайта, чтобы обозначить какой-либо абзац?

Задаваясь этим вопросом, <VR> — это первое, что приходит в голову, но такого тега в html не существует.

Тем не менее, решение можно найти с помощью таблиц и CSS.

Вертикальная линия с помощью таблиц:

<table border=»1px» width=»1px» height=»200px»></table>

Где значения: border — тощина линии, width — «граница» лини, height — высота вертикальной линии.

Вертикальная линия с помощью таблиц и CSS:

<table border=»1px» width=»1px» style=»border-color: green;/*цвет*/ height: 200px;/*высота*/»></table>

Вертикальная линия с помощью тега <HR> и CSS:

<hr style=»height: 200px;/*высота*/ width: 1px;/*толщина*/»>

Горизонтальная линияДля отмены трехмерных эффектов, используйте атрибут «noshade«

<hr noshade style=»height: 200px; width: 2px;»>

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

Вертикальная линия с помощью тега <DIV> и CSS:

Если нужно, чтобы линия была слева от текста (как в этом абзаце), то можно использовать <div></div> с использованием CSS. Пример кода:

<div style=»border-width: 0 0 0 1px;/*толщина*/ border-style: solid; padding-left: 10px;/*отступ слева*/»>

Для линии справа от текста, используйте код:

<div style=»border-width: 0 1px 0 0;/*толщина*/ border-style: solid; padding-right: 10px;/*отступ справа*/»>

Для управления цветом, используйте свойство «border-color«.

<hr align=»center» width=»5%» size=»60″ color=»#006400″ />


кружок, сформированный при помощи тега <HR>

<div style=»height:50px; width:400px; border-left:4px solid #FF0000;

background-color:#FFFAFA; padding-left:10px»>

Вот пример вертикальной линии красного цвета слева.

</div>

Вот пример вертикальной линии красного цвета слева.

<div style=»height:50px; width:400px; border-right:4px solid #FF0000;

background-color:#FFFAFA; padding-left:10px»>

Вот пример вертикальной линии красного цвета справа.

</div>

Вот пример вертикальной линии красного цвета справа.

 

<div style=»height:50px; width:400px; border-bottom:4px solid #FF0000;

background-color:#FFFAFA; padding-left:10px»>

Вот пример горизонтальной линии красного цвета снизу.

</div>

Вот пример горизонтальной линии красного цвета снизу.

 

<div style=»height:73px; width:400px; border-right:4px solid #FF0000;

border-bottom:4px solid #0000FF; background-color:#FFFAFA; padding-left:10px;»>

Вот пример горизонтальной и вертикальной линий.

</div>

Вот пример горизонтальной и вертикальной линий.

 

Посмотрите видео о теге <hr>, который выводит на странице сайта горизонтальную линию:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *