内联CSS是邮件模板强制要求，因Gmail、Outlook等主流客户端会剥离<style>标签或忽略<head>；仅color、font-family等有限属性安全可用；须用CssToInlineStyles等工具自动化转换并剔除class，表格布局中<td>为样式主力载体。
为什么内联CSS是邮件模板的强制要求
因为Gmail、Outlook桌面版、Apple Mail等主流客户端会直接剥离 <style> 标签，甚至忽略整个 <head> 区域。Outlook（2007–2019）用Word引擎解析HTML，只认 style 属性里的声明；Gmail则主动过滤含 display: none 或 @media 的样式块——不是“不生效”，而是压根不加载。你写的 .btn { color: #fff; } 在浏览器里好好的，发出去后只剩纯文本。
哪些CSS属性能安全内联
不是所有CSS都能塞进 style 里还起作用。必须严格筛选：
-
color、font-family、font-size、font-weight—— 全平台稳定 -
background-color—— 可用，但background-image在Outlook中完全失效 -
padding、margin——padding在<td>上有效，margin在多数客户端（尤其是Outlook）基本被忽略 -
text-align、vertical-align—— 必须显式写，不能依赖父级继承 -
width、height—— 推荐同时用HTML属性（width="600"）+ 内联（style="width: 600px;"），双保险防缩放
禁用清单：display: flex、float、position、border-radius、@media（响应式需靠 <table> 嵌套 + max-width + 条件性 style 模拟）。
怎么把外部CSS转成真正可用的内联样式
手动复制粘贴容易漏、易错，尤其带伪类或复杂选择器时（比如 tr:nth-child(odd) 在邮件里根本无效）。正确做法是用工具自动化处理：
立即学习“前端免费学习笔记（深入）”；
- 用
CssToInlineStyles库（PHP）或juice（Node.js），它们能解析<style>并精准注入到对应元素的style属性中 - 避免用在线转换工具——很多会删掉
!important或错误合并声明，而Gmail对!important极度敏感，可能重写你的优先级 - 转换后务必检查：是否每个
<td>、<p>、<a>都有独立style？有没有残留的class或<style>？Outlook会直接忽略整段含class的标签
示例转换前：<td class="header">Hello</td> → 转换后必须是：<td style="font-size:18px; color:#333; padding:12px;">Hello</td>，不能留 class。
表格布局里内联样式的实操陷阱
邮件里没 <div> 的自由，全靠 <table> 套娃。这时内联样式的位置和重复声明很关键：
-
<table>自身尽量不设style，用HTML属性控制（width="600"、cellspacing="0"、cellpadding="0"），因为部分客户端（如Outlook 2013）会忽略table的style -
<td>是样式主力载体：文字颜色、背景、内边距都写在它上面；<p>和<span>只作语义补充，别指望它们撑起布局 - 图片必须同时写
width/heightHTML属性 +style="width:100%; height:auto;"，否则iOS Mail可能静默拉伸或截断 - 链接要加
style="color:#007bff; text-decoration:underline;"，因为Gmail默认去样式，且target="_blank"在Outlook中无效，改用target="_new"更稳
真正难的不是让样式“跑起来”，而是同一份HTML在Outlook 2019、Gmail App、Apple Mail、OWA、Android Gmail这五种环境里，文字不跑位、按钮不塌陷、图片不缩放——这要求每个 style 都得是“降级友好”的冗余声明，而不是优雅简洁的现代写法。
