name - que es class en html
¿Cuál es la diferencia entre una identificación y una clase? (14)
¿Cuál es la diferencia entre <div class=""> y <div id=""> cuando se trata de CSS? ¿Está bien usar <div id=""> ?
Veo a diferentes desarrolladores haciendo esto de dos maneras, y como soy autodidacta, nunca lo he descubierto.
Dónde usar una identificación frente a una clase
La simple diferencia entre los dos es que si bien una clase puede usarse repetidamente en una página, una identificación solo debe usarse una vez por página. Por lo tanto, es apropiado usar una ID en el elemento div que está marcando el contenido principal en la página, ya que solo habrá una sección de contenido principal. En contraste, debe usar una clase para configurar colores de fila alternativos en una tabla, ya que, por definición, se usarán más de una vez.
Las identificaciones son una herramienta increíblemente poderosa. Un elemento con una ID puede ser el objetivo de una pieza de JavaScript que manipula el elemento o su contenido de alguna manera. El atributo ID se puede usar como destino de un enlace interno, reemplazando las etiquetas de anclaje con atributos de nombre. Finalmente, si hace que sus identificaciones sean claras y lógicas, pueden servir como una especie de "auto documentación" dentro del documento. Por ejemplo, no es necesario que agregue un comentario antes de un bloque que indique que un bloque de código contendrá el contenido principal si la etiqueta de apertura del bloque tiene una ID de, por ejemplo, "principal", "encabezado", "pie de página" ", etc.
1) div id no es reutilizable y solo debe aplicarse a un elemento de HTML, mientras que div class puede agregarse a múltiples elementos.
2) Una identificación tiene mayor importancia si ambas se aplican al mismo elemento y tienen estilos en conflicto, se aplicarán los estilos de la identificación.
3) El elemento de estilo siempre refiere una clase div poniendo un. (punto) delante de sus nombres, mientras que la clase div id se refiere al poner un # (hash) delante de sus nombres.
4) Ejemplo: -
clase en la declaración
<style>-.red-background { background-color: red; }.red-background { background-color: red; }Identificación en la declaración
<style>-#blue-background {background-color: blue;}
<div class="red-background" id="blue-background">Hello</div>Aquí el fondo estará en color azul
CSS está orientado a objetos. ID dice instancia, clase dice clase.
Cualquier elemento puede tener una clase o un id.
Una clase se usa para hacer referencia a cierto tipo de visualización, por ejemplo, puede tener una clase css para un div que representa la respuesta a esta pregunta. Como habrá muchas respuestas, múltiples divs necesitarían el mismo estilo y usarías una clase.
Un id se refiere a un solo elemento, por ejemplo, la sección relacionada a la derecha puede tener un estilo específico que no se haya reutilizado en otro lugar, usaría un id.
Técnicamente, puedes usar clases para todo esto, o dividirlas lógicamente. Sin embargo, no puede reutilizar los ID de varios elementos.
Cuando aplique CSS, aplíquelo a una clase e intente evitar tanto como pueda a un ID. La ID solo debe usarse en JavaScript para obtener el elemento o para cualquier enlace de evento.
Las clases se deben utilizar para aplicar CSS.
A veces tienes que usar clases para vincular eventos. En tales casos, intente evitar las clases que se utilizan para aplicar CSS y, en su lugar, agregue nuevas clases que no tengan CSS correspondiente. Esto vendrá a ayudar cuando necesite cambiar el CSS para cualquier clase o cambiar el nombre de la clase CSS todos juntos para cualquier elemento.
Debe utilizarse una CLASE para los múltiples elementos para los que desea el mismo estilo. Una identificación debe ser para un elemento único. Ver este tutorial .
Debe consultar los estándares de W3C si desea ser un estricto conformista, o si desea que sus páginas sean validated a los estándares.
El espacio del selector CSS realmente permite el estilo de identificación condicional:
h1#my-id {color:red}
p#my-id {color:blue}
se procesará como se espera. ¿Por qué harías esto? A veces, las identificaciones se generan dinámicamente, etc. Otro uso ha sido el de hacer títulos de manera diferente en función de una asignación de ID de alto nivel:
body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}
Personalmente, prefiero los selectores de nombre de clase más largos:
body#list-page .title-block > h1 {font-size:56px}
Me parece que usar IDs anidadas para diferenciar el tratamiento es un poco perverso. Solo sepan que a medida que los desarrolladores en el mundo Sass / SCSS ponen manos a la obra, los ID anidados se están convirtiendo en la norma.
Finalmente, cuando se trata del selector de desempeño y prioridad, ID tiende a ganar. Este es un tema completamente distinto.
En ID de desarrollo avanzado s básicamente podemos usar JavaScript.
Para propósitos repetibles, las clases son útiles en contra de las identificaciones que se supone que son únicas.
A continuación se muestra un ejemplo que ilustra las expresiones anteriores:
<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>
Ahora puede ver aquí el box y box son dos (2) elementos <div> diferentes, pero podemos aplicar las clases box y bg-color-red a ambos.
El concepto es herencia en un lenguaje OOP .
La clase es para aplicar su estilo a un grupo de elementos. Los estilos de ID se aplican solo al elemento con ese ID (solo debe haber uno). Por lo general, usas clases, pero si hay una única, puedes usar ID (o simplemente pegar el estilo directamente en el elemento).
Las clases son como las categorías. Muchos elementos HTML pueden pertenecer a una clase, y un elemento HTML puede tener más de una clase. Las clases se utilizan para aplicar estilos generales o estilos que se pueden aplicar a través de múltiples elementos HTML.
Las identificaciones son identificadores. Son únicos; nadie más tiene permitido tener la misma identificación. Los ID se utilizan para aplicar estilos únicos a un elemento HTML.
Uso ID y clases de esta manera:
<div id="header">
<h1>I am a header!</h1>
<p>I am subtext for a header!</p>
</div>
<div id="content">
<div class="section">
<p>I am a section!</p>
</div>
<div class="section special">
<p>I am a section!</p>
</div>
<div class="section">
<p>I am a section!</p>
</div>
</div>
En este ejemplo, las secciones de encabezado y contenido se pueden diseñar mediante #header y #content. Cada sección del contenido se puede aplicar a un estilo común a través de #content .section. Sólo por diversión, agregué una clase "especial" para la sección central. Supongamos que quieres que una sección en particular tenga un estilo especial. Esto se puede lograr con la clase .special, sin embargo, la sección aún hereda los estilos comunes de #content .section.
Cuando realizo el desarrollo de JavaScript o CSS, normalmente utilizo ID para acceder / manipular un elemento HTML muy específico, y uso clases para acceder / aplicar estilos a una amplia gama de elementos.
Las identificaciones son únicas. Las clases no lo son. Los elementos también pueden tener múltiples clases. También las clases se pueden agregar y eliminar dinámicamente a un elemento.
En cualquier lugar donde pueda usar una identificación, podría usar una clase. Lo opuesto no es verdad.
La convención parece ser usar ID para los elementos de la página que están en cada página (como "barra de navegación" o "menú") y clases para todo lo demás, pero esto es solo una convención y encontrará una gran variedad de usos.
Otra diferencia es que para los elementos de entrada de formulario, el elemento <label> referencia a un campo por ID, por lo que necesita usar ID si va a usar <label> . Es una cosa de accesibilidad y realmente deberías usarla.
En años pasados, también se preferían las identificaciones porque son fácilmente accesibles en Javascript (getElementById). Con el advenimiento de jQuery y otros marcos de JavaScript, esto ya no es un problema.
Quizás una analogía ayude a entender la diferencia:
<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />
Las tarjetas de identificación de los estudiantes son distintas. No hay dos estudiantes en el campus que tengan la misma tarjeta de identificación de estudiante. Sin embargo, muchos estudiantes pueden y compartirán al menos una clase entre ellos.
Está bien poner a varios estudiantes bajo un título de Clase , como Biología. Pero nunca es aceptable poner a varios estudiantes bajo una identificación de estudiante.
Al dar reglas sobre el sistema de intercomunicación de la escuela, puede dar reglas a una clase :
"Mañana, todos los estudiantes deben usar una camisa roja para la clase de biología".
.Biology {
color: red;
}
O puede dar reglas a un estudiante específico, llamando a su ID única:
"Jonathan Sampson llevará una camisa verde mañana".
#JonathanSampson {
color: green;
}
En este caso, Jonathan Sampson está recibiendo dos órdenes: una como estudiante en la clase de Biología y otra como un requisito directo. Debido a que a Jonathan se le dijo directamente, a través del atributo id, que usara una camisa verde, ignorará la solicitud anterior de usar una camisa roja.
Los selectores más específicos ganan.
Una identificación debe ser única en toda la página.
Una clase puede aplicarse a muchos elementos.
A veces, es una buena idea usar ids.
En una página, normalmente tienes un pie de página, un encabezado ...
Entonces el pie de página puede estar en un div con una identificación
<div id = "footer" class = "...">
y todavia tengo una clase
ids deben ser únicos, ya que la class se puede aplicar a muchas cosas. En CSS, las id ven como #elementID y class elementos de class ven como .someClass
En general, use id cuando quiera referirse a un elemento y class específicos cuando tenga una cantidad de cosas que sean todas iguales. Por ejemplo, los elementos de id comunes son cosas como header , footer , sidebar . Los elementos de class comunes son cosas como highlight o external-link .
Es una buena idea leer en la cascada y comprender la prioridad asignada a varios selectores: http://www.w3.org/TR/CSS2/cascade.html
Sin embargo, la prioridad más básica que debe comprender es que los selectores de id tienen prioridad sobre class selectores de class . Si tuvieras esto:
<p id="intro" class="foo">Hello!</p>
y:
#intro { color: red }
.foo { color: blue }
El texto sería rojo porque el selector de id tiene prioridad sobre el selector de class .