HTML <style> 標簽

定義和用法

<style> 標簽用于定義文檔的樣式信息 (CSS)。

在 <style> 元素中，您可以指定 HTML 元素在瀏覽器中的呈現方式。

請注意，style 元素定義的是 HTML 文檔內嵌的 CSS 樣式，而 link 元素則是用來導入外部樣式表中的樣式。

style 元素可以出現在 HTML 文檔中的各個部分。一個文檔可以包含多 style 元素，因此不必把所有樣式定義都塞進 head 部分。在使用模板引擎生成頁面的情況下這個特性很有幫助，因為這樣一來就可以用頁面特有的樣式為模板定義的樣式提供補充。

另請參閱：

HTML 教程：HTML CSS

CSS 教程：CSS 教程

HTML DOM 參考手冊：Style 對象

實例

例子 1

使用 <style> 元素將簡單的樣式表應用于 HTML 文檔：

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>
<h1>這是標題</h1>
<p>這是一個段落。</p>
</body>
</html>

親自試一試

例子 2

相同元素的多種樣式：

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>
<h1>這是標題</h1>
<p>這是一個段落。</p>
</body>
</html>

親自試一試

提示和注釋

注意：當瀏覽器讀取樣式表時，它會根據樣式表中的信息格式化 HTML 文檔。如果在不同的樣式表中為同一個選擇器（元素）定義了一些屬性，則將使用上次讀取的樣式表中的值（請參見上面的示例）！

提示：要鏈接到外部樣式表，請使用 <link> 標簽。

提示：要了解有關樣式表的更多信息，請閱讀我們的 CSS 教程。

屬性

屬性 值 描述
media 媒體查詢 規定樣式使用的媒體。
type text/css 規定 <style> 標簽的媒體類型。

全局屬性

<style> 標簽還支持 HTML 中的全局屬性。

事件屬性

<style> 標簽還支持 HTML 中的事件屬性。

默認的 CSS 設置

大多數瀏覽器將顯示具有以下默認值的 <style> 元素：

style {
  display: none;
}

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持