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

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

В этом уроке будет показано, как рисовать вертикальные линии и задавать значения таким параметрам как высота, ширина (длина), цвет, расположение относительно страницы.

Если вы читали предыдущий урок, то заметите ,что вертикальная линия – это по сути та же горизонтальная, только значение ширины (size) больше длины (width).

Ниже представлен код, который "чертит" три вертикальные линии, по-разному ориентированных относительно страницы.

Результат работы кода вы можете посомтреть здесь.

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

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

Навигация по статье:

Вертикальная линия HTML

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

Можно дописать стили в самом теге:

Вертикальная линия HTML

С помощью свойства border-left мы задаем границу блока с левой стороны, и задаем следующие параметры границы:

  • 3px – толщина линии
  • solid – сплошная линия.Так же можно сделать: пунктирную(dotted), прерывистую (dashed), double (двойную), вогнутую (groove), и выпуклую (ridge).
  • red – это цвет границы. Его вы можете задать названием цвета, в шестнадцатеричном формате, с помощью таблицы цветов RGB или RGBA.

Для задания границы вы можете использовать следующие свойства:

  • border-left – граница слева
  • border-right— граница справа
  • border-top – сверху
  • border-bottom – снизу
  • border – граница по всему контуру блока
Читайте также:  Как разобрать ноутбук hp protectsmart для чистки

Так же нам нужно указать отступ текста от границы с помощью свойства padding-left, иначе он будет к ней прилипать. В моем случае отступ равен 10 пикселям.

Если вам удобнее работать с CSS стилями в отдельном файле, то для блока нужно присвоить класс и для этого класса прописать данные свойства в CSS -файле. Вот как это будет выглядеть:

HTML:

CSS:

Вертикальная линия HTML для текста в блоке

Вертикальная линия HTML с помощью псевдоэлемента

Если вам удобнее работать с CSS -стилями, то вы можете воспользоваться еще одним способом добавления вертикальных линий. Данный вариант немного сложнее и заключается в использовании псевдоэлементов :before и :after. Но у псевдоэлементов есть один очень ощутимый плюс, они позволяют без добавления HTML-кода, разместить на станице, соответственно, перед блоком или после него дополнительный элемент.

Тема псевдоэлементов достаточно обширна, поэтому подробно вдаваться их описание я сейчас не буду. В ближайшее время постараюсь подготовить статью с более подробной информацией по наиболее полезным псевдоэлементам, их возможностям и применению.

Итак, если нам нужно разместить вертикальную или горизонтальную линию сверху или слевой стороны элемента, то нам нужно использовать псевдоэлемент :before. Если же линия должна быть справа или снизу, то мы должны использовать псевдоэлемент :after.

Горизонтальная линия, определяемая HTML тегом

Данный урок научит вас создавать горизонтальные и вертикальные линии.

  • Горизонтальная HTML линия определяется непарным тегом .
  • HTML линия может быть не только горизонтальной, но и вертикальной.
  • Вертикальная линия в HTML может являться стороной блока или ячейки таблицы.
  • Линия в HTML бывает любого размера и цвета, имеет или не имеет объемность.

HTML горизонтальная линия и пример ее построения:

Ссылка на основную публикацию
Как сбросить графический ключ на xiaomi
Что такое графический пароль? Графический пароль – аналог обычного пароля, который был создан для удобства ввода на мобильных телефонах с...
Как разблокировать айфон зная apple id
Пользователи популярных смартфонов от Apple часто ставят на гаджет пароль, чтобы повысить безопасность мобильного устройства и избежать неприятностей – кражи,...
Как разблокировать домофон если отключили
Домофон — вещь нужная и полезная. Установленная в подъезде система отлично защищает жилище обывателей от проникновения посторонних людей. Второе преимущество...
Как сбросить защитный код на нокиа
Секретные коды Nokia для сброса, проверки и настроек. На этой странице собраны все полезные секретные и не секретные коды для...
Adblock detector