text-decoration-style
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Resumo
A propriedade CSS text-decoration-style
CSS define o estilo das linhas especificadas por text-decoration-line
. O modelo aplica-se a todas as linhas, não há nenhuma forma de definir estilos diferentes para cada uma das linhas utilizando text-decoration-line
.
Se a decoração especificada tem um significado semântico específico, como uma linha de line-through o que significa que um texto tenha sido excluído, autores são encorajados a denotar este significado usando uma tag HTML, como <del>
ou <s>
. Como os navegadores podem ser deficientes em alguns casos, o significado semântico não vai desaparecer em tal situação.
Initial value | solid |
---|---|
Aplica-se a | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | não |
Computed value | as specified |
Animation type | discrete |
Syntax
/* Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;
/* Global values */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;
Valores
solid double dotted dashed wavy
-
É uma das seguintes palavras-chave:
Keyword Description Comment solid
Draws a single line double
Draws a double line dotted
Draws a dotted line dashed
Draws a dashed line wavy
Draws a wavy line -moz-none
Non-standardDo not draw a line Do not use : use text-decoration-line
: none
instead inherit
-
É uma palavra-chave indicando a reutilizar o valor calculado sobre o elemento pai.
Syntax Formal
Exemplo
.example {
-moz-text-decoration-line: underline;
-moz-text-decoration-style: wavy;
-moz-text-decoration-color: red;
-webkit-text-decoration-line: underline;
-webkit-text-decoration-style: wavy;
-webkit-text-decoration-color: red;
}
.example {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
<p class="example">This is how it looks.</p>
Especificações
Specification |
---|
CSS Text Decoration Module Level 3 # text-decoration-style-property |
Browser compatíveis
BCD tables only load in the browser