CSS¶

WebAcappella Fusion 允许在多个级别加入代码/脚本。

WebAcappella FUSION 完全独立于 JQuery 库，因此可以轻松集成第三方代码（无冲突）。

在组件中¶

HTML 组件允许您在页面的任何位置放置代码。
在每个组件中，你都可以输入一个或多个 CSS 类的名称。这些类可以在页面甚至网站的属性中定义。

神奇 "选择器¶

WebAcappella 的 .$''魔法'选择器可让您轻松为元素编写 CSS 规则。该选择器将自动被当前组件对应的选择器所取代。

小技巧

使用 WebAcappella 和图像组件发布的页面中的示例：

.$
{
   filter: sepia(1);
}

结果就是在图像上使用 "棕褐色 "滤镜。

在书页中¶

在每个页面的属性 - 自定义 HTML 代码部分，您可以输入 CSS/JS 代码。

在网站上¶

在网站的常规属性部分，自定义 HTML 代码部分允许您输入 CSS/JS 代码。每个代码都将自动集成到所有页面上。

在 HTML 代码中使用文件¶

您可能需要在 HTML 代码中使用文件。让我们以整合 Lottie 动画文件为例。

一个 Lottie 动画至少由页面上的 2 个元素组成：

将 Player Lottie 播放器代码放在页面的 HEAD 代码中，甚至放在网站一般属性的 HEAD 中。
```
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
```

洛蒂动画的代码

<lottie-player src="URL" background="transparent"  speed="1"  style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>

现在，您可以插入与所选动画相对应的 JSON 文件，而不是 URL 文本。

您还可以在网站上查找活动信息：

https://lottiefiles.com/

结果将是这样的

<lottie-player src="{{WA_FILE 9744-sample-animation.json}}" background="transparent"  speed="1"  style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>