De forma predeterminada, 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 estará 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 la apariencia de esos subrayados o eliminarlos por completo.
Eliminar el 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 estos subrayados por completo.
Para eliminar los subrayados de los enlaces de texto, utilizará la decoración de texto de la propiedad CSS. Aquí está el CSS que escribirías para hacer esto:
a {texto-decoración: ninguno; }
Con esa única línea de CSS, eliminaría el subrayado de todos los enlaces de texto. Aunque este es un estilo muy general (usa un selector de elementos), aún tiene más especificidad que los estilos de los navegadores predeterminados. Debido a que esos estilos predeterminados son lo que crea los subrayados para empezar, eso es lo que necesita sobrescribir.
Una precaución en la eliminación de subrayados
Visualmente, la eliminación de los subrayados puede ser exactamente lo que desea lograr, pero también debe tener cuidado al hacerlo. Tanto si le gusta el aspecto de los enlaces subrayados como si no, no puede argumentar que hacen evidente qué texto está vinculado y cuál no. Si quita los subrayados o cambia el color de enlace azul predeterminado, debe asegurarse de reemplazarlos con 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 los no-enlaces
Otra advertencia sobre 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 hacerlo en negrita o en cursiva), envía el mensaje incorrecto y confundirá a los usuarios del sitio.
Cambiar el subrayado a puntos o guiones
Si desea mantener sus subrayados de 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, aún quitará el subrayado, pero lo reemplazará con la propiedad de estilo de borde inferior:
a {texto-decoración: ninguno; borde inferior: 1 px punteado; }
Dado que ha eliminado el subrayado estándar, el punteado es el único que aparece.
Puedes hacer lo mismo para obtener guiones. Solo cambia el estilo de borde inferior a discontinuo:
a {texto-decoración: ninguno; borde inferior: 1px punteado; }
Cambiar el color de 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 se ajuste a su combinación de colores.
a {texto-decoración: ninguno; borde inferior: 1px rojo sólido; }
Doble subrayado
El truco para usar subrayados dobles es que tienes que cambiar el ancho del borde. Si creas un borde ancho de 1px, terminarás con un doble subrayado que parece un único subrayado.
a {texto-decoración: ninguno; borde inferior: 3px doble; }
También puede usar el subrayado existente para hacer un subrayado doble con otras características, como una de las líneas que se puntean:
a {borde inferior: 1px doble; }
No olvides los estados de enlace
Puede agregar el estilo de borde inferior a sus enlaces en diferentes estados, tales como: hover,: active o: visit. Esto puede crear una agradable experiencia de estilo "rollover" para los visitantes cuando usas esa pseudo clase de "desplazamiento". Para hacer que aparezca un segundo subrayado de puntos cuando se desplaza sobre el enlace:
a {texto-decoración: ninguno; } a: hover {border-bottom: 1px punteado; }
Artículo original de Jennifer Krynin. Editado por Jeremy Girard
