在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代碼內嵌到您的內容時才需要這樣做。

Answer 2

我認為你在html中缺少一個標題。 我格式化我的郵件：

<html>
  <head>
    <style>
      All your css here
    </style>
  </head>
  <body>
    your html here
  </body>
</html>

它工作正常。

在html中添加將發送到電子郵件的css

問題描述

2 個解決方案

解決方案1
11 已采納 2013-10-30 07:36:15

解決方案2
0 2013-10-22 13:47:14

在html中添加將發送到電子郵件的css

問題描述

2 個解決方案

解決方案1 11 已采納 2013-10-30 07:36:15

解決方案2 0 2013-10-22 13:47:14

解決方案1
11 已采納 2013-10-30 07:36:15

解決方案2
0 2013-10-22 13:47:14