recursal/MDN huggingface dataset:
scrollbar-color
===============

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

A propriedade CSS **`scrollbar-color`** define as cores da barra de rolagem do navegador.

**Track** refere-se ao fundo da barra de rolagem, que normalmente é fixa, independente da posição da página.

**Thumb** refere-se a parte móvel da barra de rolagem, um botão auxiliar que flutua acima da **Track**.

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

Sintaxe
-------


```css
/\* Palavras reservadas \*/
scrollbar-color: auto;
scrollbar-color: dark;
scrollbar-color: light;

/\* Nomes de <color> \*/
scrollbar-color: rebeccapurple green; /\* Duas cores válidas.
O primeiro valor aplica-se ao Thumb, o segundo ao Track \*/

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

### Valores

`<scrollbar-color>`

Define a cor da scrollbar.

| `auto` | Valor padrão de renderização do background da scrollbar (Track), caso não sejam definidos outros valores. |
| --- | --- |
| `dark` | Mostra uma scrollbar mais escura, podendo ser um estilo padrão definido pelo navegador, ou personalizado com cores escuras. |
| `light` | Mostra uma scrollbar mais clara, podendo ser um estilo padrão definido pelo navegador, ou personalizado com cores escuras. |
| `<color> <color>` | A primeira cor é aplicada à **thumb**, a segunda cor ao **track** |

**Nota:** User Agents must apply any `scrollbar-color` value set on the root element to the viewport.

### Sintaxe formal
```

scrollbar-color =   
  auto        | (en-US)  
  <color>{2} (en-US)    
  
```

Exemplo
-------

### CSS


```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
}
```

### HTML


```html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>
```

### Result

Cuidados de acessibilidade
--------------------------

When using `scrollbar-color` property with specific color values, authors should ensure the specified colors have enough contrast between them. For keyword values, UAs should ensure the colors they use have enough contrast. See Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1.

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

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1 # scrollbar-color |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
margin-bottom
=============

A propriedade CSS **`margin-bottom`** define a margin area na parte inferior de um elemento. Um valor positivo coloca o valor mais longe de outros elementos vizinhos, enquanto um valor negativo, aproxima.

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

![The effect of the CSS margin-bottom property on the element box](/files/4045/margin-bottom.svg)

A propriedade não tem efeito em non-replaced (en-US) elementos inline, como `<span>` ou `<code>`.

Sintaxe
-------


```css
/\* <length> values \*/
margin-bottom: 10px; /\* Um tamanho absoluto \*/
margin-bottom: 1em; /\* relativo ao tamanho do texto \*/
margin-bottom: 5%; /\* relativo à largura do container do bloco mais próximo \*/

/\* Keyword values \*/
margin-bottom: auto;

/\* Global values \*/
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: unset;
```


A propriedade `margin-bottom` é especificada como a palavra chave `auto`, ou a `<length>`, ou a`<percentage>`. Esse valor pode ser positivo, zero ou negativo

### Values

`<length>` (en-US)

O tamanho de uma margin com um valor fixo

`<percentage>` (en-US)

O tamanho de uma margin como porcentagem, é relativa com o *tamanho* do bloco pai.

`auto`

O navegador seleciona um valor adequado para usar. Veja `margin`.

### Sintaxe formal
```

margin-bottom =   
  <length-percentage>  | (en-US)  
  auto                   
  
<length-percentage> =   
  <length> (en-US)      | (en-US)  
  <percentage> (en-US)    
  
```

Exemplo
-------

### HTML


```html
<div class="container">
  <div class="box0">Box 0</div>
  <div class="box1">Box 1</div>
  <div class="box2">Box one's negative margin pulls me up</div>
</div>
```

### CSS

CSS para definir margin-bottom e height


```css
.box0 {
  margin-bottom: 1em;
  height: 3em;
}
.box1 {
  margin-bottom: -1.5em;
  height: 4em;
}
.box2 {
  border: 1px dashed black;
  border-width: 1px 0;
  margin-bottom: 2em;
}
```


Algumas definições para container e divs, para que o os efeitos de margin possam ser vistos com mais clareza


```css
.container {
  background-color: orange;
  width: 320px;
  border: 1px solid black;
}
div {
  width: 320px;
  background-color: gold;
}
```

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

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

|  |  |
| --- | --- |
| Initial value | `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 | 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.
CSS Basic User Interface
========================

**CSS Basic User Interface** é um módulo CSS que permite definir a renderização e a funcionalidade de recursos relacionados à interface do usuário.

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

### Propriedades

* `appearance` (en-US) 
Experimental
* `box-sizing`
* `cursor`
* `ime-mode` 
Deprecated
* `nav-down` 
Experimental
* `nav-left` 
Experimental
* `nav-right` 
Experimental
* `nav-up` 
Experimental
* `outline`
* `outline-width` (en-US)
* `outline-style` (en-US)
* `outline-color` (en-US)
* `outline-offset` (en-US)
* `resize` (en-US)
* `text-overflow`
* `user-select` (en-US) 
Experimental
Guias
-----

Usando valores URL na propriedade `cursor` (en-US)

Explica como uma URL pode ser usada com a propriedade `cursor` para criar cursores personalizados.

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4  |
:first-of-type
==============

A CSS pseudo-classe **`:first-of-type`** representa o primeiro elemento de seu tipo entre os filhos de seu elemento pai.


```css
/\* Seleciona qualquer <p> que seja o primeiro elemento
 desse tipo entre seus irmãos \*/
p:first-of-type {
  color: red;
}
```


**Nota:** Originalmente definido, o elemento selecionado tinha que ter um pai. Desde o Seletores Nível 4, isso não é mais necessário.

Sintaxe
-------

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

### Estilizando o primeiro parágrafo

#### HTML


```html
<h2>Título</h2>
<p>Parágrafo 1</p>
<p>Parágrafo 2</p>
```


#### CSS


```css
p:first-of-type {
  color: red;
  font-style: italic;
}
```


#### Resultado

### Elementos aninhados

Este exemplo mostra como os elementos aninhados também podem ser estilizados. Note que o seletor universal (`*`) está implícito quando nenhum seletor simples está escrito.

#### HTML


```html
<article>
  <div>Esta `div` é a primeira!</div>
  <div>Esta <span>`span` aninhada é a primeira</span>!</div>
  <div>
    Este <em>`em` aninhado é o primeiro</em>, mas este
    <em>`em` aninhado é o último</em>!
  </div>
  <div>Este <span>`span` aninhado pegou o estilo</span>!</div>
  <b>Este `b` qualifica!</b>
  <div>Esta é a `div` final.</div>
</article>
```


#### CSS


```css
article :first-of-type {
  background-color: pink;
}
```


#### Resultado

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

| Specification |
| --- |
| Selectors Level 4 # first-of-type-pseudo |

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

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

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

* `:first-child`, `:last-of-type`, `:nth-of-type`
:disabled
=========

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


```css
/\* Selects any disabled <input> \*/
input:disabled {
  background: #ccc;
}
```

Sintaxe
-------

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

Este exemplo mostra um formulário básico de envio. Ele usa o evento JavaScript `change` (en-US) para permitir que o usuário ative / desative os campos de faturamento.

### HTML


```html
<form action="#">
  <fieldset id="shipping">
    <legend>Shipping address</legend>
    <input type="text" placeholder="Name" />
    <input type="text" placeholder="Address" />
    <input type="text" placeholder="Zip Code" />
  </fieldset>
  <br />
  <fieldset id="billing">
    <legend>Billing address</legend>
    <label for="billing-checkbox">Same as shipping address:</label>
    <input type="checkbox" id="billing-checkbox" checked />
    <br />
    <input type="text" placeholder="Name" disabled />
    <input type="text" placeholder="Address" disabled />
    <input type="text" placeholder="Zip Code" disabled />
  </fieldset>
</form>
```

### CSS


```css
input[type="text"]:disabled {
  background: #ccc;
}
```

### JavaScript


```js
// Wait for the page to finish loading
document.addEventListener(
  "DOMContentLoaded",
  function () {
    // Attach `change` event listener to checkbox
    document.getElementById("billing-checkbox").onchange = toggleBilling;
  },
  false,
);

function toggleBilling() {
  // Select the billing text fields
  var billingItems = document.querySelectorAll('#billing input[type="text"]');

  // Toggle the billing text fields
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}
```

### Resultado

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

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

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

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

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

* `:enabled`
margin-top
==========

Sumário
-------

![The effect of the CSS margin-top property on the element box](/files/4101/margin-top.svg)A propriedade CSS **`margin-top`** de um elemento indica o espaço acima do elemento. Valores negativos são aceitos.

Essa propriedade não tem efeito em *elementos non-replaced* inline elements, como `<tt>` (en-US) ou `<span>`.

|  |  |
| --- | --- |
| Initial value | `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 | the percentage as specified or the absolute length |
| Animation type | a length |

Sintaxe
-------


```css
/\* Valores <length> \*/
margin-top: 10px; /\* An absolute length \*/
margin-top: 1em; /\* A length relative to the text size \*/
margin-top: 5%; /\* A margin relative to the nearest block container's width \*/

/\* Valores padrão \*/
margin-top: auto;

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

### Valores

`<length>`

Especifica um tamanho fixo. Veja `<length>` (en-US) para possíveis valores.

`<porcentagem>`

Um `<percentage>` (en-US) sempre relativo ao **width** do bloco.

`auto`

Veja `margin`.

### Sintaxe formal
```

margin-top =   
  <length-percentage>  | (en-US)  
  auto                   
  
<length-percentage> =   
  <length> (en-US)      | (en-US)  
  <percentage> (en-US)    
  
```

Exemplos
--------


```css
.content {
  margin-top: 5%;
}
.sidebox {
  margin-top: 10px;
}
.logo {
  margin-top: -5px;
}
#footer {
  margin-top: 1em;
}
```

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
transform-style
===============

A propriedade **`transform-style`** CSS define se os elemento filhos são posicionados em um espaco 3D ou serão achatados ( flattened ) no plano do elemento

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

Se achatados, os elementos filho não existirão por conta própria ou sozinhos no espaço 3D.

Como essa propriedade não é herdada, ela deve ser definida para todos os descendentes que não sejam folhas do elemento.

Syntax
------


```css
/\* Keyword values \*/
transform-style: flat;
transform-style: preserve-3d;

/\* Valores globais \*/
transform-style: inherit;
transform-style: initial;
transform-style: unset;
```

### Values

`flat`

Indica que os filhos do elemento estão no plano do próprio elemento.

`preserve-3d`

Indica que os filhos do elemento devem ser posicionados no espaço 3D.

### Formal syntax
```

transform-style =   
  flat         | (en-US)  
  preserve-3d    
  
```

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

| Specification |
| --- |
| CSS Transforms Module Level 2 # transform-style-property |

|  |  |
| --- | --- |
| Initial value | `flat` |
| Aplica-se a | qualquer elemento transformavel |
| Inherited | não |
| Computed value | as specified |
| Animation type | discrete |
| Creates stacking context | yes |

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

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

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

* Using CSS transforms
Valor inicial
=============

O **Valor inicial** de uma propriedade CSS é o seu valor padrão, como listado em sua tabela de definição. O uso do valor inicial varia caso a propriedade seja herdada ou não.

* Para propriedades herdadas, o valor inicial é usado apenas em seu elemento raíz, desde que nenhum valor especificado seja fornecido.
* Para propriedades não-herdadas, o valor inicial é usado em todos os elementos, enquanto nenhum valor especificado é fornecido

**Nota:** Você pode especificar explicitamente um valor inicial, utilizando a palavra-chave `initial`

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

* Refercia CSS
* `initial` (en-US)
<display-outside>
=================

O `<display-outside>` as palavras-chave especificam a parte externa do elemento `display` type, que é essencialmente seu papel no layout de fluxo. Essas palavras-chave são usadas como valores do `display` e pode ser usada para fins legados como uma única palavra-chave ou conforme definido na especificação do Nível 3, juntamente com um valor do `<display-inside>` palavras-chave.

Sintaxe
-------

O `<display-outside>` O valor é definido usando uma palavra-chave da lista abaixo:

### Valor

`block`

O elemento gera uma caixa de elemento de bloco, gerando quebras de linha antes e depois do elemento, quando no fluxo normal.

`inline`

O elemento gera uma ou mais caixas de elementos embutidos que não geram quebras de linha antes ou depois de si mesmas. No fluxo normal, o próximo elemento estará na mesma linha se houver espaço

`run-in` 
Experimental

O elemento gera uma caixa de introdução. Se o irmão adjacente do elemento definido como`display: run-in` box é uma caixa de bloco, o `run-in` box se torna a primeira caixa embutida da caixa de bloco a seguir.

Os elementos de entrada funcionam como linhas ou blocos, dependendo dos elementos circundantes. Ou seja: Se a caixa de introdução contém uma caixa de bloco, o mesmo que bloco. Se uma caixa de bloco segue a caixa de introdução, a caixa de introdução torna-se a primeira caixa embutida da caixa de bloco. Se uma caixa embutida se seguir, a caixa de introdução se tornará uma caixa de bloco.


**Nota:**: Navegadores que suportam a sintaxe de dois valores, encontrando apenas o valor externo, como quando `display: block` ou `display: inline` especificado, definirá o valor interno como`flow`. Isso resultará no comportamento esperado; por exemplo, se você especificar um elemento a ser bloco, seria de esperar que os filhos desse elemento participassem do layout de fluxo normal em bloco e em linha.

### Sintaxe formal
```

<display-outside> =   
  block   | (en-US)  
  inline  | (en-US)  
  run-in    
  
```

Exemplo
-------

No exemplo a seguir, os elementos de extensão (normalmente exibidos como elementos embutidos) são definidos como `display: block` e, assim, divida em novas linhas e expanda para preencher seu contêiner na dimensão embutida.

### HTML


```html
<span>span 1</span> <span>span 2</span>
```

### CSS


```css
span {
  display: block;
  border: 1px solid rebeccapurple;
}
```

### Resultado

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

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

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

* `display`
    + `<display-inside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`
* Layout de bloco e embutido no fluxo normal (en-US)
* Contextos de formatação explicados (en-US)
word-break
==========

A propriedade CSS **`word-break`** é usada para especificar se o navegador deve inserir ou não quebras de linha onde, normalmente, o texto vazaria de seu container.

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

**Nota:** comparando com `overflow-wrap`, `word-break` criará uma quebra de linha no ponto exato em que o texto vazaria, mesmo que uma palavra pudesse ser colocada por completo em uma nova linha sem a necessidade de quebra da palavra.

Sintaxe
-------


```css
/\* Valores específicos \*/
word-break: normal;
word-break: break-all;
word-break: keep-all;

/\* Valores globais \*/
word-break: inherit;
word-break: initial;
word-break: unset;
```

### Valores

`normal`

Usa a regra de quebra de linha padrão.

`break-all`

Quebras de linha podem ser inseridas entre quaisquer caracteres de texto não-CJC (Chinês/Japonês/Coreano).

`keep-all`

Não permite quebra de linha para texto CJC. Texto não-CJC se comporta como `normal`.

`break-word`

Para evitar o vazamento, palavras que normalmente não seriam quebradas podem ser quebradas em pontos arbitrários se não houver pontos de quebra válidos na linha.

### Sintaxe formal
```

word-break =   
  normal      | (en-US)  
  keep-all    | (en-US)  
  break-all   | (en-US)  
  break-word    
  
```

Exemplos
--------

### Conteúdo HTML


```html
<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
</p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
</p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
</p>

<p>4. <code>word-break: break-word</code></p>
<p class="breakWord narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
</p>
```

### Conteúdo CSS


```css
.narrow {
  padding: 5px;
  border: 1px solid;
  display: table;
  max-width: 100%;
}

.normal {
  word-break: normal;
}

.breakAll {
  word-break: break-all;
}

.keepAll {
  word-break: keep-all;
}

.breakWord {
  word-break: break-word;
}
```

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

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

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

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

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

* `word-wrap`
Understanding CSS z-index
=========================

Normalmente páginas HTML podem ser consideradas bi-dimensionais, pois texto, imagens e outros elementos podem ser dispostos na página sem sobreposição. Há apenas um fluxo de renderização e todos os elementos sabem do espaço ocupado por outros. O atributo `z-index` (en-US) lhe permite ajustar a ordem de sobreposição dos objetos ao renderizar o conteúdo.

> 
> *Em CSS 2.1, cada caixa tem uma posição nas três dimensões. Em adição às suas posições na horizontal e vertical, caixas ficam no "eixo-z" e são formatadas uma em cima da outra. Posições no Eixo-Z são particularmente relevantes quando caixas se sobrepõem visualmente.*
> 
> 
> 

(from CSS 2.1 Section 9.9.1 - Layered presentation)

Isso significa que as regras de CSS te permitem posicionar caixas em camadas em adição ao *render* normal da camada (level 0). A posição Z de cada camada é expressa como um inteiro representando a ordem da pilha para renderização. Números maiores significam que são mais próximos do observador. A posição Z pode ser controlada pela propriedade CSS `z-index` (en-US).

Usar z-index aparenta ser extremamente fácil: uma única propriedade, endereçada a um único número inteiro, com um comportamento fácil-de-entender. No entanto, quando o z-index é aplicado para a hierarquia complexa dos elementos de HTML, seu comportamento pode ser difícil de entender ou até imprevisível. Isso é devido às complexas regras de *stacking*. Uma sessão dedicada foi reservada na especificação do CSS CSS-2.1 Appendix E para explicar melhor essas regras.

Esse artigo tentará explicar essas regras, com algumas simplificações e vários exemplos.

1. Stacking without z-index : Regras padrões de empilhamento
2. Stacking and float : Como lidar com elementos que usam *float*
3. Adding z-index : Usando index-z para mudar o empilhamento padrão
4. The stacking context : Notas sobre contexto do empilhamento
5. Stacking context example 1 : 2-level HTML hierarquia, z-index no último *level*
6. Stacking context example 2 : 2-level HTML hierarquia, z-index em todos os *levels*
7. Stacking context example 3 : 3-level HTML hierarquia, z-index no segundo *level*

*Note of the author: Thanks to Wladimir Palant and Rod Whiteley for the review.*

### Original Document Information

* Author(s): Paolo Lombardi
* This article is the English translation of an article I wrote in Italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
* Last Updated Date: July 9th, 2005