简体繁体 English

HTML电子邮件css的所有CSS都可以进入市场吗？

[英]Can all the CSS for HTML emails css go in the head?

原文 2012-08-23 10:59:00 9 5 html/ css/ email/ html-email/ mailchimp

I am using one of the MailChimp templates as a base for an email design, however I will not be using MailChimp to send the email. 我使用其中一个MailChimp模板作为电子邮件设计的基础，但我不会使用MailChimp发送电子邮件。

The MailChimp template has around 330 lines of CSS in the head. MailChimp模板头部有大约330行CSS。 Its beens a while since I last did HTML emails, but is this acceptable or do I have to use inline styles on the elements? 自从我上次发送HTML电子邮件以来已经有一段时间了，但这是可以接受的还是我必须在元素上使用内联样式？

I wasn't sure if MailChimp had a script that turned all the styles into inline css, and if I had to do the same thing. 我不确定MailChimp是否有一个脚本可以将所有样式转换为内联css，如果我必须做同样的事情。

5 个解决方案

inline CSS is the most preferred for email templates, because not all email clients support CSS in head section inline CSS是电子邮件模板的首选，因为并非所有电子邮件客户端都支持CSS in head

Here is Guide to CSS support in email 这是电子邮件中的CSS支持指南

Gmail is now rolling out support for media queries and styles in the head . Gmail现已推出支持在媒体查询和样式head 。 Using Campaign Monitor's Guide , all the major clients now support styles in the head . 使用Campaign Monitor的指南，所有主要客户现在都支持head样式。 If you're wanting the broadest possible support it's probably safer to keep inlining styles, but if your users are all using the major clients it's now safe to start pulling the styles out. 如果你想获得尽可能广泛的支持，那么保持内联样式可能会更安全，但如果你的用户都在使用主要客户，现在可以安全地开始提取样式。

Inline Styles is the way go to achieve a consistent look and feel across all email clients. 内联样式是在所有电子邮件客户端中实现一致外观的方式。

Also have a look at: http://coding.smashingmagazine.com/2012/03/13/techniques-overcome-poor-css-support-email/ 另请查看： http ： //coding.smashingmagazine.com/2012/03/13/techniques-overcome-poor-css-support-email/

Here is a great tool for taking an HTML-email document with styles in the header and moving them inline. 这是一个很棒的工具，用于在标题中包含样式并将它们内联移动的HTML电子邮件文档。 Should save you a lot of time and effort. 应该为您节省大量的时间和精力。

http://premailer.dialect.ca/ http://premailer.dialect.ca/

It depends on which company you are using to send the email, certain companies, such as campaign monitor will automatically add your styles in the head to the corresponding elements marked with that class or ID. 这取决于您使用哪家公司发送电子邮件，某些公司（如广告系列监控器）会自动将您的样式添加到标有该类或ID的相应元素中。 I would check whether the company provides that service before sending. 我会在发送之前检查公司是否提供该服务。

I would recommend using inline styling at all times, even if you are using a service that automatically adds it inline, just in case you ever decide to switch to another provider. 我建议始终使用内联样式，即使您使用的是自动添加内联的服务，以防您决定切换到其他提供程序。

Generally the issues with using styles in the head come from gmail, hotmail and yahoo mail. 一般来说，使用头部样式的问题来自gmail，hotmail和yahoo邮件。 These email clients tend to strip out the <head> tags. 这些电子邮件客户端倾向于删除<head>标记。 Some people claim that they are having positive results within these email clients with <head> styles, but if I were you I would play it safe and go inline. 有些人声称他们在这些电子邮件客户端中使用<head>样式获得了积极的结果，但如果我是你，我会安全地播放并进入内联。