Incompatibilidad hojas 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.

Para hacer las distintas paginas duplico la index, las modifico y le añado otra hoja css personalizada.

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

Respuesta
1

Lo mejor es tener una única hoja CSS externalizada, de manera que el servidor tenga que proporcionar una única hoja, así ahorras en peticiones al server y en transferencia de datos.

También estaría muy bien que la comprimas.

Si ves mi web http://sakrow.com/ unicamente existe una hoja de estilos css y esta comprimida en una sola linea, puedes hacerlo con esta herramienta:

<a>http://htmlcompressor.com/</a>

Volviendo al tema, si te esta tachando el código de la segunda hoja es porque seguramente tengas duplicada la referencia o el estilo, por ejemplo si tenemos esto:

body{
color:red;
}

Y en la segunda hoja tenemos esto:

body{
color:white;
}

El color del texto de body sera rojo, porque ha sido el primer atributo que ha leído el navegador, si quisiéramos que el color fuera el del segundo CSS, podemos usar !important de manera que damos mas importancia aúno de los atributos y sera ese el que se utilice

body{
color:white !important
}

De todas maneras si me enseñas el código, puedo decirte algo mas exacto, pero creo que por ahí va tu problema.

Si eso no te lo soluciona comentame, me pasas el código y lo vamos mirando

Esta muy bien tu página y todo muy estructurado, pero cuando la estructura y características en algunas zonas cambia de una página a otra es cuando tengo problemas y había pensado en añadirle un hoja secundaria para personalizar y además modularizar más las css para revisar errores. No se que te parece, creo que así lo hace Joomla.

Con el !important me has dado la vida era eso lo que me estaba ocasionando tantos problemas. Me creía que si dabas atributos a un elemento en una hoja CSS y después cargabas otra modificando los atributos del mismo elemento, la última en cargar era la que se respetaba.

Iré probando de todos modos y muchas gracias.

Yo te recomendaría tener una única hoja CSS linkada a la pagina.

Ello no impide que el contenido de la hoja cambie dinámicamente dependiendo de donde estés en la pagina web, en mi caso solo uso mas hojas CSS si estoy utilizando alguna librería externa (un slider de imágenes por ejemplo) y necesita su hoja de estilos particular.

Me alegra que te sirviera.

1 respuesta más de otro experto

Respuesta
1

Piensa que el CSS está pensado para simplificar. No crees varios documentos CSS, a no ser que sea estrictamente necesario. Para separar estilos lo mejor es que definas distintas clases, por ejemplo llamándolas como ".clase1", y luego en el HTML haciendo referencia a ello, EN CUALQUIER ELEMENTO QUE ACEPTE LOS ATRIBUTOS DE LA CLASE, poniendo "class='clase1'"

De esta manera, la clase anula a los atributos que haya recibido de otra manera, por ejemplo en el propio HTML.

Recuerda incluir el CSS en cada página en el que lo necesites, o bien escribir directamente el CSS en el código HTML con la etiqueta "<style>"

ES IMPORTANTE: Creo que no cambiaste la referencia de la hoja de estilos, y estas siempre llamando al primer CSS que hiciste. Haz pruebas, quita cosas y pon cosas aunque sepas que funcionan, eso ayuda a entender bien el comportamiento del CSS

No sé si he entendido bien tu problema, pero no dudes en pedir aclaración si no es esto lo que preguntabas =)

PD: Ahora mismo salgo de casa y cojo un vuelo a Madrid, no vuelvo hasta el domingo por la tarde, lo digo por si ves que no te respondo hoy o mañana

Tienes mucha razón con eso de simplificar lo que pasa es que no se como cuando hay varias páginas (algunas diferentes en estilo) y utilizo una como plantilla.

Cuando un sitio web se compone de un estilo muy homogéneo es relativamente fácil añadirle una hoja css genérica, pero la mayoría de las veces hay que modificar estilos de una página a otra. Ahí es donde no se si hacerlo todo en una hoja con el consiguiente lio o una genérica y otras especificas a cada página si es demasiado diferente.

Lo de añadir css en el html prefiero que no.

Con respecto a las clases está muy bien pero yo utilizaba id en vez de clases y me daba el mismo error. Al dar propiedades a un elemento en la hoja CSS genérica y después cargar la otra modificando el mismo elemento, sólo respetara la genérica.(las hojas las he revisado y están bien linkeadas. 1º la genérica y después la especifica).

Gracias por todo y haber si me puedes orientar cuando puedas.

Si no te va usando clases (. Clase) ni ID (#id), puede que falle algo en tu css o bien en tu html, y que no sea concretamente en ese lugar, revisa bien bien todo el codigo

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas