Как добавить стиль к XML

Внешние таблицы стилей

Подсказка: попробуйте это в вашем браузере

HTML содержит элемент link для привязки к внешней таблице стилей, но не каждый формат на основе XML будет иметь такой элемент. Если нет подходящего элемента, вы можете присоединить внешнюю таблицу стилей при помощи инструкций обработки xml-stylesheet следующим образом:

<?xml-stylesheet href="my-style.css" type="text/css"?>
... остаток документа тут...

Эти инструкции обработки (ИО) должны идти перед первым тэгом документа. type="text/css" не требуется, но он помогает браузеру: если он не поддерживает CSS, он знает, что ему не придется загружать этот файл.

Как и в случае с элементом HTML link, тут могут быть сложные ИО xml-stylesheet и они могут иметь атрибуты для установки типа, содержания и заголовка.

Вот развернутый пример. Давайте представим, что у нас есть три таблицы стилей: основная, которая устанавливает базовый тип дисплея каждого элемента (в линию, блоком, листом и т.д.) и две другие, каждая из которых устанавливает цвет и поля. Две последних являются альтернативой друг другу, и читатель документа может выбирать, какую из них использовать. За исключением случая, когда документ печатается. Тогда мы хотим использовать только последний стиль. Вот основная таблица стилей:

/* common.css */
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

Это один из альтернативных стилей в файле под названием "modern.css":

/* modern.css */
ARTICLE { font-family: sans-serif; background: white; color: black }
AUTHOR { margin: 1em; color: red }
HEADLINE { text-align: right; margin-bottom: 2em }
PARA { line-height: 1.5; margin-left: 15% }
INSTRUMENT { color: blue }

А вот это другой, называемый "classic.css":

/* classic.css */
ARTICLE { font-family: serif; background: white; color: #003 }
AUTHOR { font-size: large; margin: 1em 0 }
HEADLINE { font-size: x-large; margin-bottom: 1em }
PARA { text-indent: 1em; text-align: justify }
INSTRUMENT { font-style: italic }

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

<?xml-stylesheet href="common.css" type="text/css"?>
<?xml-stylesheet href="modern.css" title="Modern" media="screen"
  type="text/css"?>
<?xml-stylesheet href="classic.css" alternate="yes"
  title="Classic" media="screen, print" type="text/css"?>
<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his 
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

Для более детальной информации см. Рекомендации W3C “Привязка таблиц стилей к документу XML”

Встроенные таблицы стилей

Подсказка: попробуйте это в своем браузере

HTML имеет элемент style, который позволяет встраивать таблицу стилей непосредственно в файл HTML без необходимости наличия внешнего файла. В некоторых случаях так проще, особенно, когда таблица стилей является очень специфической для конкретного документа.

Большинство форматов, основанных на XML, не будут иметь такой элемент, но те же ИО, которые привязываются к внешней таблице стилей, могут также использоваться для обращения к таблице стилей, встроенной в сам документ. В феврале 2006, все еще присутствуют технические проблемы реализации этого, а формальных спецификаций не существует. Например:

<?xml-stylesheet href="#style" type="text/css"?>
<ARTICLE>
  <EXTRAS id="style">
    INSTRUMENT { display: inline }
    ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
    EXTRAS { display: none }
  </EXTRAS>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  ...
</ARTICLE>

В этом случае должен присутствовать атрибут type="text/css", иначе браузер (или другая программа) вынужден будет разгадывать язык таблицы стилей. ИО xml-stylesheet теперь обращаются не к наружной таблице стилей, а к элементу самого документа. Этот элемент идентифицируется атрибутом id, который служит целью ссылки. (В зависимости от отдельного формата XML, атрибут id может называться как-то по-другому; в некоторых форматах может вообще не быть подходящих атрибутов.)

Встроенные стили

HTML также позволяет стилям присоединяться прямо к индивидуальным элементам при помощи атрибута style . Большинство форматов документов, основанных на XML, не будут иметь такого атрибута, хотя некоторые могут разрешить свойства (модули) HTML для использования внутри документа.

Атрибуты класса

Подсказка: попробуйте это в вашем браузере

Атрибут class , который позволяет вам создавать подклассы элементов в HTML, также не доступен в большинстве форматов на базе XML. Разумеется, CSS позволяет вам выбирать элементы, основанные на любом атрибуте, не только class, но синтаксис является менее удобным.

Вот пример. Если есть атрибут class и формат документа определяет, что он работает, как в HTML, мы можем использовать ссылки с пунктиром. (Этот конкретный пример не будет работать, потому что <doc> имеет формат, который незнаком браузеру, как что-то, что имеет class)

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p.note { color: red }
  </s>
  <p>Some text... </p>
  <p class="note">A note... </p>
</doc>

Если формат документа не определяет, что class создает подкласс, вам нужно будет использовать более длинные определители тэгов с "[ ]":

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[class~=note] { color: red }
  </s>
  <p>Some text... </p>
  <p class="note">A note... </p>
</doc>

Если атрибута class нет, но есть что-то другое, что мы можем использовать, все равно применяются определители тэгов атрибутов "[ ]":

попробуйте это в вашем браузере

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[warning="yes"] { color: red }
  </s>
  <p>Some text... </p>
  <p warning="yes">A note... </p>
</doc>