Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

Горизонтальная линия css. Как сделать линию горизонтальную через css!? Сколько способов сделать горизонтальную линию!

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

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

  2. Горизонтальная линия точками - 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

  3. Горизонтальная линия пунктирная - 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

  4. Горизонтальная линия сплошная двойная - 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

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

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

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

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

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

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

  7. Горизонтальная линия под текстом 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>

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

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


Вас может еще заинтересовать список тем : #HTML | #CSS | #CSS_SHAPE |
Последняя дата редактирования : 09.12.2020 18:07
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
линия css css линия горизонтальная как сделать линию в css линия html css пунктирная линия css волнистая линия css css нарисовать линию как сделать горизонтальную линию в css линия под текстом css css горизонтальная линия сss стили для горизонтальных линий как вставить линию в css html двойная линия hr линия css линии в css примеры

Последние комментарии :
Марат :
26/01/2021 12:28
Внимание! На странице описывается система комментирования ECOMMENT.SU.Здесь и далее, на всем сайте, стоит другая…
подробнее.
Марат :
26/01/2021 10:58
На сайте, комментирование моё собственное, которое не знаю, когда …
подробнее.
Вали :
26/01/2021 05:51
А вот эти комментарии тут - это же другие, не те о которых статья?Не…
подробнее.
Вали :
26/01/2021 05:44
Привет, классно!
подробнее.
Марат :
25/01/2021 10:08
Спасибо за добрые слова!Всегда пожалуйста!Приходите…
подробнее.