构建 HTML 电子邮件，我可以将样式放在标题部分还是必须使用内联样式？答案

【问题标题】：Building HTML emails, can I put styles in the header section or do I have to use inline styles?构建 HTML 电子邮件，我可以将样式放在标题部分还是必须使用内联样式？
【发布时间】：2012-03-28 12:47:49
【问题描述】：

我必须使用基本的 HTML 和 CSS 构建一些电子邮件模板。

我找到了this page，其中详细说明了各种电子邮件客户端最支持哪些 CSS 样式。我知道这些将作为内联样式工作。但是我想把它们放在电子邮件的头部，因为它会更干净一些，我也可以这样做吗？它会得到很好的支持吗？例如

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
           /* CSS goes here */
        </style>
    </head>
    <body>
        Email goes here
    </body>
</html>

非常感谢！

【问题讨论】：

can I put a <style>...</style> tag within the body of an HTML file?的可能重复
不。据我了解，所有 css 都必须是内联的 :(
您很快就会发现在 html 电子邮件中使用样式会让人头疼……或者您不支持 Outlook。

标签： html css email email-templates

【解决方案1】：

要与最广泛的电子邮件客户端兼容，您需要使用内联样式。在开发电子邮件模板时，我总是尝试像 1995 年的网络程序员一样思考。

桌子 - 是的！透明 PNG - Nooooooooooo.

值得庆幸的是，有很多工具可以帮助构建适用于大多数电子邮件客户端的电子邮件模板。 MailChimp's Email Blueprints 项目有很多模板可供您开始使用。

您可以在开发过程中使用 CSS 样式（MailChimp 模板就是这样做的）。但在发送电子邮件之前，您需要通过 HTML Inliner 工具运行它，以将所有 CSS 样式内联。如果您使用他们的服务，MailChimp 会自动执行此操作。或者Premailer 也很好用。

【讨论】：

【解决方案2】：

不幸的是，为了获得最佳兼容性，答案是肯定的，您需要内联样式。您还必须使用表格进行标记。

premailer 等工具可以为您内联样式，但有助于减轻很多麻烦。

CampaignMonitor 提供了一个很好的 CSS support 列表。

【讨论】：

【解决方案3】：

我推荐htmlemailboilerplate

【讨论】：

【解决方案4】：

在电子邮件时事通讯中使用 CSS 和 HTML 在http://groundwire.org 中的帖子将对您有所帮助..

http://groundwire.org/labs/email-publishing/using-css-and-html-in-email-newsletters

【讨论】：