Clases HTML
La clase es un atributo del elemento HTML utilizado para clasificar elementos similares para el estilo. La clase puede contener varias propiedades relacionadas con CSS y JavaScript que se utilizarán para varios elementos HTML. El uso principal de los atributos de clase es agregar las propiedades de la clase de la hoja de estilo a un elemento HTML. Sin embargo, JavaScript también se puede llamar usando el atributo de clase. Este artículo proporciona los siguientes resultados de aprendizaje:
- crear una clase
- Cómo usar una clase en HTML
Cómo crear una clase HTML
Se puede crear una clase HTML utilizando el atributo de clase en los elementos HTML. Las clases se definen para hacer varios grupos que se pueden usar con las mismas propiedades de estilo. La siguiente sintaxis se puede usar para hacer una clase HTML dentro del elemento HTML:
El nombre de la clase es sensible a la caja y, por lo tanto, se usa cuidadosamente. Además, si desea definir múltiples clases para un solo elemento, entonces debe agregar el espacio entre los nombres de las clases.
Ejemplo 1: clase única en un elemento HTML
El siguiente código HTML define un atributo de clase en el
Etiqueta de html.
Bienvenido
Una clase llamada "primaria" se define en el
etiqueta. La imagen del código se proporciona a continuación:
Ejemplo 2: múltiples clases en un solo elemento HTML
El código proporcionado a continuación asocia un elemento HTML único con múltiples clases.
Nota: Al tratar con múltiples clases en un elemento HTML, los nombres de las clases deben estar separados por un espacio, de lo contrario, se consideraría como una sola clase. Además, los nombres de clases están definidos por el usuario, por lo que puede elegir cualquiera de ellos o crear sus propios.
Bienvenido
El valle de la tecnología
El código anterior muestra que el
La etiqueta se asocia con la clase "primaria", mientras que el
La etiqueta tiene dos clases "secundarias" y "terciarias"
La imagen del código se adjunta aquí:
Cómo vincular una clase HTML con CSS
Uno de los propósitos principales de las clases HTML es diseñar los elementos de manera colectiva. Por ejemplo, asociamos algunos elementos HTML con el mismo nombre de clase y definimos propiedades de estilo contra ese nombre de clase. Esos estilos se distribuirían donde sea que se define ese nombre de clase específico. Se pueden seguir los siguientes pasos para usar la clase HTML para hacer estilos:
- Comience una etiqueta
- Use la siguiente sintaxis para vincular la clase con su CSS
El nombre de la clase se refiere a la clase que ha definido en el código HTML y se inicia con DOT como se muestra en la sintaxis anterior y después de eso, las propiedades de estilo se definen en los aparatos ortopédicos rizados.
Ejemplo 3: Uso de una sola clase HTML en CSS
Ilustremos el enlace de una sola clase HTML con CSS. El código escrito a continuación utiliza la clase única con HTML y CSS:
Bienvenido a Linuxhint
- La clase HTML se denomina "nota" en el
etiqueta
- Al llamarlo en la etiqueta, escriba ".Nota ”y luego definió las propiedades de estilo dentro de los aparatos ortopédicos rizados como se puede ver en el código anterior. La siguiente imagen proporciona el código escrito en el editor:
La salida de la página web del código HTML anterior se proporciona a continuación:
Ejemplo 4: Uso de múltiples clases HTML en CSS
Como se discutió en la parte anterior de la guía, las múltiples clases también se pueden usar en un solo elemento HTML. El código proporcionado a continuación práctica dos clases en CSS y luego usarlas en un solo elemento HTML.
Bienvenido a Linuxhint! un proveedor de contenido líder
El código HTML se describe a continuación:
- Las tres clases HTML se usan como "Bod", "Col" y "Fon"
- La clase "BOD" se define en la etiqueta, mientras que el "col" y "fon" se definen en el
etiqueta
Como se usan dos clases en el
etiqueta, por lo tanto, estarían separados por un espacio para que
obtiene las propiedades de ambas clases.
La siguiente imagen muestra el código:
La salida del código en la página web se muestra a continuación:
Conclusión
El atributo de clase HTML se usa para clasificar el elemento HTML. Con la ayuda de las clases HTML, los elementos HTML se pueden diseñar de manera colectiva. Este artículo proporciona una guía descriptiva sobre las clases HTML y cómo están asociados con CSS. Hemos ilustrado varios ejemplos que presentan la creación de clases HTML y los vinculamos con CSS. Se concluye que la integración de las clases HTML con CSS es el beneficio principal de las clases HTML.