1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
|
---
title: Dane XML
slug: Web/CSS/Na_początek/Dane_XML
tags:
- 'CSS:Na_początek'
translation_of: Archive/Beginner_tutorials/XML_data
---
<p>
</p><p>Ta strona zawiera przykład tego, jak możesz używać CSS z danymi XML.
</p><p>Stworzysz przykładowy dokument XML oraz arkusz stylów, którego możesz użyć do wyświetlenia tego dokumentu w przeglądarce.
</p>
<h3 id="Informacja:_Dane_XML" name="Informacja:_Dane_XML"> Informacja: Dane XML </h3>
<p><i><a href="pl/XML">XML</a></i> (Rozszerzalny Język Znaczników) jest językiem ogólnego przeznaczenia dla wszelkiego typu danych strukturalnych.
</p><p>Domyślnie, Twoja przeglądarka Mozilla wyświetla XML w formacie bardzo podobnym do ułożenia danych w oryginalnym pliku XML.
Dzięki temu możesz obejrzeć znaczniki, które określają strukturę danych.
</p><p>Przez podpięcie arkusza stylów CSS do dokumentu XML, może określić inne sposoby wyświetlenia go.
Aby to zrobić, Twój arkusz stylów używa reguł, które mapuje znaczniki w dokumencie XML, aby były wyświetlane w typach znanych HTML-owi.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Przykład
</caption><tbody><tr>
<td> Dane w dokumencie XML używają tagu <code><INFO></code>. Chcesz, aby wszystkie elementy <small>INFO</small> w dokumencie były wyświetlane jak HTML-owe akapity.
<p>W arkuszu stylów dokumentu, określasz jak wyświetlane będą elementy <small>INFO</small>:
</p>
<div style="width: 30em;">
<pre class="eval">INFO {
display: block;
margin: 1em 0;
}
</pre>
</div>
</td></tr></tbody></table>
<p>Najczęstszymi wartościami własności <code>display</code> są:
</p>
<table style="margin-left: 2em;">
<tbody><tr>
<td style="padding-right: 2em;"><code>block</code></td><td>Wyświetlane jak HTML-owy <small>DIV</small> (nagłówki, akapity itp.)
</td></tr>
<tr>
<td><code>inline</code></td><td>Wyświetlany jak HTML-owy <small>SPAN</small> (dla typów tekstowych)
</td></tr></tbody></table>
<p>Dodaj własne reguły stylów, które określą krój, odstępy i inne szczegóły w taki sam sposób, jak dla HTML-a.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
<caption>Więcej szczegółów
</caption><tbody><tr>
<td> Inne wartości własności <code>display</code> pozwalają wyświetlać element jako punkt listy lub jako komponent tabeli.
<p>Pełną listę typów wyświetlania można znaleźć w specyfikacji CSS na stronie <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">The display property</a>.
</p><p>Jeśli korzystasz wyłącznie z CSS, struktura wyświetlania musi być taka sama jak struktura dokumentu.
Inne technologie pozwalają modyfikować strukturę wyświetlania—na przykład XBL może dodawać treść, a JavaScript może modyfikować DOM.
</p><p>Aby dowiedzieć się więcej o XML-u w Mozilli, zajrzyj na stronę <a href="pl/XML">XML</a> w tym wiki.
</p>
</td></tr></tbody></table>
<h3 id="Zadanie:_Demonstracja_XML-a" name="Zadanie:_Demonstracja_XML-a"> Zadanie: Demonstracja XML-a </h3>
<p>Stwórz nowy plik XML, <code>doc9.xml</code>.
Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały:
</p>
<div style="width: 48em; height: 12em; overflow: auto;"><pre><?xml version="1.0"?>
<!-- XML demonstration -->
<?xml-stylesheet type="text/css" href="style9.css"?>
<!DOCTYPE planet>
<planet>
<ocean>
<name>Arctic</name>
<area>13,000</area>
<depth>1,200</depth>
</ocean>
<ocean>
<name>Atlantic</name>
<area>87,000</area>
<depth>3,900</depth>
</ocean>
<ocean>
<name>Pacific</name>
<area>180,000</area>
<depth>4,000</depth>
</ocean>
<ocean>
<name>Indian</name>
<area>75,000</area>
<depth>3,900</depth>
</ocean>
<ocean>
<name>Southern</name>
<area>20,000</area>
<depth>4,500</depth>
</ocean>
</planet>
</pre></div>
<p>Stwórz nowy plik CSS, <code>style9.css</code>.
Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały:
</p>
<div style="width: 48em; height: 12em; overflow: auto;"><pre>/*** XML demonstration ***/
planet:before {
display: block;
width: 8em;
font-weight: bold;
font-size: 200%;
content: "Oceans";
margin: -.75em 0px .25em -.25em;
padding: .1em .25em;
background-color: #cdf;
}
planet {
display: block;
margin: 2em 1em;
border: 4px solid #cdf;
padding: 0px 1em;
background-color: white;
}
ocean {
display: block;
margin-bottom: 1em;
}
name {
display: block;
font-weight: bold;
font-size: 150%;
}
area {
display: block;
}
area:before {
content: "Area: ";
}
area:after {
content: " million km\B2";
}
depth {
display: block;
}
depth:before {
content: "Mean depth: ";
}
depth:after {
content: " m";
}
</pre></div>
<p>Otwórz dokument w swojej przeglądarce:
</p>
<table style="border: 2px outset #36b; padding: 1em;">
<tbody><tr>
<td><div style="border: 2px solid #cdf; border-bottom: none; padding: .5em 8em 1em .5em;">
<p style="font-size: 150%; font-weight: bold; margin: -1em 0px 0px 0px; padding: .1em .25em; background-color: #cdf; width: 8em;">Oceans</p>
<p style="font-size: 75%; margin: .25em 0px 0px 0px; line-height: 110%;"><b>Arctic</b><br>
Area: 13,000 million km²<br>
Mean depth: 1,200 m</p>
<p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><b>Atlantic</b><br>
Area: 87,000 million km²<br>
Mean depth: 3,900 m</p>
<p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><b>. . .</b></p>
</div>
</td></tr></tbody></table>
<p><br>
Uwagi dotyczące tej demonstracji:
</p>
<ul><li>Indeks górny 2 (w "miliony km²") jest znakiem Unicode, zakodowanym jako <code>\B2</code> w pliku CSS.
</li><li> Nagłówek "Oceany" ma ujemny górny margines zewnętrzny, przesuwający go w górę, dzięki czemu jest wyświetlany nad ramką.
</li></ul>
<p><br>
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Wyzwanie
</caption><tbody><tr>
<td> Zmień arkusz stylów, aby wyświetlał dokument jako tabelę.
<p>(Zajrzyj na stronę <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> w specyfikacji CSS, aby znaleźć przykłady.)
</p>
</td></tr></tbody></table>
<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
<p>Jeżeli masz problemy ze zrozumieniem tej strony, lub jeżeli masz jakieś komentarze na jej temat, pomóż nam dopisując się na stronie <a>Dyskusji</a>.
</p><p>To jest ostatnia strona tego kursu.
Więcej informacji na temat CSS w Mozilli możesz znaleźć na głównej stronie <a href="pl/CSS">CSS</a>-a na tym wiki.
</p>{{ languages( { "en": "en/CSS/Getting_Started/XML_data", "fr": "fr/CSS/Premiers_pas/Donn\u00e9es_XML", "pt": "pt/CSS/Como_come\u00e7ar/Dados_XML", "ko": "ko/CSS/Getting_Started/XML_data" } ) }}
|
