<style>: Das Style-Information-Element

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 Style-Informationen für ein Dokument oder einen Teil eines Dokuments. Es enthält CSS, das auf den Inhalt des Dokumentes, 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: #f00;
}

Das <style> Element muss innerhalb des <head> des Dokuments eingefügt werden. Im Allgemeinen ist es besser, Ihre Styles in externen Stylesheets zu platzieren und sie durch <link> Elemente anzuwenden.

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

Genau wie <link> Elemente können <style> Elemente media Attribute enthalten, die Media Queries enthalten, sodass Sie interne Stylesheets selektiv auf Ihr Dokument anwenden können, abhängig von Medienmerkmalen wie der Breite des Viewports.

Attribute

Dieses Element umfasst die globalen Attribute.

blocking

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

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

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

nonce

Eine kryptografische Nonce (Zahl, die einmal verwendet wird), die verwendet wird, um Inline-Styles in einer style-src Content-Security-Policy zu erlauben. Der Server muss bei jeder Übermittlung einer Richtlinie einen eindeutigen Nonce-Wert generieren. Es ist entscheidend, eine Nonce bereitzustellen, die nicht erraten werden kann, da es sonst trivial wäre, die Richtlinie einer Ressource zu umgehen.

title

Dieses Attribut gibt alternative Stylesheets an.

Veraltete Attribute

type

Dieses Attribut sollte nicht bereitgestellt werden: Wenn es vorhanden ist, sind die einzigen erlaubten Werte der leere String oder ein nicht case-sensitives Übereinstimmungsmuster für 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 diejenigen im 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, indem wir ein media Attribut im zweiten <style> Element einfü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="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 Metadaten-Inhalte.
Zulässiger Inhalt Textinhalt, der mit dem type Attribut übereinstimmt, d.h. text/css.
Tag-Auslassung Kein Tag darf weggelassen werden.
Zulässige Eltern Jedes Element, das Metadaten-Inhalte akzeptiert.
Implizite ARIA-Rolle Keine entsprechende Rolle
Zulässige ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLStyleElement`](/de/docs/Web/API/HTMLStyleElement)

Spezifikationen

Specification
HTML
# the-style-element

Browser-Kompatibilität

Siehe auch