在 HTML 电子邮件中使用内联 CSS-基本指南

tongfkymm44 · Post by **tongfkymm44** » Sun Mar 02, 2025 8:52 am

编写一封能完美呈现 HTML 电子邮件绝非儿戏。当然，它能让您提供无与伦比的用户体验，但前提是您首先要付出大量艰辛的努力。如果您将 HTML 电子邮件想象成一台巨型机器，那么如果不考虑使其保持运转的几个组成要素，即开发过程中遵循的最佳实践，那您就太疏忽了。

这些关键组件之一是 CSS 或层叠样式表。电子邮件中的 CSS 决定了各种伊朗手机号码列表 HTML 元素（如表格、图像、颜色、按钮等）在电子邮件中的显示方式。此外，它还使您能够向模板引入动画和效果。简而言之，它为您的模块化电子邮件模板注入了活力，为增加参与度和互动奠定了基础。

以下是使用和不使用内联 CSS 属性的电子邮件外观的比较。

使用 CSS：

没有 CSS：

尽管 CSS 魅力无穷，但在 HTML 电子邮件中实现 CSS 却远非乐观。您可能会问，为什么？因为市场上流行的电子邮件客户端并未提供统一的 CSS 支持。因此，如果您不注意这些限制，最终会遇到一系列令人不快的格式和渲染问题。

解决这些问题最简单的方法是使用内联 CSS。那是什么？您会看到，在 HTML 文档中可以以三种方式编写 CSS：外部、嵌入和内联。因此，为了让我们对内联 CSS 有适当的了解，我们首先必须对这三种方法有一个基本的了解。

了解不同类型的 CSS
外部：在这种方法中，您将页面链接到外部 .css 文件。可以使用任何文本编辑器创建该文件，并通过 <link> 标记连接到主 HTML 文档的 <head> </head> 标记。在开发页面时，使用外部 CSS 或多或少是标准协议。但是，当电子邮件出现时，情况发生了巨大变化。要求电子邮件客户端浏览互联网、扫描所需文件然后上传的外部链接会被客户端视为垃圾邮件，这就是他们最终阻止此类链接的原因。
嵌入/内部：使用内部 CSS，您需要将样式代码放在 HTML 文档的 <head> </head> 标记内。现在，这样做的问题是大多数电子邮件客户端会剪掉 body 标记上方的所有内容，从而导致您的电子邮件被格式化为客户端的默认样式。不过，最近，对内部 CSS 的支持有所增加，这主要归功于响应式电子邮件的兴起。不过，它并不像您希望的那样可靠。
内联：在内联 CSS 中，您需要指定每个 HTML 元素的样式（在其 style 属性内）。不可否认，这种方法非常繁琐，影响了代码的可读性，并且会浪费开发人员的大量时间。但是，这是电子邮件客户端支持的唯一方法，因此您实际上没有太多选择。事实上，多达86% 的电子邮件设计师使用这种技术，提供电子邮件设计服务的机构也非常重视它。如果您想知道，是的，这种方法的乏味部分有一个解决方法 - 使用 CSS 内联编辑器工具。我们将很快讨论这个话题。
使用内联 CSS 的优点
我们先从显而易见的部分开始，我们在上一节中已经提到过 - 所有流行的电子邮件客户端和 ESP 都支持内联 CSS。因此，无论您的受众使用哪种客户端，内联 CSS 都能为您提供最佳机会，为他们提供统一的体验。
与外部 CSS 相比，这种方式不需要您开发和上传额外的文档，从而提高了流程的便利性。
它们享有更高的优先级，这意味着它们会覆盖现有的外部和内部样式表。
由于该方法实现起来相对简单，因此在预览和测试更改时非常方便。
正如我们之前提到的，尽管内联 CSS 有很多优点，但它会浪费大量时间，严重破坏代码结构。为了避免这些问题，我们使用了内联工具，这也是我们下一部分的主题。让我们来看看。