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

Отобразите обтекаемое текстом изображение

1. В вашем текстовом редакторе откройте таблицу стилей Raven.css, представленную в Листинге 7.5.
2. Модифицируйте таблицу стилей в соответствии с Листингом 7.9.

   Главным дополнением является введение правила для элемента IMAGE:

   IMAGE
   	{background-image:url(Raven.bmp);
   	background-repeat:no-repeat;
   	background-position:center;
   	width:89px;
   	height:58px;
   	float:left}

   Элемент IMAGE является пустым элементом (его вы позднее добавите в XML-документ), созданным для отображения обтекаемого текстом рисунка. Элемент не содержит текста, но ему назначен фоновый рисунок (с помощью трех свойств, устанавливаемых в правиле), который будет отображен вместо текста.

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

   Наконец, вы установили для свойства float значение left, чтобы изображение располагалось слева от обтекающего его текста документа.
3. Воспользуйтесь командой Save As (Сохранить как) вашего текстового редактора, чтобы сохранить копию модифицированного документа под именем Raven02.css.

   /* File Name: Raven02.css */
   
   POEM
      {font-size:12pt}
   
   POEM, TITLE, AUTHOR, DATE, IMAGE, STANZA, VERSE
      {display:block}
   
   DATE, STANZA
      {margin-bottom:.25in}
   
   IMAGE
      {background-image:url(Raven.bmp);
       background-repeat:no-repeat;
       background-position:center;
       width:89px;
       height:58px;
       float:left}

   Листинг 7.9. Raven02.css
4. В вашем текстовом редакторе откройте документ Raven.xml, представленный в Листинге 7.6.
5. В документе Raven.xml отредактируйте инструкцию по обработке xml-stylesheet в начале файла, чтобы она указывала на новую таблицу стилей, которую вы только что создали – Raven02.css – следующим образом:

   <?xml-stylesheet type="text/css" href="Raven02.css"?>
6. В документ Raven.xml добавьте следующий пустой элемент IMAGE непосредственно перед каждым элементом STANZA:

   <IMAGE />

   Поскольку вы назначили элементам IMAGE свойство float:left (см. таблицу стилей), они будут обтекаться текстом и располагаться слева от элемента STANZA (который содержит последующий текст документа).
7. Воспользуйтесь командой Save As (Сохранить как) текстового редактора, чтобы сохранить копию модифицированного документа под именем Raven02.xml.

   Полный документ представлен в Листинге 7.10.

   <?xml version="1.0"?>
   
   <!-- File Name: Raven02.xml -->
   
   <?xml-stylesheet type="text/css" href="Raven02.css"?>
   
   <POEM>
   
   <TITLE>The Raven</TITLE>
   <AUTHOR>Edgar Allan Poe</AUTHOR>
   <DATE>1845</DATE>
   
   <IMAGE />
   <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>
   
   <IMAGE />
   <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>

   Листинг 7.10. Raven02.xml
8. Откройте файл Raven02.xml в Internet Explorer 5. Он будет отображен, как показано на рисунке 7.35.
   

   
   Рис. 7.35.

Установка свойства clear

По умолчанию обтекаемый элемент (т.е. элемент, свойству float которого присвоено значение left или right ) будет отображен слева или справа от последующего текста в документе. Однако вы можете отменить размещение элемента рядом с текстом, воспользовавшись свойством clear.

Свойству clear могут быть установлены следующие значения в виде ключевых слов, представленных в таблице 7.16.

Например, если вы добавите следующее правило в таблицу стилей из Листинга 7.9, каждый элемент STANZA будет отображаться ниже предшествующего (обтекаемого) элемента IMAGE, но не рядом с ним, как показано на рисунке 7.36.

STANZA
	{clear:left}

Рис. 7.36.

Использование псевдоэлементов (только для Internet Explorer 5.5)

Если вы собираетесь отображать XML-документ в Internet Explorer 5.5, то можете создать правило, которое применяется только к первой букве элемента block с помощью добавления указателя : first-letter к имени элемента в селекторе. Аналогично, вы можете создать правило, которое применимо только к первой строке элемента block, добавив указатель : first-line к имени элемента в селекторе. Подобные выражения создают так называемый псевдоэлемент – "псевдо" здесь означает, что правило применяется к фрагменту текста, который не является отдельным элементом.

Например, если XML-документ содержит ряд элементов PARAGRAPH, следующие правила отобразят первую букву каждого элемента увеличенным шрифтом, а также преобразуют все символы в первой строке в прописные:

PARAGRAPH
	{display:block;
	font-size:small}
PARAGRAPH:first-letter
	{font-size:large}
PARAGRAPH:first-line
	{text-transform:uppercase}

На рисунке 7.37 показано как Internet Explorer 5.5 отобразит элемент PARAGRAPH.

Рис. 7.37.

(Цитата из первого абзаца книги Германа Мелвилла "Моби Дик".)