<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 ⁨Juli 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 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 zu platzieren und sie mithilfe von <link>-Elementen 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.

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

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 sollten. @import-ed Stylesheets werden im Allgemeinen als kritische Subressourcen angesehen, während background-image und Schriftarten es nicht sind. Die zu blockierenden Operationen müssen eine durch Leerzeichen getrennte Liste der unten aufgeführten Blockiertokens sein. 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 der Analyse 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 gesetzt wird, wenn das Attribut fehlt.

nonce

Ein kryptografischer Nonce (nur 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 andernfalls die Umgehung der Richtlinie einer Ressource trivial ist.

title

Dieses Attribut gibt [alternative Stylesheet]-Sets(/de/docs/Web/HTML/Reference/Attributes/rel/alternate_stylesheet) an.

Veraltete Attribute

type Veraltet: Dieses Attribut sollte nicht angegeben werden: Wenn es angegeben wird, sind die einzigen erlaubten Werte der leere String oder ein nicht groß-/kleinschreibungssensitives 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 Stilelemente

In diesem Beispiel haben wir zwei <style>-Elemente eingeschlossen — beachten Sie, wie die widersprüchlichen Deklarationen im späteren <style>-Element die 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

Einbeziehen einer Media-Query

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="(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, also `text/css`.
Tag-Auslassung	Kein Tag ist auslassbar.
Erlaubte Eltern	Jedes Element, das Metadateninhalt akzeptiert.
Implizite ARIA-Rolle	Keine entsprechende Rolle
Erlaubte ARIA-Rollen	Kein `role` erlaubt
DOM-Schnittstelle	[`HTMLStyleElement`](/de/docs/Web/API/HTMLStyleElement)

Spezifikationen

Specification
HTML # the-style-element

Browser-Kompatibilität

Siehe auch

Das <link>-Element, das es uns erlaubt, externe Stylesheets auf ein Dokument anzuwenden.
Alternative Style Sheets

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden