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

Question

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

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

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

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

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

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

提前致谢

Answer 1

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

尝试在 body 中引用样式表。

否则，您可以将 CSS 放在正文的 style 标记中：

<html>

<body>

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

// Rest of HTML here

</body>

</html>

Answer 2

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

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

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

Referring to a CSS file in a HTML Email