oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso CSS - Lección 6: Enlaces
Veamos como podemos aplicar efectos a los enlaces de nuestra página mediante CSS. Para aplicar estos efectos hay que usar las pseudo-clases.
¿Qué es una pseudo-clase?
Una pseudo-clase nos permitirá tener en cuenta diferentes condiciones o eventos al definir una propiedad para una etiqueta HTML.
Como supongo que ya sabras los enlaces se insertan en HTML usando la etiqueta <a>. Por lo tanto para referirnos a un enlace en CSS utilizaremos el selector "a".
Veamos un ejemplo:
a { color: red;}
Los enlaces pueden tener diferentes estados. Y así usando una pseudo-clase podemos asignar diferentes estilos a los enlaces.
a:link { color: red;}
a:visited { color: blue;}
Usaremos a:link y a:visited para definir enlaces visitados y no visitados respectivamente. A los enlaces activos le aplicaremos la pseudo-clase a:active y a:hover cuando el cursor se situa sobre el enlace.
Pseudo-clase a:link
La usaremos para establecer un estilo a los enlaces que el usuario todavía no ha visitado.
En el siguiente ejemplo los enlaces que el usuario todavía no haya visitado se mostrarán en color verde:
a:link { color: #01DF01;}
Pseudo-clase a:visited
Usaremos esta pseudo-clase para definir los enlaces que el usuario ya ha visitado.
En el siguiente ejemplo los enlaces que el usuario ya haya visitado se mostrarán en color rojo:
a:visited { color: #ff0000;}
Pseudo-clase a:active
La pseudo clase a:active se usa para los enlaces que están activos.
En el siguiente ejemplo los enlaces que esten activos se mostrarán en color amarillo:
a:active { color: #FFFF00;}
Pseudo-clase a:hover
La utilizaremos para cuando el cursor del ratón pase por encima de un enlace.
En el siguiente ejemplo veremos el código a insertar en nuestra hoja de estilos para que cuando el cursor del ratón pase por un enlace el fondo del enlace sea de color verde claro y el texto cambie a cursiva:
a:hover {
color: #81F781;
font-style: italic;
}
¿Cómo quito el subrayado de los enlaces?
Esa es una pregunta que se suele ver mucho por los foros de discusión y es muy simple de quitar. Usaremos para ello la propiedad text-decoration:
a {text-decoration: none;}
Con todo lo que has dado hasta ahora ya tienes para ir investigando, como siempre digo, experimenta por tu cuenta para que se te queden bien todas las lecciones que vamos dando.
Quiero aprender más!!!
- Avanzar a Lección 7: Atributos "class" e "id"
- Retroceder a Lección 5: Texto
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®