La propiedad text-decoration se utiliza para “decorar” el contenido del texto. Es esencialmente decorar el texto con diferentes tipos de líneas. Es una propiedad abreviada para text-decoration-line (obligatorio), text-decoration-color y text-decoration-style . Las decoraciones de texto se dibujan en elementos de texto secundarios, lo que significa que si el elemento principal especifica una decoración de texto, su elemento secundario no puede eliminar la decoración especificada en el elemento principal.
Sintaxis:
text-decoration: text-decoration-line text-decoration-style text-decoration-color|initial|inherit;
Valores de propiedad: todas las propiedades se describen bien con el siguiente ejemplo.
línea de decoración de texto : se utiliza para establecer varios tipos de decoración de texto (por ejemplo, subrayado, sobrerayado, etc.).
Sintaxis:
text-decoration: text-decoration-line;
Ejemplo: Este ejemplo ilustra el uso de la propiedad text-decoration-line cuyos valores se pueden establecer como subrayado, línea a través, línea superior.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>text-decoration</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
ul li {
margin-top: 15px;
}
#example1 {
text-decoration: underline;
}
#example2 {
text-decoration: line-through;
}
#example3 {
text-decoration: overline;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2> text-decoration: text-decoration-line;</h2>
<ul>
<li id="example1">Welcome geeks!</li>
<li id="example2">Welcome geeks!</li>
<li id="example3">Welcome geeks!</li>
</ul>
</body>
</html>
Producción:
estilo de decoración de texto : se utiliza para establecer la decoración de texto de un elemento (por ejemplo, punteado, ondulado, etc.).
Sintaxis:
text-decoration: text-decoration-line text-decoration-style;
Ejemplo: Este ejemplo ilustra el uso de la propiedad text-decoration-style .
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>text-decoration</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
ul li {
margin-top: 15px;
}
#example1 {
text-decoration: underline dotted;
}
#example2 {
text-decoration: underline wavy;
}
#example3 {
text-decoration: underline dashed;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
text-decoration:
text-decoration-line text-decoration-style;
</h2>
<ul>
<li id="example1">Welcome geeks!</li>
<li id="example2">Welcome geeks!</li>
<li id="example3">Welcome geeks!</li>
</ul>
</body>
</html>
Producción:
text-decoration-color : se utiliza para especificar el color de las decoraciones (overlines, underlines y line-through) sobre el texto.
Sintaxis:
text-decoration: text-decoration-line text-decoration-color;
Ejemplo: Este ejemplo ilustra el uso de la propiedad text-decoration-color .
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>text-decoration</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
ul li {
margin-top: 15px;
}
#example1 {
text-decoration: underline wavy green;
}
#example2 {
text-decoration: line-through red;
}
#example3 {
text-decoration: overline blue;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
text-decoration:
text-decoration-line text-decoration-color;
</h2>
<ul>
<li id="example1">Welcome geeks!</li>
<li id="example2">Welcome geeks!</li>
<li id="example3">Welcome geeks!</li>
</ul>
</body>
</html>
Producción:
initial : se utiliza para establecer la propiedad CSS de un elemento en su valor predeterminado.
Sintaxis:
text-decoration: initial;
Ejemplo: este ejemplo ilustra el uso de la propiedad text-decoration cuyo valor se establece en initial.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>text-decoration</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
#example1 {
text-decoration: initial;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2> text-decoration: initial;</h2> <a href="#">
This is a link without text-decoration.
</a>
<br>
<br> <a id="example1" href="#">
This is a link with text-decoration set to initial.
</a>
</body>
</html>
Producción:
heredar : se utiliza para heredar una propiedad a un elemento del valor de propiedad de su elemento principal.
Sintaxis:
text-decoration: inherit;
Ejemplo: Este ejemplo ilustra el uso de la propiedad de decoración de texto cuyo valor se establece en heredar.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>text-decoration</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
#example1 {
text-decoration: underline wavy green;
}
#example1child {
text-decoration: inherit;
font-weight: bold;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2> text-decoration: inherit;</h2>
<p id="example1"> I am parent and <span id="example1child">
this my is child.</span> </p>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con Text-Decoration Property se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 3.0
- Microsoft Edge 12.0
- Firefox 1.0
- Ópera 3.5
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por Archana choudhary y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA