电子邮件中的CSS类 [英] CSS classes in email
问题描述
据我所知，CSS选择器/类不能用来设置您发送的电子邮件的样式，因为许多电子邮件客户端不会获取外部css文件。
As far as I know, CSS selectors / classes cannot be used to style the emails you send out, since many email clients will not fetch the external css file.
我想知道人们通常如何为自动电子邮件创建模板。你只是内联每个CSS样式到DOMs？这似乎是非常低效率和容易出错的方法。
I was wondering how people normally create templates for automated Emails. Do you just inline every CSS styling to the DOMs? It seems highly inefficient and error-prone method.
有一件事我想知道是否有一个工具，将由CSS选择器样式的HTML文档平展到HTML文档使用内联CSS样式。如果这样的工具存在，那么我可以使用正常的模板框架我有（我现在使用django）生成电子邮件，处理样式，并发出结果。
One thing I was wondering was whether there's a tool that "flattens" a HTML document styled by CSS selectors into a HTML document with inline CSS styling. If such tool exists, then I can use normal template framework I have (I'm using django at the moment) to generate the email, process the styles, and send out the result.
推荐答案
There is a nice article here: Using CSS in HTML Emails: The Real Story
总之：
- 包括
< head>带有样式的部分。 Apple Mail.app支持它，但Gmail和Hotmail不支持，因此它是一个不会。 Hotmail将在正文中支持样式部分，但Gmail仍然不支持。 - 链接到外部样式表。
- 背景图片/背景位置。 Gmail也是这个问题的罪魁祸首。
- strong>清除浮动。
- 保证金。严重，Hotmail忽略边距。基本上任何CSS定位都不起作用。
- 字体任何东西。很可能Eudora会忽略您尝试用字体声明的任何内容。
- Include a
<head>section with styles. Apple Mail.app supports it, but Gmail and Hotmail do not, so it's a no-no. Hotmail will support a style section in the body but Gmail still doesn't. - Link to an external stylesheet. Not many email clients support this, best to just forget it.
- Background-image / Background-position. Gmail is also the culprit on this one.
- Clear your floats. Gmail again.
- Margin. Yep, seriously, Hotmail ignores margins. Basically any CSS positioning at all doesn't work.
- Font-anything. Chances are Eudora will ignore anything you try to declare with fonts.
它不像你想象的那么糟糕，因为我们基本上是开发一个一次性的电子邮件，内联样式不像在网站上使用它们那么令人讨厌。
In two words, inline styles. It's not as awful as you might think, since we are basically developing a one-off email, inline styles are not nearly as egregious as using them on a website. Need a big green title for a block of text?
< h3 style =color：＃1c70db;> NOW $ 159< / h3>
- 大罐头是图片。创造性地思考如何使用图片。
- 由于您将使用表格，因此可以考虑网格。网格是设计师的朋友，有很多你可以做一个网格。
这篇关于电子邮件中的CSS类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
