传统上，主题作者会根据样式表对所有内容进行样式化，但有时他们仍然必须这样做。在现代WordPress中，您还可以直接从您的主题.json文件。
当您使用此标准系统时，它也反映在外观>编辑器>样式接口。这意味着可以访问该管理屏幕的主题用户也可以进行更改，以便与主题的样式一起轻松工作。但这也意味着，如果你选择这样做，你可以直接从这个视觉界面设计你的主题。
主题.json支持三个不同级别的样式：
在本文档中，您将学习通过JSON对这些东西进行样式设置所需的语法。
当提到WordPress主题中的“root”元素时，我们特别指的是HTML<body>标签。它是页面视觉输出的根。
从技术上讲，在设计根元素的样式时，您要添加全球的在设计中逐渐形成的样式，除非被更具体的元素或块样式覆盖，否则将使用这些样式。例如，您可能希望设置整个设计中使用的默认font-family或font-size。当然，你会想在特定情况下改变这一点。
因为这些是全局样式，这意味着它们直接属于样式属性。
因此，让我们添加一个默认文本和背景色，以显示其工作原理：
{“版本”：2，“样式”：{“颜色”：{“text”：“#000000”，“背景”：“#f5f1ea”}}}
正如你所见颜色属性直接嵌套在样式属性。这意味着文本和背景颜色直接应用于<body>元素，在编辑器和前端生成此CSS：
车身{背景：#f5f1ea；颜色：#000000；}
而且因为级联在CSS中工作，这些颜色将用于所有内容，除非有更具体的样式规则覆盖它。
如果您在前端或通过外观>编辑器在WordPress管理员中，您应该会看到您应用的颜色：
你不仅限于颜色。您可以添加印刷术,间距，以及更多信息。根元素几乎支持所有可用的样式属性，您可以在支持的样式文件。
这个样式.间距.填充与一起使用时，属性具有唯一的用例设置。使用RootPaddingAwareAlignments。有关这两者如何协同工作的更多信息，请阅读使用根部填充感知对齐文件。
WordPress有一个标准的样式元素系统，通过主题.json在这种情况下，“元素”通常映射到实际的HTML元素。但在某些情况下，它所指的内容并不直接映射到单个HTML元素。一般来说，这些应该相当简单。
就像您将在下面学习的设置根元素和块的样式一样，您可以应用广泛的支持的样式到元素。
当前支持的元素有：
按钮:应用于<按钮>元素和类似按钮的链接，例如用于button块的链接。标题:应用于媒体标题，这些标题包装在<图片标题>元素。引用:应用于<引用>元素用于引用，例如用于Quote和Pullquote块的元素。标题:应用于中的所有标题元素<h1>通过<h6>，但可以为单个标题覆盖这些内容。h1-h6:每个<h1>通过<h6>元素可以单独设置样式。链接:应用于<a>标记，用于创建链接。
现在让我们尝试一个真实的例子。假设您想为站点上的所有按钮提供一个位于红色背景之上的白色文本颜色。你需要瞄准文本和背景的属性样式.elements.button.color.
将此代码添加到您的主题.json文件：
{“版本”：2，“样式”：{“元素”：{“按钮”：{“颜色”：{“text”：“#ffffff”，“背景”：“#aa3f33”}}}}}
如果您在网站编辑器或网站前端查看按钮，您应该会看到应用了以下颜色：
一些元素既可以作为元素样式，也可以作为更特定块的基础。如果图元也连接到块中，则块样式将取代图元样式。例如，按钮和标题块可以有自己的样式，但它们将回到按钮和标题元素样式。
WordPress将在编辑器和前端为您的按钮元素样式：
.wp-element按钮，.wp-块-按钮__link{背景色：#aa3f33；颜色：#ffffff；}
WordPress有时给元素一个特定的CSS类，命名方案为.wp-element-{$element}。例如，按钮元素具有.wp-element按钮类。您通过提供的样式主题.json然后应用于该CSS类。
正如您在生成的CSS中看到的那样，WordPress将目标对准.wp-element按钮设置样式时的类按钮元素。但它也特别针对.wp-块-按钮__link类与Button块向后兼容。
您还可以为一些元素的标准CSS伪类集添加样式属性。一般来说，这将用于链接悬停和焦点样式等功能。
这个按钮和链接元素支持这些伪类：
每个伪类都必须作为嵌套在要设置样式的元素下的属性添加。例如，您必须以样式。元素。链接。：悬停自定义链接悬停样式。
让我们使用前面的样式示例在上下文中查看这一点按钮元素。假设您想在用户的鼠标悬停在按钮上时更改背景色。使用这个主题.json实现此目标的代码：
{“版本”：2，“样式”：{“元素”：{“按钮”：{“颜色”：{“text”：“#ffffff”，“背景”：“#aa3f33”},“：悬停”：{“颜色”：{“background”（背景）：“#822f27”}}}}}}
块系统的一大优点是它为任何块的样式设计提供了一个标准化系统。这意味着您可以直接在中为核心WordPress块和第三方插件块添加样式主题.json.
要设置特定块的样式，必须将样式.blocks.blockname在您的主题.json文件。从那里，您可以添加任何块支持的样式.
让我们看一个基本示例。假设您希望为所有图像块提供略圆的边框。为此，您需要将边界半径属性。
将此代码添加到您的主题.json文件：
{“版本”：2，“样式”：{“区块”：{“核心/图像”：{“边界”：{“半径”：“6px”}}}}}
这应该会使站点上图像块的任何实例都显示为圆形边框：
WordPress还将为嵌套的<图像>编辑器和前端的Image块中的元素：
.wp-块-图像img{边距：6px；}
可以为任意数量的块添加样式。这完全取决于你和你想用你的设计完成什么。玩得开心！
有关可以设置样式的核心WordPress块的完整列表，请访问核心块参考请注意，这不包括来自插件和其他第三方来源的块。
当以块的样式为目标时，必须知道其名称空间和slug。在上面，您了解到Image块具有名称空间(核心)和段塞(形象)，创建名称空间/slug组合核心/图像。所有核心WordPress块都有核心命名空间，您可以在其块.json文件。
还可以为嵌套在块中的元素添加自定义样式。此功能为您提供了很大的灵活性，可以直接在主题.json.
设置块嵌套元素的样式时，必须传递元素块特性下的对象：样式.blocks.blockname.elements.
假设您想为PullQuote块使用大字体，但想为其嵌套创建一个流体大小<引用>从未超过的元素50%父块的1.5雷姆，以两者中较大者为准。
为此，您需要定义字体.fontSize对于这两个核心/引言块及其嵌套引用中的元素主题.json:
{“版本”：2，“样式”：{“元素”：{“核心/引言”：{“排版”：{“fontSize”：“2.25rem”},“元素”：{“引用”：{“排版”：{“fontSize”：“最大值（50%，1.5rem）”}}}}}}}
字体大小现在在编辑器中如下所示：
WordPress生成此CSS以设置Pullquote块及其嵌套的样式<引用>元素：
.wp-块-引号{字体大小：2.25rem；}.wp-block-pullquote引用{字体大小：最大值（50%，1.5rem）；}
自WordPress 6.2以来，您可以通过以下方式自定义核心块样式变体（即块样式）主题.json。此功能允许您使用支持的样式无需在单独的样式表中编写自定义CSS。
要自定义块样式变体，必须添加嵌套变化要在其中设置样式的块中的属性主题.json然后，每个变体都可以使用块支持的任何样式。
让我们来看看修改Button块的Outline样式变体的示例。假设您想定义特定于此块样式变体的边框颜色、样式和宽度。
将此代码添加到您的主题.json:
{“版本”：2，“样式”：{“区块”：{“核心/按钮”：{“变体”：{“大纲”：{“边界”：{“color”：“currentColor”，“style”：“solid”，“宽度”：“2px”}}}}}}}
现在，当为Button块选择Outline块样式变体时，您应该可以在编辑器中看到这些更改：
当前可用的块及其核心WordPress样式变体包括：
芯/按钮: 概述,填满核心/图像: 圆形的核心/报价: 平原堆芯/现场损失: 圆形的堆芯/分离器: 宽的,点核心/社交链接: 仅标识,柱状的核心/表格: 条纹核心/标签云: 概述
要深入了解自定义块样式变体，请查看通过theme.json定制核心块样式变化在WordPress开发者博客上。
自定义中当前不支持块样式变体主题.json。有一个该功能的开放门票。目前，您仅限于核心块样式变体。
