feed twitter facebook LinkedIn facebook

CSS » Eliminar el subrayado de los enlaces

Febrero 19, 2007 por Víctor Cuervo . 13623 visitas 4 Comentarios Imprimir Imprimir

Por defecto los navegadores suelen mostrar los enlaces de una página HTML de forma subrayada. Dependiendo del estilo que le estemos dando a la página, esto, puede ser más o menos un inconveniente. Mediante CSS tenemos una forma muy sencilla de hacer que los enlaces no aparezcan subrayados.

Para ello simplemente tenemos que manipular las propiedades del elemento anchor, es decir, del elemento A. Dicho elemento es el que representa los enlaces en el lenguaje HTML.

Lo primero que tenemos que hacer es crear un código CSS para acceder a dicho elemento. Para ello, dentro de la cabecera de la página crearemos una sección para manejar estilo. Veamos el código:

<head>
<title>Enlaces no subrayados</title>
<style type="text/css">
...
</style>
</head>

Dentro de esta sección manipularemos las comportamientos del elemento A. En concreto vamos a manipular los comportamientos link y visited. El primero representa al enlace en su estado inicial y el segundo al enlace cuando ha sido visitado.

La idea es que en ambos casos no aparezca el subrayado. Para ello hay que modificar la propiedad text-decoration e indicar que no tiene ninguna. Es decir, asignarle el valor de none.

El código quedaría de la siguiente manera:

<head>
<title>Enlaces no subrayados</title>
<style type="text/css">
<!--
A:link {text-decoration:none}
A:visited {text-decoration:none}
--></style>
</head>

Visualizar el ejemplo | Descargar el código

tags:

Artículos relacionados:

4 comentarios »

Redifusión RSS de los comentarios de la entrada. TrackBack URI

  1. moramodigital
    Julio 19, 2007 #

    hola me sirvio enseguida muchas gracias

  2. Alan
    Agosto 9, 2008 #

    Muy bueno, me sirvio mucho, gracias por colocar tips como este.

  3. alberto v05
    Mayo 17, 2010 #

    Muchas gracias, fue de mucha ayuda

  4. lineadecodigo
    Mayo 18, 2010 #

    @Alan, @lberto v05,

    Me alegro que les haya servido. :-)

Deje un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*