From 497f01fc724eb5849dc8d304c0355e30ce68a68d Mon Sep 17 00:00:00 2001 From: MDN Date: Mon, 8 Nov 2021 00:49:15 +0000 Subject: [CRON] sync translated content --- files/pt-br/_redirects.txt | 1 + files/pt-br/_wikihistory.json | 16 +-- .../using_css_counters/index.html | 116 +++++++++++++++++++++ .../using_css_counters/index.html | 115 -------------------- 4 files changed, 125 insertions(+), 123 deletions(-) create mode 100644 files/pt-br/web/css/css_counter_styles/using_css_counters/index.html delete mode 100644 files/pt-br/web/css/css_lists_and_counters/using_css_counters/index.html (limited to 'files/pt-br') diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index 2a5b9802a4..4edd09566b 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -580,6 +580,7 @@ /pt-BR/docs/Web/CSS/CSS_Colors/seletor_de_cores /pt-BR/docs/Web/CSS/CSS_Colors/Color_picker_tool /pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox /pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox /pt-BR/docs/Web/CSS/CSS_Images/Implementando_sprites_de_imagens_em_CSS /pt-BR/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +/pt-BR/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters /pt-BR/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /pt-BR/docs/Web/CSS/CSS_Reference /pt-BR/docs/Web/CSS/Reference /pt-BR/docs/Web/CSS/CSS_Reference/mix-blend-mode /pt-BR/docs/Web/CSS/mix-blend-mode /pt-BR/docs/Web/CSS/CSS_Tipos /pt-BR/docs/Web/CSS/CSS_Types diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index 8e4eeea8d6..d02843e10d 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -7654,6 +7654,14 @@ "Sebastianz" ] }, + "Web/CSS/CSS_Counter_Styles/Using_CSS_counters": { + "modified": "2020-08-20T10:01:26.706Z", + "contributors": [ + "felipecesr", + "cris-luz-07", + "jorgeclesio" + ] + }, "Web/CSS/CSS_Display": { "modified": "2020-10-15T22:22:39.686Z", "contributors": [ @@ -7751,14 +7759,6 @@ "teoli" ] }, - "Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters": { - "modified": "2020-08-20T10:01:26.706Z", - "contributors": [ - "felipecesr", - "cris-luz-07", - "jorgeclesio" - ] - }, "Web/CSS/CSS_Positioning": { "modified": "2019-07-23T07:58:20.044Z", "contributors": [ diff --git a/files/pt-br/web/css/css_counter_styles/using_css_counters/index.html b/files/pt-br/web/css/css_counter_styles/using_css_counters/index.html new file mode 100644 index 0000000000..19ec6b7d79 --- /dev/null +++ b/files/pt-br/web/css/css_counter_styles/using_css_counters/index.html @@ -0,0 +1,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 +--- +

{{CSSRef}}

+ +

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. contadores CSS são uma implementação de Contadores automáticos e numeração em CSS 2.1.

+ +

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 counter() ou counters() função da propriedade de conteúdo.

+ +

Usando contadores

+ +

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 counter(). O CSS abaixo adiciona "Section [o valor do contador]:" no início de cada elemento h3.

+ +
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 */
+}
+
+ +

Exemplo:

+ +
<h3>Introduction</h3>
+<h3>Body</h3>
+<h3>Conclusion</h3>
+ +

{{ EmbedLiveSample('Using_counters', 300,200) }}

+ +

Nesting counters

+ +

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 counters(), uma corda pode ser inserido entre diferentes níveis de contadores aninhados. Por exemplo, esta 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 ',' */
+}
+
+ +

Combinado com o seguinte 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>
+ +

Produz este resultado:

+ +

{{ EmbedLiveSample('Nesting_counters',400,'100%') }}

+ +

Especificações

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}}{{Spec2('CSS2.1')}}
+ +

Veja mais

+ + + +

There is an additional example available at http://www.mezzoblue.com/archives/20.../counter_intu/. This blog entry was posted on November 01, 2006, but appears to be accurate.

diff --git a/files/pt-br/web/css/css_lists_and_counters/using_css_counters/index.html b/files/pt-br/web/css/css_lists_and_counters/using_css_counters/index.html deleted file mode 100644 index 2fb2dac4bd..0000000000 --- a/files/pt-br/web/css/css_lists_and_counters/using_css_counters/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Using CSS counters -slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters ---- -

{{CSSRef}}

- -

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. contadores CSS são uma implementação de Contadores automáticos e numeração em CSS 2.1.

- -

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 counter() ou counters() função da propriedade de conteúdo.

- -

Usando contadores

- -

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 counter(). O CSS abaixo adiciona "Section [o valor do contador]:" no início de cada elemento h3.

- -
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 */
-}
-
- -

Exemplo:

- -
<h3>Introduction</h3>
-<h3>Body</h3>
-<h3>Conclusion</h3>
- -

{{ EmbedLiveSample('Using_counters', 300,200) }}

- -

Nesting counters

- -

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 counters(), uma corda pode ser inserido entre diferentes níveis de contadores aninhados. Por exemplo, esta 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 ',' */
-}
-
- -

Combinado com o seguinte 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>
- -

Produz este resultado:

- -

{{ EmbedLiveSample('Nesting_counters',400,'100%') }}

- -

Especificações

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}}{{Spec2('CSS2.1')}}
- -

Veja mais

- - - -

There is an additional example available at http://www.mezzoblue.com/archives/20.../counter_intu/. This blog entry was posted on November 01, 2006, but appears to be accurate.

-- cgit v1.2.3-54-g00ecf