Clase VS ID | Explicado

Se agregan elementos al archivo HTML para crear una página web. Sin embargo, para la manipulación o el estilo de los elementos requeridos, es esencial acceder a ellos primero. Para el propósito correspondiente, se puede agregar una identificación o clase al definir el HTML. Esta identificación o clase se puede utilizar más tarde para las operaciones mencionadas.

Los resultados de aprendizaje de esta publicación son:

• ¿Qué es el atributo de clase??
• Cómo agregar atributos de clase a los elementos HTML?
• Cómo diseñar atributo de clase con CSS?
• Cómo usar el atributo de clase con múltiples nombres?
• ¿Cuál es el atributo de identificación??
• Cómo estilo atributo de identificación?
• Diferencia entre los atributos de clase y identificación

¿Qué es el atributo de clase??

En HTML, el "claseEl atributo se especifica con los elementos. El atributo de clase puede identificar uno o más nombres de clases para un elemento HTML. Además, el mismo nombre de clase se puede asignar a diferentes elementos HTML. Como resultado, el código CSS y JavaScript accede a estos nombres de clase para aplicar diferentes funciones.

Cómo agregar el atributo de clase a los elementos HTML?

Primero, agregue/cree un elemento Div con el nombre de la clase "principal"En el archivo HTML. Agregar

y

Etiquetas para incluir algo de contenido dentro de este elemento. Además, ambas etiquetas tienen el mismo atributo de clase "texto":

Bienvenido a Linuxhint!

Sitio web del mejor tutorial

El código mencionado anteriormente hará dos divisiones en la página web. Para distinguirlos, aplicemos algunas propiedades de CSS.

Cómo diseñar atributo de clase con CSS?

La siguiente sección demuestra las propiedades de estilo aplicadas a las clases anteriores.

Especificar el selector de clases

El "."Símbolo en CSS antes de que cada nombre de clase se conoce como el"selector de clases". El nombre de clase seguido de este símbolo se usa para acceder a la clase.

Estilo principal Div

.principal
Ancho: 500px;
Altura: 300px;
borde: 7px Solid #379237;
margen: 15px automático;
Color de fondo: #A0E66B;

El elemento divir con el nombre de la clase "principal"Está diseñado con propiedades que se describen a continuación:

• "ancho"La propiedad establece el ancho del elemento.
• "altura"La propiedad establece la altura del elemento.
• "bordeLa propiedad se utiliza para establecer el borde con el valor que especifica el ancho, el tipo de borde y el color del borde.
• "margen"Propiedad establece/ajusta los espacios alrededor del Div.
• "color de fondoLa propiedad se utiliza para establecer el color de fondo del elemento.

Se puede ver que el Div con el nombre de la clase "principal"Tiene éxito con éxito. El "clase"El texto aún no tiene el estilo:

Clase de texto de estilo

.texto
Text-Align: Center;
tamaño de fuente: 40px;
color morado;

El texto de la clase del

y

Las etiquetas se diseñan proporcionando el código anterior. La descripción del código anterior se enumera a continuación:

• "texto alineado"La propiedad establece la alineación del texto del elemento.
• "tamaño de fuente"La propiedad establece el tamaño de fuente del elemento.
• "colorLa propiedad se utiliza para aplicar el color al texto del elemento.

Ahora, los elementos relacionados con ambas clases se han diseñado con éxito:

Cómo usar el atributo de clase con múltiples nombres?

Supongamos que queremos agregar dos párrafos. Uno con el color naranja y el otro con negro simple. Ambos deben tener las mismas propiedades de estilo, excepto el color.

Para hacerlo, en el archivo HTML, primero, cree un elemento Div con el nombre de la clase "principal". Entonces, dentro de este Div agregue dos

Etiquetas con atributos de clase. La primera

La etiqueta está asociada con ambas clases. El otro

La etiqueta se asigna con la clase "texto" solo:

"El éxito es mejor cuando se comparte"

Citas de éxito

Texto de clase de estilo

.texto
Text-Align: Center;
tamaño de fuente: 40px;
Font-Weight: Bold;
Top-top: 20px;

El "texto"La clase tiene el estilo de las propiedades que se describen a continuación:

• "texto alineado"Propiedad con el valor"centro"Establece la alineación del texto en el centro.
• "tamaño de fuenteSe utiliza la propiedad para especificar el tamaño de fuente del elemento.
• "pescado"Con el valor"atrevido"Hará que el texto sea en negrita.
• "acolchado superiorSe utiliza la propiedad para especificar el espacio en la parte superior del contenido del elemento.

Clase de estilo para

.para
Color: #DC5F00;

El nombre de la segunda clase para solo se le da color de propiedad de estilo con valor #DC5F00.

Veamos cuál es el resultado del código HTML anterior:

Se puede observar que las propiedades especificadas en la clase de texto se aplican a ambos elementos. Pero como también hemos asignado la clase PARA al primer elemento P, la propiedad de color del primero ha cambiado.

¿Qué es el atributo de identificación??

El "identificaciónEl atributo debe ser exclusivo de cada elemento en un elemento HTML completo. Este atributo es utilizado por CSS y JavaScript para ejecutar diferentes acciones. No podemos usar múltiples nombres de identificación para un elemento.

Html

En el archivo HTML, agregue dos

Etiquetas con algún texto. La primera

La etiqueta se llama ID como "paraca":

Bienvenido a Linuxhint!

Sitio web del mejor tutorial

Cómo estilo atributo de identificación?

La siguiente sección demuestra las propiedades de estilo aplicadas al atributo de identificación anterior.

Selector de identificación

En HTML, el "#"El signo también se conoce como el"Selector de identificación". El nombre de ID seguido de este símbolo se usa para acceder al elemento con esta identificación.

Estilo para identificación

#para
Text-Align: Center;
tamaño de fuente: 40px;
color morado;

El elemento con el nombre "paraca"Tiene el estilo de las propiedades que se describen a continuación:

• "texto alineado"La propiedad hace que el centro de texto se alinee.
• "tamaño de fuente"La propiedad ajusta el tamaño del texto.
• "color"La propiedad gira el color del texto púrpura.

Producción

Clase VS ID

Aquí está la lista de diferencias clave entre los atributos de clase y ID:

atributo de identificación	atributo de clase
El atributo de identificación debe ser único para cada elemento en HTML.	Una clase se puede aplicar a más de un elemento HTML.
Un atributo de identificación se puede adjuntar a un elemento.	Podemos unir múltiples selectores de clase a un elemento.
En CSS, para aplicar estilos a la identificación, el "#Se utiliza el símbolo seguido del nombre de la identificación.	En CSS, para diseñar una clase que usamos "."Seguido del nombre de la clase para acceder a la clase específica.
Sintaxis: #identificación // declaraciones CSS	Sintaxis: .clase // declaraciones CSS

Comparamos las diferencias entre la clase y los atributos de identificación.

Conclusión

En HTML, el atributo de clase puede contener múltiples nombres de clase. El atributo de identificación no puede contener múltiples nombres. Debe ser único en un documento HTML completo. Sin embargo, ambos atributos se utilizan para acceder a los elementos HTML relevantes. Este blog ha explicado la diferencia entre la identificación y los atributos de clase con ejemplos.