max-width - CSS

max-width
=========

A propriedade **`max-width`** do CSS estabelece a largura máxima de um elemento. Ele evita que o valor usado da propriedade `width` se torne maior que o valor especificado por `max-width`.

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

`max-width` substitui `width`, mas `min-width` (en-US) substitui `max-width`.

Sintaxe
-------

```css
/\* <length> valor \*/
max-width: 3.5em;

/\* <porcentagem> valor \*/
max-width: 75%;

/\* Valores de keyword \*/
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content(20em);

/\* Valores Globais \*/
max-width: inherit;
max-width: initial;
max-width: revert;
max-width: revert-layer;
max-width: unset;
```

### Valores

`<length>` (en-US)

Define a `max-width` como um valor absoluto.

`<percentage>` (en-US)

Define a `max-width` como uma porcentagem da largura do bloco que o contém.

`none`

A largura não possui valor máximo. (padrão)

`max-content`
Experimental

A `max-width` intrínseca preferida.

`min-content`
Experimental

O mínimo `max-width` intrínseco.

`fit-content(`<length-percentage>` (en-US))`

Use a fórmula `fit-content` com o espaço disponível substituído pelo argumento especificado, i.e. `min(max-content, max(min-content, argumento)).`

Preocupações de Acessibilidade
------------------------------

Certifique-se que os elementos definidos com `max-width` não sejam truncados e/ou não obscureçam outros conteúdos quando a página for ampliada para aumentar o tamanho do texto.

* MDN Understanding WCAG, explicações da Diretriz 1.4 (en-US)
* Compreender o Critério de Sucesso 1.4.4 | W3C Entendendo as WCAG 2.0
Definição formal
----------------

|  |  |
| --- | --- |
| Initial value | `none` |
| Aplica-se a | all elements but non-replaced inline elements, table rows, and row groups |
| Inherited | não |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length or `none` |
| Animation type | a length, percentage or calc(); |

Sintaxe formal
--------------
```

max-width =
  none                                      | (en-US)
  <length-percentage [0,∞]>                 | (en-US)
  min-content                               | (en-US)
  max-content                               | (en-US)
  fit-content( <length-percentage [0,∞]> )

<length-percentage> =
  <length> (en-US)      | (en-US)
  <percentage> (en-US)

```

Exemplos
--------

### Definindo a largura máxima em pixels

Neste exemplo, o "child" terá 150 pixels de largura ou a largura do "parent", o que for menor:

#### HTML

```html
<div id="parent">
  <div id="child">
    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
  </div>
</div>
```

#### CSS

```css
#parent {
  background: lightblue;
  width: 300px;
}

#child {
  background: gold;
  width: 100%;
  max-width: 150px;
}
```

#### Resultado

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

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

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

* O box model, `box-sizing`
* `width`, `min-width` (en-US)
* The mapped logical properties: `max-inline-size` (en-US), `max-block-size` (en-US)


:first-child - CSS

:first-child
============

Sumário
-------

A pseudo-classe de CSS **`:first-child`** representa qualquer elemento que seja o primeiro filho de seus pais.

Sintaxe
-------
```

elemento:first-child { estilos }
```

Exemplos
--------

### Exemplo 1

#### HTML

```html
<div>
  <span>Este span é verde limão!</span>
  <span>Este span não é verde limão. :(</span>
</div>
```

#### CSS

```css
span:first-child {
  background-color: lime;
}
```

... resultado ...

### Exemplo 2 - Usando UL

#### HTML

```html
<ul>
  <li>Elemento de Lista 1</li>
  <li>Elemento de Lista 2</li>
  <li>Elemento de Lista 3</li>
</ul>
```

#### CSS

```css
li {
  color: red;
}
li:first-child {
  color: green;
}
```

... resultado ...

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

| Specification |
| --- |
| Selectors Level 4 # first-child-pseudo |

Browsers compatíveis
--------------------

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


:link - CSS

:link
=====

Resumo
------

A pseudo-class CSS :link permite que você selecione os links dentro de um elemento. Ela seleciona todos os links, até mesmo os que não foram visitados, incluindo os links ja estilizados em outras classes ou ids com o `:hover`, `:active` ou `:visited`. Para um funcionamento adequado é essencial que ela venha antes das regras: `:visited` — `:hover` — `:active`. O `:focus` é uma pseudo-class geralmente usada antes de a:hover ou depois, dependendo do resultado esperado.

Exemplos
--------

```css
a:link {
  color: slategray;
}
.external:link {
  background-color: lightblue;
}
```

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

| Specification |
| --- |
| HTML Standard # selector-link |
| Selectors Level 4 # link |

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

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

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

* `:visited`, `:hover`, `:active`


background - CSS

background
==========

Resumo
------

A propriedade CSS **`background`** é um atalho para definir os valores de fundo individuais em um único lugar na folha de estilo. Background pode ser usado para definir os valores para um ou mais dos seguintes: `background-clip`, `background-color`, `background-image` (en-US), `background-origin`, `background-position` (en-US) , `background-repeat` (en-US), `background-size` e `background-attachment`.

O `fundo` CSS propriedade estenográfica atribui valores dados explícitos e conjuntos de propriedades para seus valores iniciais em falta.

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `background-image` (en-US): `none`
* `background-position` (en-US): `0% 0%`
* `background-size`: `auto auto`
* `background-repeat` (en-US): `repeat`
* `background-origin`: `padding-box`
* `background-clip`: `border-box`
* `background-attachment`: `scroll`
* `background-color`: `transparent`
 |
| Aplica-se a | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | não |
| Percentages | as each of the properties of the shorthand:* `background-position` (en-US): refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
* `background-size`: relative to the background positioning area
 |
| Computed value | as each of the properties of the shorthand:* `background-image` (en-US): as specified, but with `url` (en-US) values made absolute
* `background-position` (en-US): as each of the properties of the shorthand:
    + `background-position-x` (en-US): A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
    + `background-position-y` (en-US): A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
* `background-size`: as specified, but with relative lengths converted into absolute lengths
* `background-repeat` (en-US): a list, each item consisting of two keywords, one per dimension
* `background-origin`: as specified
* `background-clip`: as specified
* `background-attachment`: as specified
* `background-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `background-color`: a color
* `background-image` (en-US): discrete
* `background-clip`: a repeatable list
* `background-position` (en-US): a repeatable list
* `background-size`: a repeatable list
* `background-repeat` (en-US): discrete
* `background-attachment`: discrete
 |

Sintaxe
-------

```css
/ * Usando uma <cor-de-fundo> * /
background: green;

/ * Usando uma <imagem-de-fundo> e <estilo-de-repetição> * /
background: url("test.jpg") repeat-y;

/ * Usando uma <box> e <cor-de-fundo> * /
background: border-box red;

/ * Uma única imagem, centrado e escalado * /
background: no-repeat center/80% url( "../img/image.png");
```

**Nota:** O `background-color` só pode ser definido no último fundo, como há apenas uma cor de fundo para todo o elemento.

### Valores

Um ou mais dos seguintes, por qualquer ordem:

`<anexo>`

Veja `background-attachment`

`<box>`

Veja `background-clip`

`<cor-de-fundo>`

Veja `background-color`

`<imagem-de-fundo>`

Veja `background-image` (en-US)

`<posição>`

Veja `background-position` (en-US)

`<estilo-de-repetição>`

Veja `background-repeat` (en-US)

`<tamanho-do-fundo>`

Veja `background-size`. Esta propriedade deve ser especificado após **<posição>** , separados com o caractere '/'.

### Sintaxe formal
```

```
background =
  <bg-layer># (en-US)? (en-US) , <final-bg-layer>

<bg-layer> =
  <bg-image>                      || (en-US)
  <bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US)  || (en-US)
  <repeat-style>                  || (en-US)
  <attachment>                    || (en-US)
  <visual-box>                    || (en-US)
  <visual-box>

<final-bg-layer> =
  <bg-image>                      || (en-US)
  <bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US)  || (en-US)
  <repeat-style>                  || (en-US)
  <attachment>                    || (en-US)
  <visual-box>                    || (en-US)
  <visual-box>                    || (en-US)
  <'background-color'>

<bg-image> =
  <image>  | (en-US)
  none

<bg-position> =
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) <length-percentage> ] (en-US)  | (en-US)
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US)  | (en-US)
  [ (en-US) center | (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage>? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage>? (en-US) ] (en-US)

<bg-size> =
  [ (en-US) <length-percentage [0,∞]> | (en-US) auto ] (en-US){1,2} (en-US)  | (en-US)
  cover                                      | (en-US)
  contain

<repeat-style> =
  repeat-x                                     | (en-US)
  repeat-y                                     | (en-US)
  [ (en-US) repeat | (en-US) space | (en-US) round | (en-US) no-repeat ] (en-US){1,2} (en-US)

<attachment> =
  scroll  | (en-US)
  fixed   | (en-US)
  local

<visual-box> =
  content-box  | (en-US)
  padding-box  | (en-US)
  border-box

<image> =
  <url>       | (en-US)
  <gradient> (en-US)

<length-percentage> =
  <length> (en-US)      | (en-US)
  <percentage> (en-US)

<url> =
  <url()>  | (en-US)
  <src()>

<url()> =
  url( <string> (en-US) <url-modifier>\* (en-US) )  | (en-US)
  <url-token>

<src()> =
  src( <string> (en-US) <url-modifier>\* (en-US) )

```

```
Exemplos
--------

### HTML

```html
<p class="Topbanner">
  céu estrelado<br />
  Cintilando Cintilando<br />
  Céu estrelado
</p>
<p class="atencao">Este é um parágrafo</p>
<p></p>
```

### CSS

```css
.atencao {
  background: red;
}

.Topbanner {
  background: url("starsolid.gif") #00d repeat-y fixed;
}
```

### Resultado

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background |

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

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

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

* `- moz-fundo-inline-política`
* Usando gradientes (en-US)
* Vários fundos


Seletores de ID - CSS

Seletores de ID
===============

Em um documento HTML, os seletores de ID do CSS selecionam um elemento baseado no conteúdo de seu atributo `ID`, o qual deve ser exatamente igual ao valor dado ao seletor.

Sintaxe
-------
```

#valor_id { propriedades de estilo }
```

Note que isso é equivalente aos seguintes `seletores de atributo`:
```

[id=valor_id] { propriedades de estilo }
```

Exemplo
-------

```css
span#identificado {
  background-color: DodgerBlue;
}
```

```html
<span id="identificado">Aqui um span com um pouco de texto.</span>
<span>Aqui outro.</span>
```

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

| Specification |
| --- |
| Selectors Level 4 # id-selectors |

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

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


Utilizando propriedades CSS personalizadas (variáveis) - CSS

Utilizando propriedades CSS personalizadas (variáveis)
======================================================

**Propriedades personalizadas** (às vezes chamadas de **variáveis CSS** ou **variáveis em cascata**) são entidades definidas por autores CSS que contêm valores específicos a serem reutilizados em um documento. Eles são definidos usando a notação de propriedade personalizada (por exemplo, **`--main-color: black;`**) e são acessados usando a função `var()` (por exemplo, `cor: var(--main-color);`).

Sites complexos têm quantidades muito grandes de CSS, geralmente com muitos valores repetidos. Por exemplo, a mesma cor pode ser usada em centenas de lugares diferentes, exigindo pesquisa global e substituição se essa cor precisar ser alterada. As propriedades personalizadas permitem que um valor seja armazenado em um local e, em seguida, referenciado em vários outros locais. Um benefício adicional são os identificadores semânticos. Por exemplo, `--main-text-color` é mais fácil de entender do que `#00ff00`, especialmente se esta mesma cor também for usada em outros contextos.

As propriedades personalizadas estão sujeitas à cascata e herdam seu valor de seu pai.

Uso básico
----------

A declaração de uma propriedade personalizada é feita usando um nome de propriedade personalizada que começa com um hífen duplo (`--`) e um valor de propriedade que pode ser qualquer valor CSS válido. Como qualquer outra propriedade, isso é escrito dentro de um conjunto de regras, assim:

```css
element {
  --main-bg-color: brown;
}
```

Observe que o seletor fornecido ao conjunto de regras define o escopo no qual a propriedade personalizada pode ser usada. Uma prática recomendada comum é definir propriedades personalizadas na pseudoclasse `:root`, para que ela possa ser aplicado globalmente em seu documento HTML:

```css
:root {
  --main-bg-color: brown;
}
```

No entanto, isso nem sempre precisa ser o caso: talvez você tenha um bom motivo para limitar o escopo de suas propriedades personalizadas.

**Nota:** Os nomes das propriedades personalizadas diferenciam maiúsculas de minúsculas — `--my-color` será tratado como uma propriedade personalizada separada de `--My-color`.

Conforme mencionado anteriormente, você usa o valor da propriedade personalizada especificando o nome da propriedade personalizada dentro da função `var()`, no lugar de um valor de propriedade regular:

```css
element {
  background-color: var(--main-bg-color);
}
```

Primeiros passos com propriedades personalizadas
------------------------------------------------

Vamos começar com este CSS que aplica a mesma cor a elementos de classes diferentes:

```css
.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}
```

Vamos aplicá-lo a este HTML:

```html
<div>
  <div class="one">1:</div>
  <div class="two">2: Texto <span class="five">5 - mais texto</span></div>
  <input class="three" />
  <textarea class="four">4: Lorem Ipsum</textarea>
</div>
```

Isso produz o seguinte resultado:

Usando a pseudo-classe :root
----------------------------

Observe o CSS repetitivo no exemplo acima. A cor de fundo é definida como 'marrom' em vários lugares. Para algumas declarações CSS, é possível declarar isso mais alto na cascata e deixar que a herança CSS resolva esse problema naturalmente. Para projetos não triviais, isso nem sempre é possível. Ao declarar uma propriedade personalizada na pseudoclasse `:root` e usá-la quando necessário em todo o documento, um autor de CSS pode reduzir a necessidade de repetição:

```css
:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color: var(--main-bg-color);
}
```

```
<div>
  <div class="one"></div>
  <div class="two">Texto <span class="five">- mais texto</span></div>
  <input class="three" />
  <textarea class="four">Lorem Ipsum</textarea>
</div>
```

Isso leva ao mesmo resultado do exemplo anterior, mas permite uma declaração canônica do valor da propriedade desejada; muito útil se você quiser alterar o valor em toda a página posteriormente.

Herança de propriedades personalizadas
--------------------------------------

As propriedades personalizadas são herdadas. Isso significa que, se nenhum valor for definido para uma propriedade personalizada em um determinado elemento, o valor de seu pai será usado. Pegue este HTML:

```html
<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>
```

… com o seguinte CSS:

```css
.two {
  --test: 10px;
}

.three {
  --test: 2em;
}
```

Neste caso, os resultados de `var(--test)` são:

* Para o elemento `class="two"`: `10px`
* Para o elemento `class="three"`: `2em`
* Para o elemento `class="four"`: `10px` (herdado de seu pai)
* Para o elemento `class="one"`: *invalid value*, que é o valor padrão de qualquer propriedade personalizada

Lembre-se de que essas são propriedades personalizadas, não variáveis reais, como você pode encontrar em outras linguagens de programação. O valor é calculado onde é necessário, não armazenado para uso em outras regras. Por exemplo, você não pode definir uma propriedade para um elemento e esperar recuperá-la na regra do descendente de um irmão. A propriedade é definida apenas para o seletor correspondente e seus descendentes, como qualquer CSS normal.

Valores alternativos de propriedade personalizada
-------------------------------------------------

Usando a função `var()`, você pode definir vários **valores alternativos** quando a variável dada ainda não está definida; isso pode ser útil ao trabalhar com Elementos personalizados e Shadow DOM (en-US).

**Nota:** os valores alternativos não são usados para corrigir a compatibilidade do navegador. Se o navegador não oferecer suporte a propriedades personalizadas de CSS, o valor de fallback não ajudará. É apenas um backup para o navegador que suporta propriedades personalizadas CSS para escolher um valor diferente se a variável fornecida não estiver definida ou tiver um valor inválido.

O primeiro argumento para a função é o nome da propriedade personalizada a ser substituída. O segundo argumento para a função, se fornecido, é um valor de fallback, que é usado como valor de substituição quando a propriedade personalizada referenciada é inválido. A função aceita apenas dois parâmetros, atribuindo tudo o que segue a primeira vírgula como segundo parâmetro. Se esse segundo parâmetro for inválido, o fallback falhará. Por exemplo:

```css
.two {
  /\* Vermelho se --my-var não estiver definido \*/
  color: var(--my-var, red);
}

.three {
  /\* rosa se --my-var e --my-background não estiverem definidos \*/
  background-color: var(--my-var, var(--my-background, pink));
}

.three {
  /\* Inválido: "--meu-fundo, rosa" \*/
  background-color: var(--my-var, --my-background, pink);
}
```

Incluir uma propriedade personalizada como fallback, conforme visto no segundo exemplo acima, é a maneira correta de fornecer mais de um fallback. A técnica pode causar problemas de desempenho, pois leva mais tempo para analisar as variáveis.

**Nota:** A sintaxe do fallback, como a de propriedades personalizadas, permite vírgulas. Por exemplo, `var(--foo, red, blue)` define um fallback de `red, blue` — qualquer coisa entre a primeira vírgula e o final da função é considerado um valor fallback.

Tratamento de propriedades personalizadas inválidas
---------------------------------------------------

Cada propriedade CSS pode receber um conjunto definido de valores. Se você tentar atribuir um valor a uma propriedade que está fora de seu conjunto de valores válidos, ela será considerada *inválida*.

Quando o navegador encontra um valor inválido para uma propriedade normal, ele descarta o valor e os elementos recebem os valores que teriam se a declaração simplesmente não existisse.

No entanto, quando os valores das propriedades personalizadas são analisados, o navegador ainda não sabe onde eles serão usados, portanto, deve considerar quase todos os valores como *válidos*.

Infelizmente, esses valores válidos podem ser usados, através da notação funcional `var()`, em um contexto onde eles podem não fazer sentido. Propriedades e variáveis personalizadas podem levar a declarações CSS inválidas, levando ao novo conceito de *válido no tempo computado.*

Quando o navegador encontra uma substituição `var()` inválida, então o inicial ou herdado valor da propriedade é usado.

Os próximos dois exemplos ilustram isso.

### Propriedades normais inválidas

Neste exemplo, tentamos aplicar um valor de `16px` à propriedade `color`. Como isso é inválido, o CSS é descartado e o resultado é como se a regra não existisse, então a regra `color: blue` anterior é aplicada em seu lugar e o parágrafo é azul.

#### HTML

```html
<p>Este parágrafo é inicialmente preto.</p>
```

#### CSS

```css
p {
  color: blue;
}

p {
  color: 16px;
}
```

#### Resultado

### Propriedades personalizadas inválidas

Este exemplo é exatamente como o último, exceto que usamos uma propriedade personalizada.

Como esperado, o navegador substitui o valor de `--text-color` no lugar de `var(--text-color)`, mas `16px` não é um valor de propriedade válido para `color`. Após a substituição, a propriedade não faz mais sentido. O navegador lida com essa situação em duas etapas:

1. Verifique se a propriedade `color` é herdável. É, mas este `<p>` não tem nenhum pai com a propriedade `color` definida. Então passamos para a próxima etapa.
2. Defina o valor para seu **valor inicial padrão**, que é preto.

#### HTML

```html
<p>Este parágrafo é inicialmente preto.</p>
```

#### CSS

```css
:root {
  --text-color: 16px;
}

p {
  color: blue;
}

p {
  color: var(--text-color);
}
```

#### Resultado

Valores em JavaScript
---------------------

Para usar os valores das propriedades personalizadas em JavaScript, é como as propriedades padrão.

```js
// obtém a variável do estilo inline
element.style.getPropertyValue("--my-var");

// obtém variável de qualquer lugar
getComputedStyle(element).getPropertyValue("--my-var");

// define a variável no estilo inline
element.style.setProperty("--my-var", jsVar + 4);
```

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

* Sintaxe de propriedade personalizada
* `var()`


:nth-child() - CSS

:nth-child()
============

A pseudo-classe CSS `:nth-child()` seleciona elementos com base em suas posições em um grupo de elementos irmãos.

```css
/\* Seleciona um a cada quatro elementos
 de qualquer grupo de elementos irmãos,
 começando do quarto elemento (4, 8 12, etc.). \*/
:nth-child(4n) {
  color: lime;
}
```

Sintaxe
-------

A pseudo-classe **`nth-child`** é usada com apenas um argumento, que representa o padrão usado para selecionar os elementos.

### Valores

`odd`

Representa elementos cuja posição numérica em uma série de irmãos seja ímpar: 1, 3, 5, etc.

`even`

Representa elementos cuja posição numérica em uma série de irmãos seja par: 2, 4, 6, etc.

### Notação funcional

`<An+B>`

Representa elementos cuja posição numérica em uma série de irmãos corresponda ao padrão `An+B`, o qual será aplicado a todo número maior ou igual a zero (ou seja, começando do zero). O índice do primeiro elemento é `1`. Ambos os valores `A` e `B` devem ser `<integer>` (en-US) (inteiros).

### Sintaxe formal

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

### Exemplos de seletores

`tr:nth-child(odd)` or `tr:nth-child(2n+1)`

Representa as linhas ímpares de uma tabela HTML: 1, 3, 5, etc.

`tr:nth-child(even)` or `tr:nth-child(2n)`

Representa as linhas pares de uma tabela HTML: 2, 4, 6, etc.

`:nth-child(7)`

Representa o sétimo elemento.

`:nth-child(5n)`

Representa os elementos de número **5** [=5×1], **10** [=5×2], **15** [=5×3], **etc.**

`:nth-child(3n+4)`

Representa os elementos de número **4** [=(3×0)+4], **7** [=(3×1)+4], **10** [=(3×2)+4], **13** [=(3×3)+4], **etc.**

`:nth-child(-n+3)`

Representa os primeiros três elementos. [=-0+3, -1+3, -2+3]

`p:nth-child(n)`

Representa todos os elementos `<p>` em um grupo de irmãos. Isso seleciona os mesmos elementos que um simples seletor `p` faria (só que com um nível maior de especificidade).

`p:nth-child(1)` or `p:nth-child(0n+1)`

Representa todo `<p>` que seja o primeiro de seu grupo de irmãos. Ele é idêntico ao seletor `:first-child` (e tem o mesmo nível de especificidade).

`p:nth-child(n+8):nth-child(-n+15)`

Representa do 8º até o 15º elementos `<p>` de um grupo de irmãos.

### Exemplo detalhado

#### HTML

```html
<h3>
  <code>span:nth-child(2n+1)</code>, SEM um <code><em></code> entre os
  elementos filhos.
</h3>
<p>Os filhos 1, 3, 5 e 7 são selecionados.</p>
<div class="primeiro">
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br />

<h3>
  <code>span:nth-child(2n+1)</code>, COM um <code><em></code> entre os
  elementos filhos.
</h3>
<p>
  Os filhos 1, 5 e 7 são selecionados.<br />
  O 3 está incluído na contagem por ser um filho, mas não é selecionado porque
  ele não é um <code><span></code>.
</p>
<div class="segundo">
  <span>Span!</span>
  <span>Span</span>
  <em>Este é um `em`.</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br />

<h3>
  <code>span:nth-of-type(2n+1)</code>, COM um <code><em></code> entre os
  elementos filhos.
</h3>
<p>
  Os filhos 1, 4, 6 e 8 são selecionados.<br />
  O 3 não está incluso na contagem nem é selecionado porque ele é um
  <code><em></code>, não um <code><span></code>, e
  <code>nth-of-type</code> seleciona apenas os filhos desse último tipo. O
  <code><em></code> é completamente pulado e ignorado.
</p>
<div class="terceiro">
  <span>Span!</span>
  <span>Span</span>
  <em>Este é um `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>
```

#### CSS

```css
html {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

.primeiro span:nth-child(2n + 1),
.segundo span:nth-child(2n + 1),
.terceiro span:nth-of-type(2n + 1) {
  background-color: lime;
}
```

#### Resultado

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

| Specification |
| --- |
| Selectors Level 4 # nth-child-pseudo |

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

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

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

* `:nth-of-type`, `:nth-last-child`


object-fit - CSS

object-fit
==========

Resumo
------

A propriedade CSS `object-fit` especifica como o conteúdo de um elemento substituído deve ser ajustado à caixa estabelecida pela altura e largura usadas.

|  |  |
| --- | --- |
| Initial value | `fill` |
| Aplica-se a | replaced elements |
| Inherited | não |
| Computed value | as specified |
| Animation type | discrete |

Syntax
------
```

object-fit =
  fill        | (en-US)
  contain     | (en-US)
  cover       | (en-US)
  none        | (en-US)
  scale-down

```

```
object-fit: fill
object-fit: contain
object-fit: cover
object-fit: none
object-fit: scale-down
```

### Valores

`fill`

O conteúdo substituído é dimensionado para preencher a caixa de conteúdo do elemento: o tamanho concreto do objeto é a largura e a altura usadas do elemento.

`contain`

O conteúdo substituído é dimensionado para manter sua proporção enquanto se encaixa na caixa de conteúdo do elemento: seu tamanho de objeto concreto é resolvido como uma restrição de restrição em relação à largura e altura usadas do elemento.

`cover`

O conteúdo substituído é dimensionado para manter sua proporção e preencher toda a caixa de conteúdo do elemento: seu tamanho de objeto concreto é resolvido como uma restrição de capa contra a largura e a altura usadas do elemento.

`none`

O conteúdo substituído não é redimensionado para caber dentro da caixa de conteúdo do elemento: o tamanho do objeto concreto do objeto é determinado usando o algoritmo de tamanho padrão sem tamanho especificado e um tamanho de objeto padrão igual à largura e altura usadas do elemento substituído.

`scale-down`

O conteúdo é dimensionado se `none` ou `contain` for especificado, o que resultaria em um tamanho menor de objeto concreto.

Exemplos
--------

### HTML Content

```html
<div>
  <h2>object-fit: fill</h2>
  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="fill" />

  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="fill narrow" />

  <h2>object-fit: contain</h2>
  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="contain" />

  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="contain narrow" />

  <h2>object-fit: cover</h2>
  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="cover" />

  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="cover narrow" />

  <h2>object-fit: none</h2>
  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="none" />

  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="none narrow" />

  <h2>object-fit: scale-down</h2>
  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="scale-down" />

  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="scale-down narrow" />
</div>
```

### CSS Content

```css
h2 {
  font-family:
    Courier New,
    monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 940px;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
}

.narrow {
  width: 100px;
  height: 150px;
  margin-top: 10px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}
```

### Output

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

| Specification |
| --- |
| CSS Images Module Level 3 # the-object-fit |

Browser compatibility
---------------------

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

See also
--------

* Other image-related CSS properties: `object-position` (en-US), `image-orientation` (en-US), `image-rendering` (en-US), `image-resolution` (en-US).
* An object-fit polyfill for browsers not supporting it.


transition-delay - CSS

transition-delay
================

A propriedade CSS **`transition-delay`** (atraso de transição) determina o tempo de duração da espera antes de iniciar um efeito de transição(transition effect) quando seu valor muda.

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

Essa espera, ou atraso de transição, pode ser zero, positiva ou negativa:

* Um valor de `0s`(ou `0ms`) iniciará o efeito de transição imediatamente.
* Um valor positivo atrasará o inicio do efeito de transição de acordo com o tempo estabelecido.
* Um valor negativo iniciará o efeito de transição imediatamente e parcialmente durante o efeito. Em outras palavras, o efeito será animado como se já tivesse sido executado pelo tempo estipulado.

Você pode especificar vários atrasos, o que é útil quando é necessário realizar a transição de várias propriedades. Cada atraso pode ser aplicado à propriedade correspondente como especificado pela propriedade de transição(`transition-property` (en-US)), que atua como uma lista mestre. Se existem menos atrasos do que o determinado pela lista mestre, a lista de valores de atraso será repetida até que seja suficiente. Se existem mais atrasos, a lista de valores de atraso será trucanda(limitada) ao combinar o número de propriedades. Em ambos os casos, a declaração CSS permacene válida.

Syntax
------

```css
/\* Valores de Tempo <time> \*/
transition-delay: 3s;
transition-delay: 2s, 4ms;

/\* Valores Globais \*/
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;
```

### Valores

`<time>`

Indica a quantidade de tempo de espera entre um valor de propriedade e o inicio do efeito de transição(transition effect).

### Sintaxe Formal
```

transition-delay =
  <time># (en-US)

```

Exemplos
--------

`transition-delay: 0.5s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 0.5s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-delay: 0.5s;
  transition-timing-function: linear;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 0.5s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-delay: 0.5s;
  transition-timing-function: linear;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-delay: 1s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 1s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-delay: 1s;
  transition-timing-function: linear;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 1s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-delay: 1s;
  transition-timing-function: linear;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-delay: 2s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 2s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-delay: 2s;
  transition-timing-function: linear;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 2s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-delay: 2s;
  transition-timing-function: linear;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-delay: 4s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-delay: 4s;
  transition-timing-function: ease-in-out;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-delay: 4s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

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

| Specification |
| --- |
| CSS Transitions # transition-delay-property |

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

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

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

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

* Usando Transições CSS
* `TransitionEvent` (en-US) API


line-break - CSS

line-break
==========

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

A propriedade CSS **`line-break`** é usada para especificar como (ou se) quebrar linhas.

Sintaxe
-------

```css
/\* Keyword values \*/
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;

/\* Valores Globais \*/
line-break: inherit;
line-break: initial;
line-break: unset;
```

### Valores

`auto`

quebra o texto usando a regra padrão de quebra de linha.

`loose`

quebra o texto usando a regra de quebra de linha que é mais curta, como um jornal.

`normal`

quebra o texto usando a regra padrão de quebra de linha.

`strict`

quebra o texto usando uma regra rigorosa para a quebra de linha.

### Sintaxe formal
```

line-break =
  auto      | (en-US)
  loose     | (en-US)
  normal    | (en-US)
  strict    | (en-US)
  anywhere

```

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

| Specification |
| --- |
| CSS Text Module Level 3 # line-break-property |

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

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

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


Pseudo-elementos - CSS

Pseudo-elementos
================

Um **pseudo-elemento** CSS é uma palavra-chave adicionada a um seletor que permite que você estilize uma parte específica do elemento selecionado. Por exemplo, o pseudo-elemento `::first-line` aplica o estilo apenas na primeira linha de um parágrafo.

```css
/\* A primeira linha de todo elemento <p>. \*/
p::first-line {
  color: blue;
  text-transform: uppercase;
}
```

**Nota:** Diferentemente dos pseudo-elementos, `pseudo-classes` podem ser utilizadas para estilizar um elemento baseado em seu *estado*.

Sintaxe
-------
```

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

Você pode utilizar apenas um pseudo-elemento em um seletor. Ele deve aparecer depois da declaração de um elemento simples.

**Nota:** Como regra, os dois pontos devem ser usados duas vezes (`::`) ao invés de uma única vez (`:`). Isso distingue pseudo-classes de pseudo-elementos. Apesar disso, devido a essa distinção não estar presente em versões mais antigas da especificação da W3C, a maioria dos navegadores suportam ambas as sintaxes para os pseudo-elementos originais.

Índice de pseudo-elementos comuns
---------------------------------

* `::after`
* `::before`
* `::cue` (en-US)
* `::first-letter`
* `::first-line`
* `::selection`
* `::slotted` (en-US)
* `::backdrop`
Experimental
* `::placeholder` (en-US)
Experimental
* `::marker` (en-US)
Experimental
* `::spelling-error` (en-US)
Experimental
* `::grammar-error` (en-US)
Experimental

| Navegador | Versão mais baixa | Suporte de |
| --- | --- | --- |
| Internet Explorer | 8.0 | `:pseudo-element` |
| 9.0 | `:pseudo-element ::pseudo-element` |
| Firefox (Gecko) | 1.0 (1.0) | `:pseudo-element` |
| 1.0 (1.5) | `:pseudo-element ::pseudo-element` |
| Opera | 4.0 | `:pseudo-element` |
| 7.0 | `:pseudo-element ::pseudo-element` |
| Safari (WebKit) | 1.0 (85) | `:pseudo-element ::pseudo-element` |

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

* pseudo-classes


CSS Flexible Box Layout - CSS

CSS Flexible Box Layout
=======================

**CSS Flexible Box Layout** é um módulo do CSS que define um layout multicoluna otimizado para o design de interfaces de usuário, para isso busca lidar com o layout dos itens de maneira unidimensional. No modelo de layout do Flexbox, os filhos de um contêiner flex podem ser dispostos em qualquer direção, e podem "flexibilizar" seus tamanhos, crescendo para preencher o espaço vazio ou diminuindo para evitar o transbordamento do elemento pai. O alinhamento horizontal e vertical dos filhos podem ser facilmente manipulados.

Exemplo Básico
--------------

No exemplo a seguir um contêiner foi definido como `display: flex`, o que significa que os três items filhos dele se tornaram flex. O valor de `justify-content` foi definido como `space-between` para espaçar os itens uniformemente no eixo principal. Uma quantidade igual de espaço é colocada entre cada item com a esquerda e direita dos itens sendo niveladas com as bordas do contêiner flex. Você também pode perceber que os items estão alongados no eixo transversal, isso acontece por causa do valor padrão de `align-items` ser `stretch`(esticar). Os itens se estendem até a altura do contêiner flex, fazendo com que eles sejam tão altos quanto o item mais alto.

Referência
----------

### Propriedades CSS

* `flex`
* `flex-basis` (en-US)
* `flex-direction`
* `flex-flow`
* `flex-grow` (en-US)
* `flex-shrink` (en-US)
* `flex-wrap`
* `order` (en-US)
### Propriedades de Alinhamento

A propriedade `align-content`, `align-self`, `align-items` e `justify-content` apareceram inicialmente na especificação do Flexbox, mas agora estão definidas em Box Alignment. As especificações do Flexbox agora referência a especificação do Box Alignment para definições atualizadas. Propriedades de alinhamento adicional agora também são definidas em Box Alignment.

* `justify-content` (en-US)
* `align-content`
* `align-items`
* `align-self`
* `place-content` (en-US)
* `place-items` (en-US)
* `row-gap` (en-US)
* `column-gap` (en-US)
* `gap`
### Entradas do glossário

* Flexbox
* Flex Container (en-US)
* Flex Item (en-US)
* Main Axis (en-US)
* Cross Axis (en-US)
* Flex
Guia
----

Conceitos básicos de flexbox

Uma visão geral sobre as funcionalidades do Flexbox

Relação entre o Flexbox e os outros métodos de layout (en-US)

Como o Flexbox está relacionado aos outros métodos de layout, e outras especificações CSS

Alinhando itens em um contêiner flex

Como as propriedades Box Alignment trabalham com Flexbox.

Ordenando itens flex (en-US)

Explicando as diferentes formas de mudar a order e direção dos itens, e cobrindo os possíveis problemas em fazer isso.

Proporções de Controle de itens flex ao longo do eixo principal (en-US)

Explicando as propriedades flex-grow, flex-shrink e flex-basis.

Dominando a embalagem de itens flex (en-US)

Como criar contêiners flex com múltiplas linhas e controlar a exibição dos itens nessas linhas.

Casos típicos de uso do Flexbox (en-US)

Padrão de projeto comuns que são casos de uso típicos do Flexbox.

Retrocompatibilidade do Flexbox (en-US)

Status do Flexbox nos browsers, problemas de interoperabilidade e suporte para browsers antigos e versões das especificações

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

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1  |

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

Flexbugs

Uma lista curada pela comunidade de bugs do Flexbox nos navegadores e soluções alternativas


block-size - CSS

block-size
==========

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

A propriedade CSS **`block-size`** define o tamanho horizontal ou vertical de um elemento bloco. Corresponde à propriedade `width` ou `height`, dependendo do valor do `writing-mode`.

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

Sintaxe
-------

```css
/\* valores <length> \*/
block-size: 300px;
block-size: 25em;

/\* valores <percentage> \*/
block-size: 75%;

/\* valores de Keyword \*/
block-size: 25em border-box;
block-size: 75% content-box;
block-size: max-content;
block-size: min-content;
block-size: available;
block-size: fit-content;
block-size: auto;

/\* valores globais \*/
block-size: inherit;
block-size: initial;
block-size: unset;
```

Se o modo de escrita está orientado verticalmente, o valor do `block-size` refere-se à largura do elemento; senão, refere-se à altura do elemento. Uma propriedade relacionada é `inline-size`, que define as outras dimensões do elemento.

|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | same as `width` and `height` |
| Inherited | não |
| Percentages | block-size of containing block |
| Computed value | same as `width` and `height` |
| Animation type | a length, percentage or calc(); |

Sintaxe
-------

### Valores

A propriedade `block-size` leva os mesmos valores que as propriedades `width` e `height`.

### Sintaxe formal
```

block-size =
  <'width'>

```

Exemplo
-------

### HTML

```html
<p class="exampleText">Example text</p>
```

### CSS

```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 200px;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # dimension-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

See also
--------

* As propriedades: `width` and `height`
* `writing-mode`


Propriedades personalizadas (--*) - CSS

Propriedades personalizadas (--\*)
==================================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

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

Nomes de propriedades com o prefixo `--`, como `--example-name`, representam *Propriedade personalizadas* que contém um valor que pode ser reutilizado por todo o documento usando a função (`var()`).

Propriedades personalizadas participam na cascata: cada uma delas pode aparecer várias vezes e o valor da variável corresponderá ao valor definido na propriedade personalizada, decidido pelo algoritmo de cascata.

|  |  |
| --- | --- |
| Initial value | see prose |
| Aplica-se a | all elements |
| Inherited | yes |
| Computed value | as specified with variables substituted |
| Animation type | discrete |

Sintaxe
-------

```css
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
```

`<declaration-value>`

Este valor corresponde a qualquer sequência de um ou mais tokens, desde que a sequência não contenha tokens não permitidos. Representa a totalidade do que uma declaração válida pode ter como valor.

### Sintaxe formal

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

### HTML

```html
<p id="firstParagraph">
  Este parágrafo deve ter um fundo azul e um texto amarelo.
</p>
<p id="secondParagraph">
  Este parágrafo deve ter um fundo amarelo e um texto azul.
</p>
<div id="container">
  <p id="thirdParagraph">
    Este parágrafo deve ter um fundo verde e um texto amarelo.
  </p>
</div>
```

### CSS

```css
:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #48ff32;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}
```

### Resultado

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

| Specification |
| --- |
| CSS Custom Properties for Cascading Variables Module Level 1 # defining-variables |

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

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

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

* Utilizando variáveis CSS


:target - CSS

:target
=======

A pseudo-classe CSS **`:target`** representa um único elemento (o elemento alvo) com uma `id` correspondente ao fragmento da URL.

```css
/\* Seleciona um elemento com a ID correspondente ao fragmento da URL \*/
:target {
  border: 2px solid black;
}
```

Por exemplo, a seguinte URL tem um fragmento (denotado pelo sinal de *#*) que aponta para o elemento chamado `section2`:
```

http://www.example.com/index.html#section2
```

O seguinte elemento será selecionado pelo seletor `:target` quando a URL for igual acima:

```html
<section id="section2">Exemplo</section>
```

Sintaxe
-------

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

### Índice

A pseudo-classe `:target` pode ser usada para destacar uma parte da página que foi vinculada a partir de um índice.

#### HTML

```html
<h3>Índice</h3>
<ol>
  <li><a href="#p1">Ir para o primeiro parágrafo!</a></li>
  <li><a href="#p2">Ir para o segundo parágrafo!</a></li>
  <li>
    <a href="#vazio"
 >Esse link não vai pra lugar nenhum, pois, o alvo não existe</a
 >
  </li>
</ol>

<h3>Meu artigo divertido</h3>
<p id="p1">
  Você pode definir <i>este parágrafo</i> como alvo usando um fragmento de URL.
  Clique no link acima para experimentar!
</p>
<p id="p2">
  Esse é <i>outro parágrafo</i>, também acessável pelos links acima. Não é
  incrível?
</p>
```

#### CSS

```css
p:target {
  background-color: gold;
}

/\* Adicione o pseudo-elemento dentro do elemento alvo \*/
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/\* Estilize nos elementos em itálico dentro do elemento alvo \*/
p:target i {
  color: red;
}
```

#### Resultado

### Lightbox com CSS puro

Você pode usar a pseudo-classe `:target` para criar uma lightbox sem usar JavaScript. Essa técnica requer que os links apontem para os elementos que inicialmente estavam escondidas na página. Uma vez designado, o CSS muda o `display` então, assim o conteúdo pode ser mostrado.

**Nota:** Uma lightbox com CSS puro mais completo usando a pseudo-classe `:target` está disponível no GitHub (demo).

#### HTML

```html
<ul>
  <li><a href="#example1">Abrir exemplo #1</a></li>
  <li><a href="#example2">Abrir exemplo #2</a></li>
</ul>

<div class="lightbox" id="example1">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim,
      placerat id eleifend eu, semper vel sem.
    </figcaption>
  </figure>
</div>

<div class="lightbox" id="example2">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>
      Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam
      quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna.
    </figcaption>
  </figure>
</div>
```

#### CSS

```css
/\* Lightbox fechado \*/
.lightbox {
  display: none;
}

/\* Lightbox aberto \*/
.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/\* Conteúdo da lightbox \*/
.lightbox figcaption {
  width: 25rem;
  position: relative;
  padding: 1.5em;
  background-color: lightpink;
}

/\* Botão fechar \*/
.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
}

/\* Lightbox overlay \*/
.lightbox .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.7);
  content: "";
  cursor: default;
}
```

#### Resultado

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

| Specification |
| --- |
| HTML Standard # selector-target |
| Selectors Level 4 # the-target-pseudo |

Navegadores compatíveis
-----------------------

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

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

* Usando a pseudo-classe :target em seletores.


outline - CSS

outline
=======

Sumário
-------

A propriedade CSS **`outline`** é uma propriedade abreviada para configurar uma ou mais das propriedades de contorno `outline-style` (en-US), `outline-width` (en-US) e `outline-color` (en-US) em uma única declaração. Na maioria dos casos o uso abreviado é preferível e mais conveniente.

Contornos se diferenciam de bordas das seguintes maneiras:

* Contornos não ocupam espaços, eles são desenhados acima do conteúdo.
* Contornos podem não ser retangulares. Eles são retangulares no Gecko/Firefox. Mas por exemplo, Opera desenha uma forma não retangular em torno de uma construção como este:
 **TEXTTEXTTEXT**

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `outline-color` (en-US): `auto`
* `outline-style` (en-US): `none`
* `outline-width` (en-US): `medium`
 |
| Aplica-se a | all elements |
| Inherited | não |
| Computed value | as each of the properties of the shorthand:* `outline-color` (en-US): For the keyword `auto`, the computed value is `currentcolor`. For the color value, if the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`.
* `outline-width` (en-US): an absolute length; if the keyword `none` is specified, the computed value is `0`
* `outline-style` (en-US): as specified
 |
| Animation type | as each of the properties of the shorthand:* `outline-color` (en-US): a color
* `outline-width` (en-US): a length
* `outline-style` (en-US): by computed value type
 |

Sintaxe
-------

```css
/\* largura | estilo | cor \*/
outline: 1px solid white;

/\* Valores globais \*/
outline: inherit;
outline: initial;
outline: unset;
```

### Valores

Um, dois ou três valores, dada em ordem arbitrária:

`<'outline-width'>`

Veja `outline-width` (en-US).

`<'outline-style'>`

Veja `outline-style` (en-US).

`<'outline-color'>`

Desde Gecko 1.9 (Firefox 3), o valor da propriedade `color` (cor de primeiro plano) é usado. Veja `outline-color` (en-US).

### Sintaxe completa
```

outline =
  <'outline-color'>  || (en-US)
  <'outline-style'>  || (en-US)
  <'outline-width'>

```

Exemplos
--------

```css
/\* duas declarações identicas \*/

:link:hover {
  outline: 1px solid #000;
}
:link:hover {
  outline: solid black 1px;
}
```

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline |

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

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


text-rendering - CSS

text-rendering
==============

Sumário
-------

A propriedade CSS `text-rendering` provê informações para o mecanismo de renderização sobre o que otimizar no momento em que ele renderiza texto. O navegador faz escolhas entre velocidade, legibilidade e precisão geométrica. A propriedade `text-rendering` é uma propriedade SVG que não é definida em nenhum padrão CSS. Porém, navegadores Gecko e WebKit permitem o uso da propriedade em conteúdos HTML e XML nas plataformas Windows, Mac OS X e Linux.

Um efeito bastante visível é o `optimizeLegibility`, que habilita ligaduras (ff, fi, fl etc.) para algumas fontes com o texto menores que 20px como, por exemplo, fontes da Microsoft (*Calibri, Candara, Constantia* e *Corbel* ou a família de fontes *DejaVu*).

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

Syntax
------
```

text-rendering:  auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit
```

### Valores

`auto`

O navegador faz sugestões de quando otimizar velocidade, legibilidade e precisão geométrica enquando formata o texto. Para diferenças em como esse valor é interpretado pelo navegador, veja a tabela de compatibilidades.

`optimizeSpeed`

O navegador prioriza a velocidade de renderização sobre a legibilidade e precisão geométrica no momento de rederização do texto. Essa opção desabilita o kerning1 e ligatures2.

`optimizeLegibility`

O navegador prioriza legibilidade sobre a velocidade de renderização e precisão geométrica. Essa propriedade habilita o kerning e ligatures opcionais.

`geometricPrecision`

O browser prioriza a precisão geométrica sobre a velocidade de renderização e legibilidade. Alguns aspectos de fontes - tais como kerning - não se escala linearmente e, dessa forma, `geometricPrecision` pode tornar essas fontes visualmente boas.

Em SVG, quando o texto é escalado para cima ou para baixo, os navegadores calculam o tamanho final do texto (que é o tamanho de fonte específicado e a escala aplicada) e requer uma fonte de tamanho computado à partir das fontes do sistema. Mas se você requer um tamanho de fonte de, digamos, 9 com a escala de 140%, o resultado do tamanho da fonte de 12.6 não explicitamente existe no sistema, então o browser ira arredondar o tamanho da fonte para 12.

Mas a propriedade `geometricPrecision` - quando totalmente surpotada pelo mecanismo de renderização - deixa você escalar seu texto fluidamente. Para fatores de larga escala, você pode ver uma renderização de texto não tão bonita, mas com o tamanho esperado - nem arredondado para cima ou para baixo para o mais próximo tamanho suportado pelo sistema Windows ou Linux.

Navegadores WebKit precisamente aplicam o valor específico, mas os navegadores Gecko tratam o esse valor como `optimizeLegibility`.

Exemplos
--------

```css
/\* make sure all fonts in the HTML document display in all its glory,
 but avoid inadequate ligatures in class foo elements \*/

body {
  text-rendering: optimizeLegibility;
}
.foo {
  text-rendering: optimizeSpeed;
}
```

#### Live Example

| CSS code | Kerning | Ligatures |
| --- | --- | --- |
| font: 19.9px 'DejaVu Serif',Constantia; | LYoWAT | ff fi fl ffl |
| font: 20px 'DejaVu Serif',Constantia; | LYoWAT | ff fi fl ffl |
| font: 3em 'DejaVu Serif',Constantia; text-rendering: optimizeSpeed; | LYoWAT | ff fi fl ffl |
| font: 3em 'Dejavu Serif',Constantia; text-rendering: optimizeLegibility; | LYoWAT | ff fi fl ffl |

### Gecko Notes

O valor padrão de 20px para `auto` pode ser alterado na propriedade `browser.display.auto_quality_min_font_size` do navegador.

A opção optimizeSpeed não tem efeito na versão 2.0 do Gecko, devido ao código padrão de renderização de texto que já é muito rápido e não existe até o momento um código mais rápido para esse trabalho. Veja detalhes em Firefox bug 595688.

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # TextRenderingProperty |

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

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


:nth-last-child() - CSS

:nth-last-child()
=================

A pseudo-classe CSS **`:nth-last-child()`** seleciona um ou mais elementos com base em sua posição entre um grupo de elementos-irmãos, contando a partir do último.

```css
/\* Seleciona todo quarto elemento
 em qualquer grupo de irmãos,
 contando do último para o primeiro \*/
:nth-last-child(4n) {
  color: lime;
}
```

**Nota:** Essa pseudo-classe é essencialmente o mesmo que usar `:nth-child`, porém conta os itens de trás para a frente, e não do início para o final.

Sintaxe
-------

A pseudo-classe `nth-last-child` é especificada com um único argumento, que representa o padrão para elementos correspondentes, contando do final.

### Valores chave

`odd`

Representa elementos cuja posição numérica em uma série de irmãos é ímpar: 1, 3, 5, etc., contando do final.

`even`

Representa elementos cuja posição numérica em uma série de irmãos é par: 2, 4, 6, etc., contando do final.

### Notação funcional

`<An+B>`

Representa elementos cuja posição numérica em uma série de irmãos corresponde ao padrão `An+B`, para cada valor de `n` que seja um número inteiro positivo ou zero. O índice do primeiro elemento, contando do final, é `1`. Os valores `A` e `B` devem ambos ser `<integer>` (en-US)s (inteiros).

### Sintaxe formal

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

### Seletores de exemplo

`tr:nth-last-child(odd)` ou `tr:nth-last-child(2n+1)`

Representa as linhas ímpares de uma tabela HTML: 1, 3, 5, etc., contando do final.

`tr:nth-last-child(even)` ou `tr:nth-last-child(2n)`

Representa as linhas pares de uma tabela HTML: 2, 4, 6, etc., contando do final.

`:nth-last-child(7)`

Representa o sétimo elemento, contando do final.

`:nth-last-child(5n)`

Representa elementos 5, 10, 15, etc., contando do final.

`:nth-last-child(3n+4)`

Representa elementos 4, 7, 10, 13, etc., contando do final.

`:nth-last-child(-n+3)`

Representa os últimos três elementos em um grupo de irmãos.

`p:nth-last-child(n)`

Representa cada elemento `<p>` em um grupo de irmãos. Isso é o mesmo que um simples seletor `p`.

`p:nth-last-child(1)` ou `p:nth-last-child(0n+1)`

Representa cada `<p>` que seja o primeiro elemento em um grupo de irmãos, contando do final. Isso é o mesmo que o seletor `:last-child`.

### Exemplo de tabela

#### HTML

```html
<table>
  <tbody>
    <tr>
      <td>Primeira linha</td>
    </tr>
    <tr>
      <td>Segunda linha</td>
    </tr>
    <tr>
      <td>Terceira linha</td>
    </tr>
    <tr>
      <td>Quarta linha</td>
    </tr>
    <tr>
      <td>Quinta linha</td>
    </tr>
  </tbody>
</table>
```

#### CSS

```css
table {
  border: 1px solid blue;
}

/\* Seleciona os últimos três elementos \*/
tr:nth-last-child(-n + 3) {
  background-color: pink;
}
```

#### Resultado

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

| Specification |
| --- |
| Selectors Level 4 # nth-last-child-pseudo |

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

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

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

* `:nth-child`, `:nth-last-of-type` (en-US)


gap - CSS

gap
===

A propriedade `CSS` **`gap`** define os espaços (gutters (en-US)) entre as linhas e colunas. É uma `propriedade shorthand` para `row-gap` (en-US) e `column-gap` (en-US).

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

É importante notar que `grid-gap` é um pseudônimo para esta propriedade.

Sintaxe
-------

```css
/\* Um valor de comprimento \*/
/\* Tipo: <length> \*/
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/\* Um valor de porcentagem \*/
/\* Tipo: <percentage> \*/
gap: 16%;
gap: 100%;

/\* Dois valores de comprimento \*/
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/\* Um ou dois valores de porcentagem \*/
gap: 16% 100%;
gap: 21px 82%;

/\* Valores de calc() \*/
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

/\* Valores globais \*/
gap: inherit;
gap: initial;
gap: revert;
gap: revert-layer;
gap: unset;
```

Esta propriedade é especificada como um valor para `<'row-gap'>` seguido opcionalmente por um valor para `<'column-gap'>`. Se o valor para `<'column-gap'>` for omitido, este será definido como o mesmo valor de `<'row-gap'>`.

Os valores de `<'row-gap'>` e `<'column-gap'>` são ambos especificados como `<length>` ou `<percentage>`.

### Valores

`<length>` (en-US)

É o comprimento do espaçamento (gutter) que separa as linhas do grid.

`<percentage>` (en-US)

É o comprimento do espaçamento (gutter) que separa as linhas do grid, relativo à dimensão do elemento.

Definição formal
----------------

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `row-gap` (en-US): `normal`
* `column-gap` (en-US): `normal`
 |
| Aplica-se a | multi-column elements, flex containers, grid containers |
| Inherited | não |
| Computed value | as each of the properties of the shorthand:* `row-gap` (en-US): as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
* `column-gap` (en-US): as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
 |
| Animation type | as each of the properties of the shorthand:* `row-gap` (en-US): a length, percentage or calc();
* `column-gap` (en-US): a length, percentage or calc();
 |

Sintaxe formal
--------------
```

gap =
  <'row-gap'> <'column-gap'>? (en-US)

```

Exemplos
--------

### Flex layout

#### HTML

```html
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```

#### CSS

```css
#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  gap: 20px 5px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}
```

#### Resultado

### Grid layout

#### HTML

```html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```

#### CSS

```css
#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 5px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}
```

#### Resultado

### Layout de múltiplas colunas

#### HTML

```html
<p class="content-box">
  This is some multi-column text with a 40px column gap created with the CSS
  <code>gap</code> property. Don't you think that's fun and exciting? I sure do!
</p>
```

#### CSS

```css
.content-box {
  column-count: 3;
  gap: 40px;
}
```

#### Resultado

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # gap-shorthand |

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

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

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

* Propriedades CSS relacionadas: `row-gap` (en-US), `column-gap` (en-US)
* Guia para layout Grid: *`Conceitos básicos de Grid Layout - Gutters`*


:valid - CSS

:valid
======

A pseudo-classe CSS **`:valid`** representa qualquer `<input>` ou outro elemento do `<form>` (en-US) cujo conteúdo foi validado com sucesso. Isso permite, facilmente, adicionar uma aparência que ajude o usuário a identificar os campos validados.

```css
/\* Seleciona qualquer input válido \*/
input:valid {
  background-color: powderblue;
}
```

Essa pseudo-classe é útil para realçar os campos válidos para o usuário.

Sintaxe
-------

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

Veja `:invalid` para um exemplo.

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

| Specification |
| --- |
| HTML Standard # selector-valid |
| Selectors Level 4 # validity-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 relacionada com validação: `:required`, `:optional`, `:invalid`
* Form data validation (en-US)


attr - CSS

attr
====

A função **`attr()`** do CSS é utilizada para se obter o valor de um determinado atributo do elemento selecionado e usá-lo na folha de estilo. Também pode ser utilizado em pseudo-elementos, nesse caso o valor do atributo no pseudo-elemento do elemento original é retornado.

```css
/\* Uso Simples \*/
attr(data-count);
attr(title);

/\* Com o tipo \*/
attr(src url);
attr(data-count number);
attr(data-width px);

/\* Com fallback \*/
attr(data-count number, 0);
attr(src url, '');
attr(data-width px, inherit);
attr(data-something, 'default');
```

**Nota:** A função `attr()` pode ser utilizada com qualquer propriedade CSS, mas o suporte para propriedades que não sejam `content` é experimental.

Sintaxe
-------

### Valores

`nome-do-atributo`

É o nome do atributo HTML do elemento referenciado no CSS.

`<tipo-ou-unidade>`
Experimental

É uma palavra-chave representando tanto o tipo quanto o valor do atributo, ou sua unidade, assim como no HTML alguns atributos tem unidades implícitas. Se o uso de `<tipo-ou-unidade>` como um valor para determinado atributo for inválido, a expressão `attr()` será inválida também. Se omitida, o padrão será `string`. A lista de valores válidos é:

| Palavra-chave | Tipo Associado | Comentário | Valor Padrão |
| --- | --- | --- | --- |
| `string` | `<string>` (en-US) | O valor do atributo é tratado como um CSS `<string>` (en-US). NÃO será reparado, e em particular os caracteres usados . | An empty string. |
| `cor`
Experimental
 | `<color>` | O valor do atributo é analisado como hash (3- ou 6-valores hash) ou a palavra-chave. Precisa ser um valor `<string>` (en-US) CSS válido. Os espaços do lead e trail são retirados. | corAtual |
| `url`
Experimental
 | `<url>()` (en-US) | The attribute value is parsed as a string that is used inside a CSS `url()`function. Relative URL are resolved relatively to the original document, not relatively to the style sheet. Leading and trailing spaces are stripped. | The url `about:invalid` that points to a non-existent document with a generic error condition. |
| `integer`
Experimental
 | `<integer>` (en-US) | The attribute value is parsed as a CSS `<integer>` (en-US). If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. |
| `number`
Experimental
 | `<number>` | The attribute value is parsed as a CSS `<number>`. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. |
| `length`
Experimental
 | `<length>` (en-US) | The attribute value is parsed as a CSS `<length>` (en-US) dimension, that is including the unit (e.g. `12.5em`). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, `attr()`computes it to an absolute length. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. |
| `em`, `ex`, `px`, `rem`, `vw`, `vh`, `vmin`, `vmax`, `mm`, `cm`, `in`, `pt`, or `pc`
Experimental
 | `<length>` (en-US) | The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as a `<length>` (en-US) with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, `attr()`computes it to an absolute length. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. |
| `angle`
Experimental
 | `<angle>` (en-US) | The attribute value is parsed as a CSS `<angle>` (en-US) dimension, that is including the unit (e.g. `30.5deg`). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value. |
| `deg`, `grad`, `rad`
Experimental
 | `<angle>` (en-US) | The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as an `<angle>` (en-US) with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value. |
| `time`
Experimental
 | `<time>` | The attribute value is parsed as a CSS `<time>` dimension, that is including the unit (e.g. `30.5ms`). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0s`, or, if `0s` is not a valid value for the property, the property's minimum value. |
| `s`, `ms`
Experimental
 | `<time>` | The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as an`<time>` with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0s`, or, if `0s` is not a valid value for the property, the property's minimum value. |
| `frequency`
Experimental
 | `<frequency>` (en-US) | The attribute value is parsed as a CSS `<frequency>` (en-US) dimension, that is including the unit (e.g. `30.5kHz`). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used. | `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value. |
| `Hz`, `kHz`
Experimental
 | `<frequency>` (en-US) | The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as a `<frequency>` (en-US) with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value. |
| `%`
Experimental
 | `<percentage>` (en-US) | The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as a `<percentage>` (en-US). If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given value is used as a length, `attr()`computes it to an absolute length. Leading and trailing spaces are stripped. | `0%`, or, if `0%` is not a valid value for the property, the property's minimum value. |

`<fallback>`
Experimental

The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where `attr()` is used, even if it is not used, and must not contain another `attr()` expression. If `attr()` is not the sole component value of a property, its `<fallback>` value must be of the type defined by `<type-or-unit>`. If not set, CSS will use the default value defined for each `<type-or-unit>`.

### Sintaxe formal
```

<attr()> =
  attr( <attr-name> <attr-type>? (en-US) , <declaration-value>? (en-US) )

<attr-name> =
  [ (en-US) <ident-token> '|' ] (en-US)? (en-US) <ident-token>

<attr-type> =
  string            | (en-US)
  url               | (en-US)
  ident             | (en-US)
  color             | (en-US)
  number            | (en-US)
  percentage        | (en-US)
  length            | (en-US)
  angle             | (en-US)
  time              | (en-US)
  frequency         | (en-US)
  flex              | (en-US)
  <dimension-unit>

```

Exemplos
--------

### HTML

```html
<p data-foo="hello">world</p>
```

### CSS

```css
p::before {
  content: attr(data-foo) " ";
}
```

### Resultado

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

| Specification |
| --- |
| CSS Values and Units Module Level 5 # attr-notation |

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

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


Propriedade color do CSS - CSS

Propriedade color do CSS
========================

A propriedade **`color`** do CSS definine o valor da cor de um elemento com seu conteúdo em texto e seus decorações (estilos). Também define o valorer da `<currentcolor>` (en-US), no qual pode ser usado um valor indireto de outra propriedade, e tem como padrão as cores de outras propriedades (enquanto não definida), tal como a propriedade `border-color` (en-US).

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

Para uma visão geral de como usar a propriedade color e semelhantes no HTML, veja Cor - CSS, como começar.

Syntaxe
-------

```css
/\* Valores com Palavras-chave \*/
color: white; /\* Aqui será definida a cor atual\*/

/\* Valores com Palavras-chave \*/
/\* color define a cor do texto no elemento\*/
color: red; /\* Define como 'vermelho'\*/
color: blue; /\* Define como 'laranja'\*/
color: cyan; /\* Define como 'verde-água'\*/

/\* Obs: Utilizando "light" antes da cor, ela ficará clara.
 ex: lightblue;
 E utilizando "dark", ela ficará mais escura.
 ex: darkblue;
\*/

/\* Cores com valores Hexa-decimais,
ou seja de 1 à 15, sendo de 0 à 9 normais,mas de 10 à 15
são as letras do alfabeto , logo de "a" à "f". \*/

color: #090;
color: #0099fg;
color: #090a;
color: #0099bcaa;

/\* Valores "rgb" ou "rgba",
ou seja, o primeiro é vermelho, o segundo é verde e
o terceiro é azul, o "a" é o nível de transparência da cor,
e vai de 0 à 1;
Ex: preto meio transparênte = rgba(255,255,255,0.5); \*/

color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/\* Valores "hsl()", sendo
hsl(num da cor"1-369", saturação"0-100", luminosidade"0-100")\*/
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/\* Valores globais, pega algun valor já definido,
para todo o <body>, por exemplo. \*/
color: inherit;
color: initial;
color: unset;
```

A propriedade `color` é especificada somente com o valor `<color>` .

Note que o valor sempre será uniforme para `color`. Não podendo ter `<gradient>` (en-US)(gradiente), que é atualmente um tipo para `<image>`.

### Valores

`<color>`

Define a cor dos caracteres presentes no elemento a ser estilizado.

### Syntaxe formal
```

p { color: gray; }
```

Exemplos
--------

A seguir, você verá várias maneira de tornar a cor de um texto num parágrafo vermelha:

```css
p {
  color: red;
}
p {
  color: #f00;
}
p {
  color: #ff0000;
}
p {
  color: rgb(255, 0, 0);
}
p {
  color: rgb(100%, 0%, 0%);
}
p {
  color: hsl(0, 100%, 50%);
}

/\* 50% translúcido(transparênte) \*/
p {
  color: rgba(255, 0, 0, 0.5);
}
p {
  color: hsla(0, 100%, 50%, 0.5);
}
```

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

É extremamente crucial que todo site, contenha um contraste de cores adequado, para que pessoas com níveis baixos de visão tenha um aboa experiência ao utilizar o site.

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

| Specification |
| --- |
| CSS Color Module Level 4 # the-color-property |

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

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

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

* Tipo de dado <color> no CSS.


font-kerning - CSS

font-kerning
============

A propriedade CSS **`font-kerning`** controla o o uso da informação de kerning, que é, o controle de como as letras serão espaçadas. A informação de kerning é armazenada na fonte, e se a fonte é *well-kerned*, essa caracteristica permite que o espaçamento entre caracteres seja muito parecido, independente dos caracteres.

![Example of font-kerning](/pt-BR/docs/Web/CSS/font-kerning/font-kerning.png)

```css
font-kerning: auto;
font-kerning: normal;
font-kerning: none;

/\* Global values \*/
font-kerning: inherit;
font-kerning: initial;
font-kerning: unset;
```

|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

Syntax
------

### Values

`auto`

This keyword defers to the browser regarding whether to use kerning. When the font size is small, font kerning may look strange and browsers will disable it. This is the default value.

`normal`

This keyword requires kerning to be applied.

`none`

This keyword prevents the browser from using the kerning information stored in the font.

### Formal syntax
```

font-kerning =
  auto    | (en-US)
  normal  | (en-US)
  none

```

Examples
--------

```css
p {
  font-kerning: none;
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-kerning-prop |

Browser Compatibility
---------------------

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

Kerning Demo
------------

### HTML Content

```html
<div id="kern"></div>
<div id="nokern"></div>
<textarea id="input">AV T. ij</textarea>
```

### CSS Content

```css
#nokern,
#kern {
  font-size: 2rem;
  font-family: serif;
}
#nokern {
  font-kerning: none;
}
#kern {
  font-kerning: normal;
}
```

### JS Content

```js
var input = document.getElementById("input"),
  kern = document.getElementById("kern"),
  nokern = document.getElementById("nokern");
input.addEventListener("keyup", function () {
  kern.textContent = input.value; /\* Update content \*/
  nokern.textContent = input.value;
});
kern.textContent = input.value; /\* Initialize content \*/
nokern.textContent = input.value;
```

See also
--------

* `font-variant` (en-US), `font-variant-position` (en-US), `font-variant-east-asian` (en-US), `font-variant-caps` (en-US), `font-variant-ligatures` (en-US), `font-variant-numeric` (en-US), `font-variant-alternates` (en-US), `font-synthesis` (en-US), `letter-spacing`.