Технология Microsoft ADO.NET



           

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

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

Рис. 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}




Содержание  Назад  Вперед