Para que sirven multiples nombres de class en un solo class

XxflezhaxX · #1 (**permalink**) 16/07/2010, 16:42

viendo el code de una pagina me encuentro con esto:

Código HTML:

<body id="wallpaper23" class=" headerfixed plainheader quadbar"

...

y examinando el CSS no existe ni un .class con el nombre de "headerfixed plainheader quadbar"

los hay, pero separados, o sea:
.headerfixed
.plainheader
.quadbar

me podrian explicar como funciona esto y para que varios nombres?? o estoy equivocado yo??

saludos y disculpen, pero me trae sin cuidado esto, no lo entiendo..

Triby · #2 (**permalink**) 16/07/2010, 17:50

Se supone que los navegadores reales aplicarian cada una de las clases a esa etiqueta, lamentablemente algunas versiones de IE no lo hacen ~~correctamente~~.

XxflezhaxX · #3 (**permalink**) 16/07/2010, 18:00

o sea, es exactamente lo mismo que poner todo en una sola clase que poner cosas distintas entre las 3 clases, al fin y al cabo, todas aplicaran donde mismo??
estoy en lo correcto??

es q no comprendo del tanto todo.

emprear · #4 (**permalink**) 16/07/2010, 23:37

A ver, un ejemplo

Código CSS:

Ver original<style type="text/css">
<!--
body {
    font-family: "Times New Roman", Times, serif;
}
.arial {
    font-family: Arial, Helvetica, sans-serif;
}
.verde {
    color: #003300;
}
.rojo {
    color: #FF0000;
}
-->
</style>

este es un párrafo con clase="arial rojo"

este es un párrafo con clase="arial verde"

Podrías haber incluído un <span> dentro del párrafo con clase verde u rojo, pero se resolvió desde el mismo css.
en hojas de estilo más complejas esta puede ser una solución más practica que involucrar otras etiquetas.
A su vez .rojo y .verde sólo definen el color, asi que nos quedan como recurso para aplicar a otros elementos que no sean <p>

Saludos

XxflezhaxX · #5 (**permalink**) 17/07/2010, 09:56

a osea, para lo que se utiliza esto es como por ejemplo.
tengo 5 clases.

clase1 -> este dara color rojo
clase2 -> este color verde
clase3 -> este font 0.5em
clase4 -> este centrado
clase5 -> este font 1em

y si yo a mi <span>contenido</span> le quiero dar rojo, centrado y 1em de tamaño, le pondre las 3 clases.

o sea, clase1, 4 y 5.

Bueno aqui ando dando a explicacion al revez, por que se supone que primero das las clases y ya vez las propiedades q les daras.

pero estoy en la razón????????

exxqizofrenicoo · #6 (**permalink**) 17/07/2010, 11:00

yo lo veo como forma de ahorrar codigo

C2am · #7 (**permalink**) 17/07/2010, 11:39

yo lo veo como la posibilidad de combinar distintos estilos sin tener la necesidad de crear estilos especificos para cada cosa.
Es decir, en vez de crear una clase donde se define el color rojo para el texto, y otra clase con similares caracteristicas pero con color azul para el texto, se crea directamente una clase .rojo y otra clase .azul, lo que también da la posbilidad de utilizarla junto con otras clases.
bueno, me enrede entre las clases de clases y mas clases,

Viendo mi css, la verdad que me haría falta redefinir y aplicar estos conceptos.

XxflezhaxX · #8 (**permalink**) 17/07/2010, 11:59

El punto es que cada clase tiene, propiedades definidas, y en este caso, el contenido tiene 3 clases. ¿Por que?
Por que aplicara los atributos de las tres clases a un solo contenido.
=D

arthpix · #9 (**permalink**) 17/07/2010, 13:24

Una razón práctica es el poder agregar atributos adicionales a cierto elemento que ya tiene una clase definida. Sin que se pierdan atributos ya declarados en la otra clase... lo que permite optimizar el código.

Por ejemplo, en un menú multinivel tipo acordeón los submenús están formados por listas de clase "sub" con un atributo "display: hidden" (ademas de otros atributos). usamos la clase "activo" para hacer que uno de los submenús sea visible sin perder el aspecto de sus elementos de lista.

Código CSS:

Ver original#menu li { color: red; list-style-type: disc;}
ul.sub { visibility: hidden; }
ul.sub li { color: blue; list-style-type: square; }
 
/* No tengo que volver a definir los "li", me ahorro una línea de código.*/
ul.activo {visibility: visible !important; }

Código HTML:

Ver original<ul id="menu">
   <li>Elemento 1
      <ul class="sub">
         <li>Subelemento 1.1</li>
         <li>Subelemento 1.2</li>
         <li>Subelemento 1.3</li>
      </ul>
   </li>
   <li>Elemento 2
      <!-- Este submenú esta visible -->
      <ul class="sub activo">
         <li>Subelemento 2.1</li>
         <li>Subelemento 2.2</li>
         <li>Subelemento 2.3</li>
      </ul>
   </li>
</ul>

XxflezhaxX · #10 (**permalink**) 17/07/2010, 13:43

arthpix
este no tiene ni una funcion:
ul.sub li { color: blue; list-style-type: square; }

has usado dos clases y un identificador.
class="sub"
class="activo"
id="menu"

yo queria entender el por que!! pero no se si pensar que tiene muy poca importancia este tema, o algo anda mal.

ya que yo he logrado exactamente lo mismo que tu, sin usar dos clases en un mismo elemento

usando una sola clase (para la invisibilidad) y con poco codigo.

Código CSS:

Ver originalul li {color: red; list-style-type: disc;}
.hidden {visibility: hidden;}

por eso te digo si este tema no tiene mucha importancia o que?
Yo estoy consiente que me trataste de dar un ejemplo, pero si ese es el caso.
Hay mas maneras mas faciles y ahorrando codigo de hacerlos.

alexk · #11 (**permalink**) 17/07/2010, 14:09

para mi es muy util... ahorro mucho codigo usando mi framework css que me ahorra mucho codigo y me agiliza...
Sobre navegadores... almenos hasta ahora no eh tenido problemas... desde ie6 a cualquier otro navegador...