Heim > Artikel > Web-Frontend > Wie können wir verschiedene CSS-Klassen in HTML verwenden?
Wie können wir verschiedene CSS-Klassen in HTML verwenden?
- 王林nach vorne
- 2023-09-15 15:41:121448Durchsuche
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
Elemente, deren Klassenattribut auf Schwarz gesetzt ist, Inhalte in Schwarz.
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.
Beispiel 1
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 vonBeispiel 2
lautet:Beispiel 2
Im 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 vonBeispiel 3
lautet:Beispiel 3
Nehmen wir das folgende Beispiel, in dem wir drei Elemente mit unterschiedlichen Werten des Klassenattributs haben. Zwei Elemente werden auf der Grundlage der Stildefinition im Head-Tag gleichermaßen gestaltet, während das andere Element auf der Grundlage der Stildefinition im Head-Tag gestaltet wird<!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 vonBeispiel 4
lautet:Beispiel 4
Ein 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>
Beispiel 5
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!