web-dev-qa-db-fra.com

Ajout de css en html qui sera envoyé à un email

J'ai créé une méthode qui enverra un courrier électronique contenant des informations aux clients. Cependant, l'e-mail a l'air horrible car il n'y a pas de style. Je ne peux pas appliquer le style à l'e-mail pour une raison quelconque. J'ai essayé de le google, et il y a beaucoup sur la façon de résoudre ceci dans le code derrière, mais ce n'est pas mon problème. Je dois placer le code CSS dans le corps HTML, car il doit être affiché pour le client lorsqu'il ouvre le courrier électronique.

Ma question est donc la suivante: comment puis-je ajouter des CSS au code HTML ci-dessus? J'ai essayé de faire:

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

et ça ne marche pas

Toute aide sur la façon de résoudre ceci est appréciée. Ci-dessous une partie de mon code. Je l'ai abrégé pour plus de lisibilité.

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

Voici quelques unes de mes infos sur la partie mail

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

Voici quelques conseils:

Ne placez pas CSS dans les balises HEAD dans un courrier électronique HTML.

Lorsque vous codez une page Web, vous placez traditionnellement le code CSS entre les balises HEAD, au-dessus de votre contenu. Toutefois, lorsque les messages HTML sont affichés dans des applications de messagerie basées sur un navigateur (telles que YahooMail !, Gmail, Hotmail, etc.), ces applications suppriment les balises HEAD et BODY par défaut.

Nous vous recommandons de placer votre code CSS en ligne avec votre contenu (Remarque: les applications de messagerie basées sur un navigateur suppriment également votre balise BODY. Par conséquent, toute couleur d'arrière-plan ou tout paramètre BODY doivent être gérés avec un "wrapper" TABLE 100% large autour de votre messagerie. Ou nous vous suggérons de jeter un coup d'œil à notre fonctionnalité Automatique CSS-inliner.).

Ça devrait ressembler a quelque chose comme ca:

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

Utilisez des CSS en ligne.

Référencer des fichiers CSS sur votre serveur de cette manière n'est pas très fiable:

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

Vous devez utiliser le CSS en ligne (comme spécifié ci-dessus). Ajouter un espace devant les lignes CSS.

Nous avons remarqué que certains serveurs de messagerie (pas ceux de MailChimp, mais ceux de vos destinataires) aiment supprimer les lignes commençant par des points (.)

Cela peut ruiner votre CSS. La solution consiste donc à ajouter un espace devant tout code CSS commençant par un point, tel que:

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

Ceci n’est bien entendu nécessaire que si vous ne pouvez pas insérer de code CSS dans votre contenu.

11
Monika

Je pense qu'il vous manque un en-tête dans votre code HTML. Je formate mon courrier comme ceci:

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

Et ça marche bien.

0
user1098580