<style>：樣式資訊元素
Baseline 廣泛可用 *
<style> HTML 元素包含文件或文件一部分的樣式資訊。它包含 CSS，這些 CSS 將應用於包含 <style> 元素的文件內容。
試一試
<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;
}
<style> 元素必須包含在文件的 <head> 中。通常，最好將樣式放在外部樣式表中，並使用 <link> 元素應用它們。
如果在文件中包含多個 <style> 和 <link> 元素，它們將按照在文件中包含的順序應用於 DOM — 確保按照正確的順序包含它們，以避免意外的級聯問題。
與 <link> 元素一樣，<style> 元素可以包含 media 屬性，其中包含 媒體查詢，允許您根據視口寬度等媒體功能選擇性地將內部樣式表應用於文件。
屬性
此元素包含全域性屬性。
阻塞-
此屬性明確指示在獲取關鍵子資源和將樣式表應用於文件時應阻止某些操作。通常，
@import匯入的樣式表被視為關鍵子資源，而background-image和字型則不是。要阻止的操作必須是下面列出的阻塞標記的空格分隔列表。目前只有一個標記render: 螢幕上的內容渲染被阻塞。
注意： 只有文件
<head>中的style元素才可能阻塞渲染。預設情況下，當瀏覽器在解析過程中發現<head>中的style元素時，它就會阻塞渲染。如果此類style元素是透過指令碼動態新增的，則必須另外設定blocking = "render"才能阻塞渲染。 媒體-
此屬性定義了樣式應應用於哪些媒體。其值是 媒體查詢，如果缺少該屬性，則預設為
all。 nonce-
一個加密的 nonce（僅使用一次的數字），用於允許
style-srcContent-Security-Policy 中的內聯樣式。伺服器必須在每次傳輸策略時生成一個唯一的 nonce 值。提供一個無法猜測的 nonce 至關重要，否則繞過資源策略將是輕而易舉的事。 title-
此屬性指定 備用樣式表集。
已棄用屬性
type已棄用-
不應提供此屬性：如果提供，唯一允許的值是空字串或不區分大小寫的
text/css。
示例
一個基本樣式表
在以下示例中，我們為文件應用了一個簡短的樣式表
<!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>
結果
多個樣式元素
在此示例中，我們包含了兩個 <style> 元素 — 請注意，後續 <style> 元素中的衝突宣告如何覆蓋較早的宣告，前提是它們的 特異性相等。
<!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>
結果
包含媒體查詢
在此示例中，我們基於上一個示例，在第二個 <style> 元素上包含了一個 media 屬性，這樣它僅在視口寬度小於 500px 時應用。
<!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>
結果
技術摘要
| 內容類別 | 元資料內容. |
|---|---|
| 允許內容 | 與 type 屬性匹配的文字內容，即 text/css。 |
| 標籤省略 | 兩個標籤都不能省略。 |
| 允許父級 | 任何接受 元資料內容的元素。 |
| 隱式 ARIA 角色 | 沒有對應的角色 |
| 允許的 ARIA 角色 | 不允許 role |
| DOM 介面 | HTMLStyleElement |
規範
| 規範 |
|---|
| HTML # the-style-element |
瀏覽器相容性
載入中…
另見
<link>元素，它允許我們將外部樣式表應用於文件。- 備用樣式表