CSS邮件内联（样式属性内联）
指导
CSS邮件内联（样式属性内联）
将包含块的HTML转换为适用于电子邮件的标记，将每个CSS规则移动到内联style=""属性中。电子邮件客户端会剥离或忽略块，因此内联是确保设计在Gmail、Outlook、Yahoo和Apple Mail中保持一致的唯一可靠方法。
将您的完整HTML粘贴到左侧；该工具会解析每个选择器，精确地解析CSS特异性，就像浏览器一样，并将获胜的声明写入每个匹配的元素。对于:hover等伪类规则和任何@media查询，会保留在一个残余的块中，因为仍支持这些功能的电子邮件客户端需要它们。
如何使用
- 将您的HTML——完整的文档或带有块的片段——粘贴到输入字段中。
- 决定是否保留媒体查询和伪类规则（推荐用于响应式电子邮件）。
- 可选地在样式内联后移除类属性。
- 根据您希望获得可读或紧凑的结果，开启或关闭美化显示功能。
- 复制内联HTML或将其下载为文件，然后直接将其粘贴到您的电子邮件服务提供商中。
特征
- 特异性感知合并 – 精确解析ID、类、属性和元素类型，与浏览器级联方式一致。
- !important处理 – 外部的!important声明能正确覆盖普通内联样式，符合CSS规范。
- 媒体查询保留 – 保留响应式@media规则，以确保移动设备断点正常触发。
- 伪类降级 – :hover、:focus和::before规则无法内联；工具会将它们保留在一个精简的块中。
- 多个块 – 处理包含多个样式标签的文档 <head> 或 <body>.
- 可选的类属性移除 – 移除现在冗余的class=""属性，以获得更轻量的payload。
- 美化输出 – 以缩进格式的可读HTML或紧凑单行输出。
- 100% 客户端 – 您的HTML永远不会离开浏览器。无需上传，无需服务器处理。
常问问题
-
为什么电子邮件HTML需要内联CSS而不是使用块？
许多电子邮件客户端——尤其是较旧版本的Outlook和多个网页邮箱服务提供商——要么完全剥离头部元素，要么将消息沙箱化，从而忽略外部和嵌入式样式。每个元素上的内联style属性是所有主流邮件客户端所认可的唯一声明形式，因此内联步骤是确保设计在Gmail、Outlook、Yahoo和Apple Mail中保持一致的硬性要求。
-
什么是CSS特异性，以及级联顺序为何对内联至关重要？
特异性是CSS根据选择器中的ID、类、属性、伪类和元素类型赋予的权重。当两个规则针对同一元素的同一属性时，浏览器会保留特异性更高的规则的值；在平局情况下，按源顺序决定，后出现的规则获胜。内联工具必须逐个重新执行该算法，否则低特异性的规则可能会覆盖高特异性的规则，导致渲染设计无声地改变。
-
!important标志如何与内联样式互动？
在标准级联中，内联样式位于作者样式表的更高层级，因此通常会覆盖任何类或元素级别的规则。!important标志是唯一的例外：来自作者样式表的!important声明会覆盖非!important的内联声明。这就是为什么在类中设置白色!important的按钮即使元素带有style="color: blue"也会显示为白色。
-
为什么像:hover或伪元素::before这样的伪类规则无法内联？
style属性包含应用于其所在元素的无条件声明。伪类规则描述的是某种状态（如悬停、聚焦、已选中），而伪元素描述的是生成内容，这些内容没有实际的DOM节点可以附加。这些概念没有对应的内联形式，因此任何内联工具都必须将这些规则保留在一个残余的块中，以供少数支持它们的邮件客户端使用。
-
在内联过程中@媒体查询会发生什么？
媒体查询是条件规则，其声明仅在视口满足约束时生效。由于style属性无法表达条件应用，媒体查询必须原样保留在块中。响应式电子邮件设计依赖min-width和max-width查询在移动设备上切换布局，因此移除它们将完全破坏响应式行为。
