<style>: HTML-Element für Stilinformationen

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

Attribute

Dieses Element unterstützt die globalen Attribute.

blocking

Dieses Attribut gibt ausdrücklich an, dass bestimmte Vorgänge blockiert werden sollen, bis kritische Unterressourcen geladen und das Stylesheet auf das Dokument angewendet wurde. Über @import eingebundene Stylesheets gelten im Allgemeinen als kritische Unterressourcen, background-image und Schriftarten dagegen nicht. Die zu blockierenden Vorgänge müssen als durch Leerzeichen getrennte Liste der unten aufgeführten Blocking-Tokens angegeben werden. 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 blockieren. Standardmäßig blockiert ein style-Element im <head> das Rendern, wenn der Browser es beim Parsen entdeckt. Wird ein solches style-Element dynamisch per Skript hinzugefügt, müssen Sie zusätzlich blocking = "render" setzen, damit es das Rendern blockiert.

media

Dieses Attribut legt fest, für welche Medien der Stil angewendet werden soll. Sein Wert ist eine Media Query. Fehlt das Attribut, gilt standardmäßig all.

nonce

Eine kryptografische Nonce (eine einmalig verwendete Zahl), mit der Inline-Stile im Rahmen einer style-src-Content-Security-Policy zugelassen werden können. Der Server muss bei jeder Übermittlung einer Richtlinie einen eindeutigen Nonce-Wert erzeugen. Die Nonce darf nicht erraten werden können, da sich die Richtlinie für eine Ressource sonst leicht umgehen lässt.

title

Dieses Attribut legt Gruppen alternativer Stylesheets fest.

Veraltete Attribute

type

Dieses Attribut sollte nicht angegeben werden. Falls es angegeben wird, sind nur eine leere Zeichenfolge oder ein Wert zulässig, der ohne Berücksichtigung der Groß- und Kleinschreibung text/css entspricht.

Hinweise zur Verwendung

Das <style>-Element befindet sich üblicherweise im <head> des Dokuments. Es kann auch im Inhalt eines Templates eines <template>-Elements verwendet werden, der beliebige Elemente enthalten kann. Im <body> kann es als erstes Kindelement seines Elternelements verwendet werden (siehe Verwendung von <style> im Body).

Wenn Sie mehrere <style>- und <link>-Elemente in Ihr Dokument aufnehmen, werden sie in der Reihenfolge, in der sie im Dokument stehen, auf das DOM angewendet. Achten Sie auf die richtige Reihenfolge, um unerwartete Auswirkungen der Kaskade zu vermeiden.

Wie <link>-Elemente können auch <style>-Elemente media-Attribute mit Media Queries enthalten. So können Sie interne Stylesheets abhängig von Medieneigenschaften wie der Breite des Viewports gezielt auf Ihr Dokument anwenden.

Verwendung von <style> im Body

Ein <style>-Element kann dort verwendet werden, wo Flow Content erwartet wird, beispielsweise im <body>, sofern es das erste Kindelement seines Elternelements ist und sein Stylesheet nur dieses Elternelement und dessen Nachfahren gestaltet:

• Jede Stilregel muss innerhalb einer @scope-Regel ohne Scope-Root-Selektor stehen, beispielsweise @scope { ... } oder @scope to (.x) { ... }. Eine solche @scope-Regel ist auf das Elternelement des <style>-Elements beschränkt. Sie kann selbst in Regeln wie @media, @supports, @container, @starting-style oder @layer verschachtelt sein.
• Eine @scope-Regel mit Scope-Root-Selektor, beispielsweise @scope (.card) { ... }, muss ebenfalls in einer @scope-Regel ohne Scope-Root-Selektor verschachtelt sein.
• Das Stylesheet darf keine @import-Regeln enthalten.

Browser wenden jedes <style>-Element im Body an. Ein Element, das diese Regeln nicht einhält, ist jedoch ungültiges HTML. Die Regeln stellen sicher, dass ein <style>-Element im Body keine Inhalte nachträglich umgestaltet, die der Browser möglicherweise bereits gerendert hat – mit Ausnahme seines Elternelements.

At-Regeln wie @font-face, @keyframes und @property definieren Namen für das gesamte Dokument. Um zu vermeiden, dass möglicherweise bereits gerenderte Inhalte umgestaltet werden, sollten Sie solche Namen nur innerhalb des Elternelements des <style>-Elements verwenden und Namen wählen, die an keiner anderen Stelle im Dokument verwendet werden.

Beispiele

Ein einfaches Stylesheet

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

<!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

Verwendung von <style> innerhalb von <template>

Ein <style>-Element kann auch innerhalb eines <template>-Elements stehen. Die Stile bleiben inaktiv, bis der Template-Inhalt instanziiert und in das Dokument eingefügt wird.

<template id="card-template">
  <style>
    .card {
      border: 1px solid #cccccc;
      padding: 1rem;
      border-radius: 0.5rem;
    }
  </style>

  <div class="card">Template content</div>
</template>

Mehrere style-Elemente

In diesem Beispiel verwenden wir zwei <style>-Elemente. Beachten Sie, dass widersprüchliche Deklarationen im späteren <style>-Element diejenigen im früheren überschreiben, sofern sie die gleiche Spezifität haben.

<!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

Einbindung einer Media Query

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

<!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

Auf einen Bereich beschränkte Stile im Body

In diesem Beispiel ist ein <style>-Element das erste Kindelement eines <aside>-Elements. Seine Regeln stehen innerhalb einer @scope-Regel ohne Scope-Root-Selektor und gelten daher nur für das <aside>-Element und dessen Nachfahren.

<aside>
  <style>
    @scope {
      :scope {
        background-color: lightyellow;
        padding: 0 1rem;
      }
      p {
        font-weight: bold;
      }
    }
  </style>
  <p>Did you know? Octopuses have three hearts.</p>
</aside>
<p>This paragraph isn't styled, because it's outside the aside.</p>

Eine Regel wie p { margin: 0; } außerhalb der @scope-Regel würde das HTML ungültig machen, da sie nicht auf das <aside>-Element beschränkt wäre.

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Das <link>-Element, mit dem sich externe Stylesheets auf ein Dokument anwenden lassen.
• Alternative Stylesheets