Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Скачиваний:
145
Добавлен:
16.04.2013
Размер:
469 Кб
Скачать

5.5.16 Установка цвета рамки ('border-color').

Значение: <color>{1,4}

По умолчанию: значение свойства 'color'

Область применения: все элементы

Наследование: нет

Процентное выражение: неопр.

Свойство "цвет рамки" ('border-color') определяет цвет четырех сторон рамки. "Цвет рамки" может иметь от одного до четырех значений, которые устанавливают цвета сторон рамки аналогично вышеописанному для толщины рамки.

Если не задано ни одного значения цвета, по умолчанию присваивается значение свойства "цвет" самого элемента:

P {

color: black;

background: white;

border: solid;

}

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

5.5.17 Установка стиля рамки ('border-style')

Значение: none | dotted | dashed | solid | double | groove | ridge | inset |

outset

По умолчанию: none

Область применения: все элементы

Наследование: нет

Процентное выражение: неопр.

Свойство "стиль рамки" устанавливает стиль четырех сторон рамки. Оно может иметь от одного до четырех значений для разных сторон, устанавливаемых аналогично вышеописанному для ширины рамки.

#xy34 { border-style: solid dotted }

В вышеприведенном примере горизонтальные стороны рамки будут сплошными, а вертикальные - пунктирными.

Так как значение стиля рамки по умолчанию - 'none', то в случае, если стиль рамки явно не задан, видимой рамки не будет.

Возможны следующие стили рамки:

none

рамка не изображается (независимо от значения ширины рамки)

dotted

рамка - пунктирная линия поверх обоев элемента

dashed

рамка - штриховая линия поверх обоев элемента

solid

рамка - сплошная линия

double

рамка - двойная линия поверх обоев элемента. Сумма толщин двух линий и промежутка между ними соответствует толщине рамки.

groove

объемная канавка, цвета на основе значения свойства "цвет".

ridge

объемный гребень, цвета на основе значения свойства "цвет".

inset

объемная складка внутрь, цвета на основе значения свойства "цвет".

outset

объемная складка наружу, цвета на основе значения свойства "цвет".

Ядро CSS: UA может обрабатывать 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' и 'outset' как сплошную линию ('solid').

5.5.18 Установка обобщающего свойства "верхняя рамка" ('border-top')

Значение: <border-top-width> || <border-style> || <color>

По умолчанию: для обобщающего свойства не определено

Область применения: все элементы

Наследование: нет

Процентное выражение: неопр.

Данное свойство является обобщающим для установки ширины, стиля и цвета для верхней рамка элемента.

H1 { border-bottom: thick solid red }

В вышеуказанном примере установлены ширина, стиль и цвет для рамки элемента H1. Отсутствующим значениям присваиваются значения по умолчанию:

H1 { border-bottom: thick solid }

В вышеуказанном примере значение цвета опущено и цвет рамки будет установлен по значению свойства "цвет" самого элемента.

Обратите внимание, что в отличие от свойства "стиль рамки ", для обобщающего свойства "верхняя рамка" задается только одно значение стиля.

5.5.19 Установка обобщающего свойства "правая рамка" ('border-right')

Значение: <border-right-width> || <border-style> || <color>

По умолчанию: для обобщающего свойства не определено

Область применения: все элементы

Наследование: нет

Процентное выражение: неопр.

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

5.5.20 Установка обобщающего свойства "нижняя рамка" ('border-bottom')

Значение: <border-bottom-width> || <border-style> || <color>

По умолчанию: для обобщающего свойства не определено

Область применения: все элементы

Наследование: нет

Процентное выражение: неопр.

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

5.5.21 Установка обобщающего свойства "левая рамка" 'border-left'

Значение: <border-left-width> || <border-style> || <color>

По умолчанию: для обобщающего свойства не определено

Область применения: все элементы

Наследование: нет

Процентное выражение: неопр.

Данное свойство является обобщающим для установки ширины, стиля и цвета для левой рамки элемента. Остальное аналогично обобщающему свойству "верхняя рамка".

5.5.22 Установка обобщающего свойства " рамка" 'border'

Значение: <border-width> || <border-style> || <color>

По умолчанию: для обобщающего свойства не определено

Область применения: все элементы

Наследование: нет

Процентное выражение: неопр.

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

P { border: solid red }

P {

border-top: solid red;

border-right: solid red;

border-bottom: solid red;

border-left: solid red

}

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

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

BLOCKQUOTE {

border-color: red;

border-left: double

color: black;

}

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

Обратите внимание, что если для свойства "ширина рамки" устанавливается до четырех значений, то для рассматриваемого - только одно.