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

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

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Вертикальная линия</title>
<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, без него контент будет соприкасаться с линией слишком плотно (рис. 1).

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

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

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

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