Foros del Web » Creando para Internet » CSS »

Referencia de un estilo ya declarado desde otro estilo

Estas en el tema de Referencia de un estilo ya declarado desde otro estilo en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/10/2007, 19:10
Avatar de JhonDie  
Fecha de Ingreso: abril-2005
Mensajes: 60
Antigüedad: 12 años, 8 meses
Puntos: 0
Referencia de un estilo ya declarado desde otro estilo

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...
__________________
Que tengas un productivo dia... JhonDie
  #2 (permalink)  
Antiguo 09/10/2007, 23:56
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Re: Referencia de un estilo ya declarado desde otro estilo

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.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 10/10/2007, 05:05
Avatar de PosProdukcion  
Fecha de Ingreso: noviembre-2004
Ubicación: Manzanares el Real (Madrid)
Mensajes: 726
Antigüedad: 13 años
Puntos: 9
Re: Referencia de un estilo ya declarado desde otro estilo

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????
  #4 (permalink)  
Antiguo 10/10/2007, 07:14
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
Re: Referencia de un estilo ya declarado desde otro estilo

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,
  #5 (permalink)  
Antiguo 10/10/2007, 16:30
Avatar de JhonDie  
Fecha de Ingreso: abril-2005
Mensajes: 60
Antigüedad: 12 años, 8 meses
Puntos: 0
Re: Referencia de un estilo ya declarado desde otro estilo

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 Ver Mensaje
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
__________________
Que tengas un productivo dia... JhonDie
  #6 (permalink)  
Antiguo 10/10/2007, 20:24
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Re: Referencia de un estilo ya declarado desde otro estilo

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í...
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #7 (permalink)  
Antiguo 11/10/2007, 04:54
 
Fecha de Ingreso: febrero-2002
Ubicación: Sabadell
Mensajes: 253
Antigüedad: 15 años, 9 meses
Puntos: 5
Re: Referencia de un estilo ya declarado desde otro estilo

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 :)
  #8 (permalink)  
Antiguo 11/10/2007, 09:27
Avatar de JhonDie  
Fecha de Ingreso: abril-2005
Mensajes: 60
Antigüedad: 12 años, 8 meses
Puntos: 0
Sonrisa Re: Referencia de un estilo ya declarado desde otro estilo

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
__________________
Que tengas un productivo dia... JhonDie
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 00:20.