De forma predeterminada, el contenido de texto vinculado a HTML mediante el elemento o "ancla" tiene un estilo subrayado. A menudo, los diseñadores web optan por eliminar este estilo predeterminado eliminando el subrayado.
A muchos diseñadores no les importa el aspecto del texto subrayado, especialmente en bloques densos de contenido con muchos enlaces. Todas esas palabras subrayadas pueden realmente romper el flujo de lectura de un documento. Muchos han argumentado que esos subrayados en realidad hacen que las palabras sean más difíciles de distinguir y leer rápidamente debido a la forma en que el subrayado cambia los formularios de letras naturales.
Sin embargo, hay beneficios legítimos de mantener estos subrayados en los enlaces de texto. Por ejemplo, cuando navega a través de grandes bloques de texto, los enlaces subrayados junto con el contraste de color adecuado facilitan a los lectores escanear inmediatamente una página y ver dónde están los enlaces.
Si decide eliminar los enlaces del texto (un proceso simple que cubriremos en breve), asegúrese de encontrar formas de darle estilo al texto para diferenciar aún lo que es un enlace de lo que es texto sin formato. Esto se hace con mayor frecuencia con el contraste de color mencionado anteriormente, pero el color solo puede plantear un problema para los visitantes con discapacidades visuales como la ceguera al color. Dependiendo de su forma particular de ceguera al color, el contraste puede perderse totalmente en ellos, evitando que vean la diferencia entre el texto vinculado y el no vinculado. Por esta razón, el texto subrayado aún se considera la mejor manera de mostrar enlaces.
Entonces, ¿cómo desactivar un subrayado si aún desea hacerlo? Ya que esta es una característica visual que nos preocupa, veremos la parte de nuestro sitio web que maneja todo lo visual: CSS.
Use hojas de estilo en cascada para desactivar los subrayados en los enlaces
En la mayoría de los casos, no desea desactivar un subrayado en un solo enlace de texto. En cambio, es probable que su estilo de diseño requiera que elimine los subrayados de todos los enlaces. Haría esto agregando estilos a su hoja de estilos externa.
una { texto-decoración: ninguno;}
¡Eso es! Esa línea simple de CSS desactivaría el subrayado (que en realidad usa la propiedad CSS para "decoración de texto") en todos los enlaces. También podría ser más específico con este estilo. Por ejemplo, si solo desea desactivar el subrayado o los enlaces dentro del elemento "nav", podría escribir: nav a { texto-decoración: ninguno;}
Ahora, los enlaces de texto en la página obtendrían el subrayado predeterminado, pero aquellos en la navegación lo eliminarán. Una cosa que muchos diseñadores web deciden hacer es volver a "activar" el enlace cuando alguien se sitúa sobre el texto. Esto se haría usando la pseudo-clase CSS: hover, así: una { texto-decoración: ninguno;}a: flotar { texto-decoración: subrayado;} Como alternativa a realizar cambios en una hoja de estilo externa, también puede agregar los estilos directamente al elemento en HTML. El problema con este método es que coloca información de estilo dentro de su estructura HTML, lo cual no es una buena práctica. El estilo (CSS) y la estructura (HTML) deben mantenerse separados. Si deseara que se eliminara el subrayado de todos los enlaces de texto de un sitio, agregar esta información de estilo a cada enlace de forma individual significaría que se agregará una buena cantidad de marcas adicionales al código de su sitio. El aumento de esta página puede ralentizar el tiempo de carga de un sitio y hacer que la administración general de la página sea mucho más difícil. Por estas razones, es preferible recurrir siempre a una hoja de estilo externa para todas las necesidades de estilo de página. Tan fácil como es eliminar el subrayado de los enlaces de texto de una página web, también debe tener en cuenta las consecuencias de hacerlo. Si bien puede limpiar el aspecto de una página, puede hacerlo a expensas de la usabilidad general. Tenga esto en cuenta la próxima vez que considere cambiar las propiedades de "decoración de texto" de una página. Usando CSS en línea
Para concluir
