Para evitar la repetición de código, usamos múltiples clases en HTML y CSS. Con CSS, también podemos definir y diseñar ambas clases juntas y usar varias clases en un elemento asignándoles diferentes ID de clase. Este enfoque se puede seguir utilizando la sintaxis separada por espacios para agregar varias clases a un elemento HTML.
En este artículo, aprenderemos cómo agregar múltiples 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á separado por un espacio.
Debe seguir la siguiente sintaxis para usar varias clases en un elemento:
< clase h1 = 'clase_1 clase_2 clase_3' > entregando... h >
En un solo elemento HTML, puede incluir más de una clase separándolas con un espacio. Para su comodidad, aquí hay un ejemplo.
Ejemplo: uso de varias clases en CSS
En el siguiente ejemplo, crearemos:
- Un encabezado usando la etiqueta
y asignando el nombre de clase “ Bóveda ”.
- A continuación, crearemos otro encabezado y lo asignaremos a dos clases diferentes: “ Bóveda ' y ' línea ”. Estos ID de clase están separados por un espacio:
HTML
h1 >
< h1 clase = 'línea de cabecera' >
Múltiples Clases en un elemento
h1 >
Ahora, pasemos al archivo CSS y apliquemos algunas de las propiedades CSS que se enumeran a continuación:
- Establezca el color de fondo del encabezado usando la función rgb() como ' (69, 51, 151) ”.
- Establecer el estilo de fuente “ itálico ” para el encabezado.
En la clase HTML, el primer encabezado utiliza el nombre de la clase ' Bóveda ”. Entonces, el estilo especificado en la clase especificada se implementará en el primer encabezado:
.Bóveda {
color de fondo: rgb ( 69 , 51 , 151 ) ;
estilo de fuente: cursiva
}
Para el ' línea ” clase, tenemos:
- Establezca el color del encabezado usando la función rgb() como ' (255, 0, 0) ”.
- Aplicar texto-decoración-línea como ' subrayar ”.
El segundo encabezado utilizará los estilos de ambas clases: “ Bóveda ' y ' línea ' clase:
.línea {color: rgb ( 255 , 0 , 0 ) ;
texto-decoración-línea:subrayado;
}
Después de la implementación, verifique el resultado:
A partir de la salida, puede observar que el segundo encabezado utiliza ambas clases de CSS.
Conclusión
Para usar varias clases en un solo elemento, use diferentes identificadores de clase separados por espacios en blanco. Usando esto, podemos aplicar diferentes propiedades CSS a la vez. Nos permite reutilizar la clase donde existen elementos similares. Este artículo explica cómo usar varias clases en un solo elemento y diseñarlo junto con un ejemplo.