欢迎来到关于 WordPress 主题样式的课程。
通过本课程，你将能够：
- 探索样式层级结构，
- 使用站点编辑器修改主题样式并导出更改，
- 理解 WordPress 如何利用 JSON 语法在浏览器中生成 CSS，以及
- 通过 settings 属性配置预设，并在 theme.json 的 styles 属性中应用它们。
WordPress 样式层级结构
在最底层，我们有根元素，例如正文文本。下一层是单个元素，例如标题，比如 H1 标签。最后在顶层，我们有区块，例如按钮区块。因此，任何应用于区块级别的样式都将优先于主题中的所有其他样式。
修改主题样式
让我们使用站点编辑器修改主题样式并导出更改。Create Block Theme 插件对于任何主题开发者来说都是一个宝贵的工具。请务必查看初学者学习路径中为开发者准备的入门课程。
我发现使用 Create Block Theme 插件的最佳功能之一是能够将更改直接保存到主题文件中。如果我现在在全局样式中进行更改，例如向自定义调色板添加一种新颜色，我可以搜索一种颜色，或者输入十六进制代码，然后为颜色命名。我将这种颜色命名为紫色，然后点击完成。如果我点击保存，此更改将保存到数据库中。我们会看到 Create Block Theme 插件侧边栏和保存更改选项。这会将更改从数据库中移除，并将其推送到主题文件中。
现在让我们打开 theme.json 文件，以便搜索新的紫色颜色。你可以在 settings 中看到它，作为可供最终用户使用的新颜色。
WordPress 如何利用 JSON 语法在浏览器中生成 CSS
我们将查看默认的 Twenty Twenty-Four 主题。这是一个区块主题，如果我们检查代码并查看，例如 H1 标签，我们在左侧检查它，在右侧会看到生成的 CSS。
WordPress 获取 settings、color、contrast，然后将其应用于这里的 H1 标题。我们现在来看看这在 theme.json 中是如何完成的。在这里你可以看到在 settings 中我们如何拥有 palette 和 contrast 颜色。然后如果我们向下滚动到 styles 属性，我们会看到 contrast 颜色如何应用于文本。
如何在 theme.json 中编写预设
现在让我们通过另一个示例使用 theme.json 配置预设。这里我们有一个入门主题，我们想通过添加调色板来自定义它。进入 settings，将 WordPress 的默认调色板设置为 false，然后添加属性 palette 并开始添加我们的颜色。请注意，这里我们使用通用的命名约定，而不是为颜色命名。
例如，这是一种深绿色，我们没有使用 green 作为名称和别名，而是使用 contrast。这使得将来进行颜色更改更加容易，然后我们在底部的 styles 下看到它被应用。
现在，让我们仔细看看 Twenty Twenty-Four 主题中的一个示例。我们有包含 color、name 和 slug 的 settings 属性。然后为了应用样式，我们将使用这里的格式，其中 feature 是 color，而 slug 例如是 accent-3。
WordPress 通过创建类 has-slug-feature 来生成 CSS。我们可以通过将颜色应用于这里的文本来查看实际效果，然后如果我们检查该段落，我们会看到 WordPress 如何获取预设并创建类 has-accent-3-color。
下一步
像往常一样，你可以参考 WordPress.org 上提供的主题手册，也可以查看样式参考指南，以找到所有可以添加到 theme.json 文件中的可用样式属性。