Subrayar un documento o un texto siempre se considera fácil. Pero si consideramos el caso de los sitios web, ¿es todavía fácil? La mayoría de nosotros diría que sí, pero hacer una línea horizontal que incluya algunos diseños personalizados hace que esta simple tarea sea tediosa. Comencemos el viaje de la decoración de texto usando CSS de la siguiente manera:
- ¿Qué es la decoración de texto?
- Tipos de decoraciones de texto en CSS
- Decoración de texto usando CSS: código
- Saltar decoración de texto
¿Qué es la decoración de texto?
Establece la apariencia de las líneas decorativas en el texto. Es una propiedad abreviada para:
- linea-decoracion-de-texto
- color-decoracion-texto
- estilo de decoración de texto
Se especifica como uno o más valores separados por espacios que representan el te largopropiedades de decoración xt.
Sintaxis:
decoración de texto: || ||
Dónde,
línea de decoración de texto: Se utiliza para establecer el tipo de decoración utilizada, comosubrayado, sobrelineado y line-through.
texto-decoración-color:Se utiliza para fijar el color de la decoración.
estilo de decoración de texto: Se utiliza para establecer el estilo de la línea, comosólido, ondulado, punteado, discontinuo, doble
Tipos de decoraciones de texto en CSS
- Overline:
#decoration {text-decoration: overline} 
- Line-Through:
#decoration {text-decoration: line-through}- Subrayar:
#decoration {text-decoration: underline}- Combinación:
#decoration {text-decoration: underline line-through overline}Salida:
Decoración de texto usando CSS: código
Código:
Código CSS:
#overline {text-decoration: wavy overline lime} #underover {text-decoration: discontinuo subrayado overline} #dotted {text-decoration: underline overline punteado rojo} #wavy {text-decoration: line-through wavy}Salida:
Saltar decoración de texto
También se puede utilizar una propiedad conocida como text-decoration-skip cuando un texto se sobrelinea, pasa de línea y subraya. Ayuda a decorar el texto. Simplemente especifica cómo se dibujan las líneas superiores y inferiores cuando pasan sobre ascendentes y descendentes.
#decoration {text-decoration-skip: ink}Los valores que se pueden usar con saltos de decoración de texto son:
objetos : (predeterminado) la línea omite objetos en línea, como imágenes o elementos de bloque en línea.
ninguna : la línea cruza todo.
espacios : la línea de decoración omite espacios, caracteres separadores de palabras y cualquier espacio configurado con espaciado entre letras o espacios entre palabras.
que es marioneta en devops
tinta : la línea de decoración omite glifos, descendentes o ascendentes.
bordes : La línea de decoración comienza un poco después del borde inicial del contenido y termina un poco antes del borde final del contenido.
decoración de caja : la línea de decoración salta el margen, el borde y el relleno heredados.
Dado que esta propiedad no es compatible con ningún navegador, todavía no hay demostración, pero aquí hay un ejemplo en la imagen a continuación de cómo se vería cada uno de los valores una vez que se implemente text-decoration-skip.
Con esto, llegamos al final de este blog de Decoración de texto usando CSS. Si tiene alguna consulta sobre este tema, deje un comentario a continuación y nos comunicaremos con usted.
Mira nuestro que viene con capacitación en vivo dirigida por un instructor y experiencia en proyectos de la vida real. Esta capacitación lo capacita en habilidades para trabajar con tecnologías web de back-end y front-end. Incluye capacitación en desarrollo web, jQuery, Angular, NodeJS, ExpressJS y MongoDB.
Tienes una pregunta para nosotros? Menciónelo en la sección de comentarios del blog 'Decoración de texto usando CSS' y nos comunicaremos con usted.