Maison >interface Web >tutoriel HTML >Utiliser plusieurs classes CSS pour un élément en HTML

Utiliser plusieurs classes CSS pour un élément en HTML

WBOYavant: 2023-09-09 08:45:03846parcourir

Pour créer du CSS plus rapidement, nous pouvons attribuer plusieurs classes à un seul élément HTML et styliser chaque classe séparément. Cette approche nous permet de gérer la redondance dans le style applicatif. Nous pouvons appliquer des styles communs à de nombreuses classes et des styles spécifiques à une catégorie à des catégories spécifiques.

Grammaire

<tag_name class="class_1 class_2">

Exemple

Dans l'exemple ci-dessous, nous utilisons le style de classe « Varma » pour l'appliquer à deux paragraphes, et le deuxième paragraphe a le style de seconde classe varma1 appliqué.

<!DOCTYPE html>
<html>
   <style>
      .varma {
         font-size: larger;
         margin-bottom: 35px;
         background-color: lightgreen;
      }
      .varma1 {
         color: red;
      }
   </style>
<body>
   <p class="varma">
      Hello Everyone.
   </p>
   <p class="varma varma1">
      Welcome to Turorialspoint.
   </p>
</body>
</html>

Les résultats seront générés après l'exécution du script ci-dessus. Il s'agit d'une combinaison du texte "Bienvenue sur tutorielspoint" avec deux styles CSS et du texte "Bonjour à tous" avec un seul style CSS.

Exemple : Utilisation de javascript

Dans l'exemple suivant, nous ajoutons deux styles à un seul texte en déclarant le style .bg-blue et le style .text-white.

<!DOCTYPE html>
<html>
   <style>
      .bg-blue {
         background-color: lightgreen;
      }
      .text-white {
         color: red;
      }
   </style>
<body>
   <div id="varma">Welcome To Tutorialspoint</div>
   <script>
      const box = document.getElementById('varma');
      box.classList.add('bg-blue', 'text-white');
   </script>
</body>
</html>

Une fois exécuté, le script génère une sortie texte avec deux styles CSS appliqués : "Bienvenue dans Tutorial Point".

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html using class

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Première partie : Comment créer un plugin personnalisé dans OpenCart 2.1.x.xArticle suivant：Première partie : Comment créer un plugin personnalisé dans OpenCart 2.1.x.x

Articles Liés

Voir plus