Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
text-decoration
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
* Some parts of this feature may have varying levels of support.
Resumo
A propriedadetext-decoration do CSS é usada para definir a formatação deunderline,overline,line-through oublink. 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 estilop { text-decoration: underline; } faria com que todo o parágrafo fosse sublinhado. A regraem { text-decoration: none; } não causaria qualquer mudanca; o parágrafo inteiro ainda estaria sublinhado. Entretanto, a regraem { 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,text-decoration-line, etext-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:
|
|---|---|
| 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:
|
| Animation type | as each of the properties of the shorthand:
|
Sintaxe
/* 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 propriedadetext-decoration é escrita de forma reduzida e pode usar os valores de cada uma das propriedades:text-decoration-line,text-decoration-color, etext-decoration-style
Sintaxe Formal
text-decoration =
<'text-decoration-line'>||
<'text-decoration-thickness'>||
<'text-decoration-style'>||
<'text-decoration-color'>
<text-decoration-line> =
none|
[underline||overline||line-through||blink]|
spelling-error|
grammar-error
<text-decoration-thickness> =
auto|
from-font|
<length-percentage>
<text-decoration-style> =
solid|
double|
dotted|
dashed|
wavy
<text-decoration-color> =
<color>
<length-percentage> =
<length>|
<percentage>
Exemplos
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;}<h1>Underlined Header</h1><p>If you want to strike out text, use line-through.</p><p> This text might blink for you - if you use Explorer, it will not.</p><h1>and now an overlined header.</h1><p> This <a 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>This text has both underline and overline.</p>Especificações
| Specification |
|---|
| CSS Text Decoration Module Level 4 # text-decoration-property |
| Scalable Vector Graphics (SVG) 2 # TextDecorationProperties |
Compatibilidade com navegadores
Veja também
- O atributo
list-stylecontrola a aparência dos itens em listas<ol>e<ul>no HTML.