在电子邮件中设置 html 样式
我正在为有能力的客户发送 HTML 版本的电子邮件（现在这不是几乎全部吗？）。我担心的是如何设计它。我使用内联CSS吗？我可以在 html 中包含样式表吗？ html 是以 开头还是以 开头？我可以阅读这方面的标准吗？
我在造型方面能走多远？我有边框半径、背景渐变等，对于不支持它的浏览器（IE）有自然的后备机制。对于 IE，我使用 PIE.htc，我认为这太过分了......
I'm sending emails with an HTML version for capable clients (isn't that virtually all nowadays?). My worry is how to style it. Do I use inline css? Can I include the stylesheet in the html? Does the html begin with <html> or <body>? Is there a standard I can read on this?
How far can I go in styling? I have border-radius, background gradients, etc that have natural fallback mechanisms for browsers that don't support it (IE). For IE, I use PIE.htc, I assume that's going too far...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
关于您可以使用和不能使用哪种样式，请查看这篇优秀的文章，其中详细介绍了 10 个最流行的电子邮件客户端所支持的内容：
http://www.campaignmonitor.com/css/
至于使用样式表，如果您愿意，您可以这样做，但据我所知，您必须链接到其他地方托管的样式表。如果有人想离线阅读电子邮件，这可能会出现问题。
最后，我尝试始终将 HTML 电子邮件包装在
标记中，因为这似乎使电子邮件对许多电子邮件过滤器显得更“有效”。Regarding what kind of styling you can and can't use, have a look at this excellent article which details what each of the 10 most popular email clients support:
http://www.campaignmonitor.com/css/
As far as using stylesheets, you can do that if you like, but you'll have to link to a stylesheet hosted elsewhere, as far as I know. This might present a problem if someone wants to read their email offline.
Lastly, I try to always wrap my HTML emails in the
<html>tag, as it seems to make the email appear more "valid" to many email filters.引用我最近在一本杂志上读到的一句话“就像 1996 年的代码”。
当您使用多个邮件客户端测试新闻通讯时，尝试优雅且高效地编写代码似乎并不能返回一致的结果。当您测试时，请确保让测试人员转发消息，因为有时精彩的编码会在转发中中断。
虽然我讨厌使用表格进行显示，但与浮动或多列 DIVS 相比，它们在邮件客户端上的呈现更加一致（特别是当新闻通讯等从原始收件人转发给其他人时）。
另请参阅：http://www.netmag.co。 uk/zine/discover-culture/create-the-perfect-newsletter
Heeeeeelllooooo 1996！
To quote something I read in a magazine recently 'code like it's 1996'.
Trying to code elegantly and efficiently doesn't seem to return consistent results when you test your newsletter with multiple mail clients. When you test make sure you get your testers to do a foward of the message as sometimes fabulous coding will break in the forward.
While I hate using tables for display, they will render more consistently across mail clients than floating or multi column DIVS will (particularly if the newsletter, etc is forwarded on from the original recipient to someone else).
see also: http://www.netmag.co.uk/zine/discover-culture/create-the-perfect-newsletter
Heeeeeelllooooo 1996!!
从经验来看，“有能力”并不等于“有能力”。我认为拥有漂亮的 HTML 电子邮件没有任何问题，但如果您的受众需要，请确保您拥有基于文本的应急方案。
我曾与几家技术先进的公司合作过，直到出现了丰富的电子邮件，但不知何故，这些公司已经成功地停留在史前时代（我喜欢这个帖子中的“代码就像 1996 年的代码”）。您可能会遇到古老的 Lotus 安装、以“下级”模式运行的 Outlook Web Access 2003 或在接收之前消化 HTML 内容的代理服务器。
更难以处理的是，Gmail 和 Outlook 2007/2010 等现代电子邮件客户端非常“智能”，除非明确允许，否则不会下载图像。
要回答您最初的问题，不要依赖任何接近前沿（例如 CSS 3）或复杂（深度嵌套布局、负边距等）的东西。如果您决定在图像上掷骰子，则可以在图像中添加更多内容，在 HTML 中添加更少内容，从而使您的设计更具创意。
我收到的最好的电子邮件是那些文本清晰简单的电子邮件，这些电子邮件非常有趣，我允许 Outlook 下载图片，并且我会原谅任何小的格式错误。一如既往，内容为王。
From hard experience, "capable" doesn't equal "enabled". I don't think there's anything wrong at all with having great-looking HTML email, but make sure that you have a text-based contingency if your audience demands it.
I've worked with several companies who were technically progressive until it came to rich email, which somehow has managed to stay in prehistoric times (I like the "code like it's 1996" comment in this thread). You are potentially contending with ancient Lotus installations, Outlook Web Access 2003 running in "down level" mode, or proxy servers that will munge HTML content prior to receipt.
More difficult to deal with is the fact that modern email clients like Gmail and Outlook 2007/2010 are "smart" and don't download images unless explicitly allowed.
To answer your original question, don't rely on anything even close to cutting edge (such as CSS 3) or complex (deeply nested layouts, negative margins, etc). If you decide to roll the dice on images, you can put more in your image and less in your HTML, allowing you to get more creative with your designs.
The best emails I receive are the ones which have clear and simple text that is so interesting I allow Outlook to download the pictures, and I forgive any minor formatting errors. Content, as always, is king.
我可能可以谈谈 email 编码一段时间，但如果您只考虑几个基本原则，您就会比大多数人了解更多..
gmail（和 MS Outlook）是两个最难编码的电子邮件客户端，但可以开发一个 响应性电子邮件具有高水平的设计，可以在客户中良好地展示。在 Gmail 上，它只会显示您的桌面布局，而没有响应能力。
当您开始编写电子邮件时，您应该很少甚至根本不使用 CSS。考虑一种“桌面优先”的方法，并尽可能简单地编写代码，只要您希望它在 600 像素宽的情况下显示即可。我不在乎人们是否说它在电子邮件中有效，如果有一种更贬值的方法来完成同样的事情，那么更贬值的方法总是与电子邮件客户端更兼容。
忘记 css 和 html 正如您通常使用的那样。您应该尝试将标签限制为 xhtml1.0 仅有效标签。实际上，您可以使用有限的标签调色板进行大量布局，您只需考虑更迂回的方法即可。
举一个非常简单的例子：
您可以使用嵌套一表深的表格、xhtml 有效属性标签和零 CSS 来在填充的内容中实现垂直居中的标签，而不是使用填充、边距或透明图像间隔符来实现 CTA 按钮内的垂直间距。带有彩色文本的颜色按钮。
步骤 1
不使用 CSS 编写电子邮件代码并使其看起来美观。
此时，您的字母表应仅包含
html、body、表,tbody,tr,td ,span,a,b,nobr,src,alt,target, cellpadding、cellspacing、边框、对齐、bgcolor、color、height 以及这些标签内的字母数字内容。
您可能会想使用 valign,style,background,class,...... 不要.. 还没有
如果您想实现尽可能最高的交叉兼容性，请接受某些客户端是将以这种方式看待它，因此您有必要使其尽可能干净且美观。
步骤 2
一旦你的基本结构看起来不错并且很漂亮，你就可以考虑让它看起来更好。您可以开始添加一些 CSS 和 HTML4 标签来改进那些将看到它的客户端的样式。但不要太过疯狂，尽量保持简约的风格。
一旦你准备好了 CSS，无论你想使用什么 CSS（如果你想了解要尝试使用什么，caniuse.com 是一个很好的资源）。一旦一切就位，突然删除所有内容，不带任何偏见，只删除那些新标签，别无其他。现在查看电子邮件。如果删除这些标签没有破坏您的布局，那么就可以了。您可以安全地取消删除它们，并知道您拥有交叉兼容的电子邮件，从而安然入睡。如果有什么东西破坏了你的布局，最好不要把它放在那里，因为很多客户都会这样做并删除它，如果你把它留在那里，你的日子会很糟糕。
步骤 3
完成后，您可以添加几个 [标签：媒体查询]。我有 600 和 400 的媒体查询，我将它们加倍以获得更高的兼容性。在 head 中使用 CSS，然后您可以使用重要标签覆盖 HTML 中的任何布局。因此，那些阅读它的客户将忽略您使用的内联样式并坚持您添加的新样式。这对于调整元素的宽度、隐藏或显示元素等非常有用。
通过这 4 行，您可以完成几乎所有的响应式结构。
**注意：使用桌面类需要额外的努力
这可能是我的代码中最重要的CSS。该示例表格不会显示在任何桌面设备（包括 Gmail）上，但会显示在移动设备上。唯一无法正常工作的客户端是 Windows Mobile 7。
我使用这两个类从移动布局中删除元素以实现响应式设计。避免使用桌面类，仅在极少数情况下使用，因为这意味着您的电子邮件将失去在 Windows Mobile 7 中的兼容性
。步骤 4
测试测试测试测试。电子邮件很容易被破解，这真是太荒谬了。不要相信 Litmus 或任何测试套件，因为它们仅在一定程度上准确。您应该为您关心的每台设备准备一个测试设备。如果您花在测试电子邮件上的时间没有比您编码所花费的时间多得多，那么您的测试还不够彻底。
不要相信人们关于编码电子邮件的说法，除非您已经尝试过、测试过并并且你自己证明了这一点。因为更多的人认为他们知道自己在说什么，而不是真正知道的人，尤其是在阅读有关电子邮件编码的博客和文章时。
如果您想要使用示例或样板，这是我创建的模板在大约 2 年的时间里，几乎每周都会编写 2 封以上的电子邮件。我几乎可以保证它将是您能找到的最跨客户端/设备兼容的营销电子邮件示例。随意复制它，修改它，无论你喜欢什么。
值得注意的是.. 当我在一家初创公司工作时，我必须每周编写几封电子邮件和电子邮件。我们选择以最困难的方式做到这一点：疯狂的客户端兼容性和性能。使用尽可能少的图像。图像中没有文本，而是我必须拼接文本，并使文本后面的背景图像等内容在客户端上正常工作。电子邮件中文本后面的背景对于某些电子邮件客户端来说非常难以正常工作。可能，但是令人沮丧的废话。当我离开那份工作并开始为大品牌工作时，在短时间内我不得不编写更多电子邮件代码（我不再编写电子邮件代码）..但是对于那些大品牌..他们没有'我不想让我浪费几个小时的时间编写电子邮件。他们更喜欢只把它做成一张大图片、文字和所有东西……很容易尿尿。就这一点而言，当我在初创公司工作时..我们确实运行了一次测试，比较了高度抛光的编码电子邮件、基于文本的电子邮件和所有图像电子邮件的点击率..差异充其量可以忽略不计。
I could probably talk about the do's and don'ts of email coding for a while but if you consider just a couple basic principles you'll know more than most..
gmail (and MS Outlook) are the two most difficult email clients to code for but it is possible to develop a responsive email with a high level of design that will display well across clients. On Gmail, it will just display your desktop layout without the responsiveness.
You should use very little to no CSS at all when you start coding an email. Think of a 'desktop-first' approach and code it as simple as possible as you'd like it to appear when viewed at 600 pixels wide. I don't care if people say it works in email or not, if there's a more depreciated way of accomplishing the same thing, the more depreciated method is always going to be more compatible with email clients.
Forget about css and html as you typically use it. You should attempt to limit your tags to xhtml1.0 valid tags only. You can actually do a lot of layout with the limited palette of tags, you just have to think of more round-about ways of doing so.
For a very simple example:
Rather than using padding or margin or transparent image spacers to achieve vertical spacing within a CTA button you can use a table nested one table deep, xhtml valid attribute tags and zero CSS to achieve a vertically centered label within a padded color button with colored text.
Step 1
Code your email without CSS and make it look good.
At this point your alphabet should consist of nothing other than
html,body,table,tbody,tr,td,span,a,b,nobr,src,alt,target,cellpadding,cellspacing,border,align,bgcolor,color,height, and the alphanumeric content within those tags.
You may be tempted to use valign,style,background,class,...... DON'T.. not yet
If you want to achieve the highest cross compatibility possible, accept that some clients are going to see it this way, so it behooves you to make that as clean and presentable as possible.
Step 2
Once you've got that basic structure looking good and presentable you can consider making it look better. You can start adding some CSS and HTML4 tags to improve the styling for those clients that will see it. But don't go hog wild, try to maintain the minimalistic approach.
Once you've got your CSS in place, whatever CSS you want to use (caniuse.com is a great resource if you want to get an idea of what to try to use). Once it's all in place, delete all of it abruptly and without prejudice, just delete those new tags, nothing else. Now look at the email. If deleting those tags didn't break your layout, then your good to go. You can safely undelete them and sleep well knowing you have a cross compatible email. If anything broke your layout, your best not having it there because a lot of clients are going to do exactly that and delete it and your going to have a really bad day if you leave it there.
Step 3
Once that's done you can add a couple [tag:media queries]. I've got media queries for 600 and 400 and I double them up to achieve higher compatibility. Using CSS in the head you can then set about overwriting any of your layout in the HTML with important tags. So those clients that read it will ignore the inline styling you used and adhere to the new style your adding. This is great for adjusting the width of elements, hiding or displaying elements, etc..
With those 4 lines you can do almost all of your responsive structuring.
**note: the use of the desktop class requires additional effort
This is probably the most important CSS in my code. The example table will not display on any desktop devices (including Gmail) but will display on mobile devices. The only client this fails to work properly with is Windows Mobile 7.
I use these two classes to remove elements from the mobile layout to achieve the responsive design. The desktop class is avoided and used only in rare circumstances because it means your email will loose compatibility in Windows Mobile 7.
Step 4
Test test test test test. Its ridiculously insane how easily an email can break. Do not trust Litmus or any testing suite because they are only accurate to a degree. You should have a test device for every device your concerned with. If you have not spent considerably more time testing the email than however long it took you to code, then you have not tested thoroughly enough..
Don't trust what people say about coding email unless you've tried it, tested it, and proved it yourself. Because far more people think they know what they're talking about than those that actually do, especially when it comes to reading blogs and articles about email coding.
If you'd like an example or boilerplate to use, here is the template I created over the course of about 2 years of coding 2+ emails almost every week. I can pretty much guarantee it will be the most cross client/device compatible marketing email example you will find. Feel free to copy it, modify it, whatever you like.
Its worth noting.. When I worked for a startup I had to code several emails per week & we chose to do so in the most difficult way possible: insane client compatibility & using as few images as possible. No text in images, rather I had to splice around the text, and make things like background images behind text work well across clients.. Backgrounds behind text in an email are incredibly difficult to make work well for some email clients.. Possible, but frustrating as crap. When I moved on from that job and started working for big name brands, for a short period of time I had to code a few more emails (I don't code emails anymore).. but for those big brands.. they didn't want me to waste hours of time coding emails. They preferred to just make it one big image, text and all.. Easy peezy. On that note, back when I worked at the startup.. we did run a test once, comparing click rate on highly polished coded emails vs text based emails vs all image emails.. The differences were negligible at best.
就电子邮件客户端而言，电子邮件中的 HTML 以
开头。所有样式都必须内联完成，不幸的是电子邮件客户端的行为方式与浏览器不同。 此处提供了一些很好的信息：As far as the email client is concerned the HTML in an email begins with
<body>. All styling must be done inline, unfortunately email clients don't behave the same way browsers do. There is some good information available here:我是否使用内联 css？
是的，
我可以在 html 中包含样式表吗？
是的，HEAD 和 BODY 标记都是需要的，因为大多数 Web 邮件程序仅解析 BODY 的内容
html 是否以
< 开头html>或？Html 以 DOCTYPE 声明开头。
这是我最喜欢的，因为您可以使用 FONT 元素。 （对于在 A 元素中设置稳定链接颜色的样式很有用）
http://www.w3schools.com/html /html_doctype.asp
http://www.w3schools.com/tags/tag_doctype.asp
Do I use inline css?
Yes,
Can I include the stylesheet in the html?
Yes, HEAD and BODY tag are both needed, because most web mailer parse only the content of the BODY
Does the html begin with
<html>or<body>?Html starts with the DOCTYPE Declaration.
It's my favorite, because you can make use of the FONT element. (useful to style stable link colors within the A element)
http://www.w3schools.com/html/html_doctype.asp
http://www.w3schools.com/tags/tag_doctype.asp