HTML style 语法
在 HTML 中，style 标签用于在当前页面嵌入 CSS 样式，而无需创建单独的 CSS 文件。
语法：
<style>
/* 这里写CSS样式 */
</style>说明：
在最新的 HTML5 标准中，style 标签不需要加上 type="text/css" 属性。下面 2 种写法是等价的，推荐写法 1。
<!--写法1-->
<style>
……
</style>
<!--写法2-->
<style type="text/css">
……
</style>注意:
- 尽量不要在一个页面使用多个 style 标签。
- 如果 CSS 代码过多，应该使用外部 CSS 文件。
HTML style 摘要
| 属于 | HTML 标签 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML style 示例
接下来，我们通过一个简单的例子来讲解一下 HTML style 标签是如何使用的。
示例 1：style 标签定义 CSS 样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p { color: red; }
</style>
</head>
<body>
<p>绿叶网 - 为好教程，全力以赴</p>
</body>
</html>页面效果如下图所示。
分析：
<style>
p { color: red; }
</style> 上面代码表示定义 p 元素的颜色为红色。这里涉及了 CSS 的语法，小伙伴们可以关注我们的：CSS 教程。
style 标签的 media 属性
style 标签有一个非常强大的属性——media。它允许我们指定该段样式 “仅在特定的媒体或设备下生效”，比如仅在手机上生效，或仅在打印时生效。
示例 2：针对不同屏幕宽度（响应式）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body {
font-size: 20px;
background-color: lightskyblue;
}
</style>
<style media="(max-width: 600px)">
body {
font-size: 14px;
background-color: hotpink;
}
</style>
</head>
<body>
<p>绿叶网</p>
</body>
</html>默认情况下，页面效果如下图 1 所示。当我们改变浏览器窗口大小后，使得窗口宽度小于 600px后，页面效果如下图 2 所示。
分析：
<style media="(max-width: 600px)">
body {
font-size: 14px;
background-color: hotpink;
}
</style>由于我们给 style 标签加上了 media="(max-width: 600px)"，因此这段 style 代码只会在屏幕尺寸小于等于 600px 时生效。
示例 3：打印样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style media="print">
/* 打印时隐藏导航栏和底部 */
nav, footer, .ad-banner {
display: none;
}
/* 打印时确保文字为黑色 */
body {
color: black;
background: white;
}
</style>
</head>
<body>
<p>绿叶网</p>
</body>
</html>分析：
当用户按下 “Ctrl + P“ 组合键来打印网页时，我们通常希望隐藏导航栏、广告等无关内容，而只打印正文。此时就可以给 style 标签加上 media="print" 来实现。
