Рамка (border)

У кожного блокового елемента розмітки є межа. Від кордону відлічуються відступи (margin і padding). Уздовж кордону "плаваючого" блоку його обтікає текст.

Для опису меж блоків застосовуються наступні атрибути:

border-top-width - ширина верхньої межі блоку;

border-bottom-width - ширина нижньої межі блоку;

border-left-width - ширина лівої межі блоку ;

border-right-width - ширина правої межі блоку;

border-width - ширина рамки блоку. Задається в тому випадку, якщо ширина рамки блоку однакова по всьому периметру блоку;

border-color - колір рамки блоку. Згідно зі специфікацією CSS1 може бути заданий для кожної з кордонів блоку. Наприклад, border-right-color: red. Може задаватися як Мнемонік (red, blue, navy і т.п.), так і в нотації RGB (border-color: # 003366). Зазначення кольору для кожної з границь підтримується не всіма браузерами;

border-style - тип лінії рамки блоку. Може приймати значення: none, dotted, dashed, solid, double, groove, ridge, inset, outset. Згідно зі специфікацією CSS1, може бути заданий для кожної з кордонів блоку. Наприклад, border-right-style: dotted. Вказівка типу лінії кордону підтримується не всіма браузерами.

Для опису кордону немає необхідності вказувати в стилі всі атрибути. Існує скорочений запис атрибутів. Наприклад, для опису верхньої лінії кордону можна використовувати запис типу:

P {border-top: 1px dotted red;}

атрибут: шіріна_лініі тіп_лініі цвет_лініі код

       

Якщо необхідно обмежити блок тексту кордоном, то це може виглядати приблизно так:

Рис. 9.9.

У цьому прикладі ми використовували наступний опис стилю відображення кордону:

P {text-align: left; border-width: 2px;

   border-color: black; border-style: solid;}

       

Застосування кордону для позначення блоку - не найкращий спосіб оформлення документа. В усякому разі, його застосовують нечасто.

Вказуючи кордон в Internet Explorer, потрібно обов'язково визначати її тип, у противному випадку вона не буде відображатися.

Обтікання блоку тексту

Під обтіканням блоку текстом розуміють той же ефект, який можна реалізувати для графіки, коли картинка не розриває блок тексту, а вбудовується в нього. Текст у цьому випадку "обтікає" картинку з одного боку - там, де є вільне поле між межею сторінки (елементу) і картинкою. Обтікання картинки текстом від звичайного вбудовування картинки в текст документа відрізняється тим, що вздовж вертикальної кордону картинку розташовується кілька рядків тексту, а не одна.

Обтіканням блоку тексту іншим текстом керують два атрибути CSS: float і clear.

Атрибут float визначає "плаваючий" блок тексту. Він може приймати значення:

left - блок притиснутий до лівої кордоні охоплює елемента;

right - блок притиснутий до правої межі охоплює елемента;

both - текст може обтікати блок з обох сторін.

Проілюструвати обтікання дозволяє наступний приклад:

Рис. 9.10.

При використанні значення right блок тексту буде притиснутий вправо.

Рис. 9.11.

Другий атрибут опису стилів clear дозволяє управляти власне обтіканням. Він не допускає наявності "плаваючих" блоків біля блоку тексту. Атрибут може набувати значення: right, left, none, both:

Рис. 9.12.

Інтерпретації clear в різних броузерах може розрізнятися.