style属性用于html元素内联样式，格式为“属性: 值”，分号分隔多个声明，必须写在开始标签中，仅作用于当前元素，不支持伪类、媒体查询和css规则，优先级高于外部及内部样式表。
style 属性直接写在 HTML 标签里，用分号分隔多个声明，每个声明是 属性: 值 形式，不加引号、不换行、不嵌套。
style 属性的语法和常见写法
它必须是内联样式，只能出现在开始标签中，例如：<p style="color: red; font-size: 14px;">文字</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>。注意：
- 冒号前后可有空格，但分号后必须有空格或换行（实际建议紧贴下一个属性）
- 颜色值支持
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></style>是 HTML **标签**，放在或元素内部（配合scoped），写的是完整 CSS 规则，支持选择器和媒体查询 -
<style type="text/css"></style>中的type属性已成冗余，现代浏览器默认就是text/css，不写也行 -
<style scoped></style>在 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 的层叠和复用机制，调试时很难追溯来源，一不小心就变成“样式意大利面”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
