所有内置站点组件都具有相似的 CSS 类结构。
每个组件的最外层 <div> 元素都应用以下三个 CSS 类：
scs-component scs-type design-style
type 是组件类型（例如 image、gallery 或 divider）。design-style 是为组件选择的样式类，这在主题的文件中定义。
主题样式基本信息
主题的 design.json 文件列出可以应用于每种类型的组件（例如 button 或 image）的所有样式（frame、shadow、highlighted 等）。每个样式都有显示名称和类名称。显示名称显示在设置面板的样式选项卡上。类名称是指主题的 design.css 文件中的 CSS 选择器。例如，button 组件对应的条目如下：
"scs-button": {
"styles": [{
"name": "COMP_STYLE_ALTA_SMALL",
"class": "scs-button-default-style"
},
{
"name": "COMP_STYLE_ALTA_LARGE",
"class": "scs-button-style-2"
},
{
"name": "COMP_STYLE_SIMPLE",
"class": "scs-button-style-3"
}
]
},
内置组件的名称已翻译，因此，您会看到一个用于从资源包获取样式名称的键。如果向页添加 button 组件，然后在设置 > 样式面板中选择简单样式，则 design.json 文件会将显示名称简单（键 COMP_STYLE_SIMPLE）与类名称 scs-button-style-3 关联。将使用以下类呈现 button：
scs-component scs-button scs-button-style-3
如果没有为给定组件选择样式，则将使用默认样式 scs-type-default-style。在上述示例中，将使用以下类呈现按钮：
scs-component scs-button scs-button-default-style
scs-component-content 样式
对于每个内置组件，在前面提到的 scs-component <div> 中，都有包含 CSS 类 scs-component-content 的 content <div>。换而言之：
scs-component scs-type design-style scs-component-content
在 design.css 文件中，通常使用 scs-component-content 类为组件周围的“框”设置样式（例如，应用边框或阴影）。
值得注意的是，在内置 comp.css 文件中，定义常见的 scs-component-content 类时使用了 position:relative 和 display:inline-block 以及其他 CSS 属性。
虽然 scs-component-content 可用于为每个组件周围的“框”设置样式，但要为组件完整设置样式，需要特定于组件的类。请参见特定于组件的样式设置。