Горизонтальные и вертикальные линии с помощью html и css
Опубликовано: 01.09.2018
Всем привет! Сегодня я расскажу Вам о том, как с помощью html сделать горизонтальную линию.
На самом деле, необходимость сделать горизонтальную линию возникает достаточно часто, например, когда нужно отделить одну часть текста от другой.
Горизонтальная и вертикальная линии с помощью css
Сделать это можно с помощью css. Для этого, я заключаем необходимый участок текста в блок с помощью тега div, а затем в файле style.css или непосредственно в html — коде прописываем для этого блока свойства для верней или нижней границы с помощью border-top и border-bottom. Вот пример:
Объектно-ориентированное программирование. Класс "Вертикальные линии" и "Фигура. Урок 8 [GeekBrains]
<html> <head> <title>Вертикальная HTML линия</title> </head> <body> <div style="height:20px; width:500px; border-top:1px solid #9EC1D4; border-bottom: dotted 1px #9EC1D4; padding-left:10px"> Горизонтальная линия с помощью css. </div> </body> </html>
В данном случае, я задал оформление с помощью css непосредственно из кода html, и сделал верхнюю границу сплошной, а нижнюю пунктирной линией.
Создание сайта. Горизонтальная линия (тег HR)
Вот как это будет выглядеть на странице:
Горизонтальная линия с помощью css.
У этого способа есть свои преимущества:
Большой ассортимент настроек, которые позволяют задать практически любой вид для линии; Можно создавать как горизонтальные так и вертикальные линии. Для того, чтобы сделать вертикальные линии необходимо поменять border-top на border-left, а border-bottom на border-right.К недостаткам можно отнести относительную громоздкость кода.
Между прочим, если Вы еще не знаете что такое css и какие оно дает преимущества, то подробнее об этом можно прочитать здесь .Однако, как оказалось, вставить в текст горизонтальную черту можно и с помощью html. При этом, даже не обязательно лезть в css. Для этого используется тег <hr>.
Горизонтальная линия с помощью тега html <hr>
Первая особенность этого тега состоит в том, что у него нет парного закрывающего тега. Его можно использовать в любом месте html – кода между тегами <body> и </body>.
У этого тега есть следующие атрибуты:
Width – определяет длину нашей горизонтальной линии в пикселях или процентах; Color – определяет цвет линии; Align – задает выравнивание линии по правому краю – right, по левому краю – left, по центру – center; Size – толщина линии в пикселях.Вот пример html – кода:
<hr size=3px width=500px align="left">А вот так он будет выглядеть:
Как видите, у данного способа есть свои недостатки:
Меньше настроек для линии; Нельзя сделать вертикальную линию.Зато этот способ намного проще.
Теперь Вы точно знаете о том, как сделать на своем сайте вертикальные и горизонтальные линии. Задать свои вопросы Вы можете в комментариях. И не забывайте подписываться на RSS .
Горизонтальные и вертикальные линии с помощью html и css was last modified: by admin