Question

我正在生成一个使用内部样式表的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电子邮件样式的唯一选择吗？

Answer 1

为所有内容使用内联样式。此站点会将您的类转换为内联样式：http://premailer.dialect.ca/

Answer 2

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>

Answer 3

截至2016年9月30日，此处的答案已过时。style中head标记的Gmail目前为rolling out support，以及媒体查询。如果Gmail是您唯一关注的问题，那么您可以安全地使用像现代开发人员这样的课程！

作为参考，您可以查看 official gmail CSS docs 。

作为旁注，Gmail是唯一不支持style（reference的主要客户端，直到他们更新为止）。这意味着你可以几乎安全地停止内联样式。一些较为模糊的客户可能仍然需要它们。

Answer 4

请注意，发送电子邮件的服务和工具可能会为您内嵌CSS，允许<style>标记中的CSS在Gmail中运行。

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

Image showing how to do this in Mandrill

Answer 5

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

您可能认为您的CSS很完美，因为您经常这样做，为什么我的CSS会出错？通过CSS Validator运行它（例如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]-->

这只是一个简单的例子，但是，谁知道，它可能会在某个时候派上用场。

Answer 6

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

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

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

Answer 7

在Mailjet中设计模板时遇到了同样的问题。该问题的解决方案是在<style>标记内使用最小的CSS代码。

Answer 8

电子邮件HTML非常烦人，将CSS文件设为内部将是一种解决方案，并且互联网上存在大量在线转换器。即使这样，我还是建议您看看“ mailchimp”。选择其中一个模板，然后导出HTML以修复小细节。因为老板永远不会满足，并希望下一轮展望。

为Gmail设置HTML电子邮件样式

8 个答案: