diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 21:46:22 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 21:46:22 -0500 |
commit | a065e04d529da1d847b5062a12c46d916408bf32 (patch) | |
tree | fe0f8bcec1ff39a3c499a2708222dcf15224ff70 /files/pl/web/css/na_początek/dane_xml/index.html | |
parent | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (diff) | |
download | translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.gz translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.bz2 translated-content-a065e04d529da1d847b5062a12c46d916408bf32.zip |
update based on https://github.com/mdn/yari/issues/2028
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, 0 insertions, 191 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 deleted file mode 100644 index 3352d21184..0000000000 --- a/files/pl/web/css/na_początek/dane_xml/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -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" } ) }} |