domingo, 24 de julio de 2011

Cuando cambiar un color es una tarea imposible

Es común que pregunten por qué no cambia el color de un título aunque no hay errores de sintaxis y a simple vista, todo parece normal.

Obviamente, eso dependerá de cada caso pero, el error más común es no tener en cuenta que ese título también es un enlace y por lo tanto, lo que debe cambiarse no es el color del contenedor sino el color del contenido.

Si el HTML es algo así:
<h3 class="post-title">
<a href="UNA_URL">el texto del título</a>
</h3>
La etiqueta H3 (o cualquier otro encabezado) es el contenedor y la etiqueta A es el contenido.

En una página web, es común que se defina el estilo de los enlaces de manera genérica y eso, afectará a todos ellos, sin importar donde estén; en este ejemplo, todos serán de color rojo y al poner el cursor encima cambiarán a amarillo:
a, a:visited, a:link  { color: red; }
a:hover { color: yellow; }
Si luego, definimos el color de las etiquetas H3 como verdes, no veremos ese cambio:
h3 { color: green; }
Para que el cambio tenga efecto, debe definirse la regla para el enlace; esto, traducido al español, significa que los enlaces que estén dentro de una etiqueta H3, sean de color verde:
h3 a { color: green; }
Lo mismo puede ocurrir si hay reglas de estilo menos genéricas pero que definen los estilos de cierto sector, por ejemplo:
.post-body a { color: black; }
.sidebar a { color: brown; }
#footer-wrapper a { color: cyan; }
Todos los enlaces contenidos dentro de esos rectángulos, serán afectados por las propiedades establecidas así que, si quiere modificarse uno de sus contenidos, hay que agregar nuevas reglas; no sólo para títulos sino para cualquier otra etiqueta, indicando de manera precisa cuál es el elemento a modificar:
.sidebar h2 a { color: green; }
.sidebar li a { color: green; }
.sidebar li a span { color: green; }

No hay comentarios:

Publicar un comentario