Gmail 的 HTML 电子邮件样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9056172/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling HTML email for Gmail
提问by Dónal
I'm generating a html email that uses an internal stylesheet, i.e.
我正在生成一个使用内部样式表的 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>
When viewed in Gmail it seems all the styles in the internal stylesheet are ignored. It seems Gmail ignores all styles other than inline rules, e.g.
在 Gmail 中查看时，似乎忽略了内部样式表中的所有样式。Gmail 似乎忽略了内联规则以外的所有样式，例如
<h2 style="color: red">Email content here</foo>
Is this my only option for styling HTML emails when viewed with Gmail?
这是我在 Gmail 中查看 HTML 电子邮件样式的唯一选择吗？
回答by substate
Use inline styles for everything. This site will convert your classes to inline styles: http://premailer.dialect.ca/
对所有内容使用内联样式。该站点会将您的类转换为内联样式：http: //premailer.dialect.ca/
回答by Matthew Johnson
The answers here are outdated, as of today Sep 30 2016. Gmail is currently rolling out supportfor the styletag in the head, as well as media queries. If Gmail is your only concern, you're safe to use classes like a modern developer!
此处的答案已过时，截至 2016 年 9 月 30 日。Gmail 目前正在推出对中的style标记head以及媒体查询的支持。如果 Gmail 是您唯一关心的问题，那么您可以像现代开发人员一样安全地使用类！
For reference, you can check the official gmail CSS docs.
作为参考，您可以查看官方的 gmail CSS 文档。
As a side note, Gmail was the only major client that didn't support style(reference, until they update anyway). That means you can almostsafely stop putting styles inline. Some of the more obscure clients may still need them.
附带说明一下，Gmail 是唯一不支持的主要客户端style（参考，直到他们更新为止）。这意味着您几乎可以安全地停止将样式内联。一些更不起眼的客户可能仍然需要它们。
回答by fuchs777
Gmail started basic support for style tags in the head area. Found nothing official yet but you can easily try it yourself.
It seems to ignore class and id selectors but basic element selectors work.
Gmail 开始对头部区域的样式标签提供基本支持。尚未发现任何官方信息，但您可以轻松地自己尝试。
它似乎忽略了 class 和 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>
it will create a style tag in its own head area limited to the div containing the mail body
它将在自己的头部区域创建一个样式标签，仅限于包含邮件正文的 div
<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>
回答by Shawn Spencer
I agree with everyone who supports classes AND inline styles. You might have learned this by now, but if there is a single mistake in your style sheet, Gmail will disregard it.
我同意每个支持类和内联样式的人的看法。您现在可能已经了解了这一点，但是如果您的样式表中有一个错误，Gmail 会忽略它。
You might think that your CSS is perfect, because you've done it so often, why would I have mistakes in my CSS? Run it through the CSS Validator (for example http://www.css-validator.org/) and see what happens. I did that after encountering some Gmail display issues, and to my surprise, several Microsoft Outlook specific style declarations showed up as mistakes.
你可能认为你的 CSS 是完美的，因为你经常这样做，为什么我的 CSS 会出错？通过 CSS 验证器（例如http://www.css-validator.org/）运行它，看看会发生什么。在遇到一些 Gmail 显示问题后，我这样做了，令我惊讶的是，几个 Microsoft Outlook 特定样式声明显示为错误。
Which made sense to me, so I removed them from the style sheet and put them into a only for Microsoftcode block, like so:
这对我来说很有意义，所以我从样式表中删除了它们并将它们放入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]-->
This is just a simple example, but, who know, it might come in handy some time.
这只是一个简单的例子，但是，谁知道呢，它可能会派上用场。
回答by Chad Dupuis
As others have said, some email programs will not read the css styles. If you already have a web email written up you can use the following tool from zurb to inline all of your styles:
正如其他人所说，某些电子邮件程序不会读取 css 样式。如果您已经编写了网络电子邮件，则可以使用来自 zurb 的以下工具来内联您的所有样式：
http://zurb.com/ink/inliner.php
http://zurb.com/ink/inliner.php
This comes in extremely handy when using templates like those mentioned above from mailchimp, campaign monitor, etc. as they, as you have found, will not work in some email programs. This tool leaves your style section for the mail programs that will read it and puts all the styles inline to get more universal readability in the format that you wanted.
这在使用上面提到的来自 mailchimp、活动监视器等的模板时非常方便，因为正如您所发现的，它们在某些电子邮件程序中不起作用。此工具将您的样式部分留给将读取它的邮件程序，并将所有样式内联以获得您想要的格式的更通用的可读性。
回答by Mark Amery
Note that services and tools for sending emails may be able to inline your CSS for you, allowing CSS in <style>tags to work in Gmail.
请注意，用于发送电子邮件的服务和工具可能能够为您内嵌 CSS，从而允许 CSS in<style>标签在 Gmail 中工作。
For instance, if you're sending emails with MailChimp, your CSS from <style>tags will get inlined automatically by default. With Mandrill, you can enable this functionality (although it's disabled by default for performance reasons) by checking the "Inline CSS Styles in HTML Emails" box in the "Sending Defaults" section of the Settings tab:
例如，如果您使用 MailChimp 发送电子邮件，<style>默认情况下您的 CSS from标签将自动内联。使用 Mandrill，您可以通过选中“设置”选项卡的“发送默认值”部分中的“HTML 电子邮件中的内联 CSS 样式”框来启用此功能（尽管出于性能原因默认禁用）：
