文档Journey OptimizerJourney Optimizer 指南

为电子邮件内容添加自定义 CSS email-metadata

Last update: Mon Aug 25 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

  • 中级
  • 用户

在设计电子邮件时，您可以直接在Journey Optimizer 电子邮件Designer中添加自己的自定义CSS。 此功能使您能够应用高级和特定的样式，从而更灵活、更好地控制您的内容外观。

定义自定义CSS define-custom-css

要向电子邮件内容添加自定义CSS，请执行以下步骤。

  1. 通过添加至少一个组件，确保在电子邮件Designer中定义了一些内容。

  2. 从左侧的​ 导航树 ​或右窗格顶部选择​ 正文。 CSS样式 ​部分将显示在右侧。

    选择“添加自定义CSS”按钮 {width="85%"}

    note note
    NOTE
    仅当编辑器中已存在内容时，CSS样式 ​部分才可用。

  3. 单击​ 添加自定义CSS ​按钮。

    note note
    NOTE
    添加自定义CSS ​按钮仅在选择​ 正文 ​时可用。 但是，您可以将自定义CSS样式应用于内容中的所有组件。

  4. 在弹出的专用文本区域中输入CSS代码。 确保自定义CSS有效并遵循正确的语法。 了解详情

    在专用文本区域中输入自定义CSS {width="65%"}

    note note
    NOTE
    使用包含锁定内容的模板时，无法向内容添加自定义CSS。 按钮标签更改为​ 查看自定义CSS，内容中已存在的任何自定义CSS均为只读。

  5. 保存自定义CSS并检查自定义CSS是否正确应用于您的内容。 如果不是这种情况，请查看疑难解答部分。

    选择“添加自定义CSS”按钮 {width="85%"}

  6. 如果删除所有内容，则该部分将消失，并且之前定义的自定义CSS将不再应用。

  7. 将内容添加回编辑器，以使​ CSS样式 ​部分重新显示。 再次应用自定义CSS。

确保使用有效的CSS use-valid-css

您可以在​ 添加自定义CSS ​文本区域中输入任何有效的CSS字符串。 格式正确的CSS会立即应用于内容。

CAUTION
用户负责其自定义CSS的安全性。 确保CSS不会引入漏洞或与现有内容冲突。
避免使用可能无意中破坏内容布局或功能的CSS。
CSS示例

以下是有效CSS的示例。

code language-css 
.acr-component[data-component-id="form"] {
  display: flex;
  justify-content: center;
  background: none;
}

.acr-Form {
  width: 100%;
  padding: 20px 100px;
  border-spacing: 0px 8px;
  box-sizing: border-box;
  margin: 0;
}

.acr-Form .spectrum-FieldLabel {
  width: 20%;
}

.acr-Form.spectrum-Form--labelsAbove .spectrum-FieldLabel,
.acr-Form [data-form-item="checkbox"] .spectrum-FieldLabel {
  width: auto;
}

.acr-Form .spectrum-Textfield {
  width: 100%;
}

#acr-form-error,
#acr-form-confirmation {
  width: 100%;
  padding: var(--spectrum-global-dimension-static-size-500);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: var(--spectrum-global-dimension-static-size-200);
}

.spectrum-Form-item.is-required .spectrum-FieldLabel:after{
  content: '*';
  font-size: 1.25rem;
  margin-left: 5px;
  position: absolute;
}

/* Error field placeholder */
.spectrum-HelpText {
  display: none !important;
}

.spectrum-HelpText.is-invalid,
.is-invalid ~ .spectrum-HelpText {
  display: flex !important;
}
code language-css 
@media only screen and (min-width: 600px) {
  .acr-paragraph-1 {
    width: 100% !important;
  }
}
无效CSS的示例

如果输入的CSS无效，则会显示一条错误消息，指示CSS无法保存。 以下是无效CSS的示例。

不接受使用<style>标记：

code language-html 
<style type="text/css">
  .acr-Form {
    width: 100%;
    padding: 20px 100px;
    border-spacing: 0px 8px;
    box-sizing: border-box;
    margin: 0;
  }
</style>

不接受无效语法，例如缺少大括号：

code language-css 
body {
  background: red;

技术实施 implementation

您的自定义CSS已添加至<head>部分的末尾，作为具有<style>属性的data-name="global-custom"标记的一部分，如下面的示例所示。 这可确保将自定义样式全局应用于内容。

请参阅示例
code language-html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="content-version" content="3.3.31">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style data-name="default" type="text/css">
      td { padding: 0; }
      th { font-weight: normal; }
    </style>
    <style data-name="grid" type="text/css">
      .acr-grid-table { width: 100%; }
    </style>
    <style data-name="acr-theme" type="text/css" data-theme="default" data-variant="0">
      body { margin: 0; font-family: Arial; }
    </style>
    <style data-name="media-default-max-width-500px" type="text/css">
      @media screen and (max-width: 500px) {
        body { width: 100% !important; }
      }
    </style>
    <style data-name="global-custom" type="text/css">
      /* Add you custom CSS here */
    </style>
  </head>
  <body>
    <!-- Minimal content -->
  </body>
</html>

电子邮件Designer的​ 设置 ​窗格未解释或验证自定义CSS。 它是完全独立的，只能通过​ 添加自定义CSS ​选项进行修改。

护栏 — 导入的内容

如果要对导入到Email Designer中的内容使用自定义CSS，请考虑以下事项：

  • 如果导入包括CSS的外部HTML内容，除非转换该内容，否则它将处于​ 兼容模式，其中​ CSS样式 ​部分不可用。 了解有关导入现有内容的更多信息

  • 如果导入使用Email Designer创建的内容（包括通过​ 添加自定义CSS ​选项应用的CSS），则之前应用的CSS将可通过同一选项显示和编辑。

故障排除 troubleshooting

如果未应用您的自定义CSS，请考虑以下选项。

  • 确保CSS有效并且没有语法错误（例如缺少大括号、属性名称不正确）。 了解如何操作

  • 确保将您的CSS添加到具有<style>属性的data-name="global-custom"标记中。

  • 检查global-custom样式标记是否将属性data-disabled设置为true。 如果是这种情况，则不会应用自定义CSS。

    accordion
    例如：
    code language-html 
    <style data-name="global-custom" type="text/css" data-disabled="true"> body: { color: red; } </style>

  • 确保您的CSS不会被其他CSS规则覆盖，包括应用于内容的任何主题。

    • 使用浏览器开发人员工具检查内容，并验证CSS是否针对正确的选择器。

    • 考虑将!important添加到声明以确保它们优先。

      accordion
      例如：
      code language-css 
      .acr-Form {
  background: red !important;
}
recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76