Cómo cambiar los subrayados de enlaces en una página web

Eliminar subrayados de enlaces o crear enlaces punteados punteados o dobles subrayados Por defecto, los navegadores web tienen ciertos estilos CSS que se aplican a elementos HTML específicos.

Eliminar subrayados de enlaces o crear enlaces punteados punteados o dobles subrayados

Por defecto, los navegadores web tienen ciertos estilos CSS que se aplican a elementos HTML específicos. Si no sobrescribe estos valores predeterminados con las propias hojas de estilo de su sitio, se aplicarán los valores predeterminados. Para los hipervínculos, el estilo de visualización predeterminado es que cualquier texto vinculado será azul y subrayado. El navegador hace esto para que los visitantes de un sitio puedan ver fácilmente qué texto está vinculado. Muchos diseñadores web no se preocupan por estos estilos predeterminados, especialmente aquellos subrayados. Afortunadamente, CSS facilita cambiar el aspecto de esos subrayados o eliminarlos por completo.

Eliminar el subrayado en enlaces de texto

El texto subrayado puede ser más difícil de leer que el texto no subrayado. Además, a muchos diseñadores simplemente no les importa el aspecto de los enlaces de texto subrayados. En estos casos, es probable que desee eliminar estos subrayados por completo.

Para eliminar los subrayados de los enlaces de texto, utilizará la propiedad de decoración de texto CSS. Aquí está el CSS que escribiría para hacer esto:

una {decoración de texto: ninguna; }

Con esa línea de CSS, eliminaría el subrayado de todos los enlaces de texto. Aunque este es un estilo muy general (utiliza un selector de elementos), aún tiene más especificidad que los estilos de navegadores predeterminados. Debido a que esos estilos predeterminados son los que crean los subrayados para empezar, eso es lo que necesita sobrescribir.

Una precaución al eliminar subrayados

Visualmente, la eliminación de los subrayados puede ser exactamente lo que desea lograr, pero también debe tener cuidado al hacerlo. Ya sea que le guste la apariencia de los enlaces subrayados o no, no puede argumentar que hacen obvio qué texto está vinculado y cuál no. Si quita los subrayados o cambia ese color de enlace azul predeterminado, debe asegurarse de reemplazarlos con estilos que aún permitan que el texto vinculado se destaque. Esto hará que la experiencia sea más intuitiva para los visitantes de su sitio.

No subrayar los no enlaces

Otra advertencia sobre los enlaces y subrayados, no subraye el texto que no es un enlace como una forma de enfatizarlo. La gente espera que el texto subrayado sea un enlace, por lo que si subraya el contenido para agregar énfasis (en lugar de ponerlo en negrita o en cursiva), envía un mensaje incorrecto y confundirá a los usuarios del sitio.

Cambiar el subrayado a puntos o rayas

Si desea mantener el enlace de texto subrayado, pero cambia el estilo de ese subrayado del aspecto predeterminado, que es una línea «soldi», también puede hacerlo. En lugar de esa línea continua, puede usar puntos para subrayar sus enlaces. Para hacer esto, aún eliminará el subrayado, pero lo reemplazará con la propiedad de estilo de borde inferior:

  a {text-decoration: none; borde inferior: 1px punteado; }  

Como ha eliminado el subrayado estándar, el punteado es el único que aparece.

Puedes hacer lo mismo para obtener guiones. Simplemente cambie el estilo del borde inferior a discontinuo:

  a {text-decoration: none; borde inferior: 1px discontinuo; }  

Cambiar el color de subrayado

Otra forma de llamar la atención sobre sus enlaces es cambiar el color del subrayado. Solo asegúrese de que el color se ajuste a su combinación de colores.

  a {text-decoration: none; borde inferior: 1px rojo sólido; }  

Subrayados dobles

El truco para usar subrayados dobles es que debes cambiar el ancho del borde. Si crea un borde ancho de 1 px, terminará con un doble subrayado que parece un solo subrayado.

  a {text-decoration: none; borde inferior: 3px doble; }  

También puede usar el subrayado existente para hacer un doble subrayado con otras características, como una de las líneas punteadas:

  a {border-bottom: 1px double; }  

No olvides los estados de enlace

Puede agregar el estilo de borde inferior a sus enlaces en diferentes estados como: hover,: active o: visitado. Esto puede crear una agradable experiencia de estilo «rollover» para los visitantes cuando usas esa pseudo clase «hover». Para que aparezca un segundo subrayado punteado al pasar el mouse sobre el enlace:

  a {text-decoration: none; }
a: hover {border-bottom: 1px punteado; }  

Artículo original de Jennifer Krynin. Editado por Jeremy Girard

Rate article
labsfabs.com
Add a comment