Линия возле текста
Можно по-разному привлечь внимание читателя к тексту. Например, сделать текст жирного начертания, изменить его цвет, использовать фон, нарисовать рамку. Но что если требуется не просто выделить текст, сколько отделить один текстовый блок от другого, разделить их на разные смысловые части? Вот тут использование линий и отступов просто неоценимо.
Текстовый блок на веб-странице сильно отличается от своего печатного собрата. Главным отличием является варьируемая ширина и высота текста, которые зависят от разрешения монитора, настроек операционной системы, браузера и других подобных вещей. Данные особенности придают верстке веб-страниц определенную сложность, но при этом порождают специфичные техники, которые намного упрощают процесс создания сайта. Рассмотрим, как можно использовать стили, чтобы создать произвольную линию возле текста, независимую от его размеров.
Для создания линий используется свойство CSS — border, которое устанавливает рамку вокруг блока. В частных случаях, для создания линии лишь с одной стороны элемента, используются параметры border-bottom, border-top, border-left и border-right, они соответственно задают линию внизу, сверху, слева и справа.
Значение этих атрибутов перечисляются через пробел и сразу устанавливают тип линии, ее толщину и цвет. Стиль линии может принимать одно из восьми значений, как показано на рис. 1, а толщина задается, как правило, в пикселах.
Рис. 1. Типы линий
В примере 1 показано создание вертикальной линии рядом с текстом.
Пример 1. Вертикальная линия слева от текста
<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. Линия возле текста
Точно также линии можно создавать для любых блочных элементов (теги <TABLE>, <P>, <DIV>), а также для встроенных элементов (тег <SPAN>), как показано в примере 2.
Пример 2. Горизонтальная линия внизу текста
<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. Горизонтальная линия под текстом
По аналогии с примером, линии в тексте можно отрисовывать везде, где есть такая необходимость — внизу текста, вверху, справа или слева от него.
| Статья опубликована: 03.10.2005 | Последнее обновление: 16.04.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
VoxDDDx
07.02.2008
в примере 1: P.line { ...
в примере 2: .line { ...
в чем отличие?
Адик
09.02.2008
Роман
21.02.2008
AndroidFX
19.03.2008
.line - для всех тегов
Например:
.line {margin-top: 5px;} можно применить в <td class="line"> или в <img class="line">
p.line {margin-top: 5px;} можно применить только в <p class="line"> в <td class="line"> работать не будет
Виктор
21.03.2008
Sokos
26.03.2008
это, так называемая, рыба для вставки в готовый макет страницы.
http://ru.wikipedia.org/wiki/Lorem_ipsum
http://www.artlebedev.ru/kovodstvo/paragraphs/67/