<color> - CSS

<color>
=======

Sumário
-------

O tipo de dado CSS `<color>` indica uma cor no espaço sRGB. Uma cor pode ser descrita em qualquer uma destas formas:

* usando uma *palavra-chave*
* usando o sistema de coordenada-cúbica RGB (via #-hexadecimal ou das notações funcional `rgb()` e `rgba()`)
* usando o sistema de coordenada-cilíndrica HSL (via `hsl()` e notações funcionais `hsla()` )

Observe que a lista de valores de cores aceitas foi estendida à medida que a especificação evoluiu, culminando com as cores CSS3 mais recentes.

Associado à cor no espaço sRGB, um valor <color> também pode consistir de uma coordenada de *valor de transparência* canal-alfa, Indicando como a cor deve se composta com sua cor de fundo.

Embora os valores de cores CSS sejam definidos com precisão, eles podem aparecer de forma diferente em dispositivos de saída diferentes. A maioria deles não está calibrada e alguns navegadores não suportam o perfil de cores dos dispositivos de saída. Sem estes, a renderização de cores pode variar muito.

**Nota:** A recomendação WCAG 2.0 do W3C aconselha fortemente aos autores web não usarem cor como o único meio para transmitir uma mensagem específica, ação ou resultado. Alguns usuários têm problemas em distinguir cores e as informações transmitidas podem não ser compreendidas. Claro, isso não impede o uso da cor, mas o seu uso apenas como o único meio para descrever certas coisas (veja Cor e contraste de cor (en-US) para mais informações).

Interpolação
------------

Valores do tipo de dados CSS `<color>` podem ser interpolados para realizar animações ou para criar valores <gradient>. Nesse caso, eles são interpolados em cada um de seus componentes vermelho, verde, azul, cada um manipulado como um número real, de ponto flutuante. Observe que a interpolação de cores ocorre no espaço de cores sRGBA alfa-pré-multiplicado para evitar que cores cinzentas inesperadas apareçam. Nas animações, a velocidade da interpolação é determinada pela função de temporização (en-US) associada à animação.

Valores
-------

Existem várias maneiras de descrever um valor <`color>`.

### Palavras-chave de cores

As palavras-chave de cor são identificadores não sensíveis a maiúsculas e minúsculas que representam uma cor específica, ex.: `red`, `blue`, `brown`, ou `lightseagreen`. O nome descreve a cor, embora seja principalmente artificial. A lista de valores aceitos variou muito ao longo das diferentes especificações:

* CSS nível 1 aceita apenas16 cores básicas, denominadas *cores VGA* já que foram tiradas do conjunto de cores exibíveis das placas gráficas VGA.
* CSS nível 2 Adicionou a palavra-chave `orange`.
* Desde o início, os navegadores aceitaram outras cores, principalmente a lista de cores nomeadas X11 já que alguns dos primeiros navegadores foram aplicações X11, embora com algumas diferenças. O SVG 1.0 foi o primeiro padrão a definir formalmente essas palavras-chave; As cores no CSS nível 3 também formalmente definiram essas palavras-chave. Elas são muitas vezes referidas como *palavras-chave de cor estendida*, *cores X11* ou *cores SVG*.

Existem algumas restrições a serem consideradas ao usar palavras-chave:

* Com exceção das 16 cores básicas comuns com HTML, as outras não podem ser usadas em HTML. O HTML vai converter esses valores desconhecidos com um algoritmo específico levando a cores completamente diferentes. Essas palavras-chave só devem ser usadas em SVG & CSS.
* Palavras-chave desconhecidas tornam a propriedade CSS inválida. Propriedades inválidas sendo ignoradas, a cor não terá efeito. Esse é um comportamento diferente do HTML.
* Nenhuma palavra-chave de core definida em CSS têm qualquer transparência — eles são cores simples, sólidas.
* Várias palavras-chave indicam as mesmas cores:
    + `darkgray` / `darkgrey`
    + `darkslategray` / `darkslategrey`
    + `dimgray` / `dimgrey`
    + `lightgray` / `lightgrey`
    + `lightslategray` / `lightslategrey`
    + `gray` / `grey`
    + `slategray` / `slategrey`
* Embora os nomes das palavras-chave tenham sido tomadas pelos nomes de cores X11 habituais, a cor pode divergir da cor do sistema correspondente em sistemas X11 como estes são adaptados para o hardware específico pelo fabricante.

| Especificação | Cor | Palavra-chave | valores hex RGB | Resultado |
| --- | --- | --- | --- | --- |
| CSS Level 1 |  | `black` | `#000000` |  |
|  | `silver` | `#c0c0c0` |  |
|  | `gray` | `#808080` |  |
|  | `white` | `#ffffff` |  |
|  | `maroon` | `#800000` |  |
|  | `red` | `#ff0000` |  |
|  | `purple` | `#800080` |  |
|  | `fuchsia` | `#ff00ff` |  |
|  | `green` | `#008000` |  |
|  | `lime` | `#00ff00` |  |
|  | `olive` | `#808000` |  |
|  | `yellow` | `#ffff00` |  |
|  | `navy` | `#000080` |  |
|  | `blue` | `#0000ff` |  |
|  | `teal` | `#008080` |  |
|  | `aqua` | `#00ffff` |  |
| CSS Level 2 (Revision 1) |  | `orange` | `#ffa500` |  |
| CSS Color Module Level 3 |  | `aliceblue` | `#f0f8ff` |  |
|  | `antiquewhite` | `#faebd7` |  |
|  | `aquamarine` | `#7fffd4` |  |
|  | `azure` | `#f0ffff` |  |
|  | `beige` | `#f5f5dc` |  |
|  | `bisque` | `#ffe4c4` |  |
|  | `blanchedalmond` | `#ffebcd` |  |
|  | `blueviolet` | `#8a2be2` |  |
|  | `brown` | `#a52a2a` |  |
|  | `burlywood` | `#deb887` |  |
|  | `cadetblue` | `#5f9ea0` |  |
|  | `chartreuse` | `#7fff00` |  |
|  | `chocolate` | `#d2691e` |  |
|  | `coral` | `#ff7f50` |  |
|  | `cornflowerblue` | `#6495ed` |  |
|  | `cornsilk` | `#fff8dc` |  |
|  | `crimson` | `#dc143c` |  |
|  | `cyan` | `#00ffff` |  |
|  | `darkblue` | `#00008b` |  |
|  | `darkcyan` | `#008b8b` |  |
|  | `darkgoldenrod` | `#b8860b` |  |
|  | `darkgray` | `#a9a9a9` |  |
|  | `darkgreen` | `#006400` |  |
|  | `darkgrey` | `#a9a9a9` |  |
|  | `darkkhaki` | `#bdb76b` |  |
|  | `darkmagenta` | `#8b008b` |  |
|  | `darkolivegreen` | `#556b2f` |  |
|  | `darkorange` | `#ff8c00` |  |
|  | `darkorchid` | `#9932cc` |  |
|  | `darkred` | `#8b0000` |  |
|  | `darksalmon` | `#e9967a` |  |
|  | `darkseagreen` | `#8fbc8f` |  |
|  | `darkslateblue` | `#483d8b` |  |
|  | `darkslategray` | `#2f4f4f` |  |
|  | `darkslategrey` | `#2f4f4f` |  |
|  | `darkturquoise` | `#00ced1` |  |
|  | `darkviolet` | `#9400d3` |  |
|  | `deeppink` | `#ff1493` |  |
|  | `deepskyblue` | `#00bfff` |  |
|  | `dimgray` | `#696969` |  |
|  | `dimgrey` | `#696969` |  |
|  | `dodgerblue` | `#1e90ff` |  |
|  | `firebrick` | `#b22222` |  |
|  | `floralwhite` | `#fffaf0` |  |
|  | `forestgreen` | `#228b22` |  |
|  | `gainsboro` | `#dcdcdc` |  |
|  | `ghostwhite` | `#f8f8ff` |  |
|  | `gold` | `#ffd700` |  |
|  | `goldenrod` | `#daa520` |  |
|  | `greenyellow` | `#adff2f` |  |
|  | `grey` | `#808080` |  |
|  | `honeydew` | `#f0fff0` |  |
|  | `hotpink` | `#ff69b4` |  |
|  | `indianred` | `#cd5c5c` |  |
|  | `indigo` | `#4b0082` |  |
|  | `ivory` | `#fffff0` |  |
|  | `khaki` | `#f0e68c` |  |
|  | `lavender` | `#e6e6fa` |  |
|  | `lavenderblush` | `#fff0f5` |  |
|  | `lawngreen` | `#7cfc00` |  |
|  | `lemonchiffon` | `#fffacd` |  |
|  | `lightblue` | `#add8e6` |  |
|  | `lightcoral` | `#f08080` |  |
|  | `lightcyan` | `#e0ffff` |  |
|  | `lightgoldenrodyellow` | `#fafad2` |  |
|  | `lightgray` | `#d3d3d3` |  |
|  | `lightgreen` | `#90ee90` |  |
|  | `lightgrey` | `#d3d3d3` |  |
|  | `lightpink` | `#ffb6c1` |  |
|  | `lightsalmon` | `#ffa07a` |  |
|  | `lightseagreen` | `#20b2aa` |  |
|  | `lightskyblue` | `#87cefa` |  |
|  | `lightslategray` | `#778899` |  |
|  | `lightslategrey` | `#778899` |  |
|  | `lightsteelblue` | `#b0c4de` |  |
|  | `lightyellow` | `#ffffe0` |  |
|  | `limegreen` | `#32cd32` |  |
|  | `linen` | `#faf0e6` |  |
|  | `mediumaquamarine` | `#66cdaa` |  |
|  | `mediumblue` | `#0000cd` |  |
|  | `mediumorchid` | `#ba55d3` |  |
|  | `mediumpurple` | `#9370db` |  |
|  | `mediumseagreen` | `#3cb371` |  |
|  | `mediumslateblue` | `#7b68ee` |  |
|  | `mediumspringgreen` | `#00fa9a` |  |
|  | `mediumturquoise` | `#48d1cc` |  |
|  | `mediumvioletred` | `#c71585` |  |
|  | `midnightblue` | `#191970` |  |
|  | `mintcream` | `#f5fffa` |  |
|  | `mistyrose` | `#ffe4e1` |  |
|  | `moccasin` | `#ffe4b5` |  |
|  | `navajowhite` | `#ffdead` |  |
|  | `oldlace` | `#fdf5e6` |  |
|  | `olivedrab` | `#6b8e23` |  |
|  | `orangered` | `#ff4500` |  |
|  | `orchid` | `#da70d6` |  |
|  | `palegoldenrod` | `#eee8aa` |  |
|  | `palegreen` | `#98fb98` |  |
|  | `paleturquoise` | `#afeeee` |  |
|  | `palevioletred` | `#db7093` |  |
|  | `papayawhip` | `#ffefd5` |  |
|  | `peachpuff` | `#ffdab9` |  |
|  | `peru` | `#cd853f` |  |
|  | `pink` | `#ffc0cb` |  |
|  | `plum` | `#dda0dd` |  |
|  | `powderblue` | `#b0e0e6` |  |
|  | `rosybrown` | `#bc8f8f` |  |
|  | `royalblue` | `#4169e1` |  |
|  | `saddlebrown` | `#8b4513` |  |
|  | `salmon` | `#fa8072` |  |
|  | `sandybrown` | `#f4a460` |  |
|  | `seagreen` | `#2e8b57` |  |
|  | `seashell` | `#fff5ee` |  |
|  | `sienna` | `#a0522d` |  |
|  | `skyblue` | `#87ceeb` |  |
|  | `slateblue` | `#6a5acd` |  |
|  | `slategray` | `#708090` |  |
|  | `slategrey` | `#708090` |  |
|  | `snow` | `#fffafa` |  |
|  | `springgreen` | `#00ff7f` |  |
|  | `steelblue` | `#4682b4` |  |
|  | `tan` | `#d2b48c` |  |
|  | `thistle` | `#d8bfd8` |  |
|  | `tomato` | `#ff6347` |  |
|  | `turquoise` | `#40e0d0` |  |
|  | `violet` | `#ee82ee` |  |
|  | `wheat` | `#f5deb3` |  |
|  | `whitesmoke` | `#f5f5f5` |  |
|  | `yellowgreen` | `#9acd32` |  |
| CSS Color Module Level 4 |  | `rebeccapurple` | `#663399` |  |

A cor `rebeccapurple` é equivalente à cor `#639`, e mais informações sobre por que foi introduzida pode ser encontrada neste post no blog Codepen por Trezy "Honoring a Great Man" (em inglês)

### `palavra-chave transparent`

A palavra-chave `transparent` representa uma cor totalmente transparente, isto é, a cor vista será a cor de fundo. Tecnicamente, é um preto com canal alfa no seu valor mínimo e é um atalho para `rgba(0,0,0,0)`.

**Nota:** **Nota histórica**
 A palavra-chave `transparent` não era uma cor verdadeira no CSS nível 2 (Revisão 1). Era uma palavra-chave específica que poderia ser usada no lugar de um valor `<color>` regular em duas propriedades CSS: `background` e `border` (en-US). Ela foi adicionada essencialmente para permitir a substituição de cores sólidas herdadas.

Com o apoio da opacidade através de canais alfal, `transparent` foi redefinida como uma cor verdadeira no Cores CSS nível 3 permitindo seu uso em qualquer lugar onde for exigido um valor para `<color>`, como a propriedade `color`.

### `palavra-chave currentcolor`

A palavra-chave `currentcolor` representa o valor calculado da propriedade `color` dos elementos . Ela permite que as propriedades de cor sejam herdadas por propriedades ou propriedades de elemento filho que não a herdam por padrão.

Ela também pode ser usada em propriedades que herdam o valor calculado da propriedade `color` do elemento e será equivalente à palavra-chave `inherit` nesses elementos, se houver.

#### Exemplo ao vivo

A cor da linha (uma div preenchida com cor) se adapta à cor de sua propriedade `color`, herdada de seu pai.

##### Exemplo 1

```html
<div style="color:darkred">
  A cor deste texto é a mesma da linha:
  <div style="background:currentcolor; height:1px"></div>
  Mais algum texto.
</div>
```

##### Exemplo 2

```html
<div style="color:blue; border-bottom: 1px dashed currentcolor;">
  A cor deste texto é a mesma da linha:
  <div style="background:currentcolor; height:1px"></div>
  Mais algum texto.
</div>
```

### `rgb()`

**Nota:** Na especificação Módulo de cor CSS Color nível 4, a rgba() foi definida como uma função herdada com gramática e comportamento idênticos à rgb(); na verdade, um apelido. Mais para frente, ambas podem aceitar exatamente os mesmos parâmetros.

RGB colors can be expressed through both hexadecimal (prefixed with `#`) and functional (`rgb()`, `rgba()`) notations.

Hexadecimal notation (en-US): `#RGB[A]` or`#RRGGBB[AA]`

`R` (red), `G` (green), `B` (blue), and `A` (alpha) are hexadecimal characters (0–9, A–F). `A` is optional. For example, `#ff0000` is equivalent to `#ff0000ff`. The three-digit notation (`#RGB`) is a shorter version of the six-digit form (`#RRGGBB`). For example, `#f09` is the same color as `#ff0099`. Likewise, the four-digit RGB notation (`#RGBA`) is a shorter version of the eight-digit form (`#RRGGBBAA`). For example, `#0f38` is the same color as `#00ff3388`.

`rgb()` (en-US) or `rgba()` (en-US): `rgb[a](R, G, B[, A])` or `rgb[a](R G B[ / A])`

`R` (red), `G` (green), and `B` (blue) can be either `<number>`s or `<percentage>` (en-US)s, where the number `255` corresponds to `100%`. `A` (alpha) can be a `<number>` between `0` and `1`, or a `<percentage>` (en-US), where the number `1` corresponds to `100%` (full opacity).

```

/* These examples all specify the same RGB color: */

#f03
#F03
#ff0033
#FF0033
rgb(255,0,51)
rgb(255, 0, 51)
rgb(255, 0, 51.2) /* ERROR! Don't use fractions, use integers */
rgb(100%,0%,20%)
rgb(100%, 0%, 20%)
rgb(100%, 0, 20%) /* ERROR! Don't mix up integer and percentage notation */

/* whitespace syntax */
rgb(255 0 0)

/* optional alpha value */
rgb(255,0,0,0.4)  /* 40% opaque red */
rgb(255,0,0,40%)  /* 40% opaque red with percentage value for alpha */
rgb(255 0 0 / 0.4)  /* 40% opaque red */
rgb(255 0 0 / 40%)  /* 40% opaque red with percentage value for alpha */
```

### `hsl()`

**Nota:** In the CSS Color Module Level 4 spec, `hsla()` has been defined as a legacy function with identical grammar and behaviour to `hsl()`; in effect, an alias. Going forward, both can accept exactly the same parameters.

Colors can also be defined via hue, saturation, and lightness, or HSL, by using the `hsl()` functional notation. The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the lightness/darkness, and saturation).

**Hue** is represented as an angle of the color circle (i.e. the rainbow represented in a circle). This angle is given as a unitless `<number>`. By definition **red=0=360**, and the other colors are spread around the circle, so **green=120**, **blue=240**, etc. As an angle, it implicitly wraps around such that -120=240 and 480=120.

 Saturation and lightness are represented as percentages.
 `100%` is full **saturation**, and `0%` is a shade of grey.
 `100%` **lightness** is white, `0%` lightness is black, and `50%` lightness is "normal."

```css
hsl(0,  100%,50%)    /\* red \*/
hsl(30, 100%,50%)
hsl(60, 100%,50%)
hsl(90, 100%,50%)
hsl(120,100%,50%)    /\* green \*/
hsl(150,100%,50%)
hsl(180,100%,50%)
hsl(210,100%,50%)
hsl(240,100%,50%)    /\* blue \*/
hsl(270,100%,50%)
hsl(300,100%,50%)
hsl(330,100%,50%)
hsl(360,100%,50%)    /\* red \*/

hsl(120,100%,25%)    /\* dark green \*/
hsl(120,100%,50%)    /\* green \*/
hsl(120,100%,75%)    /\* light green \*/

hsl(120,100%,50%)    /\* green \*/
hsl(120, 67%,50%)
hsl(120, 33%,50%)
hsl(120,  0%,50%)

hsl(120, 60%,70%)    /\* pastel green \*/

/\* whitespace syntax \*/
hsl(120 60% 70%)  /\* pastel green \*/

/\* angle values for hue component; also accepts rad, grad, turn \*/
hsl(120deg 60% 70%)  /\* pastel green \*/

/\* optional alpha value \*/
hsl(240,100%,50%,0.05)  /\* 5% opaque blue \*/
hsl(240,100%,50%,5%)  /\* 5% opaque blue with percentage value for alpha \*/
hsl(240 100% 50% / 0.05) /\* 5% opaque blue \*/
hsl(240 100% 50% / 5%) /\* 5% opaque blue with percentage value for alpha \*/
```

### `rgba()`

RGB colors can be expressed through both hexadecimal (prefixed with `#`) and functional (`rgb()`, `rgba()`) notations.

Hexadecimal notation (en-US): `#RGB[A]` or`#RRGGBB[AA]`

`R` (red), `G` (green), `B` (blue), and `A` (alpha) are hexadecimal characters (0–9, A–F). `A` is optional. For example, `#ff0000` is equivalent to `#ff0000ff`. The three-digit notation (`#RGB`) is a shorter version of the six-digit form (`#RRGGBB`). For example, `#f09` is the same color as `#ff0099`. Likewise, the four-digit RGB notation (`#RGBA`) is a shorter version of the eight-digit form (`#RRGGBBAA`). For example, `#0f38` is the same color as `#00ff3388`.

`rgb()` (en-US) or `rgba()` (en-US): `rgb[a](R, G, B[, A])` or `rgb[a](R G B[ / A])`

`R` (red), `G` (green), and `B` (blue) can be either `<number>`s or `<percentage>` (en-US)s, where the number `255` corresponds to `100%`. `A` (alpha) can be a `<number>` between `0` and `1`, or a `<percentage>` (en-US), where the number `1` corresponds to `100%` (full opacity).

```css
#f030                /\* 0% opaque red \*/
#F03F                /\* full opaque red \*/
#ff003300            /\* 0% opaque red \*/
#FF003388            /\* 50% opaque red \*/
rgba(255,0,0,0.1)    /\* 10% opaque red \*/
rgba(255,0,0,0.4)    /\* 40% opaque red \*/
rgba(255,0,0,0.7)    /\* 70% opaque red \*/
rgba(255,0,0,  1)    /\* full opaque red \*/

/\* whitespace syntax \*/
rgba(255 0 0 / 0.4)  /\* 40% opaque red \*/

/\* percentage value for alpha \*/
rgba(255 0 0 / 40%)  /\* 40% opaque red \*/
```

**Nota:** In the CSS Color Module Level 4 spec, `rgba()` has been defined as a legacy function with identical grammar and behaviour to `rgb()`; in effect, an alias. Going forward, both can accept exactly the same parameters.

### `hsla()`

 Colors can be defined in the hue-saturation-lightness-alpha model (HSLa) using the `hsla()` functional notation. HSLa extends the HSL color model to include the alpha channel, allowing specification of the opacity of a color.
 **a** means opacity: 0=transparent; 1=opaque;

```css
hsla(240,100%,50%,0.05)   /\* 5% opaque blue \*/
hsla(240,100%,50%, 0.4)   /\* 40% opaque blue \*/
hsla(240,100%,50%, 0.7)   /\* 70% opaque blue \*/
hsla(240,100%,50%,   1)   /\* full opaque blue \*/

/\* whitespace syntax \*/
hsla(240 100% 50% / 0.05) /\* 5% opaque blue \*/

/\* percentage value for alpha \*/
hsla(240 100% 50% / 5%) /\* 5% opaque blue \*/

/\* angle values for hue component; also accepts rad, grad, turn \*/
hsla(240deg 100% 50% / 5%) /\* 5% opaque blue \*/
hsla(240deg,100%,50%, 0.4)  /\* 40% opaque blue \*/
```

**Nota:** In the CSS Color Module Level 4 spec, `hsla()` has been defined as a legacy function with identical grammar and behaviour to `hsl()`; in effect, an alias. Going forward, both can accept exactly the same parameters.

### System Colors

Not all system colors are supported on all systems.
Deprecated
 for use on public web pages.

ActiveBorder

Active window border.

ActiveCaption

Active window caption. Should be used with `CaptionText` as foreground color.

AppWorkspace

Background color of multiple document interface.

Background

Desktop background.

ButtonFace

Face background color for 3-D elements that appear 3-D due to one layer of surrounding border. Should be used with the `ButtonText` foreground color.

ButtonHighlight

The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.

ButtonShadow

The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border.

ButtonText

Text on push buttons. Should be used with the `ButtonFace` or `ThreeDFace` background color.

CaptionText

Text in caption, size box, and scrollbar arrow box. Should be used with the `ActiveCaption` background color.

GrayText

Grayed (disabled) text.

Highlight

Item(s) selected in a control. Should be used with the `HighlightText` foreground color.

HighlightText

Text of item(s) selected in a control. Should be used with the `Highlight` background color.

InactiveBorder

Inactive window border.

InactiveCaption

Inactive window caption. Should be used with the `InactiveCaptionText` foreground color.

InactiveCaptionText

Color of text in an inactive caption. Should be used with the `InactiveCaption` background color.

InfoBackground

Background color for tooltip controls. Should be used with the `InfoText` foreground color.

InfoText

Text color for tooltip controls. Should be used with the `InfoBackground` background color.

Menu

Menu background. Should be used with the `MenuText` or `-moz-MenuBarText` foreground color.

MenuText

Text in menus. Should be used with the `Menu` background color.

Scrollbar

Background color of scroll bars.

ThreeDDarkShadow

The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

ThreeDFace

The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the `ButtonText` foreground color.

ThreeDHighlight

 The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two
 concentric layers of surrounding border.

ThreeDLightShadow

 The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two
 concentric layers of surrounding border.

ThreeDShadow

The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

Window

Window background. Should be used with the `WindowText` foreground color.

WindowFrame

Window frame.

WindowText

Text in windows. Should be used with the `Window` background color.

### Mozilla System Color Extensions

* -moz-ButtonDefault
    + : The border color that goes around buttons that represent the default action for a dialog box.
* -moz-ButtonHoverFace
    + : The background color of a button that the mouse pointer is over (which would be `ThreeDFace` or `ButtonFace` when the mouse pointer is not over it). Should be used with the `-moz-ButtonHoverText` foreground color.
* -moz-ButtonHoverText
    + : The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it). Should be used with the `-moz-ButtonHoverFace background` color.
* -moz-CellHighlight
    + : Background color for selected item in a tree widget. Should be used with the `-moz-CellHighlightText` foreground color. See also `-moz-html-CellHighlight`.
* -moz-CellHighlightText
    + : Text color for a selected item in a tree. Should be used with the `-moz-CellHighlight background` color. See also `-moz-html-CellHighlightText`.
* -moz-Combobox
    + : Background color for combo-boxes. Should be used with the `-moz-ComboboxText` foreground color. In versions prior to 1.9.2, use `-moz-Field` instead.
* -moz-ComboboxText
    + : Text color for combo-boxes. Should be used with the `-moz-Combobox` background color. In versions prior to 1.9.2, use `-moz-FieldText` instead.
* -moz-Dialog
    + : Background color for dialog boxes. Should be used with the `-moz-DialogText` foreground color.
* -moz-DialogText
    + : Text color for dialog boxes. Should be used with the `-moz-Dialog` background color.
* -moz-dragtargetzone
 -moz-EvenTreeRow
    + : Background color for even-numbered rows in a tree. Should be used with the `-moz-FieldText` foreground color. In Gecko versions prior to 1.9, use `-moz-Field`. See also `-moz-OddTreeRow`.
* -moz-Field
    + : Text field background color. Should be used with the `-moz-FieldText` foreground color.
* -moz-FieldText
    + : Text field text color. Should be used with the `-moz-Field`, `-moz-EvenTreeRow`, or `-moz-OddTreeRow` background color.
* -moz-html-CellHighlight
    + : Background color for highlighted item in HTML `<select>`s. Should be used with the `-moz-html-CellHighlightText` foreground color. Prior to Gecko 1.9, use `-moz-CellHighlight`.
* -moz-html-CellHighlightText
    + : Text color for highlighted items in HTML `<select>`s. Should be used with the `-moz-html-CellHighlight` background color. Prior to Gecko 1.9, use `-moz-CellHighlightText`.
* -moz-mac-accentdarkestshadow
 -moz-mac-accentdarkshadow
 -moz-mac-accentface
 -moz-mac-accentlightesthighlight
 -moz-mac-accentlightshadow
 -moz-mac-accentregularhighlight
 -moz-mac-accentregularshadow
 -moz-mac-chrome-active
* -moz-mac-chrome-inactive
* -moz-mac-focusring
 -moz-mac-menuselect
 -moz-mac-menushadow
 -moz-mac-menutextselect
 -moz-MenuHover
    + : Background color for hovered menu items. Often similar to `Highlight`. Should be used with the `-moz-MenuHoverText` or `-moz-MenuBarHoverText` foreground color.
* -moz-MenuHoverText
    + : Text color for hovered menu items. Often similar to `HighlightText`. Should be used with the `-moz-MenuHover` background color.
* -moz-MenuBarText
    + : Text color in menu bars. Often similar to `MenuText`. Should be used on top of `Menu` background.
* -moz-MenuBarHoverText
    + : Color for hovered text in menu bars. Often similar to `-moz-MenuHoverText`. Should be used on top of `-moz-MenuHover` background.
* -moz-nativehyperlinktext
    + : Default platform hyperlink color.
* -moz-OddTreeRow
    + : Background color for odd-numbered rows in a tree. Should be used with the `-moz-FieldText` foreground color. In Gecko versions prior to 1.9, use `-moz-Field`. See also `-moz-EvenTreeRow`.
* -moz-win-communicationstext
    + : Should be used for text in objects with ``-moz-appearance` (en-US): -moz-win-communications-toolbox;`.
* -moz-win-mediatext
    + : Should be used for text in objects with ``-moz-appearance` (en-US): -moz-win-media-toolbox`.
### Mozilla Color Preference Extensions

-moz-activehyperlinktext

User's preference for text color of active links. Should be used with the default document background color.

-moz-default-background-color

User's preference for the document background color.

-moz-default-color

User's preference for the text color.

-moz-hyperlinktext

User's preference for the text color of unvisited links. Should be used with the default document background color.

-moz-visitedhyperlinktext

User's preference for the text color of visited links. Should be used with the default document background color.

Specificações
-------------

| Specification |
| --- |
| CSS Color Module Level 4 # color-syntax |

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

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

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

* The `opacity` property, allowing to define the transparency of color at the element level.
* The `color`, `background-color`, `border-color` (en-US), `outline-color` (en-US), `text-shadow`, `box-shadow` properties.


vertical-align - CSS

vertical-align
==============

A propriedade **`vertical-align`** do CSS define o alinhamento vertical de uma caixa inline, inline-block ou table-cell.

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

A propriedade vertical-align pode ser usada em dois contextos:

* Para alinhar verticalmente a caixa de um elemento inline dentro da caixa de linha que a contém. Por exemplo, pode ser usado para posicionar verticalmente uma imagem em uma linha de texto.
* Para alinhar verticalmente o conteúdo de uma célula em uma tabela.

Observe que `vertical-align` só se aplica a elementos inline, inline-block e table-cell: você não pode usá-lo para alinhar verticalmente elementos em nível de bloco.

Sintaxe
-------

```css
/\* Valores de palavra-chave \*/
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/\* valores <comprimento> \*/
vertical-align: 10em;
vertical-align: 4px;

/\* valores <porcentagem> \*/
vertical-align: 20%;

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

A propriedade `vertical-align` é especificada como um dos valores listados abaixo.

### Valores para elementos inline

#### Valores relativos aos pais

Esses valores alinham verticalmente o elemento em relação ao seu elemento pai:

`baseline`

Alinha a linha de base do elemento com a linha de base de seu pai. A linha de base de alguns elementos substituídos (en-US), como `<textarea>`, não é especificada pela especificação HTML, o que significa que seu comportamento com esta palavra-chave pode variar entre os navegadores.

`sub`

Alinha a linha de base do elemento com a linha de base subscrita de seu pai.

`super`

Alinha a linha de base do elemento com a linha de base sobrescrita de seu pai.

`text-top`

Alinha a parte superior do elemento com a parte superior da fonte do elemento pai.

`text-bottom`

Alinha a parte inferior do elemento com a parte inferior da fonte do elemento pai.

`middle`

Alinha o meio do elemento com a linha de base mais metade da altura x do pai.

`<length>` (en-US)

Alinha a linha de base do elemento ao comprimento especificado acima da linha de base de seu pai. Um valor negativo é permitido.

`<percentage>` (en-US)

Alinha a linha de base do elemento à porcentagem fornecida acima da linha de base de seu pai, com o valor sendo uma porcentagem da propriedade `line-height` (en-US). Um valor negativo é permitido.

#### Valores relativos à linha

Os seguintes valores alinham verticalmente o elemento em relação à linha inteira:

`top`

Alinha o topo do elemento e seus descendentes com o topo de toda a linha.

`bottom`

Alinha a parte inferior do elemento e seus descendentes com a parte inferior de toda a linha.

Para elementos que não possuem uma linha de base, a borda da margem inferior é usada.

### Valores para células da tabela

`baseline` (e `sub`, `super`, `text-top`, `text-bottom`, `<length>` e `<percentage>`)

Alinha a linha de base da célula com a linha de base de todas as outras células na linha que estão alinhadas com a linha de base.

`top`

Alinha a borda de preenchimento superior da célula com a parte superior da linha.

`middle`

Centraliza a caixa de preenchimento da célula dentro da linha.

`bottom`

Alinha a borda de preenchimento inferior da célula com a parte inferior da linha.

Valores negativos são permitidos.

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

|  |  |
| --- | --- |
| Initial value | `baseline` |
| Aplica-se a | inline-level and table-cell elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | não |
| Percentages | refer to the `line-height` (en-US) of the element itself |
| Computed value | for percentage and length values, the absolute length, otherwise the keyword as specified |
| Animation type | a length |

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

vertical-align =
  [ (en-US) first | (en-US) last ] (en-US)        || (en-US)
  <'alignment-baseline'>  || (en-US)
  <'baseline-shift'>

```

Exemplos
--------

### Exemplo básico

#### HTML

```html
<div>
  Uma imagem <img src="frame\_image.svg" alt="link" width="32" height="32" /> com
  um alinhamento padrão.
</div>
<div>
  Uma imagem
  <img class="top" src="frame\_image.svg" alt="link" width="32" height="32" />
  com um alinhamento de texto superior.
</div>
<div>
  Uma imagem
  <img class="bottom" src="frame\_image.svg" alt="link" width="32" height="32" />
  com um alinhamento de texto inferior.
</div>
<div>
  Uma imagem
  <img class="middle" src="frame\_image.svg" alt="link" width="32" height="32" />
  com um alinhamento médio.
</div>
```

#### CSS

```css
img.top {
  vertical-align: text-top;
}
img.bottom {
  vertical-align: text-bottom;
}
img.middle {
  vertical-align: middle;
}
```

#### Resultado

### Alinhamento vertical em uma caixa de linha

#### HTML

```html
<p>
  top: <img style="vertical-align: top" src="star.png" /><br />
  middle: <img style="vertical-align: middle" src="star.png" /><br />
  bottom: <img style="vertical-align: bottom" src="star.png" /><br />
  super: <img style="vertical-align: super" src="star.png" /><br />
  sub: <img style="vertical-align: sub" src="star.png" /><br />
</p>

<p>
  text-top: <img style="vertical-align: text-top" src="star.png" /><br />
  text-bottom: <img style="vertical-align: text-bottom" src="star.png" /><br />
  0.2em: <img style="vertical-align: 0.2em" src="star.png" /><br />
  -1em: <img style="vertical-align: -1em" src="star.png" /><br />
  20%: <img style="vertical-align: 20%" src="star.png" /><br />
  -100%: <img style="vertical-align: -100%" src="star.png" /><br />
</p>
```

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

img {
  margin-right: 0.5em;
}

p {
  height: 3em;
  padding: 0 0.5em;
  font-family: monospace;
  text-decoration: underline overline;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
```

#### Resultado

### Alinhamento vertical em uma célula da tabela

#### HTML

```html
<table>
  <tr>
    <td style="vertical-align: baseline">baseline</td>
    <td style="vertical-align: top">top</td>
    <td style="vertical-align: middle">middle</td>
    <td style="vertical-align: bottom">bottom</td>
    <td>
      <p>
        Existe uma teoria que afirma que se alguém descobrir exatamente para que
        serve o Universo e por que ele está aqui, ele desaparecerá
        instantaneamente e será substituído por algo ainda mais bizarro e
        inexplicável.
      </p>
      <p>Há outra teoria que afirma que isso já aconteceu.</p>
    </td>
  </tr>
</table>
```

#### CSS

```css
table {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

table,
th,
td {
  border: 1px solid black;
}

td {
  padding: 0.5em;
  font-family: monospace;
}
```

#### Resultado

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-vertical-align |

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

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

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

* Casos de uso típicos do Flexbox, seção "Item central" (en-US)
* `line-height` (en-US), `text-align`, `margin`
* Entendendo `vertical-align`, ou "Como (não) centralizar o conteúdo verticalmente"
* Vertical-Align: Tudo o que você precisa saber


width - CSS

width
=====

Resumo
------

A propriedade CSS **width** determina a largura da área de conteúdo de um elemento. A área de conteúdo fica dentro do preenchimento, da borda, e da margem de um elemento.

As propriedades `min-width` (en-US) e `max-width` sobrescrevem o `width`.

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

Sintaxe
-------

```css
/\* Valores de largura - <length> \*/
width: 300px;
width: 25em;

/\* Valores percentuais - <percentage> \*/
width: 75%;

/\* Valores com palavras-chave \*/
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

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

### Valores

`<length>`

Veja `<length>` (en-US) para possíveis unidades.

`<percentage>`

Especificado como `<percentage>` (en-US) da largura do bloco contido. Se a largura do bloco contido depender da largura do elemento, o layout resultante é indefinido.

`border-box`
Experimental

Se presente, o precedente `<length>` (en-US) ou `<percentage>` (en-US) é aplicado para o border box do elemento.

`content-box`
Experimental

Se presente, o precedente `<length>` (en-US) ou `<percentage>` (en-US) é aplicado para o content box do elemento.

`auto`

O navegador irá calcular e selecionar a largura para o elemento específicado.

fill
Experimental

Use o fill-available inline size ou fill-available block size, como um modo apropriado de escrita.

`max-content`
Experimental

Da largura interna preferível.

`min-content`
Experimental

Da largura interna mínina.

`available`
Experimental

Do bloco contendo a largura menos a margin horizontal, borda ou preenchimento.

`fit-content`
Experimental

A largura:

* do comprimento interno mínimo.
* do menor comprimento interno preferível e da largura disponível.

### Sintaxe Formal
```

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

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

```

Exemplos
--------

### Largura padrão

```css
p.douradinho {
  background: gold;
}
```

```html
<p class="douradinho">
  A comunidade Mozilla produz diversos softwares incríveis.
</p>
```

### Pixels e ems

```css
.largura\_px {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.largura\_em {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}
```

```html
<div class="largura\_px">Largura medida com px</div>
<div class="largura\_em">Largura medida com em</div>
```

### Porcentagem

```css
.porcentagem {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
```

```html
<div class="porcentagem">Largura em porcentagem</div>
```

### Exemplo utilizando "max-content"

```css
p.maxgreen {
  background: lightgreen;
  width: intrinsic; /\* Safari/WebKit uses a non-standard name \*/
  width: -moz-max-content; /\* Firefox/Gecko \*/
  width: -webkit-max-content; /\* Chrome \*/
}
```

```html
<p class="maxgreen">
  A comunidade Mozilla produz diversos softwares incríveis.
</p>
```

### Exemplo utilizando "min-content"

```css
p.minblue {
  background: lightblue;
  width: -moz-min-content; /\* Firefox \*/
  width: -webkit-min-content; /\* Chrome \*/
}
```

```html
<p class="minblue">A comunidade Mozilla produz diversos softwares incríveis.</p>
```

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

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

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

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

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

* box model, `height`, `box-sizing`, `min-width` (en-US), `max-width`


Referência de CSS - CSS

Referência de CSS
=================

### -

Use esta **referência de CSS** para navegar por um índice alfabético das propriedades padrão do CSS, pseudo-classes, pseudo-elementos, tipos de dados e @-rules.

Esta referência lista não somente as propriedades do CSS1 e CSS2.1, mas também referências para qualquer propriedade, conceito padronizado ou estabilizado do CSS3.

Veja também Extensões CSS Mozilla para propriedades específicas do Gecko prefixadas com `-moz` e Extensões CSS do WebKit para propriedades específicas do WebKit. Veja Visão geral de propriedades CSS prefixadas por distribuidor por Peter Beverloo para todas as propriedades prefixadas.

* `--*`
* `-webkit-line-clamp` (en-US)

### A

* `abs()` (en-US)
* `accent-color` (en-US)
* `acos()` (en-US)
* `:active`
* `additive-symbols (@counter-style)` (en-US)
* `::after (:after)`
* `align-content`
* `align-items`
* `align-self`
* `align-tracks` (en-US)
* `all` (en-US)
* `<an-plus-b>`
* `<angle>` (en-US)
* `<angle-percentage>` (en-US)
* `animation`
* `animation-composition` (en-US)
* `animation-delay`
* `animation-direction` (en-US)
* `animation-duration` (en-US)
* `animation-fill-mode` (en-US)
* `animation-iteration-count` (en-US)
* `animation-name` (en-US)
* `animation-play-state` (en-US)
* `animation-range` (en-US)
* `animation-range-end` (en-US)
* `animation-range-start` (en-US)
* `animation-timeline` (en-US)
* `animation-timing-function` (en-US)
* `@annotation` (en-US)
* `:any-link` (en-US)
* `appearance` (en-US)
* `ascent-override (@font-face)` (en-US)
* `asin()` (en-US)
* `aspect-ratio` (en-US)
* `atan()` (en-US)
* `atan2()` (en-US)
* `attr()`

### B

* `::backdrop`
* `backdrop-filter`
* `backface-visibility`
* `background`
* `background-attachment`
* `background-blend-mode`
* `background-clip`
* `background-color`
* `background-image` (en-US)
* `background-origin`
* `background-position` (en-US)
* `background-position-x` (en-US)
* `background-position-y` (en-US)
* `background-repeat` (en-US)
* `background-size`
* `base-palette (@font-palette-values)` (en-US)
* `<basic-shape>` (en-US)
* `::before (:before)`
* `:blank`
* `bleed (@page)`
* `<blend-mode>`
* `block-size`
* `blur()` (en-US)
* `border` (en-US)
* `border-block` (en-US)
* `border-block-color` (en-US)
* `border-block-end` (en-US)
* `border-block-end-color` (en-US)
* `border-block-end-style` (en-US)
* `border-block-end-width` (en-US)
* `border-block-start` (en-US)
* `border-block-start-color` (en-US)
* `border-block-start-style` (en-US)
* `border-block-start-width` (en-US)
* `border-block-style` (en-US)
* `border-block-width` (en-US)
* `border-bottom` (en-US)
* `border-bottom-color` (en-US)
* `border-bottom-left-radius` (en-US)
* `border-bottom-right-radius` (en-US)
* `border-bottom-style` (en-US)
* `border-bottom-width` (en-US)
* `border-collapse` (en-US)
* `border-color` (en-US)
* `border-end-end-radius` (en-US)
* `border-end-start-radius` (en-US)
* `border-image` (en-US)
* `border-image-outset` (en-US)
* `border-image-repeat` (en-US)
* `border-image-slice` (en-US)
* `border-image-source` (en-US)
* `border-image-width` (en-US)
* `border-inline` (en-US)
* `border-inline-color` (en-US)
* `border-inline-end` (en-US)
* `border-inline-end-color` (en-US)
* `border-inline-end-style` (en-US)
* `border-inline-end-width` (en-US)
* `border-inline-start` (en-US)
* `border-inline-start-color` (en-US)
* `border-inline-start-style` (en-US)
* `border-inline-start-width` (en-US)
* `border-inline-style` (en-US)
* `border-inline-width` (en-US)
* `border-left`
* `border-left-color` (en-US)
* `border-left-style` (en-US)
* `border-left-width` (en-US)
* `border-radius` (en-US)
* `border-right` (en-US)
* `border-right-color` (en-US)
* `border-right-style` (en-US)
* `border-right-width` (en-US)
* `border-spacing` (en-US)
* `border-start-end-radius` (en-US)
* `border-start-start-radius` (en-US)
* `border-style` (en-US)
* `border-top` (en-US)
* `border-top-color` (en-US)
* `border-top-left-radius` (en-US)
* `border-top-right-radius` (en-US)
* `border-top-style` (en-US)
* `border-top-width` (en-US)
* `border-width` (en-US)
* `bottom` (en-US)
* `@bottom-center`
* `box-decoration-break` (en-US)
* `box-shadow`
* `box-sizing`
* `break-after` (en-US)
* `break-before` (en-US)
* `break-inside` (en-US)
* `brightness()` (en-US)

### C

* `calc()`
* `caption-side` (en-US)
* `caret`
* `caret-color` (en-US)
* `caret-shape`
* `@character-variant` (en-US)
* `@charset`
* `:checked`
* `circle()` (en-US)
* `clamp()` (en-US)
* `clear`
* `clip` (en-US)
* `clip-path` (en-US)
* `<color>`
* `color`
* `color-scheme`
* `column-count` (en-US)
* `column-fill` (en-US)
* `column-gap` (en-US)
* `column-rule` (en-US)
* `column-rule-color` (en-US)
* `column-rule-style` (en-US)
* `column-rule-width` (en-US)
* `column-span` (en-US)
* `column-width` (en-US)
* `columns` (en-US)
* `conic-gradient()` (en-US)
* `contain`
* `contain-intrinsic-block-size` (en-US)
* `contain-intrinsic-height` (en-US)
* `contain-intrinsic-inline-size` (en-US)
* `contain-intrinsic-size` (en-US)
* `contain-intrinsic-width` (en-US)
* `container` (en-US)
* `container-name` (en-US)
* `container-type` (en-US)
* `content`
* `content-visibility` (en-US)
* `contrast()` (en-US)
* `cos()` (en-US)
* `<counter>` (en-US)
* `counter-increment` (en-US)
* `counter-reset` (en-US)
* `counter-set` (en-US)
* `@counter-style` (en-US)
* `counters()` (en-US)
* `cross-fade()` (en-US)
* `cubic-bezier()` (en-US)
* `::cue` (en-US)
* `::cue-region` (en-US)
* `:current` (en-US)
* `cursor`
* `<custom-ident>` (en-US)
* `length#cap` (en-US)
* `length#ch` (en-US)
* `length#cm` (en-US)

### D

* `angle#deg` (en-US)
* `<dashed-ident>` (en-US)
* `:default` (en-US)
* `:defined` (en-US)
* `descent-override (@font-face)` (en-US)
* `<dimension>` (en-US)
* `:dir` (en-US)
* `direction` (en-US)
* `:disabled`
* `display`
* `<display-box>`
* `<display-inside>`
* `<display-internal>`
* `<display-legacy>`
* `<display-listitem>`
* `<display-outside>`
* `drop-shadow()` (en-US)
* `resolution#dpcm` (en-US)
* `resolution#dpi` (en-US)
* `resolution#dppx` (en-US)

### E

* `<easing-function>` (en-US)
* `element()`
* `ellipse()` (en-US)
* `:empty`
* `empty-cells` (en-US)
* `:enabled`
* `env()`
* `exp()` (en-US)
* `length#em` (en-US)
* `length#ex` (en-US)

### F

* `fallback (@counter-style)` (en-US)
* `filter` (en-US)
* `<filter-function>` (en-US)
* `:first` (en-US)
* `:first-child`
* `::first-letter (:first-letter)`
* `::first-line (:first-line)`
* `:first-of-type`
* `fit-content()` (en-US)
* `<flex>` (en-US)
* `flex`
* `flex-basis` (en-US)
* `flex-direction`
* `flex-flow`
* `flex-grow` (en-US)
* `flex-shrink` (en-US)
* `flex-wrap`
* `flex_value#fr` (en-US)
* `float`
* `:focus`
* `:focus-visible` (en-US)
* `:focus-within`
* `font` (en-US)
* `font-display (@font-face)` (en-US)
* `@font-face`
* `font-family`
* `font-family (@font-face)` (en-US)
* `font-family (@font-palette-values)` (en-US)
* `font-feature-settings`
* `font-feature-settings (@font-face)` (en-US)
* `@font-feature-values` (en-US)
* `font-kerning`
* `font-language-override` (en-US)
* `font-optical-sizing` (en-US)
* `font-palette` (en-US)
* `@font-palette-values` (en-US)
* `font-size`
* `font-size-adjust` (en-US)
* `font-stretch` (en-US)
* `font-stretch (@font-face)` (en-US)
* `font-style` (en-US)
* `font-style (@font-face)` (en-US)
* `font-synthesis` (en-US)
* `font-synthesis-position` (en-US)
* `font-synthesis-small-caps` (en-US)
* `font-synthesis-style` (en-US)
* `font-synthesis-weight` (en-US)
* `font-variant` (en-US)
* `font-variant-alternates` (en-US)
* `font-variant-caps` (en-US)
* `font-variant-east-asian` (en-US)
* `font-variant-emoji` (en-US)
* `font-variant-ligatures` (en-US)
* `font-variant-numeric` (en-US)
* `font-variant-position` (en-US)
* `font-variation-settings`
* `font-variation-settings (@font-face)` (en-US)
* `font-weight`
* `font-weight (@font-face)` (en-US)
* `forced-color-adjust` (en-US)
* `format()` (en-US)
* `<frequency>` (en-US)
* `<frequency-percentage>` (en-US)
* `:fullscreen` (en-US)
* `:future` (en-US)

### G

* `angle#grad` (en-US)
* `gap`
* `<gradient>` (en-US)
* `::grammar-error` (en-US)
* `grayscale()`
* `grid`
* `grid-area` (en-US)
* `grid-auto-columns` (en-US)
* `grid-auto-flow`
* `grid-auto-rows` (en-US)
* `grid-column` (en-US)
* `grid-column-end` (en-US)
* `grid-column-start` (en-US)
* `grid-row` (en-US)
* `grid-row-end` (en-US)
* `grid-row-start` (en-US)
* `grid-template` (en-US)
* `grid-template-areas` (en-US)
* `grid-template-columns`
* `grid-template-rows`

### H

* `frequency#Hz` (en-US)
* `hanging-punctuation` (en-US)
* `:has` (en-US)
* `height`
* `@historical-forms`
* `:host()` (en-US)
* `:host-context()`
* `:hover`
* `hsl()`
* `hsla()`
* `hue-rotate()` (en-US)
* `hwb()`
* `hyphenate-character` (en-US)
* `hyphenate-limit-chars` (en-US)
* `hyphens`
* `hypot()` (en-US)

### I

* `<ident>` (en-US)
* `<image>`
* `image()`
* `image-orientation` (en-US)
* `image-rendering` (en-US)
* `image-resolution` (en-US)
* `image-set()` (en-US)
* `@import`
* `:in-range` (en-US)
* `:indeterminate` (en-US)
* `inherit` (en-US)
* `inherits (@property)` (en-US)
* `initial`
* `initial-letter` (en-US)
* `initial-letter-align` (en-US)
* `initial-value (@property)` (en-US)
* `inline-size`
* `input-security`
* `inset` (en-US)
* `inset()` (en-US)
* `inset-block` (en-US)
* `inset-block-end` (en-US)
* `inset-block-start` (en-US)
* `inset-inline` (en-US)
* `inset-inline-end` (en-US)
* `inset-inline-start` (en-US)
* `<integer>` (en-US)
* `:invalid`
* `invert()` (en-US)
* `:is` (en-US)
* `isolation`
* `length#ic` (en-US)
* `length#in` (en-US)

### J

* `justify-content` (en-US)
* `justify-items` (en-US)
* `justify-self` (en-US)
* `justify-tracks` (en-US)

### K

* `frequency#kHz` (en-US)
* `@keyframes` (en-US)

### L

* `lab()`
* `:lang` (en-US)
* `:last-child`
* `:last-of-type`
* `@layer`
* `layer()`
* `layer() (@import)`
* `lch()`
* `leader()`
* `:left` (en-US)
* `left` (en-US)
* `@left-bottom`
* `<length>` (en-US)
* `<length-percentage>` (en-US)
* `letter-spacing`
* `light-dark()`
* `line-break`
* `line-clamp`
* `line-gap-override (@font-face)` (en-US)
* `line-height` (en-US)
* `line-height-step` (en-US)
* `<line-style>` (en-US)
* `linear-gradient()` (en-US)
* `:link`
* `list-style` (en-US)
* `list-style-image` (en-US)
* `list-style-position` (en-US)
* `list-style-type` (en-US)
* `local()` (en-US)
* `:local-link` (en-US)
* `log()` (en-US)

### M

* `length#mm` (en-US)
* `margin`
* `margin-block` (en-US)
* `margin-block-end` (en-US)
* `margin-block-start` (en-US)
* `margin-bottom`
* `margin-inline` (en-US)
* `margin-inline-end` (en-US)
* `margin-inline-start` (en-US)
* `margin-left` (en-US)
* `margin-right` (en-US)
* `margin-top`
* `margin-trim` (en-US)
* `::marker` (en-US)
* `marks (@page)`
* `mask`
* `mask-border` (en-US)
* `mask-border-mode` (en-US)
* `mask-border-outset` (en-US)
* `mask-border-repeat` (en-US)
* `mask-border-slice` (en-US)
* `mask-border-source` (en-US)
* `mask-border-width` (en-US)
* `mask-clip` (en-US)
* `mask-composite` (en-US)
* `mask-image` (en-US)
* `mask-mode` (en-US)
* `mask-origin` (en-US)
* `mask-position` (en-US)
* `mask-repeat` (en-US)
* `mask-size` (en-US)
* `mask-type` (en-US)
* `masonry-auto-flow` (en-US)
* `math-depth` (en-US)
* `math-shift` (en-US)
* `math-style` (en-US)
* `matrix()` (en-US)
* `matrix3d()` (en-US)
* `max()` (en-US)
* `max-block-size` (en-US)
* `max-height` (en-US)
* `max-inline-size` (en-US)
* `max-lines`
* `max-width`
* `@media` (en-US)
* `min()` (en-US)
* `min-block-size` (en-US)
* `min-height`
* `min-inline-size` (en-US)
* `min-width` (en-US)
* `minmax()` (en-US)
* `mix-blend-mode`
* `mod()` (en-US)
* `time#ms`

### N

* `@namespace` (en-US)
* `negative (@counter-style)` (en-US)
* `:not`
* `:nth-child`
* `:nth-last-child`
* `:nth-last-of-type` (en-US)
* `:nth-of-type`
* `<number>`

### O

* `object-fit`
* `object-position` (en-US)
* `offset`
* `offset-anchor` (en-US)
* `offset-distance` (en-US)
* `offset-path` (en-US)
* `offset-position` (en-US)
* `offset-rotate` (en-US)
* `:only-child`
* `:only-of-type`
* `opacity`
* `opacity()`
* `:optional`
* `order` (en-US)
* `@ornaments` (en-US)
* `orphans` (en-US)
* `:out-of-range`
* `outline`
* `outline-color` (en-US)
* `outline-offset` (en-US)
* `outline-style` (en-US)
* `outline-width` (en-US)
* `<overflow>`
* `overflow-anchor` (en-US)
* `overflow-block` (en-US)
* `overflow-clip-margin` (en-US)
* `overflow-inline` (en-US)
* `overflow-wrap`
* `overflow-x` (en-US)
* `overflow-y` (en-US)
* `overlay` (en-US)
* `override-colors (@font-palette-values)` (en-US)
* `overscroll-behavior` (en-US)
* `overscroll-behavior-block` (en-US)
* `overscroll-behavior-inline` (en-US)
* `overscroll-behavior-x` (en-US)
* `overscroll-behavior-y` (en-US)

### P

* `Pseudo-classes`
* `Pseudo-elements`
* `length#pc` (en-US)
* `length#pt` (en-US)
* `length#px` (en-US)
* `pad (@counter-style)` (en-US)
* `padding`
* `padding-block` (en-US)
* `padding-block-end` (en-US)
* `padding-block-start` (en-US)
* `padding-bottom` (en-US)
* `padding-inline` (en-US)
* `padding-inline-end` (en-US)
* `padding-inline-start` (en-US)
* `padding-left`
* `padding-right` (en-US)
* `padding-top` (en-US)
* `@page`
* `page` (en-US)
* `page-break-after` (en-US)
* `page-break-before`
* `page-break-inside` (en-US)
* `page-orientation (@page)` (en-US)
* `paint()` (en-US)
* `paint-order` (en-US)
* `::part` (en-US)
* `:past` (en-US)
* `path()` (en-US)
* `:paused` (en-US)
* `<percentage>` (en-US)
* `perspective` (en-US)
* `perspective()`
* `perspective-origin` (en-US)
* `:picture-in-picture` (en-US)
* `place-content` (en-US)
* `place-items` (en-US)
* `place-self` (en-US)
* `::placeholder` (en-US)
* `:placeholder-shown` (en-US)
* `:playing` (en-US)
* `pointer-events`
* `polygon()` (en-US)
* `<position>` (en-US)
* `position`
* `pow()` (en-US)
* `prefix (@counter-style)` (en-US)
* `print-color-adjust` (en-US)
* `@property` (en-US)

### Q

* `length#Q` (en-US)
* `quotes` (en-US)

### R

* `angle#rad` (en-US)
* `length#rem` (en-US)
* `radial-gradient()` (en-US)
* `range (@counter-style)` (en-US)
* `<ratio>` (en-US)
* `ray()` (en-US)
* `:read-only` (en-US)
* `:read-write`
* `rect()` (en-US)
* `rem()` (en-US)
* `repeat()` (en-US)
* `repeating-conic-gradient()` (en-US)
* `repeating-linear-gradient()` (en-US)
* `repeating-radial-gradient()` (en-US)
* `:required`
* `resize` (en-US)
* `<resolution>` (en-US)
* `reversed()`
* `revert` (en-US)
* `rgb()`
* `rgba()`
* `:right` (en-US)
* `right` (en-US)
* `@right-bottom`
* `:root`
* `rotate` (en-US)
* `rotate()`
* `rotate3d()`
* `rotateX()` (en-US)
* `rotateY()` (en-US)
* `rotateZ()` (en-US)
* `round()` (en-US)
* `row-gap` (en-US)
* `ruby-align`
* `ruby-merge`
* `ruby-position` (en-US)

### S

* `saturate()` (en-US)
* `scale` (en-US)
* `scale()`
* `scale3d()` (en-US)
* `scaleX()` (en-US)
* `scaleY()` (en-US)
* `scaleZ()` (en-US)
* `:scope` (en-US)
* `@scope` (en-US)
* `scroll()` (en-US)
* `scroll-behavior`
* `scroll-margin` (en-US)
* `scroll-margin-block` (en-US)
* `scroll-margin-block-end` (en-US)
* `scroll-margin-block-start` (en-US)
* `scroll-margin-bottom` (en-US)
* `scroll-margin-inline` (en-US)
* `scroll-margin-inline-end` (en-US)
* `scroll-margin-inline-start` (en-US)
* `scroll-margin-left` (en-US)
* `scroll-margin-right` (en-US)
* `scroll-margin-top` (en-US)
* `scroll-padding` (en-US)
* `scroll-padding-block` (en-US)
* `scroll-padding-block-end` (en-US)
* `scroll-padding-block-start` (en-US)
* `scroll-padding-bottom` (en-US)
* `scroll-padding-inline` (en-US)
* `scroll-padding-inline-end` (en-US)
* `scroll-padding-inline-start` (en-US)
* `scroll-padding-left` (en-US)
* `scroll-padding-right` (en-US)
* `scroll-padding-top` (en-US)
* `scroll-snap-align` (en-US)
* `scroll-snap-stop` (en-US)
* `scroll-snap-type` (en-US)
* `scroll-timeline` (en-US)
* `scroll-timeline-axis` (en-US)
* `scroll-timeline-name` (en-US)
* `scrollbar-color`
* `scrollbar-gutter` (en-US)
* `scrollbar-width` (en-US)
* `::selection`
* `selector()`
* `sepia()`
* `<shape>` (en-US)
* `shape-image-threshold` (en-US)
* `shape-margin` (en-US)
* `shape-outside` (en-US)
* `sign()` (en-US)
* `sin()` (en-US)
* `size (@page)` (en-US)
* `size-adjust (@font-face)` (en-US)
* `skew()` (en-US)
* `skewX()` (en-US)
* `skewY()` (en-US)
* `::slotted` (en-US)
* `speak-as (@counter-style)` (en-US)
* `::spelling-error` (en-US)
* `sqrt()` (en-US)
* `src (@font-face)` (en-US)
* `@starting-style` (en-US)
* `steps()` (en-US)
* `<string>` (en-US)
* `@styleset` (en-US)
* `@stylistic` (en-US)
* `suffix (@counter-style)` (en-US)
* `@supports` (en-US)
* `supports() (@import)`
* `@swash` (en-US)
* `symbols (@counter-style)` (en-US)
* `symbols()` (en-US)
* `syntax (@property)` (en-US)
* `system (@counter-style)` (en-US)
* `time#s`

### T

* `angle#turn` (en-US)
* `tab-size` (en-US)
* `table-layout` (en-US)
* `tan()` (en-US)
* `:target`
* `target-counter()`
* `target-counters()`
* `::target-text` (en-US)
* `target-text()`
* `:target-within` (en-US)
* `text-align`
* `text-align-last` (en-US)
* `text-combine-upright` (en-US)
* `text-decoration`
* `text-decoration-color` (en-US)
* `text-decoration-line` (en-US)
* `text-decoration-skip` (en-US)
* `text-decoration-skip-ink` (en-US)
* `text-decoration-style`
* `text-decoration-thickness` (en-US)
* `text-emphasis` (en-US)
* `text-emphasis-color` (en-US)
* `text-emphasis-position` (en-US)
* `text-emphasis-style` (en-US)
* `text-indent` (en-US)
* `text-justify` (en-US)
* `text-orientation` (en-US)
* `text-overflow`
* `text-rendering`
* `text-shadow`
* `text-size-adjust` (en-US)
* `text-transform`
* `text-underline-offset` (en-US)
* `text-underline-position` (en-US)
* `text-wrap` (en-US)
* `<time>`
* `<time-percentage>` (en-US)
* `timeline-scope` (en-US)
* `top` (en-US)
* `@top-center`
* `touch-action` (en-US)
* `transform`
* `transform-box` (en-US)
* `<transform-function>` (en-US)
* `transform-origin`
* `transform-style`
* `transition`
* `transition-behavior` (en-US)
* `transition-delay`
* `transition-duration` (en-US)
* `transition-property` (en-US)
* `transition-timing-function`
* `translate`
* `translate()`
* `translate3d()` (en-US)
* `translateX()` (en-US)
* `translateY()` (en-US)
* `translateZ()` (en-US)
* `type()`

### U

* `unicode-bidi` (en-US)
* `unicode-range (@font-face)` (en-US)
* `unset` (en-US)
* `<url>` (en-US)
* `url()` (en-US)
* `:user-invalid` (en-US)
* `user-select` (en-US)
* `:user-valid` (en-US)

### V

* `length#vh` (en-US)
* `length#vmax` (en-US)
* `length#vmin` (en-US)
* `length#vw` (en-US)
* `:valid`
* `var()`
* `vertical-align`
* `view()`
* `view-timeline` (en-US)
* `view-timeline-axis` (en-US)
* `view-timeline-inset` (en-US)
* `view-timeline-name` (en-US)
* `::view-transition` (en-US)
* `::view-transition-group` (en-US)
* `::view-transition-image-pair` (en-US)
* `view-transition-name` (en-US)
* `::view-transition-new` (en-US)
* `::view-transition-old` (en-US)
* `visibility`
* `:visited`

### W

* `:where` (en-US)
* `white-space`
* `white-space-collapse` (en-US)
* `widows` (en-US)
* `width`
* `will-change`
* `word-break`
* `word-spacing` (en-US)
* `word-wrap`
* `writing-mode`

### X

* `resolution#x` (en-US)

### Z

* `z-index` (en-US)

### Others

* `--*`

Seletores
---------

* Seletores básicos
    + Seletores de tipo `elementname`
    + Seletores de classe `.classname`
    + Seletores de ID `#idname`
    + Seletores universais `* ns|* *|*`
    + Seletores de atributo
        - `[attribute]`
        - `[attribute="value"]`
        - `[attribute~="value"]`
        - `[attribute|="value"]`
        - `[attribute^="value"]`
        - `[attribute$="value"]`
        - `[attribute*="value"]`
        - `[ns|attribute]`
* Combinadores
    + Combinadores equivalentes adjacentes `A + B`
    + Combinadores equivalentes gerais `A ~ B`
    + Combinadores filhos `A > B`
    + Combinadores descendentes `A B`
* Pseudo-elementos
* Pseudo-classes
Miscelânea
----------

* `Comments` (en-US)
* Consultas de mídias
* Contadores
* Gradientes
* Transformações
Conceitos
---------

* Sintaxe do CSS
* Regra At
* Comentários
* Especificidade
* Valor inicial
* Herança
* Valor especificado
* Valor computado
* Valor usado
* Valor corrente
* Modelo de caixa


<time> - CSS

<time>
======

O tipo de dado CSS **`<time>`** representa um valor de tempo expresso em segundo ou milissegundos. É usado em animações( `animation` ), transições( `transition` ) e propriedades relacionadas.

Sintaxe
-------

O tipo dado `<time>` consiste de um elemento `<number>` seguido por uma das unidades listadas abaixo. Opcionalmente, pode ser precedido por um sinal de `+` ou `-`. Como em todas as dimensões, não há espaço entre uma unidade literal e o número.

**Nota:** Embora o número `0` seja sempre o mesmo, independente da unidade, essa última não pode ser omitida. Em outras palavras, `0` é invalido e não representa `0s` ou `0ms`.

### Unidades

**`s`**

Representa um tempo em segundos. Exemplos: `0s`, `1.5s`, `-60s`.

**`ms`**

Representa um tempo em milissegundos. Exemplos: `0ms`, `150.25ms`, `-60000ms`.

**Nota:** A conversão entre `s` e `ms` segue a proporção `1s = 1000ms`.

Exemplos
--------

### Unidades de Tempo Válidas
```

12s         Inteiro Positivo
-456ms      Inteiro Negativo
4.3ms       Decimal
14mS        A unidade é case-insentive, embora letras iniciais maiúsculas (capital letters) não sejam recomendadas.
+0s         Zero com um + no inicio e uma unidade
-0ms        Zero com um - no inicio e uma unidade
```

### Unidades de Tempo Inválidas
```

0           Embora seja permitido o uso do zero sem unidade de medida por <length>s é invalido para <time>s.
12.0        Este é um <number>, não um <time>, pois está faltando a unidade de medida.
7 ms        Não é permitido espaço entre o número e a unidade de medida.
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # time |

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

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


@font-face - CSS

@font-face
==========

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

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

* Learn more
* See full compatibility
* Report feedback
O **`@font-face`** CSS at-rule especifica uma fonte customizada com a qual exibe o texto; a fonte pode ser carregada de um servidor remoto ou de uma fonte instalada localmente no computador do usuário.

Se a função `local()` for fornecida, a especificação do nome da fonte a ser procurada no computador do usuário, e a user agent (en-US) encontrar uma correspondência, essa fonte local será usada. Caso contrário, o recurso de fonte especificado usando a função `url()` é baixado e usado.

Ao permitir que os autores forneçam suas próprias fontes, `@font-face` torna possível projetar conteúdo sem se limitar às chamadas fontes "seguras para a web" (ou seja, as fontes que são tão comuns que são consideradas como universalmente disponível). A capacidade de especificar o nome de uma fonte instalada localmente a ser procurada e usada permite personalizar a fonte além do básico, ao mesmo tempo em que é possível fazê-lo sem depender de uma conexão com a Internet.

É comum usar `url()` e `local()` juntos, para que a cópia instalada da fonte do usuário seja usada, se disponível, voltando ao download de uma cópia da fonte, caso ela não seja encontrada no dispositivo do usuário.

A regra de CSS `@font-face` pode ser usada não apenas no nível superior de um CSS, mas também dentro de qualquer CSS conditional-group at-rule.

```css
@font-face {
  font-family: "Open Sans";
  src:
    url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
```

Sintaxe
-------

### Descritores

`font-display` (en-US)

Determina como uma fonte é exibida, com base em se e quando é baixada e pronta para uso.

`font-family` (en-US)

Especifica um nome que será usado como o valor nominal da fonte para as propriedades da fonte.

`font-stretch` (en-US)

Um valor `font-stretch` (en-US). Desde o Firefox 61 (e em outros navegadores modernos), isso também aceita dois valores para especificar um intervalo suportado por uma fonte, por exemplo, extensão de fonte: `font-stretch: 50% 200%;`

`font-style` (en-US)

Um valor `font-style` (en-US). Desde o Firefox 61 (e em outros navegadores modernos), isso também aceita dois valores para especificar um intervalo suportado por uma fonte, por exemplo `font-style: oblique 20deg 50deg;`

`font-weight` (en-US)

Um valor de `font-weight`. Desde o Firefox 61 (e em outros navegadores modernos), isso também aceita dois valores para especificar um intervalo suportado por uma fonte, por exemplo `font-weight: 100 400;`

`font-variant` (en-US)

Um valor `font-variant` (en-US).

`font-feature-settings`

Permite o controle sobre recursos tipográficos avançados em fontes OpenType.

`font-variation-settings` (en-US)

Permite o controle de baixo nível sobre as variações de fonte OpenType ou TrueType, especificando os nomes dos quatro eixos das letras dos recursos para variar, juntamente com seus valores de variação.

`src` (en-US)

Especifica o recurso que contém os dados da fonte. Pode ser um URL para um local de arquivo de fonte remota ou o nome de uma fonte no computador do usuário.

Para fornecer ao navegador uma dica sobre o formato de um recurso de fonte - para que ele possa selecionar um adequado - é possível incluir um tipo de formato dentro de uma função `format()`:

```css
src:
  url(ideal-sans-serif.woff) format("woff"),
  url(basic-sans-serif.ttf) format("truetype");
```

Os tipos disponíveis são: `"woff"`, `"woff2"`, `"truetype"`, `"opentype"`, `"embedded-opentype"`, e `"svg"`.

`unicode-range` (en-US)

O intervalo de pontos de código Unicode a serem usados na fonte.

### Sintaxe formal
```

@font-face =
  @font-face { <declaration-list> }

```

Exemplos
--------

Este exemplo simplesmente especifica uma fonte para download a ser usada, aplicando-a a todo o corpo do documento:

Veja este exemplo

```css
@font-face {
  font-family: "Bitstream Vera Serif Bold";
  src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
}

p {
  font-family: "Bitstream Vera Serif Bold", serif;
}
```

```html
<p>This is Bitstream Vera Serif Bold.</p>
```

Neste exemplo, a cópia local do usuário "Helvetica Neue Bold" é usada; se o usuário não tiver essa fonte instalada (dois nomes diferentes são tentados), a fonte para download denominada "MgOpenModernaBold.ttf" será usada:

```css
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
```

Font MIME Types
---------------

| Formato | MIME type |
| --- | --- |
| TrueType | `font/ttf` |
| OpenType | `font/otf` |
| Web Open File Format | `font/woff` |
| Web Open File Format 2 | `font/woff2` |

Notes
-----

* As fontes da Web estão sujeitas à mesma restrição de domínio (os arquivos de fonte devem estar no mesmo domínio da página que os utiliza), a menos que os Controles de Acessos HTTP (en-US) sejam usados para relaxar essa restrição.
* `@font-face` não pode ser declarado dentro de um seletor CSS. Por exemplo, o seguinte não funcionará:

```css
.className {
  @font-face {
    font-family: MyHelvetica;
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
      url(MgOpenModernaBold.ttf);
    font-weight: bold;
  }
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-face-rule |

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

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

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

* About WOFF (en-US)
* Everythingfonts font-face generator
* FontSquirrel @font-face generator
* Beautiful fonts with @font-face
* Open Font Library
* When can I use WOFF?
* When can I use SVG Fonts?
* Free Fancy Cool Fonts


Tipos básicos de dados CSS - CSS

Tipos básicos de dados CSS
==========================

**Tipos básicos de dados CSS** definem valores típicos (incluindo palavras chaves e unidades) aceitos pelas propriedades e funções do CSS. Eles são um tipo especial de tipo de valor do componente.

Na sintaxe formal, os tipos de dados são indicados pela palavra chave aplicada entre os sinais de desigualdade "<" e ">".

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

* `<angle>` (en-US)
* `<basic-shape>` (en-US)
* `<blend-mode>`
* `<color>`
* `<custom-ident>` (en-US)
* `<filter-function>` (en-US)
* `<flex>` (en-US)
* `<frequency>` (en-US)
* `<gradient>` (en-US)
* `<image>`
* `<integer>` (en-US)
* `<length>` (en-US)
* `<number>`
* `<percentage>` (en-US)
* `<position>` (en-US)
* `<ratio>` (en-US)
* `<resolution>` (en-US)
* `<shape-box>` (en-US)
* `<single-transition-timing-function>` (en-US)
* `<string>` (en-US)
* `<time>`
* `<transform-function>` (en-US)
* `<url>()` (en-US)
Especificações
--------------

| Specification |
| --- |
| CSS Values and Units Module Level 4  |


<image> - CSS

<image>
=======

O tipo de data CSS **`<image>`** representa uma imagem bi-dimensional. Existem dois tipos de imagens: imagens planas, referenciada por um `<url>()` (en-US), e imagens geradas dinamicamente, geradas por `<gradient>` (en-US) ou `element()`. Imagens podem ser usadas em inumeras propriedades CSS, como `background-image` (en-US), `border-image` (en-US), `content`, `cursor`, e `list-style-image` (en-US).

Tipos de imagens
----------------

CSS pode lidar com os seguintes tipos de imagens:

* Imagens com *dimensões intrínsecas* (tamanho natural), tipo um JPEG, PNG, ou outro formato rasterizado.
* Imagens com *multiplas dimensões intrínsecas,* existente em várias versões dentro de um único arquivo, como alguns formatos .ico. (Nesse caso, a dimensões intrínsecas serão a largura da imagem na área e a proporção mais semelhante à caixa contendo.)
* Imagens sem dimensões intrínsecas mas com um aspecto intrínseco entre a largura e altura, como um SVG ou outro vetor.
* Imagens com nenhuma dimensões intrínsecas, e nenhuma relação de aspecto intrínseco como um gradiente CSS.

CCS determina um tamanho concreto do objeto usando (1) *suas dimensões intrínsecas;* (2) *seu tamanho especificado,* definido por propriedades CSS como `width`, `height`, ou `background-size`; e (3) *é o tamanho padrão,* determinado pelo tipo de propriedade em que a imagem é usada:

| Tipo de objeto | Tamanho do objeto padrão |
| --- | --- |
| `background-image` (en-US) | O tamanho da área de posicionamento do fundo do elemento. |
| `list-style-image` (en-US) | O tamanho de um carácter `1em` |
| `border-image` (en-US) | O tamanho da área da imagem da borda do elemento |
| `cursor` | O tamanho definido pelo navegador correspondente ao tamanho normal do cursor no sistema do cliente |
| `border-image-source` (en-US) | ? |
| `mask-image` (en-US) | ? |
| `shape-outside` (en-US) | ? |
| `mask-border-source` (en-US) | ? |
| Substituí o conteúdo, como quando combinando `content` com um pseudo-elemento (`::after` ou `::before`) | Um 300px × 150px retângulo |

O tamanho do objeto concreto é calculado usando o seguinte algoritimo:

* Se o tamanho especificado define *tanto a largura quanto a altura,* esses valores serão usado no tamanho concreto do objeto.
* Se o tamanho especificado define apenas a largura ou a altura, o valor que falta é determind se o valor espeficiado ado usando a relação intrínseca, se existir algum, as dimensões intrínsecas se o valoer espeficicado combinar, ou o tamanho do objeto padrão para esse valor ausente.
* Se o tamanho especificado define nem largura ou altura, o tamanho concreto é calculado de modo que corresponda à proporção intrínseca da imagem mas sem exceder o tamanho padrão do objeto em qualquer dimensão. Se a imagem não tiver relação de aspecto intrínseco, o relação de aspecto intrínseco do objeto é aplicado para ser usado; se esse objeto for vazio, a largura ou altura que faltam são retirados do tamanho de objeto padrão.

**Nota:** Não são todos os navegadores que suportam cada tipo de imagem em cada propriedade. Veja a seção compatibilidade dos navegadores para mais detalhes.

Sintaxe
-------

O tipo de data `<image>` pode ser representado por qualquer item seguinte:

* Uma imagem denotada pelo tipo de data `<url>()` (en-US)
* Um tipo de data `<gradient>` (en-US)
* Uma parte da página web, definida pela função `element()`
Exemplos
--------

### Imagens válidas
```

url(test.jpg)               /* Uma <url>, enquanto test.jpg é uma imagem real */
linear-gradient(blue, red)  /* Um <gradient> */
element(#realid)            /* Uma parte da página web, referenciada por uma função element() se "realid" for um ID existente na página */
```

### Imagens inválidas
```

cervin.jpg        /* Um arquivo imagem deve ser definido usando a função url(). */
url(report.pdf)   /* Um arquivo apontado pela função url() deve ser uma imagem. */
element(#fakeid)  /* Um elemento ID deve ser um ID existente na página. */
```

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

| Specification |
| --- |
| CSS Images Module Level 3 # image-values |

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

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

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

* `<gradient>` (en-US)
* `element()`


background-attachment - CSS

background-attachment
=====================

Resumo
------

Se um `background-image` (en-US) é especificado, a propriedade CSS **`background-attachment`** determina se aquela posição da imagem é fixa com o viewport, ou se irá rolar juntamente com o seu bloco.

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

Sintaxe
-------

```css
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

background-attachment: inherit;
```

### Valores

`fixed`

Essa chave significa que o background é fixo em relação ao viewport. Mesmo que um elemento tenha um mecanismo de rolar, o background 'fixed' não movimenta com o elemento.

`local`

Essa chave significa que o background é fixo em relação ao conteúdo do elemento: ise ele tem um mecanismo de rolar, o background rola com o conteúdo do elemento, e a área pintada e o posicionamento do background são relativos à área de rolagem do elemento ao invés da borda de fronteira deles.

`scroll`

Essa chave significa que o background é fixo em relação ao elemento em si e não rola com seu conteúdo. (É efetivamente ligado à borda do elemento.)

### Formal syntax
```

background-attachment =
  <attachment># (en-US)

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

```

Exemplos
--------

### Exemplo simpes

#### CSS

```css
p {
  background-image: url("starsolid.gif");
  background-attachment: fixed;
}
```

#### HTML

```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
</p>
```

#### Resultado

### Suporte de múltiplas imagem de background

Essa propriedade suporta múltiplas imagens de background. Você pode especificar `<attachment>` para cada background, separado por vírgulas. Cada imagem é combinada com o correspondente tipo de anexo, do primeiro especificado ao último.

#### CSS

```css
p {
  background-image: url("starsolid.gif"), url("startransparent.gif");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
}
```

#### HTML

```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
  Suddenly she came upon a little three-legged table, all made of solid glass;
  there was nothing on it except a tiny golden key, and Alice's first thought
  was that it might belong to one of the doors of the hall; but, alas! either
  the locks were too large, or the key was too small, but at any rate it would
  not open any of them. However, on the second time round, she came upon a low
  curtain she had not noticed before, and behind it was a little door about
  fifteen inches high: she tried the little golden key in the lock, and to her
  great delight it fitted!
</p>
```

#### Resultado

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

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

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

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

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

* Multiple backgrounds


:not() - CSS

:not()
======

Resumo
------

A pseudo-classe CSS de **negação**, `:not(X)`, é uma notação funcional que recebe um seletor simples X como argumento. Ela seleciona um elemento que não é representado por seu argumento. *X* não pode conter outro seletor de negação.

**Nota:** Seletores inúteis podem ser escritos usando esta pseudo-classe. Por exemplo, `:not(*)` seleciona qualquer elemento que não é algum elemento, então a regra nunca é aplicada.

* É possível sobreescrever outras regras. E.g. `foo:not(bar)` vai selecionar os mesmos elementos do que o mais simples foo. No entanto a especificação é maior no exemplo com `:not`.
* `:not(foo){} vai selecionar tudo que não for foo`, **incluindo os elementos `<html>` e `<body>`.**
* Este seletor apenas se aplica a um elemento; não se pode usa-lo para excluir todos os seus ancestores. Por exemplo, `body :not(table) a` ainda vai ser aplicado a links dentro de tabelas, já que `<tr>` (en-US) vai ser selecionado pelo `:not()` do seletor.

Sintaxe
-------
```

:not(selector) { style properties }
```

Exemplos
--------

```css
p:not(.classico) {
  color: red;
}
body \*:not(p) {
  color: green;
}
```

Dado o CSS acima e o HTML abaixo...

```html
<p>Um pouco de texto.</p>
<p class="classico">Um pouco mais de texto.</p>
<span>Mais um texto</span>
```

Se obtém resultados como este:

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

| Specification |
| --- |
| Selectors Level 4 # negation |

Compatibilidade em Navegadores
------------------------------

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


margin - CSS

margin
======

A propriedade **`margin`** do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: `margin-top`, `margin-right` (en-US), `margin-bottom`, e `margin-left` (en-US).

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

Sintaxe
-------

```css
/\* Aplica para todos os quatro lados \*/
margin: 1em;

/\* vertical | horizontal \*/
margin: 5% auto;

/\* topo | horizontal | inferior \*/
margin: 1em auto 2em;

/\* topo | direita | inferior | esquerda \*/
margin: 2px 1em 0 auto;

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

A propriedade `margin` pode ser especificada usando um, dois, três ou quatro valores. Cada valor deve ser um `<length>`, uma `<percentage>`, ou a palavra-chave `auto`. Cada valor pode ser positivo, zero ou negativo.

* Quando **um** valor é especificado, a mesma margem é aplicada para **todos os quatro lados**.
* Quando **dois** valores são especificados, a primeira margem é aplicada aos **lados** **superior e inferior,** e a segunda aos **lados** **esquerdo e direito**.
* Quando **três** valores são especificados, a primeira margem é apliacada ao **topo**, a segunda aos **lados** **esquerdo e direito**, e a terceira ao **lado** **inferior**.
* Quando **quatro** valores são especificados, as margens são aplicadas aos lados **superior**, **direito**, **inferior** e **esquerdo**, nesta ordem (sentido horário).
### Valores

**`<length>` (en-US)**

O tamanho da margem como um valor fixo.

`<percentage>` (en-US)

O tamanho da margem como um percetual, relativo à *largura* do bloco em que o elemento está contido.

`auto`

O navegador seleciona uma margem adequada para utilizar. Por exemplo, em alguns casos este valor pode ser utilizado para centralizar o elemento.

### Sintaxe formal
```

margin =
  <'margin-top'>{1,4} (en-US)

```

Exemplos
--------

### Exemplo simples

#### HTML

```html
<div class="center">Este elemento está centralizado.</div>

<div class="outside">
  Este elemento está posicionado fora de seu bloco recipiente.
</div>
```

#### CSS

```css
.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}
```

### Mais exemplos

```css
margin: 5%; /\* todos os lados: margem de 5% \*/

margin: 10px; /\* todos os lados: margem de 10px \*/

margin: 1.6em 20px; /\* topo e inferior: margem de 1.6em \*/
/\* esquerda e direita: margem de 20px \*/

margin: 10px 3% 1em; /\* topo: margem de 10px \*/
/\* esquerda e direita: margem de 3% \*/
/\* inferior: margem de 1em \*/

margin: 10px 3px 30px 5px; /\* topo: margem de 10px \*/
/\* direita: margem de 3px \*/
/\* inferior: margem de 30px \*/
/\* esquerda: margem de 5px \*/

margin: 2em auto; /\* topo e inferior: margem de 2em \*/
/\* caixa está horizontalmente centralizada \*/

margin: auto; /\* topo e inferior: margem de 0 \*/
/\* caixa está horizontalmente centralizada \*/
```

Notas
-----

### Centralização horizontal

Para centralizar algo horizontalmente em navegadores modernos, você pode utilizar `display: flex; justify-content: center;`

Contudo, em navegadores antigos, como IE8-9 que não suporta layout flexbox, estes não estão disponíveis. Para centralizar um elemento dentro de seu pai, use `margin: 0 auto;` .

### Colapso de margens

Às vezes, as margens superior e inferior de elementos são colapsadas em uma única margem que é igual à maior das duas margens. Veja Dominando margin collapsing para mais informações.

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin |

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `margin-bottom`: `0`
* `margin-left` (en-US): `0`
* `margin-right` (en-US): `0`
* `margin-top`: `0`
 |
| Aplica-se a | all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`. |
| Inherited | não |
| Percentages | refer to the width of the containing block |
| Computed value | as each of the properties of the shorthand:* `margin-bottom`: the percentage as specified or the absolute length
* `margin-left` (en-US): the percentage as specified or the absolute length
* `margin-right` (en-US): the percentage as specified or the absolute length
* `margin-top`: the percentage as specified or the absolute length
 |
| Animation type | a length |

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

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

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

* CSS Box Model
* Margin collapsing


min-height - CSS

min-height
==========

Sumário
-------

 A propriedade `min-height` do CSS é usado para definir a altura mínima de um determinado elemento. Ele impede que o valor usado da propriedade `height` se torne menor que o valor especificado para min-height.
 O valor de `min-height` substitui os dois `max-height` (en-US) e `height`.

|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited | não |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as `0`. |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length, percentage or calc(); |

Sintaxe
-------
```

sintaxe forma:
```
min-height =
  auto                                      | (en-US)
  <length-percentage [0,∞]>                 | (en-US)
  min-content                               | (en-US)
  max-content                               | (en-US)
  fit-content( <length-percentage [0,∞]> )

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

```

```
```

min-height: 3.5em
min-height: 10%
min-height: max-content
min-height: min-content
min-height: fit-content
min-height: fill-available

min-height: inherit
```

### Valores

`<length>`

O valor fixo mínimo da altura. Veja `<length>` (en-US) para possíveis unidades. Valores negativos fazem da declaração inválida.

`<percentage>`

O valor fixo mínimo da altura expressado como uma `<percentage>` (en-US) do conteúdo da altura do bloco. Valores negativos fazem da declaração inválida.

`max-content`
Experimental

The intrinsic preferred height.

`min-content`
Experimental

The intrinsic minimum height.

`fill-available`
Experimental

The containing block height minus horizontal margin, border and padding. Some browsers implement an ancient name for this keyword, `available`.

`fit-content`
Experimental

According CSS3 Box, this is a synonym of `min-content`. CSS3 Sizing defines a more complex algorithm, but no browser implements it, even in an experimental way.

Exemplos
--------

```css
table {
  min-height: 75%;
}

form {
  min-height: 0;
}
```

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

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

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

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

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

* `width`, `height`, `max-height` (en-US)
* The box model (en-US), `min-width` (en-US), `box-sizing`, `height`, `max-height` (en-US)


:checked - CSS

:checked
========

A pseudo-classe **`:checked`** de um seletor CSS representa um elemento **radio** (`<input type="radio">`), **checkbox** (`<input type="checkbox">`) ou **option** (`<option>` em um `<select>`) que está marcada ou alternado para um estado ligado. O usuário pode mudar seu estado clicando no elemento, ou selecionando um valor diferente, nesse caso a pseudo-classe **:checked** não se aplica a esse elemento, mas vai para um elemento relevante.

Sintaxe
-------

```css
input:checked {
  margin-left: 25px;
  border: 1px solid blue;
}
```

### Sintaxe formal
```

elemento:checked { estilos de propriedades }
```

Exemplos
--------

### Exemplo de seletores

```css
/\* qualquer elemento "checkable" \*/
:checked {
  width: 50px;
  height: 50px;
}

/\* qualquer elemento radio \*/
input[type="radio"]:checked {
  margin-left: 25px;
}

/\* apenas elementos checkbox \*/
input[type="checkbox"]:checked {
  display: none;
}

/\* apenas elementos option \*/
option:checked {
  color: red;
}
```

`input[type="radio"]:checked`

Representa todos os botões de rádio na página que estão ativos

`input[type="checkbox"]:checked`

Representa todos os checkboxes na página que estão ativos

`option:checked`

Representa todos os selects na página que estão selecionados

### Usando checkboxes escodindos para armazenar algum valor booleano

 A pseudo-classe `:checked` aplicada em checkboxes escondidos, adicionado ao início de sua página pode
 ser aplicada de forma a armazenar algum booleano dinâmico para ser usado por uma regra CSS. O exemplo a seguir mostra como exibir/esconder um elemento expansível com um simples clique em um botão (download esse demo).

```css
#expand-btn {
  margin: 0 3px;
  display: inline-block;
  font:
    12px / 13px "Lucida Grande",
    sans-serif;
  text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
  padding: 3px 6px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  background-color: #969696;
  cursor: default;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow:
    rgba(255, 255, 255, 0.4) 0 1px,
    inset 0 20px 20px -10px white;
  -webkit-box-shadow:
    rgba(255, 255, 255, 0.4) 0 1px,
    inset 0 20px 20px -10px white;
  box-shadow:
    rgba(255, 255, 255, 0.4) 0 1px,
    inset 0 20px 20px -10px white;
}

#isexpanded:checked ~ #expand-btn,
#isexpanded:checked ~ \* #expand-btn {
  background: #b5b5b5;
  -moz-box-shadow:
    inset rgba(0, 0, 0, 0.4) 0 -5px 12px,
    inset rgba(0, 0, 0, 1) 0 1px 3px,
    rgba(255, 255, 255, 0.4) 0 1px;
  -webkit-box-shadow:
    inset rgba(0, 0, 0, 0.4) 0 -5px 12px,
    inset rgba(0, 0, 0, 1) 0 1px 3px,
    rgba(255, 255, 255, 0.4) 0 1px;
  box-shadow:
    inset rgba(0, 0, 0, 0.4) 0 -5px 12px,
    inset rgba(0, 0, 0, 1) 0 1px 3px,
    rgba(255, 255, 255, 0.4) 0 1px;
}

#isexpanded,
.expandable {
  display: none;
}

#isexpanded:checked ~ \* tr.expandable {
  display: table-row;
  background: #cccccc;
}

#isexpanded:checked ~ p.expandable,
#isexpanded:checked ~ \* p.expandable {
  display: block;
  background: #cccccc;
}
```

```html
<input type="checkbox" id="isexpanded" />

<h1>Elementos expansíveis</h1>
<table>
    <thead>
        <tr><th>Coluna #1</th><th>Coluna #2</th><th>Coluna #3</th></tr>
    </thead>
    <tbody>
        <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
        <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
        <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
        <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
        <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
    </tbody>
</table>

<p>[some sample text]</p>
<p><label for="isexpanded" id="expand-btn">Mostra ou esconder elementos</label></p>
<p class="expandable">[outra amostra de texto]</p>
<p>[alguma amostra de texto]</p>
</body>
</html>
```

### Usando radioboxes escondidos para armazenar algum valor CSS booleano

Você também pode usar a pseudo-classe `:checked`aplicada a um radioboxe escondido afim de construir, por exemplo, uma **galeria de imagem onde as imagens apenas sejam exibidas no tamanho cheio com o clique do mouse em visualizar.** Veja essa demonstração como uma dica.

**Nota:** Para um efeito análogo, mas baseada na pseudo-classe `:hover` sem radioboxes escondidos, veja essa demostração, tomadas a partir de uma página `:hover`.

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

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

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

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


::after (:after) - CSS

::after (:after)
================

Em CSS, **`::after`** cria um pseudo-elemento que é o último filho do elemento selecionado. Muitas vezes é usado para adicionar e melhorar o conteúdo de um elemento como a propriedade `content`. É inline por padrão.

```css
/\* Adiciona uma seta após os links \*/
a::after {
  content: "→";
}
```

Sintaxe
-------

Error: could not find syntax for this item

**Nota:** O CSS3 introduziu a notação `::after` (com dois sinais de dois pontos) para distinguir pseudo-classes dos pseudo-elementos. Os navegadores também aceitam `:after`, introduzido no CSS2.

Exemplos
--------

### Uso simples

Vamos criar duas classes: uma para parágrafos tediosos e uma para parágrafos excitantes. Podemos então marcar cada parágrafo adicionando um pseudo-elemento ao final dele.

```html
<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">
  Contributing to MDN is easy and fun. Just hit the edit button to add new live
  samples, or improve existing samples.
</p>
```

```css
.exciting-text::after {
  content: "<- now this \*is\* exciting!";
  color: green;
}

.boring-text::after {
  content: "<- BORING!";
  color: red;
}
```

#### Visualização

### Exemplos decorativos

Podemos estilizar textos ou imagens na propriedade `content` praticamente de qualquer forma que quisermos.

```html
<span class="ribbon">Observe onde a caixa de laranja está.</span>
```

```css
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::after {
  content: "Observe esta caixa laranja";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}
```

#### Visualização

### Dicas

O exemplo a seguir mostra o uso do `::after` pseudo-elemento em conjunto com a expressão CSS `attr()` e um atributo data personalizado `data-descr` para criar uma *dica* em forma de glossário feito em CSS puro. Verifique a visualização abaixo, ou veja este exemplo em página separada.

```html
<p>
  Aqui está o exemplo ao vivo do código acima.<br />
  Temos um pouco de
  <span data-descr="collection of words and punctuation">texto</span> aqui com
  algumas
  <span data-descr="small popups which also hide again">dicas</span>.<br />
  Não seja tímido, passe o mouse por cima para dar uma
  <span data-descr="not to be taken literally">olhada</span>.
</p>
```

```css
span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00f;
  cursor: help;
}

span[data-descr]:hover::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}
```

#### Visualização

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # generated-content |

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

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

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

* `::before`, `content`


font-feature-settings - CSS

font-feature-settings
=====================

Sumário
-------

A propriedade **`font-feature-settings`** do CSS te dá controle sobre tipografia avançada nas fontes do tipo OpenType.

**Nota:** Sempre que possível, deve usar o `font-variant` (en-US) propriedade abreviada ou uma propriedade extensa associada, `font-variant-ligatures` (en-US), `font-variant-caps` (en-US), `font-variant-east-asian` (en-US), `font-variant-alternates` (en-US), `font-variant-numeric` (en-US) ou `font-variant-position` (en-US).

Esta propriedade é um recurso de baixo nível projetado para lidar com casos especiais onde não existe outra maneira de habilitar ou acessar um recurso de fonte OpenType.

Em particular, esta propriedade CSS não deve ser usada para habilitar small caps.

|  |  |
| --- | --- |
| Initial value | `normal` |
| 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 |

Sintaxe
-------

```css
/\* Use the default settings \*/
font-feature-settings: normal;

/\* Set values for OpenType feature tags \*/
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings:
  "smcp",
  "swsh" 2;

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

### Valores

`normal`

Text is laid out using default settings.

`<feature-tag-value>`

 Ao renderizar texto, a lista de características OpenType é passada para o mecanismo de layout de texto para ativar ou desativar recursos do tipo de letra. A tag é sempre uma `<string>` (en-US) de 4 caracteres ASCII. Se possuir mais ou menos caracteres ou conter caracteres fora da faixa U+20 - U+7E, toda a propriedade é invalida.
 O valor é um inteiro positivo. As duas palavras-chaves `on` e `off` são sinônimos de `1` e `0` respectivamente. Se nenhum valor é definido, o padrão é `1`. Para características OpenType não-booleanas (ex. stylistic alternates), o valor implica em um glifo particular para ser selecionado; para valores booleanos, é um interruptor.

### Sintaxe formal
```

font-feature-settings =
  normal                | (en-US)
  <feature-tag-value># (en-US)

<feature-tag-value> =
  <opentype-tag> [ (en-US) <integer [0,∞]> (en-US) | (en-US) on | (en-US) off ] (en-US)? (en-US)

<opentype-tag> =
  <string> (en-US)

```

Exemplos
--------

```css
/\* use small-cap alternate glyphs \*/
.smallcaps {
  font-feature-settings: "smcp" on;
}

/\* convert both upper and lowercase to small caps (affects punctuation also) \*/
.allsmallcaps {
  font-feature-settings: "c2sc", "smcp";
}

/\* enable historical forms \*/
.hist {
  font-feature-settings: "hist";
}

/\* disable common ligatures, usually on by default \*/
.noligs {
  font-feature-settings: "liga" 0;
}

/\* enable tabular (monospaced) figures \*/
td.tabular {
  font-feature-settings: "tnum";
}

/\* enable automatic fractions \*/
.fractions {
  font-feature-settings: "frac";
}

/\* use the second available swash character \*/
.swash {
  font-feature-settings: "swsh" 2;
}

/\* enable stylistic set 7 \*/
.fancystyle {
  font-family: Gabriola; /\* available on Windows 7, and on Mac OS \*/
  font-feature-settings: "ss07";
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-feature-settings-prop |

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

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

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

* FontFont OpenType User Guide (pdf)
* OpenType Feature Tags list
* Using the whole font (The -moz syntax is the old one. On Gecko, use the -ms syntax but with -moz).


mix-blend-mode - CSS

mix-blend-mode
==============

Resumo
------

A propriedade **`mix-blend-mode`** descreve como um elemento de conteúdo deve ser mesclado com os elementos abaixo dele no background.

|  |  |
| --- | --- |
| Initial value | `normal` |
| Aplica-se a | all elements |
| Inherited | não |
| Computed value | as specified |
| Animation type | Not animatable |
| Creates stacking context | yes |

Sintaxe
-------

```css
/\* Valores para esta propriedade \*/
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

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

### Valores

`<blend-mode>`

É uma `<blend-mode>` que descreve qual mesclagem deve ser aplicada. Podem ser descritos vários valores, separados por vírgula.

### Sintaxe formal
```

mix-blend-mode =
  <blend-mode>  | (en-US)
  plus-darker   | (en-US)
  plus-lighter

<blend-mode> =
  normal       | (en-US)
  multiply     | (en-US)
  screen       | (en-US)
  overlay      | (en-US)
  darken       | (en-US)
  lighten      | (en-US)
  color-dodge  | (en-US)
  color-burn   | (en-US)
  hard-light   | (en-US)
  soft-light   | (en-US)
  difference   | (en-US)
  exclusion    | (en-US)
  hue          | (en-US)
  saturation   | (en-US)
  color        | (en-US)
  luminosity

```

Exemplos
--------

```html
<svg>
  <circle cx="40" cy="40" r="40" fill="red" />
  <circle cx="80" cy="40" r="40" fill="lightgreen" />
  <circle cx="60" cy="80" r="40" fill="blue" />
</svg>
```

```css
circle {
  mix-blend-mode: screen;
}
```

### Resultado

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

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

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

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

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

* `<blend-mode>`
* `background-blend-mode`