<style>: Das Stilelement

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 Stilinformationen 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 im <head> des Dokuments enthalten sein. Im Allgemeinen ist es besser, Ihre Stile in externen Stylesheets zu speichern und diese über <link> Elemente anzuwenden.

Wenn Sie mehrere <style> und <link> Elemente in Ihr Dokument einfügen, werden sie in der Reihenfolge auf das DOM 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.

Ähnlich wie <link> Elemente können <style> Elemente media Attribute enthalten, die Media Queries nutzen. Dadurch können Sie interne Stylesheets je nach Medienmerkmalen wie der Ansichtsfensterbreite selektiv auf Ihr Dokument anwenden.

Attribute

Dieses Element enthält die globalen Attribute.

blocking

Dieses Attribut gibt explizit an, dass bestimmte Operationen beim Laden kritischer Subressourcen blockiert werden sollen. @import-ierte Stylesheets werden im Allgemeinen als kritische Subressourcen betrachtet, während background-image und Fonts dies nicht sind. Die zu blockierenden Operationen müssen eine durch Leerzeichen getrennte Liste der unten aufgeführten Sperrtokens sein.

  • render: Die Darstellung des Inhalts auf dem Bildschirm wird blockiert.
media

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

nonce

Eine kryptografische Nonce (Nummer, die einmal verwendet wird), die verwendet wird, um Inline-Stile in einer style-src Content-Security-Policy zuzulassen. Der Server muss jedes Mal, wenn er eine Richtlinie überträgt, einen eindeutigen Nonce-Wert generieren. Es ist wichtig, eine Nonce bereitzustellen, die nicht erraten werden kann, da das Umgehen der Richtlinie einer Ressource sonst trivial ist.

title

Dieses Attribut spezifiziert alternative Stylesheet Sätze.

Veraltete Attribute

type

Dieses Attribut sollte nicht bereitgestellt werden: Falls doch, sind die einzigen zulässigen Werte der leere String oder eine Groß-/Kleinschreibung nicht berücksichtigende Ü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 des 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

Einfügen einer Media Query

In diesem Beispiel bauen wir auf dem vorherigen auf und fügen ein media Attribut im zweiten <style> Element hinzu, so dass es nur angewendet wird, wenn das Ansichtsfenster 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="all and (max-width: 500px)">
      p {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Metadateninhalt.
Erlaubte Inhalte Textinhalt, der dem type Attribut entspricht, also text/css.
Weglassung von Tags Kein Tag ist weglassbar.
Erlaubte Eltern Jedes Element, das Metadateninhalt 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