<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.
* Some parts of this feature may have varying levels of support.
Das <style>
HTML-Element enthält Style-Informationen 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
Das <style>
-Element muss innerhalb des <head>
des Dokuments eingefügt werden. Im Allgemeinen ist es besser, Ihre Styles 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 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 ähnlicher Weise wie <link>
-Elemente können <style>
-Elemente media
-Attribute enthalten, die Media Queries enthalten, sodass Sie interne Stylesheets je nach Medienmerkmalen wie der Breite des Ansichtsbereichs selektiv auf Ihr Dokument anwenden können.
Attribute
Dieses Element enthält die globalen Attribute.
blocking
-
Dieses Attribut zeigt explizit an, dass bestimmte Operationen beim Abrufen kritischer Subressourcen blockiert werden sollen.
@import
-Stylesheets werden im Allgemeinen als kritische Subressourcen betrachtet, währendbackground-image
und Schriften dies nicht sind. Die zu blockierenden Operationen müssen eine durch Leerzeichen getrennte Liste der unten aufgeführten Blockierungstokens sein.render
: Das Rendern von Inhalten auf dem Bildschirm wird blockiert.
media
-
Dieses Attribut definiert, auf welche Medien der Style angewendet werden soll. Sein Wert ist eine Media Query, die auf
all
gesetzt wird, wenn das Attribut fehlt. nonce
-
Eine kryptografische Nonce (einmal verwendete Nummer), die verwendet wird, um Inline-Styles in einer style-src Content-Security-Policy zuzulassen. Der Server muss bei jeder Übertragung einer Richtlinie einen eindeutigen Nonce-Wert erzeugen. Es ist entscheidend, eine Nonce bereitzustellen, die nicht erraten werden kann, da das Umgehen der Richtlinie einer Ressource andernfalls trivial ist.
title
-
Dieses Attribut gibt alternative Stylesheets-Sets an.
Veraltete Attribute
type
Veraltet-
Dieses Attribut sollte nicht angegeben werden: Wenn es angegeben ist, sind die einzigen zulässigen Werte der leere String oder ein Groß-/Kleinschreibungs-unschädliche Übereinstimmung mit
text/css
.
Beispiele
Ein grundlegendes 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 die 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
Einbindung einer Media Query
In diesem Beispiel bauen wir auf dem vorherigen auf und fügen dem zweiten <style>
-Element ein media
-Attribut hinzu, sodass es nur angewendet wird, wenn der Ansichtsbereich 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="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-Inhalte. |
---|---|
Zulässiger Inhalt |
Textinhalt, der mit dem type -Attribut übereinstimmt, das heißt
text/css .
|
Tag-Auslassung | Kein Tag kann weggelassen werden. |
Zulässige Eltern | Jedes Element, das Metadaten-Inhalte akzeptiert. |
Implizite ARIA-Rolle | Keine entsprechende Rolle |
Zulässige ARIA-Rollen | Keine role erlaubt |
DOM-Schnittstelle | [`HTMLStyleElement`](/de/docs/Web/API/HTMLStyleElement) |
Spezifikationen
Specification |
---|
HTML # the-style-element |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
style | ||||||||||||
blocking | ||||||||||||
media | ||||||||||||
type |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Deprecated. Not for use in new websites.
- See implementation notes.
Siehe auch
- Das
<link>
-Element, das es uns ermöglicht, externe Stylesheets auf ein Dokument anzuwenden. - Alternative Stylesheets