0

我正在编写电子邮件通讯。我已经看到了一些关于良好电子邮件编码的指导方针。我想询问电子邮件通讯的 css 代码，例如它更倾向于编码内联 css，但对于一些免费模板，我发现了这样的代码

       <style type="text/css">

       body { color:#000; background-color:#fff; font-family:Arial, Helvetica, sansserif; text-align:center; }
       h2 { color:#2255DB; font-size:16px; margin-top:15px; margin-bottom:0px; }        
       h2 a:link { text-decoration:none; }
      .footer { fontsize:11px; text-align:center; color:#2255DB; }// and son on 

       </style>

fotter 的正文代码就像

    <p class="footer" style="color:#2255DB;"> footer...</footer>//again style  tag

有时我发现像这种完全内联样式..

    <span style="font-weight: bold; width: 525px;">
    Lorem ipsum dolo
    </span><br><br>// and son on  ,,

上面提到的两个代码在电子邮件客户端中都可以正常工作我也看到了来自 Campaign 监视器等的标准，所以我很困惑哪种样式更好.. 我们应该在上面提到的代码中使用样式还是完全内联编码，请如果有人可以让我明白这一点..这将是很大的帮助

编辑 ：一旦编码，是否有任何免费服务可以帮助检查邮件客户端的有效代码？

4

7 回答 7

2

许多邮件客户端将删除嵌入的样式表。最好对所有内容使用内联样式。

在您的示例中，您正在设置 BODY 标签的样式 - 但如果我在 Gmail 中阅读您的电子邮件 - 该页面已经有其 OWN 正文标签 - 所以您的标签将被删除。

我发现活动监控指南是一个很好的参考资源。

这是一个很好的测试：将您的电子邮件保存在静态 HTML 页面中，然后在 MS Word 上打开它。这是一个非常好的“最坏情况”。

如果您要进行任何严肃的电子邮件营销工作，Exact Target有一个出色的工具，它实际上会在不同的客户中呈现您的电子邮件，并为您提供来自这些平台的屏幕截图 PDF 以供查看。

于 2012-12-04T18:42:48.030 回答
2

根据我完成的 HTML 电子邮件，以及来自http://24ways.org/2009/rock-solid-html-emails/的建议，我建议始终将样式内联。

您提到了http://www.campaignmonitor.com/css/，这确实表明 Gmail 将成为样式不会内联问题的客户端。

编辑：如果对为什么 Gmail 在这种情况下是害群之马有任何兴趣，请查看第 1194.22 节， http: //mail.google.com/mail/help/accessibility.html

于 2012-12-04T18:43:33.570 回答
2

为了确保 HTML 时事通讯看起来与设计一样接近，我肯定会使用内联样式。

不幸的是，您的样式必须非常具体，否则某些软件（例如 Gmail）会覆盖您的样式声明。有时这是一种真正的痛苦，但以 IMO 的方式这样做是值得的。

HTML 电子邮件签名也是如此。

所以绝对要选择内联样式:)

哦，还有一件事。我知道现在是 2012 年，大量设计师/前端人员建议在 HTML 电子邮件和签名中使用 html 标签（甚至是 html5 元素），但我会尝试坚持老式的方式并使用表格来确保有代码中没有不必要的人工制品。

于 2012-12-04T18:45:15.817 回答
2

为电子邮件创建 HTML 模板确实很麻烦。测试通常也非常困难和不可靠，即使是从声称他们测试所有内容的服务中也是如此。众所周知，较旧的邮件客户端会忽略 CSS 和较新的 HTML 元素。此外，邮件客户端可能会用自己的 CSS 覆盖您的一些 CSS，从而破坏布局。

我的建议：

1）使用内联样式，正如其他人提到的那样。将它们应用于一切。例如，不要期望将字体大小添加到 div 以应用于<p>div 内部（应该如此！）。将样式添加到两者，或者至少是直接父级。

2) 对任何布局使用表格（啊！），而不是边距和填充。一些较老的邮件客户端可能不太关心 CSS，可能会删除所有的 CSS，或者只应用它的片段。

3) 以即使电子邮件客户端丢弃您的所有 CSS 的方式仍然可读的方式设计电子邮件（这是一种明显的可能性）。这就是为什么您经常收到以图片为主的电子邮件通讯。

于 2012-12-04T18:55:23.630 回答
2

对于电子邮件通讯格式，由于不同的电子邮件客户端呈现不同的布局，我强烈建议您使用内联 css并主要使用字体标签及其属性来设置文本样式。还使用表格结构而不是 div 布局来保持大多数电子邮件客户端的布局一致。

于 2012-12-04T18:49:54.100 回答
1

对所有内容使用内联样式，以确保您的 HTML 电子邮件在所有客户端上显示相同。

有一个很好的工具可用于内联 HTML 内容。它由 mail-chimp 提供（我猜他对电子邮件了解一两件事）http://beaker.mailchimp.com/inline-css

于 2012-12-04T18:48:26.203 回答
0

使用内联样式总是比嵌入 CSS 更好，因为一些主要的电子邮件客户端（例如 Outlook 2007）不支持电子邮件中的 CSS。

Gmail 不支持嵌入式 CSS。

解决此问题的一种方法是使用每个测试结果中“开发人员工具”下拉菜单中的 CSS 转换工具将您的嵌入式 CSS 转换为内联 CSS。

对于字体、字体颜色和字体大小等问题，还有另一种解决方法：Gmail 将您的 Body 标签转换为 DIV。这实际上对您有利，因为您可以在 BODY 中使用 DIV 支持的任何内联 CSS 属性。然而，重要的是要知道，有些客户端不支持 BODY 标签，因此您还应该在嵌入的 CSS 中包含相同的声明。另外，请记住，您不能依赖像“bgcolor”这样的 BODY 属性，因为 DIV 不支持它

于 2014-06-17T07:10:44.047 回答