不喜欢广告? 无广告 今天

CSS邮件内联(样式属性内联)

开发人员文本
广告 移除?

指导

CSS电子邮件内联器(样式属性内联器)

CSS邮件内联(样式属性内联)

将包含块的HTML转换为适用于电子邮件的标记,将每个CSS规则移动到内联style=""属性中。电子邮件客户端会剥离或忽略块,因此内联是确保设计在Gmail、Outlook、Yahoo和Apple Mail中保持一致的唯一可靠方法。

将您的完整HTML粘贴到左侧;该工具会解析每个选择器,精确地解析CSS特异性,就像浏览器一样,并将获胜的声明写入每个匹配的元素。对于:hover等伪类规则和任何@media查询,会保留在一个残余的块中,因为仍支持这些功能的电子邮件客户端需要它们。

如何使用

  1. 将您的HTML——完整的文档或带有块的片段——粘贴到输入字段中。
  2. 决定是否保留媒体查询和伪类规则(推荐用于响应式电子邮件)。
  3. 可选地在样式内联后移除类属性。
  4. 根据您希望获得可读或紧凑的结果,开启或关闭美化显示功能。
  5. 复制内联HTML或将其下载为文件,然后直接将其粘贴到您的电子邮件服务提供商中。

特征

  • 特异性感知合并 – 精确解析ID、类、属性和元素类型,与浏览器级联方式一致。
  • !important处理 – 外部的!important声明能正确覆盖普通内联样式,符合CSS规范。
  • 媒体查询保留 – 保留响应式@media规则,以确保移动设备断点正常触发。
  • 伪类降级 – :hover、:focus和::before规则无法内联;工具会将它们保留在一个精简的块中。
  • 多个块 – 处理包含多个样式标签的文档 <head> 或 <body>.
  • 可选的类属性移除 – 移除现在冗余的class=""属性,以获得更轻量的payload。
  • 美化输出 – 以缩进格式的可读HTML或紧凑单行输出。
  • 100% 客户端 – 您的HTML永远不会离开浏览器。无需上传,无需服务器处理。

广告 移除?

常问问题

  1. 为什么电子邮件HTML需要内联CSS而不是使用块?

    许多电子邮件客户端——尤其是较旧版本的Outlook和多个网页邮箱服务提供商——要么完全剥离头部元素,要么将消息沙箱化,从而忽略外部和嵌入式样式。每个元素上的内联style属性是所有主流邮件客户端所认可的唯一声明形式,因此内联步骤是确保设计在Gmail、Outlook、Yahoo和Apple Mail中保持一致的硬性要求。

  2. 什么是CSS特异性,以及级联顺序为何对内联至关重要?

    特异性是CSS根据选择器中的ID、类、属性、伪类和元素类型赋予的权重。当两个规则针对同一元素的同一属性时,浏览器会保留特异性更高的规则的值;在平局情况下,按源顺序决定,后出现的规则获胜。内联工具必须逐个重新执行该算法,否则低特异性的规则可能会覆盖高特异性的规则,导致渲染设计无声地改变。

  3. !important标志如何与内联样式互动?

    在标准级联中,内联样式位于作者样式表的更高层级,因此通常会覆盖任何类或元素级别的规则。!important标志是唯一的例外:来自作者样式表的!important声明会覆盖非!important的内联声明。这就是为什么在类中设置白色!important的按钮即使元素带有style="color: blue"也会显示为白色。

  4. 为什么像:hover或伪元素::before这样的伪类规则无法内联?

    style属性包含应用于其所在元素的无条件声明。伪类规则描述的是某种状态(如悬停、聚焦、已选中),而伪元素描述的是生成内容,这些内容没有实际的DOM节点可以附加。这些概念没有对应的内联形式,因此任何内联工具都必须将这些规则保留在一个残余的块中,以供少数支持它们的邮件客户端使用。

  5. 在内联过程中@媒体查询会发生什么?

    媒体查询是条件规则,其声明仅在视口满足约束时生效。由于style属性无法表达条件应用,媒体查询必须原样保留在块中。响应式电子邮件设计依赖min-width和max-width查询在移动设备上切换布局,因此移除它们将完全破坏响应式行为。

想要享受无广告的体验吗? 立即无广告

安装我们的扩展

将 IO 工具添加到您最喜欢的浏览器,以便即时访问和更快地搜索

添加 Chrome 扩展程序 添加 边缘延伸 添加 Firefox 扩展 添加 Opera 扩展

记分板已到达!

记分板 是一种有趣的跟踪您游戏的方式,所有数据都存储在您的浏览器中。更多功能即将推出!

广告 移除?
广告 移除?
广告 移除?

新闻角 包含技术亮点

参与其中

帮助我们继续提供有价值的免费工具

给我买杯咖啡
广告 移除?