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
, text-decoration-line
, 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:
|
---|---|
Aplica-se a | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | não |
Midia | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Canonical order | order of appearance in the formal grammar of the values |
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 propriedade text-decoration
é escrita de forma reduzida e pode usar os valores de cada uma das propriedades: text-decoration-line
, text-decoration-color
, e text-decoration-style
Sintaxe Formal
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;
}
Especificações
Especificação | Status | Comentários |
---|---|---|
CSS Text Decoration Module Level 3 The definition of 'text-decoration' in that specification. |
Candidata a Recomendação | Transformado em uma propriedade reduzida. Adicionado suporte para o valor text-decoration-style . |
CSS Level 2 (Revision 1) The definition of 'text-decoration' in that specification. |
Recomendação | Sem mudanças significantes. |
CSS Level 1 The definition of 'text-decoration' in that specification. |
Recomendação | Definição inicial. |
Compatibilidade de Browser
Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Suporte básico | 1.0 (1.7 or earlier) | 1.0 | 3.0 | 3.5 | 1.0 |
Valor blink | 1.0 (1.7 or earlier) 23.0 (23.0)[1] |
(Yes)[1] | (Yes)[1] | 4.0 15.0[1] |
(Yes)[1] |
Propriedade reduzida | 6.0 (6.0)[3] 36.0 (36.0) |
Não suportado | Não suportado | Não suportado | 7.1[2] |
Feature | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Suporte básico | 1.0 (1.0) | (Yes) | (Yes) | (Yes) | (Yes) |
Valor blink | 1.0 (1.7 or earlier) 23.0 (23.0)[1] |
(Yes)[1] | (Yes)[1] | 4.0[1] | (Yes)[1] |
Propriedade reduzida | 6.0 (6.0)[3] 36.0 (36.0) |
? | ? | ? | 8[1] |
[1] O valor blink
não tem nenhum efeito.
[2] Safari não suporta text-decoration-style
.
[3] Essa versão do Gecko tem implementação parcial.
Veja também
- O atributo
list-style
controla a aparência dos itens em listas<ol>
e<ul>
no HTML.