Los sitios web atractivos para los usuarios a menudo requieren que se agreguen múltiples metodologías de estilo de vez en cuando. En tales situaciones, el estilo de la decoración del texto se puede realizar de múltiples maneras en función de diferentes valores según los requisitos para que el sitio se destaque.
Este blog cubrirá las siguientes áreas de contenido:
¿Cómo configurar el estilo de decoración del texto en Tailwind CSS?
El estilo del texto se puede configurar y decorar con la ayuda de ' estilo-de-decoración-de-texto 'Propiedad asignada con diferentes valores de estilo.
Propiedades de estilo de decoración de texto
| Clase | Propiedades |
| decoracion-solida | estilo-decoración-texto: sólido; |
| decoracion-doble | estilo-decoración-texto: doble; |
| decoracion ondulada | estilo-decoración-texto: ondulado; |
| decoración-discontinua | estilo-decoración-texto: discontinuo; |
| decoración-punteada | estilo-decoración-texto: punteado; |
Ejemplo: configurar el estilo de decoración del texto en Tailwind CSS
Este ejemplo utiliza el “discutido anteriormente” estilo-de-decoración-de-texto Propiedad ”con todos los valores para diseñar el texto del párrafo:
TIPO DE DOCUMENTO html >< HTML >
< cabeza >
< meta juego de caracteres = 'utf-8' >
< meta nombre = 'ventana gráfica' contenido = 'ancho = ancho del dispositivo, escala inicial = 1' >
< guion src = 'https://cdn.tailwindcss.com' > guion >
cabeza >
< cuerpo >
< div >
< pag clase = 'decoración subrayada-sólida ...' > Este es el sitio web de Linuxhint pag >
< pag clase = 'decoración subrayada-doble ...' > Este es el sitio web de Linuxhint pag >
< pag clase = 'subrayado decoración-ondulado ...' > Este es el sitio web de Linuxhint pag >
< pag clase = 'subrayado decoración discontinua ...' > Este es el sitio web de Linuxhint pag >
< pag clase = 'subrayado decoración-punto ...' > Este es el sitio web de Linuxhint pag >
div >
cuerpo >
HTML >
Con base en este código, aplique los siguientes pasos:
-
- Incluya el ' dado ' CDN 'camino dentro del'
”Etiqueta para aplicar las funcionalidades de Tailwind. - Ahora, crea cuatro párrafos usando el botón ' 'Etiqueta que contiene el' decoracion-de-texto “Inmueble asignado con un valor diferente en cada caso, según lo comentado.
- Como resultado, esto subraya el texto con líneas sólidas, dobles, onduladas, discontinuas y de puntos.
- Incluya el ' dado ' CDN 'camino dentro del'
Producción
A partir de este resultado se comprueba que el texto ha sido decorado en consecuencia.
Conclusión
El estilo del texto se puede configurar y decorar con la ayuda de ' estilo-de-decoración-de-texto 'Propiedad asignada con diferentes valores de estilo. Estos valores incluyen sólido, doble, ondulado, discontinuo y punteado. Este blog trataba sobre cómo configurar el estilo de decoración del texto usando Tailwind CSS.