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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
---
title: CSS Sayaçlarını Kullanmak
slug: Web/Guide/CSS/Sayaçlar
tags:
- CSS
- CSS Counter
- CSS Sayaçlar
- MDN
- Sayaçlar
translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
---
<p>{{CSSRef}}</p>
<p><span class="seoSummary">CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. This lets you adjust the appearance of content based on its placement in the document.</span> CSS counters are an implementation of <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> in CSS 2.1.</p>
<p>The value of a counter is manipulated through the use of {{cssxref("counter-reset")}} and {{cssxref("counter-increment")}} can be displayed on a page using the <code>counter()</code> or <code>counters()</code> function of the <code><a href="/en-US/docs/CSS/content" title="CSS/content">content</a></code> property.</p>
<h2 id="Using_counters" name="Using_counters">Sayaçları kullanmak</h2>
<p>To use a CSS counter, it must first be reset to a value, 0 by default. To add the value of a counter to an element, use the counter() function. The following CSS adds to the beginning of each h3 element "Section <the value of the counter>:".</p>
<pre class="brush: css">body {
counter-reset: bolum; /* bolum adlı sayacın değerini 0 olarak ayarla */
}
h3:before {
counter-increment: bolum; /* bolum adlı sayacı arttır */
content: "Bölüm" counter(bolum) ": "; /* Sayacı görüntüle */
}
</pre>
<p>Örnek:</p>
<pre class="brush: html"><h3>Giriş</h3>
<h3>Gövde</h3>
<h3>Sonuç</h3></pre>
<p>{{ EmbedLiveSample('Using_counters', 300,200) }}</p>
<h2 id="Nesting_counters" name="Nesting_counters">Nesting counters</h2>
<p>A CSS counter can be especially useful to make outlined lists because a new instance of a CSS counter is automatically created in child elements. Using the <code>counters()</code> function, a string can be inserted between different levels of nested counters. For example this CSS:</p>
<pre class="brush: css">ol {
counter-reset: section; /* Creates a new instance of the
section counter with each ol
element */
list-style-type: none;
}
li:before {
counter-increment: section; /* Increments only this instance
of the section counter */
content: counters(section,".") " "; /* Adds the value of all instances
of the section counter separated
by a ".". */
/* if you need to support < IE8 then
make sure there is no space after
the ','
}
</pre>
<p>Combined with the following HTML:</p>
<pre class="brush: html"><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>
<p>Yields this result:</p>
<p>{{ EmbedLiveSample('Nesting_counters',400,'100%') }}</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/CSS/counter-reset" title="CSS/counter-reset">counter-reset</a></li>
<li><a href="/en-US/docs/CSS/counter-increment" title="CSS/counter-increment">counter-increment</a></li>
</ul>
<p><em>There is an additional example available at <a class="external" href="http://www.mezzoblue.com/archives/2006/11/01/counter_intu/" rel="freelink">http://www.mezzoblue.com/archives/20.../counter_intu/</a>. This blog entry was posted on November 01, 2006, but appears to be accurate.</em></p>
<p> </p>
|
