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

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

Как просмотреть XML

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

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




]>


Джуди
Layard
Дженнифер
Brendan

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

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

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

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

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

) с шрифтом Verdana, Geneva или Helvetica и зеленым цветом фона. Чтобы определить это в таблице стилей так, чтобы все абзацы были такими, вы должны написать:

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

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

семья {
цвет: # 000000;
}

parent {
семейство шрифтов: Arial Black;
цвет: # ff0000;
граница: сплошная 5px;
ширина: 300 пикселей;
}

child {
семья шрифтов: verdana, helvetica;
цвет: # cc0000;
граница: сплошная 5px;
цвет границы: # cc0000;
}

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


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

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





]>


Джуди
Layard
Дженнифер
Brendan

Ссылка на основную публикацию