La classe est un attribut de l'élément HTML utilisé pour classer les éléments similaires pour le style. La classe peut contenir plusieurs propriétés CSS et JavaScript à utiliser pour divers éléments HTML. L'utilisation principale des attributs de classe est d'ajouter les propriétés de la classe de la feuille de style à un élément HTML. Cependant, JavaScript peut également être appelé en utilisant l'attribut de classe. Cet article fournit les résultats d'apprentissage suivants:
- Créer une classe
- Comment utiliser une classe en HTML
Comment créer une classe HTML
Une classe HTML peut être créée en utilisant l'attribut de classe dans les éléments HTML. Les classes sont définies pour fabriquer plusieurs groupes qui peuvent être utilisés avec les mêmes propriétés de style. La syntaxe suivante peut être utilisée pour créer une classe HTML à l'intérieur de l'élément HTML:
Le nom du cours est sensible à la casse et donc être utilisé avec soin. De plus, si vous souhaitez définir plusieurs classes pour un seul élément, vous devez ajouter l'espace entre les noms des classes.
Exemple 1: classe unique dans un élément HTML
Le code HTML suivant définit un attribut de classe dans le
Tag de HTML.
Accueillir
Une classe nommée «primaire» est définie dans le
étiqueter. L'image du code est fournie ci-dessous:
Exemple 2: plusieurs classes dans un seul élément HTML
Le code fourni ci-dessous associe un seul élément HTML avec plusieurs classes.
Note: Lorsque vous traitez avec plusieurs classes dans un élément HTML, les noms des classes doivent être séparés par un espace sinon il serait considéré comme une classe unique. De plus, les noms de classe sont définis par l'utilisateur afin que vous puissiez en choisir l'un d'eux ou créer le vôtre.
Accueillir
La vallée de la technologie
Le code ci-dessus montre que le
La balise est associée à la classe «primaire» tandis que le
Tag a deux classes «secondaires» et «tertiaires»
L'image du code est jointe ici:
Comment lier une classe HTML avec CSS
L'un des principaux objectifs des classes HTML est de styliser les éléments de manière collective. Par exemple, nous associons quelques éléments HTML avec le même nom de classe et définissons les propriétés de style contre ce nom de classe. Ces styles seraient distribués partout où ce nom de classe spécifique est défini. Les étapes suivantes peuvent être suivies pour utiliser la classe HTML pour fabriquer des styles:
- démarrer une balise
- Utilisez la syntaxe suivante pour lier la classe avec votre CSS
Le nom de classe fait référence à la classe que vous avez définie dans le code HTML et il est démarré avec DOT comme indiqué dans la syntaxe ci-dessus et après cela, les propriétés de style sont définies dans les accolades bouclées.
Exemple 3: Utilisation d'une seule classe HTML dans CSS
Illustrons la liaison d'une seule classe HTML avec CSS. Le code écrit ci-dessous utilise une classe unique avec HTML et CSS:
Bienvenue à Linuxhint
- La classe HTML est nommée «note» dans le
étiqueter
- Lorsque vous l'appelez dans la balise, écrivez ".Remarque »puis a défini les propriétés de style à l'intérieur des accolades bouclées comme on peut le voir dans le code ci-dessus. L'image suivante fournit le code écrit dans l'éditeur:
La sortie de la page Web du code HTML ci-dessus est fournie ci-dessous:
Exemple 4: Utilisation de plusieurs classes HTML dans CSS
Comme indiqué dans la partie précédente du guide, les classes multiples peuvent également être utilisées dans un seul élément HTML. Le code fourni ci-dessous pratique deux classes dans CSS, puis les utilise dans un seul élément HTML.
Bienvenue à Linuxhint! un fournisseur de contenu leader
Le code HTML est décrit ci-dessous:
- Les trois classes HTML sont utilisées nommées «Bod», «Col» et «Fon»
- La classe «Bod» est définie dans TAG tandis que le «col» et le «fon» sont définis dans le
étiqueter
Comme deux classes sont utilisées dans le
tag, donc ils seraient séparés par un espace afin que
obtient les propriétés des deux classes.
L'image suivante montre le code:
La sortie du code sur la page Web est illustrée ci-dessous:
Conclusion
L'attribut de classe HTML est utilisé pour classer l'élément HTML. Avec l'aide de classes HTML, les éléments HTML peuvent être stylisés de manière collective. Cet article fournit un guide descriptif sur les classes HTML et comment ils sont associés à CSS. Nous avons illustré plusieurs exemples qui présentent la création de classes HTML et les liant avec CSS. Il est conclu que l'intégration des classes HTML avec CSS est le principal avantage des classes HTML.