(�� ������� ����������� ������� ������� ����� 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>