CSS y HTML se combinan para diseñar un sitio web creando el contenido HTML y agregando estilo. CSS permite varios estilos a contenidos HTML. Uno de ellos es aplicar el efecto decorativo. Este efecto es principalmente para el elemento de texto. También se utiliza un texto HTML simple en encabezados, párrafos, listas y enlaces. Los efectos que aplican las propiedades CSS Decorate Text son las propiedades negritas, cursivas y subrayadas. En este artículo, hablaremos sobre cómo podemos eliminar la propiedad subrayada del texto que se usa en los enlaces. El contenido del enlace contiene el efecto subrayado de forma predeterminada.
Enlace HTML:
Un enlace es el contenido HTML que se usa cuando se necesita adjuntar dos o más páginas web. Si queremos dar la dirección de otra página web o un sitio web en nuestra página predeterminada, usamos 'enlace' para crear un enlace entre páginas. Para este propósito se usa la etiqueta de anclaje HTML.
La propiedad subrayada es hacer que el texto del enlace resalte o prominente. Esta característica subrayada está incorporada cuando llegamos a los enlaces.
Ejemplo 1: Uso de la propiedad de decoración de texto:
Principalmente nos encontramos con los sitios web donde se subrayan los enlaces que están integrados en las páginas web. Por lo tanto, hemos utilizado un ejemplo simple en el que utilizaremos un enlace original con un efecto subrayado y el mismo enlace sin la propiedad subrayada de CSS. Esto se hace a través de la propiedad de decoración de texto.
Propiedad de decoración de texto:
Se aplica una propiedad CSS al contenido HTML para decorarlos. Estos efectos de decoración incluyen color de texto, efecto subrayado, negrita, cursiva, alineación y muchas otras propiedades.
La sintaxis básica de esta propiedad es:
1 | Decoración de texto: valor; // Valor de tipo de decoración |
Pero en el caso en que queremos eliminar todos los efectos, 'ninguno' se usa en el lugar de valor.
Al llegar hacia el código, hemos utilizado un estilo en línea para alinear todo el contenido HTML que mencionaremos en el cuerpo, al centro de la página web. El primer contenido HTML es el encabezado
1 |
Se usa otro encabezado que mostrará que el enlace que se menciona después de este encabezado es el original con un efecto subrayado.
Un enlace siempre se crea a través de una etiqueta de anclaje de HTML. La función 'href' es para referencia. Es la fuente o la dirección de la página web la que se abrirá cuando presionemos el enlace. Ya que no estamos agregando la dirección, así que deje que la función esté vacía por ahora.
1 | Haz clic en mí, enlace1 |
Después de este enlace, usaremos el
Etiqueta de ruptura para crear una línea en blanco. Luego, un encabezado que mostrará que el próximo enlace no estará subrayado se declara. Se usa una etiqueta de anclaje nuevamente. Pero esta vez hemos utilizado la ID de CSS para que se apliquen los efectos de esta identificación al enlace. Mientras que, todas las características de enlace restantes serán las mismas.
1 | Haz clic en mí, link2 |
Ahora, utilizaremos la descripción del estilo interno en la sección principal. Después de agregar la etiqueta de título, utilizaremos la instrucción de estilo que tiene la descripción de la identificación que creamos.
Los ID y las clases de CSS interno y externo contienen los efectos que especifican solo aquellos elementos HTML en los que hemos utilizado los nombres de las IDS y las clases. Por ejemplo, la única clase que tiene la propiedad de no subrayar el texto solo se aplicará a la etiqueta de anclaje que contiene el nombre de la identificación, declarada en la cabeza.
1 2 3 4 5 | #uno Decoración de texto: ninguna; |
La identificación contendrá el efecto de decoración de texto que tiene el valor 'ninguno'. Este valor eliminará todos los efectos del contenido HTML: factor subrayado, negrita, cursiva o cualquier color que se le aplique a él.
Ahora, cierre todas las etiquetas y guarde el archivo con la extensión HTML para ejecutar el archivo en el navegador.
En la ejecución del archivo, verá que se muestran dos encabezados con dos enlaces en la página web. Se subraya un enlace que se crea en factores predeterminados sin aplicar el efecto de ID de CSS. Pero el segundo es un enlace sin subrayador porque hemos eliminado todos los efectos a través de la propiedad de decoración de texto.
Ejemplo 2: Propiedad de desplazamiento:
En este ejemplo, se utiliza una propiedad flotante para eliminar el efecto del texto subrayado. Hover es el enfoque para navegar por el mouse hacia un enlace. Nuevamente, la propiedad de decoración de texto se agrega al código, pero esta vez con el uso del efecto flotante.
En la sección del cuerpo del código, el cuerpo está nuevamente alineado con el centro aplicando el CSS en línea. Se usa el encabezado y luego se aplica una etiqueta de anclaje.
1 | < a href = "#"> Hola soy un enlace |
Ahora, utilizaremos la descripción interna de CSS del enlace. Esta vez hemos aplicado efectos directamente al enlace en lugar de usar la ID de CSS. Mediante el uso del ancla 'A', se aplica un efecto de enlace y el efecto flotar. Para el 'a' como un enlace, la decoración del texto se aplica con el valor subrayado.
1 2 3 4 5 | un enlace Decoración de texto: subrayado; |
Mientras que, para la propiedad flotante, utilizaremos el valor de la decoración del texto como 'ninguno'. Al hacer esto, cada vez que se navegue el mouse hacia el enlace, se eliminará la propiedad subrayada.
1 2 3 4 5 | A: Hover Decoración de texto: ninguna; |
Al aplicar ambos efectos, la página de carga tendrá el enlace subrayado. Pero al flotar el efecto subrayador se eliminará.
Video Playerhttps: // Linuxhint.com/wp-content/uploads/2022/07/css-no-subline-open-me.MP400: 0000: 0000: 08 Utilice las teclas de flecha hacia arriba/hacia abajo para aumentar o disminuir el volumen.La salida del concepto de eliminar el efecto subrayado se muestra en el video. Hemos agregado una pequeña sección, en la que el enlace se crea con efectos subrayados. Cuando el mouse se navega hacia el enlace, o cuando nos desplazamos en el enlace, se elimina el efecto subrayador del enlace. Nuevamente, el enlace aparece cuando el mouse ha navegado.
Además, en lugar de los enlaces que tienen un texto subrayado predeterminado, también podemos subrayar cualquier texto a través de la etiqueta HTML subrayada .
Conclusión:
El artículo "CSS No subraye" es una guía completa para explicar el enfoque utilizado para eliminar el efecto subrayado del texto que ya tiene la propiedad subrayada, es decir, el enlace HTML. Hemos comenzado con una breve introducción a los enlaces HTML. Se utilizan dos enfoques CSS para explicar el concepto de eliminación de efectos subrayados. El primero es el uso directo de la propiedad de decoración de texto. Mientras que la segunda metodología incluye el uso de una propiedad flotante que está indirectamente vinculada con la propiedad de decoración para mostrar o mostrar el efecto subrayado en el enlace. Ambos conceptos se explican a través de los ejemplos para exhibir el CSS utilizado para las propiedades subrayadas.