Як дадаць стыль да 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>