Wir verwenden das Attribut class, um eine Klasse für ein HTML-Element anzugeben.
Mehrere HTML-Elemente können dieselbe Klasse teilen. Mithilfe verschiedener Eigenschaften der Klasse, wie z. B. Ändern von Farbe, Schriftart usw., können wir Stilregeln für diese HTML-Elemente definieren. Elemente mit dieser Klasse werden gemäß den definierten Regeln formatiert. Dies wird als Klassenselektor bezeichnet.
Um ein Element mit einer bestimmten Klasse auszuwählen, müssen Sie einen Punkt (.) gefolgt vom Namen der Klasse schreiben. Schauen wir uns zum Beispiel die Klasse „.black“ an,
.black {
color: #000000;
}
Für jedes Element in unserem Dokument, dessen Klassenattribut auf Schwarz gesetzt ist, rendern Sie den Inhalt in Schwarz. Beispielsweise rendern nur
h3.black {
color: #000000;
}
Wir verwenden das Klassenattribut, um auf den Klassennamen im Stylesheet zu verweisen. JavaScript kann damit auch auf Elemente mit bestimmten Klassennamen zugreifen.
Im Folgenden sehen Sie ein Beispiel, in dem wir zwei Elemente mit demselben Wert für ihr Klassenattribut haben. Alle Elemente werden basierend auf der Stildefinition im Head-Tag identisch gestaltet.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="meta tag in the web document">
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="lokesh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.information,ol {
border: 2px solid black;
margin: 20px;
padding: 20px;
}
ol{
background-color: darkgoldenrod;
}
</style>
</head>
<body>
<div class="information">
<h2>Jason</h2>
<ol>
<li>Bachelor's of Engineering</li>
<li>IT stream</li>
<li>section -A</li>
</ol>
</div>
<div class="information">
<h2>Abdul</h2>
<ol>
<li>Bachelor's of Engineering</li>
<li>IT stream</li>
<li>section -B</li>
</ol>
</div>
</body>
</html>
Das Folgende ist die Ausgabe des obigen Beispielprogramms.
Die chinesische Übersetzung vonIm Folgenden finden Sie ein Beispiel, in dem wir zwei Elemente mit unterschiedlichen Werten für ihr Klassenattribut haben. Beide Elemente werden basierend auf der Stildefinition im Head-Tag gestaltet.
Um mehrere Klassen zu definieren, trennen Sie die Klassennamen durch Leerzeichen. Das Element wird entsprechend der angegebenen Klasse gestaltet.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="meta tag in the web document">
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="lokesh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.room {
font-family: monospace;
font-size: 200%;
color: tomato;
text-align: center;
}
.two{
font-family: cursive;
color: lawngreen;
text-align: center;
}
</style>
</head>
<body>
<p class="room">Meta tag contents are not visible on your browser.</p>
<p class="room two"> The mata tag is added inside the head tag.</p>
</body>
</html>
Um mehrere Klassen zu definieren, trennen Sie die Klassennamen durch Leerzeichen oder geben Sie unterschiedliche Werte an. Das Element wird entsprechend der angegebenen Klasse gestaltet.
Die chinesische Übersetzung von<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="meta tag in the web document">
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="lokesh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.information,ol {
border: 2px solid black;
margin: 20px;
padding: 20px;
}
.computerscience,ul {
border: 2px solid black;
margin: 20px;
padding: 20px;
}
ol{
background-color: brown;
}
ul{
background-color: tomato;
}
</style>
</head>
<body>
<div class="information">
<h2>Jason</h2>
<ol>
<li>Bachelor's of Engineering</li>
<li>IT stream</li>
<li>section -A</li>
</ol>
</div>
<div class="information">
<h2>Abdul</h2>
<ol>
<li>Bachelor's of Engineering</li>
<li>IT stream</li>
<li>section -B</li>
</ol>
</div>
<div class="computerscience">
<h2>Satya</h2>
<ul>
<li>Bachelor's of Engineering</li>
<li>Cse stream</li>
<li>section -A</li>
</ul>
</div>
</body>
</html>
Das Folgende ist die Ausgabe des obigen Beispielprogramms.
Die chinesische Übersetzung vonEin weiteres Beispiel könnte die Gestaltung des
-Tags sein. Gestalten Sie alle
-Elemente mit class="device" wie folgt
<!DOCTYPE html>
<html>
<head>
<style>
p.device {
background: #000000;
color: #fffffF;
}
</style>
</head>
<body>
<p>This is demo text</p>
<p class="device">Information about devices.</p>
<p>This is demo text</p>
</body>
</html>
Der Etikettenstil kann über mehrere Klassen erstellt werden, nämlich hier über Geräte und Zubehör -
<!DOCTYPE html>
<html>
<head>
<style>
p.device {
background: #000000;
color: #fffffF;
}
p.accessories {
text-align: center;
}
</style>
</head>
<body>
<p class="device accessories">DEVICE DETAILS</p>
<p class="device">Information about devices.</p>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie können wir verschiedene CSS-Klassen in HTML verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So überprüfen Sie tote Links auf Ihrer Website
Was bedeutet Open-Source-Code?
Einstellungen der Java-Umgebungsvariablen
Welche Verzeichnissuchmaschinen gibt es?
Aktueller Ripple-Preis
So geben Sie das Laufwerk D mit cmd ein
Welche Plattform ist besser für den Handel mit virtuellen Währungen?
Verwendung der Sprintf-Funktion in PHP
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
