XMLге стилди кантип кошууга мүмкүн?

Сырткы стилдердин таблицасы

Tip: бул мисалыны силердин браузериңизде сынап көрүңүз

HTML сырткы стилдердин таблицасын байлап койуу үчүн link деп аталган кызматын урунат, бирок ушундай кызматын, XMLде түзүлгөн ар кандай формат, аткар албайт. Эгерде керектүү элемент жок болсо, сиз сырткы стилдин таблицасын xml-stylesheet деп аталган иштетүү инструкциянын жардамы менен ушундай мааниде кошуп аласынар:

<?xml-stylesheet href="my-style.css" type="text/css"?>
... rest of document here...

Ушул иштетүү инструкциялар (ИИ) документтин биринчи тегтин алдында жүрүшү керек. 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>

Булар жөнуүндөгү толук информациясын “Стилдердин таблицасын XML документке кошуу деген сунуш кылуу” китебинде карагыла.

Ички стилдердин таблицалары.

Tip: бул мисалыны силердин браузериңизде сынап көрүңүз

HTMLде, тышкы файлсыз стилдердин таблицасын HTML файлга орнотуш үчүн, style элементи бар болот. Кээдеки мисалыларда аны колдонуу женилчилик келдирет, артыкча, эгерде стилдердин таблицасы белгилүү документке өтө эле өзгөчө болсо.

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 attribute жардамы менен тик кошууга уруксат кылат. Документтин көпчүлүк форматтарда, XMLде түптөлгөн, ушундай атрибуту жок, бирок документтин ичинде колдонууга, кээдеки форматтар HTMLдин касиеттерин (модульдарын) уруксат берүүгө мүмкүн.

Класстардын атриубуттары

Tip: бул мисалыны силердин браузериңизде сынап көрүңүз

Силерге HTMLде элементтердин подкласстарын жасоого, class attribute мүмкүндүк берет, бирок ал дагы XML базадагы көпчүлүк форматтарда жок. Албетте, силерге, class атрибутунан сырткары да, каалаган атрибутта жасалган, элементтерди тандаганга CSS жардам берет, бирок синтаксис кичине ызгайлуу болот.

Мисалы. Эгерде, 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-l-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>