Foros del Web » Creando para Internet » CSS »

Diferencia entre class y id???

Estas en el tema de Diferencia entre class y id??? en el foro de CSS en Foros del Web. Eso cual es la diferencia fundamental que los diferencia???...
  #1 (permalink)  
Antiguo 13/07/2005, 16:45
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 13 años
Puntos: 1
Diferencia entre class y id???

Eso cual es la diferencia fundamental que los diferencia???
  #2 (permalink)  
Antiguo 13/07/2005, 16:58
 
Fecha de Ingreso: octubre-2004
Mensajes: 234
Antigüedad: 13 años, 1 mes
Puntos: 0
Lee estol:

http://www.sidar.org/recur/desdi/mcss/manual/sel.php
  #3 (permalink)  
Antiguo 13/07/2005, 16:59
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
Pues id es para un elemento unico, de hecho si intentas ponerle el mismo id a varios elementos el validador te arrojara un error, diciendo que el ancla ya esta definida....

id se usa par aidentificar un elemento unico en el documento HTML, el cual puede servidr como ancla para un vinculo.
Class se usa para aplicar estilos iguales a varios elementos HTML, o sea, una clase es una serie de estilos definidos que se pueden usar muchas veces en cualquier etiqueta HTML.

Saludos.
  #4 (permalink)  
Antiguo 22/07/2005, 10:31
 
Fecha de Ingreso: julio-2005
Mensajes: 3
Antigüedad: 12 años, 4 meses
Puntos: 0
ID vs CLASS

Pueden poner algun ejemplo de como es un MAL uso de un ID. Todavia no comprendo su diferencia con la CLASS. SEgun entiendo el ID solo puede ser utilizado por un elemento, pero al utilizarlo yo con varios, no me marca error. NO se si me explico. UN EJEMPLO POR FAVOR... QUE ME MARQUE UN ERRORSOTE!
  #5 (permalink)  
Antiguo 22/07/2005, 10:56
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
Mira, yo no sé mucho de esto, pero puedes verlo por el lado de la semántica, empecemos por la traducción al castellano de cada uno:

id: 'identificador'. Se utiliza para diferenciar por medio de un número o letra o conjunto de letras (palabras) a un elemento, en muchas ramas de la informática (incluyendo el desarrollo web) los identificadores deben ser únicos (por eso lo del validador).

class: 'clase'. Se utiliza para agrupar a un grupo de elementos. Yo ponía el otro día una duda que ahora he comprendido mejor:
<div id="derecha" class="menu">
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>

<div id="izquierda" class="menu">
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>

De la manera anterior usamos una sola clase para cada menú y un id diferente para cada uno. ¿Para qué?. Pues es lo que te mencionaba, la semántica, ahí estás declarando que los dos divs son menús.

Ahora, ¿en que te puede ayudar lo anterior?, pues el class menu puedes darle estilos comunes y cuando les quieras cambiar algo o hacerles algo diferente, lo haces con cada identificador.

Saludos
  #6 (permalink)  
Antiguo 22/07/2005, 11:02
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
el ejemplo de jesusbet esta muy bueno, en el css puedes hacer la clase .menu y ponerle los estilo, y ambos menus los tomaran, pero no puedes darle posicionamiento con la clase porque cada uno va en diferente posicion, entonces puedes posicionarlos desde CSS usando sus IDs
Error como tal no vas a ver, pero por ejemplo, si tienes una serie de elementos con el mismo ID el error que marca es que el ancla ya ha sido definida y que no se puede repetir, porque los IDs son anclas
  #7 (permalink)  
Antiguo 22/07/2005, 12:09
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 8 meses
Puntos: 2
Id es identificador, una especie de dni para las etiquetas (salvando las distancias)
Las clases seria algo asi como grupos o modas (para entendernos).
Los ID identifican UN unico elemento (si pones ID repetidas esta mal) asi puedes aprovechar dicho identificador para dirigir a un visitante a ese punto de la pagina (<a href="#ID">texto</a>) para trabajar con javascrip (get.element.by.id) para aplicar estilos exclusivos del elemento (#ID {estilos} ) y mas.
Una clase puede pertenecer a uno o mas elementos.

Un mal uso de las clases es por ejemplo definir clases para un unico elemento ya que se puede usar el #ID para tal fin (por ejemplo con una unica cabecera class="cabecera")

Un mal uso de los #ID´s es definir los estilos de cada elemento individualmente en lugar de agrupar los estilos comunes y aplicarlos por clases
Código:
 
#menu1 { color: red; font-size: 1.5em; text-decoration: none; }
#historia  { color: red; font-size: 1.5em; text-decoration: none; }
#historia2  { color: red; font-size: 1.5em; text-decoration: none; }
#resumen  { color: red; font-size: 1em; text-decoration: none; }
Como puedes ver todos los estilos son identicos excepto el ultimo que cambia el tamaño de la fuente.
Código:
.textorojo  { color: red; font-size: 1.5em; text-decoration: none; }
#resumen { font-size: 1em; }
El efecto de este codigo es exactamente el mismo sin embargo es mucho mas liviano y comprensible, al compartir estilos los elementos comparten clase y se benefician (aparte de poder cambiarlo en grupo)
el elemento resumen al compartir la mayoria de los elementos tambien comparte clase pero para aplicarle un tamaño de letra distinto nos referimos exclusivamente a el por su #ID.
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #8 (permalink)  
Antiguo 22/07/2005, 13:26
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 13 años
Puntos: 1
muy bueno, gracias a todos.
  #9 (permalink)  
Antiguo 22/07/2005, 23:49
 
Fecha de Ingreso: julio-2005
Mensajes: 3
Antigüedad: 12 años, 4 meses
Puntos: 0
Ok ya comprendo. Ahora... si me pongo a pensar con mucho sentido comun... DEMASIADO, EXAJERADO sentido comun, ¿No es mejor entonces hacerlo todo con clases?

.textorojo { color: red; font-size: 1.5em; text-decoration: none; }
.resumen { font-size: 1em; }

¿No es lo mismo?

Perdon por sacarlos de sus casillas... :)
  #10 (permalink)  
Antiguo 23/07/2005, 02:27
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 13 años
Puntos: 1
viendolo de esa forma si, pero utilisar class para estilos iguales en diferentes elementos, e id para especificar individualmente otros, ayuda a tener las cosas mas organisadas y trabajar con menor codigo.
  #11 (permalink)  
Antiguo 23/07/2005, 02:49
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
cierto, lo que dice Snake es la base de la semántica...

el punto no es usar un class para cada div que vayas a utilizar con diferente color, el punto es usar class para crear un documento semántico, por ejemplo, necesitas 3 bloques que serán usados para noticias, uno verde otro blanco y otro rojo, podrías hacer esto:

<div class="rojo"></div>
<div class="blanco"></div>
<div class="verde"></div>

o podrías hacer ésto:

<div class="noticia" id="rojo"></div>
<div class="noticia" id="blanco"></div>
<div class="noticia" id="verde"></div>

Hasta ahora parece que es mejor usar el primer ejemplo, pero, que tal si te piden que los enlaces tengan el mismo estilo en cada bloque??

en el primer caso harías:
.rojo a {
estilos para enlaces de bloque rojo
}

.blanco a {
estilos para enlaces de bloque blanco
}

.verde a {
estilos para enlaces de bloque verde
}

o incluso, de una manera más simple:
.verde a, .blanco a, .rojo a {
estilos para enlaces en bloque verde, bloque blanco y bloque rojo
}

Pero en el segundo caso harías:
.noticia a {
estilos para los enlaces de los bloques noticia
}

de la segunda forma tu documento sería más semántico (dicen los que saben), mientras que de la primera forma tu marcado vendría dando lo mismo que usar tablas... y tu hoja de estilos, que decir, un completo escrito en un lenguaje no terricola...

Desde mi humilde entender, así es... ;)

Saludos
  #12 (permalink)  
Antiguo 23/07/2005, 14:36
 
Fecha de Ingreso: julio-2005
Mensajes: 3
Antigüedad: 12 años, 4 meses
Puntos: 0
OK, Muchas gracias a todos, espero cambiar mi nickname pronto.
  #13 (permalink)  
Antiguo 23/07/2005, 14:50
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
y para que cambiar el nick?? con ese puedes seguir posteando :s
  #14 (permalink)  
Antiguo 23/07/2005, 15:18
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
Muy interesante lo de que los ID se pueden usar de anchors, no tenia idea de eso. Yo usaba el name, pero si tengo un ID en el lugar del anchors me ahorro un tag.
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #15 (permalink)  
Antiguo 05/02/2013, 21:38
 
Fecha de Ingreso: junio-2010
Ubicación: Lima, Perú
Mensajes: 5
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Diferencia entre class y id???

un ejemplo practico:

.perros{
tamaño: x;
color: y;
pelaje: z;
}

.perro #fido{
tamaño: a;
pelaje: b;
}

fido sigue siendo color y

Esto marca error

.perros #fido #laica{
tamaño: x;
color: y;
pelaje: z;
}

Nota: simplemente es ilógico, no funcionara. como le vaz asignar a laica los valores de fido, si ambos son unicos.
  #16 (permalink)  
Antiguo 05/02/2013, 21:59
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Diferencia entre class y id???

Hola enkee, creo que después de 8 años ya debe tener más que clara la diferencia.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
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 18:09.