Una mala práctica de un diseñador Web es quitar el subrayado en el texto corriente debido a que los estándares de usabilidad debieran reinar sobre los de apariencia de página.
Por lo general es usado en botones donde el texto se mezcla con imágenes y no es necesaria la línea.
La instrucción CSS text-decoration: none; quita el subrayado de los vínculos
Podremos siempre definirlo con CSS, en su archivo de CSS agreguen las siguientes líneas:
text-decoration: none;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
Esto significa cada terminación:
- Link es el aspecto normal del vínculo
- Hover es cuando el ratón está sobre el vínculo
- Visited es para definir el aspecto de los vínculos visitados
- Active es para definir los vínculos activos (No es necesario)
Existen otros tipos de text-decoration, por ejemplo Blink, line-through, overline, underline, ...
text-decoration: blink
text-decoration: line-through
text-decoration: overline
text-decoration: underline
Si queremos agregarlo a un vinculo individual.
Por último podemos agregarlo a un vínculo individual agregando el atributo style al vínculo más text-decoration: none; como se ve en el ejemplo:
<a href="http://cgnauta.blogspot.com/" style="text-decoration: none;">vínculo a quitar subrayado</a>
El resultado será:
vínculo a quitar subrayado
Usando Clases (CLASS)
Hay que hace notar el que a veces queremos tener distintos tipos de formatos de vínculos, por lo que podemos agregar más a:link, a:hover, etcétera. Con la diferencia que después de la "a" debe ir un punto y un nombre cualquiera como a.rojos, a.verdes, etcétera.
A esto se le llama "clases" en nuestro CSS, el formato sería:
a.nombreclase:link { text-decoration: none; )
y en el vínculo lo enlazaríamos mediante el atributo CLASS
El resultado sería el mismo. Aunque hay que repetir el procedimiento para cada vínculo
Fe de erratas por un tiempo este artículo estuvo parcialmente publicado por lo que el contenido era incoherente se arreglo el problema, una disculpa.




La vida de Pi es una apasionante película sobre la existencia y la religión con una historia cautivadora con una reflexión final sobre lo espiritual que a nadie dejará ajeno.
Trece años han pasado desde que Ridley Scott hizo una buena película, Gladiador es la historia sobre Maximus, general del ejército romano y su vida como gladiador.
Windows 8 y Surface RT pueden convertirse en el fin de Microsoft o uno de sus errores más costosos.
Un nuevo tutorial sobre
la creación de reglas CSS, publicado
regularmente.


Comentarios y Consultas
Los mensajes son moderados serán revisados antes de publicarse.
Si el número de comentarios excede 200, pulse el botón "Cargar más", hasta abajo de la caja de comentarios.
Los comentarios que utilicen un lenguaje inapropiado, sean irrelevantes, de tipo difamatorio, o no se adhieran a una ortografía, gramática y puntuación correcta serán rechazados.
6 comentarios:
Hola, he hecho algunos cambios pero igual me aparecen los subrayados. Yo coincido contigo de que cuando se pone el cursor encima de un enlace este debe subrayarse, pero mi problema es que siempre los enlacen están subrayados. Espero puedas ayudarme,
ResponderEliminarMi blog es: www.maizhermano.blogspot.com
Es porque has agregado el parámetro "underline" en muchas parte de tu plantilla que es el que subraya los vínculos, debes cambiarlo a "none".
ResponderEliminarMi sugerencia es que busques en tu plantilla
a:link
a:active
a:visited
a:hover
y en el parámetro text-decoration: underline;
reemplaza "underline" por "none" o sea:
text-decoration: none;
También busca en la plantilla con el buscador del navegador (IE CTRL+F - Firefox F3) toda referencia a text-decoration: underline;, cámbiala a text-decoration: none;
Antes de guardar la plantilla utiliza la vista previa cada que cambies un parámetro para ver si se quitan los subrayados en los vínculos según deseas.
Gracias, me ha ayudado bastante.
ResponderEliminarAmí me funcionó a la perfección, muchas gracias por este tema que me fué de mucha ayuda.
ResponderEliminarHola, en mi caso funciona perfectamente en Internet Explorer, pero en Google Chrome me sigue apareciendo subrayado. Cómo puedo solucionarlo?. Gracias.
ResponderEliminarDebe estar interfiriendo alguna regla CSS
ResponderEliminarPuedes poner !important para hacer obligatoria la regla.
Por ejemplo:
a {text-decoration: none !important;}