Verwendung mehrerer CSS-Klassen für ein Element in HTML-HTML-Tutorial-php.cn

Verwendung mehrerer CSS-Klassen für ein Element in HTML

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Freigeben： 2023-09-09 08:45:03

nach vorne

874 Leute haben es durchsucht

Verwendung mehrerer CSS-Klassen für ein Element in HTML

Um CSS schneller zu erstellen, können wir einem einzelnen HTML-Element mehrere Klassen zuweisen und jede Klasse separat formatieren. Dieser Ansatz ermöglicht es uns, Redundanz in der Stilanwendung zu verwalten. Wir können gemeinsame Stile auf viele Klassen und kategoriespezifische Stile auf bestimmte Kategorien anwenden.

Grammatik

<tag_name class="class_1 class_2">

Nach dem Login kopieren

Beispiel

Im folgenden Beispiel verwenden wir den Stil der Klasse „Varma“, um ihn auf zwei Absätze anzuwenden, und auf den zweiten Absatz wird der Stil der zweiten Klasse varma1 angewendet.

<!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>

Nach dem Login kopieren

Die Ergebnisse werden nach der Ausführung des obigen Skripts generiert. Es handelt sich um eine Kombination aus dem Text „Willkommen bei Tutorialspoint“ mit zwei CSS-Stilen und dem Text „Hallo alle“ mit einem einzigen CSS-Stil.

Beispiel: Verwendung von Javascript

Im folgenden Beispiel fügen wir einem einzelnen Text zwei Stile hinzu, indem wir den Stil .bg-blue und den Stil .text-white deklarieren.

<!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>

Nach dem Login kopieren

Bei der Ausführung generiert das Skript eine Textausgabe mit zwei angewendeten CSS-Stilen: „Willkommen beim Tutorial Point“.

Das obige ist der detaillierte Inhalt vonVerwendung mehrerer CSS-Klassen für ein Element in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!