当页面中只需要单独调整某个元素的样式时，例如一行提示文字、一个按钮或者一张图片，直接修改外部样式表可能不够精准。CSS内联样式可以跳过选择器，把声明写进元素的style属性里，让样式只对当前标签生效。这种方式与在<style>块或独立CSS文件中编写的规则不同，它没有选择器，也没有花括号，只是把一组CSS声明作为属性值使用。
内联样式最明显的特征是直接依附在HTML标签上，因此它天然适合控制单个元素。下面从语法、优先级、适用场景以及JavaScript操作等几个方面，具体说明如何利用内联样式控制单个元素，同时避免误用带来的维护问题。
一、内联样式的基础写法
内联样式的语法并不复杂，它利用HTML的全局属性style来承载CSS声明。属性名和属性值之间用冒号连接，多条声明之间用分号分隔。虽然最后一条声明之后的分号可以省略，但建议始终保留，这样后续追加新声明时不容易漏掉分隔符。
一个典型的内联样式写法如下：
<p style="color: #c0392b; font-size: 18px; line-height: 1.6;">这是被内联样式直接控制的段落。</p>
这段代码只影响当前<p>标签，不会改变页面中其他段落的颜色、字号或行高。可以看到，内联样式不需要写选择器，也不需要写在<style>块中，所有规则都集中在style属性内部。对于简单的局部调整来说，这种写法最直接，也能减少样式扩散带来的意外影响。
如果属性值中包含空格或特殊字符，例如字体名称Microsoft YaHei，通常要给整个属性值加上引号。由于外层style属性习惯使用双引号，内部字体名可以使用单引号，如font-family: 'Microsoft YaHei'。这样既符合HTML属性规范，也能保证CSS解析正确。
二、内联样式的优先级与覆盖关系
内联样式的优先级在CSS层叠规则中非常高。由于它直接写在元素自身的style属性中，不再需要通过选择器去匹配，因此它会覆盖外部样式表或<style>块中针对同一属性的普通规则。即使外部规则使用了类选择器、ID选择器，只要没有!important，内联样式仍然会胜出。
可以这样理解：内联样式的优先级相当于比ID选择器更高一级，因为它在样式来源上更靠近元素本身。下面的例子展示了这种覆盖关系：
<style>
.notice { color: #2980b9; }
</style>
<p class="notice" style="color: #c0392b;">最终文字会显示为红色。</p>
在这个例子中，类选择器.notice把颜色定义为蓝色，但内联样式又设置了红色。由于内联样式优先级更高，最终文字颜色为红色。这种覆盖机制很适合用来临时调整某个元素的样式，但也意味着一旦页面中大量使用内联样式，外部样式表就很难统一控制这些元素。
有一种例外情况是外部规则带有!important。例如外部样式表写成.notice { color: #2980b9 !important; }，那么此时内联样式中的普通声明将被覆盖。不过，频繁使用!important本身也会破坏样式的可维护性，实际项目中应当谨慎使用。
三、适合使用内联样式的场景
内联样式并非用于所有场景的首选方案，但在某些情况下它确实非常高效。动态生成样式是其中的典型场景。JavaScript可以直接操作元素的style属性，根据数据或用户交互改变单个元素的外观，而不需要提前在样式表中定义大量可能用不到的类。
邮件HTML是另一个常见场景。很多邮件客户端对外部样式表和<style>块的支持并不一致，内联样式则能保证最大程度的兼容性。此外，富文本编辑器在保存或预览内容时，也经常使用内联样式来保留用户对某段文字或图片的格式设置。
const box = document.querySelector('.box');
box.style.backgroundColor = '#f39c12';
box.style.padding = '16px';
上面这段JavaScript会直接修改box元素的内联样式，相当于给该元素写入了背景色和内边距。这种操作只影响当前元素，不会对其他同类元素产生副作用。对于需要即时反馈的交互组件来说，使用内联样式是一种简洁有效的实现方式。
不过，如果多个元素需要共享同一套样式，或者样式需要随窗口尺寸变化而改变，内联样式就难以胜任。它不支持伪类选择器，也无法直接书写媒体查询。此时更合适的做法是定义CSS类，然后通过JavaScript切换类名来改变样式。
四、内联样式的局限与替代方案
内联样式最大的局限在于无法表达状态和响应式规则。例如鼠标悬停时的效果，必须借助:hover这样的伪类，而伪类无法写在style属性里。同样，媒体查询、关键帧动画以及伪元素也无法直接通过内联样式实现。遇到这些需求时，需要将样式迁移到外部样式表或<style>块中。
一种折中方案是借助CSS变量。可以在内联样式中设置自定义属性，然后让外部样式表读取该变量，从而间接为单个元素提供动态值。举例如下：
<button class="btn" style="--brand-color: #8e44ad;">按钮</button>
.btn {
background-color: var(--brand-color, #3498db);
}
.btn:hover {
filter: brightness(0.95);
}
在这个示例中，内联样式只负责定义--brand-color这个变量，而按钮本身的背景色、悬停效果仍由外部CSS控制。这样做既能保留对单个元素的差异化设置，又能继续使用伪类和响应式规则。对于组件化开发或需要局部定制主题的场景，这是一种比直接写完整内联样式更清晰的思路。
此外，如果某条样式需要在多个元素之间复用，或者后续可能频繁调整，最好从一开始就使用类名来管理。内联样式更适合一次性、临时性的覆盖，而不是长期稳定的样式来源。
五、通过JavaScript读取和修改内联样式
JavaScript中的element.style对象对应元素的内联样式，可以通过它读取或设置具体属性。不过需要注意的是，element.style只能反映写在style属性里的声明。如果样式来自外部样式表，或者已经被覆盖，直接读取element.style可能会得到空字符串。
如果希望获取元素最终生效的样式，应该使用getComputedStyle。它会返回计算后的样式值，包括外部样式、继承样式以及浏览器默认样式参与计算后的结果。下面这段代码展示了两种读取方式的区别：
const el = document.getElementById('tip');
console.log(el.style.color); // 仅能读取内联样式，若未设置则返回空字符串
const finalColor = getComputedStyle(el).color;
el.style.cssText = 'color: #2ecc71; margin-top: 12px;';
通过style.cssText可以一次写入多条声明，它相当于直接替换整个style属性的内容。如果想清除某个内联声明，可以把对应属性设置为空字符串，例如el.style.color = ''，或者使用el.removeAttribute('style')移除整个内联样式。这些方法在动态交互中非常实用，能够帮助开发者精准控制单个元素的外观变化。
总而言之，内联样式是一种定位明确的样式控制手段。它在临时覆盖、动态生成和兼容性要求高的场景中表现突出，但不应替代外部样式表成为主要管理方式。理解它的优先级、边界以及与JavaScript的配合方式，才能真正用好style属性，让单个元素的样式调整既准确又可控。