Здравствуйте, верные подписчики моего обучающего сайта, а также гости блога. Вы когда-нибудь обращали внимание на страницы веб-ресурсов, где вертикальная линия в 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(https://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> |
Как вы могли сами заметить, материал очень легкий, однако может пригодиться для решения множества разнообразных задач. На этом я с вами прощаюсь. Не забывайте подписываться и приглашать в наш дружный коллектив своих друзей. Пока-пока!
С уважением, Роман Чуешов
