CSS subrayar el color
Ejemplo 1
Cree el archivo HTML para comenzar este código. Vamos a comenzar creando un archivo nuevo y luego seleccionando HTML como el idioma en el código de Visual Studio. Finalmente, estamos agregando el "!"Para el archivo que acabamos de generar. Este archivo contiene todas las etiquetas fundamentales de HTML. Todo lo que tenemos que hacer ahora es escribir el cuerpo HTML y el enlace del archivo CSS en el "Cabeza."En el cuerpo, estamos colocando un encabezado y un párrafo en este código. También creamos algún texto en negrita en este código. Ahora, nos estamos moviendo para crear el archivo CSS en el que subrayamos el encabezado y el párrafo y luego cambiamos el color de este subrayado. Todo esto se realizará utilizando las propiedades de CSS.
Estamos alineando todos los elementos corporales del HTML aquí en el "centro" con la ayuda de la propiedad "Alineación de texto". Luego, utilizamos la propiedad de "decoración de texto" y colocamos la palabra clave "subrayar" para el valor de esta propiedad. Usamos esta propiedad aquí para generar el subrayado para el encabezado. También establecemos el color de este subrayado utilizando la propiedad "Texto-decoración-color".
Aquí, establecemos el color de este subrayado en "Negro."También generamos otro subrayado utilizando la misma propiedad de" decoración de texto ", y esta vez generamos este subrayado para el párrafo. Cambiamos el color de este subrayado a "verde" utilizando la propiedad de "color-decoración de texto". También tenemos algún texto en negrita, por lo que vamos a generar un subrayado para este texto en negrita con la ayuda de la propiedad "Decoración de texto" y también cambiará su color a "Rojo" mediante el uso de la propiedad "Texto-decoración de color".
La salida está aquí, y puede observar que el color del subrayado del encabezado aparece "negro", el texto del párrafo aparece en "verde", y el subrayado del texto en negrita está en "rojo."
Ejemplo # 2
Estamos utilizando el mismo código HTML del ejemplo 1 aquí. Usamos primero la propiedad "Alineación de texto" para todos los elementos del cuerpo, y el "tamaño de fuente" del elemento del cuerpo es "24px". "Subrayamos" todos los elementos por separado utilizando la "decoración del texto", y cambiamos el color del subrayado con la ayuda de "color-decoración de texto."Aquí, estamos utilizando el color" RGB "como el valor de esta propiedad de" color-decoración de texto ". Para "H1", establecemos "RGB (13, 128, 13)", que se usa para el tono "verde". Entonces, tenemos "P", en el que usamos "RGB (40. 40, 184) ", que representa el color" azul ". Para el último texto en negrita, "B", estamos usando "RGB (216, 69, 15)", que representa "Orange."
El resultado se muestra a continuación, y puede ver que el color del subrayado del encabezado es "verde", el texto del párrafo es "azul", y el texto en negrita es "naranja."
Ejemplo # 3
Nuevamente, estamos utilizando el código HTML del Ejemplo 1 y vinculando este archivo CSS dado al archivo HTML del Ejemplo 1. Todo el texto del cuerpo HTML se alinea con el "centro" y del "24px" "tamaño de fuente."Subrayamos todos los elementos encabezados, párrafo y el texto en negrita de la misma manera que hemos descrito en el ejemplo anterior. Aquí, estamos cambiando el color de estos subrayos utilizando el "color-decoración de texto" y asignando valores del color en el formulario "HSL". El "HSL (0, 100%, 50%)" que usamos aquí para el subrayado del encabezado muestra el color "rojo". Luego estamos utilizando "HSL (133, 86%, 47%)" para el subrayado del párrafo, que aparece como "verde claro", y para el BOLD, estamos usando "HSL (327, 85%, 33%)" que es para el color "magenta".
El resultado se da a continuación, con el color "rojo" para el encabezado subrayado, "verde claro" para el texto del párrafo y "magenta" para el texto en negrita subrayando.
Ejemplo # 4
En este ejemplo, vamos a cambiar un poco el código HTML anterior agregando un enlace aquí en este archivo. Ahora, tenemos un encabezado, un párrafo, un texto audaz dentro de este párrafo, y también un enlace. Ahora vamos a subrayar todo esto y luego aplicar diferentes colores subrayados para todos en CSS.
Creamos el subrayado del encabezado utilizando la propiedad de "decoración de texto" y cambiando su color a "naranja" con la ayuda de "color-decoración de texto."Después de esto, usamos la propiedad de" Decoración de texto "para generar el texto en negrita subrayado y" color-decoración de texto "para cambiar el color a" azul."Establecimos el" tamaño de fuente "del párrafo en" 22px ". Para mencionar el enlace, usamos "A" aquí con el "desplazamiento" y luego cambiamos el color del subrayado a "rojo", para que cambiará el color del subrayador del enlace cuando pasemos el mouse sobre este enlace y También cambia su "tamaño de fuente" en flotar a "20px".
En la primera salida, solo subrayamos el encabezado y el texto en negrita. El subrayador del encabezado aparece en color "naranja", y el subrayador del texto en negrita aparece aquí en "Azul."
En la segunda imagen, puede ver el color subrayado del enlace. Cuando pasamos el cursor en este enlace, el color del subrayado del enlace aparece en "rojo" tal como lo hemos establecido en nuestro código CSS, por lo que cambia su color en el flotador.
Ejemplo # 5
Aquí, tenemos uno encabezado y dos párrafos diferentes con los nombres "P1" y "P2". También tenemos algún texto en negrita y un "div", y también un elemento de "span". Vamos a generar el subrayado para todo esto y también cambiar el color de estos subrayados.
Usamos "Text-Align" y para el valor de esta propiedad, establecemos "Center" aquí para todos los elementos que están presentes dentro del cuerpo. También aumentamos el "tamaño de la fuente" y lo establecimos en "25px". Estamos utilizando la propiedad "Decoración de texto" para todos los elementos que hemos creado en el archivo HTML utilizando sus nombres. Luego, también usamos la propiedad de "color-decoración de texto" dentro de los nombres de todos estos elementos aquí. Usamos los nombres de color, el color RGB y también los colores HLL aquí. Para el encabezado y el primer párrafo "P1", estamos utilizando el color subrayado en "RGB", para el segundo párrafo "P2" y Bold "B", estamos utilizando el color "HSL" para el subrayado, y para el "" Div "y el elemento" SPAN ", estamos utilizando nombres de color en la propiedad" Texto-decoración-color ". De esta manera, generamos el subrayado y cambiamos el color del subrayado de todos los elementos.
En la captura de pantalla a continuación, el subrayado de todos los elementos se vuelve en diferentes colores porque configuramos estos colores en el archivo CSS anterior.
Conclusión
Hemos escrito este tutorial explicando cómo cambiar el color del subrayado en CSS. Hemos discutido la propiedad de CSS, que se utiliza para alterar el color del subrayador. Hemos explicado en detalle que la propiedad de "color-decoración de texto" se utiliza para cambiar el color del subrayador. Hemos elaborado diferentes ejemplos aquí en los que hemos utilizado esta propiedad y explicamos el código, así como la salida para su mejor comprensión. Después de aprender este tutorial con cuidado, utilizará esta propiedad en sus códigos.