<style>: Das Style Information-Element

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Das <style> HTML-Element enthält Stil-Informationen für ein Dokument oder einen Teil eines Dokuments. Es enthält CSS, das auf den Inhalt des Dokuments angewendet wird, das das <style>-Element enthält.

Probieren Sie es aus

<style> p { color: #26b72b; } code { font-weight: bold; } </style> <p> This text will be green. Inline styles take precedence over CSS included externally. </p> <p style="color: blue"> The <code>style</code> attribute can override it, though. </p> 
p { color: #f00; }

Das <style>-Element muss innerhalb des <head> des Dokuments enthalten sein. Im Allgemeinen ist es besser, Ihre Styles in externen Stylesheets zu platzieren und diese mittels <link>-Elementen anzuwenden.

Wenn Sie mehrere <style> und <link>-Elemente in Ihr Dokument einfügen, werden sie in der Reihenfolge angewendet, in der sie im Dokument enthalten sind – stellen Sie sicher, dass Sie sie in der richtigen Reihenfolge einfügen, um unerwartete Kaskadenprobleme zu vermeiden.

In gleicher Weise wie <link>-Elemente, können <style>-Elemente media-Attribute enthalten, die Media Queries enthalten, wodurch Sie intern Stylesheets je nach Medienmerkmalen wie der Ansichtbreite selektiv auf Ihr Dokument anwenden können.

Attribute

Dieses Element beinhaltet die globalen Attribute.

blocking

Dieses Attribut gibt ausdrücklich an, dass bestimmte Operationen beim Abrufen kritischer Subressourcen blockiert werden sollen. @import-Stylesheets werden im Allgemeinen als kritische Subressourcen betrachtet, während background-image und Schriften dies nicht sind. Die Operationen, die blockiert werden sollen, müssen eine durch Leerzeichen getrennte Liste von unten aufgeführten Blocking-Tokens sein.

  • render: Das Rendern des Inhalts auf dem Bildschirm wird blockiert.
media

Dieses Attribut definiert, auf welches Medium der Stil angewendet werden soll. Sein Wert ist eine Media Query, die standardmäßig auf all gesetzt ist, wenn das Attribut fehlt.

nonce

Ein kryptografisches Nonce (Number used once), das verwendet wird, um Inline-Styles in einer style-src Content-Security-Policy zuzulassen. Der Server muss bei jeder Übermittlung einer Richtlinie einen einzigartigen Nonce-Wert generieren. Es ist entscheidend, ein Nonce bereitzustellen, das nicht erraten werden kann, da es sonst trivial ist, die Richtlinie einer Ressource zu umgehen.

title

Dieses Attribut gibt alternative Stylesheet-Sets an.

Veraltete Attribute

type

Dieses Attribut sollte nicht angegeben werden: Wenn es vorhanden ist, sind die einzigen zulässigen Werte der leere String oder eine nicht auf Groß-/Kleinschreibung achtende Übereinstimmung mit text/css.

Beispiele

Ein einfaches Stylesheet

Im folgenden Beispiel wenden wir ein kurzes Stylesheet auf ein Dokument an:

html
<!doctype html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <title>Test page</title> <style> p { color: red; } </style> </head> <body> <p>This is my paragraph.</p> </body> </html>

Ergebnis

Mehrere Style-Elemente

In diesem Beispiel haben wir zwei <style>-Elemente eingefügt — beachten Sie, wie die widersprüchlichen Deklarationen im späteren <style>-Element die im vorherigen überschreiben, wenn sie die gleiche Spezifität haben.

html
<!doctype html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <title>Test page</title> <style> p { color: white; background-color: blue; padding: 5px; border: 1px solid black; } </style> <style> p { color: blue; background-color: yellow; } </style> </head> <body> <p>This is my paragraph.</p> </body> </html>

Ergebnis

Einfügen einer Media Query

In diesem Beispiel bauen wir auf dem vorherigen auf und fügen ein media-Attribut im zweiten <style>-Element ein, sodass es nur angewendet wird, wenn die Ansichtbreite weniger als 500px beträgt.

html
<!doctype html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <title>Test page</title> <style> p { color: white; background-color: blue; padding: 5px; border: 1px solid black; } </style> <style media="(width < 500px)"> p { color: blue; background-color: yellow; } </style> </head> <body> <p>This is my paragraph.</p> </body> </html>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Metadaten-Inhalt.
Erlaubter Inhalt Textinhalt, der dem type-Attribut entspricht, also text/css.
Tag-Auslassung Keines der Tags kann weggelassen werden.
Erlaubte Eltern Jedes Element, das Metadaten-Inhalt akzeptiert.
Implizite ARIA-Rolle Keine entsprechende Rolle
Erlaubte ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLStyleElement`](/de/docs/Web/API/HTMLStyleElement)

Spezifikationen

Specification
HTML
# the-style-element

Browser-Kompatibilität

Siehe auch