1. Web
  2. HTML
  3. Reference
  4. Elements
  5. <style>

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

<style> HTML-Stilelement

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Das <style> HTML-Element enthält Stilinformationen für ein Dokument oder einen Teil eines Dokuments. Es enthält CSS, das auf die Inhalte 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: red;
}

Das <style>-Element muss im <head> des Dokuments enthalten sein. Im Allgemeinen ist es besser, Ihre Stile in externen Stylesheets abzulegen 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 — achten Sie darauf, sie in der richtigen Reihenfolge einzufügen, um unerwartete Kaskadenprobleme zu vermeiden.

Ähnlich 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, je nach 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 und der Anwendung des Stylesheets auf das Dokument blockiert werden sollen. @import-ierte Stylesheets werden im Allgemeinen als kritische Subressourcen betrachtet, während background-image und Schriftarten dies nicht sind. Die zu blockierenden Operationen müssen als durch Leerzeichen getrennte Liste von Blockierungstokens angegeben werden, die unten aufgeführt sind. Derzeit gibt es nur ein Token:

  • render: Die Darstellung von Inhalten auf dem Bildschirm wird blockiert.

Hinweis: Nur style-Elemente im <head> des Dokuments können möglicherweise die Darstellung blockieren. Standardmäßig blockiert ein style-Element im <head> die Darstellung, wenn der Browser es während des Parsens entdeckt. Wenn ein solches style-Element dynamisch über ein Skript hinzugefügt wird, müssen Sie zusätzlich blocking = "render" setzen, damit es die Darstellung blockiert.

media

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

nonce

Ein kryptografischer Nonce (eine einmal verwendete Zahl), der verwendet wird, 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 entscheidend, einen Nonce bereitzustellen, der nicht erraten werden kann, da das Umgehen der Richtlinie einer Ressource sonst trivial ist.

title

Dieses Attribut gibt alternative Style Sheet-Sets an.

Veraltete Attribute

type

Dieses Attribut sollte nicht bereitgestellt werden: Wenn es bereitgestellt wird, sind nur der leere String oder eine nicht case-sensible Übereinstimmung für text/css erlaubt.

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 Stilelemente

In diesem Beispiel haben wir zwei <style>-Elemente eingefügt — beachten Sie, wie die widersprüchlichen Deklarationen im späteren <style>-Element die im vorherigen überschreiben, wenn sie 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 auf das zweite <style>-Element anwenden, 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="(width < 500px)">
      p {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Metadateninhalt.
Erlaubter Inhalt Textinhalt, der dem type-Attribut entspricht, das heißt text/css.
Tag-Auslassung Kein Tag kann weggelassen werden.
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

Spezifikation
HTML
# the-style-element

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden