<style> HTML-Stil-Informationselement
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>-Element von HTML enthält Stil-Informationen für ein Dokument oder einen Teil eines Dokuments. Es enthält CSS, das auf die Inhalte des Dokuments angewendet wird, in dem sich das <style>-Element befindet.
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 wird typischerweise innerhalb des <head> des Dokuments eingefügt. Es kann auch überall dort verwendet werden, wo Metadaten-Inhalte erlaubt sind, wie beispielsweise innerhalb eines <template>-Elements.
Wenn Sie mehrere <style>- und <link>-Elemente in Ihr Dokument einfügen, werden diese in der Reihenfolge, in der sie im Dokument enthalten sind, auf das DOM angewendet — stellen Sie sicher, dass Sie sie in der korrekten Reihenfolge einfügen, um unerwartete Kaskadenprobleme zu vermeiden.
In derselben Weise wie <link>-Elemente können <style>-Elemente media-Attribute enthalten, die Media Queries zusammenfassen, sodass Sie interne Stylesheets je nach Medienmerkmalen wie der Viewport-Breite selektiv auf Ihr Dokument anwenden können.
Attribute
Dieses Element umfasst die globalen Attribute.
blocking-
Dieses Attribut gibt explizit an, dass bestimmte Operationen beim Abrufen kritischer Subressourcen und bei der Anwendung des Stylesheets auf das Dokument blockiert werden sollen. Via
@import-Anweisung eingebundene Stylesheets gelten im Allgemeinen als kritische Subressourcen, währendbackground-imageund Schriftarten dies nicht tun. Die Operationen, die blockiert werden sollen, müssen eine durch Leerzeichen getrennte Liste von unten aufgeführten Blockierungstokens sein. Derzeit gibt es nur ein Token:render: Das Rendern von Inhalten auf dem Bildschirm wird blockiert.
Hinweis: Nur
style-Elemente im<head>des Dokuments können möglicherweise das Rendern blockieren. Standardmäßig blockiert einstyle-Element im<head>das Rendern, wenn der Browser es während des Parsens entdeckt. Wenn ein solchesstyle-Element dynamisch durch ein Script hinzugefügt wird, müssen Sie zusätzlichblocking = "render"setzen, damit es das Rendern blockiert. media-
Dieses Attribut definiert, auf welches Medium der Stil angewendet werden soll. Sein Wert ist eine Media Query, die standardmäßig auf
allfestgelegt ist, wenn das Attribut fehlt. nonce-
Eine kryptografische Nonce (Nummer, die einmal verwendet wird), die verwendet wird, um Inline-Stile in einer style-src Content-Security-Policy zuzulassen. Der Server muss bei jeder Übermittlung einer Richtlinie einen eindeutigen Nonce-Wert generieren. Es ist wichtig, eine Nonce bereitzustellen, die nicht erraten werden kann, da eine sonstige Umgehung der Richtlinie einer Ressource trivial ist.
title-
Dieses Attribut spezifiziert alternative Stylesheet-Sätze.
Veraltete Attribute
type-
Dieses Attribut sollte nicht angegeben werden: Wenn es vorhanden ist, sind die einzigen erlaubten Werte der leere String oder eine Groß-/Kleinschreibung ignorierende Übereinstimmung 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
Verwendung von <style> innerhalb von <template>
Ein <style>-Element kann auch innerhalb eines <template>-Elements platziert werden. Die Stile bleiben inaktiv, bis der Template-Inhalt instanziiert und in das Dokument eingefügt wird.
<template id="card-template">
<style>
.card {
border: 1px solid #cccccc;
padding: 1rem;
border-radius: 0.5rem;
}
</style>
<div class="card">Template content</div>
</template>
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, falls sie gleiche spezifische Größen 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
Einfügen einer Media Query
In diesem Beispiel bauen wir auf dem vorherigen auf, indem wir dem zweiten <style>-Element ein media-Attribut hinzufügen, sodass es nur angewendet wird, wenn der Viewport 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-Inhalte. |
|---|---|
| Erlaubter Inhalt |
Textinhalt, der dem type-Attribut entspricht, das
text/css ist.
|
| Tags-Auslassung | Kein Tag kann ausgelassen werden. |
| Erlaubte Eltern | Jedes Element, das Metadaten-Inhalte 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
- Das
<link>-Element, das es uns ermöglicht, externe Stylesheets auf ein Dokument anzuwenden. - Alternative Stylesheets