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

Установка свойств размеров

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

Вы можете задавать свойствам width и height следующие типы значений:

• любое значение в размерных единицах, описанных на вставке "Задание значений в размерных единицах" ранее в этой лекции. Например, следующее правило устанавливает для свойства width элемента STANZA значение в 3 дюйма, а для свойства height – значение в 2 дюйма:

  STANZA
  	{width:3in;
  	height:2in}
• значение в процентах относительно ширины или высоты родительского элемента.Так, следующее правило устанавливает для свойств width и height элемента STANZA значения, равные половине ширины и высоты родительского элемента:

  STANZA
  	{width:50%;
  	height:50%}
• ключевое слово auto, которое устанавливается по умолчанию. При такой установке браузер подстраивает свойства width и height в соответствии с реальными размерами текста. Например, следующее правило устанавливает для свойств width и height режим auto (это аналогично тому, что вы просто опустите установку свойств width и height ):

  STANZA
  	{width:auto;
  	height:auto}

Если вы сделаете ширину слишком маленькой, чтобы строки текста поместились внутри области содержимого, браузер будет переносить текст, пытаясь полностью разместить текст внутри отведенной области. Если же текст не помещается в зону содержимого по вертикали вследствие недостаточного значения, установленного для свойства height, браузер увеличит значение для height, чтобы разместить весь текст, как если бы вы установили для свойства height значение auto.

Так, если вы добавите следующее правило в таблицу стилей, содержащуюся в Листинге 7.5, браузер отобразит XML-документ из Листинга 7.6 (к которому присоединена таблица стилей), как показано на рисунке 7.33.

STANZA
	{border-style:solid;
	width:2.5in;
	height:1in}

Рис. 7.33.

Обратите внимание, что текст переносится с целью уместить его в отведенной ширине области в 2,5 дюйма, но высота области намного превосходит установленное значение в 1 дюйм, чтобы все содержимое текста было отображено.

Установка свойств позиционирования

Вы можете использовать свойства позиционирования float и clear для управления положением элемента block по отношению к следующему за ним тексту документа.

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

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

Вы можете устанавливать в качестве значений свойства float следующие три ключевых слова, представленные в таблице 7.15.

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

Создайте поле примечаний

1. В вашем текстовом редакторе откройте файл таблицы стилей Raven.css, представленный в Листинге 7.6.
2. Модифицируйте таблицу стилей, чтобы она приняла вид, представленный в Листинге 7.7.

   К оригинальной таблице стилей добавлены следующие новшества.

   • Для элементов STANZA установлено левое поле в один дюйм.
   • Элемент NOTE (который вы добавите в документ позднее) отформатирован как поле примечания, отображаемое в зоне левого поля первого элемента STANZA. Для этого:
     • для него установлено сплошное обрамление с толщиной линий 1 пиксель;
     • текст выровнен по центру;
     • для свойств width и height установлено значение в один дюйм;
     • установлен режим обтекания с размещением слева от последующего текста.
3. Воспользуйтесь командой Save As (Сохранить как) вашего текстового редактора, чтобы сохранить копию модифицированного документа под именем Raven01.css.

   /* File Name: Raven01.css */
   
   POEM
      {font-size:12pt}
   
   POEM, TITLE, AUTHOR, DATE, NOTE, STANZA, VERSE
      {display:block}
   
   DATE
      {margin-bottom:.25in}
   
   STANZA
      {margin-left:1in;
       margin-bottom:.25in}
   
   NOTE
      {border-style:solid;
       border-width:1px;
       text-align:center;
       width:1in;
       height:1in;
       float:left}

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

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

   <NOTE>This is a floating margin note. </NOTE>

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

   Весь документ представлен в Листинге 7.8.

   <?xml version="1.0"?>
   
   <!-- File Name: Raven01.xml -->
   
   <?xml-stylesheet type="text/css" href="Raven01.css"?>
   
   <POEM>
   
   <TITLE>The Raven</TITLE>
   <AUTHOR>Edgar Allan Poe</AUTHOR>
   <DATE>1845</DATE>
   
   <NOTE>This is a floating margin note.</NOTE>
   
   <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>

   Листинг 7.8. Raven01.xml
8. Откройте файл Raven01.xml в Internet Explorer 5. Он будет иметь вид, как показано на рисунке 7.34.
   

   
   Рис. 7.34.