Selector Pseudo-clase

Y finalmente tenemos los selectores pseudo-clases, incluyendo aquellos encontrados al centro del tipos avanzados.

Con una pseudo-clase, el estilo de un elemento depende del estado de ese elemento. ¿Reucuerdas la lección 19 donde yo hablaba acerca de a:link, a:visited, a:hover y a:active?

Sin embargo, la “a” es para la etiqueta anclaje y el “:link”, “:visited”, “:hover” y “:active’ son pseudo-clases.

Es facil añadir un selector pseudo-clase a las reglas CSS.

Haz click en el botón “Añadir Nueva Regla CSS” en la parte inferior del panel CSS.

Escoge “Avanzadas” en tipo y haz click en la caja vacía.
Esto abre un menu desplegable con las cuatro diferentes pseudo-clases.

Escoge una clase y haz click en el botón Aceptar.

En la “Definición de la regla CSS”, puedes especificar el diseño de tu vínculo para éste estado de la pseudo-clase y hacer click en Aceptar. Por ejemplo, bajo la categoría “Tipo”, cambia el color de texto.
Haz click en el botón Aceptar.
Repite para cada pseudo-clase.
Cuando pongas tu página en la ventana de navegador y cuando muevas tu puntero de mouse sobre un vínculo, verás que cambia el color.
Es facil.

En ésta lección, iremos un poco más lejos.

Quiero todos los vínculos de texto en la columna de la derecha (el id #RNavigation que yo mencioné en la lección previa) de mi página luce como un botón, sin usar imagenes, sólo usando CSS.

Empezamos con el botón “Nueva Regla CSS” en la parte inferior del CSS panel.
Esto abre la ventana de diálogo “Nueva Regla CSS”.
En el “Selector”, escribo el nombre del id, #RNavigation, porque es donde mi vínculo de texto están localizados, seguidos por un espacio y una letra “a”.
Esto significa que todas las etiquetas anclaje en la celda con “#RNavigatie” id serán seleccionados con éste selector.
Haz click en el botón Aceptar.

En “Tipo” de la caja de diálogo que aparece, escogemos “decoración” como “ninguna” y damos un color como otro.

La siguiente cosa que cambiamos es en la categoría “Bloque”.
En “Mostrar”, seleccionamos “bloque” de la lista desplegable.
Esto desplegará varios vínculos entre otros.
Si, por alguna razón, encuentras que quieres desplegarlos lado por lado, entonces escoge “en línea”.

Después escogemos la categoría “Cuadro”.
Verificamos las cajas “Igual para todo” para las columnas “Relleno” y “Margen” e introducir un valor para ambos en “Sup” caja.
Esto proveerá algún espacio entre y alrededor de los vínculos.

Después escogemos la categoría “Borde”.
Si las casillas de verificación para las columnas “Estilo”, “Ancho” y “Color” están verificadas aquí, haz click para no verificarlas.
En “sup” de la columna “Estilo”, damos un estilo de la línea que queremos vincular. He escogido para “continuo”, pero si prefieres puntos, la elección es tuya.
En la columna “ancho”, puedes especificar un valor para el ancho de la línea.
Y en “Color”, puedes dar el color que quieras usar.

Hago lo mismo para la caja “Inferior”.
Si deseas tener una línea a la derecha o izquierda del vínculo, adelante.Cuando termines, haz click en el botón Aceptar.

Ahora creamos una segunda regla CSS, una que determine el color cuando pasemos sobre el botón.
Entonces, haz click otra vez en el botón “Añadir Nueva Regla CSS”, en la parte inferior del panel CSS.

En el “Selector”, escribimos el nombre del id otra vez, # RNavigation, seguido de un espacio y las letras “a”, pero ahora determinamos el estado del vínculo, que está “:hover”.

El mensaje principal aquí es, cuando estés en una celda con el id #RNavigation y el puntero del mouse esté encima de un vínculo, la regla que creamos estará implementada.
¿Me sigues?
Haz click en el botón Aceptar.

Para ésta regla, solo quiero cambiar el color de fondo, entonces yo escojo la categoría “fondo” y escojo un color diferente haciendo click en la paleta de colores.
Cuando termines, haz click en el botón Aceptar.

En la vista de Diseño de Dreamweaver, vemos pequeños cambios de lo que hemos hecho, solo vemos vínculos.

Pero cuando vemos la página en nuestro navegador haciendo click el tecla F12, date cuenta que los vínculos tienen varios botones.

 

Cursos

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats