为Gmail设置HTML电子邮件的样式

99

我正在生成使用内部样式表的html电子邮件，即

<!doctype html>
<html>
<head>
  <style type="text/css">
    h2.foo {color: red}    
  </style>
</head>
<body>
 <h2 class="foo">Email content here</foo>
</body>
</html>

在Gmail中查看时，似乎会忽略内部样式表中的所有样式。Gmail似乎会忽略除内联规则以外的所有样式，例如

 <h2 style="color: red">Email content here</foo>

这是我使用Gmail查看HTML电子邮件样式时唯一的选择吗？

— 多纳尔
source

14

是的，这是唯一的方法，因为许多基于Web的电子邮件客户端无法识别内部样式表。实际上，内联样式是设计html新闻通讯的推荐方法。

— 迈克

据我所知，可以期望电子邮件阅读器支持html 3.2和css 1.1。

您是如何生成电子邮件的？我的意思是说您添加了创建意图的代码？

— RaphMclee 2012年

7

通常，使用开始<html>标签是个好习惯；）

— Zaz

1

Gmail很烂。iOS应用和基于Web的应用！

— Adrian Florescu

19

截止到2016年9月30日，此处的答案已过时。Gmail目前正在推出对中的style标记head以及媒体查询的支持。如果您只关心Gmail，那么可以像现代开发人员一样安全地使用类！

作为参考，您可以查看官方的gmail CSS文档。

附带说明一下，Gmail是唯一不支持的主要客户端style（请参考，直到它们无论如何都进行更新）。这意味着您几乎可以安全地停止将样式插入行中。一些比较模糊的客户可能仍需要它们。

— 马修·约翰逊（Matthew Johnson）
source

1

看起来它仍然不起作用。我们在Litmus中尝试过，但是没有用。有什么特殊原因吗？

— 阿里安

@ArianHosseinzadeh什么不起作用？添加了对此事的文档的引用。

— 马修·约翰逊

我们在Litmus中尝试过，但它忽略了非内联样式。他们宣布发布Gmail后，您是否尝试过<style>？奏效了吗？

— 阿里安

1

@ArianHosseinzadeh我从他们的文档示例中复制了n，然后通过putsmail进行了粘贴。样式以gmail显示。我在Chrome浏览器中验证了Android gmail应用程序和gmail。我的猜测是Litmus预览尚未更新以反映更改。

— 马修·约翰逊

1

我想知道为什么我的样式不起作用，并意识到我已经将它们放置在body标签而不是head标签中。

— palswim

67

对所有内容使用内联样式。该站点会将您的课程转换为嵌入式样式：http : //premailer.dialect.ca/

— 子状态
source

2

这个网站很棒。显示警告并为您提供纯文本输出以及重新制作HTML。

— jamesbar2 2012年

1

这个Premailer在Ruby中，来源：github.com/premailer/premailer。Python中还有另一个：premailer.io来源：github.com/peterbe/premailer，两者都是开源的。

— Maxime R.

1

这个答案不再准确。gmail支持样式和类，并具有关于该主题的官方文档-请参阅下面的Matthew Johnson的答案。

— mikemaccana '16

12

Gmail从头开始对样式标签提供基本支持。尚未找到任何官方文件，但您可以自己尝试。
似乎忽略了类和id选择器，但是基本元素选择器起作用了。

<!doctype html>
<html>
  <head>
    <style type="text/css">
      p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}  
    </style>
  </head>
  <body>
    <p>Email content here</p>
  </body>
</html>

它将在自己的头部区域中创建一个样式标签，该标签仅限于包含邮件正文的div

<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>

— fuchs777
source

它仍然不支持媒体查询，尽管这有点遗憾。类和ID也很有用：)

— Eoin

2

现在，他们也可以进行媒体查询，并且可以完全支持CSS样式。stackoverflow.com/questions/39759764/…–

— crowmagnumb

7

我同意支持类和内联样式的所有人。您可能现在已经了解了这一点，但是如果样式表中有一个错误，Gmail将忽略它。

您可能会认为CSS是完美的，因为您经常这样做，为什么我的CSS会出错？通过CSS验证程序（例如http://www.css-validator.org/）运行它，看看会发生什么。遇到一些Gmail显示问题后，我这样做了，令我惊讶的是，一些Microsoft Outlook特定的样式声明显示为错误。

这对我来说很有意义，因此我将其从样式表中删除，并将其放入only for Microsoft代码块中，如下所示：

<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->

这只是一个简单的示例，但是，谁知道，它可能会在一段时间内派上用场。

— 肖恩·斯宾塞
source

谢谢，有关无效CSS的部分为我节省了很多时间。如果您还在身边，请告诉我。

— 暗影巫师为您耳边

1

嘿@ShadowWizard。我走了一段时间，但回来了。很高兴为您节省了一些时间。

— 肖恩·斯宾塞

干杯，只是想确保赏金不会被浪费。:-)

— 暗影巫师为您而耳（

2

正如其他人所说，某些电子邮件程序将不会读取CSS样式。如果您已经编写了网络电子邮件，则可以使用zurb中的以下工具来内联所有样式：

http://zurb.com/ink/inliner.php

当使用诸如mailchimp，活动监视器等上面提到的模板时，这非常方便，因为您发现它们在某些电子邮件程序中不起作用。此工具将样式部分留给将要阅读它的邮件程序，并将所有样式内联，以所需的格式获得更通用的可读性。

— 乍得·杜普瓦
source

感谢您的内联链接。

— 肖恩·斯宾塞

2

请注意，用于发送电子邮件的服务和工具可能能够为您内联CSS，从而允许CSS <style>标记中的CSS 在Gmail中起作用。

例如，如果您要使用MailChimp发送电子邮件，则<style>默认情况下，来自标记的CSS 会自动内联。使用Mandrill，您可以通过选中“设置”标签的“发送默认值”部分中的“ HTML电子邮件中的内联CSS样式”框来启用此功能（尽管出于性能原因默认为禁用）：

该图显示了如何在Mandrill中执行此操作

— 马克·阿默里
source

0

在Mailjet中设计模板时，我遇到了同样的问题。解决该问题的方法是在<style>标签内缩小CSS代码。

— VojtěchRemiš
source