diff options
Diffstat (limited to 'files/pl/web/css/na_początek/dane_xml/index.html')
| -rw-r--r-- | files/pl/web/css/na_początek/dane_xml/index.html | 191 |
1 files changed, 191 insertions, 0 deletions
diff --git a/files/pl/web/css/na_początek/dane_xml/index.html b/files/pl/web/css/na_początek/dane_xml/index.html new file mode 100644 index 0000000000..3352d21184 --- /dev/null +++ b/files/pl/web/css/na_początek/dane_xml/index.html @@ -0,0 +1,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" } ) }} |