CSS 电子邮件内联器
将 CSS <style> 块规则内联到每个匹配 HTML 标记的 style 属性中，用于大多数客户端会移除 <style> 标记的电子邮件 HTML。支持简单标记、类、ID 和标记+类选择器——没有后代组合子、伪类或特异性级联。
输入
When off, rules this tool can't inline are dropped instead of preserved.
输出
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-email-inliner \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"htmlInput": "<style>p { color: red; }</style><p>Hello</p>",
"keepUnsupportedRules": "true",
"removeClassAttrs": ""
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-email-inliner` tool (CSS Email Inliner) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-email-inliner/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS 电子邮件内联器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
此工具的功能
大多数电子邮件客户端（Gmail、Outlook 和许多其他客户端）在渲染 HTML 电子邮件时会删除 <style> 块和 <head> 内容，或以不可预测的方式忽略它们。唯一保证幸存的 CSS 是直接在每个元素上作为 style="..." 属性写入的 CSS。"CSS 内联化"是获取在普通 <style> 块中写入的规则并将其声明复制到它们匹配的每个元素的过程，以便电子邮件在任何地方都正确呈现，而不依赖于样式表支持。
此工具可以执行此操作：粘贴包含 <style> 块的 HTML，它将使用内联 style 属性重写每个匹配的标记，携带已解决的声明，然后删除（或可选地保持）原始 <style> 块。
诚实的范围：仅简单选择器
完整的 CSS 选择器引擎——后代组合子（div p）、子/兄弟组合子（div > p、p + span）、伪类和伪元素（a:hover、p::first-line）、属性选择器（[href]）和特异性级联解决——是一个真正困难的解析问题，需要一个真实的浏览器 DOM 来查询。此工具以同构方式运行（浏览器、服务器和 API），没有可用的 DOM 解析器，因此故意不尝试任何这些。
它支持的内容与原始 HTML 源的基于模式的扫描相匹配：
- 标记选择器 —
p、td、h1 - 类选择器 —
.button - ID 选择器 —
#header - 标记 + 类选择器 —
p.intro
您的样式表中的任何其他内容——后代选择器、伪类、属性选择器、混合支持和不支持形式的逗号列表——都被分类为"不支持"，默认情况下，保留在输出顶部的 <style> 块中，而不是被静默删除或不匹配。如果您希望输出根本没有 <style> 块，请关闭此选项。
也没有特异性级联：当两个或多个受支持的规则匹配同一元素时，在您的样式表中后出现的规则将对两者都设置的任何属性赢得——无论它是标记、类还是 ID 选择器。真实浏览器会在类选择器之上加权 ID 选择器，在标记选择器之上加权；此工具不会。元素的预先存在的 style="..." 属性始终被保留，并始终优先于从样式表中提取的任何内容。
如果您的电子邮件模板依赖于后代选择器、伪类或精确特异性解决，请改用基于构建工具的内联器——juice 或 Premailer 都实现了完整的选择器引擎，是复杂样式表的正确选择。
如何使用
- 将包含
<style>块的 HTML 粘贴到输入框中。 - 保持**"保留不支持的规则"**被选中，以在输出的顶部的
<style>块中保留此工具无法内联的媒体查询、伪类规则和其他选择器（大多数支持媒体查询的电子邮件客户端仍将读取放在那里的<style>块）。取消选中以完全删除它们。 - 选中**"删除 class 属性"**，如果您希望在其样式被内联后从输出中删除
class="..."——这很有用，因为某些收件箱会标记仍然引用外部类名的电子邮件。 - 从输出面板复制或下载生成的 HTML。
编辑输入时，输出会自动更新。
FAQ
这会正确处理我的整个电子邮件模板吗？
它正确处理常见情况——标记、类、ID 和标记+类规则。如果您的样式表使用后代选择器、伪类或依赖 CSS 特异性来解决规则之间的冲突，此工具会将这些规则留在 <style> 块中而不是猜测，因此请在发送前检查输出。请参见上面的范围部分。
@media 查询会发生什么？
它们无法被内联（媒体查询未绑定到单个元素），因此当选中"保留不支持的规则"时，它们会留在输出的 <style> 块中。某些电子邮件客户端（特别是 Apple Mail 和较新版本的 Outlook/Gmail）确实会读取 <style> 块以进行媒体查询，即使在删除其他样式后也是如此——这正是此工具将其保留在那里而不是丢弃它的原因。
我的元素已经有 style="..." 属性——它会发生什么？
它被保留并始终优先于从样式表内联的任何内容，与真实浏览器如何优先考虑内联样式而不是样式表规则相匹配。
它会验证或修复损坏的 HTML 吗？ 否——这是尽力而为的转换，而不是 HTML 验证器。在格式严重错误的输入上，它会回退到返回您的 HTML 不变，而不是生成混乱的输出或错误。
隐私
此工具完全在您的浏览器中运行。您的 HTML——包括任何嵌入的链接、跟踪像素或个性化内容——永远不会上传到服务器。