jueves, 29 de marzo de 2007

Como quitar el subrayado de un vínculo

Por lo general los vínculos se preformatean por el navegador si no se define un atributo CSS y además del color azul que los resalta se agrega una línea de subrayado.


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:

a:active {
text-decoration: none;


}


a:link {
text-decoration: none;


}


a:visited {
text-decoration: none;


}


a:hover {
text-decoration: none;
}

Esto significa cada terminación:
  1. Link es el aspecto normal del vínculo
  2. Hover es cuando el ratón está sobre el vínculo
  3. Visited es para definir el aspecto de los vínculos visitados
  4. 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

<a href="http://cgnauta.blogspot.com/" class="nombreclase">vínculo a quitar subrayado</a>


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.

Comentarios y Consultas

Los mensajes son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

9 comentarios:

  1. 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,
    Mi blog es: www.maizhermano.blogspot.com

    ResponderEliminar
  2. 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".

    Mi 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.

    ResponderEliminar
  3. Amí me funcionó a la perfección, muchas gracias por este tema que me fué de mucha ayuda.

    ResponderEliminar
  4. Hola, en mi caso funciona perfectamente en Internet Explorer, pero en Google Chrome me sigue apareciendo subrayado. Cómo puedo solucionarlo?. Gracias.

    ResponderEliminar
  5. Debe estar interfiriendo alguna regla CSS

    Puedes poner !important para hacer obligatoria la regla.

    Por ejemplo:

    a {text-decoration: none !important;}

    ResponderEliminar
  6. Respuestas
    1. Esto no son trucos, estos son códigos CSS válidos, debes tener alguna línea de código CSS que interfiera, si pasa eso o borras esa línea o le agregas !important despues de none y antes del punto y coma.

      Eliminar

Reseña Leyenda de Korra: Maestros del aire originales

La leyenda de KorraEl episodio más débil de la temporada aparece con una historia puntual de Tenzin, Jinora y Kai.

[Leer artículo...]

Frozen: Una Aventura Congelada (2013): Review y crítica

Frozen (2013) reseña y criticaLa nueva película Disney que rememora el estilo de las adaptaciones clásicas, en este caso el cuento de La reina de hielo.

[Leer artículo...]

Gladiador (2000): Reseña y crítica

Gladiator 2000 peliculaTrece 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.

[Leer artículo...]

Los juegos del hambre: En llamas (2013): Reseña y crítica

Surface RT y Windows 8La adaptación del segundo libro de los juegos del hambre, no es Crepúsculo, pero no esperes un El Imperio Contraataca.

[Leer artículo...]

  © Cgnauta | CGsign blog | Licencia de uso | Matius algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

eXTReMe Tracker

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.

Anexos

Bitacoras.com