Как сделать линию с помощью HTML и CSS

как сделать линию с помощью html i css

Для подчеркивания некоторых особенно важных элементов сайта, не помешало бы использовать всевозможные и предусмотренные для этого CSS стили и свойства. Конечно же, с текстом можно особо не заморачиваться и выделить его, к примеру, жирным или курсивом, изменить задний фон или сделать рамку вокруг текста. Но не всегда один из представленных способов является подходящим. Допустим, у вас есть текст, который нуждается в разделении из-за специфики его смысловой нагрузки. Вот тут-то и приходят на помощь HTML и СSS свойства.

Как сделать в тексте линию средствами CSS

Для реализации задуманного нам понадобится обратиться к файлу style.css, прописав в нем соответственное свойство border. Тем самым над, под или с определенной стороны текста появится линия. В свою очередь предусмотрено несколько свойств, отвечающих за отображение линии, а именно:

  • border-top — горизонтальная линия, расположенная над текстом;
  • border-right — вертикальная линия, расположенная справа от текста;
  • border-bottom — горизонтальная линия, расположенная под текстом;
  • border-left — вертикальная линия находящаяся слева.

Как сделать линию в html

Используя свойства CSS можно прописать все необходимые значения редактируя HTML код. Для этого нужно перейти в административную часть сайта. Выбрать один из опубликованных материалов, переключить текстовый редактор в режим правки HTML кода и внести свойства CSS. Образец можно лицезреть ниже.

 

Как сделать пунктирную или прямую линию?

Прописав данные свойства вам удастся подчеркнуть важность излагаемого материала, абзаца или заголовка?

 

<html>
<head>
<title>Как сделать пунктирную или прямую линию?</title>
</head>
<body>
<div style="width:500px;
border-top:3px solid #9EC1D4;
border-bottom: dotted 3px #9EC1D4;
padding-left:10px">
Прописав данные свойства вам удастся подчеркнуть важность излагаемого материала, абзаца или заголовка?
</div>
</body>
</html>

Краткая расшифровка команд

  • width — длина линии;
  • solid — сплошная линия;
  • dotted — точечная линия.

Для более глубокого ознакомления со стилями рекомендую почитать эту статью.

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

Приведенный способ имеет несколько достоинств:

  • Обширный ассортимент возможностей, с помощью которых можно сделать практически любую линию.
  • Легкость внесения всех необходимых изменений непосредственно в HTML код. Это во многом упрощает задачу для неопытных сайтостроителей.

Как сделать прямую горизонтальную линию с помощью тега HTML <hr>

Первое на что хотелось бы обратить ваше внимание, это то, что у данного тега, несмотря на все тонкости и принципы html, нет закрывающегося тега. Он может быть использован в любом месте html кода, между тегами <body> и </body>.

Атрибуты тега <hr>

  • width — отвечает за длину линии. Может указываться как в процентах, так и пикселях.
  • size — толщина линии. Указывается в пикселях.
  • color — определяет цвет линии.
  • align — атрибут, отвечающий за выравнивание линии.

К атрибуту align относятся следующие команды:

  • right — выравнивание справа;
  • left — выравнивание слева;
  • center — центральное выравнивание.

Образец html кода с использованием тега <hr>

<hr size=3px width=500px align="left">

Надеюсь, у вас все получилось и теперь вы знаете, как сделать линию у себя на сайте. Назревшие вопросы оставляйте в комментариях, и мы обязательно их обсудим.

сообщить об ошибке

Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter

 

Понравилась статья? Угостите админа шаурмой и кофе.
PayPal logo

Комментарии  
Виктор
0 Виктор 10.01.2019 12:11
Спасибо за статью! Очень помогла. Как раз искали возможность разграничить блоки с текстом не обычными пробелами, а чертой)) Кстати многим я думаю подойдет простой вариант с делает тоже самое в общем-то.
Ответить | Ответить с цитатой | Цитировать
doclvs
0 doclvs 29.04.2019 09:10
Спасибо
Ответить | Ответить с цитатой | Цитировать
Сергей
0 Сергей 06.02.2021 05:48
спасибо попробую
Ответить | Ответить с цитатой | Цитировать
Добавить комментарий