在html中添加将发送到电子邮件的css

Question

我创建了一种方法,可以向客户发送包含信息的电子邮件.然而,电子邮件看起来很糟糕,因为它没有风格.由于某种原因,我无法将该样式应用于电子邮件.我试图谷歌它,并有很多关于如何在代码背后解决这个问题,但这不是我的问题.我必须将CSS代码放在Html正文中,因为在打开电子邮件时必须为客户端显示它.

所以我的问题是,如何在上面的html代码中添加css？我试过做:

<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: &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>";

以下是我在邮件部分的一些信息

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

Answer 1

以下是一些提示:

不要将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代码内嵌到您的内容时才需要这样做.