“内联样式”和“行内样式”是同一概念,均指直接写在HTML标签style属性中的CSS规则,如Hello,二者仅因中文翻译习惯不同而并存,无语法或行为差异。

它们是同一个东西,只是叫法不同。
“内联样式”和“行内样式”都指直接写在 HTML 标签 style 属性里的 CSS,比如:
Hello
没有语法、行为或浏览器支持上的区别,只是中文命名习惯导致的术语混用。
为什么会有两个名字?
这是前端领域长期存在的术语混淆现象:
- 「行内」强调位置:样式写在标签「行内」(即同一行 HTML 元素里);
- 「内联」强调方式:样式「内联」到元素上,不经过选择器匹配。
W3C 规范中用的是 inline style,中文翻译时有人译作“内联”,有人译作“行内”,久而久之两者并存。所有主流文档(MDN、CSS Tricks、国内 CSDN 博客)都把二者等同使用。
和内部样式表()别搞混
真正容易出错的,是把「行内/内联样式」和「内部样式表」弄混:
-
style属性 → 行内/内联样式(作用于单个标签); -
块 → 内部样式表(作用于整个页面,靠选择器匹配); -
→ 外部样式表。
例如下面这段代码里,p 同时有行内样式和内部样式规则:
立即学习“前端免费学习笔记(深入)”;
文字
最终显示为红色——因为行内样式的优先级高于内部样式表(具体是 1000 vs 100 的层叠权重),不是名字不同导致的差异,而是书写位置和 CSS 优先级规则决定的。
开发中该用哪个说法?
建议统一用「行内样式」:
- 更符合字面理解(写在标签“行内”);
- 和「行内元素」
display: inline形成语义呼应; - 团队协作、Code Review 或写注释时,避免对方误以为「内联」是指 JS 中的
:style绑定(Vue/React 里常称“内联样式对象”)。
尤其注意:Vue 模板里 :style="{ color: 'red' }" 是响应式样式绑定,它生成的仍是行内样式(最终渲染为 style="color: red;"),但这个过程本身不属于“手写行内样式”,别被名称带偏。
实际项目里,只要看到 style="..." 就知道是行内样式,不用纠结叫法。真正要花精力的,是判断「这里该不该用它」——绝大多数时候,答案是否定的。










