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

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

border-style;
border-width;
border-color.

Установка свойства border-style

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

Таблица 7.13

Ключевое слово в border-style: Пример правила CSS: Образец текста:	solid TITLE { border-style isolid} The Raven
Ключевое слово в border-style: Пример правила CSS: Образец текста:	dotted (только JB, Internet Explorer 5.5) TITLE {border-style:dotted} •The Raven •
Ключевое слово в border-style: Пример правила CSS: Образец текста:	dashed (только в Internet Explorer 5.5) TITLE {border-style:dashed} The "Raven
Ключевое слово в border-style: Пример правила CSS: Образец текста:	double TITLE {border-style: double} The Raven
Ключевое слово в border-style: Пример правила CSS: Образец текста:	groove TITLE {border-style: groove} The Raven
Ключевое слово в border-style: Пример правила CSS: Образец текста:	ridge TITLE {border-style:ridge} The Raven
Ключевое слово в border-style: Пример правила CSS: Образец текста:	inset TITLE {border-style:inset} The Raven
Ключевое слово в border-style: Пример правила CSS: Образец текста:	outset TITLE {border-style: outset} The Raven
Ключевое слово в border-style: Пример правила CSS: Образец текста:	none TITLE {border-style :none} The Raven

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

Вы можете использовать разнообразные стили рамки с каждой стороны элемента, назначая различные ключевые слова свойству border-style. Порядок значений соответствует рамке сверху, справа, снизу и слева. Так, следующее правило отображает сплошную рамку сверху и снизу элемента TITLE, без рамок слева и справа:

TITLE (border-style:solid none solid none}

В другом примере добавление следующего правила в таблицу стилей, представленную в Листинге 7-5, приводит к отображению рамки со всех сторон каждого из элементов STANZA в XML-документе из Листинга 7-6. Снаружи границ рамки имеются поля:

STANZA

{margin:2.5em;

border-style:double solid double solid}

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

Установка свойства border-width

Если вы установили видимые линии рамки с одной или с нескольких сторон элемента с использованием свойства border-style, вы можете изменять толщину рамки путем задания ключевых слов, представленных в таблице 7.14, свойству border-width.

Таблица 7.14

Ключевое слово в border- width: thin

Пример правила CSS: TITLE {border-style:solid; border-

width:thin}

Образец текста: The Raven

Ключевое слово в border-width: medium

Пример правила CSS: TITLE {border-style:solid; border-

width:medium}

Образец текста: The Raven

Ключевое слово в border-width: thick

Пример правила CSS: TITLE {border-style:solid; border-

width:thick}

Образец текста: TheRaven

Альтернативой является задание толщины рамки путем присвоения свойству border-width значений в единицах размеров, описанных на вставке задание значений в размерных единицах» ранее в этой главе. Например, следующее правило устанавливает для элемента TITLE рамку толщиной 1 пиксель (наименьшая толщина, которая может быть отображена па мониторе) по всем сторонам:

TITLE

{border-style:solid; border-width: 1px}

Вы можете задавать различную толщину рамки с каждой стороны элемента путем присвоения четырех различных значений — ключевых слов или значений в единицах размера - свойству border-width. Порядок следования значений соответствует верхней, правой, нижней и левой границе рамки. Например, добавление следующего правила в таблицу стилей из Листинга 7-5 создает сплошную одинарную рамку со всех сторон элемента STANZA:

STANZA

{margin:2.5em;

border-styie:solid;

border-width: 1 px thick 1 px thick}

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

Установка свойства border-color

По умолчанию рамки, которые вы создаете с использованием свойства border-style, имеют тот же цвет, что и текущий цвет, установленный для свойства color элемента. Вы можете менять цвет для всех четырех границ рамки путем присвоения свойству border-color любого из значений цвета, описанных на вставке «Задание значений цвета» ранее в этой главе. Например, следующее правило добавляет сплошную рамку красного цвета со всех сторон элемента TITLE:

TITLE

{border-style:solid;

border-colorred}

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

TITLE

{border-style:solid;

border-cotonred green red green}

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

Напомним, что свойства просвета (podding) добавляют пространство непосредственно вокруг содержимого элемента (см. начало раздела «Установка свойств текстовых областей») внутри от имеющейся вокруг элемента рамки. Без просвета границы рамки располагаются непосредственно вблизи текста элемента. Добавление просвета улучшает восприятие рамки.

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

padding-top;
padding-right;
padding-bottom;
padding-left.

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

STANZA

{padding-top:2em;

padding-bottom:2em}

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

STANZA {padding-left:25%}

Помните, что вы можете добавлять просвет одинаковой ширины со всех четырех сторон элемента, присвоив единственное значение - в размерных единицах или в процентах - свойству padding. Допустим, что вы добавили следующее правило в таблицу стилей, содержащуюся в Листинге 7-5:

STANZA

{margin:2.5em;

border-style:solid;

padding:2em}

Это правило задает следующее форматирование областей для каждого элемента STANZA:

просвет, ширина 2ет, непосредственно вокруг элемента;
обрамление сплошной линией по контуру просвета;
поле снаружи от рамки.

На следующем рисунке показано, как документ будет выглядеть в Internet Explorer 5.

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

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

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

Вы можете задавать свойствам 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 (к которому присоединена таблица стилей), как показано на следующем рисунке.

STANZA

{border-styte:solid;

width:2.5in;

height: 1 in}

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

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

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

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

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

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

Таблица 7.15

Ключевое слово	Эффект
left	Отображает содержимое элемента слева от последующего текста документа
right	Отображает содержимое элемента справа от последующего текста документа
попе (по умолчанию)	Отключает функцию обтекаемого размещения. Элемент при этом размещается как обычный элемент block. To есть, предшествующий текст документа - выше его, а последующий - ниже

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

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

В вашем текстовом редакторе откройте файл таблицы стилей Raven.css, представленный в Листинге 7-6 и содержащийся на CD-ROM, приложенном к книге.
Модифицируйте таблицу стилей, чтобы она приняла вид, представленный в Листинге 7-7.

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

Для элементов STANZA установлено левое поле в один дюйм.

Элемент NOTE (который вы добавите в документ позднее) отформатирован как поле примечания, отображаемое в зоне левого поля первого элемента STANZA. Для этого:

для него установлено сплошное обрамление с толщиной линий 1 пиксель;

текст выровнен по центру;

для свойств width и height установлено значение в один дюйм;

установлен режим обтекания с размещением слева от последующего текста.

Воспользуйтесь командой Save As (Сохранить как) вашего текстового редактора, чтобы сохранить копию модифицированного документа как Raven01.ess.

Листинг 7-7

Raven01.ess

/* Имя файла: RavenOI .ess */

POEM

{font-size: 12pt}

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

DATE

{margin-bottom:.25in}

STANZA

{margin-left:1 in; margin-bottom:.25in}

NOTE

{border-style:solid;

border-width:1px;

text-align :center;

width:1in;

height:1 in;

float:left}

В вашем текстовом редакторе откройте документ Raven.xml, представленный в Листинге 7-6 и содержащийся на CD- ROM, прилагаемом к книге.
В файле Raven.xml отредактируйте инструкцию по обработке xml-stylesheet в начале файла, чтобы он указывал на новую таблицу стилей, которую вы только что создали — RavenOI .CSS — следующим образом:

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

В документе Raven.xml добавьте следующий новый элемент непосредственно над элементом STANZA:

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

Поскольку в таблице стилей для элемента NOTE вы установили свойство float:left, он будет располагаться слева от последующего текста документа - т.е., слева от первого элемента STANZA.

7. Воспользуйтесь командой Save As (Сохранить как) вашего текстового редактора, чтобы сохранить копию модифицированного документа под именем Raven01 .xml.

Весь документ представлен в Листинге 7-8. Он также содержится на прилагаемом к книге CD-ROM.

Листинг 7-8

Raven01.xml

<?xmlversion="1.0"?>



<?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—</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>Onlythis, 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;—vainly I had sought to

borrow</VERSE>

<VERSE>From my books surcease of sorrow—sorrow for the lost

Lenore—</VERSE>

<VERSE>For the rare and radiant maiden whom the angels name

Lenore—</VERSE>

<VERSE>Nameless here for evermore.</VERSE>

</STANZA>

</POEM>

Откройте файл RavenOI .xml в Internet Explorer 5. Он будет иметь вид, как показано на следующем рисунке.

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

В вашем текстовом редакторе откройте таблицу стилей Raven.CSS, представленную в Листинге 7-5 и содержащуюся на прилагаемом к книге CD-ROM.
Модифицируйте таблицу стилей в соответствии с Листингом 7-9.

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

IMAGE

{background-image:url(Raven.bmp);

background-repeat:no-repeat;

background-position:center;

width:89px;

height:58px;

ftoat:teft}

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

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

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

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

Листинг 7-9

Raven02.css

/* Имя файла: Raven02.css */

РОЕМ

{font-size:12pt}

РОЕМ, 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}

В вашем текстовом редакторе откройте документ Raven.xml, представленный в Листинге 7-6 и имеющийся на CD-ROM.
В документе Raven.xml отредактируйте инструкцию по обработке xml-stylesheet в начале файла, чтобы она указывала на новую таблицу стилей, которую вы только что создали — Raven02.css - следующим образом:

<?xml-stytesheet type="text/css" href="Raven02.css"?>

В документ Raven.xml добавьте следующий пустой элемент IMAGE непосредственно перед каждым элементом STANZA:

<IMAGE/>

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

Воспользуйтесь командой Save As (Сохранить как) текстового редактора, чтобы сохранить копию модифицированного документа под именем Raven02.xml.

Полный документ представлен в Листинге 7-10. Его копия также имеется на прилагаемом к книге CD- ROM (файл Raven02.xml).

Листинг 7-10

Raven02.xml

<?xml version="11.0"?>



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

<РОЕМ>

<TITLE>The Raven<AITLE>

<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&t8212;</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—</VERSE>

<VERSE>Onlythis, 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;—vainly I had sought to borrow</VERSE>

<VERSE>From my books surcease of sorrow&f 8212;sorrow for the lost Lenore—</VERSE>

<VERSE>For the rare and radiant maiden whom the angels name Lenore—</VERSE>

<VERSE>Nameless here for evermore.</VERSE>

</STANZA>

</POEM>

Откройте файл Raven02.xml в Internet Explorer 5. Он будет отображен, как показано на рисунке на следующей странице.

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

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

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

Таблица 7.16

Ключевое слово	Эффект
left	Элемент будет отображен ниже (а не рядом) относительно предшествующего обтекаемого элемента, для которого установлено свойство floatdeft
right	Элемент будет отображен ниже (а не рядом) относительно предшествующего обтекаемого элемента, для которого установлено свойство float:right
both	Элемент будет отображен ниже (а не рядом) относительно предшествующего обтекаемого элемента, для которого установлено свойство float'.left или float:right
попе (по умолчанию)	Элемент будет отображен рядом с предшествующим обтекаемым элементом

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

STANZA (clear: left}

Использование псевдо-элементов (только для 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}

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

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

Вставка элементов HTML в ХМ L-доку менты и использование пространства имен

Хотя вы можете использовать таблицы каскадных стилей для добавления базовых возможностей форматирования элементов XML в ваш документ, было бы хорошо иметь возможность добавлять стандартные HTML-элементы — такие, как гиперссылки, изображения и формы — чтобы ваш документ выигрывал от применения встроенных в эти элементы функций. К счастью, когда вы отображаете документ с помощью присоединенной таблицы стилей, то можете вставить в него любой стандартный элемент HTML и заставить браузер отобразить этот элемент с использованием специальных зарезервированных для этой цели имен элементов.

Вам может показаться, что можно вставить HTML-элемент, просто присвоив XML-элементу такое же имя. Например, вставить HTML-элемент IMG, просто создав элемент IMG следующим образом:

<IMG SRC="Raven.bmp" />

Однако у браузера нет возможности узнать, что это HTML-элемент, а не обычный созданный вами XML-элемент. Чтобы подобный механизм мог работать, все имена HTML-элементов (а их много) должны быть зарезервированы исключительно для вставки HTML-элементов. Такой подход, однако, противоречил бы духу XML, в соответствии с которым вам разрешается использовать для ваших элементов любые корректно заданные имена.

К счастью, вы можете воспользоваться соглашением XML, известным как п ространство имен, которое позволяет различать конфликтующие имена. Два разных элемента могут иметь одно и то же имя, если они принадлежат разным пространствам имен.

Идентификатор пространства имен добавляется в начале имени элемента и отделяется от остальной части имени двоеточием (:), как в следующем примере:

my-namespace: MY-ELEM ENT

Элемент с именем ту-namespace: MY-ELEMENT и элемент с именем М Y-ELEMENT могут существовать в одном и том же документе и считаются различными элементами, поскольку принадлежат отдельным пространствам имен: my-namespace:MY-ELEMENT Принадлежит пространству имен my-namespace, а элемент MY-ELEMENT по умолчанию принадлежит к пространству имен документа.

Однако прежде чем вы сможете использовать пространство имен, вы должны соответствующим образом объявить его. Хотя есть несколько мест, в которых вы можете сделать объявление пространства имен, проще всего это сделать внутри начального тега элемента, для которого вы хотите использовать пространство имен. Например, вы можете объявить пространство имен my-namespace, как показано на следующем рисунке.

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

Если имя XML-элемента совпадает с именем стандартного HTML-элемента (например, IMG, А или HR) и если он принадлежит пространству имен htrnl, Internet Explorer 5 интерпретирует его как HTML-элемент и поместит его на отображаемую страницу. Однако если элемент не принадлежит пространству имен html, Internet Explorer 5 интерпретирует его как обычный XML-элемент.

Пространство имен html является специальным, зарезервированным пространством имен, которое объявляется следующим образом:

xmlns:html=http://www.wЗc.org/TR/REC-html40/'

Вот пример XML-элемента, который указывает Internet Explorer 5 вставить HTML-элемент IMG, для которого источником изображения является файл Raven.bmp:

<html:IMG xmlns:html='http://www.w3c.org^R/REC-html40/'

src='Raven.bmp'/>

Это корректно сформированный пустой XML-элемент. Его имя включает указание пространства имен, он также имеет два атрибута. Первый атрибут объявляет пространство имен, в то время как второй атрибут является стандартным HTML-атрибутом, который вы можете включить в начальный тег HTML-элемента IMG.

Имейте в виду, что если вы вставляете HTML-элемент описанным выше способом, XML-документ должен иметь присоединенную таблицу стилей, и вы должны открыть его непосредственно в браузере (как и все XML-документы, описанные в этой главе).

Ссылка. Официальную спецификацию пространства имен вы можете найти на Web-странице консорциума W3C по адресу http://www.w3.org/ 'rR/REC-xml-names/.

Пример

Версия документа RAVEN, представленная в Листинге 7-1 (а также в файле Raven03.xml на CD-ROM), иллюстрирует технику включения HTML it XML-документ. Обратите внимание, что к этому документу присоединена оригинальная версия таблицы стилей Raven.css, которая содержится и Листинге 7-5, а также на CD-ROM.

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

Он содержит изображение, представленное следующим XML-элемен-том: .

<html: IMG xmlns:html='http://www.w3c.org/TR/Rec-html40/'

SRC='Raven.bmp' ALIGN='LEFT />

Этот элемент помещает стандартный HTML-элемент IMG (изображение). Атрибут HTML ALIGN='LEFT' делает изображение обтекаемым и размещает его слева от последующего текста документа. Этот метод является альтернативой методу, с которым вы познакомились ранее в разделе «Отобразите обтекаемое текстом изображение».

Он делает имя автора (которое ранее содержалось в элементе AUTHOR) гиперссылкой с помощью следующего XML-элемента (вместо элемента AUTHOR):

<html:Axmlns:html='http://www.wЗc.orgДR/REC-html40/

HREF='http://www.edgar.com'>

Edgar Allan Рое

</html:A>

Этот элемент вставляет стандартный элемент HTML А (якорь).

Он вставляет две горизонтальные разделительные линии с использованиемином следующего XML-элемента:

<html:HR xmlns:xtml='http://www.w3c.org/TR/REC-html40/'/>

Этот элемент вставляет стандартный элемент HTML HR (горизонтальная линия). На следующем рисунке показано как Internet Explorer 5 отображает документ.

Листинг 7-11

RavenOS.xml

<?xmlversion="1.0"?>



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

<POEM>

<html:IMGxmlns:html='http://www.wЗc.orgЯR/REC-html40/'

SRC='Raven.bmp' ALIGN='LEFT' />

<TITLE>The Raven</TITLE>

<html:A xmlns:html='http://www.w3c.orgAR/REC-html40/'

HREF='http://www.edgar.com'>

Edgar Allan Рое

</html:A>

<DATE>1845</DATE>

<html:HR xmlns:html='http://wvw.w3c.o rg/TR/REC-html40/'/>

<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—</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—</VERSE>

<VERSE>Only this, and nothing more."</VERSE>

</STANZA>

<html:HR xmlns:html='http://www.w3c.orgAR/REC-html40/' /> <STANZA>

<VERSE>Ah, distinctly remember it was in the bleak December,</VERSE>

<VERSE>And each separate dying ember wrought its ghost upon the floor. </VERSE>

<VERSE>Eagerly wished the morrow;&*8212;vainly I had sought to j borrow</VERSE>

<VERSE>From my books surcease of sorrow—sorrow for the lost Lenore—</VERSE>

<VERSE>For the rare and radiant maiden whom the angels name Lenore—</VERSE>

<VERSE>Nameless here for evermore.</VERSE>

</STANZA>

</POEM>

Создание и использование полноценной таблицы стилей

Далее вы создадите XML-документ, содержащий первые четыре строфы поэмы Эдгара По «Ворон». Затем вы создадите таблицу каскадных .стилей, которая отформатирует этот документ с использованием почти всех свойств, рассмотренных в этой главе. На рисунке на следующей странице показано, как поэма будет выглядеть в Internet Explorer 5.

Создайте документ

Откройте новый, пустой текстовый файл в вашем текстовом редакторе и введите XML-документ, представленный в Листинге 7-12. (Копия этого листинга содержится на CD-ROM в файле Raven04.xml.)

Обратите внимание на следующие важные особенности документа Raven04.xml:

к нему присоединена таблица каскадных стилей Raven04.css, которую вы создадите в следующем упражнении;
перед каждым элементом STANZA расположен пустой элемент IMAGE. Вы используете элемент IMAGE для отображения рисунка ворона в начале каждой строфы;
последняя строка в каждой строфе помещена в специальный элемент с именем LASTVERSE. Это дает вам возможность форматировать последнюю строку отличным образом от остальных строк. (Она выровнена не по левому краю, а по правому.)

Воспользуйтесь командой Save (Сохранить) вашего текстового редактора, чтобы сохранить документ на вашем жестком диске как Raven04.xml.

Листинг 7-12

Raven04.xml

<?xmlversion="1.0"?>



<?xml-stylesheet type="texl/css" href="Raven04.css"?>

<POEM>

<TITLE>The Raven<AITLE>

<AUTHOR> Edgar Allan Рое

<AUTHOR-BIO>Edgar Allan Рое was an American writer who lived from 1809 to1849.</AUTHOR-BIO>

</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 forgottenk>re—</VERSE>

<VERSE>White 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&f8212;</VERSE>

<LASTVERSE>Only this, and nothing more."</LASTVERSE>

</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;—vainly I had sought to borrow</VERSE>

<VERSE>From my books surcease of sorrow—sorrow for the lost j Lenore—</VERSE>

<VERSE>For the rare and radiant maiden whom the angels name Lenore—<VERSE>

<LASTVERSE>Nameless here forevermore.</LASWERSE>

</STANZA>

<IMAGE/>

<STANZA>

<VERSE>And the silken sad uncertain rustling of each purple curtain</VERSE>

<VERSE>Thrilled me—filled me with fantastic terrors never felt before;</VERSE>

<VERSE>So that now, to still the beating of my heart, I stood repeating:</VERSE>

<VERSE>"Tis some visitor entreating entrance at my chamber door&*8212;</VERSE>

<VERSE>Some late visitor entreating entrance at my chamber door;</VERSE>

<LASTVERSE>This it is, and nothing more."</LASTVERSE>

</STANZA>

<IMAGE/>

<STANZA>

<VERSE>Presently my soul grew stronger; hesitating then no longer,</VERSE>

<VERSE>"Sir," said I, "or Madam, truly your forgiveness I implore;</VERSE>

<VERSE>But the fact is I was napping, and so gently you came rapping,</VERSE>

<VERSE>And so faintly you came tapping, tapping at my chamber door,</VERSE>

<VERSE>That I scarce was sure I heard you"—here I opened wide thedoor;—</VERSE>

<LASTVERSE>Darkness there, and nothing more.</LASTVERSE>

</STANZA>

</PO€M>

Создайте таблицу стилей

Откройте новый, пустой файл в вашем текстовом редакторе и введите таблицу каскадных стилей, представленную в Листинге 7-13. (Копия этого листинга содержится на прилагаемом к книге CD-ROM в файле Raven04.css.)

Относительно этой таблицы стилей следует иметь в виду:

таблица стилей демонстрирует почти все свойства, рассмотренные в этой главе;
все использованные в таблице стилей приемы были рассмотрены в предыдущих разделах данной главы;
файл рисунка (RavShade.bmp), отображенный с использованием элементов IMAGE, представляет собой тот же рисунок, который вы отображали в предшествующих версиях документа Raven.xml, за исключением того, что он имеет теневой фон, соответствующий цвету фона элемента РОЕМ;
таблица стилей скрывает содержимое элемента AUTHOR-BIO путем присвоения значения попе его свойству display.

Воспользуйтесь командой Save (Сохранить) вашего текстового редактора, чтобы сохранить документ на вашем жестком диске под именем Raven04.css.

Листинг 7-13

Raven04.css

/* Имя файла: RavenM.css */

РОЕМ

{font-size:12pt;

width:5.5in;

padding:1em;

border-width:1px;

background-color:rgb{225,225,225)}

POEM, TITLE, AUTHOR, DATE, STANZA

{display:block; margin-bottom:1em}

AUTHOR-BIO

{display: none}

TITLE, AUTHOR, DATE

{font-family:Arial,sans-serif;

text-align:center}

DATE

{font-style:italic}

TITLE

{font-size:16pt;

font-weight:bold;

letter-spacing:.25em}

IMAGE

{background-image:url(RavShade.bmp);

background-repeat:no-repeat;

background-positionxenter;

width:89px;

height:58px;

float

STANZA

{color:navy;

line-height:1.25em}

VERSE

{display:block}

LASTVERSE

{display:block;

text-align:right}

Отобразите документ, открыв файл Raven04.xml непосредственно в Internet Explorer 5.