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

Установка свойства line-height

Свойство line-height управляет расстоянием между базовыми линиями соседних строк текста элемента. Вы можете воспользоваться этим свойством для разбивки строк по вертикали.

Свойству line-height можно присвоить значение, выраженное в любой из размерных единиц, описанных на вставке "Задание значений в размерных единицах" ранее в этой лекции. Предположим, вы применили следующее правило для XML-документа из Листинга 7.4 (в дополнение к правилам, содержащимся в таблице стилей из Листинга 7.3, за исключением установки свойства background-image, которое удалено с целью облегчения восприятия):

STANZA {line-height:2em}

Текст элемента STANZA будет иметь двойной междустрочный интервал, как показано на рисунке 7.26.

Рис. 7.26.

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

STANZA {line-height:200%}

Установка свойства text-transform

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

Установка свойства text-decoration

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

Вы можете применить более одного типа линий, присвоив свойству text-decoration несколько значений. (Однако включение ключевого слова none отменяет действие всех ранее установленных ключевых слов.) Например, следующее правило указывает браузеру нарисовать линию поверх и под текстом:

TITLE {text-decoration:underline overline}

Установка свойств текстовых областей

Спецификация CSS поддерживает ряд свойств (типа box ), которые вы можете использовать для форматирования блока текста, принадлежащего элементу. К этим свойствам относятся следующие:

• свойство margin добавляет невидимое (прозрачное) поле вокруг элемента, снаружи от видимой рамки (если она имеется);
• свойство border отображает видимую рамку – определенного стиля – вокруг элемента, снаружи от просвета (если он имеется);
• свойство padding добавляет просвет непосредственно снаружи от содержимого элемента, но внутри рамки (если она имеется);
• свойства задания размеров height и width устанавливают размеры области содержимого элемента с добавленными просветом и рамкой (см. рисунок 7.27);
• свойства задания позиций float и clear устанавливают положение элемента относительно окружающих элементов.
  

  
  Рис. 7.27.

Элемент block – это элемент, для свойства display с установленным значением block, а элемент inline – это элемент, для свойства display с установленным значением inline (см. раздел "Установка свойства display"). В Internet Explorer 5.0 и 5.01 первые три группы свойств ( margin, border и padding ) действуют только на элементы block. Однако, в Internet Explorer 5.5 вы можете использовать эти свойства как для элементов block, так и для элементов inline. При другой версии Internet Explorer (с 5.0 по 5.5) вы можете применять свойства позиционирования и для элементов block, и для элементов inline ; однако наиболее эффективно и предсказуемо они работают с элементами block.

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

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

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

• margin-top;
• margin-right;
• margin-bottom;
• margin-left.

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

STANZA
	{margin-left:2em;
	margin-right:2em}

Вы также можете устанавливать величину поля в процентах относительно ширины родительского элемента. Например, следующее правило создает левое поле, равное 1/4 от ширины родительского элемента:

STANZA {margin-left:25%}

Вы можете назначать одинаковые величины полей по всем четырем сторонам элемента путем присвоения одного значения – в размерных единицах или в процентах – свойству margin. В качестве примера возьмем таблицу стилей, представленную в Листинге 7.5, которая присоединена к XML-документу, представленному в Листинге 7.6. В соответствии с этой таблицей стилей текст отображается без полей.

/* File Name: Raven.css */

POEM
   {font-size:small}

POEM, TITLE, AUTHOR, DATE, STANZA, VERSE
   {display:block}

<?xml version="1.0"?>

<!-- File Name: Raven.xml -->

<?xml-stylesheet type="text/css" href="Raven.css"?>

<POEM>

<TITLE>The Raven</TITLE>
<AUTHOR>Edgar Allan Poe</AUTHOR>
<DATE>1845</DATE>

<STANZA>
   <VERSE>Once upon a midnight dreary, while I pondered, weak and weary,</VERSE>
   <VERSE>Over many a quaint and curious volume of forgotten lore&#8212;</VERSE>
   <VERSE>While I nodded, nearly napping, suddenly there came a tapping,</VERSE>
   <VERSE>As of some one gently rapping, rapping at my chamber door.</VERSE>
   <VERSE>"'Tis some visitor," I muttered, "tapping at my chamber door&#8212;</VERSE>
   <VERSE>Only this, and nothing more."</VERSE>
</STANZA>
<STANZA>
   <VERSE>Ah, distinctly I remember it was in the bleak December,</VERSE>
   <VERSE>And each separate dying ember wrought its ghost upon the floor.</VERSE>
   <VERSE>Eagerly I wished the morrow;&#8212;vainly I had sought to borrow</VERSE>
   <VERSE>From my books surcease of sorrow&#8212;sorrow for the lost Lenore&#8212;</VERSE>
   <VERSE>For the rare and radiant maiden whom the angels name Lenore&#8212;</VERSE>
   <VERSE>Nameless here for evermore.</VERSE>
</STANZA>

</POEM>

Примечание. — есть ссылка на символ для увеличенного (em) тире (-).

На рисунке 7.28 показано как будет выглядеть элемент без полей.

Рис. 7.28.

Добавив следующее правило в таблицу стилей, которое устанавливает поля в 2,5em по всем четырем сторонам элементов STANZA, вы получите то, что представлено на рисунке 7.29.

STANZA {margin:2.5em}

Рис. 7.29.

Примечание. Зона полей всегда прозрачна, т.е. через нее видна фоновая заливка или фоновый рисунок родительского элемента (или браузера).