Как сделать горизонтальную линию в css

В css есть специальный тег, который и обозначает и выводит горизонтальную линию! Это иногда бывает очень полезным!

1. Горизонтальная линия тег
2. Стилизация тега горизонтальной линии css
3. Горизонтальная линия сплошная - solid
4. Горизонтальная линия точками - dotted
5. Горизонтальная линия пунктирная - dashed
6. Горизонтальная линия сплошная двойная - double
7. Горизонтальная линия с тенью сверху - groove
8. Горизонтальная линия с тенью снизу - ridge
9. Горизонтальная линия под текстом css

Скопировать ссылку


Скопировать ссылку


Скопировать ссылку



Горизонтальная линия сплошная - css

В данном пункте разберем создание горизонтальной линии с помощью блока div.

Для этого на м понадобится:

Двойной тег div:

<div>без текста</div>

Далее нам понадобится attribute style

style ="";

Вовнутрь помещаем свойство border + solid + 1px толщина линии + подбираем цвет( -> генератор цвета) пусть это будет "#d71212".


Соединим наш код горизонтальной сплошной линии вместе:

<div style="border-bottom: solid 1px #d71212;">solid</div>

Пример вывода горизонтальной сплошной линии с помощью блока div

Добавим еще:
<div style="border-bottom: solid 5px #d71212;">solid</div>

Пример вывода горизонтальной сплошной линии толщина 5px

Скопировать ссылку



Горизонтальная линия точками - css

В следующем пункте разберем, как сделать горизонтальную линию с помощью точек. Если в выше приведенном пункте унас была "горизонтальная линия сплошная", то в этом пункте мы сделаем "горизонтальную линию точками!"


Для этого нам понадобится:

Опять будем использовать двойной тег div:

<div>без текста</div>

Снова attribute style

style ="";

По той же схеме: border + только вместо сплошной, берем точками: dotted + 1px толщина линии, оставляем прежней + подбираем цвет( -> генератор цвета) цвет изменим, пусть это будет "#d71212".


Соединим наш код горизонтальной линии вместе:

Пример вывода горизонтальной линии точками с помощью блока div

<div style="border-bottom: dotted 2px #d71212;">dotted</div>

Пример вывода горизонтальной линии точками с помощью блока div

Добавим еще:
<div style="border-bottom: dotted 5px #d71212;">dotted</div>

Пример вывода горизонтальной линии точками толщина 5px

Скопировать ссылку



Горизонтальная линия пунктирная - css

Следующая по списку это : "Горизонтальная линия пунктирная ", уже несколько вариантов мы рассмотрели, теперь новый вариант "горизонтальной линии"!


Для этого нам нужно:

Какой-то из блочных тегов, наиболее часто применимый двойной тег - div:

<div>без текста</div>

Без атрибута никак : attribute style

style ="";

По той же схеме: border + только вместо сплошной, берем пунктиром: dashed + 2px толщина линии, оставляем прежней + подбираем цвет( -> генератор цвета) цвет изменим, пусть это будет "#9EC1D4".


Соединим наш код горизонтальной линии вместе:

Пример вывода горизонтальной линии пунктирная с помощью блока div

<div style="border-bottom: dashed 2px #9EC1D4;">dashed</div>

Пример вывода горизонтальной линии пунктирная с помощью блока div

Добавим еще:
<div style="border-bottom: dashed 5px #9EC1D4;">dashed</div>

Пример вывода горизонтальной линии пунктирная толщина 5px

Скопировать ссылку



Горизонтальная линия сплошная двойная - css

Следующая по списку это : "Горизонтальная линия двойная ", уже несколько вариантов мы рассмотрели, теперь новый вариант "горизонтальной линии"!


Для этого нам нужно:

Какой-то из блочных тегов, наиболее часто применимый двойной тег - div:

<div>без текста</div>

Без атрибута никак : attribute style

style ="";

По той же схеме: border + только вместо сплошной, берем пунктиром: double + 2px толщина линии, оставляем прежней + подбираем цвет( -> генератор цвета) цвет изменим, пусть это будет "#0008ff".


Соединим наш код горизонтальной линии вместе:

Пример вывода горизонтальной линии двойная с помощью блока div

<div style="border-bottom: double 2px #0008ff;">double</div>

Пример вывода горизонтальной линии двойная с помощью блока div

Добавим еще:
<div style="border-bottom: double 5px #0008ff;">double</div>

Пример вывода горизонтальной линии двойная толщина 5px

Скопировать ссылку



Тень для горизонтальной линии - groove

Тень для линии - groove, вообще groove переводиться паз, вид линии получается с тенью, groove - тень сверху горизонтальной линии

<div style="border-bottom: groove 2px #9EC1D4;">groove</div>

Скопировать ссылку



Горизонтальная линия с тенью снизу - ridge

Тень для линии - ridge, вообще ridge переводится хребет, вид линии получается с тенью, ridge - тень снизу горизонтальной линии

<div style="border-bottom: ridge 5px #9EC1D4;">ridge</div>

Скопировать ссылку



Горизонтальная линия под текстом css

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

Какой-то из тегов, в данном случае, чтобы по умолчанию было "display:block" - это элемент : div

<div>Линия под текстом</div>

Далее внутрь тега помещаем атрибут style(attribute style) + свойство border с нижним подчеркиванием border-bottom + solid 1px red :


style="border-bottom: solid 1px red ;

Собираем весь код вместе:

<div style="border-bottom: solid 1px red ;">Линия под текстом</div>

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

Линия под текстом

Сообщение системы комментирования :

Форма пока доступна только админу... скоро все заработает...надеюсь...