<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 Juli 2015.
* Some parts of this feature may have varying levels of support.
Das <style>-Element HTML enthält Style-Informationen für ein Dokument oder einen Teil eines Dokuments. Es enthält CSS, das auf den Inhalt des Dokuments angewendet wird, der 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 innerhalb des <head> des Dokuments platziert werden. Im Allgemeinen ist es besser, Ihre Styles in externen Stylesheets zu platzieren und diese mithilfe von <link>-Elementen anzuwenden.
Wenn Sie mehrere <style>- und <link>-Elemente in Ihrem Dokument einfügen, werden diese in der Reihenfolge 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.
Ähnlich wie <link>-Elemente können <style>-Elemente media-Attribute enthalten, die Media Queries enthalten, sodass Sie interne Stylesheets abhängig von Medienmerkmalen wie der Breite des Sichtfensters 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-Stylesheets werden im Allgemeinen als kritische Subressourcen betrachtet, währendbackground-imageund Fonts dies nicht sind. Die zu blockierenden Operationen müssen eine durch Leerzeichen getrennte Liste der unten aufgeführten Blocking-Tokens sein. Derzeit gibt es nur ein Token:render: Das Rendering des Inhalts auf dem Bildschirm wird blockiert.
Hinweis: Nur
style-Elemente im<head>des Dokuments können möglicherweise das Rendering blockieren. Standardmäßig blockiert einstyle-Element im<head>das Rendering, wenn der Browser es während des Parsens entdeckt. Wenn ein solchesstyle-Element dynamisch über Skript hinzugefügt wird, müssen Sie zusätzlichblocking = "render"setzen, damit es das Rendering blockiert. media-
Dieses Attribut definiert, auf welche Medien der Style angewendet werden soll. Sein Wert ist eine Media Query, die auf
allstandardisiert, wenn das Attribut fehlt. nonce-
Ein kryptografischer Nonce (einmal verwendete Nummer), der zum Erlauben von Inline-Styles in einer style-src Content-Security-Policy verwendet wird. 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 sonst das Umgehen einer Richtlinie trivial ist.
title-
Dieses Attribut gibt alternative Stylesheets-Sets an.
Veraltete Attribute
typeVeraltet-
Dieses Attribut sollte nicht angegeben werden: wenn doch, sind die einzigen erlaubten Werte der leere String oder ein nicht auf Groß- und Kleinschreibung achtender Treffer für
text/css.
Beispiele
Ein einfaches Stylesheet
Im folgenden Beispiel wenden wir ein kurzes Stylesheet auf ein Dokument an:
<!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 jene im früheren überschreiben, wenn sie die gleiche Spezifität haben.
<!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 einbeziehen
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 das Sichtfenster weniger als 500px breit ist.
<!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 | Metadaten-Inhalt. |
|---|---|
| Erlaubter Inhalt |
Textinhalt, der mit dem type-Attribut übereinstimmt, also
text/css.
|
| Tag-Auslassung | Kein Tag kann weggelassen werden. |
| Erlaubte Eltern | Jedes Element, das Metadaten-Inhalt akzeptiert. |
| Implizierte ARIA-Rolle | Keine entsprechende Rolle |
| Erlaubte ARIA-Rollen | Keine 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 uns ermöglicht, externe Stylesheets auf ein Dokument anzuwenden. - Alternative Stylesheets