Foros del Web » Creando para Internet » CSS »

Ayuda con declaraciones de CSS

Estas en el tema de Ayuda con declaraciones de CSS en el foro de CSS en Foros del Web. Hola mi conocimiento de CSS es medio basico y no logro entender esto: Código: table.user1user2 div.moduletable { margin-bottom: 0px; } div.moduletable, div.module { margin-bottom: 25px; ...
  #1 (permalink)  
Antiguo 09/03/2011, 09:39
Avatar de Highlander  
Fecha de Ingreso: junio-2006
Ubicación: Concepción, Chile
Mensajes: 475
Antigüedad: 11 años, 6 meses
Puntos: 4
Ayuda con declaraciones de CSS

Hola mi conocimiento de CSS es medio basico y no logro entender esto:


Código:
table.user1user2 div.moduletable {
	margin-bottom: 0px;
}

div.moduletable, div.module {
  margin-bottom: 25px;
}


div.module_menu, div.module {
	margin: 0;
	padding: 0;
	margin-bottom: 0;
}

div.module_menu div, div.module {
	
}

div.module_menu div div, div.module div div {
	margin-bottom: 14px;
	padding: 0;
	background: url(../images/lcol.jpg) bottom center no-repeat;
}

div.module_menu div div div, div.module div div div{
	padding: 4px 0 4px 0;
	width: auto;
	background: url(../images/lcol_top.jpg) top center no-repeat;
}
Me parece un tipo de declaración anidada o algo asi, pero no se que significa que le ponga div. ni los otros div (eso lo habia visto ya dentro del HTML)

Cualquier ayuda se agradece.
__________________
Ingeniero (E) en Computación e Informática
The last man alone with god.
  #2 (permalink)  
Antiguo 09/03/2011, 13:24
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Ayuda con declaraciones de CSS

Simplificando mucho para abreviar.
Puedes hacer referencia a un elemento por su etiqueta html, por ejemplo div{ }. Eso haría que todos los div de tu documento recibiesen el estilo que indiques.
Puedes usar una clase (class="clase") a la que haces referencia con .clase{ }. Eso hace que todos los elementos de esa clase reciban el estilo indicado.
Puedes usar un identificador (id="ident") y hacer referencia a él con #ident{ }. Eso hace que el elemento con ese identificador que debería ser único en cada documento reciba el estilo indicado.
Se admiten combinaciones y así puedes usar div.clase que hace referencia a todas las etiquetas div de la clase "clase". Lo mismo serviría para div#ident en este caso los div co id="ident".
Las comas indican dos selectores diferentes que reciben las mismas propiedades. Por ejemplo html,body{} hace que esas dos etiquetas reciban el estilo que indiques.
Cuando dejas espacios se interpretan como elementos que están anidados en el HTML.
div#ident a.clase{ } hace referencia a todos los enlaces <a> que tengan la clase "clase" y que se encuentren dentro de la etiqueta <div id="ident">.
Para más información: http://www.librosweb.es/referencia/css/index.html
  #3 (permalink)  
Antiguo 09/03/2011, 13:49
Avatar de Highlander  
Fecha de Ingreso: junio-2006
Ubicación: Concepción, Chile
Mensajes: 475
Antigüedad: 11 años, 6 meses
Puntos: 4
Respuesta: Ayuda con declaraciones de CSS

Código:
div.module_menu div div div, div.module div div div{
	padding: 4px 0 4px 0;
	width: auto;
	background: url(../images/lcol_top.jpg) top center no-repeat;
}
Si entendí bien entonces en esta parte del codigo, ambos selectores ahí reciben las propiedades padding, width, background.

Son dos selectores??

div.module_menu div div div
div.module div div div

o son varios anidados por ejemplo: div.module_menu anida con div div div?

Muchas gracias por tu respuesta.
__________________
Ingeniero (E) en Computación e Informática
The last man alone with god.
  #4 (permalink)  
Antiguo 09/03/2011, 14:14
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Ayuda con declaraciones de CSS

Declarando div.module_menu div div div, div.module div div div{ ... estilo...}
aplicamos el estilo definido para todas las etiquetas <div> que estén incluidas dentro de al menos otras tres etiquetas div, la primera de las cuales (la más exterior) debe tener el atributo class="module_menu" o bien class="module".
En el siguiente ejemplo
Código HTML:
Ver original
  1. <div class="module_menu">
  2.   <div id="uno">
  3.     <div id="dos">
  4.       <div id="tres">
  5.         <div id="cuatro">
  6.           <div id="cinco">
  7.           </div>
  8.         </div>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </div>
recibirían el estilo los divs #tres, #cuatro y #cinco.
  #5 (permalink)  
Antiguo 09/03/2011, 14:15
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Ayuda con declaraciones de CSS

regla_css_1, regla_css_2{ }
equivale totalmente a:
regla_css_1{ }
regla_css_2{ }
  #6 (permalink)  
Antiguo 09/03/2011, 14:29
Avatar de Highlander  
Fecha de Ingreso: junio-2006
Ubicación: Concepción, Chile
Mensajes: 475
Antigüedad: 11 años, 6 meses
Puntos: 4
Respuesta: Ayuda con declaraciones de CSS

Estimado, excelente explicación ahora creo que lo entendí.

Ire a probar, saludos y gracias.
__________________
Ingeniero (E) en Computación e Informática
The last man alone with god.

Etiquetas: Ninguno
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 17:14.