CSS 转为内联 HTML。电子邮件内联处理器

将样式表和 CSS 类自动转换为 HTML 中的内联样式。非常适合电子报、交易邮件和安全的网页布局。

原始 HTML
CSS 规则
内联 HTML 结果
工具工作室

想把这个工具添加到你的网站吗?

为 WordPress、Notion 或你自己的网站自定义配色和深色模式。

常见问题

为什么电子邮件需要内联 CSS 而不是外部样式表?

电子邮件客户端(如 Outlook、Gmail 或 Apple Mail)出于安全原因会过滤或忽略 <link> 和 <style> 标签。确保样式在电子邮件中正确应用的唯一方法是直接将其嵌入每个 HTML 元素的 style 属性中。

如果元素已经有自己的 style 属性会怎样?

该工具尊重现有的内联样式并附加新属性,模拟 CSS 级联行为:后声明的属性在冲突时覆盖前面的属性。

它是否适用于 :hover 或媒体查询等复杂选择器?

该工具处理 DOMParser 可以解析的类、id、属性和结构伪类选择器。依赖状态的选择器(如 :hover)和媒体查询无法内联化(它们依赖于运行时环境)并被忽略。

我的 HTML 和 CSS 是否会发送到任何服务器?

不会。所有处理都 100% 在您的浏览器中使用原生 DOMParser API 进行。您的代码不会离开您的设备,确保包含敏感内容的模板具有完全隐私。

# CSS 内联处理器是什么以及为什么需要它?

在开发现代网络应用程序时,我们习惯于分离关注点:HTML 构建结构,外部 CSS 文件提供所有视觉样式。但是,并非所有环境都信任外部样式表或全局 <style> 标签。外部 CSS 最流行和最严格的失败用例是电子邮件模板开发。在这些环境中,确保字体、颜色或边距正确呈现的唯一可靠方法是直接嵌入标签中:<span style="color: red;">

# 电子邮件客户端中的 CSS 问题

微软 Outlook、Apple Mail 或 Gmail 等电子邮件客户端以其限制性的 CSS 渲染引擎而闻名。大多数过滤或丢弃 <link><style> 标签,害怕可能破坏阅读界面的代码注入。
对于时事通讯或交易电子邮件(收据、账户确认),使用表格和内联 CSS 是电子邮件营销行业的黄金标准。

# 此工具如何在您的浏览器中工作

  • 安全解析:使用 DOMParser API 将输入 HTML 临时转换为浏览器内的安全虚拟 DOM。
  • 级联模拟:分析您的 CSS 规则,对选择器应用特异性权重,并通过注入代码来改变选定 HTML 元素的 style 属性。
  • 100% 离线:您的代码不会离开您的设备。对包含敏感内容的模板提供完全隐私。

参考文献