Как стилизовать XML-документы с помощью CSS

Создание XML-документа, запись DTD и его анализ в браузере - это нормально, но как документ будет отображаться при его просмотре? XML это не язык презентации. Документы, написанные с помощью XML, вообще не будут иметь форматирования.

Как просматривать XML

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

Скажем, у вас есть XML-документ:


]>
Джуди
Layard
Дженнифер
Брендан

Если бы вы просматривали этот документ в браузере, поддерживающем XML, таком как Internet Explorer, он бы отобразил что-то вроде этого:

Джуди Лейард Дженнифер Брендан

Но что, если вы хотите различать родительский и дочерний элементы? Или даже проведите визуальное различие между всеми элементами в документе. Вы не можете этого сделать с XML, и это не язык, который предназначен для отображения.

Стилизация XML

Но, к счастью, им легко пользоваться Каскадные таблицы стилей

instagram viewer
, или же CSSв XML-документах, чтобы определить, как вы хотите, чтобы эти документы и приложения отображались при просмотре в браузере. Для указанного выше документа вы можете определить стиль каждого из тегов так же, как и для HTML-документа.

Например, в HTML вы можете определить весь текст в тегах абзаца (

п {
семейство шрифтов: вердана, женева, гельветика;
цвет фона: # 00ff00;
}

Те же правила работают для XML-документов. Каждый тег в XML может быть определен в документе XML:

семья {
цвет: # 000000;
}
parent {
семейство шрифтов: Arial Black;
цвет: # ff0000;
граница: сплошная 5 пикселей;
ширина: 300 пикселей;
}
ребенок {
семейство шрифтов: verdana, helvetica;
цвет: # cc0000;
граница: сплошная 5 пикселей;
цвет границы: # cc0000;
}

Когда у вас есть XML-документ и написана таблица стилей, вам нужно собрать их вместе. Подобно команде ссылки в HTML, вы помещаете строку вверху XML-документа (под декларацией XML), сообщая синтаксическому анализатору XML, где найти таблицу стилей. Например:


Как указано выше, эта строка должна находиться под объявлением, но перед любым из элементов в XML-документе.

Собрав все это вместе, ваш XML-документ будет выглядеть так:


]>
Джуди
Layard
Дженнифер
Брендан