24/11/2010, 19:40
|
 | | | Fecha de Ingreso: marzo-2008 Ubicación: Bogota
Mensajes: 858
Antigüedad: 16 años, 1 mes Puntos: 15 | |
| Respuesta: No heredar CSS
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: "" "";}
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>
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ón </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing …Lorem ipsum dolor sit amet, consectetuer adipiscing …Lorem ipsum dolor sit amet, consectetuer adipiscing …Lorem ipsum dolor sit amet, consectetuer adipiscing …Lorem ipsum dolor sit amet, consectetuer adipiscing …Lorem ipsum dolor sit amet, consectetuer adipiscing …Lorem ipsum dolor sit amet, consectetuer adipiscing …Lorem ipsum dolor sit amet, consectetuer adipiscing …</p>
</div>
<div id="navegacion">
<h2>Categorias</h2>
<ul>
<li><a href="#">Diseñ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ón</a></li>
<li><a href="#">Fotografía</a></li>
</ul>
</div>
</div>
</body>
</html>
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, |
