Beispiel
Verwenden der class Attribut in einem HTML - Dokument:
<html>
<head>
<style>
h1.intro {
color: blue;
}
p.important {
color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph. :)</p>
</body>
</html>
Versuch es selber " Mehr "Versuchen Sie es selbst" Beispiele unten.
Definition und Verwendung
Die class Attribut gibt eine oder mehrere Klassennamen für ein Element.
Die class - Attribut wird hauptsächlich verwendet , um eine Klasse in einem Stylesheet zu zeigen. Es kann aber auch durch einen JavaScript (über das HTML-DOM) verwendet werden, um Änderungen an HTML-Elemente mit einer bestimmten Klasse.
Browser-Unterstützung
| Attribut | |||||
|---|---|---|---|---|---|
| class | ja | ja | ja | ja | ja |
Unterschiede zwischen HTML 4.01 und HTML5
In HTML5, die class kann Attribut aufeinem beliebigen HTML - Element verwendet werden (es wird auf jedem beliebigen HTML - Element zu validieren. Es ist jedoch nicht unbedingt sinnvoll ist).
In HTML 4.01, die class : kann Attribut nicht verwendet werden <base>, <head>, <html>, <meta>, <param>, <script>, <style> und <title> .
Syntax
<elementclass="classname">
Werte Attribut
| Wert | Beschreibung |
|---|---|
| classname | Gibt eine oder mehrere Klassennamen für ein Element. Um mehrere Klassen angeben, trennen Sie die Klassennamen mit einem Leerzeichen, zB <span class="left important"> . Auf diese Weise können Sie mehrere CSS-Klassen für ein HTML-Element zu kombinieren. Benennungsregeln:
|
Mehr Beispiele
Beispiel
Fügen Sie mehrere Klassen zu einem HTML-Element:
<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
color: blue;
text-align: center;
}
.important {
background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro
important">Header 1</h1>
<p>A paragraph.</p>
</body>
</html> Versuch es selber " Verwandte Seiten
HTML - Tutorial: HTML Attribute
CSS Tutorial: CSS - Selektoren
CSS Referenz: CSS .class Selector
HTML - DOM Referenz: HTML DOM getElementsByClassName() Methode
HTML - DOM Referenz: HTML DOM className Property
HTML - DOM Referenz: HTML DOM classList Property
HTML - DOM Referenz: HTML DOM Style - Objekt