内联CSS是通过HTML元素的style属性直接将样式规则写在元素标签内部的样式应用方式，它的作用范围仅针对当前绑定的单个元素，是CSS三种引入方式中优先级最高的一种。
内联CSS的基础语法
内联CSS的语法结构非常简单，只需要在目标HTML元素的开始标签中添加style属性，属性值内写入CSS样式声明即可，多个样式声明之间用分号分隔。
基础语法格式如下：
<!-- 给div元素添加内联样式 -->
<div style="color: red; font-size: 16px; padding: 10px;">
这是一个带有内联样式的div元素
</div>
上面的代码中，style属性里的color: red设置文字颜色为红色，font-size: 16px设置字体大小为16像素，padding: 10px设置内边距为10像素，这些样式只会作用于当前这个div元素。
内联CSS的常见使用场景
- 快速调试单个元素的样式，不需要修改外部CSS文件，直接在元素上调整样式看效果
- 给动态生成的HTML元素添加样式，比如通过JavaScript创建的临时元素，直接写入内联样式更方便
- 邮件模板开发，很多邮件客户端对外部CSS和内部CSS的支持不好，内联CSS的兼容性更强
- 需要覆盖其他优先级更低的样式时，使用内联CSS可以快速实现样式覆盖
内联CSS的使用限制
虽然内联CSS使用起来很方便，但它也存在一些明显的限制，实际开发中不建议大规模使用：
- 样式无法复用，每个需要相同样式的元素都要单独写一遍style属性，代码冗余度高
- 不利于后期维护，如果需要修改样式，要逐个找到所有带对应内联样式的元素进行修改
- 无法使用CSS的一些高级特性，比如伪类选择器
:hover、伪元素::before等都无法通过内联CSS实现 - 不符合结构与样式分离的前端开发最佳实践，会让HTML文件变得臃肿
内联CSS与其他CSS引入方式的优先级对比
当同一个元素同时存在多种CSS样式来源时，优先级从高到低依次为：
| 样式类型 | 优先级 | 说明 |
|---|---|---|
| 内联CSS（style属性） | 最高 | 权重为1000，会覆盖其他所有同属性样式 |
| 内部CSS（<style>标签内） | 中等 | 权重根据选择器计算，低于内联CSS |
| 外部CSS（link引入的文件） | 较低 | 权重根据选择器计算，低于内联CSS |
| 浏览器默认样式 | 最低 | 元素自带的默认样式，会被所有自定义样式覆盖 |
内联CSS使用注意事项
在使用内联CSS时，需要注意以下几点：
- CSS属性名和属性值的写法要符合CSS规范，比如
font-size不能写成font_size - 属性值如果包含多个单词，需要用英文引号包裹，比如
font-family: "Microsoft YaHei" - 不要在内联CSS里写CSS注释，内联样式的属性值中不支持
/* 注释内容 */这种语法 - 如果样式需要复用，尽量改用内部CSS或者外部CSS，减少内联CSS的使用量
内联CSS代码示例
下面是一个完整的内联CSS使用示例，包含不同元素的样式设置：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内联CSS示例</title>
</head>
<body>
<!-- 标题元素内联样式 -->
<h2 style="color: #333; text-align: center; margin-top: 20px;">内联CSS示例页面</h2>
<!-- 段落元素内联样式 -->
<p style="line-height: 1.8; color: #666; width: 80%; margin: 0 auto;">
这是一段带有内联样式的段落文字，行高是1.8倍，文字颜色为深灰色，宽度为父元素的80%，水平居中显示。
</p>
<!-- 按钮元素内联样式 -->
<button style="background-color: #007bff; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; margin-top: 20px;">
点击按钮
</button>
</body>
</html>
上面的示例中，三个不同的元素都通过style属性添加了各自的内联样式，这些样式互不干扰，只作用于对应的元素本身。