La propiedad de estilo de decoración de texto en CSS se usa para establecer la decoración de texto de un elemento. La propiedad text-decoration es la combinación de las propiedades text-decoration-line, text-decoration-style y text-decoration-color.
Sintaxis:
text-decoration-style: solid|double|dotted|dashed|wavy|initial| inherit;
Valores de propiedad:
- sólido: Dibuja una sola línea sólida. Es el valor predeterminado de la propiedad text-decoration-style.
Estilo:
text-decoration-style: solid;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-decoration-style property
</title>
<!-- CSS style -->
<style>
p {
text-decoration-style: solid;
}
.GFG1 {
text-decoration-line: underline;
}
.GFG2 {
text-decoration-line: line-through;
}
.GFG3 {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>text-decoration-style: solid</b>
<p class = "GFG1">
This line has a solid underline.
</p>
<p class = "GFG2">
This line has a solid line-through.
</p>
<p class = "GFG3">
This line has a solid overline.
</p>
</body>
</html>
Producción:
- double: Dibuja líneas sólidas dobles.
Estilo:
text-decoration-style: double;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-decoration-style property
</title>
<!-- CSS style -->
<style>
p {
text-decoration-style: double;
}
.GFG1 {
text-decoration-line: underline;
}
.GFG2 {
text-decoration-line: line-through;
}
.GFG3 {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>text-decoration-style: double</b>
<p class = "GFG1">
This line has a double underline.
</p>
<p class = "GFG2">
This line has a double line-through.
</p>
<p class = "GFG3">
This line has a double overline.
</p>
</body>
</html>
Producción:
- dotted: Dibuja una línea punteada.
Estilo:
text-decoration-style: dotted;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-decoration-style property
</title>
<!-- CSS style -->
<style>
p {
text-decoration-style: dotted;
}
.GFG1 {
text-decoration-line: underline;
}
.GFG2 {
text-decoration-line: line-through;
}
.GFG3 {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>text-decoration-style: dotted</b>
<p class = "GFG1">
This line has a dotted underline.
</p>
<p class = "GFG2">
This line has a dotted line-through.
</p>
<p class = "GFG3">
This line has a dotted overline.
</p>
</body>
</html>
Producción:
- discontinua: Dibuja una línea discontinua.
Estilo:
text-decoration-style: dashed;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-decoration-style property
</title>
<!-- CSS style -->
<style>
p {
text-decoration-style: dashed;
}
.GFG1 {
text-decoration-line: underline;
}
.GFG2 {
text-decoration-line: line-through;
}
.GFG3 {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>text-decoration-style: dashed</b>
<p class = "GFG1">
This line has a dashed underline.
</p>
<p class = "GFG2">
This line has a dashed line-through.
</p>
<p class = "GFG3">
This line has a dashed overline.
</p>
</body>
</html>
Producción:
- ondulado: Dibuja una línea ondulada.
Estilo:
text-decoration-style: wavy;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-decoration-style property
</title>
<!-- CSS style -->
<style>
p {
text-decoration-style: wavy;
}
.GFG1 {
text-decoration-line: underline;
}
.GFG2 {
text-decoration-line: line-through;
}
.GFG3 {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>text-decoration-style: wavy</b>
<p class = "GFG1">
This line has a wavy underline.
</p>
<p class = "GFG2">
This line has a wavy line-through.
</p>
<p class = "GFG3">
This line has a wavy overline.
</p>
</body>
</html>
Producción:
- initial: establece la propiedad text-decoration-style en su valor predeterminado.
Estilo:
text-decoration-style: initial;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-decoration-style property
</title>
<!-- CSS style -->
<style>
p {
text-decoration-style: initial;
}
.GFG1 {
text-decoration-line: underline;
}
.GFG2 {
text-decoration-line: line-through;
}
.GFG3 {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>text-decoration-style: initial</b>
<p class = "GFG1">
This line has a default underline.
</p>
<p class = "GFG2">
This line has a default line-through.
</p>
<p class = "GFG3">
This line has a default overline.
</p>
</body>
</html>
Producción:
- heredar: esta propiedad se hereda de su elemento padre.
Estilo:
text-decoration-style: inherit;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-decoration-style property
</title>
<!-- CSS style -->
<style>
p {
text-decoration-style: inherit;
}
.main {
text-decoration-style: wavy;
}
.GFG1 {
text-decoration-line: underline;
}
.GFG2 {
text-decoration-line: line-through;
}
.GFG3 {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>text-decoration-style: inherit</b>
<div class = "main">
<p class = "GFG1">
This line has a inherited underline style.
</p>
<p class = "GFG2">
This line has a inherited line-through style.
</p>
<p class = "GFG3">
This line has a inherited overline style.
</p>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad text-decoration-style se enumeran a continuación:
- Google Chrome 57.0
- Borde 79.0
- Firefox 36.0
- Ópera 44.0
- Safari 12.1
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA