Все поля для этого абзаца будут вычислены автоматически.

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

Свойство margin

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

P { margin: 1em }

 

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

Если заданы два значения, то первое относится к верхнему и нижнему полям, второе - к правому и левому, при этом значения каждой пары будут равны.

DIV { margin: 10рх 5 px }

 

В данном примере для контейнеров div будут установлены поля по 10 пикселей сверху и снизу, и по 5 пикселей слева и справа. Если задано три значения, то первое применяется к верхнему полю, второе - к левому и правому, а третье - к нижнему.

BODY { margin: 0px 15px 5рх }

 

В этом примере страница не имеет верхнего поля, слева и справа поля одинаковы-по 15 пикселей, поле снизу равно 5 пикселей.

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

P { margin-top: 0.5em; margin-right: 0.5em; margin-bottom: 0.5em; margin-left: 1em; } эквивалентна правилу: P { margin: 0.5em 0.5em 0.5em 1em }

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

В HTML есть некий аналог этих свойств CSS. Это атрибуты bottoramargin, top-margin, leftmargin и rightmargin. Применять их можно только в элементе BODY для регулирования размеров полей страницы. При помощи свойств CSS можно регулировать поля любых элементов, если, конечно, это поддерживается браузерами. Для всех элементов блочного уровня поля margin поддерживаются без проблем, чуть хуже дело обстоит со строчными элементами.

 

Границы

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

Свойства 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 }

 

Свойство border-color

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

• border-top-color - цвет верхнего сегмента границы;
• border-right-color - цвет правого сегмента границы;
• border-bottom-color - цвет нижнего сегмента границы;
• border-left-color - цвет левого сегмента границы.

Значением индивидуальных свойств может быть значение цвета, указанное любым доступным в CSS способом:

• ключевым словом (red, yellow, silver и т.д.);
• шестнадцатеричным кодом цвета в полной форме (#00FFCC, #eeddaa) или сокращенно (#0FC, #EDA);
• десятичным кодом в модели RGB (color: rgb(25, 205, 172)).

В качестве примера раскрасим сегменты границы блока в разные цвета:

P { border-top-color: red; border-right-color: #EDA; border-bottom-color: #41A41C; border-left-color: rgb(25, 205, 172) }

 

Значение свойства border-color, которое является стенографическим, объединяет значения индивидуальных свойств. Единственное (но очень важное!) отличие в том, что вкачестве значения свойства border-color может использоваться ключевое слово transparent. При этом граница будет прозрачной, но все же будет иметь ширину. Данное значение не поддерживается браузерами фирмы Microsoft - в них граница будет иметь либо цвет по умолчанию (черный), если цвет ранее не задавался, либо цвет, унаследованный от родительского элемента.

Свойство border-style

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

• border-top-style - тип линии верхней границы;
• border-right-style - тип линии правой границы;
• border-bottom-style - тип линии нижней границы;
• border-left-style - тип линии левой границы.

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

• none - граница отсутствует, в результате значение свойства border-width также равно нулю. Это значение используется по умолчанию.
• hidden - подобно значению none, граница отсутствует, за исключением тех случаев, когда такое значение будет применено для таблиц. В этом случае будет использоваться принцип разрешения конфликтов границ; его мы рассмотрим позднее, когда будем изучать работу с таблицами в CSS.
• dotted - граница отображается линией, составленной из точек.
• dashed - граница отображается пунктирной линией.
• solid - граница отображается сплошной линией.
• double - граница отображается двойной сплошной линией. Сумма значений ширины двух линий и расстояния между ними должна быть равна значению свойства border-width. Самая распространенная ошибка при использовании этого значения - задать ширину линии 2 пикселя и стиль double. В этом случае невозможно отобразить двойную линию, так как минимальная возможная ширина линии на экране монитора - 1 пиксель, поэтому для отображения двойной линии и расстояния между ними необходимо минимум 3 пикселя. Соответственно, при ширине в 2 пикселя двойную линию отобразить невозможно. В результате получается обычная сплошная линия, но толщиной в 2 пикселя.
• groove - граница отображается "вдавленной" линией с имитацией объема.
• ridge - противоположно значению groove. Граница отображается "выпуклой" линией с имитацией объема.
• inset - граница отображается так, что весь блок выглядит как бы вдавленным (похоже на нажатую кнопку).
• outset - противоположно значению inset. Весь блок выглядит выпуклым.

1. hidden	Подобно значению none, граница отсутствует, за исключением тех случаев, когда такое значение будет применено для таблиц. В этом случае будет использоваться принцип разрешения конфликтов границ; его мы рассмотрим позднее, когда будем изучать работу с таблицами в CSS
2. dotted	Граница отображается линией, составленной из точек
3. dashed	Граница отображается пунктирной линией
4. solid	Граница отображается сплошной линией
5. double	Граница отображается двойной сплошной линией
6. groove	Граница отображается "вдавленной" линией с имитацией объема
7. ridge	Граница отображается "выпуклой" линией с имитацией объема
8. inset	Граница отображается так, что весь блок выглядит как бы вдавленным
9. outset	Граница отображается так, что весь блок выглядит как бы "выпуклым"

 

Стенографическое свойство border-style по аналогии с border-width позволяет сокращенно записать значения стилей для всех четырех сегментов границы. Оно допускает задание одного, двух, трех или четырех значений. Применение этих значений аналогично свойству border-width.

P { border-style: solid dotted } Стиль верхней и нижней границы вокруг абзаца будет solid, а для левой и правой — dotted.