HTML <style> -Tag
Beispiel
Verwendung des <style>-Elements, um ein einfaches Stylesheet auf ein HTML-Dokument anzuwenden:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Das <style>Tag wird verwendet, um Stilinformationen (CSS) für ein Dokument zu definieren.
Innerhalb des <style>Elements geben Sie an, wie HTML-Elemente in einem Browser dargestellt werden sollen.
Tipps und Hinweise
Hinweis: Wenn ein Browser ein Stylesheet liest, formatiert er das HTML-Dokument gemäß den Informationen im Stylesheet. Wenn einige Eigenschaften für denselben Selektor (Element) in verschiedenen Stylesheets definiert wurden, wird der Wert aus dem zuletzt gelesenen Stylesheet verwendet (siehe Beispiel unten)!
Tipp: Um auf ein externes Stylesheet zu verlinken, verwenden Sie das <link> -Tag.
Tipp: Um mehr über Stylesheets zu erfahren, lesen Sie bitte unser CSS-Tutorial .
Browser-Unterstützung
| Element | |||||
|---|---|---|---|---|---|
| <style> | Yes | Yes | Yes | Yes | Yes |
Attribute
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Specifies what media/device the media resource is optimized for |
| type | text/css | Specifies the media type of the <style> tag |
Globale Attribute
Das <style>Tag unterstützt auch die globalen Attribute in HTML .
Ereignisattribute
Das <style>Tag unterstützt auch die Ereignisattribute in HTML .
Mehr Beispiele
Beispiel
Mehrere Stile für dieselben Elemente:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
<style>
h1 {color:green;}
p {color:pink;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This
is a paragraph.</p>
</body>
</html>
Verwandte Seiten
HTML-Tutorial: HTML-CSS
CSS-Tutorial: CSS-Tutorial
HTML-DOM-Referenz: Style-Objekt
Standard-CSS-Einstellungen
Die meisten Browser zeigen das <style>Element mit den folgenden Standardwerten an:
style {
display: none;
}