Para evitar la repetición del código, utilizamos múltiples clases en HTML y CSS. Con CSS, también podemos definir y diseñar ambas clases juntas y usar múltiples clases en un elemento asignándoles diferentes ID de clase. Este enfoque puede seguirse utilizando la sintaxis separada por el espacio para agregar varias clases a un elemento HTML.
En este artículo, aprenderemos cómo agregar varias clases a un elemento.
Cómo usar múltiples clases en CSS?
Para usar dos o más clases en un elemento, cada ID de clase estará separada por un espacio.
Debe seguir la siguiente sintaxis para usar varias clases en un elemento:
entregando ..
En un solo elemento HTML, puede incluir más de una clase separándolos con un espacio. Para su conveniencia, aquí hay un ejemplo.
Ejemplo: Uso de múltiples clases en CSS
En el siguiente ejemplo, crearemos:
Html
Múltiples clases en un elemento
Ahora, pasemos al archivo CSS y apliquemos algunas propiedades de CSS enumeradas a continuación:
En la clase HTML, el primer encabezado utiliza el nombre de la clase "título". Por lo tanto, el estilo especificado en la clase especificada se implementará en el primer encabezado:
.título
Color de fondo: RGB (69, 51, 151);
estilo de fuente: cursiva
Para el "línea"Clase, tenemos:
El segundo encabezado utilizará los estilos de ambas clases: "título" y "línea" clase:
.línea
Color: RGB (255, 0, 0);
TEXT-DECORACIÓN-línea: subrayado;
Después de la implementación, consulte el resultado:
Desde la salida, puede observar que el segundo encabezado utiliza ambas clases de CSS.
Conclusión
Para usar múltiples clases en un solo elemento, use diferentes ID de clase separadas por espacios blancos. Usando esto, podemos aplicar diferentes propiedades de CSS a la vez. Nos permite reutilizar la clase donde existen elementos similares. Este artículo explicó cómo usar múltiples clases en un solo elemento y peinarlo junto con un ejemplo.