recursal/MDN huggingface dataset:
Using CSS counters
==================

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 `counter-reset` (en-US). `counter-increment` (en-US) pode ser exibido em uma página usando o `counter()` ou `counters()` função da propriedade de `conteúdo` (en-US).

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.


```css
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:


```html
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>
```

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 :


```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:


```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:

Especificações
--------------

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # auto-numbering |

Veja mais
---------

* counter-reset (en-US)
* counter-increment (en-US)

*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.*
grayscale()
===========

O **`grayscale()`** é uma função do CSS que modifica a imagem adicionada para as cores branco e preto . Esse resultado é um efeito "filtro". `<filter-function>` (en-US).

Experimente
-----------

Sintaxe
-------
```

grayscale(quantidade)
```

### Parâmetros

`quantidade`

A quantia da conversão é especificada em `<number>` (número) ou `<percentage>` (en-US) (porcentagem). Um valor de `100%` indica que a cor está compeltamente dentro da escala de cinza. Um valor de `0%` não altera as cores da imagem, que permanecerá igual a original. Valores entre `0%` e `100%` são multiplicadores lineares no efeito cinza, modificando a escala de cores conforme a quantidade determinada. A quantia em número é equivalente a em porcentagem.


```css
grayscale(0)     /\* Não afeta a imagem \*/
grayscale(.7)    /\* .7 => 70% de branco&preto \*/
grayscale(100%)  /\* Completamente em branco&preto \*/
```

Veja também
-----------

* `<filter-function>` (en-US)
opacity()
=========

A função CSS **`opacity()`** aplica transparência às amostras na imagem inputada. Seu resultado é uma `<filter-function>` (en-US).

**Nota:** Essa função é similar à propriedade `opacity` mais estabelecida. A diferença é que com filtros, alguns browsers fornecem aceleração de hardware para uma melhor performance.

Sintaxe
-------
```

opacity(amount)
```

### Parâmetros

`amount`

A quantidade de conversão, especificada com um `<number>` ou uma `<percentage>` (en-US). Um valor de `0%` é completamente transparente, enquanto que um valor de `100%` mantém o input inalterado. Valores entre `0%` e `100%` são multiplicadores lineares do efeito. O valor de lacuna para interpolação é `1`.

Exemplos
--------


```css
opacity(0%)   /\* Completamente transparente \*/
opacity(50%)  /\* 50% transparente \*/
opacity(1)    /\* Nenhum efeito \*/
```

Ver também
----------

* `<filter-function>` (en-US)
* Propriedade CSS `opacity`
sepia()
=======

A função CSS **`sepia()`** converte a imagem inputada em sépia, dando uma aparência mais amarelada/marrom e quente. Seu resultado é uma `<filter-function>` (en-US).

Sintaxe
-------
```

sepia(amount)
```

### Parâmetros

`amount`

A quantidade de conversão, especificada por um `<number>` ou uma `<percentage>` (en-US). Um valor de `100%` é completamente sépia, enquanto que um valor de `0%` mantém o input inalterado. Valores entre `0%` e `100%` são multiplicadores lineares do efeito. O valor de lacuna para interpolação é `0`.

Exemplos
--------


```css
sepia(0)     /\* Sem efeito \*/
sepia(.65)   /\* 65% sépia \*/
sepia(100%)  /\* Completamente sépia \*/
```

Ver também
----------

* `<filter-function>` (en-US)
Gerador de Border-image
=======================

Esta ferramenta pode ser utilizada para gerar o valor `border-image` (en-US) em CSS3.
Multiple backgrounds
====================

Com CSS3, você pode aplicar aos elementos multiplos planos de fundo. Estes ficam em camadas empilhadas uma acima da outra onde o o primeiro fundo dado será desenhado no topo e apenas o último fundo da lista poderá definir uma cor sólida de fundo.

Especificar planos de fundo múltplos é fácil:


```css
.minhaClasse {
  background: fundo1, fundo2, ..., fundoN;
}
```


Você pode fazer isso com a propriedade reduzida `background` e também com as propriedade individuais, com a excessão de `background-color`. Isto é, as seguintes propriedades de plano de fundo podem ser especificadas com uma lista, uma por fundo: `background`, `background-attachment`, `background-clip`, `background-image` (en-US), `background-origin`, `background-position` (en-US), `background-repeat` (en-US), `background-size`.

Exemplo
-------

Neste exemplo, três planos de fundos estão empilhados: o logo do Firefox, um degradê linear, e uma imagem com flores:


```css
.multi\_bg\_example {
  background:
    url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
    -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)),
    url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position:
    bottom right,
    left,
    right;
}
```


| Captura de Tela | Demonstração |
| --- | --- |
| css_multibg.png |  |

Como pode ver, o logo do firefox (listado primeiro) está no topo, seguido do gradiente que está uma camada acima do fundo florido. Cada uma das sub-propriedade subsequente, (`background-repeat` (en-US) e `background-position` (en-US)) se aplicam aos fundos correspondentes. Então o primeiro valor para `background-repeat` (en-US) se aplica ao primeiro plano de fundo (o mais da frente), e assim por adiante.

Veja também
-----------

* Usando degradês
Implementando sprites de imagens em CSS
=======================================

**Sprites de imagens** são utilizados em diversas aplicações web onde várias imagens são usadas. Ao invés de incluir cada arquivo de imagem separadamente, é mais amigável com a memória e largura de banda enviar tudo como uma única imagem, diminuindo o número de pedidos em HTTP.

**Nota:** Quando usando HTTP/2, é mais amigável com a largura de banda usar vários pequenos pedidos.

Implementação
-------------

Suponha que uma imagem é dada a cada item com a classe `toolbtn`:


```css
.toolbtn {
  background: url(myfile.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}
```


A posição do plano de fundo pode ser adicionada tanto com dois valores x, y depois de `url()` (en-US) em background , ou como `background-position` (en-US) . Por exemplo:


```css
#btn1 {
  background-position: -20px 0px;
}

#btn2 {
  background-position: -40px 0px;
}
```


Isso vai mover o elemento com a ID 'btn1' 20 pixels para a esquerda e o elemento com a ID 'btn2' 40 pixels para a esquerda (presumindo que ambos tem a classe `toolbtn` atribuída e estão sendo afetados pela regra da imagem acima).

De forma similar, você pode criar um efeito de hover com:


```css
#btn:hover {
  background-position: <pixels para direita>px <pixels para baixo>px;
}
```

Veja também
-----------

* Demo completa em CSS Tricks
MathML element reference
========================

Essa é uma lista alfabética dos elementos de **apresentação** de MathML.

O termo **marcação de apresentação** é usado para descrever a estrutura da notação matemática, enquanto que **marcação de conteúdo** fornece um significado matemático básico e não é feito para ser renderizado pelo parser de MathML (ver Erro do Firefox 276028). Se você desejar aprender mais sobre marcação de conteúdo considere o Capítulo 4 na especificação do MathML 3.

### math

* `<math> (en-US)` (Elemento de alto nível)
### A

* `<maction> (en-US)` (Binded actions to sub-expressions)
* `<maligngroup>` (Grupo de alinhamento)
* `<malignmark>` (Pontos de alinhamento)
### E

* `<menclose> (en-US)` (Enclosed contents)
* `<merror> (en-US)` (Enclosed syntax error messages)
### F

* `<mfenced> (en-US)` (Parenteses)
* `<mfrac> (en-US)` (Fração)
### G

* `<mglyph>` (Exibindo símbolos non-standard)
### I

* `<mi> (en-US)` (Identifier)
### L

* `<mlabeledtr>` (Labeled row in a table or a matrix)
* `<mlongdiv>` (Notação de longa divisão)
### M

* `<mmultiscripts> (en-US)` (Prescripts and tensor indices)
### N

* `<mn> (en-US)` (Número)
### O

* `<mo> (en-US)` (Operador)
* `<mover> (en-US)` (Overscript)
### P

* `<mpadded> (en-US)` (Space around content)
* `<mphantom> (en-US)` (Invisible content with reserved space)
### R

* `<mroot> (en-US)` (Radical with specified index)
* `<mrow> (en-US)` (Grouped sub-expressions)
### S

* `<ms> (en-US)` (String literal)
* `<mscarries>` (Annotations such as carries)
* `<mscarry>` (Single carry, child element of `<mscarries>`)
* `<msgroup>` (Grouped rows of `<mstack>` and `<mlongdiv>` elements)
* `<msline>` (Linhas horizontais dentro de elementos `<mstack>`)
* `<mspace> (en-US)` (Espaço)
* `<msqrt> (en-US)` (Raiz quadrada sem index)
* `<msrow>` (Colunas nos elementos `<mstack>`)
* `<mstack>` (Stacked alignment)
* `<mstyle> (en-US)` (Style change)
* `<msub> (en-US)` (Subscript)
* `<msup> (en-US)` (Superscript)
* `<msubsup> (en-US)` (Subscript-superscript pair)
### T

* `<mtable> (en-US)` (Tabela ou matriz)
* `<mtd> (en-US)` (Célula numa tabela ou matriz)
* `<mtext> (en-US)` (Texto)
* `<mtr> (en-US)` (Coluna numa tabela ou matriz)
### U

* `<munder> (en-US)` (Underscript)
* `<munderover> (en-US)` (Underscript-overscript pair)
### Other elements

* `<semantics> (en-US)` (Container for semantic annotations)
* `<annotation>` (en-US) (Anotações de dados)
* `<annotation-xml>` (en-US) (Anotações XML)
Ver também
----------

* MathML
* Referência de atributos de MathML (en-US)
Exemplos
========

Abaixo você irá encontrar alguns exemplos que irá ajudá-lo a entender como utilizar MathML para apresentar conceitos matemáticos complexos na Web.

Teorema de Pitágoras (en-US)

Pequeno exemplo mostrando a demostração do Teorema de Pitágoras.

Solução da equação do segundo grau (en-US)

Linhas gerais de como descobrir a solução para equações do segundo grau.

Testes para MathML

Grande conjunto de tests para MathML.
Referência HTML
===============

Esta referência de HTML descreve todos os **elementos** e **atributos** do HTML, incluindo **atributos globais** que se aplicam a todos elementos.

Referência de elementos do HTML

Esta página lista todos os elementos do HTML que são criados usando tags.

Referência de atributos do HTML

Os elementos do HTML contêm atributos, que são valores adicionais que configuram os elementos ou ajustam seu comportamento de várias formas, para que se adaptem aos critérios dos usuários.

Atributos globais

Atributos globais são atributos comuns a todos os elementos do HTML; podem ser usados em todos os elementos, embora possam não ter efeito em alguns elementos.

Tipos de links (en-US)

Em HTML, os tipos de links a seguir indicam o relacionamento entre dois documentos, em que um aponta para o outro usando um elemento `<a>`, `<area>` ou `<link>`.

Categorias de conteúdo

Todo elemento em HTML é membro de uma ou mais categorias de conteúdo — estas categorias agrupam elementos que compartilham características comuns.
CORS\_habilitar\_imagens
========================

The HTML specification introduces a `crossorigin` attribute for images that, in combination with an appropriate CORS header, allows images defined by the `<img>` element that are loaded from foreign origins to be used in canvas as if they were being loaded from the current origin.

See CORS settings attributes for details on how the `crossorigin` attribute is used.

O que é um "contaminado" canvas?
--------------------------------

Embora você possa usar imagens sem aprovação do CORS em seu canvas, criando contaminação ao canvas. Uma vez o canvas tenhya sido "contaminado" você não pode mais "puxar" informações do canvas.Por exemplo, você pode não mais usar os métodos canvas toBlob(), toDataURL(), ou getImageData(), fazendo isto você irá lançar um erro de sergurança.

Esta proteção de usuário tem tido dados expostos por uso de informações de imagens de site web remoto sem permissão.

Exemplo: Armazenando uma imagem de uma origem estrangeira
---------------------------------------------------------

Você precisa ter um servidor hospedando as imagenscom o apropriado Access-Control-Allow-Origin cabeçalho. Adicionando atributos crossOrigin faz uma requisição ao cabeçalho. Você pode usar este exemplo das Configurações Apache Server HTML5 Boilerplate para aproximadamente responder com este cabeçalho de resposta.


```xml
<IfModule mod\_setenvif.c>
    <IfModule mod\_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>
```


Dado que está tudo classificado, você permiti salvar àquelas imagens no Armazenamento DOM (en-US)


```js
var img = new Image(),
  canvas = document.createElement("canvas"),
  ctx = canvas.getContext("2d"),
  src = "http://example.com/image"; // insert image url here

img.crossOrigin = "Anonymous";

img.onload = function () {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  localStorage.setItem("savedImageData", canvas.toDataURL("image/png"));
};
img.src = src;
// make sure the load event fires for cached images too
if (img.complete || img.complete === undefined) {
  img.src =
    "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
  img.src = src;
}
```

Veja também
-----------

* Usando imagens de Cross-domínio em WebGL e Chrome 13
* Especificações HTML - o atributo crossorigin
<acronym>
=========

Resumo
------

O Elemento HTML Acrônimo (`<acronym>)` permite à autores claramente indicar que uma seqüência de caracteres compõe um acrônimo ou uma abreviação de uma palavra.

> 
> **Note:** Este elemento foi removido no HTML5 e não deve ser usado mais. Ao invés dele, desenvolvedores devem usar o elemento `<abbr>`.
> 
> 
> 

Atributos
---------

Este elemento não possui qualquer outro atributo além dos atributos globais (en-US), comuns à todos os elementos.

Interface DOM
-------------

Este elemento implementa a interface `HTMLElement` (en-US).

> 
> **Note:** **Nota de implementação:** Após o Gecko 1.9.2 inclusive, Firefox implementa a interface `HTMLSpanElement` para este elemento.
> 
> 
> 

Exemplo
-------


```html
<p>
  A <acronym title="World Wide Web">WWW</acronym> é somente um dos componentes
  da Internet.
</p>
```

Estilo padrão
-------------

Embo is purely for the convenira o propósito desta tag seja meramente a conveniência dos autores, seu estilo padrão varia entre diferentes navegadores:

* Alguns navegadores, como o Internet Explorer, não criam qualquer estilo diferente do de um elemento `<span>`.
* Opera, Firefox, e alguns outros adicionam um sublinhado pontilhado no conteúdo do elemento.
* Alguns poucos navegadores não somente adicionam um sublinhado pontilhado, mas também colocam o conteúdo em versalete (small caps); para evitar este estilo, adicione algo como `font-variant` (en-US)`: none` no CSS que cuida deste caso.

É portanto fortemente recomendado que autores web não confiem no estilo padrão do navegador para este elemento.

Compatibilidade de navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver também
----------

* O elemento HTML `<abbr>`
nav
===

Sumário
-------

O *Elemento* *HTML* *de Navegação* (`<nav>`) representa uma seção de uma página que aponta para outras páginas ou para outras áreas da página, ou seja, uma seção com links de navegação.

> 
> **Note:** *Notas de utilização:*
> 
> 
> * Nem todos os links de um documento devem estar dentro de um elemento `<nav>`, o qual é destinado apenas para grupos importantes de links de navegação; tipicamente o elemento `<footer>` contém uma lista de links que não precisam estar em um elemento `<nav>`.
> * Um documento pode ter vários elementos `<nav>`, por exemplo, um para navegação no site e outro para navegação dentro da página.
> * Agentes de usuário, como leitores de tela para usuários deficientes, podem utilizar este elemento para determinar se a renderização inicial do conteúdo do mesmo deve ser omitida.
> 
> 
> 

Contexto de uso
---------------

| Conteúdo permitido | Conteúdo de fluxo |
| --- | --- |
| Omissão de tag | Nenhuma, tanto a tag de início quanto a de fim são obrigatórias |
| Elementos-pai permitidos | Quaisquer elementos que permitam conteúdo de fluxo. Note que um elemento `<nav>` não deve descender de um elemento `<address>`. |
| Documento normativo | HTML5, seção 4.4.3 |

Atributos
---------

Este elemento não possui outros atributos além dos atributos globais, comuns a todos os elementos.

Interface DOM
-------------

Este elemento implementa a interface `HTMLElement`.

Exemplos
--------


```html
<nav>
  <ul>
    <li><a href="#">Página inicial</a></li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">Contato</a></li>
  </ul>
</nav>
```

Compatibilidade
---------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Outros elementos relacionados à seções: `<body>`, `<article>`, `<section>`, `<aside>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<hgroup>`, `<header>`, `<footer>`, `<address>`;
* Seções e esboços de um documento HTML5
<option>
========

Sumário
-------

Em um formulário Web, o **elemento HTML** `<option>` é usado para criar um controle que representa um item dentro de um elemento HTML5 `<select>`, `<optgroup>` ou `<datalist>`.

* *Categorias de conteúdo* Nenhuma.
* *Conteúdo permitido* Texto com caracteres escapados (como `&eacute;`) ocasionalmente.
* *Omissão de tags* A tag de abertura é obrigatória. A tag de fechamento é opcional se este elemento é imediatamente seguido por um outro elemento `<option>` ou um `<optgroup>`, ou se o elemento pai não tem mais nenhum conteúdo.
* *Elementos pai permitidos* `<select>`, `<optgroup>` ou `<datalist>`.
* *Interface DOM* `HTMLOptionElement` (en-US)
Atributos
---------

Este elemento inclui os atributos globais.

`disabled`

Se este atributo booleano estiver definido, esta opção não é selecionável. Frequentemente navegadores acinzentam este tipo de controle, e ele deixa de receber quaisquer eventos de navegação, como cliques do mouse ou eventos relacionados a foco. Se este atributo não estiver definido, o elemento ainda pode ser desabilitado se um de seus ancestrais é um elemento `<optgroup>` desabilitado.

`label`

Este atributo é o texto para o rótulo indicando o significado da opção. Se o atributo **label** não estiver definido, seu valor é o conteúdo de texto do elemento.

> 
> **Note:** O atributo **label** é projetado para conter um rótulo curto tipicamente usado num menu hierárquico. O atributo **value** descreve descreve um rótulo maior, designado para ser usado perto de um botão de escolha, por exemplo.
> 
> 
> 

`selected`

Se presente, este atributo booleano indica que a opção está selecionada inicialmente. Se o elemento `<option>` for descendente de um elemento `<select>` cujo atributo `multiple` não está definido, apenas um único `<option>` deste elemento `<select>` pode ter o atributo **selected**.

`value`

O conteúdo textual deste atributo representa o rótulo que explica a opção. Se ele não estiver definido, seu valor padrão é o texto contido no elemento.

> 
> **Note:** O atributo **label** é projetado para conter um rótulo curto tipicamente usado num menu hierárquico. O atributo **value** descreve descreve um rótulo maior, designado para ser usado perto de um botão de escolha, por exemplo.
> 
> 
> 

Exemplos
--------

Veja os exemplos do elemento `<select>`.

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-option-element |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Outros elementos relacionados a formulários: `<form>` (en-US), `<legend>`, `<label>`, `<button>`, `<select>`, `<datalist>`, `<optgroup>`, `<fieldset>`, `<textarea>`, `<input>`, `<output>`, `<progress>` e `<meter>`.
summary
=======

Sumário
-------

O elemento HTML *summary* (`<summary>`) é utilizado como um sumário ou legenda para o conteúdo de um elemento `<details>`.

**Nota:** Se o elemento `<summary>` for omitido, o cabeçalho "details" será utilizado.

Contexto de uso
---------------

| Conteúdo permitido | Phrasing content |
| --- | --- |
| Omissão de tag | Nenhuma, tanto as tags iniciais quanto as finais devem estar presentes. |
| Elementos pai permitidos | O elemento `<details>`. |
| Documentos normativos | HTML5, section 4.11.2 |

Atributos
---------

Como todos os outros elementos HTML, esse elemento possui os atributos globais.

Interface do DOM
----------------

Esse elemento implementa a interface `HTMLElement`.

Exemplos
--------

Veja a página `<details>` para ver exemplos com `<summary>`.

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `<details>`