Главным дополнением является введение правила для элемента 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 , чтобы изображение располагалось слева от обтекающего его текста документа.
/* 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 (html, txt)
Поскольку вы назначили элементам IMAGE свойство float:left (см. таблицу стилей), они будут обтекаться текстом и располагаться слева от элемента STANZA (который содержит последующий текст документа).
Полный документ представлен в Листинге 7.10.
Листинг 7.10. Raven02.xml (html, txt)