Norma ntc � ohsa 18001:00 sistemas de seguridad industrial y salud ocupacional.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Taller de CSS

Autores del manual Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com: Miguel Angel Alvarez Carlos Luis Cuenca Federico Elgarte
Director de DesarrolloWeb.com http://www.desarrolloweb.com (36 capítulos) http://www.helloworldsolutions.com/ (1 capítulo) http://www.cssboulevar.com.ar/(5 capítulos)

Diego Pinilla
Responsable relaciones exteriores de MercadoProfesional.com http://www.mercadoprofesional.com (1 capítulo)

Lim Chee Aun
http://cheeaun.phoenity.com/ (2 capítulos)

Oscar Alcalá
Desarrollador web freelance (1 capítulo)

Javier Chaure

Desarrollador freelance http://www.xski.net/ (2 capítulos)

Ana Alvarez

Directora de contenidos de Estilo y Moda .comhttp://www.estiloymoda.com/ (1 capítulo)

Pol Salvat

http://www.mistrucos.net (1 capítulo)

Artemio Artigas
Redactor de guiarte.com – Turismo, naturaleza, arte. http://www.guiarte.com (1 capítulo)

Manu Gutierrez
http://www.tufuncion.com (1 capítulo)

Taller de CSS: http://www.desarrolloweb.com/manuales/63/ © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. Noreproducir sin autorización.

1

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

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 las Hojas de Estilo en Cascada. En el ejemplo vamos a construir una barra de navegación que contiene enlaces de varios colores que cambiande tonalidad al pasar el ratón por encima. Podemos ver el resultado de nuestra barra pulsando este enlace, para tener una idea más exacta de lo que queremos conseguir. Cómo poner estilo a los enlaces Ya lo vimos en capítulos anteriores de nuestro manual de CSS, pero lo repetimos aquí. Se define el estilo de los enlaces asignando su apariencia en sus distintos estados: • • • • Enlace Enlace EnlaceEnlace no visitado. Se define con el atributo link. visitado. Se define con el atributo visited. activo (cuando se está pulsando). Se define con 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 sobre dos 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 unenlace de una manera específica, utilizando el atributo style, de modo que este enlace siempre tendrá el color indicado, independientemente de su estado. 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. Enlace 1

Taller de CSS: http://www.desarrolloweb.com/manuales/63/ © Los manuales de DesarrolloWeb.comtienen el copyright de sus autores. No reproducir sin autorización.

2

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Otro enlace Enlace 3
En la tabla anterior tenemos enlaces 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...