From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../web/css/css_lists_and_counters/index.html | 135 +++++++++++++++++++++ .../using_css_counters/index.html | 115 ++++++++++++++++++ 2 files changed, 250 insertions(+) create mode 100644 files/pt-br/web/css/css_lists_and_counters/index.html create mode 100644 files/pt-br/web/css/css_lists_and_counters/using_css_counters/index.html (limited to 'files/pt-br/web/css/css_lists_and_counters') diff --git a/files/pt-br/web/css/css_lists_and_counters/index.html b/files/pt-br/web/css/css_lists_and_counters/index.html new file mode 100644 index 0000000000..6da7c24f6d --- /dev/null +++ b/files/pt-br/web/css/css_lists_and_counters/index.html @@ -0,0 +1,135 @@ +--- +title: CSS Lists and Counters +slug: Web/CSS/CSS_Lists_and_Counters +tags: + - CSS + - CSS Lists and Counters + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Lists_and_Counters +--- +

{{CSSRef}}

+ +

CSS Lists and Counters is a module of CSS that defines how lists are layed out, how the list marker can be styled and how authors can create new counters.

+ +

Reference

+ +

CSS Properties

+ +
+ +
+ +

At-rules

+ +
+
{{cssxref("@counter-style")}}
+
+
+
    +
  • {{cssxref("@counter-style/system","system")}}
    • +
  • {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
    • +
  • {{cssxref("@counter-style/negative", "negative")}}
    • +
  • {{cssxref("@counter-style/prefix", "prefix")}}
    • +
  • {{cssxref("@counter-style/suffix", "suffix")}}
    • +
  • {{cssxref("@counter-style/range", "range")}}
    • +
  • {{cssxref("@counter-style/pad", "pad")}}
    • +
  • {{cssxref("@counter-style/speak-as", "speak-as")}}
    • +
  • {{cssxref("@counter-style/fallback", "fallback")}}
    • +
+
+
+
+ +

Guides

+ +
+
Consistent list indentation
+
Explains how to reach a consistent indentation between different browsers.
+
Using CSS counters
+
Describes how to use counters to be able to use numbering outside of traditionnal list element, or to perform complex counting.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Lists')}}{{ Spec2('CSS3 Lists') }} 
{{ SpecName('CSS2.1', 'generate.html') }}{{ Spec2('CSS2.1') }} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1") }}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1") }}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
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 new file mode 100644 index 0000000000..2fb2dac4bd --- /dev/null +++ b/files/pt-br/web/css/css_lists_and_counters/using_css_counters/index.html @@ -0,0 +1,115 @@ +--- +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