Опубликован: 24.01.2007 | Доступ: свободный | Студентов: 9680 / 1717 | Оценка: 4.28 / 4.09 | Длительность: 20:51:00
Лекция 7:

Отображение XML-документов с использованием таблиц каскадных стилей

Установка свойств управления обрамлением

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

  • border-style;
  • border-width;
  • border-color.

Установка свойства border-style

Вы можете использовать свойство border-style для добавления видимого обрамления с одной или с нескольких сторон элемента, а также для установки стиля рамки. Вы можете назначать свойству border-style ключевые слова, представленные в таблице 7.13.

Таблица 7.13.
Ключевое слово в border-style: solid
Пример правила CSS: TITLE {border-style:solid}
Ключевое слово в border-style: dotted (только в Internet Explorer 5.5 и выше)
Пример правила CSS: TITLE {border-style:dotted}
Ключевое слово в border-style: dashed (только в Internet Explorer 5.5 и выше)
Пример правила CSS: TITLE {border-style:dashed}
Ключевое слово в border-style: double
Пример правила CSS: TITLE {border-style:double}
Ключевое слово в border-style: groove
Пример правила CSS: TITLE {border-style:groove}
Ключевое слово в border-style: ridge
Пример правила CSS: TITLE {border-style:ridge}
Ключевое слово в border-style: inset
Пример правила CSS: TITLE {border-style:inset}
Ключевое слово в border-style: outset
Пример правила CSS: TITLE {border-style:outset}
Ключевое слово в border-style: none
Пример правила CSS: TITLE {border-style:none}

Вы можете использовать разнообразные стили рамки с каждой стороны элемента, назначая различные ключевые слова свойству border-style. Порядок значений соответствует рамке сверху, справа, снизу и слева. Так, следующее правило отображает сплошную рамку сверху и снизу элемента TITLE, без рамок слева и справа:

TITLE {border-style:solid none solid none}

В другом примере добавление следующего правила в таблицу стилей, представленную в Листинге 7.5, приводит к отображению рамки со всех сторон каждого из элементов STANZA в XML-документе из Листинга 7.6. Снаружи границ рамки имеются поля:

STANZA
	{margin:2.5em;
	border-style:double solid double solid}

Нижняя и верхняя границы являются двойными, а левая и правая – одинарными, как показано на рисунке 7.30.


Рис. 7.30.

Установка свойства border-width

Если вы установили видимые линии рамки с одной или с нескольких сторон элемента с использованием свойства border-style, вы можете изменять толщину рамки путем задания ключевых слов, представленных в таблице 7.14, свойству border-width.

Таблица 7.14.
Ключевое слово в border-width: thin
Пример правила CSS: TITLE {border-style:solid; border-width:thin}
Ключевое слово в border-width: medium
Пример правила CSS: TITLE {border-style:solid; border-width:medium}
Ключевое слово в border-width: thick
Пример правила CSS: TITLE {border-style:solid; border-width:thick}

Альтернативой является задание толщины рамки путем присвоения свойству border-width значений в единицах размеров, описанных на вставке "Задание значений в размерных единицах" ранее в этой лекции. Например, следующее правило устанавливает для элемента TITLE рамку толщиной 1 пиксель (наименьшая толщина, которая может быть отображена на мониторе) по всем сторонам:

TITLE
	{border-style:solid;
	border-width:1px}

Вы можете задавать различную толщину рамки с каждой стороны элемента путем присвоения четырех различных значений – ключевых слов или значений в единицах размера – свойству border-width. Порядок следования значений соответствует верхней, правой, нижней и левой границе рамки. Например, добавление следующего правила в таблицу стилей из Листинга 7.5 создает сплошную одинарную рамку со всех сторон элемента STANZA:

STANZA
	{margin:2.5em;
	border-style:solid;
	border-width:1px thick 1px thick}

Границы рамки сверху и снизу имеют минимальную толщину, в то время как левая и правая границы имеют увеличенную толщину, как показано на рисунке 7.31.


Рис. 7.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}

Установка свойств просвета между обрамлением и текстом

Напомним, что свойства просвета (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. Допустим, что вы добавили следующее правило в таблицу стилей, содержащуюся в Листинге 7.5:

STANZA
	{margin:2.5em;
	border-style:solid;
	padding:2em}

Это правило задает следующее форматирование областей для каждого элемента STANZA:

  • просвет шириной 2em, непосредственно вокруг элемента;
  • обрамление сплошной линией по контуру просвета;
  • поле снаружи от рамки.

На рисунке 7.32 показано как документ будет выглядеть в Internet Explorer 5.


Рис. 7.32.

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

Максим Попов
Максим Попов

Почему при использовании скриптов, приведенных в курсе Основы XML

лекция Лекция 8: 

Отображение XML-документов с использованием связывания данных

не происходит связывания XLM документа с HTML?

Отображаются пустые поля. Браузер IE11

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!