La magia de los CSS

Diferentes estilos de link en la misma página

Si te has fijado en NugBar, habrás notado que los links de la parte central son amarillos, mientras que los demás son verdes. Asumiendo que no sabes como se hace eso, te lo vamos a explicar.

Para eso, necesitamos introducir el concepto del class. El class, o clase, hace que un tag específico se comporte de manera diferente. En la página anterior, modificamos los links, que son para efectos de html, el tag <A>. Ahora, queremos modificar tan sólo algunos de los tag <A> de la página y dejar los demás tal como los habíamos modificado la vez pasada.

Nos valemos entonces del class. Vamos a bautizar estos nuevos links con un nombre que nos guste… algo como “diferente”. Los bautizamos formalmente como class diferente. ¿Vale? Bueno, igual ya los bauticé así y el ejemplo se va con class “diferente”.

Abrimos de nuevo nuestro archivo estilos.css, y sin borrar lo anterior que habíamos puesto, agregamos lo siguiente:

a.diferente:link {

color : #FFFF9C;

text-decoration : none;

}

a.diferente:active {

color : #CCFFCC;

text-decoration : none;

background : #666666;

}

a.diferente:visited {

color : #FFFF9C;

text-decoration : none;

}

a.diferente:hover {

color : #FFFFFF;

text-decoration : none;

background : #666666;

}

¿Ves lo diferente que es el class diferente? Aprovechamos en esta ocasión, y le pusimos el efecto de fondo gris que tenemos en NugBar, para que tambien vea como se hizo.

Ahora, para que funcione, solo nos resta poner en las <A> que queremos cmabiar, una referencia que le diga al html que debe utilizar el class “diferente”. Para hacer eso, tomamos el link que queremos modificar, digamos que sea:

<a href=”http://www.nugbar.com/”>NugBar</a>

y le escribimos la especificación del class de esta manera:

<a href=”http://www.nugbar.com/” class=”diferente”>NugBar</a>

¡Y listo! Nos ganamos otro maní. Por supuesto que la class la puedes nombrar como tu quieras, siempre y cuando la especifiques luego en el html. Utilizando este truco, puedes poner todos los links de estilos diferentes que quieras, con la cantidad de estilos que quieras.

Ahora, vamos con el último tema de este artículo, el scrollbar de colores.

Vamos para la siguiente página…

Pages: 1 2 3 4

Deja un comentario

A %d blogueros les gusta esto: