CSS内联样式是通过HTML元素的style属性直接将样式规则绑定到对应元素上的样式定义方式，它的作用范围仅针对当前绑定的单个元素，样式优先级高于内部样式表和外部样式表，适合为页面中个别元素设置特殊样式效果。
内联样式的基本语法
内联样式的语法非常简单，直接在目标HTML元素的开始标签中添加style属性，属性值由一条或多条CSS声明组成，每条声明由CSS属性名和属性值构成，中间用冒号分隔，多条声明之间用分号分隔，最后一条声明的分号可以省略。
基本格式如下：
<!-- 单条样式声明 --> <div style="color: red;">红色文字</div> <!-- 多条样式声明 --> <p style="font-size: 16px; line-height: 1.5; color: #333;">这是一段设置了字体大小、行高和颜色的文字</p>
常见CSS属性在内联样式中的写法
内联样式中支持的CSS属性和外部样式表、内部样式表中的属性完全一致，只是写法上不需要再写选择器和花括号，直接把属性写在style属性值中即可。下面是一些常见属性的使用示例：
文本相关属性
<span style="font-family: 'Microsoft YaHei', sans-serif; font-weight: bold; text-align: center;">加粗居中的微软雅黑文字</span>
盒模型相关属性
<div style="width: 200px; height: 100px; padding: 20px; margin: 10px auto; border: 1px solid #ccc;">固定宽高的盒子</div>
背景相关属性
<section style="background-color: #f5f5f5; background-image: url(https://ipipp.com/bg.png); background-repeat: no-repeat;">带背景的区块</section>
内联样式的使用注意事项
- 内联样式的优先级最高，当同一个元素同时存在内联样式、内部样式表和外部样式表的样式定义时，内联样式的规则会优先生效，除非其他样式使用了
!important标记。 - 内联样式无法复用，每个需要相同样式的元素都需要单独写style属性，会导致代码冗余，因此不建议在大范围元素上使用内联样式，更适合用于临时调试或者单个元素的特殊样式设置。
- style属性值中不能写CSS注释，也不能写
@media等at规则，内联样式仅支持常规的CSS属性声明。 - 如果属性值中包含多个单词，需要用引号包裹，比如字体族设置中的
font-family: 'Microsoft YaHei'，单引号或者双引号都可以，但在HTML属性中如果用双引号包裹style值，内部属性值建议用单引号。
内联样式与其他样式方式的优先级对比
我们可以通过下面的表格清晰看到不同样式定义方式的优先级顺序：
| 样式类型 | 优先级顺序 | 作用范围 |
|---|---|---|
| 内联样式（style属性） | 最高（1） | 单个绑定元素 |
| 内部样式表（style标签） | 次之（2） | 当前HTML页面 |
| 外部样式表（link引入） | 最低（3） | 引入该文件的页面 |
实际使用示例
下面是一个完整的HTML页面示例，展示了内联样式的实际应用场景：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内联样式示例</title>
<style>
/* 内部样式表定义的样式 */
.box {
background-color: #e8f4ff;
}
</style>
</head>
<body>
<!-- 这个div同时有内部样式和内联样式，内联样式生效 -->
<div class="box" style="background-color: #fff3e8; width: 300px; height: 150px;">
这个盒子的背景色是内联样式设置的浅橙色，而不是内部样式表的浅蓝色
</div>
<!-- 单个元素的特殊样式 -->
<button style="padding: 10px 20px; background-color: #1677ff; color: white; border: none; border-radius: 4px;">特殊样式按钮</button>
</body>
</html>
通过上述示例可以看到，内联样式可以快速为单个元素设置独有的样式，不需要额外定义CSS类或者ID选择器，在需要快速调整单个元素样式的场景下非常实用。