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

Външни style sheets

Съвет: пробвайте в браузъра си

HTML има link елемент за връзка към външни style sheets, но не всеки XML-базиран формат ще притежава такъв елемент. Дори да няма подходящ елемент, можете да прикрепите външни style sheets посредством xml-stylesheet инструкция за обработка както тук:

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

Тази инструкция за обработка (PI - processing instruction) трябва да се намира преди първия таг на документа. type="text/css" не е задължително, но помага на браузъра: ако не поддържа CSS, знае, че не е необходимо да изтегля този файл.

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

Ето и по-голям пример. Да приемем, че имаме три style sheets, един задаващ основния тип за изобразяване на всеки елемент (inline, block, list-item и т.н.) и два различни, които задават цветове и отстояния. Последните два са алтернативи един на друг и читателят на документа може да избере, кой от двата да използва. Изключение са случайте, в които принтираме, тогава искаме да използваме само последния стил. Ето един основен style sheet:

/* 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 Препоръката “Associating Style Sheets with XML documents”

Вписани style sheets

Съвет: пробвайте в браузъра си

HTML има елемента style, който позволява на style sheet(s) да бъдат вписани в HTML файл, без да се използва външен файл за това. В някои случаи това е по-лесно, особена когато style sheet е строго специфичен за този документ.

Повечето XML-базирани формати няма да притежават такъв елемент, но същата PI, която сочи връзка към външен style sheets, може да бъде използвана за посочване на style sheets, които са вписани в самия документ. От февруари 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" трябва да присъства, иначе браузърът (или друга програма) трябва да познае style sheet езика. xml-stylesheet PI-та сега сочи не към външен style sheet, а към елемент в самия документ. Този елемент се идентифицира с 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>