Quiero quitar el CSS de una seccion de la página

temaqueja · #1 (**permalink**) 15/03/2007, 14:19

Hola, he aplicado estilos predeterminados a mi página para <td> <p> entre otros, pero en una parte de la página (un <DIV>) un script en php inserta codigo html con la descripción de un producto, esta descripción tiene (o no) sus propios estilos, pero no se puede ver bien, porque sus tags son afectados por los estilos predeterminados.

graficamente seria algo asi::

<html>
<head>
<title><?=MI_TITLE;?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
</head>
<body>
...............
el html normal de la pagina que depende de los estilos
...............

<td><div style="font:10px!important Verdana!important"><?=$dat_dp['descripcion1'];?> <br />
<?=$dat_dp['descripcion2'];?></div>
</td>
<td valign="top"><div align="right"><?=number_format($dat_dp['preciolista'],2);?> </div></td>
<td valign="top"><div align="right"><?=$dat_dp['moneda'];?> <?=number_format($dat_dp['pneto'],2);?> </div></td>

...............
mas html normal de la pagina que depende de los estilos
..............
</body>
</html>
Lo que está en negrita es el <div> cuyo contenido no quiero que sea afectado por los estilos principales de la página, es decir, si se define un <p>algo</p> simplemente no salga en verdana 12px, sino en el estilo predeterminado del navegador.

NOTA: el intento de usar !important lo lei en las FAQ y no me funciona para este caso.

Gracias x su ayuda!

Mikmoro · #2 (**permalink**) 15/03/2007, 15:34

Creo que lo que debes hacer es contradecir las normas genéricas, bien con una clase o con un style dentro del div. Cada norma que no contradigas se cumplirá, pero en las que lo hagas no.

Por ejemplo: en el css

p {
font-size: 14px;
}

Y en el html:

<p>parrafo 1</p>
<p style="font-size: 10px;">parrafo 2</p>

El párrafo 1 tendrá un tamaño de letra de 14px, y el segundo de 10px.

o bien, en el css:

p {
font-size: 14px;
}
.diez {
font-size: 10px;
}

Y en el html:

<p>parrafo 1</p>
<p class="diez">parrafo 2</p>

cuyo resultado es el mismo.

¿Se ve claro?

Pues tienes que contradecir todas las que no quieras que se apliquen:

¿margin-top: 10px; y tú no quieres margen?
pues deberás poner margin-top: 0px;

Mikel.

temaqueja · #3 (**permalink**) 16/03/2007, 21:18

Gracias por responder pero si ves el código en negritas de mi primer post, veras que ya lo intenté y no me funciona, porque en la práctica, puede quedar algo como esto::

<div style="font:10px!important Verdana!important">TEXTO DESCRIPTIVO RESUMIDO DEL PRODUCTO <br />
<P>Descripción mas detallada que el encargado va a escribir sobre el producto, usando un cuadro de edición "wiziwig" que cogí de una libreria, y que genera codigo html.</P>
<p><u>Medidas</u></p>
<p>Alto: 10.44<br>
Largo: 11.11</p>
<p>&nbsp</p>
Asi que este codigo es afectado en partes por mis estilos globales y en partes (como esta que no tiene tag) no es afectado.</div>

Ayuda please :(

Mikmoro · #4 (**permalink**) 17/03/2007, 00:21

Creo que no me has entendido: debes contradecir los parámetros de cada etiqueta. No sirve de nada que le des un estilo al div que contiene el resto de elementos, si esos elementos tienen estilos globales marcados.

Es decir: si tu tienes un estilo para "p" en la css, aunque a un div que contenga "pes" le digas que tenga tal estilo, no sirve de nada si no contradices el estilo global en la propia etiqueta "p", porque al encontrarla le aplicará el estilo definido para todas las "pes".

En este caso tienes 3 opciones:

1.- defines un estilo en las etiquetas "p" del archivo que insertas: <p style="...>
2.- le das una clase sólo a las "pes" que no quieres que sean afectadas y defines esa clase: <p class="noestilo">, y la css: .noestilo {font-size: 10px;}
3.- cambias tus estilos globales para que sólo afecte a determinadas "pes", no a todas, en función del contenedor donde se encuentren. Por ejemplo:

si tengo 3 bloques div (uno, dos y tres), y las "pes" de los bloques uno y dos deben llevar los estilos globales, pero las del bloque tres no, pongo esto en la css:

#uno p, #dos p { font: 12px Verdana, Arial, Helvetica, sans-serif;}

De esta manera, las "pes" de los bloques uno y dos tendrán un tamaño de 12px, pero las del bloque 3 no.

Mira este sencillo ejemplo:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type" />
  <title>temaqueja</title>
  <style>
#uno p, #dos p {font: 12px Verdana, Arial, Helvetica, sans-serif;
color: blue;
}
#tres p {font: 10px Verdana, Arial, Helvetica, sans-serif;
color: red;
}
  </style>
</head>
<body>
<div id="uno">
<p>Este texto est&aacute; en el bloque uno, y por eso tiene
un tama&ntilde;o de 12px y color azul</p>
</div>
<div id="dos">
<p>Este texto est&aacute; en el bloque dos, y por eso tiene
un tama&ntilde;o de 12px y color azul</p>
</div>
<div id="tres">
<p>Este texto est&aacute; en el bloque tres, y por eso tiene
un tama&ntilde;o de 10px y color rojo</p>
</div>
<div id="cuatro">
<p>Este texto est&aacute; en el bloque cuatro, que no
est&aacute; definido, y por eso tiene
el tama&ntilde;o y color predefinido en el navegador</p>
</div>
</body>
</html>

Puedes ver el ejemplo aquí:

http://www.menoslobos.com/mikel/foro...temaqueja.html

Mikel.

temaqueja · #5 (**permalink**) 22/03/2007, 11:27

un millon de gracias x el ejemplo.