Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Основы HTML

Как сделать вертикальную линию в html для выделения главных моментов в тексте

Здравствуйте, верные подписчики моего обучающего сайта, а также гости блога. Вы когда-нибудь обращали внимание на страницы веб-ресурсов, где вертикальная линия в html отделяет какую-либо информацию? Так вот это очень простой, однако эффективный способ обратить внимание читателя на нужную часть контента.

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

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

Разработчики и веб-дизайнеры стараются создать уникальный сайт, который будет обладать удобным и понятным на интуитивном уровне пользовательским интерфейсом. Все это достигается при помощи различных средств и подходов языка разметки html и стилевых таблиц css.

Выделение текста

Чаще всего акценты расставляются в текстовом наполнении страниц. Для этого используются:

  • специальные теги, например, <strong>, <i>, <big> и другие;
  • разделение текста на абзацы и ввод заголовков разного уровня;
  • выделение объектов при помощи разного цветового фона;
  • изменение стиля шрифтов;
  • внедрение в контент обрамляющих рамок и т.д.

Рассмотрим последний пункт.

Рамки – это распространенный механизм для отделения неких объектов от основной массы, выделения ключевых моментов и просто оформления веб-контента. Создаются они при помощи свойства border.

Данный элемент языка css очень гибкий и может устанавливать рамку как со всех сторон, так и только с одной стороны выбранного объекта. Важные свойства я занес в таблицу.


Параметр Предназначение
border-left Определяет границу слева.
border-right Определяет границу справа.
border-top Определяет верхнюю границу.
border-bottom Определяет нижнюю границу.

Все выше перечисленные свойства могут регулировать толщину линии, ее цвет и стиль представления.

Хочу отметить, что границы могут выглядеть не только как прямые линии. Они еще могут представляться:

  • точечной (dotted)
  • пунктирной (dashed)
  • линейной (solid)
  • двойной (double)
  • объемной (groove, inset, ridge и outset) рамкой
  • или повторить стилевые настройки предка с помощью ключевого слова inherit.

Иногда я встречаю вопросы вида: «Можно ли border представить в виде изображения и как это сделать?». Ответ, можно. А делается это очень просто.

Для этого создатели css предусмотрели элемент border-image, в котором надо указать путь к картинке и описать толщину каждой стороны границы.

Практическая часть

Простой пример создания линии

Я считаю, что настало время опробовать теорию в практике. Перед вами стоит задание написать полотно текста и ключевые моменты или цитаты отделить вертикальными линиями. Код примера представлен ниже:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Вертикальная линия</title>
  <style>
   .line {
    border-left: 30px double #9400D3;
    padding: 15px;
    border-image: 
   }
   .image {
    border: 20px solid #9400D3;
    padding: 25px;
    border-image: url(http://htmlbook.ru/files/images/css/css_border-image-1.png) 0 0 0 30;
   }
  </style>
 </head>
 <body>
<h2>Первый параграф. Использование border-left</h2>
<p>
  В первом абзаце выделим ключевой момент текста левой двойной линией фиолетового цвета.
   <div class="line">Этот фрагмент текста очень важен.</div>
</p>
<h2>Второй параграф. Использование border-image</h2>
<p>
  Во втором абзаце выделим ключевой момент текста вертикальной линией слева в виде изображения.
   <div class="image">Этот фрагмент текста очень важен.</div>
</p>
 </body>
</html>

Как вы могли сами заметить, материал очень легкий, однако может пригодиться для решения множества разнообразных задач. На этом я с вами прощаюсь. Не забывайте подписываться и приглашать в наш дружный коллектив своих друзей. Пока-пока!

С уважением, Роман Чуешов


Прочитано: 110 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: