<style>: Das Stil-Informationselement

Baseline Widely available *

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

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

Das <style> HTML-Element enthält Stilinformationen für ein Dokument oder einen Teil eines Dokuments. Es enthält CSS, welches auf die Inhalte des Dokuments, das das <style>-Element enthält, angewendet wird.

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: red;
}

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

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

Genauso wie <link>-Elemente können <style>-Elemente media-Attribute enthalten, die Media Queries beinhalten, sodass Sie interne Stylesheets je nach Medienmerkmalen wie der Breite des Viewports selektiv auf Ihr Dokument anwenden können.

Attribute

Dieses Element beinhaltet die globalen Attribute.

blocking

Dieses Attribut gibt explizit an, dass bestimmte Operationen beim Abrufen kritischer Subressourcen und beim Anwenden des Stylesheets auf das Dokument blockiert werden sollen. @import-Stilvorlagen gelten in der Regel als kritische Subressourcen, während background-image und Schriften dies nicht tun. Die zu blockierenden Operationen müssen eine durch Leerzeichen getrennte Liste der unten aufgeführten Blockierungstokens sein. Derzeit gibt es nur ein Token:

render: Das Rendern von Inhalten auf dem Bildschirm wird blockiert.

Hinweis: Nur style-Elemente im <head> des Dokuments können das Rendern möglicherweise blockieren. Standardmäßig blockiert ein style-Element im <head> das Rendern, wenn der Browser es beim Parsen entdeckt. Wenn ein solches style-Element dynamisch über ein Skript hinzugefügt wird, müssen Sie zusätzlich blocking = "render" setzen, damit es das Rendern blockiert.

media

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

nonce

Eine kryptografische Nonce (Nummer, die einmal verwendet wird), die es erlaubt, Inline-Stile in einer style-src Content-Security-Policy zuzulassen. Der Server muss bei jeder Übertragung einer Richtlinie einen eindeutigen Nonce-Wert generieren. Es ist entscheidend, eine Nonce bereitzustellen, die nicht erraten werden kann, da andernfalls die Umgehung der Richtlinie einer Ressource trivial ist.

title

Dieses Attribut gibt alternative Stylesheet-Sets an.

Veraltete Attribute

type Veraltet: Dieses Attribut sollte nicht angegeben werden: wenn es vorhanden ist, sind die einzigen erlaubten Werte der leere String oder eine nicht auf Groß- und 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 Stil-Elemente

In diesem Beispiel haben wir zwei <style>-Elemente eingefügt – beachten Sie, wie die späteren <style>-Elemente die widersprüchlichen Deklarationen der früheren ü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

Einbinden einer Media Query

In diesem Beispiel bauen wir auf dem vorherigen auf, indem wir ein media-Attribut im zweiten <style>-Element hinzufügen, sodass es nur angewendet wird, wenn der Viewport weniger als 500px breit ist.

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-Inhalte.
Erlaubter Inhalt	Textinhalt, der mit dem `type`-Attribut übereinstimmt, das ist `text/css`.
Weglassung des Tags	Kein Tag kann weggelassen werden.
Erlaubte Eltern	Jedes Element, das Metadaten-Inhalte akzeptiert.
Implizierte 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

Das <link>-Element, das es uns ermöglicht, externe Stylesheets auf ein Dokument anzuwenden.
Alternative Stylesheets

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden