СКРИПТЫ
ТЕГИ:
php (282)
js (144)
html (132)
css (99)
html tags (58)
jquery (39)
edit text (37)
php array (30)
form html (29)
fonts (22)
foto (21)
forum (19)
ruweb.net (19)
atom (19)
html book (17)
board (17)
Показать еще :
php file (16)
js method (16)
hosting (16)
svg (16)
link (15)
htaccess (13)
osclass (13)
color (13)
table (12)
path (12)
php date (11)
online (11)
yandex (11)
js delete (11)
icon (11)
jsphp (11)
input (11)
notepad (11)
form (10)
php img (10)
url (10)
mouse (9)
info (9)
img (7)
cookie (7)
comment (7)
task (7)
ftp (7)
php url (7)
dosite (6)
click (6)
hover (6)
js url (6)
reg.ru (5)
chart (5)
php get (5)
adminka (5)
value (5)
mb (5)
js id (4)
bbcode (4)
submit (4)
js form (4)
browser (4)
select (4)
search (4)
js copy (4)
iframe (4)
symbols (4)
captcha (3)
https (3)
js post (3)
vk (3)
scandir (3)
js time (3)
ssl (3)
vs code (3)
height (2)
details (2)
youtube (2)
tag hr (2)
sitemap (2)
title (2)
ukoz (2)
cursor (2)
console (2)
seo (2)
js vars (2)
video (2)
smile (1)
windows (1)
numbers (1)
archive (1)
header (1)
books (1)
domen (1)
padding (1)

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

Горизонтальная линия 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>

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

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

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

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

01.09.2021

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

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
17.10.2021 39:28
Давно не делал и страницу и видео в один день... чет, как-то выжитый как…
подробнее.
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.
ruweb