Библиотека Интернет Индустрии I2R.ru

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

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

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

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

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

Первые две типа рамок – dotted и dashed поддерживаются браузерами Netscape и Internet Explorer только со старших версий.

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

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

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

Точно также линии можно создавать для любых блочных элементов (теги TABLE, P, DIV). Для встроенных элементов (тег SPAN) данный способ не будет работать в браузере Internet Explorer 4/5 из-за досадной ошибки, которая в нем содержится. В более старших версиях данный недостаток исправлен (пример 2).

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

Создание подчеркивания текста

Подчеркивание текста у ссылок настолько устоялось, что любое другое применение такого оформления будет с ними ассоциироваться. Чтобы не вводить посетителей сайта в заблуждение, никогда не используйте подчеркивание для обычного текста, только для ссылок. Но подчеркивание можно использовать разное, например, в виде пунктирной линии. Для этого создадим новый стиль, в котором будем использовать параметр border-bottom, он создает линию под текстом;

Пример 1. Создание пунктирного подчеркивания для ссылок

В примере создается стиль для ссылки, который при наведении не нее курсором мыши создает у текста пунктирное подчеркивание синего цвета.

Подчеркнутая ссылка

Обратите внимание, пунктирное подчеркивание появляется чуть ниже обычного подчеркивания ссылки.

Для создания просто подчеркнутого текста без ссылки, проще создать новый класс и применять его в нужном месте (пример 2).

Пример 2. Создание пунктирного подчеркивания для текста

Динамический HTML - способ управления свойствами объектов на веб-странице, такие как, графика, текст, элементы форм и другое, без необходимости обновления всей страницы.

Браузер Internet Explorer 4/5 содержит ошибку и не показывает стили для встроенных элементов. Поэтому, приведенный пример в нем работать не будет.