Dar estilo a los enlaces en CSS

Enviado por natttt

Publicado el 2010-12-02 10:59:32

Ejemplos de Dar estilo a los enlaces en CSS

Estilo en los enlaces

Una técnica muy habitual, que se puede realizar utilizando las hojas de estilo en cascada y no se podía en HTML, es la definición de estilos en los enlaces, quitándoles el subrayado o cambiar los colores.

Para aplicar estilo a los enlaces debemos definirlos para los distintos tipos de enlaces que existen (visitados, activos...). Utilizaremos la siguiente sintaxis, en la declaración de estilos global de la página (<STYLE>) o del sitio (Definición en un archivo externo):

Enlaces normales
A:link {atributos}

Enlaces visitados
A:visited {atributos}

Enlaces activos (Los enlaces están activos en el presiso momento en que se pincha sobre ellos)
A:active {atributos}

Enlaces hover (Cuando el ratón está encima de ellos, solo funciona en ieplorer)
A:hover {atributos}

El atributo para definir enlaces sin subrayado es text-decoration:none, y para darles color es color:tu_color.

También podemos definir el estilo de cada enlace en la propia etiqueta <A>, con el atributo style. De esta manera podemos hacer que determinados enlaces de la página se vean de manera distinta

Ejemplo de estilos en enlaces

<html>
<head>
<title>Ejemplos de estilo en enlaces</title>
<STYLE type="text/css">
A:link {text-decoration:none;color:#0000cc;}
A:visited {text-decoration:none;color:#ffcc33;}
A:active {text-decoration:none;color:#ff0000;}
A:hover {text-decoration:underline;color:#999999;font-weight:bold}
</STYLE>
</head>

<body>
<a href="http://dominioinexistente.nofunciona.com">Enlace normal</a>
<br>
<br>
<a href="enlaces.html">Enlace visitado</a>
</body>
</html>

¿Te sirvió este ejemplo?

(25%) SI

NO (75%)

Compartir este ejemplo:

O bien, copie y pegue el siguiente código en su sitio web, blog o foro:

Comentarios

Para dejar un comentario, regístrese gratis o si ya está registrado, inicie sesión.

Todavía no se ha escrito ningún comentario.

Ejemplos relacionados

Bordes punteados con css Publicado el 2010-11-18 20:11:51

A continuación os dejo una manera de utilizar los CSS para crear un estilo que podemos utilizar en divs, realizando los bordes bon líneas pu...