unslug pl: move

2 files changed, 385 insertions, 0 deletions

diff --git a/files/pl/learn/css/styling_text/fundamentals/index.html b/files/pl/learn/css/styling_text/fundamentals/index.html
new file mode 100644
index 0000000000..69dfd39735
--- /dev/null
+++ b/files/pl/learn/css/styling_text/fundamentals/index.html
@@ -0,0 +1,116 @@
+---
+title: Style tekstowe
+slug: Web/CSS/Na_początek/Style_tekstowe
+tags:
+  - 'CSS:Na_początek'
+translation_of: Learn/CSS/Styling_text/Fundamentals
+translation_of_original: Web/Guide/CSS/Getting_started/Text_styles
+---
+<p>
+</p><p>Na tej stronie znajdziesz więcej przykładów stylów tekstowych.
+</p><p>Zmodyfikujesz przykładowy arkusz stylów, aby używał różnych krojów pisma.
+</p>
+<h3 id="Informacja:_Style_tekstowe" name="Informacja:_Style_tekstowe"> Informacja: Style tekstowe </h3>
+<p>CSS posiada kilka własności do określania stylu tekstu.
+</p><p>Istnieje wygodna, krótka własność <code>font</code>, której można użyć do określenia kilku cech na raz — na przykład:
+</p>
+<ul><li>pogrubienia, ustawienia kursywy oraz małych znaków,
+</li><li>rozmiaru,
+</li><li>wysokości linii,
+</li><li>typu fontu.
+</li></ul>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Przykład
+</caption><tbody><tr>
+<td> <div style="width: 40em;">
+<p>p {font: italic 75%/125% "Comic Sans MS", cursive;}
+</p>
+</div>
+<p>Ta reguła określa kilka własności fontu, sprawiając, że wszystkie akapity będą pisane kursywą.
+</p><p>Rozmiar fontu jest określony jako trzy czwarte rozmiaru każdego nadrzędnego akapitu, a wysokość linii jest określona na 125% (co da trochę więcej przestrzeni).
+</p><p>Typ fontu jest określony jako Comic Sans MS, lecz jeśli ten font nie jest dostępny, wówczas przeglądarka użyje domyślnego fontu kursywy (a'la ręczne pismo).
+</p><p>Ta reguła dodatkowo wyłącza pogrubienie i małe litery (ustawiając je na <code>normal</code>):
+</p>
+</td></tr></tbody></table>
+<h4 id="Typy_font.C3.B3w" name="Typy_font.C3.B3w"> Typy fontów </h4>
+<p>Nie da się przewidzieć, jakie fonty będzie posiadał czytelnik dokumentu.
+Zatem kiedy określasz typy fontów, dobrym pomysłem jest podanie listy alternatywnych.
+</p><p>Listę należy zakończyć jednym z domyślnych, wbudowanych fontów: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> lub <code>monospace</code>, (niektóre z nich pasują do ustawień w opcjach Twojej przeglądarki).
+</p><p>Jeżeli dany typ fontu nie wspiera jakiejś funkcji w dokumencie, wówczas przeglądarka może zmienić go na inny. Na przykład, dokument może posiadać specjalne znaki, których font podstawowy nie obsługuje. Jeżeli przeglądarka znajdzie inny font, który obsługuje te znaki, wówczas zostanie on użyty.
+</p><p>Aby określić wyłącznie typ fontu, użyj własności <code>font-family</code>.
+</p>
+<h4 id="Rozmiary_font.C3.B3w" name="Rozmiary_font.C3.B3w"> Rozmiary fontów </h4>
+<p>Czytelnik używający przeglądarki Mozilla może w opcjach ustawić domyślne rozmiary fontów i zmienić rozmiar tekstu podczas czytania stron, zatem dobrym pomysłem jest używanie relatywnych rozmiarów tam, gdzie tylko się da.
+</p><p>Możesz wykorzystać różne wbudowane wartości dla rozmiarów fontów, jak <code>small</code>, <code>medium</code> czy <code>large</code>. Możesz też użyć wartości relatywnych względem rozmiaru fontu nadrzędnego elementu, na przykład: <code>smaller</code>, <code>larger</code>, <code>150%</code> lub <code>1.5</code>.
+</p><p>Jeżeli trzeba, możesz określić bezpośredni rozmiar: <code>12px</code> (12 pikseli) dla urządzenia wyświetlającego, lub 12pt (12 punktów) dla drukarki. Ten rozmiar jest nominalnie szerokością litery m, ale różne fonty mogą mieć różne rozmiary i możesz inaczej widzieć je względem rozmiaru, który określisz.
+</p><p>Aby określić sam rozmiary fontu, użyj własności <code>font-size</code>.
+</p>
+<h4 id="Wysoko.C5.9B.C4.87_linii" name="Wysoko.C5.9B.C4.87_linii"> Wysokość linii </h4>
+<p>Wysokość linii określa odstępy między liniami.
+Jeżeli Twój dokument posiada długie akapity z wieloma liniami, większe niż normalnie odstępy sprawią, że będzie go łatwiej czytać, zwłaszcza, jeśli rozmiary fontu są małe.
+</p><p>Aby określić samą wysokość linii, użyj własności <code>line-height</code>.
+</p>
+<h4 id="Ozdobniki" name="Ozdobniki"> Ozdobniki </h4>
+<p>Odrębna własność <code>text-decoration</code> może określać inne style, jak <code>underline</code> (podkreślenie) lub <code>line-through</code> (przekreślenie).
+Ustawiając tę własność na <code>normal</code>, usuniesz wszystkie ozdobniki.
+</p>
+<h4 id="Inne_w.C5.82asno.C5.9Bci" name="Inne_w.C5.82asno.C5.9Bci"> Inne własności </h4>
+<p>Aby ustawić kursywę, użyj <code>font-style: italic;</code><br>
+Aby ustawić pogrubienie, użyj <code>font-weight: bold;</code><br>
+Aby określić, że wszystkie litery mają być małymi literami, użyj <code>font-variant: small-caps;</code>
+</p><p>Aby ustawić dowolną z nich indywidualnie, możesz ustawić wartość na <code>normal</code> lub
+<code>inherit</code> (dziedzicz).
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+<caption>Więcej szczegółów
+</caption><tbody><tr>
+<td> Możesz określić style tekstowe na kilka innych sposobów.
+<p>Na przykład, niektóre własności wymienione w tym rozdziale mają inne wartości, których możesz użyć.
+</p><p>W złożonym arkuszu stylów unikaj używania skrótowej własności <code>font</code>, ponieważ ma to efekty uboczne (resetuje inne własności danego fontu).
+</p><p>Aby zapoznać się ze szczegółami własności fontów, zajrzyj do rozdziału <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonty</a> w specyfikacji CSS.
+Aby zapoznać się ze szczegółami odnośnie dekoracji tekstu, zajrzyj <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Tutaj</a>.
+</p>
+</td></tr></tbody></table>
+<h3 id="Zadanie:_Okre.C5.9Blanie_fontu" name="Zadanie:_Okre.C5.9Blanie_fontu"> Zadanie: Określanie fontu </h3>
+<p>W prostych dokumentach możesz określić font elementu <small>BODY</small>, a reszta dokumentu będzie dziedziczyć jego ustawienia.
+</p><p>Wyedytuj swój plik CSS.
+Dodaj regułę, która zmieni font.
+Logicznie byłoby umieścić tę regułę na górze pliku CSS, ale będzie ona miała taki sam efekt niezależnie od miejsca położenia:
+</p>
+<div style="width: 40em;">
+<p>body {font: 16px "Comic Sans MS", cursive;}
+</p>
+</div>
+<p>Dodaj komentarz wyjaśniający regułę oraz dodaj białe znaki, aby całość pasowała do Twojego ulubionego schematu.
+</p><p>Odśwież okno przeglądarki, aby zobaczyć efekt.
+Jeżeli Twój system zawiera Comic Sans MS lub inny font kursywy, który nie obsługuje pochylenia, wtedy Twoja przeglądarka wybierze inny typ fontu dla pochylonego tekstu w pierwszej linii:
+</p>
+<table style="border: 2px outset #36b; padding: 1em;">
+<tbody><tr>
+<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
+</td></tr>
+<tr>
+<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+<p>Z paska menu przeglądarki wybierz Widok – Rozmiar tekstu – Powiększ. Nawet jeśli określiłeś(aś) w stylu rozmiar 16 pikseli, użytkownik czytający dokument może zmienić jego rozmiar.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
+<caption>Wyzwanie
+</caption><tbody><tr>
+<td> Nie zmieniając nic innego, powiększ dwukrotnie wszystkie sześć pierwszych liter w domyślnym foncie szeryfowym przeglądarki:
+<table>
+<tbody><tr>
+<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets
+</td></tr>
+<tr>
+<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
+<p>Twój przykładowy dokument korzysta już z kilku nazwanych kolorów.
+Na następnej stronie znajdziesz listę nazwanych, standardowych kolorów oraz opis, jak można określić inne:
+<b><a href="pl/CSS/Na_pocz%c4%85tek/Kolor">Kolor</a></b>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/CSS/Getting_Started/Text_styles", "fr": "fr/CSS/Premiers_pas/Styles_de_texte", "it": "it/Conoscere_i_CSS/Stili_del_testo", "ja": "ja/CSS/Getting_Started/Text_styles", "pt": "pt/CSS/Como_come\u00e7ar/Estilos_de_texto" } ) }}
diff --git a/files/pl/learn/css/styling_text/styling_lists/index.html b/files/pl/learn/css/styling_text/styling_lists/index.html
new file mode 100644
index 0000000000..64f4218a9d
--- /dev/null
+++ b/files/pl/learn/css/styling_text/styling_lists/index.html
@@ -0,0 +1,269 @@
+---
+title: Listy
+slug: Web/CSS/Na_początek/Listy
+tags:
+  - 'CSS:Na_początek'
+translation_of: Learn/CSS/Styling_text/Styling_lists
+translation_of_original: Web/Guide/CSS/Getting_started/Lists
+---
+<p>
+</p><p>Ta strona opisuje jak możesz użyć CSS-a do określania wyglądu list.
+</p><p>Stworzysz nowy dokument zawierający listę, oraz nowy arkusz stylów ze stylami dla niej.
+</p>
+<h3 id="Informacja:_Listy" name="Informacja:_Listy"> Informacja: Listy </h3>
+<p>Jeżeli podjąłeś(aś) wyzwanie z poprzedniej strony (<b><a href="pl/CSS/Na_pocz%c4%85tek/Tre%c5%9b%c4%87">Treść</a></b>), widziałeś(aś), jak można dodać treść przed jakimś elementem, aby wyglądało to jak elementy listy.
+</p><p>CSS posiada specjalne własności stworzone dla list.
+Staraj się z nich korzystać, jeśli masz możliwość.
+</p><p>Aby określić styl dla listy, użyj własności <code>list-style</code> do określenia typu znacznika.
+</p><p>Selektor w regule CSS może określać elementy listy (np. <code>LI</code>) lub element rodzica list (np. <code>UL</code>), z którego elementy listy będą dziedziczyły te style.
+</p>
+<h4 id="Listy_nieuporz.C4.85dkowane_.28unordered_lists.29" name="Listy_nieuporz.C4.85dkowane_.28unordered_lists.29"> Listy nieuporządkowane (unordered lists) </h4>
+<p>W liście <i>nieuporządkowanej</i> każdy element jest oznaczony w ten sam sposób.
+</p><p>W CSS występują trzy typy oznaczeń.
+Wyświetlane są w następujący sposób:
+</p>
+<ul style="padding-left: 2em;">
+<li style=""><code>disc</code></li>
+<li style=""><code>circle</code></li>
+<li style=""><code>square</code></li>
+</ul>
+<p>Alternatywnie możesz określić URL do obrazka.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Przykład
+</caption><tbody><tr>
+<td> Te reguły określają różne oznaczenia dla różnych klas elementów listy:
+<div style="width: 30em;">
+<p>li.open {list-style: circle;}
+li.closed {list-style: disc;}
+</p>
+</div>
+<p>Kiedy użyjesz tych klas w liście, rozdzielisz elementy otwarte i zamknięte:
+</p>
+<div style="width: 30em;">
+<p>&lt;UL&gt;
+</p>
+<pre class="eval"> &lt;LI class="open"&gt;Lorem ipsum&lt;/LI&gt;
+ &lt;LI class="closed"&gt;Dolor sit&lt;/LI&gt;
+ &lt;LI class="closed"&gt;Amet consectetuer&lt;/LI&gt;
+ &lt;LI class="open"&gt;Magna aliquam&lt;/LI&gt;
+ &lt;LI class="closed"&gt;Autem veleum&lt;/LI&gt;
+</pre>
+<p>&lt;/UL&gt;
+</p>
+</div>
+<p>Wynik może wyglądać na przykład tak:
+</p>
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+<tbody><tr>
+<td><ul style="padding-right: 6em;">
+<li style="">Lorem ipsum</li>
+<li style="">Dolor sit</li>
+<li style="">Amet consectetuer</li>
+<li style="">Magna aliquam</li>
+<li style="">Autem veleum</li>
+</ul>
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<h4 id="Listy_uporz.C4.85dkowane_.28ordered_lists.29" name="Listy_uporz.C4.85dkowane_.28ordered_lists.29"> Listy uporządkowane (ordered lists) </h4>
+<p>W przypadku list <i>uporządkowanych</i> każdy element listy jest osobno oznaczony, aby zaznaczyć jego pozycję w sekwencji.
+</p><p>Użyj własności <code>list-style</code>, aby określić typ oznaczenia:
+</p>
+<ul style="padding-left: 2em;">
+<li style=""><code>decimal</code></li>
+<li style=""><code>lower-roman</code></li>
+<li style=""><code>upper-roman</code></li>
+<li style=""><code>lower-latin</code></li>
+<li style=""><code>upper-latin</code></li>
+</ul>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Przykład
+</caption><tbody><tr>
+<td> Ta reguła określa, że w bloku <small>OL</small> z klasą <code>info</code> elementy są oznaczane dużymi literami.
+<div style="width: 30em;">
+<p>ol.info {list-style: upper-latin;}
+</p>
+</div>
+<p>Elementy <small>LI</small> dziedziczą ten styl:
+</p>
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+<tbody><tr>
+<td><ul>
+<li style="padding-right: 6em;">Lorem ipsum</li>
+<li style="padding-right: 6em;">Dolor sit</li>
+<li style="padding-right: 6em;">Amet consectetuer</li>
+<li style="padding-right: 6em;">Magna aliquam</li>
+<li style="padding-right: 6em;">Autem veleum</li>
+</ul>
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+<caption>Więcej szczegółów
+</caption><tbody><tr>
+<td> Własność <code>list-style</code> jest własnością skrótową. W złożonych arkuszach stylów raczej będziesz wolał(a) używać osobnych własności dla osobnych wartości. Aby dowiedzieć się więcej na temat osobnych własności oraz jak CSS określa listy, zajrzyj do sekcji <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#q10">Listy</a> w dokumentacji CSS.
+<p>Jeżeli używasz języka znaczników, jak HTML, który korzysta z własnych znaczników dla list nieuporządkowanych (<small>UL</small>) i uporządkowanych (<small>OL</small>), wówczas dobrym zwyczajem jest korzystanie z nich zgodnie z przeznaczeniem. Jednakże możesz użyć CSS, aby wyświetlić <small>UL</small> jako posortowaną, a <small>OL</small> jako nieposortowaną, jeśli wolisz.
+</p><p>Różne przeglądarki w różny sposób obsługują te style dla list.
+Nie oczekuj, że Twój arkusz stylów zostanie wyświetlony identycznie we wszystkich.
+</p>
+</td></tr></tbody></table>
+<h4 id="Liczniki" name="Liczniki"> Liczniki </h4>
+<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;">
+<p><strong>Notatka: </strong> Niektóre przeglądarki nie obsługują liczników.</p>
+</div>
+<p>Możesz używać liczników do różnych elementów, nie tylko list.
+Na przykład w niektórych dokumentacjach możesz chcieć numerować nagłówki lub paragrafy.
+</p><p>Aby określić numerację, musisz zadeklarować <i>counter</i> z określoną nazwą.
+</p><p>W którymś z elementów, zanim rozpocznie się naliczanie, zresetuj licznik, używając właściwości <code>counter-reset</code> i nazwą Twojego licznika.
+Rodzic elementów, które liczysz, jest dobrym miejscem na reset, ale możesz użyć dowolnego elementu, który pojawia się przed elementami listy.
+</p><p>W każdym elemencie, w którym licznik jest inkrementowany, dodaj właściwość <code>counter-increment</code>. Jako wartość podaj nazwę licznika.
+</p><p>Aby wyświetlić wartość licznika, dodaj <code>:before</code> lub <code>:after</code> do selektora i użyj własności <code>content</code> (tak jak na poprzedniej stronie <b><a href="pl/CSS/Na_pocz%c4%85tek/Tre%c5%9b%c4%87">Treść</a></b>).
+</p><p>Jako wartość własności <code>content</code> wstaw <code>counter()</code> z nazwą swojego licznika.
+Opcjonalnie określ typ.
+Typy są takie same jak w sekcji '<i>listy uporządkowane</i>.
+</p><p>Zwykle element, który wyświetla licznik, inkrementuje go.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Przykład
+</caption><tbody><tr>
+<td> Ta reguła inicjalizuje licznik w każdym elemencie <small>H3</small> z klasą <code>numbered</code>:
+<div style="width: 30em;">
+<p>h3.numbered {counter-reset: mynum;}
+</p>
+</div>
+<p>Ta reguła wyświetla i inkrementuje licznik dla każdego elementu <small>P</small> z klasą <code>numbered</code>:
+</p>
+<div style="width: 30em;">
+<p>p.numbered:before {
+</p>
+<pre class="eval"> content: counter(mynum) ": ";
+ counter-increment: mynum;
+ font-weight: bold;}
+</pre>
+</div>
+<p>Wynik wygląda tak:
+</p>
+<table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;">
+<tbody><tr>
+<td><b>Heading</b><br>
+<p><b>1: </b>Lorem ipsum</p>
+<p><b>2: </b>Dolor sit</p>
+<p><b>3: </b>Amet consectetuer</p>
+<p><b>4: </b>Magna aliquam</p>
+<p><b>5: </b>Autem veleum</p>
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+<caption>Więcej szczegółów
+</caption><tbody><tr>
+<td> Nie należy używać liczników, jeśli nie masz pewności, że każdy, kto czyta Twój dokument, posiada obsługującą je przeglądarkę.
+<p>Jeżeli możesz używać liczników, mają one tę zaletę, że określasz ich styl niezależnie od elementów listy. W powyższym przykładzie liczniki są pogrubione, a elementu listy nie.
+</p><p>Możesz też używać liczników w bardziej złożony sposób — na przykład do numerowania sekcji, nagłówków, podnagłówków i paragrafów w dokumentach.
+Aby dowiedzieć się więcej, zajrzyj do specyfikacji CSS do sekcji <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatyczne liczniki i numerowanie</a>.
+</p>
+</td></tr></tbody></table>
+<h3 id="Zadanie:_Style_list" name="Zadanie:_Style_list"> Zadanie: Style list </h3>
+<p>Stwórz nowy dokument HTML, <code>doc2.html</code>.
+Skopiuj i wklej poniższą treść, upewniając się, że zaznaczyłeś(aś) cały:
+</p>
+<div style="width: 48em; height: 12em; overflow: auto;">
+<p>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;HTML&gt;
+&lt;HEAD&gt;
+&lt;TITLE&gt;Sample document 2&lt;/TITLE&gt;
+&lt;LINK rel="stylesheet" type="text/css" href="style2.css"&gt;
+&lt;/HEAD&gt;
+&lt;BODY&gt;
+
+&lt;H3 id="oceans"&gt;The oceans&lt;/H3&gt;
+&lt;UL&gt;
+&lt;LI&gt;Arctic&lt;/LI&gt;
+&lt;LI&gt;Atlantic&lt;/LI&gt;
+&lt;LI&gt;Pacific&lt;/LI&gt;
+&lt;LI&gt;Indian&lt;/LI&gt;
+&lt;LI&gt;Southern&lt;/LI&gt;
+&lt;/UL&gt;
+
+&lt;H3 class="numbered"&gt;Numbered paragraphs&lt;/H3&gt;
+&lt;P class="numbered"&gt;Lorem ipsum&lt;/P&gt;
+&lt;P class="numbered"&gt;Dolor sit&lt;/P&gt;
+&lt;P class="numbered"&gt;Amet consectetuer&lt;/P&gt;
+&lt;P class="numbered"&gt;Magna aliquam&lt;/P&gt;
+&lt;P class="numbered"&gt;Autem veleum&lt;/P&gt;
+
+&lt;/BODY&gt;
+&lt;/HTML&gt;
+</p>
+</div>
+<p>Stwórz nowy arkusz stylów, <code>style2.css</code>.
+Skopiuj i wklej poniższą treść:
+</p>
+<div style="width: 48em;">
+<p>/* numbered paragraphs */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+</p>
+<pre class="eval"> content: counter(mynum) ": ";
+ counter-increment: mynum;
+ font-weight: bold;}
+</pre>
+</div>
+<p>Jeżeli układ i komentarze Ci nie odpowiadają, zmień je.
+</p><p>Otwórz ten dokument w swojej przeglądarce.
+Jeżeli Twoja przeglądarka obsługuje liczniki, zobaczysz coś takiego, jak poniżej.
+Jeżeli Twoja przeglądarka nie obsługuje stylów, wówczas nie zobaczysz liczb (i prawdopodobnie także dwukropków):
+</p>
+<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
+<tbody><tr>
+<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p>
+<ul style="">
+<li>Arctic</li>
+<li>Atlantic</li>
+<li>Pacific</li>
+<li>Indian</li>
+<li>Southern</li>
+</ul>
+<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Numbered paragraphs</p>
+<p><b>1: </b>Lorem ipsum</p>
+<p><b>2: </b>Dolor sit</p>
+<p><b>3: </b>Amet consectetuer</p>
+<p><b>4: </b>Magna aliquam</p>
+<p><b>5: </b>Autem veleum</p>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 60%;">
+<caption>Wyzwania
+</caption><tbody><tr>
+<td> Dodaj jedną regułę do swojego arkusza stylów, aby ponumerować oceany, używając rzymskich liczb od i do v:
+<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
+<tbody><tr>
+<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p>
+<ul style="">
+<li>Arctic</li>
+<li>Atlantic</li>
+<li>Pacific</li>
+<li>Indian</li>
+<li>Southern</li>
+</ul>
+</td></tr></tbody></table>
+<p>Jeżeli Twoja przeglądarka obsługuje liczniki, zmień swój arkusz stylów, aby identyfikował nagłówki dużymi literami w takim stylu:
+</p>
+<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
+<tbody><tr>
+<td><p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p>
+<p><b>. . .</b>
+</p>
+<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p>
+<p><b>. . .</b>
+</p>
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
+<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>.
+</p><p>Kiedy Twoja przeglądarka wyświetla przykładowy dokument, tworzy przy okazji przestrzeń dookoła elementów, które określają ich rozkład na stronie.
+</p><p>Następna strona opisuje, jak można użyć CSS do pracy z przestrzenią wokół elementów:
+<b><a href="pl/CSS/Na_pocz%c4%85tek/Bloki">Bloki</a></b>
+</p>{{ languages( { "en": "en/CSS/Getting_Started/Lists", "fr": "fr/CSS/Premiers_pas/Listes", "pt": "pt/CSS/Como_come\u00e7ar/Listas" } ) }}