<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, welches auf die Inhalte des Dokuments angewendet wird, das das <style>-Element enthält.

Probieren Sie es aus

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

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

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

Attribute

Dieses Element enthält die globalen Attribute.

blocking

Dieses Attribut gibt explizit an, dass bestimmte Operationen beim Abrufen kritischer Subressourcen blockiert werden sollen. @import-Stylesheets werden im Allgemeinen als kritische Subressourcen betrachtet, während background-image und Schriftarten nicht dazu zählen. Die zu blockierenden Operationen müssen eine durch Leerzeichen getrennte Liste der unten aufgelisteten Blocking-Tokens sein.

  • render: Das Rendern von Inhalten 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 auf all gesetzt ist, wenn das Attribut fehlt.

nonce

Ein Kryptowert, der einmalig verwendet wird (Nonce), um Inline-Stile in einer style-src Content-Security-Policy zuzulassen. Der Server muss bei jeder Übertragung einer Richtlinie einen eindeutigen Nonce-Wert generieren. Es ist wichtig, einen Nonce bereitzustellen, der nicht erraten werden kann, da das Umgehen der Richtlinie einer Ressource sonst trivial ist.

title

Dieses Attribut gibt die alternativen Stylesheet-Sets an.

Veraltete Attribute

type

Dieses Attribut sollte nicht angegeben werden: Wenn doch, sind die einzigen zulässigen Werte der leere String oder eine nicht groß-/klein-schreibungssensitive Übereinstimmung für text/css.

Beispiele

Ein grundlegendes 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 Element ü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

Eine Media Query einfügen

In diesem Beispiel bauen wir auf dem vorherigen auf und fügen ein media-Attribut im zweiten <style>-Element hinzu, 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-Inhalt.
Zulässiger Inhalt Textinhalt, der dem type-Attribut entspricht, das heißt text/css.
Tag-Auslassung Weder Start- noch End-Tag sind auslassbar.
Zulässige Eltern Jedes Element, das Metadaten-Inhalt akzeptiert.
Implizite ARIA-Rolle Keine entsprechende Rolle
Zulässige ARIA-Rollen Keine role zulässig
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