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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
---
title: Using CSS counters
slug: Web/CSS/CSS_Counter_Styles/Using_CSS_counters
translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
original_slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
---
<p>{{CSSRef}}</p>
<p><span class="seoSummary">Contadores CSS são em essência, as variáveis mantidas pelo CSS cujos valores podem ser incrementado por regras do CSS para controlar quantas vezes eles são usados.Isso permite ajustar a aparência do conteúdo com base na sua colocação no documento.</span> contadores CSS são uma implementação de <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Contadores automáticos e numeração </a>em CSS 2.1.</p>
<p>O valor de um contador é manipulado através da utilização de {{cssxref("counter-reset")}}. {{cssxref("counter-increment")}} pode ser exibido em uma página usando o <code>counter()</code> ou <code>counters()</code> função da propriedade de <code><a href="/en-US/docs/CSS/content" title="CSS/content">conteúdo</a></code>.</p>
<h2 id="Using_counters" name="Using_counters">Usando contadores</h2>
<p>Para usar um contador, tem quer definir um valor para ele (ele é 0 default). Para adicionar o valor do contador em um elemento, use a função <code>counter()</code>. O CSS abaixo adiciona "Section [o valor do contador]:" no início de cada elemento h3.</p>
<pre class="brush: css notranslate">body {
counter-reset: section; /* Set the section counter to 0 */
}
h3::before {
counter-increment: section; /* Increment the section counter*/
content: "Section" counter(section) ": "; /* Display the counter */
}
</pre>
<p>Exemplo:</p>
<pre class="brush: html notranslate"><h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3></pre>
<p>{{ EmbedLiveSample('Using_counters', 300,200) }}</p>
<h2 id="Nesting_counters" name="Nesting_counters">Nesting counters</h2>
<p>Um contador CSS pode ser especialmente útil para fazer listas descritas porque uma nova instância de um contador CSS é criado automaticamente em elementos filho . Usando a função <code>counters()</code>, uma corda pode ser inserido entre diferentes níveis de contadores aninhados. Por exemplo, esta CSS :</p>
<pre class="brush: css notranslate">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>Combinado com o seguinte HTML:</p>
<pre class="brush: html notranslate"><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>Produz este resultado:</p>
<p>{{ EmbedLiveSample('Nesting_counters',400,'100%') }}</p>
<h2 id="Specifications" name="Specifications">Especificações</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">Veja mais</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>
|
