C# 在将发送到电子邮件的 html 中添加 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19517245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding css in html that will be sent to an email
提问by user1960836
I have created a method that will send an email with information to customers. However, the email looks awful cus there is no style to it. I can't apply the style to the email for some reason. I have tried to google it, and there is a lot on how to solve this in code behind, but that's not my issue. I must place the css code in the Html body, since it must be displayed for the client when he opens the email.
我创建了一种方法，可以向客户发送包含信息的电子邮件。然而，电子邮件看起来很糟糕，因为它没有风格。由于某种原因，我无法将样式应用于电子邮件。我试图用谷歌搜索它，在后面的代码中有很多关于如何解决这个问题的方法，但这不是我的问题。我必须将 css 代码放在 Html 正文中，因为客户端打开电子邮件时必须显示它。
So my question is, how do I add css to the html code above? I have tried doing:
所以我的问题是，如何将 css 添加到上面的 html 代码中？我试过这样做：
<div style='...'></div>
and this does not work
这不起作用
Any help on how to solve this is appreciated. Below some of my code. I have shortened it, for readability.
任何有关如何解决此问题的帮助表示赞赏。下面是我的一些代码。为了可读性，我已经缩短了它。
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>";
Here are some of my info on the mail part
这是我在邮件部分的一些信息
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);
采纳答案by Monika
Here are some tips:
以下是一些提示：
Don't place CSS inside the HEAD tags in HTML Email.
不要将 CSS 放在 HTML 电子邮件的 HEAD 标签内。
When you code a web page, you traditionally place the CSS code in between the HEAD tags, above your content. But when HTML emails are viewed in browser-based email apps (like YahooMail!, Gmail, Hotmail, etc), those applications strip out the HEAD and BODY tags by default.
对网页进行编码时，通常会将 CSS 代码放在内容上方的 HEAD 标记之间。但是当在基于浏览器的电子邮件应用程序（如 YahooMail!、Gmail、Hotmail 等）中查看 HTML 电子邮件时，这些应用程序默认会去掉 HEAD 和 BODY 标签。
We recommend that you place your CSS code inline to your content (Note: browser-based email apps also strip out your BODY tag, so any background colors or BODY settings should be handled with a 100% wide TABLE "wrapper" around your email. Or we suggest that you take a look at our Automatic CSS-inliner feature.).
我们建议您将 CSS 代码内嵌到您的内容中（注意：基于浏览器的电子邮件应用程序也会去除您的 BODY 标签，因此任何背景颜色或 BODY 设置都应使用 100% 宽的 TABLE“包装器”围绕您的电子邮件进行处理。或者我们建议您查看我们的自动 CSS 内联功能。）。
It should look something like this:
它应该是这样的：
<span style=" font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #BBBBBB;">Your content here....</span>
Use inline CSS.
使用内联 CSS。
Referencing CSS files on your server like this is not very reliable:
像这样在服务器上引用 CSS 文件不是很可靠：
<link href="http://www.yourdomain.com/style.css" rel="stylesheet" type="text/css">
You should use inline CSS (as specified above). Add a space in front of CSS lines.
您应该使用内联 CSS（如上所述）。在 CSS 行前添加一个空格。
We've noticed that some email servers (not MailChimp's, but your recipients') like to strip out any lines that begin with periods (.)
我们注意到一些电子邮件服务器（不是 MailChimp 的，而是您的收件人的）喜欢去掉任何以句点 (.)
This can ruin your CSS. So, the workaround is to add a space in front of any CSS that begins with a dot, such as:
这会毁了你的 CSS。因此，解决方法是在任何以点开头的 CSS 前面添加一个空格，例如：
.title {font-size:22px;}
.subTitle {font-size:15px;}
This is, of course, only needed if you're not able to place CSS code inline to your content.
当然，这仅在您无法将 CSS 代码内嵌到您的内容时才需要。
回答by user1098580
I think that you're missing a header in your html. I format my mail like this:
我认为您在 html 中缺少标题。我像这样格式化我的邮件：
<html>
<head>
<style>
All your css here
</style>
</head>
<body>
your html here
</body>
</html>
And it work fine.
它工作正常。
