recursal/MDN huggingface dataset:
animation-delay
===============

A propriedade CSS **`animation-delay`** especifíca quando uma animação deve começar. Você pode começar a animação no futuro, imediatamente ou desde o início, ou imediatamente e parcialmente através do ciclo de animação.


```css
/\* Uma animação \*/
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

/\* Várias animações \*/
animation-delay: 2.1s, 480ms;
```


Muitas vezes é conveniente usar a propriedade abreviada `animation` para definir todas as propriedades de animação de uma só vez.

|  |  |
| --- | --- |
| Initial value | `0s` |
| Aplica-se a | all elements, `::before` and `::after` pseudo-elements |
| Inherited | não |
| Computed value | as specified |
| Animation type | Not animatable |

Sintaxe
-------

### Valores

``<time>``

O deslocamento do tempo, a partir do momento em que a animação é aplicada ao elemento, no qual a animação deve começar. Isso pode ser especificado em segundos (`s`) ou milesegundos or milliseconds (`ms`). A unidade é necessaria.

Um valor positivo indica que a animação deve começar após o período de especificação ter decorrido. O valor de `0s`, que é o padrão, incida que a animação deve começar desde que foi aplicada.

Um valor negativo faz com que a animação comece imediatamente, mas parcialmente através do seu ciclo. Por exemplo, se você específicar `-1s` como tempo da animation-delay , a animação vai começar imediatamente, mas começará 1 segundo na sequência de animação. Se você específicar um valor negativo para a animation-delay, mas o valor inicial é implícito, o valor inicial é retirado do momento em que a animação é aplicada ao elemento.


**Nota:** Quando você especifica vários valores separados por vírgula em uma propriedade `animation-*` , eles serão atribuídos às animações especificadas na propriedade `animation-name` (en-US) em diferentes modos, dependendo de quantos existam. Para mais informações veja Setting multiple animation property values.

### Sintaxe formal
```

animation-delay =   
  <time># (en-US)    
  
```

Exemplos
--------

Veja CSS animations (en-US) para exemplos.

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

| Specification |
| --- |
| CSS Animations Level 1 # animation-delay |

Compatibilidade com os browsers
-------------------------------

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

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

* Using CSS animations (en-US)
* JavaScript `AnimationEvent` API
Valor Computado
===============

The **computed value** of a CSS property is computed from the specified value by:

* Handling the special values `inherit` (en-US) and `initial`, and
* Doing the computation needed to reach the value described in the "Computed value" line in the property's summary.

The computation needed to reach the **computed value** for the property typically involves converting relative values (such as those in `em` units or percentages) to absolute values.

For example, if an element has specified values `font-size: 16px` and `padding-top: 2em`, then the computed value of `padding-top` is `32px` (double the font size).

However, for some properties (those where percentages are relative to something that may require layout to determine, such as `width`, `margin-right`, `text-indent`, and `top`), percentage specified values turn into percentage computed values. Additionally, unitless numbers specified on the `line-height` property become the computed value, as specified. These relative values that remain in the computed value become absolute when the used value (en-US) is determined.

The main use of the *computed value* (other than as a step between the specified value and used value) is inheritance, including the `inherit` (en-US) keyword.

Notas
-----

The `getComputedStyle()` (en-US) DOM API returns the `resolved value` (en-US), which may either be the `computed value` or the `used value`, depending on the property.

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # computed-value |

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

* CSS Reference
@page
=====

Resumo
------

A regra CSS `@page` é utilizada para modificar algumas propriedades CSS quando o documento for impresso. Você não pode mudar todas as propriedades CSS com @page. Você poderá somente mudar as margens, orphans, widows, e page breaks do documento. Na tentativa de mudar outra propriedade CSS, elas serão ignoradas.

A regra CSS `@page` pode ser acessada via interface do modelo de objeto `CSSPageRule` (en-US).

**Nota:** A W3C está analisando como lidar com unidades viewport-related `<length>` (en-US), `vh`, `vw`, `vmin`, and `vmax`. Enquanto isso, não use eles junto com a regra @page.

Sintaxe
-------
```

@page :pseudo-class {
  margin:2in;
}
```

Exemplos
--------

Podemos fazer referência a vários pseudo-classes (en-US) de `@page` por exemplo.

* `:first` (en-US)
* `:left` (en-US)
* `:right` (en-US)
Especificações
--------------

| Specification |
| --- |
| CSS Paged Media Module Level 3 # at-page-rule |
| CSS Logical Properties and Values Level 1 # page |

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

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

**Experimental:** **Esta é uma tecnologia experimental (en-US)**  
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

**Nota:** The `:blank` selector is considered at risk, as the CSSWG keeps changing it.

See CSSWG issue #1967.

A pseudo-classe CSS **`:blank`** seleciona elementos de entrada do usuário vazios (ex. `<input>` ou `<textarea>`).

Sintaxe
-------

Error: could not find syntax for this itemEspecificações
--------------

| Specification |
| --- |
| Selectors Level 4 # blank-pseudo |

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

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

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

* `:empty`
* `:-moz-only-whitespace` (en-US) 
Non-standard
 - Definição anterior de `:blank`.
CSS Layout cookbook
===================

O livro de receitas (Cookbook) de layout CSS visa reunir receitas para padrões de layout comuns, coisas que você pode precisar implementar em seus próprios sites. Além de fornecer código que você pode usar como ponto de partida em seus projetos, essas receitas destacam as diferentes maneiras pelas quais as especificações de layout podem ser usadas e as escolhas que você pode fazer como desenvolvedor.

**Nota:** Se você é novo no layout CSS, então primeiro você pode dar uma olhada em nosso módulo de aprendizado de layout CSS, pois isso lhe dará o básico de que você precisa para usar as receitas aqui.

As Receitas
-----------

| Recipe | Description | Layout Methods |
| --- | --- | --- |
| Media objects | Uma caixa de duas colunas com uma imagem de um lado e um texto descritivo do outro, por ex. um post no facebook ou um tweet. | CSS Grid, `float` fallback, `fit-content` (en-US) sizing |
| Columns (en-US) | Quando escolher layout de múltiplas colunas, flexbox ou grid para suas colunas. | CSS Grid, Multicol (en-US), Flexbox |
| Center an element (en-US) | Como centralizar um item horizontalmente e verticalmente. | Flexbox, Box Alignment (en-US) |
| Sticky footers (en-US) | Criando um rodapé que fica na parte inferior do contêiner ou viewport quando o conteúdo é menor. | CSS Grid, Flexbox |
| Split navigation (en-US) | Um padrão de navegação em que alguns links são visualmente separados dos outros. | Flexbox, `margin` |
| Breadcrumb navigation | Criando uma lista de links para permitir que o visitante navegue de volta pela hierarquia da página. | Flexbox |
| List group with badges (en-US) | Uma lista de itens com um acessório para exibir uma contagem. | Flexbox, Box Alignment (en-US) |
| Pagination (en-US) | Links para páginas de conteúdo (como resultados de pesquisa). | Flexbox, Box Alignment (en-US) |
| Card (en-US) | Um componente de notas/cartão, exibido em uma grade de notas/cartão. | Grid Layout |
| Grid wrapper (en-US) | Para alinhar o conteúdo da grade em um wrapper central, ao mesmo tempo em que permite que os itens sejam quebrados. | CSS Grid |

Contribuir com uma receita
--------------------------

Como com todo o MDN, gostaríamos que você contribuísse com uma receita no mesmo formato que os mostrados acima. Veja esta página para um modelo e diretrizes para escrever seu próprio exemplo.
Pseudo-classes
==============

Uma ***pseudo-classe*** CSS é uma palavra-chave adicionada a seletores que especifica um estado especial do elemento selecionado. Por exemplo, `:hover` pode ser usado para alterar a cor de um botão quando o usuário passar o cursor sobre ele.


```css
/\*Qualquer botão sobre o qual o ponteiro do usuário esteja passando sobre\*/
button:hover {
  color: blue;
}
```


Pseudo-classes permitem que você aplique um estilo a um elemento não apenas em relação ao conteúdo da árvore do documento, mas também em relação a fatores externos como o histórico de navegação (`:visited`, por exemplo), o status do seu conteúdo (como `:checked` em certos elementos de um formulário), ou a posição do mouse (como `:hover`, que permite saber se o mouse está sobre um elemento ou não).

**Nota:** Diferentemente das pseudo-classes, pseudo-elementos podem ser usados para estilizar uma *parte específica* de um elemento.

Sintaxe
-------
```

seletor:pseudo-classe {
  propriedade: valor;
}
```


Assim como nas classes regulares, você pode encadear juntas quantas pseudo-classes você desejar em um seletor.

Índice de pseudo-classes padrão
-------------------------------

* `:active`
* `:checked`
* `:default` (en-US)
* `:dir()` (en-US)
* `:disabled`
* `:empty`
* `:enabled`
* `:first` (en-US)
* `:first-child`
* `:first-of-type`
* `:fullscreen` (en-US)
* `:focus`
* `:hover`
* `:indeterminate` (en-US)
* `:in-range` (en-US)
* `:invalid`
* `:lang()` (en-US)
* `:last-child`
* `:last-of-type`
* `:left` (en-US)
* `:link`
* `:not()`
* `:nth-child()`
* `:nth-last-child()`
* `:nth-last-of-type()` (en-US)
* `:nth-of-type()`
* `:only-child`
* `:only-of-type`
* `:optional`
* `:out-of-range`
* `:read-only` (en-US)
* `:read-write`
* `:required`
* `:right` (en-US)
* `:root`
* `:scope` (en-US)
* `:target`
* `:valid`
* `:visited`
Especificações
--------------

| Specification |
| --- |
| HTML Standard # pseudo-classes |
| Selectors Level 4  |
| CSS Basic User Interface Module Level 4  |

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

* `pseudo-elements`
:required
=========

A pseudo-classe CSS **`:required`** representa qualquer `<input>`, `<select>`, ou `<textarea>` contendo o atributo `required`.


```css
/\* Seleciona qualquer <input> requerido \*/
input:required {
  border: 1px dashed red;
}
```


Esta pseudo-classe é utilizada para destacar campos que devem ter dados válidos antes do formulário ser submetido.

**Nota:** A pseudo-classe `:optional` seleciona campos do formulário que são *opcionais*.

Sintaxe
-------

Error: could not find syntax for this itemExemplos
--------

Veja `:invalid` como exemplo.

Preocupações com acessibilidade
-------------------------------

Elementos `<input>` obrigatórios devem ter o atributo `required` atribuídos. Isso garante que pessoas que navegam com auxílio de recursos de acessibilidade, como o leitor de tela, possam entender quais campos precisam ter conteúdos válidos para garantir a submissão dos dados .

Se o formulário também possui campos opcionais, entradas requeridas devem ser indicadas visualmente usando um tratamento que não seja apenas a cor para passar o significado. Usualmente, textos descritivos e/ou um ícone são utilizados.

* MDN Understanding WCAG, Guideline 3.3 explanations (en-US)
* Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0
Especificações
--------------

| Specification |
| --- |
| HTML Standard # selector-required |
| Selectors Level 4 # opt-pseudos |

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

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

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

* Outras pseudo-classe relacionadas a validação: `:optional`, `:invalid`, `:valid`
* Validação de dados de formulário (en-US)
Valor atual
===========

The **actual value** of a CSS property is the used value of that property after any necessary approximations have been applied. For example, a user agent that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer.

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # actual-value |

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

* CSS Reference
Especificidade
==============

O Conceito
----------

A especificação é a maneira de como os navegadores definem quais valores de propriedades são os mais relevantes para o elemento a ser utilizado. A especificação é baseada apenas nas regras impostas na composição de diferentes tipos de seletores.

Como isso é calculado?
----------------------

A espeficicação é calculada na concatenação da contagem de cada tipo de seletor. Não é um peso aplicado na expressão correspondente.

No caso de igualdade de especificação, a última declaração encontrada no CSS é aplicada ao elemento.

**Nota:**: O fato de elementos estarem próximos na árvore do documento não tem efeito sobre a especificação.

### Ordem crescente de especificação

A seguinte lista de seletores está incluida na especificação:

* Seletores Universais
* Tipo de Seletores
* Classes seletoras
* Atributos Seletores
* Pseudo-classes
* Seletores ID
* Estilo Inline
### A exceção `!important`

Quando a regra `!important` é utilizada na declaração do estilo substitui qualquer outra declaração feita no CSS, onde quer que esteja na lista de declaração. Contudo, `!important` não tem nada a ver com especificação.

### A exceção `:not`

A pseudo-classe de negação `:not` não é considerada uma pseudo-classe no cálculo de especificação. Contudo, seletores colocados na pseudo-class de negação são entendidos como seletores normais.

Aqui está um trecho de CSS:


```css
div.outer p {
  color: orange;
}
div:not(.outer) p {
  color: lime;
}
```


Usado com o seguindo código HTML:


```html
<div class="outer">
  <p>Esta é a div outer.</p>
  <div class="inner">
    <p>Este texto está na div inner.</p>
  </div>
</div>
```


Irá aparecer na tela assim:

Esta é a div outer.

Este texto está na div inner.

### Especificação Form-based

A especificação é baseada na forma de um seletor. No seguinte caso, o seletor contém os atributos no algoritmo de determinação de especificação, embora ele selecione um ID.

A seguir veja as declarações de estilo:


```css
\* #foo {
  color: green;
}
\*[id="foo"] {
  background: purple;
}
```


Usado com esta marcação:


```html
<p id="foo">Eu sou um simples texto.</p>
```


Vai acabar parecendo algo como:

Eu sou um simples texto.

Porque coincide com o mesmo elemento, mas o seletor de ID tem uma especificação superior.

### Estrutura aproximada

A seguir a declaração do estilo:


```css
body h1 {
  color: green;
}
html h1 {
  color: purple;
}
```


Com o HTML seguinte::


```html
<html>
  <body>
    <h1>Aqui está o título!</h1>
  </body>
</html>
```


Vamos ter algo como:

Aqui está o título!

Veja Também
-----------

* Espcificação de Seletores CSS - https://www.w3.org/TR/selectors/#specificity
word-wrap
=========

**Experimental:** **Esta é uma tecnologia experimental (en-US)**  
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

Resumo
------

A propriedade CSS `word-wrap` é utilizada para especificar se o navegador pode ou não quebrar linhas dentro das palavras, afim de prevenir o vazamento quando do contrário uma sequencia de caracteres é muito longa para caber na caixa que o contém.

**Nota:** Originalmente uma extensão proprietária da Microsoft (não prefixada), a propriedade `word-wrap` foi renomeada para `overflow-wrap` no rascunho atual do texto de especificações do CSS3. Compilações estáveis do Google Chrome e do Opera têm suporte a nova sintaxe.

|  |  |
| --- | --- |
| Initial value | `normal` |
| Aplica-se a | non-replaced inline elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

Sintaxe
-------
```

word-wrap:  normal | break-word
```

### Valores

`normal`

Indica que as linhas só podem quebrar em pontos de quebra normais de palavras.

`break-word`

Indica que as palavras normalmente inquebráveis podem ser quebrados em pontos arbitrários se não houver pontos de quebra de outra forma aceitáveis na linha.

Exemplos
--------


```css
p {
  width: 13em;
  background: gold;
}
```


FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)


```css
p {
  width: 13em;
  background: gold;
  word-wrap: break-word;
}
```


FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

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

| Specification |
| --- |
| CSS Text Module Level 3 # overflow-wrap-property |

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

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

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

* Microsoft's original documentation: MSDN Microsoft library word-wrap
-webkit-overflow-scrolling
==========================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Resumo
------

A propriedade CSS `-webkit-overflow-scrolling` controla quando dispositivos com a funcionalidade de toque na tela usam uma rolagem baseada no "momentum" de um dado elemento.

|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | scrolling boxes |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

Valores
-------

`auto`

Usa a rolagem "regular", onde o conteúdo imediatamente cessa a rolagem quando você remove o dedo da tela que reconhece os toques.

`touch`

Usa a rolagem baseada em "momentos", onde o conteúdo continua a rolar por um momento depois do gesto de rolagem ter sido finalizado quando o usuário deixar de tocar com o dedo na tela. A velocidade e duração da rolagem contínua é proporcional ao quão vigoroso a rolagem. Também cria um novo contexto estagnado.

### Sintaxe formal

Error: could not find syntax for this itemExemplos
--------


```css
-webkit-overflow-scrolling: touch; /\* deixa a rolagem suave \*/

-webkit-overflow-scrolling: auto; /\* pare de rolar imediatamente \*/
```

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

Não faz parte de nenhuma especificação. A Apple tem uma descrição na referência de CSS do Safari.

Compatibilidade do navegador
----------------------------

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

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

* Artigo do CSS-Tricks com demo
CSS Images
==========

**CSS Images** is a module of CSS that defines what types of images can be used (the `<image>` type, containing URLs, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.

Reference
---------

### Properties

* `image-orientation` (en-US)
* `image-rendering` (en-US)
* `object-fit`
* `object-position` (en-US)
### Functions

* `linear-gradient()` (en-US)
* `radial-gradient()` (en-US)
* `repeating-linear-gradient()` (en-US)
* `repeating-radial-gradient()` (en-US)
* `element()`
### Data types

* `<gradient>` (en-US)
* `<image>`
Guides
------

Using CSS gradients (en-US)

Presents a specific type of CSS images, *gradients*, and how to create and use these.

Implementing image sprites in CSS

Describes the common technique grouping several images in one single document to save download requests and speed up the availability of a page.

Specifications
--------------

| Specification |
| --- |
| CSS Images Module Level 3  |
| Compatibility Standard # css-%3Cimage%3E-type |
| CSS Values and Units Module Level 4 # urls |
element
=======

**Experimental:** **Esta é uma tecnologia experimental (en-US)**  
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

A função CSS **`element()`** define uma `<image>` gerada de um elemento HTML qualquer. Essa imagem é ***dinamica***, significando que se o elemento HTML for mudado, a propriedade CSS usando este valor será atualizada automaticamente.

Um cenario particularmente util para usar esta função seria colocar uma imagem em um elemento `<canvas>`, e então usar-lo como um *background*.

Em navegadores Gecko, você pode usar o metodo não padronizado `document.mozSetImageElement()` (en-US) para mudar o elemento sendo usado como *background* por um elemento de *background* selecionado por CSS.

Sintaxe
-------
```

element( id )
```


Onde:

`id`

É o ID de um elemento para usar como background, especificado usando o atributo HTML #*id* no elemento.

Exemplos
--------

Esses exemplos podem ser vistos em tempo real em versões do Firefox que suportam `-moz-element()`.

### Um exemplo de alguma maneira real

Esse exemplo usa uma `<div>` escondida como *background*. O elemento de *background* tem um gradiente, mas tambem um texto que é usado como parte do *background*.


```html
<div
 style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
  <p>This box uses the element with the #myBackground1 ID as its background!</p>
</div>

<div style="overflow:hidden; height:0;">
  <div
 id="myBackground1"
 style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
    <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">
      This text is part of the background. Cool, huh?
    </p>
  </div>
</div>
```


A `<div>` com ID "myBackground1" é usada como *background*, mantendo o paragrafo "This box uses the element with the #myBackground1 ID as its background!".

![example1.png](/pt-BR/docs/Web/CSS/element/example1.png)

### Um exemplo ainda mais bizarro

Esse exemplo usa um elemento `<button>` se repetindo como *background*. Isso mostra que você pode usar qualquer elemento como background, mas não mostra necessariamente boas praticas de design.


```html
<div
 style="width:400px; height:100px; background:-moz-element(#myBackground2);"></div>

<div style="overflow:hidden; height:0;">
  <button id="myBackground2" type="button">Evil button!</button>
</div>
```


![example2.png](/pt-BR/docs/Web/CSS/element/example2.png)

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

| Specification |
| --- |
| CSS Images Module Level 4 # element-notation |

Compatibilidade dos navegadores
-------------------------------

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

Veja tambem
-----------

* `document.mozSetImageElement()` (en-US)
:root
=====

A pseudo-classe CSS **`:root`** se equipara à raiz de uma árvore, que por sua vez representa o documento. Aplicado ao HTML, `:root` representa o elemento `<html>` e é idêntico ao seletor `html`, exceto que sua especificidade é mais alta.


```css
/\* Seleciona o elemento raiz do documento:
 <html> no caso do HTML \*/
:root {
  background: yellow;
}
```

Sintaxe
-------
```

:root
```

Exemplos
--------

### Declarando variáveis CSS globais

O`:root` pode ser útil para declarar uma variável CSS global:


```css
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # root-pseudo |

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

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

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

* `<html>`
* `Document.rootElement` (en-US)
* `Node.getRootNode()` (en-US)
* `Element.shadowRoot` (en-US)
* `ShadowRoot` (en-US)