path: root/files/pl/web/css/na_początek/listy/index.html

---
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" } ) }}