<!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> 元素——請注意，如果後面的 <style> 元素中的衝突宣告具有相同的特異性，則它們會覆蓋前面的元素中的宣告。

html

<!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 時應用它。

html

<!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>

結果

技術摘要

內容類別	元資料內容.
允許的內容	與 `type` 屬性匹配的文字內容，即 `text/css`。
標籤省略	兩個標籤都不能省略。
允許的父元素	任何接受元資料內容的元素。
隱式 ARIA 角色	沒有相應的角色
允許的 ARIA 角色	不允許 `role`。
DOM 介面	`HTMLStyleElement`

規範

規範
HTML 標準 # the-style-element

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱

<link> 元素，它允許我們將外部樣式表應用於文件。
備用樣式表