В этой главе вы познакомитесь с первым из методов отображения XML-документов в браузере Microsoft Internet Explorer 5, рассматриваемых в этой книге: с таблицами каскадных стилей (CSS). Таблица каскадных стилей представляет собой файл, который содержит инструкции для форматирования элементов в XML-документе.
Поскольку в XML вы создаете свои собственные элементы, браузер не имеет встроенных средств, позволяющих определить, как их правильно отобразить. Создание таблицы каскадных стилей и связывание ее с вашим XML-документом - это один из способов сообщить браузеру, как отображать каждый из элементов документа. XML-документ со связанной таблицей каскадных стилей может быть открыт непосредственно в Internet Explorer 5. Вам нет необходимости использовать HTML-страницу для доступа и отображения данных (как это имеет место в других методах отображения XML, о которых будет говориться в двух следующих главах).
Хранение инструкций по отображению в таблице стилей отдельно от самого XML-документа повышает гибкость XML-документа и облегчает работу с ним. Вы можете, например, быстро адаптировать один XML-документ к различным условиям отображения (различным браузерам, приложениям, контекстным ситуациям, периферийным устройствам и т.д.) простым присоединением соответствующей таблицы стилей, без необходимости реструктурировать сам документ. Вы также можете быстро обновить формат для группы сходных XML-документов внеся изменения в присоединенную к этим документам таблицу стилей, не открывая и не редактируя каждый из документов.
Использование таблицы стилей, наверное, является самым простым методом отображения XML-документа. Язык CSS уже знаком многим Web-диуайнсрам, поскольку именно он в настоящее время используется для HTML-страниц. Кроме того, современные Web-браузеры обеспечивают высокий уровень поддержки таблиц каскадных стилей, в то время как другие методы отображения XML все еще находятся в стадии развития, и браузеры только начинают их поддерживать. Тем не менее, по сравнению с другими методами отображения XML, о которых вы узнаете в последующих главах, таблицы каскадных стилей имеют ряд ограничений. Хотя таблица каскадных стилей позволяет управлять способами форматирования содержимого элементов в XML-документах, она не дает возможности модифицировать или реорганизовывать само содержимое. Она также не прзволяет вам осуществлять доступ к атрибутам, примитивам, инструкциям по обработке и другим компонентам XML и не дает возможности обрабатывать информацию, которую эти компоненты содержат.
В последующих главах вы познакомитесь с более сложными - но и более гибкими - способами отображения XML-документов. В главе 8 вы узнаете, как связывать XML-документ с HTML-страницей и отображать XML-элементы путем сцепления с ними стандартных HTML-элементов. В главе 9 вы узнаете, как осуществлять доступ и отображать отдельные элементы, атрибуты и другие компоненты XML-документа путем написания кода сценария на HTML-странице. А в главе 10 вы откроете для себя, как применять еще более мощный язык таблиц стилей — расширяемый язык таблиц стилей (Extensible Stylesheet Language - XSL) - который позволяет вам не только форматировать содержимое XML-элемен-та, но и преобразовывать содержимое документа с высокой степенью гибкости.
Примечание. В этой главе раскрывается большинство свойств CSS, поддерживаемых Internet Explorer 5, которые являются частью оригинальной версии CSS, установленной консорциумом World Wide Web (W3C) и известной как Cascading Style Sheets Level 1, или CSS 1. Консорциум W3C также определил усовершенствованную версию CSS, которая значительно превосходит версию CSS1, известную как Cascading Style Sheets Level 2, или CSS2. CSS2 только частично поддерживается современными браузерами и не рассматривается в этой книге. Полную спецификацию W3C для CSS1 вы можете найти по адресу Шр://www.w3.arg/TR/REC-CSS1, а спецификацию для CSS2 - по адресу http://www.w3.org/TR/ REC-CSS2.
Основные этапы при использовании таблицы каскадных стилей
Вот два основных этапа при использовании таблицы каскадных стилей для отображения XML-документа.
Шаг первый: создание файла таблицы стилей
Таблица каскадных стилей представляет собой текстовый файл, обычно с расширением .ess, который содержит набор правил, сообщающих браузеру, каким образом форматировать и отображать элементы в определенном XML-документе. Как и XML-документ, вы можете создавать таблицу стилей с помощью вашего любимого текстового редактора.
Листинг 7-1 содержит пример простой таблицы каскадных стилей. (Копия этого листинга содержится на CD-ROM в файле InventoryOI .CSS.)
Листинг 7-1
InventoryOI .ess
/* Имя файла: InventoryOI .ess */
BOOK
{display:block;
margin-top: 12pt;
font-size: 10pt}
TITLE
{font-style:italic}
AUTHOR
{font-weight:bold}
Эта таблица стилей предназначена для присоединения к XML-документу, представленному в Листинге 7-2. (Копия этого листинга содержится на (' I )-ROM и файле InventoryOI .xml.) Листинг 7-2 используется и в других примерах в дянний главо, поэтому вам придется не раз к нему обращаться.
Листинг 7-2
Inventory01.xml
<?xmlversion="1.0"?>
<!-- Имя файла: Inventory01.xml -->
<?xml-stylesheettype="text/css" href="lnventory01.css"?>
<INVENTORY>
<BOOK>
<TITLE>The Adventures of Huckleberry Finn</TITLE>
<AUTHOR>Mark Twain</AUTHOR>
<BINDING>mass market paperback</BINDING>
<PAGES>298</PAGES>
<PRICE>$5.49</PRICE>
</BOOK>
<BOOK>
<TITLE>Leaves of Glass</TITLE>
<AUTHOR>Walt Whitman</AUTHOR>
<BINDING>hardcover</BINDING>
<PAGES>462</PAGES>
<PRICE>$7.75</PRICE>
</BOOK>
<BOOK>
<TITLE>The Legend of Sleepy Ноllоw</TITLE>
<AUTHOR>Washington lrving</AUTHOR>
<BINDING>mass market paperback</BINDING>
<PAGES>98</PAGES>
<PRICE>$2.95</PRICE>
</BOOK>
<BOOK>
<TITLE>The Marble Faun</TITLE>
<AUTHOR>NathanielHawthorne</AUTHOR>
<BINDING>tradepaperback</BINDING>
<PAGES>473</PAGES>
<PRICE>$10.95</PRICE>
</BOOK>
<BOOK>
<TITLE>Моbу-Dick</TITLE>
<AUTHOR>Herman Melville</AUTHOR>
<BINDING>hardcover</BINDING>
<PAGES>724</PAGES>
<PRICE>$9.95</PRICE>
</BOOK>
<BOOK>
<TITLE>The Portrait of Lady</TITLE>
<AUTHOR>Henry James</AUTHOR>
<BINDING>mass market paperback</BINDING>
<PAGES>256</PAGES>
<PRICE>$4.95</PRICE>
</BOOK>
<BOOK>
<TITLE>The Scarlet Letter</TITLE>
<AUTHOR>NathanielHawthorne</AUTHOR>
<BINDING>trade paperback</BINDING>
<PAGES>253</PAGES>
<PRICE>$4.25</PRICE>
</BOOK>
<BOOK>
<TITLE>The Turn of the Screw</TITLE>
<AUTHOR>Henry James</AUTHOR>
<BINDING>trade paperback</BINDING>
<PAGES>384</PAGES>
<PRICE>$3.35</PRICE>
</BOOK>
<INVENTORY>
Примечание. Пример таблицы стилей в Листинге 7-1 и пример XML-до-кумента в Листинге 7-2 являются копиями файлов, которые вы создали в упражнении «Отобразите XML-документ с использованием таблицы каскадных стилей» в главе 2.
Таблица стилей состоит из одного или нескольких правил (иногда их называют набором правил). Правило содержит информацию по отображению определенного типа элемента в XML-документе. На рисунке на следующей странице представлено правило для элементов BOOK с указанием его составных частей.
Селектор представляет собой имя типа элемента, к которому относится информация по отображению.
За селектором следует блок объявлений, который ограничивается фигурными скобками ({}) и содержит одно или несколько объявлений, разделяемых точкой с запятой.
Каждое объявление задает установку определенного свойства, такого как размер шрифта, который будет использован для отображения элемента. Объявление состоит из свойства, вслед за которым идет двоеточие, после которого следует значение для данного свойства. Например, следующее объявление устанавливает для свойства font-Size (размер шрифта) значение 10pt(10 пунктов) (см. следующий рисунок).
Таблица стилей может также содержать комментарии. Комментарии в таблице стилей начинаются с символов косой черты и звездочки (/*) и заканчиваются символами звездочки и косой черты (*/). Между этими парами символов-ограничителей вы можете поместить любой текст по вашему желанию. Когда браузер прочитывает таблицу стилей для форматирования документа, он игнорирует этот текст. Вы можете использовать комментарий для пояснений, указания назначения и действия таблицы стилей. В качестве примера можно привести комментарий в начале таблицы стилей из Листинга 7-1:
/* Имя файла: Inventory01 .ess */
Вы также можете использовать комментарии в процессе разработки таблицы стилей, чтобы временно отключить правило или его часть. Например, если вы хотите посмотреть, как будут выглядеть элементы BOOK без верхней отбивки, то можете временно добавить символы комментариев в следующее правило:
BOOK
{display:block;
/* margin-top: 12pt;*/
font-size: 10pt}
Примечание. Пустые символы (пробелы, табуляция, пропуск строки) отделяют различные компоненты CSS, такие как индивидуальные объявления в блоке объявлений. Способ использования пропусков в данной книге является лишь одной из возможностей. Вы можете использовать пропуски любым способом, чтобы лучше организовать содержимое и придать большую ясность вашим собственным таблицам стилей. Например, вы можете поместить все объявления, относящиеся к правилу, в одну строку, вместо того, чтобы размещать каждое из них на отдельной строке, как это сделано в примерах.
Пример таблицы стилей, представленной в Листинге 7-1, содержит следующие объявления:
На рисунке на следующей странице показано как Internet Explorer 5 отображает XML-документ, который использует данную таблицу стилей в соответствии с инструкциями, содержащимися в этих объявлениях.
Набор свойств, используемых в таблицах каскадных стилей, похож на набор свойств, которые вы можете применять в текстовом процессоре. Далее в этой главе вы познакомитесь с различными свойствами, которые можете применять, а также со значениями, которые вы можете присваивать определенным свойствам.
Нечувствительность к регистру в CSS
В Internet Explorer 5 таблицы каскадных стилей являются нечувствительными к регистру, в котором набраны символы. То есть, когда Internet Explorer 5 обрабатывает таблицу стилей, он игнорирует регистр букв (строчные или прописные). Например, вы можете набрать следующее правило любым из трех приведенных ниже способов:
TITLE
{font-style:italic}
Title
{FONT-STYLE:ltalic}
title
{Font-Style:ITAUC}
Нечувствительность к регистру в таблицах каскадных стилей имеет важное значение. Поскольку XML-документы являются чувствительными к регистру, вы вполне можете иметь два различных типа элемента, имена которых отличаются лишь регистром букв, например, Book и BOOK. В таблице каскадных стилей, однако, эти два имени будут отнесены к одно-му и тому же типу элемента, и вы не сможете назначить им различную установку свойств. Следовательно, если вы предполагаете отображать наш XML-документ с использованием таблицы каскадных стилей, у вас не должно быть типов элементов, имена которых отличаются только регистром одной или нескольких букв.
Наследование установок свойств
Набор свойств, которые вы присвоили определенному элементу (например, BOOK), действует на все дочерние элементы, прямо или косвенно вложенные в него, если только они не переустанавливаются впоследствии для определенного дочернего элемента.
Следующие свойства, однако, являются исключениями и не наследуются дочерними элементами:
Например, таблица стиля в Листинге 7-1 форматирует элемент BOOK (документ приведен в Листинге 7-2) следующим образом:
BOOK
{display:block;
margin-top: 12pt;
font-size: 10pt}
Каждый элемент BOOK имеет пять дочерних элементов. Поскольку свойство font-size является наследуемым, все дочерние элементы внутри элемента BOOK отображаются с размером шрифта в 10 пунктов. Дочерние элементы, однако, не наследуют установку свойств display и margin-top (свойство margin-top относится к группе свойств размещения текста).
Для не наследуемых свойств, если вы не задали значение свойства для конкретного элемента, браузер использует значение свойства по умолчанию. Например, значением по умолчанию для свойства display будет inline. В этой главе приведены значения свойств по умолчанию для всех не наследуемых свойств.
Поскольку большинство значений свойств являются наследуемыми, при разработке таблицы стилей вам лучЩе начать с элементов верхнего уровня, а затем опускаться к более глубоко вложенным элементам. При этом нам придгтгя вносить минимальное количество изменений и уточнений в установку свойств (так, вам нет необходимости устанавливать свойства дочерних элементов, если унаследованные ими значения свойств вас устраивают).
Подробнее о наследовании и о его роли в механизме каскадного присвоения значения вы узнаете в разделе «Присвоение значений в таблицах каскадных стилей» далее в этой главе.
Использование множественных элементов и множественных правил
Вы можете применить одно правило к нескольким элементам, включив все имена элементов в селектор и отделив имена запятыми. Например, следующее правило применяется к типам элементов РОЕМ, TITLE, AUTHOR, DATE и STANZA:
РОЕМ, TITLE, AUTHOR, DATE, STANZA
{display: block;
margin-bottom: 12pt}
Если для группы элементов устанавливается общий набор свойств, вы можете сделать вашу таблицу стилей короче и облегчить ее восприятие, включив все эти элементы в одно правило, вместо того, чтобы дублировать установки в отдельных правилах.
Вы также можете включить определенный тип элемента в более чем одно правило внутри той же самой таблицы стилей. Например, следующие правила оба включают элемент DATE:
РОЕМ, TITLE, AUTHOR, DATE, STANZA
{display:block;
margin-bottom: 12pt}
DATE
{font-style:italic}
Первое правило содержит объявление, которое элемент DATE разделяет с другими элементами в списке, в то время как второе правило осуществляет дополнительную настройку для элемента DATE - а именно, задает установку свойства, применимого только к этому элементу.
Использование контекстуальных селекторов
В селекторе вы можете предварить имя элемента именами одного или нескольких элементов-предков (родительский, родительский плюс родительский родителя и т.д.), и правило будет применено только к элементам с этим именем, которые являются вложенными подобным образом. Селектор, который включает один или несколько элементов-предков, называется контекстуалгмым (contextual) селектором. Селектор, который не включает имен элементов-предков (подобно тем, с которыми вы имели дело в предыдущем разделе), называется родовым (generic) селектором.
Если определенное свойство для одного и того же элемента имеет одну установку в правиле с контекстуальным селектором, и другую установку в правиле с родовым селектором, установка в правиле с контекстуальным селектором доминирует, поскольку является более конкретизированной.
Предположим, что следующий элемент является корневым элементом XML-документа:
<MAPS>
<CITY>
<NAME>Santa Fe</NAME>
<STATE>New Mexico</STATE>
</CITY>
<STATE>California</STATE>
</MAPS>
Следующие правила в присоединяемой таблице стилей заставят браузер отформатировать «New Mexico» обычным шрифтом, a «California» - курсивом:
CITY STATE
{font-styte:normal}
STATE
{font-style: italic}
Хотя содержимое New Mexico элемента STATE отвечает обоим коШек-стуальным селекторам в правиле CITY STATE и родовому селектору в правиле STATE, селектор CITY STATE является бтолее конкретным и, следовательно, имеет приоритет. (Подробнее о приоритетах и конфликтах правил вы узнаете в разделе «Присвоение значений в таблицах каскадных стилей» далее в этой главе.)
Примечание. Имейте в виду, что не следует помещать запятые между именами элементов в контекстном селекторе. В противном случае правило будет применено ко всем элементам (как было описано в предыдущем разделе), но не к последнему дочернему элементу в списке.
Вы можете использовать специальный атрибут STYLE в вашем XML-документе вместо того, чтобы устанавливать одно или несколько свойств отдельного элемента в таблице стилей. Если значение свойства, установленного с помощью атрибута STYLE, конфликтует со значением свойства, установленного в таблице стилей, установка с помощью атрибута STYLE имеет приоритет. Таким образом, атрибут STYLE является удобным средством, чтобы переустановить для определенного элемента значение свойства, присвоенное для типа элемента в присоединенной таблице стилей. Тем не менее, использование атрибута STYLE нарушает принцип CSS -хранения информации о форматировании отдельно от определения содержимого документа и структуры XML-файла.
Чтобы установить одно или несколько значений свойств, включите объявления в значение атрибута STYLE в виде строки, заключенной в кавычки, отделяя индивидуальные объявления точкой с запятой, как вы это делаете в объявлении блока в CSS. Например, таблица стилей в Листинге 7-1 задает для элементов TITLE курсивное начертание с размером шрифта в 10 пунктов. Однако если вы включите следующий атрибут STYLE в начальный тег определенного элемента TITLE в документе, этот элемент будет отображен шрифтом roman (не курсивом), а размер шрифта составит 14 пунктов:
<TITLE STYLE='font-style:normal; font-size: 14pt'>
The Adventures of Huckleberry Finn
</TITLE>
В Internet Explorer 5 ваш документ будет выглядеть, как показано на следующем рисунке.
Совет. Для валидных документов вам необходимо объявить атрибут STYLE в DTD перед его использованием. Вы можете сделать это, например, следующим образом:
<!ATTUST TITLE STYLE CDATA#IMPLJED>
Вы можете воспользоваться директивой @import в вашей таблице каскадных стилей, чтобы встроить в нее одну или несколько других таблиц стилей. Возможность импорта отдельных таблиц стилей позволяет вам хранить правила для связанных стилей в отдельных файлах, а затем объединять их при создании документов определенного типа.
Вот обобщенная форма записи директивы @import, где иКЬТаблСтил есть полный или относительный URL (Uniform Resource Locator) файла, содержащего таблицу каскадных стилей, которую вы хотите импортировать:
@import \x\(URLТаблСтил);
Сведения о задании значений URL приведены далее на врезке «Задание значений URL». Например, следующая директива (использующая относительный URL), помещенная в начале таблицы стилей в Листинге 7-1, импортирует таблицу стилей, содержащуюся в файле Book.css (который должен находиться в той же папке, что и основная таблица стилей):
/* Имя файла: Inventory01.ess */
@tmport url(Book.css);
BOOK
{display:block;
margin-top: 12pt;
font-size:10pt}
/* продолжение таблицы стилей... */
Директива @import должна располагаться в начале таблицы стилей перед правилами. Вы можете поместить в начале таблицы стилей несколько директив @import.
Если вы импортируете одну или несколько таблиц стилей, браузер объединяет правила, содержащиеся в основной и импортируемых таблицах стилей. Однако в случае возникновения конфликта правил основная таблица стилей (из файла, в который осуществляется импорт) имеет приоритет над импортируемыми таблицами стилей. Если же вы импортируете несколько таблиц стилей, правила из таблицы стилей, импортированной последней, имеют приоритет над правилами из ранее импортированных таблиц стилей. Подробнее о приоритетах вы узнаете в разделе «Каскадирование в таблицах каскадных стилей» далее в этой главе.
URL представляет собой стандартный Internet-адрес, такой как http://mspress.microsoft.com/. Директива &import и свойство background image требуют указания значения URL для задания местонахождения соответствующего ресурса (таблицы стилей или файла изображения). URL задается так, как указано ниже. Обратите внимание, что нельзя помещать пробелы между url и символом открывающей скобки (.
url(URL)
Вы можете использовать полностью заданный URL, как в следующих примерах:
@import url(http://www.my_domain.com/stylesheets/MyStyles.css);
INVENTORY
{background-image:url(file:///E:\Exarnple Code\Background.gif)}
Вы такжеможете использовать частичный URL, который задает местонахождение относительно местонахождения файла таблицы стилей, содержащего URL. Относительные URL в таблицах стилей работают - подобно URL в HTML-страницах. Например, если файл таблицы сти-; лей находится в папке Example Code, следующий относительный URL будет эквивалентен полному URL из предыдущего примера (а имен-i но, file:///E:\Example Code\Background.gif):
INVENTORY {background-image:url(Background.gif)}
Шаг второй: связывание таблицы стилей с X ML-документом
Чтобы связать таблицу каскадных стилей с XML-документом, вы должны вставить в документ зарезервированную инструкцию по обработке xrnl-stylesheet. Эта инструкция по обработке имеет следующую обобщенную форму записи, где CSSFilePath есть, .задающий местонахождение файла таблицы стилей:
<?xml-stylesheet type="text/css" href=CSSFilePath?>
Вы можете использовать полный URL, например:
<?xrnl-stylesrieet type="text/css"
Чаще используется частичный URL, который задает местонахождение относительно местонахождения XML-документа, содержащего инструкцию по обработке xml-stylesheet, например:
<?xml-stylesheet type="text/css" href="lnventory01.css"?>
(Относительный URL используется чаще, поскольку обычно вы храните файл таблицы стилей в той же папке, что и XML-документ, либо в одной из вложенных папок.)
Обычно вы добавляете инструкцию по обработке xml-stylesheet в пролог XML-документа, вслед за объявлением XML, как вы видели в примере XML-документа в Листинге 7-2. (Подробнее об инструкциях по обработке и описании корректных мест для их помещения рассказано в разделе «Использование иl