Taller css

Taller de CSS - Manual completo

Página 1 de 67

Taller de CSS
Manual por: DesarrolloWeb.com [http://www.desarrolloweb.com/] Versión on-line: "Tu mejor ayuda para aprender a hacer webs" http://www.desarrolloweb.com/manuales/63

Aplicación de estilo avanzada a los enlaces
En este artículo vamos a ver cómo podríamos crear una barra de navegación bastante dinámica utilizando únicamente lasHojas de Estilo en Cascada. En el ejemplo vamos a construir una barra de navegación que contiene enlaces de varios colores que cambian de tonalidad al pasar el ratón por encima. Podemos ver el resultado de nuestra barra pulsando este enlace
[http://www.desarrolloweb.com/articulos/ejemplos/ejemploenlaces_manual_css.html],

para tener una idea más

exacta de lo que queremos conseguir. Cómo ponerestilo a los enlaces Ya lo vimos en capítulos anteriores de nuestro manual de CSS [http://www.desarrolloweb.com/manuales/2/], pero lo repetimos aquí. Se define el estilo de los enlaces asignando su apariencia en sus distintos estados: Enlace Enlace Enlace Enlace no visitado. Se define con el atributo link. visitado. Se define con el atributo visited. activo (cuando se está pulsando). Se definecon active. con el reton encima. Se define con hover.

Esta definición se realiza en la cabecera de la página, entre las etiquetas Y , y es global a toda la página. Un ejemplo de esto se puede ver en esta declaración de estilos:
A:link {text-decoration:none;color:#0000cc;} A:visited {text-decoration:none;color:#ffcc33;} A:active {text-decoration:none;color:#ff0000;} A:hover{text-decoration:underline;color:#999999;}

Cómo dar estilo a un enlace en concreto Si queremos resaltar nuestra barra de navegación probablemente querramos colocarla en una tabla de nuestra página web, con un color que contraste un poco con el fondo. En un caso como este, 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 sobredos tipos de fondos distintos. Es por esto que los enlaces de la barra van a tener un color distinto de los definidos en la cabecera de la página, con los estilos. Esto lo podemos conseguir de esta manera.
Mi enlace

Hemos definido el color de un enlace de una manera específica, utilizando el atributo style, de modo que este enlace siempre tendrá el color indicado, independientemente de suestado. Es un enlace amarillo, que quedaría muy bien resaltado sobre un fondo oscuro, como se puede ver en el ejemplo de barra de navegación siguiente.

Taller de CSS - Manual completo

Página 2 de 67

Enlace 1 [http://www.desarrolloweb.com/articulos/#] Otro enlace [http://www.desarrolloweb.com/articulos/#] Enlace 3 [http://www.desarrolloweb.com/articulos/#] En la tabla anterior tenemosenlaces amarillos en una web donde los enlaces son azules por defecto.

Cómo utilizar las clases al aplicar estilo a los enlaces También vimos en anteriores capítulos que el uso de clases puede ser muy útil a la hora de definir estilos especiales que podemos aplicar a las etiquetas que queramos. A la hora de trabajar con los enlaces también podemos aplicar las clases para definir distintos tipos deenlaces, que tienen distintos tipos de estilos.
A.clase1:visited {color:#ff0000;} A.clase1:active {color:#ff0000;} A.clase1:link {color:#ff0000} A.clase1:hover {color:#00ff00}

La ventaja al utilizar las clases con los estilos de los enlaces es que podemos especificar un formato distinto al enlace dependiendo de su estado: visitado o no, activo o con el ratón sobre él. Por si no quedó claro, alespecificar el estilo con el atributo style del enlace sólo podíamos decir que el enlace lo queremos en amarillo, y siempre lo tendremos en amarillo (sea visitado o no, activo, o estemos o no con el ratón encima). Con las clases definimos un nuevo tipo de enlace al que podemos dar distintos formatos dependiendo su estado. Otras ventajas de utilizar las clases consisten en que escribimos una única...