在将发送到电子邮件的 html 中添加 css
Posted
技术标签:
【中文标题】在将发送到电子邮件的 html 中添加 css【英文标题】：Adding css in html that will be sent to an email 【发布时间】：2013-10-31 06:52:37 【问题描述】：我创建了一种方法，可以向客户发送包含信息的电子邮件。然而，这封电子邮件看起来很糟糕，因为它没有风格。由于某种原因，我无法将样式应用于电子邮件。我试过用谷歌搜索它，在后面的代码中有很多关于如何解决这个问题的方法，但这不是我的问题。我必须将 css 代码放在 html 正文中，因为它必须在客户打开电子邮件时显示给他。
所以我的问题是，如何将 css 添加到上面的 html 代码中？我试过做：
<div style='...'></div>
这不起作用
感谢任何有关如何解决此问题的帮助。下面是我的一些代码。为了便于阅读，我已经缩短了它。
string HtmlBody = @"<div style='float: right'>
<h3>Faktura</h3> <br />
Navn:<asp:Label ID='navn' runat='server' Text='%Navn%'/> <br />
Adresse:<asp:Label ID='adresse' runat='server' Text='%Adresse%'/> <br />
Postnr:<asp:Label ID='postnummer' runat='server' Text='%Postnr%'/> <br />
Land:<asp:Label ID='land' runat='server' Text='Danmark' /> <br />
Tlf: <asp:Label ID='tlfnummer' runat='server' Text='%Tlf%' /> <br />
Mail: <asp:Label ID='email' runat='server' Text='%Email%' /> <br />
<div style='float: right'>
<p>Dato</p>
</div>
<hr /> <br />
<table style='background-color: #c00764'>
<tr>
<td><b>Fakturanr:</b></td>
<td>%fakturanr%</td>
</tr>
<tr>
<td><b>Ordrenr:</b></td>
<td>%Ordrenr%</td>
</tr>
</table>
</div>";
这是我在邮件部分的一些信息
MailMessage mailMsg = new MailMessage();
mailMsg.IsBodyHtml = true;
mailMsg.Priority = MailPriority.Normal;
var smtpValues = GetSmtpValues();
var smtpCredentials = GetNetworkCredentials();
SmtpClient smptClient = new SmtpClient(smtpValues.Key, smtpValues.Value);
smptClient.EnableSsl = true;
smptClient.Credentials = new NetworkCredential(smtpCredentials.Key, smtpCredentials.Value);
//Send mail
smptClient.Send(mailMsg);
【问题讨论】：
你的问题是什么/你想做什么，到底是什么问题？ 您已经使用内联 css，应该可以正常工作，只要确保您发送支持 HTML 的电子邮件。 客户使用什么电子邮件客户端？电子邮件客户端在支持多少 CSS 方面存在很大差异。否则 HTML 是否正常显示（h3 等的粗体和大）？ 内联样式绝对适用于大多数基本样式。您是否将IsBodyHtml 指定为您的 System.Net.Mail.MailMessage 对象为 true？
我推荐使用这个帖子：***.com/questions/9584170/…Best Regards, Dii~
【参考方案1】：
我认为您的 html 中缺少标题。 我这样格式化我的邮件：
<html>
<head>
<style>
All your css here
</style>
</head>
<body>
your html here
</body>
</html>
而且效果很好。
【讨论】：
其实邮件的内容应该只是内容而已。不需要或不需要<head> 或 <html>。【参考方案2】：
这里有一些提示：
不要将 CSS 放在 HTML 电子邮件的 HEAD 标记内。
当您编写网页代码时，通常会将 CSS 代码放在 HEAD 标记之间，位于内容上方。但是，当在基于浏览器的电子邮件应用程序（如 YahooMail!、Gmail、Hotmail 等）中查看 HTML 电子邮件时，这些应用程序默认会去除 HEAD 和 BODY 标签。
我们建议您将 CSS 代码内嵌到您的内容中（注意：基于浏览器的电子邮件应用程序也会去除您的 BODY 标记，因此任何背景颜色或 BODY 设置都应该使用 100% 宽的 TABLE“包装器”来处理您的电子邮件。或者我们建议您查看我们的自动 CSS 内联功能。）。
它应该看起来像这样：
<span style=" font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #BBBBBB;">Your content here....</span>
使用内联 CSS。
像这样引用服务器上的 CSS 文件不是很可靠：
<link href="http://www.yourdomain.com/style.css" rel="stylesheet" type="text/css">
您应该使用内联 CSS（如上所述）。 在 CSS 行前添加一个空格。
我们注意到一些电子邮件服务器（不是 MailChimp 的，而是您的收件人的）喜欢删除任何以句点 (.) 开头的行
这可能会破坏您的 CSS。因此，解决方法是在任何以点开头的 CSS 前面添加一个空格，例如：
.title font-size:22px;
.subTitle font-size:15px;
当然，只有在您无法将 CSS 代码内联到您的内容时才需要这样做。
【讨论】：
以上是关于在将发送到电子邮件的 html 中添加 css的主要内容，如果未能解决你的问题，请参考以下文章
如何为使用 php mail() 发送的 html 电子邮件添加背景颜色
添加目录中的文件后，如何使用 inotify-tools 向我发送电子邮件？