Por defecto, los navegadores web tienen ciertos estilos CSS que aplican a elementos HTML específicos. Si no sobrescribe estos valores predeterminados con las hojas de estilo propias de su sitio, se aplicarán los valores predeterminados. Para los hipervínculos, el estilo de visualización por defecto es que cualquier texto enlazado será de color azul y subrayado, de modo que los visitantes del sitio puedan ver fácilmente qué texto está enlazado. Muchos diseñadores web no se preocupan por estos estilos por defecto, especialmente los subrayados. Afortunadamente, el CSS hace que sea fácil cambiar el aspecto de los subrayados o eliminarlos por completo.
Índice de contenidos
Eliminación del subrayado en los enlaces de texto
El texto subrayado puede ser más difícil de leer que el texto no subrayado. Además, muchos diseñadores simplemente no se preocupan por el aspecto de los enlaces de texto subrayados. En estos casos, es probable que desee eliminar por completo estos subrayados.
Para eliminar los subrayados de los enlaces de texto, se utilizará la propiedad CSS text-decoration. Aquí está el CSS que escribirías para hacer esto:
a { decoración de texto: ninguna; }
Con esa línea de CSS, eliminarías el subrayado de todos los enlaces de texto. Aunque se trata de un estilo muy general (utiliza un selector de elementos), todavía tiene más especificidad que los estilos de los navegadores por defecto. Debido a que esos estilos por defecto son los que crean los subrayados para empezar, eso es lo que necesita para sobrescribir.
Precaución al quitar subrayados
Visualmente, la eliminación de subrayados puede ser exactamente lo que usted quiere lograr, pero también debe tener cuidado cuando haga esto. Tanto si le gusta el aspecto de los enlaces subrayados como si no, no puede argumentar que hacen obvio qué texto está enlazado y cuál no. Si quita los subrayados o cambia el color predeterminado del enlace azul, debe asegurarse de reemplazarlos por estilos que aún permitan que el texto vinculado destaque. Esto hará que la experiencia sea más intuitiva para los visitantes de su sitio.
No subrayar no enlaces
Otra precaución sobre los enlaces y subrayados, no subrayar un texto que no es un enlace como forma de enfatizarlo. La gente espera que el texto subrayado sea un enlace, así que si usted subraya el contenido para añadir énfasis (en lugar de ponerlo en negrita o ponerlo en cursiva), envía un mensaje equivocado y confunde a los usuarios del sitio.
Cambiar el subrayado a Puntos o guiones
Si desea mantener los subrayados de su enlace de texto, pero cambiar el estilo de ese subrayado desde el aspecto predeterminado, que es una línea «soldi», también puede hacerlo. En lugar de esa línea sólida, puede usar puntos para subrayar sus enlaces. Para hacer esto, todavía quitará el subrayado, pero lo reemplazará con la propiedad border-bottom style:
a { decoración de texto: ninguna; fondo de borde: 1px punteado; }
Dado que ha eliminado el subrayado estándar, el punteado es el único que aparece.
Puedes hacer lo mismo para que te salgan los guiones. Cambie el estilo del borde inferior a punteado:
a { decoración de texto: ninguna; fondo del borde: 1px punteado; }.
Cambiar el color del subrayado
Otra forma de llamar la atención sobre sus enlaces es cambiar el color del subrayado. Sólo asegúrese de que el color encaje con su esquema de colores.
a { text-decoration: none; border-bottom:1px solid red; }
Subrayado doble
El truco para usar doble subrayado es que tienes que cambiar el ancho del borde. Si crea un borde de 1 píxel de ancho, terminará con un doble subrayado que parece un simple subrayado.
a { decoración de texto: ninguna; fondo de borde: 3px doble; }
También puede utilizar el subrayado existente para hacer un doble subrayado con otras características, como por ejemplo una de las líneas que se están punteando:
a { fondo del borde:1px doble; }
No olvide los estados de los enlaces
Puede añadir el estilo del borde inferior a sus enlaces en diferentes estados como :hover, :active, o :visited. Esto puede crear una agradable experiencia de estilo «rollover» para los visitantes cuando se usa esa pseudoclase de «flotar». Para hacer que aparezca un segundo subrayado punteado al pasar el ratón por encima del enlace:
a { decoración de texto: ninguna; }a:hover { fondo del borde:1px punteado; }
Original de Jennifer Krynin. Editado por Jeremy Girard
