Foros del Web - Ver Mensaje Individual

SPAWN3000 · #2 (**permalink**) 24/11/2010, 19:40

Hola,

1. Este codigo normalemente se utiliza para estandarizar "un poco" la visualizacion en los navegadores, normalmente se ingresa en un archivo de nombre reset.css y se carga indica antes del resto de archivos, muchos framework lo utilizan en cierta forma. (Tal vez no sea la solucion pero podria darte ideas.

Código:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, 
address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, 
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; 
font-size: 100%; font-family: inherit; vertical-align: baseline;
}:focus { outline:0;}
body {line-height:1; color:black; background:white;}
ol,ul { list-style:none;}
table { border-collapse:separate; border-spacing:0;}
caption, th, td { text-align:left; font-weight:normal;}
blockquote:before, blockquote:after, q:before, q:after { content: "";}
blockquote, q { quotes: "" "";}

2. Ahora, si la idea es cambiar la apariencia de un objeto especifico, o podria decir todos los elementos contenidos dentro de un determinado DIV en tu pagina, tendrias que usar javascript.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>..::Pruebas::..</title>
<style type="text/css">
	.clase1 {
		  border: 1px solid #CCC;
		  margin-left:50px;
		  margin-top:50px;
		  width:500px; height:200px;
		  padding: 10px 5px 6px 5px;
		  background-color: #eeee88;
		  color: #666;
	}
	.clase2 {
		margin:0 auto 0 auto;
		width:400px; height:400px;
		background-color:#33ff99;
		color: #000;
	}
</style>
<script language = "javascript">
	function ChangeOBJ(obj) {
		var mydiv = document.getElementById(obj);
		mydiv.className = "clase2";
	}
</script>
</head>
<body>

<div id="Myid" class="clase1"><strong>Texto informativo sdfnsjkdf dsfkjsdh fkjdskjhf sdfhdkshfd skjfhdsf</strong></div>

<div><a href="javascript:ChangeOBJ('Myid')">Cambio de estilo</a></div>
</body>
</html>

3. Ahora como la idea es cambiar de hoja de estilo en determinados casos, podrias llegar un poco mas lejos.

Debes crear los archivos:
css1.css
css2.css

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CAMBIAR ESTILO</title>
<link href="css1.css" rel="stylesheet" type="text/css" title="css1"/>
<link href="css2.css" rel="alternate stylesheet" type="text/css" title="css2"/>
<script language="javascript">
function EstablecerCSS(title) {
      var i, a, main;
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
            if(a.getAttribute("rel").indexOf("style") != -1 &&
                  a.getAttribute("title")) {
                  a.disabled = true;
            if(a.getAttribute("title") == title)
	        a.disabled = false;
            }
      }
}
</script>
</head>
<body>
<div id="contenedor">
<div id="cabecera">
         <span class="WebTitulo">Plantilla de CSS </span>
</div>

<div id="contenido">
	<div id="enlaces">
         <a href="javascript:EstablecerCSS('css1');">Estilo 1</a>
         <a href="javascript:EstablecerCSS('css2');">Estilo 2</a>
         </div>
         <h1>Titulo secci&oacute;n </h1>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing &hellip;Lorem ipsum dolor sit amet, consectetuer adipiscing &hellip;Lorem ipsum dolor sit amet, consectetuer adipiscing &hellip;Lorem ipsum dolor sit amet, consectetuer adipiscing &hellip;Lorem ipsum dolor sit amet, consectetuer adipiscing &hellip;Lorem ipsum dolor sit amet, consectetuer adipiscing &hellip;Lorem ipsum dolor sit amet, consectetuer adipiscing &hellip;Lorem ipsum dolor sit amet, consectetuer adipiscing &hellip;</p>

</div>

<div id="navegacion">
<h2>Categorias</h2>
<ul>
         <li><a href="#">Dise&ntilde;o</a></li>
         <li><a href="#">Recursos</a></li>
         <li><a href="#">CSS</a></li>
         <li><a href="#">PHP</a></li>

         <li><a href="#">ASP</a></li>
         <li><a href="#">AJAX</a></li>
         <li><a href="#">Javascript</a></li>
         <li><a href="#">Ilustraci&oacute;n</a></li>
         <li><a href="#">Fotograf&iacute;a</a></li>

</ul>

</div>
</div>
</body>
</html>

4. Y Claro debe existir un cuarto como plan de contingencia, podrias usar esto.

Código:

html body * span.clear,
html body * div.clear,
html body * li.clear,
html body * dd.clear
{
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

Cada vez que necesites limpiar la aplicacion anterior, incluyes esta etiqueta entre uno y otro div.

<div class="estilo1">Capa con estilo de tipo 1</div>
<div class="clear">Etiqueta para limpiar</div>
<div class="estilo2"> Capa con estilo de tipo 2</div>

....mmm, no se me ocurre mas, tal vez si publicas un poco de codigo, podria ser mas acertivo con lo que buscas. Solo agote las posibilidades inmediatas.

Saludos,