<style>: Das Style-Informationselement

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.

Das <style> HTML Element enthält Style-Informationen für ein Dokument oder einen Teil eines Dokuments. Es enthält CSS, das auf die Inhalte des Dokuments, das das <style> Element enthält, angewendet wird.

Probieren Sie es aus

Das <style> Element muss innerhalb des <head> des Dokuments enthalten sein. Im Allgemeinen ist es besser, Ihre Styles in externe Stylesheets zu legen und diese mit <link> Elementen anzuwenden.

Wenn Sie mehrere <style> und <link> Elemente in Ihr Dokument einfügen, werden sie in der Reihenfolge angewendet, in der sie im Dokument enthalten sind. Achten Sie darauf, sie in der richtigen Reihenfolge einzuschließen, um unerwartete Kaskadenprobleme zu vermeiden.

Ähnlich wie <link> Elemente können <style> Elemente media Attribute enthalten, die Media Queries enthalten. Diese ermöglichen Ihnen, interne Stylesheets je nach Medienmerkmalen wie der Breite des Ansichtsfensters selektiv auf Ihr Dokument anzuwenden.

Attribute

Dieses Element beinhaltet die globalen Attribute.

blocking

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

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

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

nonce

Eine kryptografische Nonce (Number used once), die verwendet wird, um Inline-Styles in einer style-src Content-Security-Policy zuzulassen. Der Server muss jedes Mal, wenn er eine Policy überträgt, einen einzigartigen Nonce-Wert generieren. Es ist entscheidend, eine Nonce bereitzustellen, die nicht erraten werden kann, da das Umgehen der Policy einer Ressource ansonsten trivial ist.

title

Dieses Attribut gibt alternative Stylesheets an.

Veraltete Attribute

type

Dieses Attribut sollte nicht angegeben werden: Wenn es vorhanden ist, sind die einzigen zulässigen Werte der leere String oder ein nicht casesensitiver Match für text/css.

Beispiele

Ein einfaches Stylesheet

Im folgenden Beispiel wenden wir ein sehr einfaches 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 – achten Sie darauf, 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

Einbinden einer Media Query

In diesem Beispiel bauen wir auf dem vorigen auf, indem wir ein media Attribut auf dem zweiten <style> Element einfügen, sodass 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 Metadaten-Inhalt.
Zulässiger Inhalt Textinhalt entsprechend dem type Attribut, also text/css.
Tags weglassbar Weder das Start- noch das Endtag können weggelassen werden.
Zulässige Eltern Jedes Element, das Metadaten-Inhalt 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 Standard
# the-style-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch