难以理解 MJML 中的 CSS 样式

如何解决难以理解 MJML 中的 CSS 样式

我是 MJML 的新手，使用 css-styles 有点奇怪。为了给 <mj-text css-class="classname"></mj-text> 设置样式，我们必须在 css-styles 中添加一个“div”关键字，例如：

<mj-style>
 .classname div{
font-size: 15px;
 }  
</mj-style>

对于 mjml-text，我们使用“div”和类名来设置样式，例如 <mj-image> 或 <br> 等标签。我不知道如何使用 css-classes。另外，为什么我们在样式化时沿类名添加 div？请帮助...

解决方法

好问题。

MJML 和 HTML 是标记语言。 MJML 完全依赖 HTML 和 CSS 来实现浏览器效果。也就是说，MJML 程序将 MJML 标记转换为 HTML 和 CSS。浏览器只获取 HTML 和 CSS。

如果我们将自己限制在电子邮件客户端（Gmail 等）支持的 HTML 和 CSS 结构中，我们可以获得良好的电子邮件结果。那很难。 MJML 有帮助。

在 HTML 中，我们可以通过 CSS 与 DOM 对象交互，有时会使用 class 的概念。我们可以在课堂内外使用 attributes。

同样，在 MJML 中，我们可以通过 MJML attributes 和 MJML 概念 mj-class 与 MJML 组件交互。我们可以在 mj-classes 内外使用 MJML 属性。

MJML mj-style 组件支持指定 MJML 包含在 HTML 中的 CSS 代码。也就是说，mj-style 标签内的代码是 CSS，而不是 HTML 或 MJML。所有语法、应用规则和效果都仅来自 CSS 和 HTML。

电子邮件作者只能将 MJML 属性和 mj-class 应用于 MJML 组件，不能应用于 HTML 元素。 MJML 将 MJML 标记转换为 HTML，但电子邮件作者必须依赖该转换过程。

考虑这个 MJML 脚本。

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-class name="mjclass" color="green" font-size="30px" />
    </mj-attributes>
    <mj-style inline="inline">
      .blue-text div {
        color: blue !important;
      }
    </mj-style>
    <mj-style>
      .red-text div {
        color: red !important;
        text-decoration: underline !important;
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text css-class="red-text" font-style="italic">
          I'm red and underlined
        </mj-text>
        <mj-text css-class="blue-text">I'm blue because of inline</mj-text>
        <mj-text mj-class="mjclass">I'm green</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

这是来自 MJML documentation 的代码（差不多，见下文）。让我们研究一下。

https://mjml.io/try-it-live/jecmNRR-jzO 您可能会发现此 URL 很有用——我希望它至少在一个月内不会失效。在那里，您将看到上述脚本及其浏览器渲染。我将解释如何查看 HTML 标记。我将在下面使用该网址。

主要供其他人或以后的读者使用：如果您无法使用该 URL 并希望重新创建以下内容，也许您可以将上述代码复制并粘贴到 https://mjml.io/try-it-live 中。否则，您将需要访问 MJML 程序以及 MJML 和 HTML 文件。 MJML 介绍页面位于 https://mjml.io/。 MJML 作为 NodeJS (NPM) 模块工作。社区提供了一个桌面应用程序。 MJML 团队支持 VS Code 插件。 https://mjml.slack.com/（注册：https://join.slack.com/t/mjml/shared_invite/zt-gqmwfwmr-kPBnfuuB7wof5httaTcXxg）有很多实时问答。

在 MJML 中，让我们看看这个元素

<mj-text css-class="red-text" font-style="italic">
   I'm red and underlined
</mj-text>

与文档相比，我使用了三行（而不是一行）并添加了 MJML 属性 font-style。没有其他变化。

在包含“.red-text”（CSS 代码，记住）的 mj-style 中，我们指定我们希望文本为红色并带有下划线（CSS 和 HTML 规则和效果）。
在上面的 mj-text 标记中，您可能希望 font-style="italic" 的 MJML 语法将文本斜体。

我们确实在浏览器渲染中看到了所有这些。文本为红色、下划线和斜体。

这是怎么发生的？ MJML 创建了 HTML；让我们看看 HTML。

如果您使用上面的 URL，请触摸/点击呈现窗口右上角附近的“查看 HTML”字样。我希望你会看到你认为是 HTML 和 CSS 的代码。

我将在下面提到两个行号。它们可能与 MJML 版本 4.7.1 相关。我通过搜索“red-text”找到了它们；这应该适用于许多其他版本。

我的第 75 行是包含的 HTML style 标记 MJML 的一部分。里面的 HTML 与 MJML mj-style 标签中包含“red-text”的代码相同。哇！这就是意图。

我的第 108 行是 HTML table 的一部分，特别是 td。这个元素有一个“red-text”类和一个子div。 div 具有 HTML 属性“font-style:italic”和文本“I'm red and underlined”。

div 中的文本受 (1) div 中调用斜体的属性的影响，以及 (2) 来自类“red-text”的属性（CSS 和 HTML 规则）呼吁在孩子的 div 上使用红色和下划线。

这就是文本变成红色、下划线和斜体的方式。这就是如何使用 css-class。还有mj-class。感谢您阅读到这里。

第二个问题，也是个好问题。（为什么文档中的 div？）

这里介绍了一种技术，您可能会经常使用 MJML 的电子邮件作者。

编写您想要的 MJML。
如果找不到 MJML 样式来获得正确的呈现，请确定要定位的 MJML 标记。将 css-class 添加到 MJML 并为您使用的 mj-style 编写一个 class。现在的目标是知道 MJML 将把 CSS 类放在哪里；确切的样式可以稍后提供。然后，在 HTML 中，找到 class 和您作为 HTML 作者设置样式的 DOM 对象（目标 DOM 对象）。（秘密：你们都是那些作者！）
在 mj-style 中使用 CSS 来设置目标 DOM 对象的样式。

在这种情况下，第 1 步已使用上面的 MJML 脚本完成（您还没有 mj-style）。这就是您决定将文本“我是红色的并带有下划线”（等待它！），红色并带有下划线的地方。电子邮件作者可以使用 MJML 完成这两项工作，但我们正在学习使用 CSS 和 HTML 来完成这两项工作。我们会继续。

第 1 步将我引导至带有“我是红色并带有下划线”的 mj-text——目标 mj-text。

当您将 css-class 放入目标 mj-text 并编写匹配的 mj-style 时，步骤 2 开始。 mj-style 可能没有最终属性。

当您在 HTML 代码中搜索 mj-style 中使用的类名和字符串“I'm red and underlined”时，第 2 步就完成了。如果这些 DOM 对象彼此不接近，就会出现问题；它们可能是同一个对象。它们的关系决定了您将如何在第 3 步中编写 mj-style CSS。

在第 2 步中，我在 HTML 第 108 行的 class 中找到了 td，在子 div 中找到了字符串。

当您为 mj-style 编写 CSS 时开始第 3 步，就像为 HTML style 编写选择目标 DOM 对象一样。小心仅使用选择器电子邮件客户端程序支持；否则，您的电子邮件会给使用这些程序的联系人带来意想不到的结果。此外，选择 CSS 属性以创建渲染。

当您获得所需的渲染时，步骤 3 结束。

在第 3 步中，“.red-text div”选择了 div；进入 MJML 脚本中的 mj-style 中，指的是“红色文本”。所需的 CSS 属性也在那里。

这超出了您的问题，但很简短：检查您是否觉得 mj-html-attributes 组件使此过程更容易。

也就是说，“为什么是 div？”它不会总是一个 div;目标 DOM 对象的深度可能不止一个。

欢迎来到 MJML 世界。在编写 MJML 时，请记住 HMTL class 列表和 MJML mj-class 列表是分开的，不可互换。与 HTML 属性列表和 MJML 属性列表相同；也不能互换（尽管 MJML 重用名称，因为它们应该）。您可以全部使用它们，但将它们分开（就像这个元素一样）。

还有更多问题？这里有帮助。同样，https://mjml.slack.com/（注册：https://join.slack.com/t/mjml/shared_invite/zt-gqmwfwmr-kPBnfuuB7wof5httaTcXxg）也有很多很好的答案。两个友好的人群。

难以理解 MJML 中的 CSS 样式

如何解决难以理解 MJML 中的 CSS 样式

解决方法

相关推荐