blob: 3c494e6af3fb63692eb21017249056bea008dc5c (
plain)
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
|
---
title: Liczniki CSS
slug: Web/Guide/Liczniki_CSS
tags:
- CSS
- Wszystkie_kategorie
translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
---
<p> </p>
<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3>
<p>Liczniki w CSS zostały opisane w sekcji <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> dokumentacji CSS 2.1. Wartość licznika jest ustawiana poprzez użycie własności <a href="pl/CSS/counter-reset">counter-reset</a> oraz <a href="pl/CSS/counter-increment">counter-increment</a>, natomiast wyświetlana jest przy wykorzystaniu funkcji counter() lub counters() należących do własności <a href="pl/CSS/content">content</a>.</p>
<h3 id="Zastosowanie_licznik.C3.B3w" name="Zastosowanie_licznik.C3.B3w">Zastosowanie liczników</h3>
<p>Aby użyć licznika CSS, należy najpierw ustawić mu wartość (domyślnie jest to 0) przy pomocy własności <a href="pl/CSS/counter-reset">reset</a>. Aby wyświetlić wartość licznika w danym elemencie należy skorzystać z funkcji counter(). Poniższy przykład dodaje na początku każdego elementu <code>h1</code> "Sekcja <code>wartość licznika</code>:".</p>
<pre> body {
counter-reset: sekcja; /* Ustawienie licznika sekcja na 0 */
}
h1::before {
counter-increment: sekcja; /* Zwiększa licznik sekcja */
content: "Sekcja " counter(sekcja) ": "; /* Wyświetla licznik */
}
</pre>
<h3 id="Zagnie.C5.BCd.C5.BCanie_licznik.C3.B3w" name="Zagnie.C5.BCd.C5.BCanie_licznik.C3.B3w">Zagnieżdżanie liczników</h3>
<p>Liczniki CSS mogą być szczególnie użyteczne przy listach uporządkowanych (<code>ol</code>), ponieważ nowa instancja licznika CSS jest automatycznie tworzona dla potomków danego elementu. Użycie funkcji counters() pozwala na dodanie ciągu znaków, który będzie oddzielał kolejne poziomy zagnieżdżonych liczników:</p>
<pre> ol {
counter-reset: sekcja; /* Tworzy nową instancję licznika
sekcja w każdym elemencie ol */
list-style-type: none; /* Usuwa domyślnie wyświetlany licznik */
}
li::before {
counter-increment: sekcja; /* Zwiększa tylko tę instancję
licznika sekcja */
content: counters(sekcja, ".") " "; /* Wyświetla wartości wszystkich
instancji licznika sekcja,
oddzielając je ciągiem ".". */
}
</pre>
<p>Przykładowy HTML (w komentarzach podano wartość wygenerowanego licznika):</p>
<pre><ol>
<li>item</li> <!-- 1 -->
<li>item <!-- 2 -->
<ol>
<li>item</li> <!-- 2.1 -->
<li>item</li> <!-- 2.2 -->
<li>item <!-- 2.3 -->
<ol>
<li>item</li> <!-- 2.3.1 -->
<li>item</li> <!-- 2.3.2 -->
</ol>
<ol>
<li>item</li> <!-- 2.3.1 -->
<li>item</li> <!-- 2.3.2 -->
<li>item</li> <!-- 2.3.3 -->
</ol>
</li>
<li>item</li> <!-- 2.4 -->
</ol>
</li>
<li>item</li> <!-- 3 -->
<li>item</li> <!-- 4 -->
</ol>
<ol>
<li>item</li> <!-- 1 -->
<li>item</li> <!-- 2 -->
</ol>
</pre>
<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3>
<ul>
<li><a href="pl/CSS/counter-reset">counter-reset</a></li>
<li><a href="pl/CSS/counter-increment">counter-increment</a></li>
</ul>
<p><span class="comment">potrzebna treść do artykułu</span></p>
<p>{{ languages( { "en": "en/CSS_Counters", "fr": "fr/Compteurs_CSS" } ) }}</p>
|
