<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 abgerufen und das Stylesheet auf das Dokument angewendet wurde. Mit @import eingebundene Stylesheets gelten in der Regel als kritische Unterressourcen, background-image und Schriftarten dagegen nicht. Die zu blockierenden Vorgänge müssen als durch Leerzeichen getrennte Liste der nachfolgend 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 Medienabfrage. Fehlt das Attribut, gilt standardmäßig all.

nonce

Eine kryptografische Nonce (ein einmalig verwendeter Wert), mit der Inline-Styles gemäß einer style-src-Content-Security-Policy zugelassen werden können. Der Server muss bei jeder Übermittlung einer Richtlinie einen eindeutigen Nonce-Wert erzeugen. Entscheidend ist, dass dieser Wert nicht erraten werden kann, da sich die Richtlinie für eine Ressource andernfalls 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 die 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 Template-Inhalt eines <template>-Elements verwendet werden, der beliebige Elemente enthalten kann.

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

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

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

<style> innerhalb von <template> verwenden

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 Element überschreiben, wenn 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

Eine Medienabfrage einbinden

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 500 Pixel 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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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