Введение в XML

Применение CSS для представления XML

При просмотре документа XMLTour.xml в браузере была представлена определенная структура, однако его внешний вид напоминает скорее внутренний HTML-код web-страницы, чем готовый документ. Дело в том, что мы создали свой набор элементов, и браузер не имеет встроенных средств, позволяющих определить, как его надо отобразить. Создание таблицы каскадных стилей и связывание ее с XML-документом - это один из способов сообщить браузеру, как отображать каждый из элементов документа.

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

Мы рассмотрим один из способов связи XML с CSS. Создадим новую папку и назовем ее CSSXML. Скопируем в нее документ XMLTour.xml и MyStyle.css. Во избежание путаницы переименуем MyStyle.css в CSSTour.css, затем откроем этот файл и изменим содержимое следующим образом:

TABLE{display:block; font-family:Arial; color:Red; font-size:medium}

В XML-документе элемент TABLE - корневой. Открываем XMLTour.xml и указываем связь с таблицей стилей:

<?xml version="1.0" encoding="utf-8" ?>

<!-- Название файла XMLTour.xml -->
<?xml-stylesheet type="text/css" href="CSSTour.css"?> 
<TABLE>
...
</TABLE>

Просматриваем документ в браузере - все дочерние элементы приняли свойства корневого (рис. 10.11):

Рис. 10.11. Просмотр XMLTour.xml с таблицей стилей

Для указания свойств дочерних элементов необходимо указать их описание в таблице стилей. Сделаем копии файлов XMLTour.xml и CSSTour.css и назовем их XMLTour2.xml и CSSTour2.css соответственно. В таблице стилей зададим описание для всех элементов:

TABLE{display:block; font-family:Arial; color:Red; 
font-size:medium}
TOUR{font-family:Bookman Old Style; color:Orangered; 
font-size:medium}
IDTOUR{font-family:Comic Sans MS; color:Yellow; font-size:medium}
NAME{font-family:Courier New; color:Lime; font-size:medium}
PRICE{font-family:Times New Roman; color:Mediumblue; 
font-size:medium}
INFORMATION{font-family:Verdana; color:Darkviolet; font-size:medium}

В файле XMLTour2.xml изменим связь:

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

Теперь каждый элемент имеет свое описание (рис. 10.12):

Рис. 10.12. Применение стиля к каждому элементу XMLTour2.xml

Определение собственных стилей имеет больший приоритет перед описанием корневого элемента. Поскольку в рассматриваемом случае теги TABLE и TOUR не содержат символьных данных, их определение можно опустить, и тогда эквивалентная таблица стилей примет вид

IDTOUR{font-family:Comic Sans MS; color:Yellow; font-size:medium}
NAME{font-family:Courier New; color:Lime; font-size:medium}
PRICE{font-family:Times New Roman; color:Mediumblue; 
font-size:medium}
INFORMATION{font-family:Verdana; color:Darkviolet; 
font-size:medium}

Таблица стилей состоит из одного или нескольких правил (иногда их называют набором правил). Правило содержит информацию по отображению определенного типа элемента в XML-документе. Селектор представляет собой имя типа элемента, к которому относится информация по отображению (рис. 10.13):

Рис. 10.13. Структура правила таблицы стилей

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

Каждое объявление задает установку определенного свойства, такого как размер шрифта, который будет использован для отображения элемента. Объявление состоит из свойства, вслед за которым идет двоеточие, и затем следует значение для данного свойства (рис. 10.14):

Рис. 10.14. Структура объявления

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

В программном обеспечении к курсу вы найдете папку "CSSXML" с рассмотренными документами (Code\Glava5\ CSSXML).