www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > FAQ CSS (ЦСС) > Линия возле контента

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

контентовая версия  

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

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

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

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

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

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

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

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

Валидный HTML
Валидный CSS
<!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=windows-1251">
<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).

Рис. 1

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

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

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

Валидный HTML
<!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=windows-1251">
<title>Горизонтальная линия</title>
<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.</p>

</body>
</html>

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

Рис. 2

Рис. 2. Горизонтальная линия под контентом

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

Статья опубликована: 03.10.2009 Последнее обновление: 16.04.2009
Поиск по сайту
FAQ CSS (ЦСС)
Разделы
CSS (ЦСС) по теме

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

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

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект