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

Resumo
------

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

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

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

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

Sintaxe
-------


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

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

### Valores

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

### Sintaxe Formal
```

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

Exemplos
--------


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



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

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

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

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

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

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

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