教程：将自定义 CSS 添加到您的站点

“样式”工作区允许您编辑站点的一些主题功能，例如字体和颜色；但是，您可以应用您自己的自定义 CSS 主题。

您可以通过定义自定义 CSS 文件并将其上传到您的站点来创建自己的主题。

在本教程中，将了解如何：

• 上传自定义 CSS 文件
• 在 Visual Studio Code 中编辑 Web 的 CSS

先决条件

• Power Pages 订阅或试用。 在此获取免费的 Power Pages 试用版。
• 已创建 Power Pages 站点。 创建 Power Pages 站点。
• 使用您最喜欢的 CSS 编辑器创建的自定义主题文件。

备注

您创建的任何自定义主题都必须与 Bootstrap v3 兼容。

将自定义 CSS 添加到您的站点

以下视频向您介绍如何将自定义 CSS 代码应用于您的站点。

在此示例中，我们将添加一些自定义 CSS 文件，这些文件将允许我们为网站上的按钮添加阴影效果。 您可以使用自己的自定义 CSS 文件或使用所提供的示例。

1. 若要创建示例，请在您喜欢的 CSS 编辑器中，创建 button_shadow.css 自定义主题文件并保存。

   .button1 {
   box-shadow: 0 9px 18px 0 #333333, 0 8px 24px 0 #333333;
    }
   

2. 转到 Power Pages。

3. 选择要向其中添加自定义主题的站点，然后选择编辑。

4. 打开样式工作区。

5. 依次选择主题、...（省略号），然后选择管理 CSS。

   

6. 在自定义 CSS部分，选择上传并选择自定义的 CSS 文件。 您一次只能上传一个 CSS 文件，但可以上传多个文件。 如果多个 CSS 文件更新同一属性，则列表底部的 CSS 文件中的属性将适用。 您可以调整自定义 CSS 文件的顺序。

7. 您应该会立即在页面区域上看到更新的结果。

   

8. 您可以禁用或移动自定义 CSS 文件的顺序。 最后列出的文件将优先于其他文件。

   

9. 您可以通过选择省略号 (...) 然后选择编辑代码来直接编辑 CSS 文件。 此步骤将打开 Web 版 Visual Code 编辑器。 选择 CTRL-S 以保存您所做的更改。

   

10. 在设计工作室中选择同步以更新 CSS 并查看更改。

11. 选择预览以查看您站点上自定义的主题。

备注

要完全删除自定义主题，请在“门户管理”应用中删除 Web 文件记录。