Heim > Artikel > Web-Frontend > Verwendung mehrerer CSS-Klassen für ein Element in HTML

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

WBOYnach vorne: 2023-09-09 08:45:03824Durchsuche

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

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>

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>

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!

JavaScript css html using class

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Teil eins: So erstellen Sie ein benutzerdefiniertes Plugin in OpenCart 2.1.x.xNächster Artikel：Teil eins: So erstellen Sie ein benutzerdefiniertes Plugin in OpenCart 2.1.x.x

In Verbindung stehende Artikel

Mehr sehen