Hojas externas CSS
Buenos días:
Me gustaría que me asesorara ya que estoy empezando con html y css.
Tengo un sitio web donde he creado una hoja css externa y una individual por cada página para personalizar si es necesario. Pero veo que muchas de las cosas que cambio en la segunda hoja no hace efecto ya que es la general la que manda y en el firebug me las tacha.
Como puede ser esto si primero enlazo la general y después la personalizada.
Y además he notado que la única forma de seleccionar en la hoja personalizada es por ejemplo:
#contenedor #contenedor #pepito en vez de #pepito solo.
Gracias de antemano
1 Respuesta
Interesante pregunta y nada trivial. Y muy bien tu estructura de hojas .css con una distinta para cada página.
El tema de qué reglas aplica el navegador en cada caso viene dado por el 'orden de prioridades', o la 'especificidad' de la definición. En caso de conflicto, el navegador calcula los "puntos" que tiene cada declaración del css y aplica la de mayor puntuación. Los puntos vienen dados por esta regla:
Cada id (#) son 100 puntos
Cada clase (.) Son 10 puntos
Cada elemento (ul, a, p...) es 1 punto
Sumas todos los de la regla y tienes el resultado. Así, #contenedor #contenedor #pepito tiene 300 puntos y #pepito tiene solo 100. De ahí lo que me cuentas que te ocurre.
Lo que has de hacer es aplicar en la segunda hoja de estilos, al menos, la misma especificidad que en la primera (en caso de empate el navegador aplica la última definición). Y verás como solucionas tus problemas.
Otra manera es usar la regla ! Important en aquellos conflictos que no te aclares. Esto le da la priridad total sobre cualquier otra regla. Por ejemplo:
#pepito { color: red !important, }
Pero no te acostumbres demasiado al ! Important porque queda como un poco 'basto' (es mi opinión, claro).
Encontrarás mas información aquí:
<a>http://vagabundia.blogspot.com/2010/05/css-orden-de-prioridades.html</a>
<a>http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/</a>
Espero haberte ayudado y si quieres más ampliación, estoy a tu disposición. Y si quieres mandarme algún trozo de código, tú mismo.
Miquel
