3.- Estilos CSS (III).

En primer lugar, vinculamos nuestro documento con la hoja de estilos hoja1 que tenemos creada: Ventana > Estilos CSS , pinchamos en y seleccionamos :

Ahora pinchamos en el icono para crear nuevo estilo. Se abrirá:

Pero ahora seleccionamos Redefinir etiqueta HTML.

Inmediatamente la ventana cambiará para que elijamos la etiqueta que queremos modificar.

Probablemente, muchas de las personas que lean este tutorial, desconocerán algunas o muchas de las etiquetas que aparecen en este listado. No es obligatorio conocerlas y, además, Dreamweaver las escribe por nosotros. Nosotros, sólo a modo de ejemplo, vamos a redefinir la etiqueta <a> que es la etiqueta de los enlaces. Bien; la seleccionamos:

y le damos a Aceptar. Aparecerá la ventana de Definir el estilo. Lo hacemos y marcamos la casilla Decoración ninguna:

Le damos a Aceptar.

¿Qué hemos hecho? Hemos indicado al programa que, aparte del tipo de fuente, del tamaño y del grosor, cuando haya un enlace, el vínculo no esté subrayado. Como esto lo hemos definido dentro de la hoja de estilos hoja1 lo que acabamos de hacer tiene influencia en todos los documentos vinculados con la hoja, también en los creados anteriormente.

Ahora vamos a añadir un efecto a este estilo: Queremos que cuando pase el puntero del ratón por el vínculo éste se subraye.

Para ello volvemos a pinchar en el icono de la ventana de Estilos CSS y ahora marcamos Usar selector CSS

En Selector: elegimos a:hover

Le damos a Aceptar y aparecerá la ventana de Defincición de estilo. Marcamos subrayado y le damos a Aceptar.:

Como se ha podido intuir, las hojas de estilo tienen una gran potencialidad y sus posibilidades son muchas. Nosotros sólo nos hemos asomado a unas pocas de las utilidades que tiene esta herramienta. Se deja para el lector la experimentación y profundización a partir de las pistas dadas.