Per evitar la repetició de codi, utilitzem diverses classes en HTML i CSS. Amb CSS, també podem definir i estilitzar les dues classes juntes i utilitzar diverses classes en un element assignant-los diferents identificadors de classe. Aquest enfocament es pot seguir utilitzant la sintaxi separada per espais per afegir diverses classes a un element HTML.
En aquest article, aprendrem a afegir diverses classes a un element.
Com utilitzar diverses classes en CSS?
Per utilitzar dues o més classes en un element, cada identificador de classe estarà separat per un espai.
Heu de seguir la sintaxi següent per utilitzar diverses classes en un element:
< classe h1 = 'classe_1 classe_2 classe_3' > lliurament... h >
En un sol element HTML, podeu incloure més d'una classe separant-les amb un espai. Per a la vostra comoditat, aquí teniu un exemple.
Exemple: Ús de diverses classes en CSS
En l'exemple següent, crearem:
- Un encapçalament amb l'etiqueta
i assignar el nom de la classe ' encapçalament ”.
- A continuació, crearem un altre encapçalament i l'assignarem a dues classes diferents: ' encapçalament ' i ' línia ”. Aquests identificadors de classe estan separats per un espai:
HTML
h1 >
< h1 classe = 'línia d'encapçalament' >
Classes múltiples en Un element
h1 >
Ara, passem al fitxer CSS i apliquem algunes propietats CSS que s'indiquen a continuació:
- Estableix el color de fons a l'encapçalament utilitzant la funció rgb() com a ' (69, 51, 151) ”.
- Estableix l'estil de lletra ' cursiva ” per a l'encapçalament.
A la classe HTML, el primer encapçalament utilitza el nom de la classe ' encapçalament ”. Per tant, l'estil especificat a la classe especificada s'implementarà al primer encapçalament:
.encapçalament {
color de fons: rgb ( 69 , 51 , 151 ) ;
estil de lletra: cursiva
}
Per al ' línia ” classe, tenim:
- Estableix el color de l'encapçalament amb la funció rgb() com a ' (255, 0, 0) ”.
- Aplica la línia de decoració de text com a ' subratllar ”.
El segon encapçalament utilitzarà els estils d'ambdues classes: ' encapçalament ' i ' línia ” classe:
.línia {color: rgb ( 255 , 0 , 0 ) ;
text-decoration-line:subratllat;
}
Després de la implementació, comproveu el resultat:
A la sortida, podeu observar que el segon encapçalament utilitza les dues classes CSS.
Conclusió
Per utilitzar diverses classes en un sol element, utilitzeu identificadors de classe diferents separats per espais en blanc. Amb això, podem aplicar diferents propietats CSS alhora. Ens permet reutilitzar la classe on existeixen elements similars. Aquest article va explicar com utilitzar diverses classes en un sol element i estilitzar-lo juntament amb un exemple.