backdrop-filter - CSS

backdrop-filter
===============

A propriedade CSS **`backdrop-filter`** permite que você aplique efeitos gráficos, como desfoque ou mudança de cores, na área ao fundo de um elemento. Como ela se aplica a tudo que fica *atrás* do elemento, é preciso deixá-lo (ou o seu plando de fundo) ao menos parcialmente transparente para poder ver o efeito em ação.

```css
/\* Valor de palavra-chave \*/
backdrop-filter: none;

/\* Filtro com URL para SVG \*/
backdrop-filter: url(commonfilters.svg#filter);

/\* Valores <filter-function> \*/
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/\* Vários filtros \*/
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/\* Valores globais \*/
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;
```

Sintaxe
-------

### Valores

`none`

Nenhum filtro é aplicado ao plano de fundo.

`<filter-function-list>`

Uma lista de `<filter-function>` (en-US)s separadas por espaços ou um filtro SVG que será aplicado ao plano de fundo.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Aplica-se a | all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements |
| Inherited | não |
| Computed value | as specified |
| Animation type | a filter function list |

### Sintaxe formal
```

backdrop-filter =
  none                 | (en-US)
  <filter-value-list>

<filter-value-list> =
  [ (en-US) <filter-function> | (en-US) <url> ] (en-US)+ (en-US)

<filter-function> =
  <blur()>         | (en-US)
  <brightness()>   | (en-US)
  <contrast()>     | (en-US)
  <drop-shadow()>  | (en-US)
  <grayscale()>    | (en-US)
  <hue-rotate()>   | (en-US)
  <invert()>       | (en-US)
  <opacity()>      | (en-US)
  <sepia()>        | (en-US)
  <saturate()>

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

<blur()> =
  blur( <length> (en-US)? (en-US) )

<brightness()> =
  brightness( [ (en-US) <number> | (en-US) <percentage> (en-US) ] (en-US)? (en-US) )

<contrast()> =
  contrast( [ (en-US) <number> | (en-US) <percentage> (en-US) ] (en-US)? (en-US) )

<drop-shadow()> =
  drop-shadow( [ (en-US) <color>? (en-US) && (en-US) <length> (en-US){2,3} (en-US) ] (en-US) )

<grayscale()> =
  grayscale( [ (en-US) <number> | (en-US) <percentage> (en-US) ] (en-US)? (en-US) )

<hue-rotate()> =
  hue-rotate( [ (en-US) <angle> (en-US) | (en-US) <zero> ] (en-US)? (en-US) )

<invert()> =
  invert( [ (en-US) <number> | (en-US) <percentage> (en-US) ] (en-US)? (en-US) )

<opacity()> =
  opacity( [ (en-US) <number> | (en-US) <percentage> (en-US) ] (en-US)? (en-US) )

<sepia()> =
  sepia( [ (en-US) <number> | (en-US) <percentage> (en-US) ] (en-US)? (en-US) )

<saturate()> =
  saturate( [ (en-US) <number> | (en-US) <percentage> (en-US) ] (en-US)? (en-US) )

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

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

```

Exemplo
-------

### CSS

```css
.box {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-image: url(https://picsum.photos/id/1080/6858/4574);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}
```

### HTML

```html
<div class="container">
  <div class="box">
    <p>backdrop-filter: blur(10px)</p>
  </div>
</div>
```

### Resultado

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

| Specification |
| --- |
| Filter Effects Module Level 2 # BackdropFilterProperty |

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

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

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

* `filter` (en-US)


font-weight - CSS

font-weight
===========

Resumo
------

A propriedade CSS `font-weight` especifica o peso ou a intensidade da fonte (ex.: negrito). Algumas fontes oferecem apenas as opções `normal` e negrito.

|  |  |
| --- | --- |
| Initial value | `normal` |
| Aplica-se a | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | the keyword or the numerical value as specified, with `bolder` and `lighter` transformed to the real value |
| Animation type | a font weight |

Sintaxe
-------

```css
font-weight: normal;
font-weight: bold;

/\* Relativo ao elemento pai \*/
font-weight: lighter;
font-weight: bolder;

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

/\* Valores globais \*/
font-weight: inherit;
font-weight: initial;
font-weight: unset;
```

### Valores

`normal`

Peso normal. O mesmo que `400`.

`bold`

Peso negrito. O mesmo que `700`.

`lighter`

Um peso de fonte mais claro que o elemento pai (dentre os pesos disponíveis da fonte).

`bolder`

Um peso de fonte mais escuro que o elemento pai (dentre os pesos disponíveis da fonte).

`100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`

Pesos numéricos para fontes que oferecem mais que normal e negrito.

### Contingência

Caso o dado peso solicitado não esteja disponível, a seguinte heurística é usada para determinar o peso efetivo a ser usado:

* Se solicitado um peso maior que `500`, usa-se o próximo peso mais escuro (ou, se não houver, usa-se o próximo mais claro).
* Se solicitado um peso menor que `400`, usa-se o próximo peso mais claro (ou, se não houver, usa-se o próximo mais escuro).
* Se solicitado o peso `400`, usa-se o peso `500`. Se `500` não estiver disponível, usa-se a heurística para peso menor do que 500.
* Se solicitado o peso `500`, usa-se o peso `400`. Se `400` não estiver disponível, usa-se a heurística para peso menor do que 400.

Isto significa que para fontes que oferecem apenas `normal` e negrito, `100`-`500` significa normal, e `600`-`900` significa negrito.

### Significado de pesos relativos

Quando for solicitado `lighter` ou `bolder`, a seguinte tabela é usada para calcular o peso absoluto do elemento:

| Valor herdado | `bolder` | `lighter` |
| --- | --- | --- |
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |

### Mapeamento de nomes comuns de pesos

Os valores de 100 a 900 correspondem grosseiramente aos seguintes nomes comuns de pesos:

`100`

Thin (Hairline)

`200`

Extra Light (Ultra Light, Ultra Fino)

`300`

Light (Fino)

`400`

Normal

`500`

Medium (Médio)

`600`

Semi Bold (Demi Bold, Semi Negrito)

`700`

Bold (Negrito)

`800`

Extra Bold (Ultra Bold, Super Negrito)

`900`

Black (Heavy)

### Interpolação

Um valor de `font-weight` é interpolado com passos discretos (múltiplos de 100). A interpolação acontece no espaço de números reais e depois é feita uma conversão para números inteiros por arredondamento para o múltiplo de 100 mais próximo. Valores exatamente entre dois múltiplos de 100 são arredondados para mais.

### Sintaxe formal
```

font-weight =
  <font-weight-absolute>  | (en-US)
  bolder                  | (en-US)
  lighter

<font-weight-absolute> =
  normal             | (en-US)
  bold               | (en-US)
  <number [1,1000]>

```

Exemplos
--------

### HTML

```html
<p>
  Alice was beginning to get very tired of sitting by her sister on the bank,
  and of having nothing to do: once or twice she had peeped into the book her
  sister was reading, but it had no pictures or conversations in it, 'and what
  is the use of a book,' thought Alice 'without pictures or conversations?'
</p>

<div>
  I'm heavy<br />
  <span>I'm lighter</span>
</div>
```

### CSS

```css
/\* Set paragraph text to be bold. \*/
p {
  font-weight: bold;
}

/\* Set div text to two steps darker than
 normal but less than a standard bold. \*/
div {
  font-weight: 600;
}

/\* Sets text enclosed within span tag
 to be one step lighter than the parent. \*/
span {
  font-weight: lighter;
}
```

### Result

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

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

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

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


clear - CSS

clear
=====

A propriedade **`clear do`** CSS especifica se um elemento pode ter elementos flutuantes (en-US) ao seu lado ou se devem ser movidos para abaixo dele (clear). Essa propriedade se aplica à elementos flutuantes ou não flutuantes.

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

Quando essa propriedade é aplicada em elementos não flutuantes, ele move a borda (border edge) desse elemento para a borda da margem (margin edge) de todos os elementos flutuantes relevantes. Ocorre um colapso das margens verticais dos elementos não flutuantes.

As margens verticais entre dois elementos flutuantes não irão sofrer esse colapso. Quando aplicada a elementos flutuantes, a borda de margem (margin edge) do elemento inferior é movida abaixo da borda de margem (border edge) de todos os elementos flutuantes relevantes. Isso afeta a posição dos elementos flutuantes posteriores, sendo que os elementos flutuantes posteriores não podem ser posicionados acima dos anteriores.

Os elementos flutuantes que devem ser limpos (clear) são os elementos anteriores dentro do mesmo contexto de bloco (block formatting context (en-US)).

**Nota:** se um elemento possuir apenas elementos flutuantes, sua altura é zerada. Se você quiser que o mesmo seja redimensionado, de modo que contenha elementos flutuantes dentro dele, você precisa limpar(clear) seus filhos automaticamente. Isso é chamado clearfix, e uma maneira de fazê-lo é adicionando um `::after` pseudo-elemento com a propriedade `clear.`

```css
#container::after {
  content: "";
  display: block;
  clear: both;
}
```

Sintaxe
-------

```css
/\* Valores chaves \*/
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

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

### Valores

`none`

É uma palavra-chave que indica que o elemento não foi movido para baixo para limpar os elementos flutuantes anteriores.

`left`

É uma palavra-chave que indica que o elemento foi movido para baixo para limpar os últimos flutuantes da esquerda.

`right`

É uma palavra-chave que indica que o elemento foi movido para baixo para liberar os últimos elementos flutuantes.

`both`

É uma palavra-chave que indica que o elemento será movido para baixo para limpar os elementos flutuantes do lado esquerdo e direito.

`inline-start`

É uma palavra-chave que indica que o elemento será movido para baixo para limpar os elementos flutuantes no lado inicial de seu bloco, ou seja, os da esquerda flutuam nos scripts de ltr e os da direita nos scripts de rtl.

`inline-end`

É uma palavra-chave que indica que o elemento será movido para baixo para limpar os flutuantes no final de seu bloco, os da direita nos scripts de ltr e os flutuantes da esquerda nos scripts de rtl.

### Sintaxe
```

clear =
  inline-start  | (en-US)
  inline-end    | (en-US)
  block-start   | (en-US)
  block-end     | (en-US)
  left          | (en-US)
  right         | (en-US)
  top           | (en-US)
  bottom        | (en-US)
  both-inline   | (en-US)
  both-block    | (en-US)
  both          | (en-US)
  none

```

Exemplos
--------

### clear: left

#### HTML

```html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="left">This paragraph clears left.</p>
</div>
```

#### CSS

```css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.left {
  border: 1px solid black;
  clear: left;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: left;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}
```

### clear: right

#### HTML

```html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="right">This paragraph clears right.</p>
</div>
```

#### CSS

```css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.right {
  border: 1px solid black;
  clear: right;
}
.black {
  float: right;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}
```

### clear: both

#### HTML

```html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus
    ac dui.
  </p>
  <p class="red">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="both">This paragraph clears both.</p>
</div>
```

#### CSS

```css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.both {
  border: 1px solid black;
  clear: both;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 45%;
}
```

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-clear |
| CSS Logical Properties and Values Level 1 # float-clear |

Compatibilidade dos browsers
----------------------------

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

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

* Box model (en-US)


element - CSS

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)


<display-legacy> - CSS

<display-legacy>
================

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

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

* Learn more
* See full compatibility
* Report feedback
O CSS 2 usou uma sintaxe de palavra-chave única para o `display` , exigindo palavras-chave separadas para variantes em nível de bloco e em linha do mesmo modo de layout. Esta página detalha esses valores.

Sintaxe
-------

`inline-block`

O elemento gera uma caixa de elemento de bloco que fluirá com o conteúdo circundante, como se fosse uma única caixa embutida (se comportando como um elemento substituído).

É equivalente a `inline flow-root`.

`inline-table`

O `inline-table` O valor não possui um mapeamento direto em HTML. Ele se comporta como um HTML`<table>` elemento, mas como uma caixa embutida, em vez de uma caixa no nível do bloco. Dentro da caixa da tabela há um contexto em nível de bloco.

É equivalente a `inline table`.

`inline-flex`

O elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo flexbox.

É equivalente a `inline flex`.

`inline-grid`

O elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo de grade.

É equivalente a `inline grid`.

### Sintaxe formal
```

<display-legacy> =
  inline-block  | (en-US)
  inline-table  | (en-US)
  inline-flex   | (en-US)
  inline-grid

```

Exemplo
-------

No exemplo abaixo, estamos criando um contêiner flex inline com a palavra-chave herdada inline-flex.

### HTML

```html
<div class="container">
  <div>Flex Item</div>
  <div>Flex Item</div>
</div>

Not a flex item
```

### CSS

```css
.container {
  display: inline-flex;
}
```

### Result

Na nova sintaxe, o contêiner flex inline seria criado usando dois valores, inline para o tipo de exibição externo e flex para o tipo de exibição interno.

```css
.container {
  display: inline flex;
}
```

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

### Suporte de`inline-block`

### css.properties.display.inline-block

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

### css.properties.display.inline-table

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

### css.properties.display.inline-flex

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

### css.properties.display.inline-grid

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

### Suporte de`inline-table`

### css.properties.display.inline-block

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

### css.properties.display.inline-table

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

### css.properties.display.inline-flex

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

### css.properties.display.inline-grid

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

### Suporte de`inline-flex`

### css.properties.display.inline-block

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

### css.properties.display.inline-table

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

### css.properties.display.inline-flex

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

### css.properties.display.inline-grid

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

### Suporte de`inline-grid`

### css.properties.display.inline-block

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

### css.properties.display.inline-table

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

### css.properties.display.inline-flex

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

### css.properties.display.inline-grid

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

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

* `display`
    + `<display-outside>`
    + `<display-inside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-box>`


:root - CSS

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


background-blend-mode - CSS

background-blend-mode
=====================

A propriedade CSS **`background-blend-mode`** descreve como as imagens de fundo do elemento devem se misturar entre si e a cor de fundo do elemento.

```css
/\* Um valor \*/
background-blend-mode: normal;

/\* Dois valores, um por fundo \*/
background-blend-mode: darken, luminosity;

/\* Valores globais \*/
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;
```

Os modos de mistura devem ser definidos na mesma ordem que a propriedade CSS `background-image` (en-US). Se os comprimentos da lista dos modos de mistura e das imagens de fundo não forem iguais, ele será repetido e/ou truncado até que os comprimentos correspondam.

|  |  |
| --- | --- |
| Initial value | `normal` |
| Aplica-se a | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to `::first-letter` and `::first-line`. |
| Inherited | não |
| Computed value | as specified |
| Animation type | Not animatable |

Sintaxe
-------

### Valores

`<blend-mode>`

É um `<blend-mode>` denotando o modo de mesclagem a ser aplicado. Pode haver vários valores, separados por vírgulas.

### Sintaxe formal
```

background-blend-mode =
  <mix-blend-mode># (en-US)

```

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

<div id="div"></div>
<select id="select">
  <option>normal</option>
  <option>multiply</option>
  <option selected>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}
```

```
document.getElementById("select").onchange = function (event) {
  document.getElementById("div").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));
```

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

| Specification |
| --- |
| Compositing and Blending Level 2 # background-blend-mode |

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

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

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

* `<blend-mode>`
* `mix-blend-mode`


text-transform - CSS

text-transform
==============

A propriedade de CSS **`text-transform`** especifica como capitalizar um texto de um elemento. Pode ser usado para que o texto apareça com todas as letras maiúsculas ou todas minúsculas, ou com cada palavra em maiúscula.

```css
/\* Keyword values \*/
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
text-transform: full-width;

/\* Global values \*/
text-transform: inherit;
text-transform: initial;
text-transform: unset;
```

The `text-transform` property takes into account language-specific case mapping rules, like:

* in Turkic languages, like Turkish (`tr`), Azerbaijani (`az`), Crimean Tatar (`crh`), Volga Tatar (`tt`), and Bashkir (`ba`), there are two kinds of i, with and without the dot, and two case pairings: `i`/`İ` and `ı`/`I`.
* In German (`de`), the `ß` becomes `SS` in uppercase.
* In Dutch (`nl`), the `ij` digraph becomes `IJ`, even with `text-transform: capitalize`, which only put the first letter of a word in uppercase.
* In Greek (`el`), vowels lose their accent when the whole word is in uppercase (`ά`/`Α`), except for the disjunctive eta (`ή`/`Ή`). Also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (`άι`/`ΑΪ`).
* In Greek (`el`), the lowercase sigma character has two forms: `σ` and `ς`. `ς` is used only when sigma terminates a word. When applying `text-transform: lowercase` to an uppercase sigma (`Σ`), the browser needs to choose the right lowercase form based on context.
* in Irish (`ga`), certain prefixed letters remain in lowercase when the base initial is capitalised, so for example `text-transform: uppercase` will change `ar aon tslí` to `AR AON tSLÍ` and not, as one might expect, `AR AON TSLÍ` (Firefox only). In some cases, a hyphen is also removed upon uppercasing: `an t-uisce` transforms to `AN tUISCE` (and the hyphen is correctly reinserted by `text-transform: lowercase`)

The language is defined by the `lang` HTML attribute or the `xml:lang` XML attribute.

Support for these specific cases vary from one browser to the other, so check the browser compatibility table.

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

Syntax
------

`capitalize`

Is a keyword forcing the first *letter* of each word to be converted to uppercase. Other characters are unchanged; that is, they retain their original case as written in the element's text. A letter is any Unicode character part of the Letter or Number general categories
Experimental
 : it excludes any punctuation marks or symbols at the beginning of the word.

**Nota:** Authors should not expect `capitalize` to follow language-specific title casing conventions (such as skipping articles in English).

**Nota:** The `capitalize` keyword was under-specified in CSS 1 and CSS 2.1. There were differences between browsers in the way the first letter was calculated (Firefox considered - and \_ as letters, but not the others. Both Webkit and Gecko incorrectly considered letter-based symbols like `ⓐ` to be real letters. Internet Explorer 9 was the closest to the CSS 2 definition, but with some weird cases). By precisely defining the correct behavior, CSS Text Level 3 cleans this mess up. The `capitalize` line in the browser compatibility table contains the version the different engines started to support this now precisely defined behavior.

`uppercase`

Is a keyword forcing all characters to be converted to uppercase.

`lowercase`

Is a keyword forcing all characters to be converted to lowercase.

`none`

Is a keyword preventing the case of all characters to be changed.

`full-width`
Experimental

Is a keyword forcing the writing of a character — mainly ideograms and latin scripts — inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese).

### Formal syntax
```

text-transform =
  none                                                | (en-US)
  [ (en-US) capitalize | (en-US) uppercase | (en-US) lowercase ] (en-US) || (en-US) full-width || (en-US) full-size-kana  | (en-US)
  math-auto

```

Examples
--------

### Example using "none"

```html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>
  text-transform: none
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: none;
}
strong {
  float: right;
}
```

This demonstrates no text transformation.

### `capitalize` (General)

```html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>
  text-transform: capitalize
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}
```

This demonstrates text capitalization.

### `capitalize` (Punctuation)

```html
<p>
  Initial String
  <strong
 >(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize?
    ?¡transform!</strong
 >
</p>
<p>
  text-transform: capitalize
  <strong
 ><span
 >(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize?
      ?¡transform!</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}
```

This demostrates how initial punctuations of a word are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.

### `capitalize` (Symbols)

```html
<p>
  Initial String
  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
</p>
<p>
  text-transform: capitalize
  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
</p>
```

```css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}
```

This demonstrates how initial symbols are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.

### `capitalize` (Dutch *ij* digraph)

```html
<p>
  Initial String
  <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
</p>
<p>
  text-transform: capitalize
  <strong
 ><span lang="nl"
 >The Dutch word: "ijsland" starts with a digraph.</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}
```

This demonstrates how the Dutch *ij* digraph must be handled like one single letter.

### `uppercase` (General)

```html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>
  text-transform: uppercase
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: uppercase;
}
strong {
  float: right;
}
```

This demonstrates transforming the text to uppercase.

### `uppercase` (Greek Vowels)

```html
<p>
  Initial String
  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
</p>
<p>
  text-transform: uppercase
  <strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong>
</p>
```

```css
span {
  text-transform: uppercase;
}
strong {
  float: right;
}
```

This demonstrates how Greek vowels except disjunctive *eta* should have no accent, and the accent on the first vowel of a vowel pair becomes a diaeresis on the second vowel.

### `lowercase` (General)

```html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>
  text-transform: lowercase
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: lowercase;
}
strong {
  float: right;
}
```

This demonstrates transforming the text to lowercase.

### `lowercase` (Greek Σ)

```html
<p>
  Initial String
  <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
</p>
<p>
  text-transform: lowercase
  <strong
 ><span
 >Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: lowercase;
}
strong {
  float: right;
}
```

This demonstrates how the Greek character sigma (`Σ`) is transformed into the regular lowercase sigma (`σ`) or the word-final variant (`ς`), according the context.

### `full-width` (General)

```html
<p>
  Initial String
  <strong
 >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong
 >
</p>
<p>
  text-transform: full-width
  <strong
 ><span
 >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span
 ></strong
 >
</p>
```

```css
span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}
```

Some characters exists in two formats, normal width and a full-width, with different Unicode code points. The full-width version is used to mix them smoothly with Asian ideographic characters.

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

| Specification |
| --- |
| CSS Text Module Level 3 # text-transform |

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

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

See also
--------

* `font-variant` (en-US)


General sibling selectors - CSS

General sibling selectors
=========================

Resumo
------

O **combinador geral de irmãos** (~) separa dois seletores e corresponde ao segundo elemento somente se ele for precedido pelo primeiro, e ambos compartilham um pai comum.

Sintaxe
-------
```

elemento_anterior ~ elemento_alvo { propriedades de estilo }
```

Exemplo
-------

```css
p ~ span {
  color: red;
}
```

```html
<span>Este não é vermelho.</span>
<p>Aqui temos um parágrafo.</p>
<code>Aqui temos um pouco de código.</code>
<span>E aqui há um span vermelho!</span>
<code>Mais código...</code>
<span>E este também é um span vermelho!</span>
```

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

| Specification |
| --- |
| Selectors Level 4 # general-sibling-combinators |

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

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

Veja mais
---------

* Adjacent sibling selectors (en-US)


transform - CSS

transform
=========

Resumo
------

A propriedade CSS `transform` permite modificar o espaço coordenado do modelo de formatação CSS. Usando-a, elementos podem ser traduzidos, rotacionados, ter seu tamanho ajustado e inclinados de acordo com os valores definidos.

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

Se a propriedade tem um valor diferente de `none`, um contexto de empilhamento será criado. Neste caso, o objeto atuará como um bloco recipiente para `position: fixed` para os elementos que estão contidos.

Sintaxe
-------
```

Gramática Formal: <transform-função> [<transform-função>]* | none
```

```css
transform: none
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
transform: translate(12px, 50%)
transform: translateX(2em)
transform: translateY(3in)
transform: scale(2, 0.5)
transform: scaleX(2)
transform: scaleY(0.5)
transform: rotate(0.5turn)
transform: skewX(30deg)
transform: skewY(1.07rad)
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
transform: translate3d(12px, 50%, 3em)
transform: translateZ(2px)
transform: scale3d(2.5, 1.2, 0.3)
transform: scaleZ(0.3)
transform: rotate3d(1, 2.0, 3.0, 10deg)
transform: rotateX(10deg)
transform: rotateY(10deg)
transform: rotateZ(10deg)
transform: perspective(17px)

transform: translateX(10px) rotate(10deg) translateY(5px)
```

A propriedade transform pode ser especificada com a palavra reservada `none` ou com uma das várias funções disponíveis.

Se `perspective()` é uma das múltiplas funções atribuídas à transform, então ela obrigatoriamente deve ser a primeira.

### Valores

`<transform-função>`

Uma ou mais das funções CSS transform para serem aplicadas, veja abaixo.

`none`

Especifica que nenhuma função transform deve ser aplicada.

Exemplos
--------

Veja Using CSS transforms.

### Exemplo ao vivo

```css
pre {
  width: 33em;
  border: solid red;

  -webkit-transform: translate(100px) rotate(20deg);
  -webkit-transform-origin: 60% 100%;

  -o-transform: translate(100px) rotate(20deg);
  -o-transform-origin: 60% 100%;

  transform: translate(100px) rotate(20deg);
  transform-origin: 60% 100%;
}
```

CSS transform functions
-----------------------

The `transform` CSS property allows the coordinate system used by an element to be manipulated using **transform functions**. These functions are described below.

### matrix
```

transform:  matrix(a, c, b, d, tx, ty)

/* Where a, b, c, d build the transformation matrix
   ┌     ┐
   │ a b │
   │ c d │
   └     ┘
   and tx, ty are the translate values.  */
```

Specifies a 2D transformation matrix comprised of the specified six values. This is the equivalent to applying the transformation **matrix [a b c d tx ty]**.

**Nota:** Gecko (Firefox) accepts a `<length>` (en-US) value for **tx** and **ty**. Webkit (Safari, Chrome) and Opera currently support a unitless `<number>` for **tx** and **ty**.

#### Live examples
```

 background: gold;  width: 30em;

 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
      -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
         transform: matrix(1, -0.2, 0, 1, 0, 0);
```

```
 background: wheat;
 max-width: intrinsic;

 -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
      -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
         transform: matrix(1, 0, 0.6, 1,  250, 0);
```

#### See also

* Examples of linear transformation matrices Wikipedia
* Coordinate transformation matrices mathamazement.com
* Microsoft's matrix filter MSDN
### rotate
```

transform:  rotate(angle);       /* an <angle>, e.g.  rotate(30deg) */
```

Rotates the element clockwise around its origin (as specified by the `transform-origin` property) by the specified `angle`. The operation corresponds to the matrix **[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]**.

### scale
```

transform:  scale(sx[, sy]);     /* one or two unitless <number>s, e.g.  scale(2.1,4) */
```

Specifies a 2D scaling operation described by **[sx, sy]**. If `sy` isn't specified, it is assumed to be equal to `sx`.

### scaleX
```

transform:  scaleX(sx);          /* a unitless <number>, e.g.  scaleX(2.7) */
```

Specifies a scale operation using the vector **[sx, 1]**.

### scaleY
```

transform:  scaleY(sy)           /* a unitless <number>, e.g.  scaleY(0.3) */
```

Specifies a scale operation using the vector **[1, sy]**.

### skew

**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.
```

transform:  skew(ax[, ay])       /* one or two <angle>s, e.g.  skew(30deg,-10deg) */
```

Skews the element around the X and Y axes by the specified angles. If `ay` isn't provided, no skew is performed on the Y axis.

**Nota:** The `skew()` function was present in early drafts. It has been removed but is still present in some implementations. Do not use it.

To achieve the same effect, use `skewX()` if you were using `skew()` with one parameter or `matrix(1, tan(ax)`*,* `tan(ay), 1, 0, 0)` for the general way. Note that *tan()* isn't a CSS function and you have to precalculate it yourself.

### skewX
```

transform:  skewX(angle)         /* an <angle>, e.g.  skewX(-30deg) */
```

Skews the element around the X axis by the given `angle`.

### skewY
```

transform:  skewY(angle)         /* an <angle>, e.g.  skewY(4deg) */
```

Skews the element around the Y axis by the given `angle`.

### translate
```

transform:  translate(tx[, ty])  /* one or two <length> values */
```

Specifies a 2D translation by the vector **[tx, ty]**. If `ty` isn't specified, its value is assumed to be zero.

### translateX
```

transform:  translateX(tx)       /* see <length> for possible values */
```

Translates the element by the given amount along the X axis.

### translateY
```

transform:  translateY(ty)       /* see <length> for possible values */
```

Translates the element by the given amount along the Y axis.

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

| Specification |
| --- |
| CSS Transforms Module Level 2 # transform-functions |
| CSS Transforms Module Level 1 # transform-property |

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

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

See also
--------

* Using CSS Transforms
* More info on CSS3 Rotation / Matrix Filter issues in the comments on Paul Irish's blog.
* A cross-browser 2D transform plugin for jQuery


font-size - CSS

font-size
=========

A propriedade **`font-size`** no CSS estabelece o tamanho da fonte.

Esta propriedade também é usada para computaro tamanho de `em`, `ex`, e outras unidades `<length>` (en-US) relativas.

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

Sintaxe
-------

```css
/\* <absolute-size> values \*/
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/\* <relative-size> values \*/
font-size: smaller;
font-size: larger;

/\* <length> values \*/
font-size: 12px;
font-size: 0.8em;

/\* <percentage> values \*/
font-size: 80%;

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

The `font-size` property is specified in one of the following ways:

* As one of the absolute-size or relative-size keywords
* As a `<length>` or a `<percentage>`, relative to the parent element's font size
### Valores

`xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`

Absolute-size keywords, based on the user's default font size (which is `medium`).

`larger`, `smaller`

Relative-size keywords. The font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size keywords above.

`<length>` (en-US)

A positive `<length>` (en-US) value. For most font-relative units (such as `em` and `ex`), the font size is relative to the parent element's font size.

For font-relative units that are root-based (such as `rem`), the font size is relative to the size of the font used by the `<html>` (root) element.

`<percentage>` (en-US)

A positive `<percentage>` (en-US) value, relative to the parent element's font size.

**Nota:** To maximize accessibility, it is generally best to use values that are relative to the user's default font size.

### Formal syntax
```

font-size =
  <absolute-size> (en-US)            | (en-US)
  <relative-size> (en-US)            | (en-US)
  <length-percentage [0,∞]>  | (en-US)
  math

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

```

Possible approaches
-------------------

There are several ways to specify the font size, including with keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs for the particular web page.

### Keywords

Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the `<body>` element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.

### Pixels

Setting the font size in pixel values (`px`) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.

Font sizing settings can also be used in combination. For example, if a parent element is set to `16px` and its child element is set to `larger`, the child element displays larger than the parent element in the page.

**Nota:** Defining font sizes in `px` is *not accessible*, because the user cannot change the font size from the browser. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. Avoid using them for font sizes if you wish to create an inclusive design.

### Ems

Another way of setting the font size is with `em` values. The size of an `em` value is dynamic. When defining the `font-size` property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is often 16px. So, by default 1em = 16px, and 2em = 32px. If you set a `font-size` of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.

In order to calculate the em equivalent for any pixel value required, you can use this formula:
```

em = desired element pixel value / parent element font-size in pixels
```

For example, suppose the font-size of the body of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).

The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.

One important fact to keep in mind: em values compound. Take the following HTML and CSS:

```css
html {
  font-size: 62.5%; /\* font-size 1em = 10px on default browser settings \*/
}
span {
  font-size: 1.6em;
}
```

```html
<div>
  <span>Outer <span>inner</span> outer</span>
</div>
```

The result is:

Assuming that the browser's default `font-size` is 16px, the words "outer" would be rendered at 16px, but the word "inner" would be rendered at 25.6px. This is because the inner `<span>`'s `font-size` is 1.6em which is relative to its parent's `font-size`, which is in turn relative to its parent's `font-size`. This is often called **compounding**.

### Rems

`rem` values were invented in order to sidestep the compounding problem. `rem` values are relative to the root `html` element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.

The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to `rem`.

```css
html {
  font-size: 62.5%; /\* font-size 1em = 10px on default browser settings \*/
}
span {
  font-size: 1.6rem;
}
```

Then we apply this CSS to the same HTML, which looks like this:

```html
<span>Outer <span>inner</span> outer</span>
```

In this example, the words "outer inner outer" are all displayed at 16px (assuming that the browser's `font-size` has been left at the default value of 16px).

Examples
--------

### Example 1

```css
/\* Sets paragraph text to be very large \*/
p {
  font-size: xx-large;
}

/\* Sets <h1> text to be 2.5 times the size
 of the text around it \*/
h1 {
  font-size: 250%;
}

/\* Sets text enclosed within span tag to be 16px \*/
span {
  font-size: 16px;
}
```

### Example 2

#### CSS

```css
.small {
  font-size: xx-small;
}
.larger {
  font-size: larger;
}
.point {
  font-size: 24pt;
}
.percent {
  font-size: 200%;
}
```

#### HTML

```html
<h1 class="small">Small H1</h1>
<h1 class="larger">Larger H1</h1>
<h1 class="point">24 point H1</h1>
<h1 class="percent">200% H1</h1>
```

#### Result

Notes
-----

`em` and `ex` units on the `font-size` property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means `em` units and percentages do the same thing for `font-size`.

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

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

|  |  |
| --- | --- |
| Initial value | `medium` |
| Aplica-se a | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Percentages | refer to the parent element's font size |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length |

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

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


Descendant combinator - CSS

Descendant combinator
=====================

O **combinador descendente** - normalmente representado por um caractere de espaço simples (" ") - combina dois seletores para que os elementos correspondidos pelo segundo seletor sejam selecionados se eles tiverem um elemento ancestral (pai, pai ou mãe, pai ou mãe, etc.) correspondente ao primeiro seletor. Os seletores que utilizam um combinador descendente são chamados de seletores descendentes.

```css
/\* Listar itens descendentes da lista "my-things" \*/
ul.my-things li {
  margin: 2em;
}
```

O combinador descendente é tecnicamente um ou mais caracteres de espaço em branco do CSS - o caractere de espaço e/ou um dos quatro caracteres de controle: retorno de carro (carriage return), Quebra de página ( form feed), nova linha e caracteres de tabulação — entre dois seletores na ausência de outro combinador. Além disso, os caracteres de espaço em branco dos quais o combinador é composto podem conter qualquer número de comentários CSS.

Sintaxe
-------
```

selector1 selector2 {
  /*  declarações de propriedade  */
}
```

Exemplo
-------

### CSS

```css
li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}
```

### HTML

```html
<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>
```

### Resultado

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

| Specification |
| --- |
| Selectors Level 4 # descendant-combinators |

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

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

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

* Child combinator (en-US)


var() - CSS

var()
=====

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
A função CSS **`var()`** pode ser usada para inserir o valor de uma custom property (propriedade personalizada) substituindo qualquer parte do valor de outra propriedade.

```css
var(--header-color, blue);
```

A função `var()` não pode ser usada em nomes de propriedades, seletores ou qualquer outra coisa além de valores de propriedades. (Isso geralmente produz sintaxe inválida, ou então um valor cujo significado não tem conexão com a variável.)

Sintaxe
-------

O primeiro argumento da função é o nome da propriedade personalizada a ser substituída. O segundo argumento opcional da função serve como valor alternativo. Se a propriedade personalizada referenciada pelo primeiro argumento for inválida, a função usará o segundo valor.
```

<var()> =
  var( <custom-property-name> , <declaration-value>? (en-US) )

```

**Nota:** A sintaxe do argumento alternativo, assim como as propriedades personalizadas, permite o uso de vírgulas. Por exemplo, `var(--foo, red, blue)` define como argumento alternativo `red, blue`; isto é, qualquer coisa entre a primeira vírgula e o fim da função é considerado como valor do como argumento alternativo.

### Valores

<custom-property-name>

O nome da propriedade personalizada referenciada é representada por um identificador que começa com dois traços. As propriedades personalizadas são exclusivamente para uso por autores e usuários; O CSS nunca lhes dará um significado além do que é apresentado aqui.

<declaration-value>

O valor do argumento alternativo é usado caso a propriedade personalizada seja inválida no contexto utilizado. Este valor pode conter qualquer caractere, exceto alguns caracteres com significado especial como novas linhas, colchetes de fechamento perdidos, ex.`)`, `]`, ou `}`, ponto e vírgula de primeiro nível, ou sinais de exclamação.

Exemplos
--------

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

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

```css
/\* Argumento alternativo \*/
/\* No estilo de componente: \*/
.component .header {
  color: var(--header-color, blue);
}

.component .text {
  color: var(--text-color, black);
}

/\* No estilo de grandes aplicações: \*/
.component {
  --text-color: #080; /\* header-color não está definido e, desse modo, permanece azul, o valor do argumento alternativo \*/
}
```

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

| Specification |
| --- |
| CSS Custom Properties for Cascading Variables Module Level 1 # using-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


color-scheme - CSS

color-scheme
============

A Propriedade CSS **`color-scheme`** possibilita que um elemento possa indicar em qual esquema de cores é mais amigável de ser renderizado.

Opções comuns em esquemas de cores de sistemas operacionais são "claro" e "escuro", ou "modo diurno" e "modo noturno". Quando um usuário seleciona um desses esquemas de cores, o sistema operacional faz ajustes na interface do usuário. Isso inclui controles de formulários, barra de scroll, e os valores utilizados no sistema de cores do CSS.

Syntax
------

```css
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;

/\* Valores globais \*/
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: unset;
```

O valor da propriedade `color-scheme` precisa ser uma das palavras-chaves abaixo.

### Valores

`normal`

Indica que o elemento não possui nenhum esquema de cores, e deve ser renderizado utilizando o esquema de cores padrão do navegador.

`light`

Indica que o elemento pode ser renderizado utilizando o esquema de cores claro do sistema operacional.

`dark`

Indica que o elemento pode ser renderizado utilizando o esquema de cores escuro do sistema operacional.

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

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

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

color-scheme =
  normal                                       | (en-US)
  [ (en-US) light | (en-US) dark | (en-US) <custom-ident> (en-US) ] (en-US)+ (en-US) && (en-US) only? (en-US)

```

Exemplos
--------

### Adaptando a esquemas de cores

Para fazer com que toda a página tenha o esquema de cores de preferência do usuário declare `color-scheme` no elemento `:root`.

```css
:root {
  color-scheme: light dark;
}
```

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

| Specification |
| --- |
| CSS Color Adjustment Module Level 1 # color-scheme-prop |

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

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

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

* Aplicando cores em elementos HTML com CSS
* Outras propriedades de cores relacionadas: `color`, `background-color`, `border-color` (en-US), `outline-color` (en-US), `text-decoration-color` (en-US), `text-emphasis-color` (en-US), `text-shadow`, `caret-color` (en-US), and `column-rule-color` (en-US)
* `background-image` (en-US)
* `print-color-adjust` (en-US)


text-align - CSS

text-align
==========

Sumário
-------

A propriedade CSS **`text-align`** descreve como conteúdo inline, como texto, é alinhado no elemento pai em bloco. `text-align` não controla o alinhamento de elementos em bloco, apenas o seu conteúdo inline.

|  |  |
| --- | --- |
| Initial value | `start`, or a nameless value that acts as `left` if `direction` (en-US) is `ltr`, `right` if `direction` (en-US) is `rtl` if `start` is not supported by the browser. |
| Aplica-se a | block containers |
| Inherited | yes |
| Computed value | as specified, except for the `match-parent` value which is calculated against its parent's `direction` value and results in a computed value of either `left` or `right` |
| Animation type | discrete |

Sintaxe
-------

```css
/\* Keyword values \*/
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/\* Block alignment values (Non-standard syntax) \*/
text-align: -moz-center;
text-align: -webkit-center;

/\* Global values \*/
text-align: inherit;
text-align: initial;
text-align: unset;
```

### Valores

`start`
Experimental

Igual `left` se a direção é esquerda-para-direita e `right` se a direção é direita-para-esquerda.

`end`
Experimental

Igual `right` se a direção é esquerda-para-direita e `left` se a direção é direita-para-esquerda.

`left`

O conteúdo é alinhado na borda esquerda do box.

`right`

O conteúdo é alinhado na borda direita do box.

`center`

Os conteúdos inline são centralizados entre a linha da caixa.

`justify`

Os conteúdos inline são justificados. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.

`justify-all`

Semelhante a `justify`, porém força a última linha a ser justificada.

`match-parent`
Experimental

Similar to `inherit`, but the values `start` and `end` are calculated according the parent's `direction` (en-US) and are replaced by the adequate `left` or `right` value.

### Sintaxe Formal
```

text-align =
  start         | (en-US)
  end           | (en-US)
  left          | (en-US)
  right         | (en-US)
  center        | (en-US)
  justify       | (en-US)
  match-parent  | (en-US)
  justify-all

```

Exemplos
--------

### Alinhamento Esquerdo

#### HTML

```html
<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
```

#### CSS

```css
.example {
  text-align: left;
  border: solid;
}
```

#### Resultado

### Texto centralizado

#### HTML

```html
<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
```

#### CSS

```css
.example {
  text-align: center;
  border: solid;
}
```

#### Resultado

### Justificado

#### HTML

```html
<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
```

#### CSS

```css
.example {
  text-align: justify;
  border: solid;
}
```

#### Resultado

### Notas

O modo compátivel-padrão de centralizar um bloco em si sem centralizar seu conteúdo inline é setando a `margin` left e right para `auto`, e.g.:

```css
.something {
  margin: auto;
}
```

```css
.something {
  margin: 0 auto;
}
```

```css
.something {
  margin-left: auto;
  margin-right: auto;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # text-align |
| CSS Text Module Level 3 # text-align-property |

Browser compatibilidade
-----------------------

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

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

* `margin:auto`, `margin-left:auto` (en-US), `vertical-align`


font-family - CSS

font-family
===========

Resumo
------

A propriedade `font-family do` CSS permite que se faça uma lista de prioridades de familias de fontes e/ou nomes genéricos de famílias a serem especificados para um elemento selecionado. Ao contrário da maioria das demais propriedades CSS, os valores são separados por vírgula para indicar quais são as alternativas. O Browser irá utilizar a primeira fonte da lista que for encontrada no computador, ou poderá fazer o dowload utilizando a informação contida na regra `@font-face`.

Programadores WEB devem sempre adicionar pelo menos uma família genérica para a lista de `font-family`, já que não há garantia que aquela fonte específica está instalada no computador, ou possa ser baixada pela regra `@font-face`. A família genérica permite o browser selecionar uma fonte aceita pelo computador, quando necessário.

É também conveniente usar de antemão a propriedade `font` (en-US) para definir a `font-size` e outras propriedades relacionadas a fonte todas de uma só vez.

**Nota:** A propriedade `font-family` especifica a lista de fontes, da prioridade mais alta para a mais baixa.```
 A seleção de fontes não para simplesmente na primeira fonte nomeada na lista que está no sistema do usuário. Em vez disso, a seleção de fontes é feita um caractere de cada vez, para que, se uma fonte disponível não tiver um glifo que possa exibir um caracter necessário, as fontes disponíveis mais tarde sejam tentadas. No entanto, isso não funciona no Internet Explorer 6 ou anterior.

Quando uma fonte está disponível apenas em alguns estilos, variantes ou tamanhos, essas propriedades também podem influenciar qual família de fontes é escolhida.

|  |  |
| --- | --- |
| Initial value | depends on user agent |
| 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
------
```

Formal syntax:
```
font-family =
  [ (en-US) <family-name> | (en-US) <generic-family> ] (en-US)# (en-US)

<family-name> =
  <string> (en-US)         | (en-US)
  <custom-ident> (en-US)+ (en-US)

<generic-family> =
  generic( <custom-ident> (en-US)+ (en-US) )  | (en-US)
  <string> (en-US)                    | (en-US)
  <custom-ident> (en-US)+ (en-US)

```

```
```

font-family: Gill Sans Extrabold, sans-serif
font-family: "Goudy Bookletter 1911", sans-serif

font-family: sans-serif
font-family: serif
font-family: fantasy
font-family: cursive
font-family: monospace

font-family: inherit
```

### Valores

|  |  |
| --- | --- |
| `<family-name>` |
 O nome de uma fonte. Por exemplo, "Times" e "Helvetica" são font
 families. Nomes de fonte-família contém espaços em branco para serem
 citados..
  |
| `<generic-name>` |
 Generic font families are a fallback mechanism, a means of preserving
 some of the style sheet author's intent in case when none of the
 specified fonts are available. Generic family names are keywords and
 must not be quoted. A generic font family should be the a last
 alternative in the list of font family names.

`serif`

 Glyphs have finishing strokes, flared or tapering ends, or have
 actual serifed endings.E.g. Palatino, "Palatino Linotype",
 Palladio, "URW Palladio", serif

`sans-serif`

 Glyphs have stroke endings that are plain.E.g. 'Trebuchet MS',
 'Liberation Sans', 'Nimbus Sans L', sans-serif

`monospace`

 All glyphs have the same fixed width.E.g. "DejaVu Sans Mono",
 Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console",
 monospace

`cursive`

 Glyphs in cursive fonts generally have either joining strokes or
 other cursive characteristics beyond those of italic typefaces. The
 glyphs are partially or completely connected, and the result looks
 more like handwritten pen or brush writing than printed letterwork.

`fantasy`

 Fantasy fonts are primarily decorative fonts that contain playful
 representations of characters.

 |

### Valid family names

Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means that punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

For example, the following declarations are valid:
```

font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;
```

The following declarations are **invalid**:
```

font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;
```

Examples
--------

### Example 1

```css
body {
  font-family: "Gill Sans Extrabold", Helvetica, sans-serif;
}

.receipt {
  font-family: Courier, "Lucida Console", monospace;
}
```

### Example 2

```css
.exampleserif {
  font-family: Times, "Times New Roman", Georgia, serif;
}

.examplesansserif {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.examplemonospace {
  font-family: "Lucida Console", Courier, monospace;
}

.examplecursive {
  font-family: cursive;
}

.examplefantasy {
  font-family: fantasy;
}
```

```html

This is an example of a serif font.

This is an example of a sans-serif font.

This is an example of a monospace font.

This is an example of a cursive font.

This is an example of a fantasy font.

```

#### Live Sample

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # generic-font-families |
| CSS Fonts Module Level 4 # font-family-prop |

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

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


flex - CSS

flex
====

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

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

* Learn more
* See full compatibility
* Report feedback
A propriedade flex do CSS, define como um ítem será posicionado para no espaço disponível dentro de seu container.

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

Propriedades
------------

Esta propriedade é uma abreviação das seguintes propriedades CSS:

* `flex-grow` (en-US)
* `flex-shrink` (en-US)
* `flex-basis` (en-US)
```

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
</div>

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item initial">initial</div>
  <div class="item initial">initial</div>
</div>

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
  <div class="item none">none</div>
</div>

<div class="flex-container">
  <div class="item initial">initial</div>
  <div class="item none">none</div>
  <div class="item none">none</div>
</div>

<div class="flex-container">
  <div class="item four">4</div>
  <div class="item two">2</div>
  <div class="item one">1</div>
</div>
```

```
\* {
  box-sizing: border-box;
}

.flex-container {
  background-color: #f4f7f8;
  resize: horizontal;
  overflow: hidden;
  display: flex;
  margin: 1em;
}

.item {
  margin: 1em;
  padding: 0.5em;
  width: 110px;
  min-width: 0;
  background-color: #1b5385;
  color: white;
  font-family: monospace;
  font-size: 13px;
}

.initial {
  flex: initial;
}

.auto {
  flex: auto;
}

.none {
  flex: none;
}

.four {
  flex: 4;
}

.two {
  flex: 2;
}

.one {
  flex: 1;
}
```

By default flex items don't shrink below their minimum content size. To change this, set the item's `min-width` (en-US) or `min-height`.

Sintaxe
-------

```css
/\* Propriedades principais \*/
flex: auto;
flex: initial;
flex: none;

/\* Valor único, sem unidade: flex-grow \*/
flex: 2;

/\* Valor único, unidade width/height: flex-basis \*/
flex: 10em;
flex: 30%;
flex: min-content;

/\* Dois valores: flex-grow | flex-basis \*/
flex: 1 30px;

/\* Dois valores: flex-grow | flex-shrink \*/
flex: 2 2;

/\* Três valores: flex-grow | flex-shrink | flex-basis \*/
flex: 2 2 10%;

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

The `flex` property may be specified using one, two, or three values.

* **One-value syntax**: the value must be one of:
    + a `<number>`: In this case it is interpreted as `flex: <number> 1 0`; the `<flex-shrink>` value is assumed to be 1 and the `<flex-basis>` value is assumed to be `0`.
    + one of the keywords: `none`, `auto`, or `initial`.
* **Two-value syntax**: the first value must be a `<number>` and it is interpreted as `<flex-grow>`. The second value must be one of:
    + a `<number>`: then it is interpreted as `<flex-shrink>`.
    + a valid value for `width`: then it is interpreted as `<flex-basis>`.
* **Three-value syntax:** the values must be in the following order:
    1. a `<number>` for `<flex-grow>`.
    2. a `<number>` for `<flex-shrink>`.
    3. a valid value for `width` for `<flex-basis>`.
### Values

`initial`

The item is sized according to its `width` and `height` properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting "`flex: 0 1 auto`".

`auto`

The item is sized according to its `width` and `height` properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting "`flex: 1 1 auto`".

`none`

The item is sized according to its `width` and `height` properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting "`flex: 0 0 auto`".

`<'flex-grow'>`

Defines the `flex-grow` (en-US) of the flex item. Negative values are considered invalid. Defaults to `1` when omitted.

`<'flex-shrink'>`

Defines the `flex-shrink` (en-US) of the flex item. Negative values are considered invalid. Defaults to `1` when omitted.

`<'flex-basis'>`

Defines the `flex-basis` (en-US) of the flex item. A preferred size of `0` must have a unit to avoid being interpreted as a flexibility. Defaults to `0` when omitted.

### Formal syntax
```

flex =
  none                                                | (en-US)
  [ (en-US) <'flex-grow'> <'flex-shrink'>? (en-US) || (en-US) <'flex-basis'> ] (en-US)

```

Example
-------

```css
#flex-container {
  display: flex;
  flex-direction: row;
}

#flex-container > .flex-item {
  flex: auto;
}

#flex-container > .raw-item {
  width: 5rem;
}
```

```html
<div id="flex-container">
  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
  <div class="raw-item" id="raw">Raw box</div>
</div>
```

```
var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function () {
  raw.style.display = raw.style.display == "none" ? "block" : "none";
});
```

```
#flex-container {
  width: 100%;
  font-family: Consolas, Arial, sans-serif;
}

#flex-container > div {
  border: 1px solid #f00;
  padding: 1rem;
}

#flex-container > .raw-item {
  border: 1px solid #000;
}
```

### Result

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

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-property |

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `flex-grow` (en-US): `0`
* `flex-shrink` (en-US): `1`
* `flex-basis` (en-US): `auto`
 |
| Aplica-se a | flex items, including in-flow pseudo-elements |
| Inherited | não |
| Computed value | as each of the properties of the shorthand:* `flex-grow` (en-US): as specified
* `flex-shrink` (en-US): as specified
* `flex-basis` (en-US): as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* `flex-grow` (en-US): a number
* `flex-shrink` (en-US): a number
* `flex-basis` (en-US): a length, percentage or calc();
 |

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

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

See also
--------

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Controlling Ratios of flex items along the main axis (en-US)*


contain - CSS

contain
=======

Baseline 2023
-------------

Newly availableSince February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* 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.

A propriedade **`contain`** permite que um autor indique que elemento e seus conteúdos são, na medida do possível, *independente* do resto da árvore do documento. Isso permite que o navegador recalcule o layout, estilo, pintura, tamanho ou alguma combinação deles para uma área limitada do DOM e não da página inteira.

```css
/\* Sem contenção de layout. \*/
contain: none;

/\* Ativa a contenção para layout, estilo, pintura, e tamanho. \*/
contain: strict;

/\* Ativa a contenção para layout, estilo, e pintura. \*/
contain: content;

/\* Ativa a contenção para um elemento. \*/
contain: size;

/\* Ativa a contenção de layout para um elemento. \*/
contain: layout;

/\* Ativa a contenção de estilo para um elemento. \*/
contain: style;

/\* Ativa a contenção de pintura para um elemento. \*/
contain: paint;
```

Esta propriedade é útil em páginas que contêm um monte de widgets que são todos independentes, uma vez que pode ser usado para impedir que as regras CSS de um widget mude outras coisas na página.

|  |  |
| --- | --- |
| Initial value | `none` |
| Aplica-se a | all elements |
| Inherited | não |
| Computed value | as specified |
| Animation type | Not animatable |

Sintaxe
-------

### Valores

`none`

Indica que o elemento processa como normal, sem contenção aplicada.

strict

Indica que todas as regras de contenção são aplicadas ao elemento. Isso equivale a`contain: size layout style paint`.

content

Indica que todas as regras de contenção, exceto *size* são aplicadas ao elemento. Isso equivale a `contain: layout style paint`.

size

Indica que o elemento pode ser dimensionado sem a necessidade de examinar seus dependentes para alterações de tamanho.

layout

Indica que nada fora do elemento pode afetar seu layout interno e vice-versa.

style

Indica que, para propriedades que podem ter efeitos em mais do que apenas um elemento e seus descendentes, esses efeitos não escape o elemento que contém.

paint

Indica que os descendentes do elemento não são exibidos fora de seus limites. Se um elemento estiver fora da tela ou de outra forma não visível, seus descendentes também são garantidos para não ser visível.

### Sintaxe Formal
```

contain =
  none                                  | (en-US)
  strict                                | (en-US)
  content                               | (en-US)
  [ (en-US) size || (en-US) layout || (en-US) style || (en-US) paint ] (en-US)

```

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

| Specification |
| --- |
| CSS Containment Module Level 2 # contain-property |

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

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


mask - CSS

mask
====

Resumo
------

A propriedade máscara no CSS permite aos usuários alterarem a visibilidade de um item parcialmente ou totalmente escondendo o item. Isso é obtido por qualquer mascaramento ou cortes na imagem em pontos específicos.

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `mask-image` (en-US): `none`
* `mask-mode` (en-US): `match-source`
* `mask-repeat` (en-US): `repeat`
* `mask-position` (en-US): `center`
* `mask-clip` (en-US): `border-box`
* `mask-origin` (en-US): `border-box`
* `mask-size` (en-US): `auto`
* `mask-composite` (en-US): `add`
 |
| Aplica-se a | all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements |
| Inherited | não |
| Percentages | as each of the properties of the shorthand:* `mask-position` (en-US): refer to size of mask painting area minus size of mask layer image (see the text for `background-position` (en-US))
 |
| Computed value | as each of the properties of the shorthand:* `mask-image` (en-US): as specified, but with `url` (en-US) values made absolute
* `mask-mode` (en-US): as specified
* `mask-repeat` (en-US): Consists of two keywords, one per dimension
* `mask-position` (en-US): Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.
* `mask-clip` (en-US): as specified
* `mask-origin` (en-US): as specified
* `mask-size` (en-US): as specified, but with relative lengths converted into absolute lengths
* `mask-composite` (en-US): as specified
 |
| Animation type | as each of the properties of the shorthand:* `mask-image` (en-US): discrete
* `mask-mode` (en-US): discrete
* `mask-repeat` (en-US): discrete
* `mask-position` (en-US): a repeatable list
* `mask-clip` (en-US): discrete
* `mask-origin` (en-US): discrete
* `mask-size` (en-US): a repeatable list
* `mask-composite` (en-US): discrete
 |
| Creates stacking context | yes |

Sintaxe
-------

```css
/\* Palavra-Chave \*/
mask: none;

/\* Valor das Imagens \*/
mask: url(mask.png); /\* Imagem bitmap usada da máscara \*/
mask: url(masks.svg#star); /\* Elemento dentro do SVG usado como máscara \*/

/\* Valores Combinados \*/
mask: url(masks.svg#star) luminance; /\* Elemento dentro do SVG usado como máscara de luminância \*/
mask: url(masks.svg#star) 40px 20px; /\* Elemento dentro do SVG usado como máscara posicionada 40px do topo e 20px da esquerda \*/
mask: url(masks.svg#star) 0 0/50px 50px; /\* Elemento dentro do SVG usado como máscara com a largura e altura de 50px \*/
mask: url(masks.svg#star) repeat-x; /\* Elemento dentro do SVG usado como máscara repedida horizontalmente \*/
mask: url(masks.svg#star) stroke-box; /\* Elemento dentro do SVG usado como máscara extendendo-se até a caixa delimitada pela linha \*/
mask: url(masks.svg#star) exclude; /\* Elemento dentro do SVG usado como máscara e combinado com o fundo usando partes que não se sobrepõem \*/

/\* Valores Globais \*/
mask: inherit;
mask: initial;
mask: unset;
```

### Valores

Se o valor é um valor URI, o elemento apontado pelo URI é usado como uma máscara SVG.
```

mask =
  <mask-layer># (en-US)

<mask-layer> =
  <mask-reference>              || (en-US)
  <position> [ (en-US) / <bg-size> ] (en-US)? (en-US)   || (en-US)
  <repeat-style>                || (en-US)
  <geometry-box>                || (en-US)
  [ (en-US) <geometry-box> | (en-US) no-clip ] (en-US)  || (en-US)
  <compositing-operator>        || (en-US)
  <masking-mode>

<mask-reference> =
  none           | (en-US)
  <image>        | (en-US)
  <mask-source>

<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) && (en-US) [ (en-US) top | (en-US) center | (en-US) bottom ] (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) [ (en-US) left | (en-US) right ] (en-US) <length-percentage> ] (en-US) && (en-US) [ (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage> ] (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)

<geometry-box> =
  <shape-box>  | (en-US)
  fill-box     | (en-US)
  stroke-box   | (en-US)
  view-box

<compositing-operator> =
  add        | (en-US)
  subtract   | (en-US)
  intersect  | (en-US)
  exclude

<masking-mode> =
  alpha         | (en-US)
  luminance     | (en-US)
  match-source

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

<mask-source> =
  <url>

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

<shape-box> =
  <visual-box>  | (en-US)
  margin-box

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

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

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

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

```

Exemplos
--------

```css
.target {
  mask: url(#c1);
}

.anothertarget {
  mask: url(resources.svg#c1);
}
```

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask |

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

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

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

* `clip-path` (en-US), `filter` (en-US)
* Aplicanto efeitos SVG no conteúdo HTML (en-US)
* SVG


@import - CSS

@import
=======

Sumário
-------

A Regra Atribuída (at-rule) CSS **`@import`** é usado para importar regras de estilo de outras folhas de estilo. Estas regras devem preceder todos os outros tipos de regras, exceto as regrasde @charset ; uma vez que não é um Declaração aninhada, `@import não pode ser usado dentro do` grupo condicional de regras atribuídas (at-rules).

Assim como os agentes do usuário podem evitar a recuperação de recursos para os tipos de mídia incompatíveis, os autores podem especificar regras @import dependentes de mídia. Estas importações condicionais devem ter media queries separadas por vírgulas após a URI. Na ausência de qualquer consulta de mídia (media queries), a importação é incondicional. Especificando todos para o médio tem o mesmo efeito.

Sintaxe
-------
```

@import url;
@import url list-of-media-queries;
```

where:

*url*

É algo como `<string>` (en-US) ou como `<uri>()` (en-US) representaando o local de onde o recurso será importado. A URL pode ser absoluta ou relativa. Perceba que a URL não precisa, necessariamente, ser um arquivo específico; ela pode especificar o nome do pacotee parcialmente, e o arquivo apropriado será escolhido automaticamente (exemplo: **chrome://communicator/skin/**). Veja aqui para mais informações.

*list-of-media-queries*

É uma lista separada por vírgulas de consultas de mídia (media queries) conidicionando a aplicação das regras de CSS definidas na URL relacionada. Se o navegador não suportar quaisquer consultas de mídia, ele não carregará o recurso relacionado.

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

@import =
  @import [ (en-US) <url> | (en-US) <string> (en-US) ] (en-US) [ (en-US) layer | (en-US) layer( <layer-name> ) ] (en-US)? (en-US) <import-conditions> ;

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

<layer-name> =
  <ident> (en-US) [ (en-US) '.' <ident> (en-US) ] (en-US)\* (en-US)

<import-conditions> =
  [ (en-US) supports( [ (en-US) <supports-condition> | (en-US) <declaration> ] (en-US) ) ] (en-US)? (en-US) <media-query-list>? (en-US)

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

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

<supports-condition> =
  not <supports-in-parens>                            | (en-US)
  <supports-in-parens> [ (en-US) and <supports-in-parens> ] (en-US)\* (en-US)  | (en-US)
  <supports-in-parens> [ (en-US) or <supports-in-parens> ] (en-US)\* (en-US)

<supports-in-parens> =
  ( <supports-condition> )  | (en-US)
  <supports-feature>        | (en-US)
  <general-enclosed>

<supports-feature> =
  <supports-decl>

<general-enclosed> =
  [ (en-US) <function-token> <any-value>? (en-US) ) ] (en-US)  | (en-US)
  [ (en-US) ( <any-value>? (en-US) ) ] (en-US)

<supports-decl> =
  ( <declaration> )

```

Exemplos
--------

```css
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import "custom.css";
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url("landscape.css") screen and (orientation: landscape);
```

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # at-import |

Browser compatibilidade
-----------------------

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


Seletor universal - CSS

Seletor universal
=================

O **seletor universal** do CSS (`*`) aplica estilos a elementos de qualquer tipo.

```css
/\* Seleciona todos os elementos \*/
\* {
  color: green;
}
```

A partir do CSS3, o asterisco pode ser combinado com `namespaces` (en-US):

* `ns|*` - aplica a todos os elementos no namespace *ns*
* `*|*` - aplica a todos elementos
* `|*` - aplica a todos os elementos que não tem namespaces declarados
Sintaxe
-------
```

* { propriedades de estilo }
```

O asterisco é opcional para seletores simples. Por exemplo, `*.atencao` e `.atencao` são equivalentes.

Exemplos
--------

### CSS

```css
\* [lang^="pt"] {
  color: green;
}

\*.atencao {
  color: red;
}

\*#conteudoprincipal {
  border: 1px solid blue;
}

.flutuando {
  float: left;
}

/\* automaticamente aplica clear ao próximo irmão após o elemento com a classe .flutuando \*/
.flutuando + \* {
  clear: left;
}
```

### HTML

```html
<p class="atencao">
  <span lang="pt-br">Um span verde</span> em um parágrafo vermelho.
</p>
<p id="conteudoprincipal" lang="pt-pt">
  <span class="atencao">Um span vermelho</span> em um parágrafo verde.
</p>
```

### Resultado

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

| Specification |
| --- |
| Selectors Level 4 # the-universal-selector |

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

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


padding-left - CSS

padding-left
============

Resumo
------

`A propriedade CSS padding-left` é um elemento que define o espaço de preenchimento obrigatório no lado esquerdo de um elemento. padding area é o espaço entre o conteúdo do elemento e a borda. Um valor negativo não é permitido.

|  |  |
| --- | --- |
| Initial value | `0` |
| Aplica-se a | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` and `::first-line`. |
| Inherited | não |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length |

Syntax
------
```

Syntax formal:
```
padding-left =
  <length-percentage [0,∞]>

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

```

```
```

padding-left: 0.5em;
padding-left: 0;
padding-left: 2cm;
padding-left: 10%

padding-left: inherit
```

### Valores

`<length>`

Especifica uma largura fixa positiva. Consulte `<length>` (en-US) para obter detalhes.

`<percentage>`

Um percentual em relação a largura do bloco.

Exemplos
--------

```css
.content {
  padding-left: 5%;
}
.sidebox {
  padding-left: 10px;
}
```

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-physical |

Compatibilidade do Navegador
----------------------------

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


text-decoration - CSS

text-decoration
===============

Resumo
------

A propriedade **`text-decoration`** do CSS é usada para definir a formatação de `underline`, `overline`, `line-through` ou `blink`. As decorações underline e overline são posicionadas abaixo e acima do texto (respectivamente), e line-through cortando-o.

A propriedade text-decoration desenha em elementos descendentes. Isso significa que não é possivel desabilitar em um descendente uma decoração que foi especificada em um de seus antecessores. Por exemplo, no markup `<p>Esse texto tem <em>alguns elementos enfatizados</em> nele.</p>`, a regra de estilo `p { text-decoration: underline; }` faria com que todo o parágrafo fosse sublinhado. A regra `em { text-decoration: none; }` não causaria qualquer mudanca; o parágrafo inteiro ainda estaria sublinhado. Entretanto, a regra `em { text-decoration: overline; }` iria decorar o trecho "alguns elementos enfatizados".

**Nota:** CSS 3 transformou a propriedade Text-Decoration para forma reduzida, usando as seguintes propriedades: `text-decoration-color` (en-US), `text-decoration-line` (en-US), e `text-decoration-style`. Como em outras propriedades reduzidas, isso significa que ele reseta o valor de cada uma para padrão se não for explicitamente especificada na forma reduzida.

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `text-decoration-color` (en-US): `currentcolor`
* `text-decoration-style`: `solid`
* `text-decoration-line` (en-US): `none`
 |
| Aplica-se a | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | não |
| Computed value | as each of the properties of the shorthand:* `text-decoration-line` (en-US): as specified
* `text-decoration-style`: as specified
* `text-decoration-color` (en-US): computed color
* `text-decoration-thickness` (en-US): as specified
 |
| Animation type | as each of the properties of the shorthand:* `text-decoration-color` (en-US): a color
* `text-decoration-style`: discrete
* `text-decoration-line` (en-US): discrete
* `text-decoration-thickness` (en-US): by computed value type
 |

Sintaxe
-------

```css
/\* Valores Chave \*/
text-decoration: none; /\* Sem decoração \*/
text-decoration: underline red; /\* Sublinhado vermelho \*/
text-decoration: underline wavy red; /\* Sublinhado ondulado vermelho \*/

/\* Valores Globais \*/
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;
```

### Valores

A propriedade `text-decoration` é escrita de forma reduzida e pode usar os valores de cada uma das propriedades: `text-decoration-line` (en-US), `text-decoration-color` (en-US), e `text-decoration-style`

### Sintaxe Formal
```

text-decoration =
  <'text-decoration-line'>   || (en-US)
  <'text-decoration-style'>  || (en-US)
  <'text-decoration-color'>

```

Exemplos
--------

```css
h1.under {
  text-decoration: underline;
}
h1.over {
  text-decoration: overline;
}
p.line {
  text-decoration: line-through;
}
p.blink {
  text-decoration: blink;
}
a.none {
  text-decoration: none;
}
p.underover {
  text-decoration: underline overline;
}
```

```html
<h1 class="under">Underlined Header</h1>
<p class="line">If you want to strike out text, use line-through.</p>
<p class="blink">
  This text might blink for you - if you use Explorer, it will not.
</p>
<h1 class="over">and now an overlined header.</h1>
<p>
  This
  <a class="none" href="textdecoration.html">link will not be underlined</a>, as
  most links are by default. Be careful with removing the text decoration on
  links since most users depend on the underline to signify a hyperlink.
</p>
<p class="underover">This text has both underline and overline.</p>
```

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

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-property |

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

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

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

* O atributo `list-style` (en-US) controla a aparência dos itens em listas `<ol>` e `<ul>` no HTML.


initial - CSS

initial
=======

A palavra-chave CSS **`initial`** CSS se aplica ao valor inicial (ou padrão) de uma propriedade para um elemento. Este valor inicial é definido pelo navegador. Este valor pode ser aplicado em qualquer propriedade CSS.

Isto inclui também o atalho CSS `all` (en-US), no qual o `initial` pode ser utilizado para restaurar todas as propriedades CSS para o seu estado inicial.

**Nota:** Em propriedades herdadas, O valor inicial pode ser inesperado. Neste caso, considere o uso dos termos {cssxref("inherit")}}, `unset` (en-US), ou `revert` (en-US).

Exemplo
-------

#### HTML

```html
<p>
  <span>Este texto é vermelho.</span>
  <em>Este texto está em sua cor inicial (normalmente preto).</em>
  <span>Este texto está em vermelho de novo :) </span>
</p>
```

#### CSS

```css
p {
  color: red;
}

em {
  color: initial;
}
```

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # initial |

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

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

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

* Utilize `unset` (en-US) para definir uma propriedade para o seu valor herdado caso haja herança, ou para o seu valor inicial, caso não haja..
* Utilize `revert` (en-US) para redefinir uma propriedade ao valor estabelecido pela folha de estilo user-agent (ou por seus estilos de usuário, se existir algum).
* Utilize `inherit` (en-US) para fazer uma propriedade de elemento a mesma de seu elemento pai.
* A propriedade `all` (en-US) permite que você redefina todas as propriedades para os seus estados initial, inherited, reverted, or unset de uma vez.


:enabled - CSS

:enabled
========

A pseudo-classe CSS **`:enabled`** representa qualquer elemento ativado. Um elemento é ativado se puder ser ativado (selecionado, clicado, digitado etc.) ou aceitar o foco. O elemento também possui um estado desativado, no qual não pode ser ativado nem aceitar foco.

```css
/\* Seleciona qualquer <input> ativado \*/
input:enabled {
  color: blue;
}
```

Sintaxe
-------

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

O exemplo a seguir torna a cor do texto e do botão `<input>` verde quando ativada e cinza quando desativada. Isso ajuda o usuário a entender quais elementos podem ser interagidos..

### HTML

```html
<form action="url\_of\_form">
  <label for="FirstField">First field (enabled):</label>
  <input type="text" id="FirstField" value="Lorem" /><br />

  <label for="SecondField">Second field (disabled):</label>
  <input type="text" id="SecondField" value="Ipsum" disabled="disabled" /><br />

  <input type="button" value="Submit" />
</form>
```

### CSS

```css
input:enabled {
  color: #2b2;
}

input:disabled {
  color: #aaa;
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # selector-enabled |
| Selectors Level 4 # enableddisabled |

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

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

See also
--------

* `:disabled`