evitar heredar estilos

dieguicho · #1 (**permalink**) 05/10/2012, 20:56

hola a todos
quiero que todos los elementos que esten dentro de un div
tengan su propio estilo y no hereden nada del exterior.
osea. si defino un estilo para los h1 no quiero que los h1 que estan dentro de un div
determinado tengan ese estilo.

<h1>este debe tener un estilo</h1>

<div id="nada">
<h1>nada de lo que este aqui tiene que heredar estilos</h1>
<p>otra cosa...</p>
</div>

es posible hacerlo?

muchas gracias!

C2am · #2 (**permalink**) 05/10/2012, 21:01

Tal vez con un:

Código CSS:

Ver original#nada h1{estilos titulos}
#nada p{estilos parrafos}

También podrías usar id o class en los elementos internos

Saludos

dieguicho · #3 (**permalink**) 05/10/2012, 21:30

si, pero todo lo que no declare lo heredara de lo que se haya definido de manera global.
y son muchas propiedades!!

memoadian · #4 (**permalink**) 05/10/2012, 21:36

pues entonces no declares sentencias globales, aunque estas ya vienen predefinidas, por lo que si no declaras esas propiedades igual se heredan estilos por defecto.

De todos modos vas a tener que trabajar bastante.

pzin · #5 (**permalink**) 05/10/2012, 21:48

Es que los identificadores y las clases están precisamente para eso, ¿no?

C2am · #6 (**permalink**) 06/10/2012, 09:26

Pero se supone que los estilos globales que uno define en el css son necesarios para mantener cierto criterio de diseño.
Digo, seguro que tienes que definir algunas propiedades, pero ¿todas?.
Imaginate tener que redefinir para cada sección todas las propiedades css, o tener que definir un reset para cada una de ellas.
Si ese es el caso, lo que te conviene hacer es poner un iframe (con todos los problemas que ello conleva) y en esa nueva página definir los estilos. Pero no es una buena solución para nada.
Lo mejor es repensar el proyecto con criterios de uniformidad.

furoya · #7 (**permalink**) 06/10/2012, 13:23

Hola todos.

dieguicho, tanto tiempo.

¿Te sirve esto? (No sé en cuantos navegadores funcionará.)

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<style type="text/css">
body > h1 {color:red; }
#nada {background-color: yellow; }
</style>
</head>
<body>

<h1>este debe tener un estilo (rojo)</h1>

<div id="nada">
<h1>nada de lo que este aqui tiene que heredar estilos</h1>
<p>otra cosa...</p>
</div>

<h1>este debe tener un estilo (rojo)</h1>

</body>
</html>

dieguicho · #8 (**permalink**) 06/10/2012, 20:26

muchachos estoy armando un widget el cual los usuarios incluiran con javascript
mi widget tendra algunos estilos creados por mi pero el problema es que mi widget hereda
los estilos que haya definido el usuario en la pagina que incluyo el widget

solo puedo manejar mi widget pero no puedo controlar como los usuarios diseñan sus propios sites

probé haciendo un

#miwidget * {
//redefino una por una las propiedades aqui
}

pero queria ver si habia una forma "correcta" de hacerlo

gracias por sus respuestas

memoadian · #9 (**permalink**) 07/10/2012, 00:33

Pues creo que lo mejor es que el widget se acople al estilo del sitio no? si es un widget debe ser armonioso con el sitio.

pero si quieres que a fuerzas se que de el estilo que tu le pongas, usa !important

o en todo caso ponles variables a los estilos y que el usuario tenga una forma facil de añadir estilo a tu widget, todo debe ser amigable.