web-dev-qa-db-ja.com

メールに送信されるHTMLにCSSを追加する

お客様に情報をメールで送信する方法を作成しました。ただし、メールはひどい見た目で、スタイルはありません。何らかの理由でメールにスタイルを適用できません。私はそれをグーグルで試みました、そしてコードビハインドでこれを解決する方法に多くがありますが、それは私の問題ではありません。クライアントがメールを開くときにクライアントに表示する必要があるため、HTMLコードの本文にcssコードを配置する必要があります。

だから私の質問は、上の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);
c#htmlasp.netcssemail
11
user1960836

ここにいくつかのヒントがあります：

HTMLメールのHEADタグ内にCSSを配置しないでください。

Webページをコーディングする場合、従来は、CSSコードをHEADタグの間、コンテンツの上に配置します。ただし、HTMLメールをブラウザベースのメールアプリ（YahooMail！、Gmailなど）で表示すると、 、Hotmailなど）、これらのアプリケーションは、デフォルトで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コードをコンテンツにインラインで配置できない場合にのみ必要です。

12
Monika

HTMLのヘッダーが欠落していると思います。メールを次のようにフォーマットします。

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

そして、それはうまくいきます。

0
user1098580