我可以在 HTML 文件的正文中放置 <style>...</style> 标记以通过电子邮件发送吗?

Posted

技术标签:

【中文标题】我可以在 HTML 文件的正文中放置 <style>...</style> 标记以通过电子邮件发送吗?【英文标题】:Can I put a <style>...</style> tag within the body of a HTML file to send in email? 【发布时间】:2010-09-18 13:22:11 【问题描述】:

由于很多电子邮件客户端忽略了 HEAD 标签,我可以在正文中嵌入内联样式表吗?

【问题讨论】:

【参考方案1】:

简短的回答是否定的。 Gmail 会去除标签及其内容。

Hotmail,雅虎! Mail 和 Windows Live Mail 不会去除正文元素中的样式标签。

但请在 Campaign Monitor 上查看 "The Ultimate Guide to CSS" for html email。

【讨论】:

您链接到的指南要么已过时,要么在似乎相当重要的一点上有错误。这表明无论&lt;head&gt;&lt;body&gt; 中是否出现&lt;style&gt; 元素,Gmail 都会删除它们,但使用putsmail.com 进行的快速测试表明,如果它们出现在&lt;head&gt; 中,它们当前不会被删除。 (不过,Gmail 确实从所有元素中剥离了类和 ID,这降低了它的实用性。) 这在 2018 年是否仍然适用? 是和不是。对于大多数客户,您不能在电子邮件的正文中使用 ,但可以在 HEAD 中使用 :campaignmonitor.com/css/style-element/style-in-head【参考方案2】:

创建适用于每个电子邮件客户端的 HTML 电子邮件非常困难。我花了几个月的时间来完善一个好看的模板。

http://commadot.com/the-holy-mail/ - 我的发现的原创博客。

http://commadot.com/email-best-practices/ - 最新最棒的。

对您问题的具体回答:Gmail 可以使用 style="",但不能使用 &lt;style&gt; 块。

【讨论】:

【参考方案3】:

您可能想查看 CampaignMonitor 和 MailChimp(编辑: 和 Zurb 的 Ink)提供的免费 html 电子邮件模板:

http://www.campaignmonitor.com/templates/

http://www.mailchimp.com/resources/templates/

http://zurb.com/ink/

此处有更新版的 Campaign Monitor 实用指南: http://www.campaignmonitor.com/css/

不幸的是,在电子邮件中使用的最可靠的 HTML 完全是石器时代

编辑: Ink 有一个“内联”工具,它获取 style 标记的内容并将它们内联到适当的元素上:http://zurb.com/ink/inliner.php

【讨论】:

inliner 的链接已损坏,但是这里有一个当前资源可以完成此操作:putsmail.com/inliner 模板的两个链接现在都已损坏,mailchimp 重定向到电子邮件营销页面,并且campaignmonitor 将允许您构建仅用于从他们的服务发送电子邮件的模板,没有样式表或可下载的模板。您也许可以从测试电子邮件中提取它,但我不想通过他们的服务清理我的电子邮件。【参考方案4】:

截至 2016 年 9 月,大多数 gmail 客户端现在都支持嵌入式 CSS,因此应该安全。

https://litmus.com/blog/gmail-to-support-responsive-email-design

【讨论】:

【参考方案5】:

是的,你可以。但是您必须记住,很少有电子邮件客户端尊重 css 标准。只要坚持基本的css属性,如marginpadding等,应该没问题。

您还可以为您的 html 元素内嵌样式 (&lt;div style=""&gt;),尽管这不是一个优雅的解决方案。

【讨论】:

【参考方案6】:

最佳答案已过时。 Gmail 现在支持使用媒体查询以及其他 CSS 属性 - https://developers.google.com/gmail/design/css

【讨论】:

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

以上是关于我可以在 HTML 文件的正文中放置 <style>...</style> 标记以通过电子邮件发送吗?的主要内容,如果未能解决你的问题,请参考以下文章

如何在电子邮件正文中放置 HTML 链接?

如何控制画布在文档中的放置位置?

在 HTML </head> 和 <body> 标签之间放置代码或内容是不是合适

HTML JS,在 html 正文中添加一个新的 div

AngularJS ng-file-upload 使用窗口作为放置区域

html正文引用外部css文件。求body正文中引用的方法。head中的我会。