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

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

【问题讨论】:

    标签: html css email


    【解决方案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
          猜你喜欢
          • 2016-10-17
          • 1970-01-01
          • 2020-06-07
          • 2015-03-31
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2020-05-01
          相关资源
          最近更新 更多