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

Установка свойства letter-spacing

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

TITLE {letter-spacing:.25em}

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

TITLE {letter-spacing:-.5pt}

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

Вы также можете выбрать обычную величину просвета, установив для свойства letter-spacing значение normal. Например, следующая таблица стилей, присоединенная к XML-документу из Листинга 7.4, назначает увеличенный просвет между символами для элемента TITLE, и назначает обычный просвет между символами для элемента SUBTITLE (второе назначение необходимо, чтобы отменить увеличенный просвет между символами, который в противном случае элемент SUBTITLE унаследовал бы от родительского элемента TITLE ):

POEM
	{font-size:145%}
POEM, TITLE, SUBTITLE, AUTHOR, SECTION, NUMBER, STANZA, VERSE
	{display:block}
SECTION, STANZA
	{margin-top:1em}
TITLE
	{letter-spacing:.5em}
SUBTITLE
	{letter-spacing:normal}

В соответствии с правилами этой таблицы стилей, Internet Explorer 5 отобразит XML-документ как показано на рисунке 7.20.

Рис. 7.20.

Установка свойства vertical-align

Вы можете использовать свойство vertical-align для создания верхних или нижних индексов (надстрочных и подстрочных символов). Это свойство оказывает воздействие только на элементы inline (см. раздел "Установка свойства display" ранее в этой лекции).

Вы можете назначить свойству vertical-align одно из ключевых слов CSS, описанных в таблице 7.10. Чтобы получить образцы текста, я присваивал значение свойству vertical-align только для элемента CHILD, который является элементом inline и описан в документе следующим образом:

<PARENT>PARENT ELEMENT
			<CHILD>CHILD ELEMENT</CHILD>
		</PARENT>

Дочерние элементы не наследуют свойство vertical-align.

CHILD
{font-size:75%;
vertical-align:baseline}

CHILD
{font-size:75%;
vertical-align:sub}

CHILD
{font-size:75%;
vertical-align:super}

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

Вы можете воспользоваться свойством text-align для управления горизонтальным выравниванием текста элемента. Это свойство будет работать только в том случае, если вы используете его для элемента типа block. Оно воздействует как на сам элемент, так и на дочерние элементы, которые он содержит, независимо от того, относятся ли они к типу block или inline. (Об элементах block и inline рассказывалось в разделе "Установка свойства display".)

Свойство text-align воздействует на выравнивание текста внутри области содержимого текста. По умолчанию область содержимого текста занимает практически полную ширину окна браузера. Однако, вы можете модифицировать как ширину, так и положение области текста элемента (см. раздел "Установка свойств текстовых областей" далее в этой лекции).

Вы можете назначить свойству text-align одно из следующих трех ключевых слов:

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

  POEM {text-align:left}

  Поэма будет выглядеть, как показано на рисунке 7.21.

  

  
  Рис. 7.21.
• right. Выравнивает каждую строку по правому краю. Так, следующее правило выравнивает текст поэмы вправо, как показано на рисунке 7.22.

  POEM {text-align:right}

  

  
  Рис. 7.22.
• center. Центрирует строки по горизонтали. Например, следующее правило центрирует весь текст поэмы, как показано на рисунке 7.23.

  POEM {text-align:center}

  

  
  Рис. 7.23.

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

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

VERSE {text-indent:3em}

Вот как будет выглядеть элемент VERSE:

It is in his walk, the carriage of his
neck, the flex of his waist and knees-dress
does not hide him;

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

VERSE {text-indent:50%}

Вот как элемент VERSE будет выглядеть:

It is in his walk, the
carriage of his neck, the flex of his waist
and knees-dress does not hide him;

Совет. Чтобы задать отступ для всех строк элемента (а не только для первой строки), воспользуйтесь свойством margin-left (см. раздел "Установка свойств управления полями" далее в этой лекции).

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

Рис. 7.24.

Чтобы избежать этого, вы должны установить для элемента левое поле. Например, следующее правило устанавливает левое поле шириной в 4em ( margin-left:4em ), а затем сдвигает первую строку на 2em ( text-indent:-2em ), создавая висячий отступ, как показано на рисунке 7.25.

VERSE
	{margin-left:4em;
	text-indent:-2em}

Рис. 7.25.