HTML-Klassenattribut
Das HTML class-Attribut wird verwendet, um einem Element einen oder mehrere Klassennamen zuzuweisen. In der Regel verweist das class-Attribut auf eine Klasse in einem Stylesheet. Der Klassenname ist case-sensitive.
Dieses Attribut kann auch von JavaScript über das HTML DOM verwendet werden, um bestimmte Änderungen an HTML-Elementen mit einem angegebenen Klassennamen vorzunehmen.
In HTML5 können Sie das class-Attribut für jedes HTML-Element verwenden.
In HTML 4.01 kann das class-Attribut nicht mit den folgenden Elementen verwendet werden: <head>, <html>, <base>, <basefont>, <param>, <style>, <meta>, <script> und <title>.
Auch wenn es keine spezifischen Anforderungen an den Namen von Klassen gibt, ist es besser, Namen zu verwenden, die den semantischen Zweck des Elements beschreiben und nicht dessen Darstellung. Der Name sollte mit einem Buchstaben (a-z oder A-Z), einem Bindestrich (-) oder einem Unterstrich (_) beginnen und kann von Buchstaben, Ziffern (0-9), Unterstrichen und Bindestrichen gefolgt werden.
Syntax
Syntax des HTML-Klassenattributs
<tag class="classname"></tag>Beispiel für das HTML class-Attribut:
Beispiel für das HTML-Klassenattribut
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.red {
color: red;
}
.orange {
color: orange;
}
</style>
</head>
<body>
<h1>Example of the HTML class attribute</h1>
<p class="red">It is some red paragraph.</p>
<p>This is a some text.</p>
<p class="orange">It is some orange paragraph.</p>
</body>
</html>In CSS verwenden Sie ein Punktzeichen (.) gefolgt vom Klassennamen, um Elemente mit einer bestimmten Klasse auszuwählen.
Beispiel für das HTML class-Attribut in Kombination mit CSS:
Beispiel für das HTML-Klassenattribut in Kombination mit CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.title {
background-color: #1c87c9;
color: #ffffff;
padding: 20px;
}
</style>
</head>
<body>
<h1>Example of the class attribute</h1>
<h2 class="title">Heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<h2 class="title">Heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Sie können das class-Attribut auch mit JavaScript manipulieren. Die Eigenschaft classList bietet Methoden zum dynamischen Hinzufügen, Entfernen oder Umschalten von Klassen.
Beispiel für das HTML class-Attribut in Kombination mit JavaScript:
Beispiel für das HTML-Klassenattribut mit JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="demo">Click the button to add a class.</p>
<button onclick="document.getElementById('demo').classList.add('highlight')">Add Class</button>
</body>
</html>HTML-Elemente können auch mehr als einen Klassennamen haben. Jeder muss durch ein Leerzeichen getrennt sein.
Beispiel für das HTML class-Attribut mit mehreren Klassennamen:
Beispiel für das HTML-Klassenattribut mit mehreren Klassennamen
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.title {
background-color: #202131;
color: #dddddd;
padding: 15px 25px;
}
.text-right {
text-align: right;
}
</style>
</head>
<body>
<h1>Example of multiple classes</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title">London</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title text-right">Paris</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title">Tokyo</h2>
</body>
</html>Verschiedene Tags, wie <h2> und <p>, können denselben Klassennamen und denselben Stil haben.
Beispiel für das HTML class-Attribut mit den <h2>- und <p>-Elementen:
Beispiel für das HTML-Klassenattribut
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grey-text {
color: #808080;
}
</style>
</head>
<body>
<h1>Example of the class attribute </h1>
<h2 class="grey-text">Heading</h2>
<p class="grey-text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Praxis
Was ist der Zweck des class-Attributs in HTML?