为GmaildeviseHTML电子邮件

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

使用内联样式的一切。 此网站会将您的课程转换为embedded式样式: http : //premailer.dialect.ca/

Gmail开始了对头部区域样式标签的基本支持。 没有发现任何官方,但你可以轻松地尝试自己。
它似乎忽略类和idselect器,但基本元素select器的工作。

 <!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> 

它将在其自己的头部区域创build一个样式标签,限于包含邮件正文的div

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

这里的答案已经过时了,截至2016年9月30日。Gmail目前正在推出对head style标签的支持以及媒体查询。 如果您只关心Gmail,那么您可以安全地使用像现代开发人员一样的课程!

作为参考,你可以检查官方的Gmail的CSS文档

作为一个侧面说明,Gmail是唯一不支持style主要客户端( 参考 ,直到他们更新)。 这意味着你几乎可以安全地停止放置样式。 一些比较模糊的客户可能仍然需要他们。

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

例如,如果您使用MailChimp发送电子邮件,默认情况下, <style>标记的CSS将自动内联。 使用Mandrill,可以通过选中“设置”选项卡的“发送默认值”部分中的“HTML电子邮件中的内联CSS样式”框来启用此function(尽pipe由于性能原因该function默认为禁用):

图片显示如何在Mandrill中做到这一点

正如其他人所说,一些电子邮件程序不会读取CSS样式。 如果你已经写好了网页邮件,你可以使用zurb的以下工具来embedded你的所有样式:

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

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

Gmail现在支持头部样式标签,但如果遇到错误,gmail将删除整个样式标签。

这里有一个有用的链接,你必须尝试在gmail的电子邮件这里开发12个东西。 该文章已于2017年3月6日发布。

希望这可以帮助。