在html中使用style标签定义样式是css内嵌样式的核心实现方式，这种方式将css代码直接嵌入到html文档内部，不需要额外引入外部css文件，适合单个页面的样式定制场景。
style标签的基本使用规范
style标签属于html的标签元素，必须放在html文档的<head>标签内部，浏览器解析时会识别其中的css代码并应用到当前页面。style标签本身不需要设置特殊属性，不过通常会添加type属性声明内容类型，虽然现代浏览器已经默认支持text/css类型，但加上属性可以让代码兼容性更好。
基本的结构示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>style标签使用示例</title>
<style type="text/css">
/* 这里是css样式代码 */
</style>
</head>
<body>
</body>
</html>
css内嵌样式的编写规则
style标签内部的语法和普通css文件完全一致，支持所有css选择器、属性和值。可以针对html元素设置样式，也可以使用类选择器、id选择器、后代选择器等复杂选择器。内嵌样式的优先级高于html元素的默认样式，但是低于行内样式。
基础样式实例
下面给页面中的所有<p>标签设置文字颜色和字体大小：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基础内嵌样式示例</title>
<style type="text/css">
/* 标签选择器设置所有p标签样式 */
p {
color: #333333;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<p>这是第一段测试文字</p>
<p>这是第二段测试文字</p>
</body>
</html>
类选择器与id选择器实例
使用类选择器和id选择器可以给特定元素设置样式，灵活性更高：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>选择器实例</title>
<style type="text/css">
/* 类选择器，作用于所有class为highlight的元素 */
.highlight {
background-color: #fff3cd;
padding: 10px;
border-radius: 4px;
}
/* id选择器，作用于id为main-title的元素 */
#main-title {
color: #1a73e8;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1 id="main-title">页面主标题</h1>
<p class="highlight">这是需要高亮的段落内容</p>
<div class="highlight">这是需要高亮的div内容</div>
</body>
</html>
内嵌样式的适用场景
内嵌样式适合以下场景：
- 单个页面的样式比较简单，不需要复用样式代码
- 需要给某个页面设置独有的样式，不希望影响其他页面
- 快速测试css样式效果，不需要单独创建css文件
如果多个页面需要共用同一套样式，建议使用外部css文件引入的方式，避免重复编写代码，也方便后续维护。
注意事项
使用style标签定义样式时需要注意几个问题：
- style标签必须放在<head>内部，放在<body>中虽然部分浏览器也能解析，但不符合html规范
- style标签内部的css代码不要包含html标签，只需要写纯css语法
- 内嵌样式会增加html文件的体积，如果样式内容过多，会影响页面的加载速度
下面是综合多个选择器的完整实例，实现简单的页面布局样式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>综合内嵌样式实例</title>
<style type="text/css">
/* 重置默认边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "微软雅黑", sans-serif;
background-color: #f5f5f5;
}
.container {
width: 1200px;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
}
.header {
background-color: #1a73e8;
color: #ffffff;
padding: 15px;
text-align: center;
}
.content {
padding: 20px 0;
}
.footer {
border-top: 1px solid #eeeeee;
padding: 15px;
text-align: center;
color: #666666;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>网站头部</h1>
</div>
<div class="content">
<p>这里是页面正文内容区域</p>
</div>
<div class="footer">
<p>网站底部版权信息</p>
</div>
</div>
</body>
</html>