<style> HTML Style-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>- HTML-Element enthält Stilinformationen für ein Dokument oder einen Teil eines Dokuments. Es enthält CSS, das auf den Inhalt 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 wird typischerweise im <head> des Dokuments eingebunden. Es kann auch überall dort verwendet werden, wo Metadateninhalte zugelassen sind, wie zum Beispiel innerhalb eines <template>-Elements.
Wenn Sie mehrere <style>- und <link>-Elemente in Ihr Dokument aufnehmen, 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 ähnlicher Weise wie <link>-Elemente können <style>-Elemente media-Attribute enthalten, die Media Queries beinhalten. Damit können Sie interne Stylesheets selektiv auf Ihr Dokument anwenden, abhängig von Medieneigenschaften wie der Breite des Ansichtsfensters.
Attribute
Dieses Element beinhaltet 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 gelten im Allgemeinen als kritische Subressourcen, währendbackground-imageund Schriftarten dies nicht sind. Die zu blockierenden Operationen müssen als durch Leerzeichen getrennte Liste der unten aufgeführten Blockierungstoken angegeben werden. Derzeit gibt es nur ein Token:render: Die Darstellung des Inhalts auf dem Bildschirm wird blockiert.
Hinweis: Nur
style-Elemente im<head>eines Dokuments können möglicherweise das Rendering blockieren. Standardmäßig blockiert einstyle-Element im<head>das Rendering, wenn der Browser es während der Analyse entdeckt. Wenn ein solchesstyle-Element dynamisch über ein Script hinzugefügt wird, müssen Sie zusätzlichblocking = "render"setzen, damit es das Rendering blockiert. media-
Dieses Attribut definiert, auf welche Medien der Stil angewendet werden soll. Sein Wert ist eine Media Query, die auf
allstandardmäßig gesetzt ist, wenn das Attribut fehlt. nonce-
Ein kryptographischer Nonce (einmal verwendete Nummer), der dazu verwendet wird, Inline-Stile in einer style-src Content-Security-Policy zu erlauben. Der Server muss bei jeder Übertragung einer Richtlinie einen einzigartigen Nonce-Wert generieren. Es ist entscheidend, einen nicht zu erratenden Nonce bereitzustellen, da das Umgehen der Ressourcenrichtlinie sonst trivial ist.
title-
Dieses Attribut gibt alternative Stylesheet-Sets an.
Veraltete Attribute
type-
Dieses Attribut sollte nicht angegeben werden: Wenn es angegeben wird, sind nur der leere String oder eine nicht case-sensitive Übereinstimmung mit
text/csszulässig.
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 #ccc;
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 eingebaut – beachten Sie, wie die widersprüchlichen Deklarationen im späteren <style>-Element diejenigen 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
Einfügen einer Media Query
In diesem Beispiel bauen wir auf dem vorhergehenden Beispiel auf und fügen ein media-Attribut im zweiten <style>-Element hinzu, sodass es nur angewendet wird, wenn das Ansichtsfenster 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 dem type-Attribut entspricht, also
text/css.
|
| Tag-Auslassung | Kein Tag kann ausgelassen werden. |
| Erlaubte Eltern | Jedes Element, das Metadaten-Inhalt akzeptiert. |
| Implizierte ARIA-Rolle | Keine entsprechende Rolle |
| Erlaubte ARIA-Rollen | Kein 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 ermöglicht, externe Stylesheets auf ein Dokument anzuwenden. - Alternative Stylesheets