Referencia de un estilo ya declarado desde otro estilo

JhonDie · #1 (**permalink**) 09/10/2007, 18:10

Tengo la siguiente CSS:

Código HTML:

.box_marco
 {
  border-left:1px solid #666666;
  border-right:1px solid #666666;
  border-top:1px solid #666666;
  border-bottom:1px solid #666666;
 }
.barra_tit1
 {
  border-left:1px solid #666666;
  border-right:1px solid #666666;
  border-top:1px solid #666666;
  border-bottom:1px solid #666666;
  background-image:url(../_layouts/images/upmp/con_gradiente1.jpg);
 }
.barra_tit2
 {
  border-left:1px solid #666666;
  border-right:1px solid #666666;
  border-top:1px solid #666666;
  border-bottom:1px solid #666666;
  background-image:url(../_layouts/images/upmp/con_gradiente2.jpg);
  font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size:11px;
  color:#333333;
  font-weight:bold;
  padding-top:2px;
  text-indent:5px;
  text-decoration:none;
  text-align:left;
 }

Mi pregunta es:

Si mis tres estilos tienen los bordes:

border-left:1px solid #666666;
border-right:1px solid #666666;
border-top:1px solid #666666;
border-bottom:1px solid #666666;

¿Cómo puedo evitar replicar estas declaraciones?

Se me ocurre que pueda existir algo como:

Código HTML:

.box_marco
 {
  border-left:1px solid #666666;
  border-right:1px solid #666666;
  border-top:1px solid #666666;
  border-bottom:1px solid #666666;
 }
.barra_tit1
 {
  // Referencia al estilo box_marco aqui...
  background-image:url(../_layouts/images/upmp/con_gradiente1.jpg);
 }
.barra_tit2
 {
  // Referencia al estilo box_marco aqui...
  background-image:url(../_layouts/images/upmp/con_gradiente2.jpg);
  font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size:11px;
  color:#333333;
  font-weight:bold;
  padding-top:2px;
  text-indent:5px;
  text-decoration:none;
  text-align:left;
 }

Por otro lado me encontre una media solución:

Que todos mis DIVS tengan un ID="box_marco" y la class="barra_tit2" (o class="barra_tit1" segun sea necesario) y poner en mi hoja de estilo el estilo como #box_marco PERO... No se si este permitido usar IDs repetidos porque se supone que por algo son ID (Identificadores Unicos)

O no se si este correcta mi media solución ya que SI hace lo que deseo, es decir pintar el marco con borde gris tenue y el estilo de "barra_titN" pero no sea que luego este mal al usar mal los IDs de cada DIVS

Alguna sugerencia???

Gracias...

webosiris · #2 (**permalink**) 09/10/2007, 22:56

Cita:

border-left:1px solid #666666;
border-right:1px solid #666666;
border-top:1px solid #666666;
border-bottom:1px solid #666666;

por un lado ya que los 4 bordes son iguales, se puede abreviar usando border:
border:1px solid #666;

para asignarle el mismo estilo a varias clases, se separa las clases con una coma (mucho más sencillo!!!):

Código HTML:

.box_marco,
.barra_tit1,
.barra_tit2{
border:1px solid #666}

Cita:

No se si este permitido usar IDs repetidos porque se supone que por algo son ID (Identificadores Unicos)

como bien concluís, los ID tienen que ser únicos.

PosProdukcion · #3 (**permalink**) 10/10/2007, 04:05

A propósito de los ID únicos...

Si una página está compuesta de varios IFRAMES, se pueden repetir ID si están en distintos IFRAMES????

JavierB · #4 (**permalink**) 10/10/2007, 06:14

Hola PosProdukcion

Lo que tienes dentro de los iframes son páginas, así que no hay problema en que haya id iguales en diferentes página. Incluso aunque tuvieras la misma página en 2 iframes, creo que no habría problema.

Saludos,

JhonDie · #5 (**permalink**) 10/10/2007, 15:30

Webosiris:

Tienes razón ya le puse solo border sin el left o el top, etc... Gracias por eso no lo habia notado jajaja...

Pero...

Cita:

Iniciado por webosiris

para asignarle el mismo estilo a varias clases, se separa las clases con una coma (mucho más sencillo!!!)

Los estilos solo comparten las mismas propiedades en los bordes ya que si asi fueran mejor usaria un solo estilo para todos mis DIVS en cambio uno lo necesito para los titulos tipo ventana otros para bordes solamente y asi sucesivamente...

Al momento de meterlos con coma me estan solo asignando los estilos de borde pero no las demas propiedades, en fin y como solo son estilos de pintura y no uso scripts para meterle dinamismo a las DIVS de marco pos las deje con IDs repetidos apuntando a #box_marco

Espero otras soluciones al respecto, si las hay... Gracias

webosiris · #6 (**permalink**) 10/10/2007, 19:24

el CSS tiene la características de ser "en cascada" (de ahí la C de CSS

) así que perfectamente podes hacer lo siguiente:

Código HTML:

.class1,
.class2,
.class3{
border:1px solid #000;}

.class1{
height:10px;}

.class2{
height:50px}

.class3{
height:100px;
border-bottom:2px solid #fff}

Si se establece 2 veces el mismo atributo tiene preferencia el que cargó por último, en este caso por ejemplo, .class3 quedaría con los bordes top left right de 1px color negro y el borde bottom 2px color blanco

lo de # repetido y tu explicación no lo entendí...

LoBo2024 · #7 (**permalink**) 11/10/2007, 03:54

Puedes asiganrle más de una clase a tu capa, osea que por ejemplo puedes ponerle lo siguiente:

Código:

/* Estilos */

.bordes{
  border: 1px solid #666;
}
.margenes{
  margin: 5px 10px;
}
.color{
  color: #fcfcfc;
}
/* Fin estilos */

<div class="bordes margenes color">Lorem ipsum blababla</div>

Entonces a esa capa se le asignara los estilos de bordes, margenes y color si por ejemplo no quieres usar el color pero si los bordes pos solo pones "bordes margenes" y listos ;)

Creo que eso es basicamente lo que estabas buscando :)

JhonDie · #8 (**permalink**) 11/10/2007, 08:27

Me sirvieron las dos formas, las de LoBo2024 y las de webosiris Gracias por todo y por la explicación de las cascadas de hojas de estilo...

Lo que no haya quedado explicado de mi parte respecto al mal uso de los ID no tiene sentido ya...

Cuidense y nos vemos en otro tema, tratare de no ser tan preguntón jejeje