HTML - <style> 標籤

HTML <style> 標籤包含 HTML 文件或文件一部分的樣式資訊。這包括CSS（層疊樣式表），它應用於包含 <style> 標籤的 HTML 文件的內容。

語法

<style>.....</style>

屬性

HTML style 標籤支援全域性和事件HTML 屬性。也接受一些特定的屬性，如下所示。

屬性	值	描述
media	media_query	指定媒體資源針對的媒體/裝置。
type	text/css	指定媒體型別。

HTML style 標籤示例

下面的示例將說明 style 標籤的用法。在哪裡、何時以及如何使用 style 標籤來設定 HTML 文件的樣式。

使用 style 標籤設定 HTML 文件樣式

在下面的程式中，我們使用 HTML <style> 標籤將簡單的樣式表 (CSS) 應用於 HTML 文件。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML style Tag</title>
   <style>
      h1 {
         color: green;
         font-size: 40px;
         font-style: italic;
      }
   </style>
</head>
<body>
   <h1>Text within h1 tag</h1>
</body>
</html>

新增多個 Style 標籤

以下是 HTML <style> 標籤的另一個示例。在這裡，我們將兩個 <style> 標籤包含到應用於 HTML 文件的樣式表中，並檢視後面的 style 元素中衝突的宣告如何覆蓋前面的宣告（如果它們具有相同的特異性）。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML style Tag</title>
   <style>
      p {
         color: rgb(17, 114, 217);
         font-size: 40px;
         font-style: italic;
         font-weight: bolder;
      }
   </style>
   <style>
      p {
         color: red;
         font-size: 35px;
         font-family: 'Franklin Gothic Medium', 
                      'Arial Narrow', Arial, sans-serif;
      }
   </style>
</head>
<body>
   <p>Text within p tag</p>
</body>
</html>

使用 style 標籤進行媒體查詢

在這個例子中，我們使用 media（即媒體查詢）屬性與第二個“style”元素一起使用。因此，只有當視口（螢幕尺寸）寬度小於 500px 時，它才會應用於 HTML 文件。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML style Tag</title>
   <style>
      h3 {
         color: red;
         font-size: 25px;
         font-style: italic;
      }
   </style>
   <style media="all and (max-width: 500px)">
      h3 {
         color: green;
         font-size: 30px;
         font-weight: bolder;
         font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 
                      'Trebuchet MS', sans-serif;
      }
   </style>
</head>
<body>
   <h3>This is the 'h3' HTML element.</h3>
</body>
</html>

支援的瀏覽器

標籤
style	是	是	是	是	是

html_tags_reference.htm

列印頁面