Foros del Web » Creando para Internet » CSS »

estilos anidados

Estas en el tema de estilos anidados en el foro de CSS en Foros del Web. Hola. Veo muy frecuentemente utilizar dos clases dentro de una misma etiqueta html. Por ejemplo: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < div class = ...
  #1 (permalink)  
Antiguo 07/10/2014, 17:28
 
Fecha de Ingreso: marzo-2008
Mensajes: 383
Antigüedad: 16 años
Puntos: 5
estilos anidados

Hola.

Veo muy frecuentemente utilizar dos clases dentro de una misma etiqueta html. Por ejemplo:

Código HTML:
Ver original
  1. <div class="caja caja2">
  2. Hola
  3. </div>

Código CSS:
Ver original
  1. <style>
  2. .caja{background-color:red; width:200px; height:200px; text-align:left;}
  3. .caja2{ text-align:right; }
  4. </style>

Mi duda es porqué se hace esto. Veo que se utilizan en webs importantes, así que debe ser útil, pero no se realmente para que...

Alguién podría explicarmelo o ponerme un ejemplo práctico?

Gracias de antemano
  #2 (permalink)  
Antiguo 07/10/2014, 21:53
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 1 mes
Puntos: 998
Respuesta: estilos anidados

usando tu propio ejemplo así se entiende mejor, imagina que quieres 2 cajas. Ambas son idénticas, solo que una tiene el texto alineado a la izquierda y la otra a la derecha.

Si las haces con 2 clases diferentes asignándole 1 clase a cada una, te quedaría así:
Código CSS:
Ver original
  1. .caja{background-color:red; width:200px; height:200px; text-align:left;}
  2. .caja2{background-color:red; width:200px; height:200px; text-align:right;}
Código HTML:
Ver original
  1. <div class="caja">Caja1</div>
  2. <div class="caja2">Caja2</div>

en cambio si usas tu ejemplo de css y el siguiente html, verás que el css puede ser sensiblemente más pequeño y sencillo.
Código HTML:
Ver original
  1. <div class="caja">Caja1</div>
  2. <div class="caja caja2">Caja2</div>
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -

Etiquetas: anidados, background, estilos, html, width
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 04:25.