5.31. Установка свойства border-color
По умолчанию рамки, которые создаются с использованием свойства border-style, имеют тот же цвет, что и текущий цвет, установленный для свойства color элемента. Однако можно менять цвет для всех четырех границ рамки путем присвоения свойству border-color любого из значений цвета, описанных выше. Например, следующее правило добавляет сплошную рамку красного цвета со всех сторон элемента TITLE:
TITLE
{border-style: solid;
border-color: red}
Можно также задавать различный цвет для отдельных границ рамки вокруг элемента, присваивая четыре различных значения цвета свойству border-color. Например, следующее правило устанавливает сплошные красные линии рамки сверху и снизу элемента TITLE, а также сплошные зеленые линии рамки слева и справа от элемента:
TITLE
{border-style: solid;
border-color: red green red green}
5.32. Установка свойств просвета между обрамлением и текстом
Напомним, что свойства просвета (padding) добавляют пространство непосредственно вокруг содержимого элемента внутри от имеющейся вокруг элемента рамки. Без просвета границы рамки располагаются непосредственно вблизи текста элемента. Добавление просвета улучшает восприятие рамки.
По умолчанию ширина просвета для элемента устанавливается близкой к нулю. Чтобы добавить просвет с одной или с нескольких сторон от текста элемента, можно присвоить ненулевое значение одному или нескольким из следующих свойств:
padding-top;
padding-right;
padding-bottom;
padding-left.
Для этих свойств можно устанавливать значения в любых размерных единицах, описанных выше. Например, следующее правило добавляет просвет сверху и снизу от элемента STANZA. Ширина просвета равна двойной высоте текста элемента:
STANZA
{padding-top:2em;
padding-bottom:2em}
Можно задавать ширину просвета и в процентах относительно ширины родительского элемента. Так, следующее правило добавляет просвет слева от элемента STANZA. Ширина просвета составляет 1/4 от ширины родительского элемента:
STANZA {padding-left: 25%}
Необходимо помнить, что можно добавлять просвет одинаковой ширины со всех четырех сторон элемента, присвоив единственное значение - в размерных единицах или в процентах - свойству padding. Если добавить следующее правило в таблицу стилей, содержащуюся в Листинге 1.7:
STANZA
{margin: 2.5em;
border-style: solid;
padding: 2em}
то будет получено следующее форматирование областей для каждого элемента STANZA:
просвет, ширина 2ет, непосредственно вокруг элемента;
обрамление сплошной линией по контуру просвета;
поле снаружи от рамки.
На следующем рисунке показано, как документ будет выглядеть в Internet Explorer.
Рисунок 31. Применение свойства padding
Для просвета, как для содержимого элемента, отображается любой фон в виде сплошной заливки или рисунков, которые вы назначили для элемента. (В отличие от области полей, для которых отображается фон родительского элемента.
5.33. Установка свойств размеров
Свойства width и height управляют размерами зоны содержимого элемента плюс областями, занимаемыми просветом и обрамлением.
Свойствам width и height можно задавать следующие типы значений:
любое значение в размерных единицах, описанных выше. Например, следующее правило устанавливает для свойства width элемента STANZA значение в 3 дюйма, а для свойства height -значение в 2 дюйма:
STANZA
{width:3in;
height:2in}
значение в процентах относительно ширины или высоты родительского элемента. Так, следующее правило устанавливает для свойств width и height элемента STANZA значения, равные половине ширины и высоты родительского элемента:
STANZA
{width:50%;
height:50%}
ключевое слово auto, которое устанавливается по умолчанию. При такой установке браузер подстраивает свойства width и height в соответствии с реальными размерами текста. Например, следующее правило устанавливает для свойств width и height режим auto (это аналогично тому, что свойства width и height оущены):
STANZA
{width:auto;
height:auto}
Если сделать ширину слишком маленькой, чтобы строки текста поместились внутри области содержимого, браузер будет переносить текст, пытаясь полностью разместить текст внутри отведенной области. Если же текст не помещается в зону содержимого по вертикали вследствие недостаточного значения, установленного для свойства height, браузер увеличит значение для height, чтобы разместить весь текст, как если бы для свойства height было установлено значение auto.
Так, если добавить следующее правило в таблицу стилей, содержащуюся в Листинге 1.7, браузер отобразит XML-документ из Листинга 1.8 (к которому присоединена таблица стилей), как показано на следующем рисунке.
Рисунок 32. Установка свойств размеров
STANZA
{border-styte: solid;
width: 2.5in;
height: 1 in}
Обратите внимание, что текст переносится с целью уместить его в отведенной ширине области в 2,5 дюйма, но высота области намного превосходит установленное значение в 1 дюйм, чтобы все содержимое текста было отображено.