Название

Свойство CSS border и его составляющие border-width, border-style и border-color.

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

Мне бы хотелось начать рассматривать составляющие этой модели со свойства border.

boxdim

На картинке этот элемент показан красным цветом.

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

Чтобы свойство border начало действовать ему должны быть присвоены минимум 3 значения.

1) Толщина границы (border-width)

Это то пространство, которое будет занимать граница элемента на веб-странице.

2) Тип границы (border-style)

Граница может отображаться на веб-странице по разному. Вот те способы отображения, которые нам доступны.

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Чтобы было более понятно, что это за стили отображения, посмотрите на следующую картинку.

01-12-2013 8-33-00

3) Цвет границы (border-color)

Границе блока должен быть также указан цвет, которым она должна будет отображаться на веб-странице.

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

Для примера, давайте возьмем элемент абзаца и попытаемся задать для него границу.

<p style="border-width:3px; border-style:solid; border-color:#ff0000">Пример абзаца</p>

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

Это становиться возможным с помощью свойства border.

Принцип работы здесь следующий: вы пишите свойство border и через пробел перечисляете значения border-width, border-style и border-color.

Выглядит это следующим образом.

border: 3px solid #ff0000;

Таким образом, вы можете значительно сократить код при создании границ блоков.

Кроме того, для каждого из свойств границ можно добавить приставку left, right, bottom или top и указать конкретную сторону, к которой будет применяться граница.

К примеру, это может выглядеть вот так:

Или так.

<p style="border-top: 3px solid #ff0000;">Пример абзаца</p>

Как видите, со свойством border особых проблем возникать не должно. Все довольно просто и интуитивно понятно.

Назад Далее