难以理解 CSS-MJML 中的样式

Question

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

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

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

Answer 1

好问题。

MJML 和 HTML 是标记语言。 MJML 完全依赖 HTML 和 CSS 浏览器效果。也就是说，MJML 程序将 MJML 标记翻译成 HTML 和 CSS。浏览器只获取 HTML 和 CSS.

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

在HTML中，我们可以通过CSS与DOMobject进行交互，有时会使用class的概念。我们可以在 classes 内外使用 attributes。

同样，在 MJML 中，我们可以通过 MJML attributes 和 mj-class 的 MJML 概念与 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。

主要是为了其他人或以后的读者：如果您不能使用 URL 并希望重新创建以下代码，也许您可以 copy-and-paste 上面的代码变成 https://mjml.io/try-it-live. Otherwise, you'll want access to the MJML program and to MJML and HTML files. MJML introductory pages are at https://mjml.io/. MJML works as a NodeJS (NPM) module. The community offers a desktop application. The MJML team supports a VS Code plug-in. There are lots of live questions and answers at https://mjml.slack.com/ (signup: 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，touch/click 靠近渲染 window 右上角的单词“查看 HTML”。我希望您会看到您识别为 HTML 和 CSS.

的代码

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

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

我的第 108 行是 HTML table 的一部分，特别是 td。此元素具有“red-text”的 class 和 child div。 div 有一个 HTML 属性“font-style:italic”和文本“我是红色和下划线”。

div 中的文本受以下因素影响：(1) div 中要求斜体的属性，以及 (2) class 中的属性“red-text"（CSS 和 HTML 规则）要求在 child divs 上使用红色和下划线。

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

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

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

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

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

第 1 步将我带到了 mj-text，“我是红色的，下划线”——目标 mj-text.

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

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

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

当您为 mj-style 编写 CSS 时，第 3 步开始，就像您为 HTML style 编写 select 目标 DOM object。注意只使用 selectors 电子邮件客户端程序支持；否则，您的电子邮件会给使用这些程序的联系人带来意想不到的结果。此外，select CSS 属性用于创建渲染。

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

在第3步中，“.red-text div”select是div；在 mj-style 中的 MJML 脚本中引用“red-text”。所需的 CSS 属性也在那里。

这超出了你的问题范围，但它很短：检查你是否觉得 mj-html-attributes 组件使这个过程更容易。

那就是，“为什么 div？”它不会总是 div;目标 DOM object 可能不止 object 深。

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

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

难以理解 CSS-MJML 中的样式

Difficulty in understanding CSS-styling in MJML

css

mjml