自定义样式

自定义样式是列在 Sitecake 工具栏下拉菜单中的普通 CSS 样式，供编辑者挑选并应用。它们让客户无需触碰代码就能 获得经过精心设计的排版选择。

设计师在搭建网站时，会为文字、图片、列表以及其他一切 定义一套统一的视觉样式。有时，设计一些可供网站编辑者 （客户）在需要时应用的替代样式会很有用。我们称之为 自定义样式。

要创建自定义样式，需要在外部样式表中定义特定的 CSS 规则 — 可以是通过 <link> 引用 的 .css 文件，也可以是用 <style> 定义的行内样式。

示例

给定如下基本 HTML 结构：

<div class="sc-content sidebar">
  ...
</div>

<div id="main-column" class="sc-content main">
  ...
</div>

以下都是有效的自定义样式：

示例 1

.sidebar p.red { background-color: red; }
.sidebar p.blue { background-color: blue; }

在侧边栏容器中定义了 p 标签的两个变体（蓝色和红色）。

示例 2

.sidebar ul.red-dot {
  padding: 5px;
}

.sidebar ul.red-dot li {
  background: url(../images/red-dot.png);
}

.sidebar ul.blue-dot li {
  background: url(../images/blue-dot.png);
}

为侧边栏中的 ul 标签定义了两种样式（red-dot 和 blue-dot）。

示例 3

.sidebar p.red, .main p.red {
  ...
}

为 sidebar 和 main 两个容器中的段落都定义了一个 red 自定义样式。

示例 4

#main-column > div.sc-html.outlined {
  outline: solid 1px red;
}

为 main 容器中的自定义 HTML 项定义了 outlined 样式。

哪些情况不生效

声明中不包含父容器的样式：

p.red { color: red; }

如果不包含父容器，Sitecake 就无法确定该为哪个容器提供这个样式。