groove
Рамка выглядит как вырезанная в канве.
ridge
Противоположно 'groove': рамка выглядит как выступающая над канвой.
inset
Весь бокс выглядит вдавленным в канву.
outset
Противоположно 'inset': выпуклый бокс.
Все рамки прорисовываются на поверхности фона бокса. Цвет рамок со значениями 'groove', 'ridge', 'inset' и 'outset' зависит от свойства 'color' элемента.
Соответствующие пользовательские агенты (ПА) HTML могут интерпретировать 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' и 'outset' как 'solid'.
'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'
Значение: <border-style> | inherit
Начальное: none
Применяется: ко всем элементам
Наследуется: нет
Процентное: N/A
Носитель: визуальный
'border-style'
Значение: <border-style>{1,4} | inherit
Начальное: см. индивидуальные свойства
Применяется: ко всем элементам
Наследуется: нет
Процентное: N/A
Носитель: визуальный
Свойство 'border-style' устанавливает стиль для четырёх сторон рамки. Может иметь от одного до четырёх значений, и значения устанавливаются для разных сторон, как для 'border-width' выше.
#xy34 { border-style: solid dotted }
В этом примере горизонтальные линии рамки будут 'solid', а вертикальные - 'dotted'.
Поскольку начальное значение стиля рамки - 'none', рамка будет видна только после установки значения стиля.
'border-top', 'border-right', 'border-bottom', 'border-left'
Значение: [ <'border-top-width'> || <'border-style'> || <color> ] | inherit
Начальное: см. индивидуальные свойства
Применяется: ко всем элементам
Наследуется: нет
Процентное: N/A
Носитель: визуальный
Это сокращённое свойство для установки ширины, стиля и цвета верхней, правой, нижней и левой сторон рамки.
H1 { border-bottom: thick solid red }
Это правило устанавливает ширину, стиль и цвет рамки после элемента H1. Опущенные значения установлены в свои начальные значения.
Поскольку нижеследующее правило не специфицирует цвет рамки, рамка будет иметь цвет, определённый свойством 'color':
H1 { border-bottom: thick solid }
'border'
Значение: [ <'border-width'> || <'border-style'> || <color> ] | inherit
Начальное: см. индивидуальные свойства
Применяется: ко всем элементам
Наследуется: нет
Процентное: N/A
Носитель: визуальный
Свойство 'border' - это сокращённое свойство для установки одинаковых значений ширины, цвета и стиля для всех четырёх сторон рамки бокса. В отличие от сокращённых свойств 'margin' и 'padding', свойство 'border' не может устанавливать разные значения для четырёх сторон. Для этого придётся использовать одно или более других свойств.
Первое правило эквивалентно установке четырёх последующих значений:
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
}
В приведённом примере цвет левой линии рамки - чёрный, а других линий - красный. Это потому, что в 'border-left' установлены ширина, стиль и цвет. Поскольку значение цвета в свойстве 'border-left' не установлено, оно будет взято из свойства 'color'. Фактически свойство 'color', установленное после свойства 'border-left', не имеет к этому никакого отношения.
Лекция 9. Модель визуального форматирования
Эта и последующие главы описывают модель визуального форматирования: то как пользовательские агенты (ПА) обрабатывают дерево документа для визуального носителя.
В модели визуального форматирования каждый элемент дерева документа генерирует ноль или более боксов в соответствии с моделью боксов. Структура этих боксов управляется:
[x]. размерами боксов и типом.
[x]. схемой позиционирования (нормальное позиционирование, всплывание и абсолютное).
[x]. взаимоотношениями между элементами в дереве документа.
[x]. внешней информацией (например, размером порта просмотра, внутренними размерами изображений и т.д.).
Свойства, определённые в этой и следующих главах, применяются и к непрерывным носителям, и к страничным носителям. В то же время, значения свойств полей варьируются при использовании со страничным носителем (см. в страничной модели).
модель визуального форматирования не определяет все аспекты форматирования (например, она не специфицирует алгоритм расстояний между буквами). Поведение соответствующих ПА может отличаться в вопросах форматирования.
ПА для непрерывных носителей обычно предлагают пользователю порт просмотра (окно или другую область просмотра на экране), в котором пользователь видит документ. ПА могут изменять внешний вид документа, если порт просмотра изменил размеры (см. начальный содержащий блок). Если порт просмотра меньше, чем начальный содержащий блок документа, ПА должен предоставить механизм прокрутки. Имеется не менее одного порта просмотра в канве, но ПА могут отображать более чем одну канву (т.е. предоставлять различные виды того же самого документа).
В CSS2 многие варианты позиционирования и размеры вычисляются относительно кромки прямоугольного бокса, называемого содержащий блок. Обычно генерируемые боксы действуют как содержащие блоки для боксов-потомков; мы говорим, что бокс "устанавливает" содержащий блок для своих потомков. Фраза "блок, содержащий бокс" означает "блок, в котором бокс находится", а не блок, генерирующий бокс.
Каждый бокс имеет позицию относительно содержащего блока, но не ограничен этим блоком и может вызвать переполнение.
Корневой элемент дерева документа генерирует бокс, который служит начальным содержащим блоком для последующего вывода.
Ширина начального содержащего блока может быть специфицирована свойством 'width' корневого элемента. Если это свойство имеет значение 'auto', ПА предоставляет начальное значение ширины (например, ПА использует текущую ширину порта просмотра).