En este artículo, discutiremos la propiedad text-decoration-thickness en CSS .
Esta propiedad establece el ancho del trazo de la línea decorada debajo, encima o a lo largo del texto. Los diferentes valores que puede tomar esta opción son los siguientes:
- auto : El grosor de la línea de decoración de texto depende del navegador.
- font-file : algunos archivos de fuente incluyen los valores de grosor preferido, luego se aplica el valor del archivo de fuente, de lo contrario se aplica automático .
- valores personalizados : si el desarrollador desea un grosor personalizado de la decoración de texto , el valor se puede proporcionar en los siguientes dos formatos:
- longitud : anulando el grosor aplicado automáticamente, el grosor se puede aplicar usando valores en unidades de px, rem, em, pt , etc.
- porcentaje : anulando el grosor aplicado automáticamente, el grosor se puede aplicar utilizando valores porcentuales de 1em de la fuente actual. Si toda la página tiene diferentes tamaños de fuente, el grosor sería el mismo que se escala con el tamaño de fuente e independiente del tamaño real.
- Valores globales : estos valores se establecen globalmente y se utilizan con frecuencia.
- initial : es la forma de decir que se restablece el valor predeterminado, que puede ser automático o de archivo de fuente, lo que sea más adecuado.
- heredar : este valor obtiene el valor del grosor de línea de su siguiente padre.
- unset : este valor funciona como dos casos, si text-decoration-thickness tiene algún valor heredado, se usará, de lo contrario se usará el valor inicial.
Sintaxis :
text-decoration-thickness: auto | font-file | length | percentage | global values;
En los siguientes ejemplos, tenemos 4 párrafos diferentes con diferentes clases de auto, fuente-archivo, longitud, porcentaje . Para cada una de las clases, hemos proporcionado los diferentes valores y el estilo se aplica en consecuencia.
Ejemplo 1 : este ejemplo demuestra el uso de text-decoration-thickness con el valor de auto .
HTML
<!DOCTYPE html>
<html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.auto {
text-decoration-thickness: auto;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:auto
</p>
<p class="auto">
A computer science portal for geeks.
</p>
</body>
</html>
Producción:
Ejemplo 2 : este ejemplo demuestra el uso de la propiedad text-decoration-thickness con el valor de auto . En este caso, la salida es la misma ya que el auto establece los valores del archivo de fuente y se convierte en el predeterminado .
HTML
<!DOCTYPE html>
<html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.font-file {
text-decoration-thickness: font-file;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:font-file
</p>
<p class="font-file">
A computer science portal for geeks.
</p>
</body>
</html>
Producción:
Ejemplo 3: Este ejemplo demuestra el conjunto de propiedades text-decoration-thickness con una longitud definida de 3px.
HTML
<!DOCTYPE html>
<html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.length {
text-decoration-thickness: 3px;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:length
</p>
<p class="length">
A computer science portal for geeks.
</p>
</body>
</html>
Producción:
Ejemplo 4 : Este ejemplo demuestra el conjunto de propiedades text-decoration-thickness con un porcentaje definido de 12% .
HTML
<!DOCTYPE html>
<html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.percentage {
text-decoration-thickness: 12%;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:percentage
</p>
<p class="percentage">
A computer science portal for geeks.
</p>
</body>
</html>
Producción:
Ejemplo 5: Este ejemplo demuestra la propiedad text-decoration-thickness establecida con el valor inicial . Se utiliza para establecer la propiedad CSS de un elemento en su valor predeterminado. Es lo mismo que ninguna propiedad.
HTML
<!DOCTYPE html>
<html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.initial {
text-decoration-thickness: initial;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:initial
</p>
<p class="initial">
A computer science portal for geeks.
</p>
</body>
</html>
Producción:
Ejemplo 6 : este ejemplo demuestra la propiedad text-decoration-thickness establecida con el valor heredado .
HTML
<!DOCTYPE html>
<html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.inherit {
text-decoration-thickness: inherit;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:inherit
</p>
<p class="inherit">
A computer science portal for geeks.
</p>
</body>
</html>
Producción:
Ejemplo 7 : Este ejemplo demuestra la propiedad text-decoration-thickness establecida con el valor no establecido .
HTML
<!DOCTYPE html>
<html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.unset {
text-decoration-thickness: unset;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:unset
</p>
<p class="unset">
A computer science portal for geeks.
</p>
</body>
</html>
Producción:
Navegadores compatibles : los navegadores compatibles con la propiedad text-decoration-thickness se enumeran a continuación.
- Google cromo 89
- borde de microsoft 89
- MozillaFirefox 70
- Ópera 75
- Safari 12.1
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA