1.3. Границы

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

Свойства border-top-width, border-right-width, border-bottom-width, border-left-width

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

• thin - тонкая граница;

• medium - граница средней толщины;

• thick - толстая граница.

Какой толщины будет граница, зависит от браузера, но при этом обязательно выполнение следующего соотношения: thin - medium - thick. Эти значения не должны изменяться на протяжении всего документа. По умолчанию используется ключевое слово medium.

Толщину границы можно указать и в произвольных единицах измерения длины: пикселях, пунктах, сантиметрах, миллиметрах и т.д. Недопустимо задание величин в процентах, а также отрицательных значений.

Например, с помощью CSS можно легко заключить в рамку текст, расположенный внутри абзаца. Так, например, можно оформить особо важную информацию — примечания, дополнения, особые замечания.

Р { border-top-width: lpx; border-right-width: medium; border-bottom-width lpx; border-left-width: thin; }

Это правило задает только толщину границы, но не определяет ее цвет и тип линии.

Свойство border-width

Это свойство стенографического типа задает значения свойств border-top-width, border-right-width, border-bottom-width, border-left-width. Свойство border-width может имееть одно, два, три или четыре значения.

Если задано только одно значение, это означает, что толщина всех сегментов границы вокруг блока одинакова:

P { border-width: 1px }

Текст абзаца будет обрамлен рамкой толщиной 1 пиксель. Если заданы два значения, то первое относится к верхнему и нижнему сегментам границы, второе — к правому и левому, при этом толщина сегмента в каждой из пар будет одинаковой.

DIV { border-width: thin mediun }

В этом примере для контейнеров DIV устанавливаются тонкие (thin) сегменты границы сверху и снизу контейнера и средние по толщине (mediun) слева и справа.

Если задано три значения, то первое применяется к толщине верхнего сегмента границы, второе - левого и правого, а третье - нижнего сегмента.

H1 { border-width: 0px lpx 2px }

В этом примере верхний сегмент границы заголовка отсутствует, слева и справа границы они будут одинаковы - по 1 пикселю, а толщина нижнего сегмента будет равна 2 пикселям. Если заданы все четыре значения, то они будут отвечать толщине верхнего, правого,; нижнего и левого сегментов границы соответственно. Иначе говоря, задание толщины сегментов границы начинается с верхнего и далее по часовой стрелке, заканчивая левым сегментом. Следовательно, запись:

P ( border-top-width: 1px; border-right-width: medium; border-bottom-width 2px; border-left-width: thin } будет эквивалентна правилу: P ( border-width: lpx medium 2px thin }