HTML-Element <style> 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 bis zum Abrufen kritischer Unterressourcen und zum Anwenden des Stylesheets auf das Dokument blockiert werden sollen. Mit @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 folgenden 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 gelten soll. Sein Wert ist eine Medienabfrage. 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. Der Server muss bei jeder Übermittlung einer Richtlinie einen eindeutigen Nonce-Wert erzeugen. Es ist entscheidend, dass die Nonce nicht erraten werden kann, da sich die Richtlinie für eine Ressource andernfalls leicht umgehen lässt.

title

Dieses Attribut gibt Gruppen alternativer Stylesheets an.

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.

Verwendungshinweise

Das <style>-Element befindet sich üblicherweise innerhalb von <head> im Dokument. Es kann auch überall dort verwendet werden, wo Metadateninhalt zulässig ist, beispielsweise innerhalb eines <template>-Elements.

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 Probleme mit 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 Inhalt des Templates 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 sind zwei <style>-Elemente enthalten. Beachten Sie, dass die widersprüchlichen 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

Eine Medienabfrage einbinden

Dieses Beispiel baut auf dem vorherigen auf. Das zweite <style>-Element erhält ein media-Attribut, sodass es nur angewendet wird, wenn der Viewport weniger als 500 px 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 Übersicht

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Das <link>-Element, mit dem externe Stylesheets auf ein Dokument angewendet werden können.
• Alternative Stylesheets