在 HTML 电子邮件中引用 CSS 文件答案

【问题标题】：Referring to a CSS file in a HTML Email在 HTML 电子邮件中引用 CSS 文件
【发布时间】：2015-06-29 15:09:49
【问题描述】：

我有一个关于 Thymeleaf + Spring MVC 的项目，并尝试使用 Thymeleaf 发送 HTML 电子邮件。

我的印象是，我唯一需要做的就是创建一个模板文件，并像为常规页面所做的那样传递参数。看来我错了。当我这样做时，它不会应用 CSS。（事实上，它甚至没有引用 CSS 文件。）我不知道是 Google 是删除 CSS 文件的人还是所有邮件客户端都在做的事情。

看起来 Google 也对 HTML 元素的类和 ID 进行了编码，所以我唯一的选择是使用内联 CSS，还是有办法在 HTML 电子邮件中引用 CSS 文件？

<img src="some_url" class="CToWUd">

以上是 Gmail 中 img 标签的外观。它应该看起来像这样：

<img src="some_url" class="topImage" />

提前致谢

【问题讨论】：

【解决方案1】：

head 标签自动从电子邮件中删除是很常见的，Gmail 肯定会这样做。

尝试在 body 中引用样式表。

如果做不到这一点，您可以将 CSS 放在正文中的 style 标记中：

<html>

<body>

<style>
    p {
        // style here
    }
</style>

// Rest of HTML here

</body>

</html>

【讨论】：

【解决方案2】：

不幸的是，在 HTML 电子邮件中链接到外部样式表的支持很差。

此外，Gmail 实际上从head 和body 中删除了style 标签，因此您确实需要在发送之前将所有样式内联推送，以确保Gmail 不会删除它们。

Campaign Monitor 有一个很棒的 CSS Support Guide，它概述了您可以和不能在所有电子邮件客户端中使用的内容。

【讨论】：