难以理解MJML中的CSS样式

html5 • • 问答

我是 MJML 的新手，使用 css-styles 有点奇怪。对于样式 a，<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 中，我们可以通过 MJMLattributes和 MJML 概念与 MJML 组件进行交互mj-class。我们可以在mj-classes内外使用 MJML 属性。

MJMLmj-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 文档的代码 （几乎见下文）。让我们研究一下。

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

主要用于其他人或以后的读者：如果您无法使用 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。没有其他变化。

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

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

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

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

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

我的第 75 行是style包含的 HTML标记 MJML 的一部分。内部的 HTML 与 MJMLmj-style标记中包含“红色文本”的代码相同。哇！这就是意图。

我的第 108 行是 HTML 的一部分table，特别是td. 这个元素有一个“red-text”类和一个子元素div。该div有一个HTML属性“字体样式：斜体”和文字“我是红色的，并强调”。

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

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

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

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

  1. 编写您想要的 MJML。

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

  3. 使用 CSS inmj-style来设置目标 DOM 对象的样式。

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

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

当您将 放入css-class目标mj-text并编写匹配的mj-style. 在mj-style可能没有最终属性。

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

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

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

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

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

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

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

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

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

以上是难以理解MJML中的CSS样式的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>