添加CSS在HTML将被发送到电子邮件 [英] Adding css in html that will be sent to an email

问题描述

我已经创建，将发送一封电子邮件，信息传递给客户的方法。然而，电子邮件看起来可怕CUS没有风格吧。我不能样式应用到电子邮件的某些原因。我试图谷歌，而且有很多关于如何在code解决这个问题的背后，但是这不是我的问题。我必须把在HTML体的CSS code，因为当他打开电子邮件必须显示客户端。

我的问题是，如何添加CSS到HTML code以上？我曾尝试这样做的：

 ＆LT; D​​IV的风格='...'＆GT;＆LT; / DIV＆GT;
 

和这不起作用

如何解决任何帮助，这是AP preciated。下面我的一些code的。我已经缩短了，以便于阅读。

 字符串HtmlBody = @＆LT; D​​IV的风格=浮动：正确的'＆GT;
    ＆LT; H3＆GT; Faktura＆LT; / H3 GT＆; ＆LT; BR /＆GT;
    Navn：LT; ASP：标签ID ='navn'RUNAT =服务器文本=％Navn％'/＆GT; ＆LT; BR /＆GT;
    地址：＆LT; ASP：标签ID ='住址'RUNAT =服务器文本=％住址％'/＆GT; ＆LT; BR /＆GT;
    Postnr：LT; ASP：标签ID ='postnummer'RUNAT =服务器文本=％Postnr％'/＆GT; ＆LT; BR /＆GT;
    土地：LT; ASP：标签ID =土地RUNAT =服务器文本=丹麦/＆GT; ＆LT; BR /＆GT;
    TLF：放大器; NBSP;＆LT; ASP：标签ID ='tlfnummer'RUNAT =服务器文本=％TLF％'/＆GT; ＆LT; BR /＆GT;
    邮件：放大器; NBSP;＆LT; ASP：标签ID =电子邮件RUNAT =服务器文本=％电子邮件％/＆GT; ＆LT; BR /＆GT;    ＆LT; D​​IV的风格=浮动：正确的'＆GT;
        ＆所述p为H.;达托＆下; / P＆GT;
    ＆LT; / DIV＆GT;
    ＆LT;小时/＆GT; ＆LT; BR /＆GT;
    ＆LT;表样式=背景色：＃c00764'＆GT;
        ＆所述; TR＆GT;
            ＆LT; TD＆GT;＆LT; B＆GT; Fakturanr：LT; / B＆GT;＆LT; / TD＆GT;
            ＆LT; TD＆GT;％fakturanr％LT; / TD＆GT;
        ＆LT; / TR＆GT;
        ＆所述; TR＆GT;
            ＆LT; TD＆GT;＆LT; B＆GT; Ordrenr：LT; / B＆GT;＆LT; / TD＆GT;
            ＆LT; TD＆GT;％Ordrenr％LT; / TD＆GT;
        ＆LT; / TR＆GT;
    ＆LT; /表＆gt;
＆LT; / DIV＆gt;中;
 

下面是一些我对邮件的部分信息的

  MAILMESSAGE MAILMSG = MAILMESSAGE新（）;
mailMsg.IsBodyHtml = TRUE;
mailMsg.Priority = MailPriority.Normal;变种smtpValues​​ = GetSmtpValues​​（）;
变种smtpCredentials = GetNetworkCredentials（）;SmtpClient smptClient =新SmtpClient（smtpValues​​.Key，smtpValues​​.Value）;
smptClient.EnableSsl = TRUE;
smptClient.Credentials =新的NetworkCredential（smtpCredentials.Key，smtpCredentials.Value）;//发送邮件
smptClient.Send（MAILMSG）;
 

解决方案

下面是一些提示：

不要将CSS HTML电子邮件的HEAD标签中。

在code网页，你历来放置CSS code在HEAD标记之间，您的内容上方。但是，当HTML格式的电子邮件在基于浏览器的电子邮件应用被视为（如YahooMail !,的Gmail，Hotmail等），这些应用程序在默认情况下去掉头部和身体标记。

我们建议您将您的CSS code内嵌到您的内容（注：基于浏览器的电子邮件应用也去掉你身上的标签，所以任何背景颜色或机构设置应该有100％的宽表来处理包装在你的电子邮件。或者，我们建议你看一看我们的自动CSS的内联功能）。

它应该是这个样子：

 ＆LT;跨度风格=FONT-FAMILY：宋体，黑体，无衬线; FONT-SIZE：12px的;颜色：#BBBBBB;＆gt;此处您的内容... ＆LT; / SPAN＆GT;
 

使用内联CSS。

您的服务器这样的引用CSS文件是不是很可靠：

 ＆LT;链接HREF =htt​​p://www.yourdomain.com/style.css的rel =stylesheet属性类型=文/ CSS＆GT;
 

您应该使用内联CSS（如上规定）。
在CSS行前添加一个空格。

我们已经注意到，一些电子邮件服务器（不MailChimp的，但收件人的）想带出与周期开始的行（。）

这可以毁掉你的CSS。所以，解决办法是在以点开始，如任何CSS的前面加一个空格：

  .title伪{字体大小：的22px;}
.subTitle {字体大小：15像素;}
 

这是当然，只有当你不能够CSS code内嵌在你的内容所需。

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.

So my question is, how do I add css to the html code above? I have tried doing:

<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: &nbsp;<asp:Label ID='tlfnummer' runat='server' Text='%Tlf%' /> <br />
    Mail: &nbsp;<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);

解决方案

Here are some tips:

Don't place CSS inside the HEAD tags in HTML Email.

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.

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.).

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.

Referencing CSS files on your server like this is not very reliable:

<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.

We've noticed that some email servers (not MailChimp's, but your recipients') like to strip out any lines that begin with periods (.)

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:

.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在HTML将被发送到电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！