HTML - style 标签

HTML <style> 标签包含 HTML 文档或文档的一部分的样式信息。这包括 CSS（级联样式表），它应用于包含 <style> 标签的 HTML 文档的内容。

我们可以在单个 head 元素中拥有多个样式元素。

通常，CSS有三种类型，如果我们在head元素内部使用style元素，那么这个CSS被称为内部CSS。

语法


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

属性

属性	值	描述
media	media_query	指定针对哪些媒体/设备优化媒体资源。
type	text/css	指定媒体类型。

<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> 标签样式

以下是 <style> 标签的另一个示例。在这里，我们将两个 <style> 标签添加到 HTML 文档上应用的样式表中，并查看如果它们具有相同的特性，则后面的样式元素中的冲突声明如何覆盖前一个。


<!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> 标签的 Meadia 查询

在此示例中，我们将 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>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

打印本页