style属性用于HTML元素内联样式,格式为“属性: 值”,分号分隔多个声明,必须写在开始标签中,仅作用于当前元素,不支持伪类、媒体查询和CSS规则,优先级高于外部及内部样式表。

style 属性直接写在 HTML 标签里,用分号分隔多个声明,每个声明是 属性: 值 形式,不加引号、不换行、不嵌套。
style 属性的语法和常见写法
它必须是内联样式,只能出现在开始标签中,例如:<p style="color: red; font-size: 14px;">文字</p>。注意:
- 冒号前后可有空格,但分号后必须有空格或换行(实际建议紧贴下一个属性)
- 颜色值支持
red、#ff0000、rgb(255,0,0)等,但不能写color: 'red'(引号会失效) - 单位如
px、em、%必须显式写出,font-size: 14是无效的 - 属性名用短横线分隔(
background-color),不是驼峰(backgroundColor)
哪些 CSS 属性能在 style 里用?
绝大多数 CSS 属性都支持,但有明确限制:
-
display: none、visibility: hidden可用;但@media、@keyframes、import这类规则不能出现在style属性中 - 伪类(如
:hover)和伪元素(如::before)完全不支持——style="color: red; :hover{color:blue}"会整个失效 - CSS 变量(
--main-color)可以定义和使用,但兼容性要注意:IE 完全不支持,旧版 Safari 需加前缀
style 属性和 <style> 标签的区别
别把 style 属性和 <style> 标签混淆:
-
style是 HTML 元素的**属性**,作用域仅限当前标签,优先级最高(可覆盖外部 CSS) -
<style>是 HTML **标签**,放在<head>或元素内部(配合scoped),写的是完整 CSS 规则,支持选择器和媒体查询 -
<style type="text/css">中的type属性已成冗余,现代浏览器默认就是text/css,不写也行 -
<style scoped>在 Chrome 127+ 和 Firefox 124+ 支持,但 Safari 仍不支持,生产环境慎用
容易被忽略的坑
实际写的时候,这几个点最常导致样式不生效:
- HTML 属性值必须用双引号或单引号包裹,
style=color:red是错的,必须是style="color:red" - 中文冒号、全角空格、复制粘贴带隐藏字符(比如 Zero Width Space)会导致整条声明被浏览器丢弃
-
z-index在style里生效的前提是该元素已设置position(relative、absolute等),否则无效 - 动态拼接字符串时(比如 JS 中
el.style = "color:" + c),要确保c值合法且带单位,否则静默失败
style 属性」——它绕过了 CSS 的层叠和复用机制,调试时很难追溯来源,一不小心就变成“样式意大利面”。



















