Class y ID

[joseomaker]

hola,todo diseñador web sabra que son los Class y los ID,pero,saben usarlos apropiadamente?

Eso lo duda,no mas ahi que mirar en el source code de una web para ver algo asi:

Código HTML:

<div id="header">imagen</div>
<br>
<div id="menu">
<p id="1">1</p>
<p id="2">2</p>
<p id="3">3</p>
</div>
<div id="contenido">texto</div>
<div id="footer">adios</div>
 

o peor aun:

Código HTML:

<div class="header">imagen</div>
<br>
<div class="menu">
<p class="1">1</p>
<p class="2">2</p>
<p class="3">3</p>
</div>
<div class="contenido">texto</div>
<div class="footer"></div>
 

esos diseñadores,espero que usen un editor visual porque que mal por ellos si tienen que editar una web con un diseño complejo,sufriran por la falta de logica del texto.

es tan facil,veamos:

ID y Class

Cual es la diferencia?,no,no es el numero de caracteres,para saberla vamos a ver los significados de ambas:

ID: nombre
Class: Clase

facil no,pero a algunos no les queda claro aun la diferencia,asi que,veamos los significados:

Nombre: nombre es la designación o denominación verbal (las denominaciones no verbales las estudian la iconología y la iconografía) que se le da a una persona, animal, cosa o concepto tangible o intangible, concreto o abstracto, para distinguirlo de otros.

Clase: Las clases son declaraciones o abstracciones de objetos, lo que significa, que una clase es la definición de un objeto. Cuando se programa un objeto y se definen sus características y funcionalidades, realmente se programa una clase.

Entonces,usemos cada uno para lo que sirve.

los codigos anteriores estaban mal,porque?,pues comparen este con los anteriores:

Código HTML:

<div class="header">imagen</div>
<br>
<div class="menu">
<p id="1">1</p>
<p id="2">2</p>
<p id="3">3</p>
</div>
<div class="contenido">texto</div>
<div class="footer">adios</div>
 

A que esta mas entendible,pues aca se los dejo de reflexion,hagamos mas legible el codigo de nuestros proyectos

Saludos.

[Carlangueitor]

Pues no tu código también es incorrecto, no va haber dos header ni dos footer, en ese caso es cuando se utiliza un ID único.

Un ID se utiliza en elementos únicos, que no se van a repetir, para los elementos que tienen un estilo común se les asigna una clase. Tampoco se debe usar números en el primer carácter de una clase o id.

También tienes errores semánticos, los menús y navegaciones se hacen con listas desordenadas, y quedaría así:

Código HTML:

<div id="header"></div>
<ul id="menu">
<li id="m1">1</li>
<li id="m2">2</li>
<li id="m3">3</li>
<ul>
<div id="contenido"></div>
<div id="footer"></div>
 

Aunque no siempre es necesario que todos los elementos de una lista tengan que tener algún identificador.

Saludos

[Daniel Ulczyk]

Tema movido desde el foro de Accesibilidad y Usabilidad

[XxflezhaxX]

Dios mio.
Creo que este tema esta traiendo un poco de confusion.

Yo no se que decir.

da lo mismo ponerle a 10 valores ID="trate" y a 8 valores class="conmic"

y en el CSS poner #trate y los atributos para esas dichas 10 cosas y poner .conmic y lo atributos a esos 8 valores con clase conmic.

no le veo importancia a esto, espero que me contradigan y me digan el por que, para poder entender =D

[emprear]

Nombre: nombre es la designación o denominación verbal (las denominaciones no verbales las estudian la iconología y la iconografía) que se le da a una persona, animal, cosa o concepto tangible o intangible, concreto o abstracto, para distinguirlo de otros.

Clase: Las clases son declaraciones o abstracciones de objetos, lo que significa, que una clase es la definición de un objeto. Cuando se programa un objeto y se definen sus características y funcionalidades, realmente se programa una clase.

Que buena la lección de semántica, y yo perdiendo el tiempo con CSS3

[joseomaker]

Iniciado por emprear

Que buena la lección de semántica, y yo perdiendo el tiempo con CSS3

A pues,eso lo saque de wikipedia XD

[zerokilled]

disculpa si a alguien le ofende... a decir verdad, yo no se si el tema es un chiste o que. de todos modos la siguiente definición no aplica aquí ya que se refiere a programación basada en clases.

Clase: Las clases son declaraciones o abstracciones de objetos, lo que significa, que una clase es la definición de un objeto. Cuando se programa un objeto y se definen sus características y funcionalidades, realmente se programa una clase.

compara dicha definición de la wikipedia con la provista en w3schools.

[joseomaker]

Iniciado por zerokilled

disculpa si a alguien le ofende... a decir verdad, yo no se si el tema es un chiste o que. de todos modos la siguiente definición no aplica aquí ya que se refiere a programación basada en clases.

compara dicha definición de la wikipedia con la provista en w3schools.

no es un chiste y no es de programacion orientada a clases,es en general.

y como algunos no entendieron dije que lo podian encontrar,es decir que no es el codigo entero......

[Daniel Ulczyk]

Iniciado por joseomaker

y como algunos no entendieron dije que lo podian encontrar,es decir que no es el codigo entero

Hay que marcar bien la diferencia porque traer a cuento una entrada de Wikipedia que habla sobre programación y entender que HTML es también programación es trazar—por cierto—un círculo muy amplio y meter todo adentro.

Esto se ha dicho ya millón y medio de veces HTML no es un lenguaje de programación

Además joseomaker no comparto el incluir <br> entre DIVs, es un mala práctica > hay que saber separar el contenido de la presentación

[joseomaker]

si,lo se por eso digo que esta mal o.o

[XxflezhaxX]

alguien que lo explique, que a otros usuario e inclusive incluyendome nos pueden confundir.
diria que lo eliminen o que den una respuesta clara =D

[jomaruro]

Hola:

Iniciado por XxflezhaxX

Dios mio.
da lo mismo ponerle a 10 valores ID="trate" y a 8 valores class="conmic"

y en el CSS poner #trate y los atributos para esas dichas 10 cosas y poner .conmic y lo atributos a esos 8 valores con clase conmic.

no le veo importancia a esto, espero que me contradigan y me digan el por que, para poder entender =D

Iniciado por XxflezhaxX

alguien que lo explique, que a otros usuario e inclusive incluyendome nos pueden confundir.
diria que lo eliminen o que den una respuesta clara =D

Si no me equivoco, recientemente te recomendé la lectura de los libros de XHTML y CSS de www.librosweb.es

Para aclararte esta duda léete el capítulo sobre Selectores básicos.

Saludos.

[alexk]

se agradece el esfuerzo... pero no hay que hablar a la ligera... demos respuestas concretas cuando estemos 100% seguros... que es un foro... y muchas personas nuevas en este tema podrian confundirse

PD: Para no liarse mirar el link del #12 por jomaruro

[XxflezhaxX]

Bueno Gracias jomauro.
aprendi algo nuevo, que ahora que lo pieso, anteriormente ya habia tenido problemas con esto, y no sabia a que se debia.

elemento .class elemento1 {CSS}

elemento.class elemento1 {CSS}

elemento, .class, elemento1 {CSS}

el primero indica que, los elementos1 que estan dentro de una class, que a la vez esta dentro de elemento, tendran efecto.

el segundo indica que, los elementos1 que estan dentro de elemento con class tendran efecto.

el tercero indica que, elemento, class y elemento1 (estos 3) tendran efecto.

Gracias por esto, aunque no recuerdo que me hayas recomendado leer dichos libros xD