Estilo avanzados a los enlaces

Vamos a definir el  estilo de los enlaces asignando su apariencia en sus distintos estados:

  • Enlace no visitado. Se define con el atributo link.
  • Enlace visitado. Se define con el atributo visited.
  • Enlace activo (cuando se está pulsando). Se define con active.
  • Enlace con el ratón encima. Se define con hover.

Esta definición podemos realizarla en la cabecera de la página HTML, entre las etiquetas <style> ... </style>, y es global a toda la página. Pero optaremos por crear el archivo externo.

Si queremos resaltar nuestra barra de navegación probablemente querríamos colocarla en una tabla de nuestra página web, con un color que contraste un poco con el fondo. En un caso como esté, será necesario que los enlaces de la barra de navegación y los enlaces normales de la página tengan colores distintos, por estar situados sobre dos tipos de fondos distintos.

Empezaremos copiando entre las etiquetas <body> ... </body> de nuestra plantilla y lo guardaremos con el nombre de “index.html” en una carpeta que llamaremos “enlaces“, veamos el listado:


Seguidamente copiaremos el listado en el archivo que llamaremos “css3.css” y lo guardaremos en el mismo directorio del archivo HTML.

Si todo ha ido bien el navegador nos mostrará los enlaces que hemos definido en el archivo CSS.

  • Ensaya realizando cambios tales como los colores para los eventos del ratón.

 

Anuncios