Foros del Web » Creando para Internet » CSS »

No heredar CSS

Estas en el tema de No heredar CSS en el foro de CSS en Foros del Web. Hola a todos, me explico: La cosa es que tengo un sitio donde todo el contenido se guia por un css, pero necesito escaprar por ...
  #1 (permalink)  
Antiguo 24/11/2010, 14:34
 
Fecha de Ingreso: abril-2010
Ubicación: La habana
Mensajes: 229
Antigüedad: 7 años, 8 meses
Puntos: 4
No heredar CSS

Hola a todos, me explico:

La cosa es que tengo un sitio donde todo el contenido se guia por un css, pero necesito escaprar por completo del mismo (archivo css) en determinadas ocaciones y referenciar a otro archivo css, cómo lo hago¿?

No puedo refrerenciar los dos css desde el principo para hacer llamados posteriores porque tengo elementos comunes como h1 que entonces me toma el último css referenciado.

Lo que quiero es escaprar por completo del mismo (archivo css) en determinadas ocaciones y referenciar a otro archivo css

Si alguien sabe cómo hacerlo..¿?
Saludos
  #2 (permalink)  
Antiguo 24/11/2010, 19:40
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 9 meses
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: "" "";}

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,
  #3 (permalink)  
Antiguo 25/11/2010, 15:59
 
Fecha de Ingreso: abril-2010
Ubicación: La habana
Mensajes: 229
Antigüedad: 7 años, 8 meses
Puntos: 4
Respuesta: No heredar CSS

Gracias eso es una muy buena explicación aunque algo dura para mi cerebro, la estudiaré con detalles.
Muchas gracias.
  #4 (permalink)  
Antiguo 25/11/2010, 19:01
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: No heredar CSS

Es simple hijo, si quieres que no hereden las indicaciones, ponles una CLASE luego en tu otra hoja de estilos das los estilos de esas clases.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.

Etiquetas: heredar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:12.