如何使用 CSS 构建 HTML 电子邮件？

发布于 2024-10-27 08:18:56 字数 183 浏览 5 评论 0原文

我可以像通常构建 html 页面一样构建 html 电子邮件吗？
我想将电子邮件正文设置为所有 html 代码的字符串。

电子邮件正文当然会很复杂，所以我需要使用大量 CSS 来构建一页 html 电子邮件。

我该怎么办？
css 代码存放在哪里？
我可以只包含服务器中的外部 .css 文件吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

給妳壹絲溫柔 2024-11-03 08:18:56

尽管这听起来完全是倒退的，而且不是我为网页推荐的，但在电子邮件中使用 css 的最佳方法是在 style 属性中内联。原因是很多电子邮件应用程序，特别是像 gmail、yahoo、hotmail 等网络邮件，不会尊重您的 css 类声明，并且通常会删除所有 css，除非它是内联的。很多时候，整个都会被删除，而且如果您将其包含在电子邮件中，标记通常也会被删除。

如果您刚刚开始创建 HTML 电子邮件，我强烈建议您使用 Litmus 或在各种电子邮件客户端上进行手动测试。 Litmus 或其他类似的服务将为您节省大量时间。

回复收藏 0 原文

情独悲 2024-11-03 08:18:56

您可以包含外部 css 文件，但它仅在网络连接时有效，最好包含内联 css。

回复收藏 0 原文

想你只要分分秒秒 2024-11-03 08:18:56

将 Content-Type 标头设置为 text/html 以发送 HTML 邮件。

最好将 CSS 样式直接内联到 HTML 中。或者只是在需要样式的元素上使用“style”属性。出于安全原因，大多数邮件客户端默认不会呈现外部图像和样式。我知道您可以将图像附加到邮件中（或选择将它们放在远程服务器上 - 但需要注意的是，邮件应用程序将提示用户下载）。您也许可以将 .css 文件作为附件。

大多数发送 HTML 邮件的客户端也使用多部分/替代 MIME 格式。非 HTML 客户端如果收到这样的邮件，仍然可以将邮件呈现为纯文本。

这是一个真实的示例邮件，演示了这一点

Return-Path: <[email protected]>
Received: from selbiepc (11-11-111-11.foob.ga.baloneynet.net [11.11.111.11])
        by mx.foobar.com with ESMTPS id f2sm4177017ybh.22.2011.03.27.22.24.02
        (version=SSLv3 cipher=OTHER);
        Sun, 27 Mar 2011 22:24:03 -0700 (PDT)
Message-ID: <11111111111111111111111111111111@selbiepc>
From: "Selbie" <[email protected]>
To: <[email protected]>
Subject: mail with html in it
Date: Sun, 27 Mar 2011 22:23:33 -0700
MIME-Version: 1.0
Content-Type: multipart/alternative;
    boundary="----=_NextPart_000_0011_01CBECCD.9BE136B0"
X-Priority: 3
X-MSMail-Priority: Normal
Importance: Normal


This is a multi-part message in MIME format.

------=_NextPart_000_0011_01CBECCD.9BE136B0
Content-Type: text/plain;
    charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable

This is an HTML mail with various formatting in it.  It will still =
render fine by non-html clients.




------=_NextPart_000_0011_01CBECCD.9BE136B0
Content-Type: text/html;
    charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable

<HTML><HEAD></HEAD>
<BODY dir=3Dltr>
<DIV dir=3Dltr>
<DIV style=3D"FONT-FAMILY: 'Calibri'; COLOR: #000000; FONT-SIZE: 12pt">
<DIV>This is an <STRONG>HTML mail</STRONG> with <FONT =
color=3D#ff0000>various=20
formatting</FONT> in it.  It will still render <FONT=20
size=3D2><EM>fine</EM></FONT> by non-html <U>clients</U>.</DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV></DIV></DIV></BODY></HTML>

------=_NextPart_000_0011_01CBECCD.9BE136B0--

Set the Content-Type header to text/html to send HTML mail.

You are better off inlining the CSS style directly into the HTML. Or just using the "style" attribute on the elements that need styling. Most mail clients, for security reasons, will not render external images and styles by default. I know you can attach images into the mail (or opt to have them on a remote server - but with the caveat the the mail app will prompt the user to download). You might be able to have .css files as attachments.

Most clients that send HTML mail also use the multipart/alternative MIME format. Non HTML-clients can still render the mail as plain text if they receive the mail like that.

Here is a real example mail that demonstrates this

Return-Path: <[email protected]>
Received: from selbiepc (11-11-111-11.foob.ga.baloneynet.net [11.11.111.11])
        by mx.foobar.com with ESMTPS id f2sm4177017ybh.22.2011.03.27.22.24.02
        (version=SSLv3 cipher=OTHER);
        Sun, 27 Mar 2011 22:24:03 -0700 (PDT)
Message-ID: <11111111111111111111111111111111@selbiepc>
From: "Selbie" <[email protected]>
To: <[email protected]>
Subject: mail with html in it
Date: Sun, 27 Mar 2011 22:23:33 -0700
MIME-Version: 1.0
Content-Type: multipart/alternative;
    boundary="----=_NextPart_000_0011_01CBECCD.9BE136B0"
X-Priority: 3
X-MSMail-Priority: Normal
Importance: Normal


This is a multi-part message in MIME format.

------=_NextPart_000_0011_01CBECCD.9BE136B0
Content-Type: text/plain;
    charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable

This is an HTML mail with various formatting in it.  It will still =
render fine by non-html clients.




------=_NextPart_000_0011_01CBECCD.9BE136B0
Content-Type: text/html;
    charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable

<HTML><HEAD></HEAD>
<BODY dir=3Dltr>
<DIV dir=3Dltr>
<DIV style=3D"FONT-FAMILY: 'Calibri'; COLOR: #000000; FONT-SIZE: 12pt">
<DIV>This is an <STRONG>HTML mail</STRONG> with <FONT =
color=3D#ff0000>various=20
formatting</FONT> in it.  It will still render <FONT=20
size=3D2><EM>fine</EM></FONT> by non-html <U>clients</U>.</DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV></DIV></DIV></BODY></HTML>

------=_NextPart_000_0011_01CBECCD.9BE136B0--

回复收藏 0 原文