元素的CSS

关于元素CSS

元素的CSS是我们解决许多构建器在元素上简单提供“内联CSS”输入的缺点的方法。内联CSS可以作为一种不错的方式，让用户快速访问自定义单个元素的样式- - - - - -如节或列- - - - - -你越使用它，它的局限性就越明显:

• 没有办法确定目标嵌套标记在父元素内使用内联CSS
• 没有办法塑造风格互动状态对于元素，例如:徘徊，:主动等等
• 没有办法创造和风格伪元素以增强元素的外观和感觉

输入元素的CSS，我们将使用标题元素简要演示。要获得Element CSS输入，请转到定制控件对任何元素进行分组，您将在设置箱:

点击输入将显示一个从屏幕边缘滑进的代码编辑器:

正如代码编辑器的占位符文本中所指出的，该编辑器可以接收特殊的el美元选择器，它将进入我们的动态CSS系统，并在保存时将其动态类交换出来。这些动态类是在每个元素呈现在屏幕上时程序化生成的，这意味着如果这个标题元素是放置在页面上的第12个元素，那么它生成的类将是.el12，然后用来确定目标和样式。

正是由于这种过程类生成，您以前不能使用它生成的类来瞄准一个元素，因为这个类会在您向页面添加或删除其他元素时进行更新(您总是可以使用它向任何元素和样式添加一个自定义类，但element CSS系统允许您在系统中引入自定义样式，而不需要设置任何类型的外部样式表或全局CSS)。

让我们看看它的实际应用。在下面的截图中，使用的一些样式可以使用Element控件添加，例如这个特性而且不必但我们把他们放在这里是为了看现场的一切。此外，标题元素没有直接添加背景图像的控件，所以如果你想这样做，你需要自定义CSS(背景图像当然可以添加到Sections, Columns，等等，这是通常可能在构建器中，但这个例子向你展示了如何直接添加到元素):

注意我们用的是el.x-text美元以标题元素为目标，这有时是必要的，以确保适当的专一性，以便您的定制生效。接下来，我们将展示如何使用Element CSS系统将一个伪元素引入到标题中，以嵌套标记为目标:

在这里，我们为标题元素内嵌套的大量标记添加了一个带有unicode内容的伪元素。再一次，像伪元素或交互样式(例如。:徘徊，:主动等等)将无法通过仅在父元素上的内联CSS实现样式化。

希望当与模板管理器配合使用时，该系统的强大功能变得更加明显。您可以做的一件事是在父Section上添加Element CSS，并瞄准其中的任何内容(行、列和元素)，并将其样式化，使其成为一个完全独立的、完全可交付的内容块，可以跨任何项目工作。

例如，如果您想创建一个自定义的内容组合，并让列在特殊的断点处中断，然后以一种独特的方式设置内容，您可以将所有元素添加到该Section，并使用Section上的Element CSS对所有内容进行样式化，以保持内容完全自包含，而不需要外部全局样式。这意味着整个内容块可以立即从一个项目移动到另一个项目，不需要设置。

总结

您刚刚学习了如何使用元素CSS特性来代替使用内联CSS。