it-swarm.com.de

Hinzufügen von CSS in HTML, die an eine E-Mail gesendet werden

Ich habe eine Methode erstellt, die eine E-Mail mit Informationen an Kunden sendet. Die E-Mail sieht jedoch furchtbar aus, da sie keinen Stil hat. Ich kann den Stil aus irgendeinem Grund nicht auf die E-Mail anwenden. Ich habe versucht, es zu googeln, und es gibt eine Menge Möglichkeiten, dies im Code zu lösen, aber das ist nicht mein Problem. Ich muss den CSS-Code in den HTML-Text einfügen, da er dem Client beim Öffnen der E-Mail angezeigt werden muss.

Meine Frage ist also, wie füge ich CSS zum obigen HTML-Code hinzu? Ich habe versucht zu tun:

<div style='...'></div>

und das geht nicht

Jede Hilfe zur Lösung dieses Problems wird gebeten. Unten ein Teil meines Codes. Ich habe es aus Gründen der Lesbarkeit gekürzt.

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

Hier sind einige meiner Infos zum Mail-Teil

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

Hier sind einige Tipps:

Platzieren Sie CSS nicht in den HEAD -Tags in HTML-E-Mails.

Wenn Sie eine Webseite codieren, platzieren Sie den CSS-Code traditionell zwischen den HEAD -Tags über Ihrem Inhalt. Wenn jedoch HTML-E-Mails in browserbasierten E-Mail-Apps (wie YahooMail !, Gmail, Hotmail usw.) angezeigt werden, werden in diesen Anwendungen standardmäßig die Tags HEAD und BODY entfernt.

Wir empfehlen Ihnen, Ihren CSS-Code in Ihren Inhalt einzufügen (Hinweis: Browser-basierte E-Mail-Apps entfernen auch Ihr BODY-Tag, sodass alle Hintergrundfarben oder BODY-Einstellungen mit einem 100% breiten TABELLEN-Wrapper um Ihre E-Mail behandelt werden sollten. Oder wir schlagen vor, dass Sie einen Blick auf unsere automatische CSS-Inliner-Funktion werfen.).

Es sollte ungefähr so ​​aussehen:

<span style=" font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #BBBBBB;">Your content here....</span>

Verwenden Sie Inline-CSS.

Das Referenzieren von CSS-Dateien auf Ihrem Server ist nicht sehr zuverlässig:

<link href="http://www.yourdomain.com/style.css" rel="stylesheet" type="text/css">

Sie sollten Inline-CSS verwenden (wie oben angegeben). Fügen Sie ein Leerzeichen vor den CSS-Zeilen ein.

Wir haben festgestellt, dass einige E-Mail-Server (nicht MailChimps, sondern die Ihrer Empfänger) gerne Zeilen entfernen, die mit Punkten (.) Beginnen.

Dies kann Ihr CSS ruinieren. Die Problemumgehung besteht also darin, vor jedem CSS, das mit einem Punkt beginnt, ein Leerzeichen einzufügen, z.

.title {font-size:22px;}
.subTitle {font-size:15px;}

Dies ist natürlich nur erforderlich, wenn Sie keinen CSS-Code in Ihren Inhalt einfügen können.

11
Monika

Ich denke, dass Sie eine Überschrift in Ihrem HTML vermissen. Ich formatiere meine Mail so:

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

Und es funktioniert gut.

0
user1098580