电子邮件中的CSS类

时间:2010-12-16 23:40:53

标签: html css email

据我所知,CSS选择器/类不能用于设置您发送的电子邮件的样式,因为很多电子邮件客户端都不会获取外部css文件。

我想知道人们通常如何为自动电子邮件创建模板。你是否只是将每个CSS样式内联到DOM?这似乎非常低效且容易出错。

我想知道的一件事是,是否有一种工具可以“平坦化”#34;由CSS选择器设置为HTML文档的HTML文档,具有内联CSS样式。如果存在这样的工具,那么我可以使用我现有的普通模板框架(我现在使用django)来生成电子邮件,处理样式并发送结果。

4 个答案:

答案 0 :(得分:29)

这里有一篇很好的文章:Using CSS in HTML Emails: The Real Story

简而言之:

你不能做什么:

  • 包含带有样式的<head>部分。 Apple Mail.app支持它,但Gmail和Hotmail不支持,所以这是禁止的。 Hotmail将支持正文中的样式部分,但Gmail仍然不支持。
  • 链接到外部样式表。没有多少电子邮件客户端支持此功能,最好忘记它。
  • 背景图片/背景位置。 Gmail也是此问题的罪魁祸首。
  • 清除您的花车。再次使用Gmail。
  • 保证金。是的,严重的是,Hotmail忽略了保证金。基本上任何CSS定位都不起作用。
  • Font-anything。 Eudora可能会忽略您尝试使用字体声明的任何内容。

你能做什么。

用两个词来说,内联样式。它并不像你想象的那么糟糕,因为我们基本上开发的是一次性电子邮件,内联样式并不像在网站上使用它们那样令人震惊。需要一个大绿色标题的文本块?

<h3 style="color: #1c70db;">NOW $159</h3>

  • 最大的优点是图像。创造性地思考你可以用图像做什么。
  • 由于您将使用表格,因此请考虑使用表格。网格是设计师的朋友,你可以用网格做很多事情。

答案 1 :(得分:8)

在设计HTML电子邮件时,您必须设计好像是在为IE5 / 6进行设计:

  • 使用表格布局(几乎在所有情况下)
  • <head>内的CSS(内联也可接受)

这意味着没有外部CSS文件。

如果您想知道哪些CSS选择器,可以查看不同的电子邮件客户端(包括网络邮件)支持CampaignMonitor

对不起,但无法帮助您使用工具,但是Shoban从评论到您的问题的链接应该有帮助。

答案 2 :(得分:6)

一个选项可能是使用内联样式设置消息的样式,但一种典型的方法是在文档开头的<style>块中声明样式。这实际上为您提供了与外部CSS文档相同的效率,但将所有内容保存在一条消息中。

答案 3 :(得分:4)

老兄,这完全取决于你支持的客户。 如果你支持Outlook 2007和/或2010,那你就搞砸了...不是说它无法完成,而是你没有乐趣和痛苦。 如果是这种情况,你必须内联一切。它糟透了。我为我的工作制作了一些模板......如果你忘记/遗漏某些东西,它会失控。 哦,是的,你实际上想要重置/重新设置每个元素。一遍又一遍。排队。 美好时光。 内联标记重置工具的事情 http://inlinestyler.torchboxapps.com/