Usuario:
Contraseña:

Inicio | Nuevos | Populares | Top | Publicar Ejemplos | Pedir Ejemplos

Por ejemplo: Metáforas, hiatos, adjetivos, sustantivos,...
Estás en: Ejemplos10.com > Informática - Programación > CSS > Dar estilo a los enlaces en CSS

Ejemplos de Dar estilo a los enlaces en CSS
Enviado por natttt
Publicado el 2010-12-02 10:59:32
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...
© 2010 Ejemplos10.com · Recopilatorio de ejemplos de todo tipo gratis   Aviso Legal | Contacto | Pendidentes

eXTReMe Tracker