Cambiar Colores y Características de los Enlaces
Con este ejemplo aprenderemos a cambiar las características de los enlace de nuestras páginas web. Veremos cómo dar un aspecto diferente a estos enlaces cuando pasemos el cursor del ratón por encima de ellos y cómo eliminar el subrayado y los colores.
Aunque esto puede hacerse también usando las opciones del Dreamweaver, os lo voy a explicar escribiendo el código correspondiente en la hoja de estilo. De este modo os será más fácil cambiarlo a vuestro gusto y además os ireis familiarizando aún más con los códigos. Además se trata de aprender CSS, no?
Bien, basta con incluir en la Hoja de Estilo lo siguiente (si aún no sabes enlazar o crear la hoja de estilo pasa antes por el ejemplo IV):
a:link { } /*para el enlace, tal cual*/
a:visited { } /*Para cuando ha sido visitado*/
a:hover { } /*Cuando el ratón está sobre él*/
a:active { } /*Cuando está siendo pulsado*/
Y basta con insertar dentro de los corchetes las características que deseas para cada estado. Por ejemplo, si deseas que en todos los casos los enlaces estén en negrita, sin subrayar y con un tamaño de 12px, será una característica a poner en la parte general.
Como el estilo para los enlaces cuando no ocurre nada especial con ellos es el mismo que el definido en la parte general (la anterior), no es necesario incluir nada en esta parte, pero hay que ponerla de todos modos, aunque vacia.
Si no deseas ningún cambio para los enlaces ya visitados, lo dejas vacio, pero ponlo también.
Estos cuatro estados han de ser definidos todos, aunque estén vacios, y además en ese orden.
Si deseas que cuando el cursor del ratón pase sobre el enlace, éste se ponga, por ejemplo, rojo, pon:
Y por último, si quieres que aparezca subrayado cuando el enlace esté siendo pulsado, pon:
NOTA: En la regla general ( la primera que hemos definido) se definió sin subrayar, pero cuando esté pulsado saldrá subrayado por estar definido DESPUÉS de la definición general. Normalmente, predomina la última definida en caso de que una característica sea definida dos veces.
El código completo a insertar será entonces el siguiente:
a:link { ;}
a:visited { ;}
a:hover {color:red ; }
a:active {text-decoration: underline ; }
Espero que estas explicaciones sean suficientes. En caso contrario decidme algo en el Foro.
Lección II:
