简介
使用全局样式美化你的网站。学习目标：更改全局样式以体现你的品牌特色。修改排版、颜色和布局，使用字体库功能，应用调色板更改强调色，更改区块的全局样式（例如引用区块示例）。事先需要考虑的几个资源是字体配对。一个好的设计原则是：为标题选择一种字体风格，为正文选择另一种字体风格。这里有一篇来自 Google Fonts 的文章。另一个资源是字体配对网站 FONTPAIR。在他们的配对选项卡中，他们配对了搭配良好的字体。调色板是设计前需要考虑的另一件事。这里有两个免费资源：Coolors 提供流行调色板，会给出十六进制颜色代码，最好记下来以便使用这些颜色。Canva 也提供免费的调色板。
全局样式
现在我们将进入仪表盘。查看左侧的网站工具栏，向下找到“外观”，然后进入“编辑器”并点击它。我们将进入“设计”下的“样式”选项。点击它。在样式菜单中，你会看到一个图标，即样式手册，我们将在后面的课程中讨论它。还有一个铅笔图标，悬停时显示“编辑样式”。我们点击它。现在我们将查看“浏览样式”。
浏览样式
我打开了右侧菜单，右上角有一个半月形图标。悬停时显示“样式”。我向下找到“浏览样式”。Twenty Twenty-Four 主题自带八种变体。这些变体包含不同的颜色和字体组合。当我点击其中一个变体时，可以立即看到不同区块在网站上的显示效果。我将保留默认主题。然后我们可能会更改一些颜色，以更好地匹配我的调色板。之后返回样式部分。
排版
此部分管理字体系列、大小和外观的设置，范围从文本到链接再到按钮。一个好的设计规则是，像我之前说的，为标题使用一个字体系列，为正文使用另一个兼容的字体。一个新功能是我们的预设，它允许我们查看不同的字体组合。即使我使用的是默认主题，我仍然可以按自己的喜好更改字体。主题自带的字体列在这里。你可以看到我有不同的组合变体。这意味着我有这个字体的两种变体和那个字体的两种变体。
字体库
一个新功能是管理你的字体。如果你悬停在这个图标上，我会打开字体库。主题字体已列出。如我所说，我还可以选择上传或安装字体。我们先看看安装字体，我们将连接到 Google Fonts。我们需要允许访问 Google 字体，这样我们可以浏览，截至录制时有 390 页，所以有很多选择。我事先做了一些研究。我知道我喜欢这一种特定的字体，Open Sans。我点击它。现在 Open Sans 将用于我的正文。所以我不需要其他选项。我提前计划好，至少需要一个常规粗细，而且我喜欢比 300 常规稍粗一点的。所以我选择 400，我还希望某些词能加粗，所以我选择 700。我还选择一个斜体，同样是 400，以及一个加粗斜体，这样我就有了四个变体。我点击底部的“安装”按钮。如果向上滚动，会看到安装成功。当我回到库选项卡时，看到安装的字体已存在，并且四个变体已激活。另一种方式是上传。我点击“上传”。请记住，上传的字体要能使用，需要支持 TTF、OTF、WOFF 或 WOFF2 格式。中间是“上传字体”字样，我点击它。我已经有一个包含我喜欢字体的文件夹，我打开那个字体。同样，我不需要所有变体。但这将用于我的标题。所以我肯定需要一个常规，不需要任何细体。我肯定想要一个粗体，因为我的标题需要加粗。我觉得就选这些，因为我不需要斜体标题之类的。所以，我再次提前计划，这对这些步骤很有帮助。字体上传成功，我回到库，看到那个字体现在可用。我可以关闭这个窗口。如果我查看右侧菜单，会看到这两个选项也已可用。
元素
下面的另一个部分是元素。我可以进入并在全局级别更改所有文本。现在我已经添加了这两个新字体，我进入“文本”。我想将其更改为 Open Sans。好的。然后我想保持常规粗细。好的。这样就可以了，我们点击“保存”。
标题
它会保存这些设置，然后我会点返回，进入我的标题设置。现在标题有了不同的样式，我可以为所有标题设置相同的字体族，好的。但请记住，每个页面只有一个 H1，然后我们需要进行结构化的格式设置，接下来应该是 H2，然后依次是 H3 等等。所以你会看到字体有不同的大小。我可能想逐一为每种字体设置样式，仔细检查一下大小，默认的大小可能不是我所期望的。如果我希望 H3 的字体稍微大一点，我可以在这里调整。我们来看看这个。我想把字体族改成 Bellota，并且加粗，好的。我打算把它设置得比“特大”再大一点，因为这个字体族在较小尺寸的网站上显示。我点击这里，我们使用 rem 单位。Rem 的好处是，当页面切换到移动端时，尺寸适配会更好一些。我们设置成 4.5。你可以在顶部的这个小窗口中看到变化。我这边没看到变化，可能是个小 bug。所以我点击它，保存，再保存一次。然后我可以去设置，就像我说的，H2 保持原样就可以了。我们可以去设置“全部”？我需要确认一下，嗯，不，算了，我们看看，你总是可以在过程中修改设计，对吧？H2，我打算保留 Bellota 字体。然后像那边一样，我这么说，让我返回。因为我不希望所有字体都……我突然意识到，我不希望 H3 使用那种更花哨的字体。所以 H3，我们打算就用 Open Sans。但我确实想让它稍微大一点。好的，我来操作一下。我们看看前端的效果。我们已经把 H3 改成了加粗，这个设置生效了。所以这些地方都可以调整。现在，我点返回，退出排版设置。
颜色
下一个部分是颜色。我们的颜色部分负责微调我们之前选择的调色板。记住，我选择了默认调色板，默认调色板有 10 种颜色。如果我进行到了这一步，想换成其他调色板，或者至少看看效果，我可以在上面找到入口。如果我点击调色板的 10 种颜色，我们可以看到调色板、纯色和渐变。我现在主要关注纯色。就像我说的，有一种橙色我可能不会用到，但我确实想把它换掉。我可以进入主题，点击这里的三个点，然后选择“显示详情”。好的。在我更改颜色后，会显示特写视图。重置颜色会出现在那里，但在我目前的位置，只显示“显示详情”。所以我点击“显示详情”。很方便的是，它会显示不同颜色的名称。我想重点关注强调色 3。如果我点击它，就可以更改颜色。我打算把它改成更亮的红色，一种深红色。好的，我觉得这个颜色不错，已经改好了。然后我必须确保点击“完成”，再点击“保存”。好的，在设置颜色时，最好检查一下你更改的内容。所以不要只是不停地看。好了，我也可以在这里添加自定义颜色，如果我想增加更多颜色的话。现在，我们从调色板返回，回到颜色菜单。
字体颜色
下面的部分是颜色设置。好的，我们有……我们可以选择基本文本、背景、标题，也可以设置 H1 等等。好的。我们接下来要设置的是按钮。我想把按钮颜色改一下，让它成为一个通用颜色。如果我点击按钮颜色，我可以选择文本颜色、背景颜色和渐变。我们先看看文本颜色。目前是白色，我知道我们打算保持这个设置。然后我们看看背景颜色，我们打算把它改成红色。好的，这样就可以了。然后我们确保点击上面的“保存”，这会改变按钮的全局样式和颜色设置。这样，以后我添加按钮时，就会使用这两种颜色。我们返回。
布局
下一个部分是布局。好的，我们往下找到布局。布局部分用于设置主要内容区域的样式，并定义内容宽度（以像素为单位）。好的，这指的是从左侧到右侧的整个区域。这些是默认设置。你可以看到已经有一些内边距了。如果你看看这里的标题，我移动一下，你可以看到它是如何变化的。好的，我们还有一个块间距，默认也已经设置好了。我点返回，退出布局设置。
块
区块是我们的下一个部分。我们将向下滚动到这里找到区块，这个菜单会打开主题中所有的区块。我们可以进入并自定义特定区块的外观，以及整个站点的样式。这意味着，如果你希望所有标题区块都有某种背景颜色，你可以做到。不过，不要过于深入地去单独调整每个区块，因为记住，我们之前已经在全局样式中做了修改。如果你开始改动每一个小区块，那么当你需要修改某些内容时，就会变得非常混乱，因为你不知道在哪里改过。所以，最好从全局样式开始。然后，如果有一个特定的区块你确实想调整，你可以这样做。我就以引用区块为例，因为它是一种特殊区块，你可能想用不同的字体。让我们向下滚动到我的示例。这里有一个引用区块。我添加了一个组，引用区块里面有一个段落，还有一个用于引用的区域，也就是作者的名字。如果我想改变这个区块的字体，我可以进入排版，然后找到字体。记住，我整体用的是Open Sans字体。我可以选择常规字体，也可以选择斜体之类的。我还可以调整它的大小，比如让它变小或变大，然后点击保存。这就是一个示例。
总结
我刚刚简单介绍了如何使用全局样式来设计你的网站。去你的网站上探索一下，并查看更多课程吧。