Линия возле текста

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

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

Для создания линий используется свойство CSS — border, которое устанавливает рамку вокруг блока. В частных случаях, для создания линии лишь с одной стороны элемента, используются параметры border-bottom, border-top, border-left и border-right, они соответственно задают линию внизу, сверху, слева и справа.

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

Рис. 1. Типы линий

В примере 1 показано создание вертикальной линии рядом с текстом.

Пример 1. Вертикальная линия слева от текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
P.line {
border-left: solid 2px black; /* Линия слева от текста */
margin-left: 20px; /* Отступ слева от края до текста */
padding-left: 7px /* Расстояние от линии до текста */
}
</style>

</head>
<body>

<p class="line">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>

</body>
</html>

Чтобы стиль параграфа оставить неизменным, в данном примере введен новый класс line, который устанавливает возле параграфа вертикальную линию. Данный класс, кроме того, еще задает смещение 20 пикселов от левого края окна до текста с помощью параметра margin-left и отступ от линии до текста параметром padding-left, без него текст будет соприкасаться с линией слишком плотно.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.

Линия в примере сплошная, черного цвета и толщиной два пиксела.

Точно также линии можно создавать для любых блочных элементов (теги <TABLE>, <P>, <DIV>), а также для встроенных элементов (тег <SPAN>), как показано в примере 2.

Пример 2. Горизонтальная линия внизу текста

<html>
<head>
<style type="text/css">
.line {
border-bottom: 1px dotted blue
}
</style>
</head>
<body>

<p><span class="line">Lorem ipsum dolor sit amet</span>, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>

</body>
</html>

Результат данного примера показан ниже.

По аналогии с примером, линии в тексте можно отрисовывать везде, где есть такая необходимость — внизу текста, вверху, справа или слева от него.

Учебник по HTML и CSS

HTML

CSS

Статьи

Полезное

Линия возле текста