(�� ������� ����������� ������� ������� ����� CSS)
��� �������� � ���������� ����� «How to add style to XML». ���������� ����� ��������� ����������� ����� �� ���� W3C https://www.w3.org/Style/styling-XML
��� �������� �� � ��������� ���������� W3C.
�� �������� ����� �������� W3C.
��� �������� ���� ������ ������� ��������� �� �������.
�����: �������� ����� �., ��������� ������� Speed Lab. �� ��������� ������: en, ru, uk
�������� ����: https://www.indeep76.com/Style/styling-XML.html
������������ �� CSS2 ������ �������� ������� � ������������ CSS �� ��������� XML (���.§�2.2). ϳ� ��� ��������� CSS2 �������� ������������ ��� ����� � XML �� �� ���� ������. ��� ��, �� �������� ������� ���� � ������. ������� �����, �� �������� �������������� CSS, ��� � ������� ������� ������� ����� ����� ����� �������� � XSL.
ϳ������: ��������� �� � ������ �������
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 ���� ���������� ����� ��-������; � ������ �������� ���� ������ �� ���� ��������� ��������.)
������������ W3C “����'���� ������� ����� �� ��������� XML” �� ����������� ������� ��������� ������� �����, ���� ������� �������� ������� ��������� URL (��������� � “#”). � ��� ���, �� ������� 2006 ����, ��� �� ������� �������� ��������, �� ���� ���� ������������ ������������. �������� �������:
type. �� ���������, �� ����������, ���� ������� ���������: �� ���������� ������� �����? �� ���� ���� ���� CSS? �� � ������ �������� ��� ���������� ����?
<ARTICLE> � �� ����������, ��� ����� ������� ��������, �� ������� ����� ��������� �������, ����� ����� �������������, ������������ � ������� ����� ��, ��������� � �� ����� ��������, � �� �� ������ ��������.
type �� ����� ���� � ���� ����, � ���� ������� �� ���� �����, �� ����� ��������������� ������� �����. �� ��������� �����, �� �������� ������� type ���� ���������� ��������� ��� ������� �����, ��������� � �����.
xml:id, � ���� �������� ������ �������� �� ����� ������, ���������, �� �������� URL ����� �� ���� � ���. ��� ���� ����� �������� ����, ������� ������� ���������� ���� ������� ��� ���������� ����, �� �������� � ID. ���� �������� �� DOCTYPE ������ � ������� ���� �������� DTD, ��������� �� �����, ��� DTD ��������� �������. ��� ������� ���� �� ���������� � �������� DTD ��� ���� ���� ������� DOCTYPE.
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>