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

打印页面