Применение 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).
