邮件内联样式
将 CSS 应用于内联样式，确保在不同邮件客户端中一致渲染
邮件内联样式 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
为什么使用内联样式
许多电子邮件客户端——尤其是 2016 年 5 月之前的 Gmail 网页版，以及如今仍有一些移动应用——会删除或重写 <style> 块和外部样式表。内联 style="..." 属性是唯一可以保证在每个客户端中保留的 CSS。
在外部 CSS 中编写，内联后发布
手动编写内联样式难以维护。请使用普通的 <style> 标签和类名编写邮件，然后在构建时运行内联工具（Juice、Premailer、mjml），在发布前将每条规则复制到匹配元素的 style 属性中。
优先级取胜
内联样式的优先级仅次于 !important。媒体查询若要覆盖内联值，必须在每个属性上使用 !important，否则无论处于什么 @media 上下文，内联声明都会获胜。
@media (max-width: 600px) {
.col {
width: 100% !important;
display: block !important;
}
}内联工具不会处理 @media
内联工具只会复制与单个元素匹配的规则；@media 代码块会留在 <style> 标签内，因为无法将其扁平化。这没有问题——Gmail 和其他会清除样式的客户端会保留内联样式，而支持 <style> 标签的客户端会在此基础上应用媒体查询。
避免使用简写形式
某些客户端会因简写形式而出现问题：font: 14px/1.4 Arial 可能会被完全忽略。请使用完整形式（font-family、font-size、line-height），这样每个属性都能独立生效或失败。
始终设置颜色和背景
许多客户端会自动在深色模式下反转颜色。请明确为文本容器设置 color 和 background-color，避免出现黑字黑底的问题。请始终同时设置这两项。
长度单位
尺寸请坚持使用 px。rem、vh 和 vw 的支持不一致。对于全宽布局，表格可以使用百分比；内层表格和单元格使用绝对像素宽度，可以在不同客户端中保持一致渲染。
字体：网页安全字体栈
通过 @font-face 使用网页字体在 Apple Mail、iOS Mail 和 Thunderbird 中有效，但在 Outlook 和 Gmail 中会失效。请将网页安全字体栈（Arial、Helvetica、sans-serif）用作内联值，并仅将 @font-face 作为支持它的客户端的渐进增强方案。
背景图像与 Outlook
在 div 上使用内联 background-image 在现代客户端中有效，但会被 Outlook 忽略。请使用 bgcolor 作为后备方案，并为 Outlook 使用条件 VML <v:rect>，这样即使无法实现完全一致的效果，每个客户端也能渲染出视觉上等效的背景。
在真实客户端中测试
内联样式在浏览器预览中看起来正确，但在 Gmail、Outlook 或 iOS Mail 中仍可能呈现不同。请使用 Litmus、Email on Acid 或免费的 Mailtrap 预览，在发送营销活动前验证每个主要客户端。
重置样式
在 <style> 标签中添加一个小型重置（body 的 margin: 0、表格的 line-height: 100%、图像的 border: none），以消除客户端的默认样式。如果只希望在支持 <style> 的环境中应用它，请将其放入媒体查询中。
知识检查
为什么 HTML 电子邮件中的媒体查询要求每个属性都使用 !important？
总结
电子邮件需要内联样式才能避免被客户端删除，但通常会在构建时将样式写入 <style> 并同时内联。请在媒体查询中使用 !important 来压过内联样式的优先级，优先使用完整属性而不是简写属性，明确设置 color 和 background-color，坚持使用 px 单位，并在发送前通过真实客户端进行测试。
常见问题解答
「邮件内联样式」课时是免费的吗？
是的 — 「邮件内联样式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「邮件内联样式」这节课中我会学到什么？
将 CSS 应用于内联样式，确保在不同邮件客户端中一致渲染 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「邮件内联样式」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。