5.30. Установка свойства border-style
Можно воспользоваться следующими свойствами, чтобы создавать видимое обрамление вокруг элемента:
border-style;
border-width;
border-color.
Свойство border-style можно использовать для добавления видимого обрамления с одной или с нескольких сторон элемента, а также для установки стиля рамки. Данному свойству можно назначать ключевые слова, представленные в таблице 5.12.
Таблица 5.12
Ключевые слова, используемые для свойства border-style
Чтобы более наглядно представить стиль рамки, при создании образцов текста в данной таблице пришлось изменить фоновую заливку.
Можно использовать разнообразные стили рамки с каждой стороны элемента, назначая различные ключевые слова свойству border-style. Порядок значений соответствует рамке сверху, справа, снизу и слева. Так, следующее правило отображает сплошную рамку сверху и снизу элемента TITLE, без рамок слева и справа:
TITLE (border-style: solid none solid none}
В другом примере добавление следующего правила в таблицу стилей, представленную в Листинге 1.7, приводит к отображению рамки со всех сторон каждого из элементов STANZA в XML-документе из Листинга 1.8. Снаружи границ рамки имеются поля:
STANZA
{margin: 2.5em;
border-style: double solid double solid}
Нижняя и верхняя границы являются двойными, а левая и правая - одинарными, как показано на следующем рисунке.
Рисунок 29. Применение свойства border-style
5.31. Установка свойства border-width
При установке видимых линий рамки с одной или с нескольких сторон элемента с использованием свойства border-style, можно изменять и толщину рамки путем задания ключевых слов, представленных в таблице 5.13, свойству border-width.
Таблица 5.13
Ключевые слова, используемые для свойства border-width
Ключевое слово для border-width |
Пример правила CSS |
Образец |
thin |
TITLE {border-style: solid; border-width: thin} |
Руслан и Людмила |
medium |
TITLE {border-style: solid; border-width: medium} |
Руслан и Людмила |
thick |
TITLE {border-style: solid; border-width: thick} |
Руслан и Людмила |
Альтернативой является задание толщины рамки путем присвоения свойству border-width значений в единицах размеров, описанных выше. Например, следующее правило устанавливает для элемента TITLE рамку толщиной 1 пиксель (наименьшая толщина, которая может быть отображена на мониторе) по всем сторонам:
TITLE
{border-style: solid; border-width: 1px}
Можно задавать различную толщину рамки с каждой стороны элемента путем присвоения четырех различных значений — ключевых слов или значений в единицах размера - свойству border-width. Порядок следования значений соответствует верхней, правой, нижней и левой границе рамки. Например, добавление следующего правила в таблицу стилей из Листинга 1.7 создает сплошную одинарную рамку со всех сторон элемента STANZA:
STANZA
{margin: 2.5em;
border-styie: solid;
border-width: 1 px thick 1 px thick}
Границы рамки сверху и снизу имеют минимальную толщину, в то время как левая и правая границы имеют увеличенную толщину, как показано на следующем рисунке.
Рисунок 30. Применение свойства border-width