Style.css
The style.css file is the file you can use to customize your game fonts, your stat bars (i.e. the colors of them) and some other aesthetic things, like the color of the "Next" button. style.css 文件可用于自定义游戏字体、状态条（例如其颜色）以及其他一些美观元素，例如“下一步”按钮的颜色。
This file uses CSS, a styling script that determines how elements are displayed on the screen. This articles covers the basics, but the customization has no limits. If you want to learn more about CSS, W3schools has excellent tutorials. 该文件使用 CSS（一种样式脚本）来确定元素在屏幕上的显示方式。本文涵盖基础知识，但自定义功能没有限制。如果您想了解更多关于 CSS 的信息，W3schools 提供了优秀的教程。
Firstly of all, open the style.css file in your game files (..\web\style.css) preferably with a program like Notepad++ (that has syntax highlighting), and follow the instructions below to change various aspects of your game's display. 首先，在游戏文件中打开 style.css 文件（..\web\style.css），建议使用 Notepad++（具有语法高亮功能）等程序，然后按照以下说明更改游戏显示的各种方面。
Font and font size 字体与字号
Changing your game's font is done easily. In the first block of code named "body", look for this line of code: 更改游戏字体操作简便。在首个名为“body”的代码块中，定位此行代码：
font-family: Georgia,"Times New Roman",serif;Georgia is the font the game uses by default. This is what you want to change. You could rename it to "Helvetica", "Garamond", "Arial"... just write the font's name with the first letter capitalized. Georgia是游戏默认使用的字体。这正是您需要修改的部分。您可以将其重命名为“Helvetica”、“Garamond”、“Arial”……只需以首字母大写的形式写入字体名称即可。
Note that the font you choose should be a common one, found on most computers, otherwise, it will default to the second font in the list, "Times New Roman". This is why you should leave ""Times New Roman", serif" alone and only change "Georgia", just in case. 请注意，所选字体应为大多数计算机上常见的字体，否则将默认使用列表中的第二种字体"Times New Roman"。这就是为什么您应保留"Times New Roman", serif"不变，仅更改"Georgia"，以防万一。
To change the size of the text in your game, find the line: 要更改游戏中的文本大小，请找到以下代码行：
font-size:100%;You can increase the font size by changing it to "150%" for example, or decrease it by changing it to "80%". 你可以通过将字体大小更改为“150%”来增大字体，或者通过更改为“80%”来减小字体。
Background color 背景颜色
To change the background color of your game, look for this line in the first "body" block: 要更改游戏的背景颜色，请在第一个"body"块中查找此行：
background-color: #F7F4F1;There, you can see the "F7F4F1" color code. That color code is composed of 3 pairs of 2 characters, with the first pair representing red, the second green, and the third blue. The pair "FF" is the strongest (255) while the pair "00" is the weakest (0). So white would be "#FFFFFF" and black is "#000000". For more info on color codes, and finding the perfect color, go to W3schools color picker. 在那里，您可以看到"F7F4F1"颜色代码。该颜色代码由3对2个字符组成，第一对代表红色，第二对代表绿色，第三对代表蓝色。字符对"FF"表示最强（255），而字符对"00"表示最弱（0）。因此，白色是"#FFFFFF"，黑色是"#000000"。有关颜色代码的更多信息以及寻找完美颜色，请访问W3schools颜色选择器。
Tweaking the stat bars 调整状态条
Stats can be displayed in bar form, and that bar can be customized to your satisfaction. Here's how. (See the Stat Screen article for more information on stats and their display.) 属性值可以以条形图形式显示，且该条形图可根据您的需求进行自定义。具体操作如下。（关于属性值及其显示的更多信息，请参阅属性界面文章。）
We will be using the following example to illustrate the color changes: 我们将使用以下示例来说明颜色变化：
As stated above, colors are coded with HTML color codes like "#F7F4F1". For more info on color codes, and finding the perfect color, go to W3schools color picker. 如上所述，颜色采用HTML颜色代码进行编码，例如"#F7F4F1"。有关颜色代码的更多信息以及如何找到理想颜色，请访问W3schools颜色选择器。
Stat bar background color 状态条背景颜色
By default, the background color of the stat bar is gray when there is no opposing pair to a displayed stat. To change this, find the line: 默认情况下，当显示的属性值没有对应的对立属性时，属性条的背景颜色为灰色。如需更改此设置，请找到以下代码行：
If we change #949291 to #00b359, which is a green color, this is how the bar will look: 如果我们将 #949291 改为 #00b359（一种绿色），进度条将呈现如下效果：
Stat background color 状态背景颜色
To change the default red color of a stat, find the following line: 要修改属性的默认红色，请找到以下代码行：
Changing the red #ff5955 to the green #00b359 as before shows: 将红色 #ff5955 改为之前的绿色 #00b359 后显示：
Notice that this affects all the stat bars, no matter if they are displayed as percentage or opposed_pair 请注意，这会影响所有状态条，无论它们是以百分比还是对立配对形式显示。
Opposed stat background color 对立状态背景颜色
To change the default blue background color of the opposed stat in a pair, find the following line: 若要更改配对中对立状态的默认蓝色背景色，请找到以下代码行：
Again, changing the blue #6D6DFC to the green #00b359 will show: 同样，将蓝色#6D6DFC改为绿色#00b359后将显示：
Stat bar text color 状态栏文本颜色
In order to change the color of the text displayed on the stat bar, find the following line: 若要更改状态条上显示的文字颜色，请找到以下代码行：
Changing color to #000000 (black) will show: 将颜色更改为#000000（黑色）将显示：
Bar width 条宽度
Additionally, you can adjust the width of the stat bars by changing this line: 此外，您可以通过修改以下代码行来调整状态条的宽度：
It isn't recommended to lower this value, since the stat text adjusts depending on the width. Setting the width to 150px, for example, has quite a comical effect: 不建议降低此数值，因为状态文本会根据宽度自动调整。例如，将宽度设置为150像素会产生相当滑稽的效果：
But if you set the width to: 但如果你将宽度设置为：
The bars will span the width of the game itself: 进度条将横跨游戏本身的宽度：
Changing the display of choices 更改选项的显示方式
Choice options border 选项边框样式
The lines around the options can be modified by changing these lines: 选项周围的线条可以通过修改这些行来调整：
For example, if you change the border-color to green and the border-style to dashed like this: 例如，如果将边框颜色改为绿色，边框样式改为虚线，如下所示：
Options in a choice will display like this: 选项中的选择项会像这样显示：
Greyed-out options' color 灰色选项的颜色设置
You can change the display of options that are disabled and greyed out through the use of the *selectable_if or *disable_reuse commands. Look for these lines: 您可以通过使用 *selectable_if 或 *disable_reuse 命令来更改被禁用且呈灰色状态的选项的显示方式。请查找以下代码行：
And change the word "gray" to the color of your choice. Again, for more info on color codes, and finding the perfect color, go to W3schools color picker. 并将“gray”一词更改为你选择的颜色。再次提醒，有关颜色代码及寻找理想颜色的更多信息，请访问W3schools颜色选择器。
Changing this to the green #00b359 value will show: 将此更改为绿色值#00b359将显示：
You can, of course, add lines to this block to make the text italic, bold, underlined, and even change the background color of the option, such as: 当然，你也可以在此代码块中添加行来使文本变为斜体、粗体、下划线，甚至更改选项的背景颜色，例如：
Which will display: 这将显示：
Changing the display of the "Next" button 更改"下一步"按钮的显示方式
In this section we will be exploring how to change the appearance of the "Next" button. The changes made here apply to both the "Next" button created by a *page_break command and the "Next Chapter" button created by a *finish command. To learn how to change the wording of the button, please see the respective command pages. 在本节中，我们将探讨如何更改“下一页”按钮的外观。此处所做的更改适用于由 *page_break 命令创建的“下一页”按钮和由 *finish 命令创建的“下一章”按钮。要了解如何更改按钮的措辞，请参阅相应的命令页面。
Width of the "Next" button "下一步"按钮的宽度
By default, the "next" button is set to 100%, which makes it as wide as the game, as you will see highlighted in red in the following picture: 默认情况下，“下一页”按钮的宽度设置为100%，这使其与游戏界面同宽，如下图所示红色高亮部分所示：
The following line controls the button width: 以下代码行控制按钮宽度：
If we set the width to 50%, this is what the Next button will look like: 如果我们将宽度设为50%，"下一步"按钮将呈现如下样式：
Background color of the button 按钮的背景颜色
To change the color of the button itself, look for this line: 要更改按钮本身的颜色，请找到这行代码：
We can change the color code #626160 (grey) to #00b359 (green). (For more info on color codes, and finding the perfect color, go to W3schools color picker). The button will then look like this: 我们可以将颜色代码 #626160（灰色）更改为 #00b359（绿色）。（有关颜色代码以及如何找到理想颜色的更多信息，请访问 W3schools 颜色选择器）。更改后按钮将如下所示：
Font color 字体颜色
When it comes to the color of the writing, there are two things you can change: the color of the words at rest, and the color when the button is hovered over with the mouse. 至于文字的颜色，有两处可以修改：按钮静止状态下文字的颜色，以及鼠标悬停在按钮上时文字的颜色。
To change the color of the words "Next", find the following line: 要更改“Next”一词的颜色，请找到以下行：
This line shows the color of the "Next" word (NOT the button itself, but the word "Next" only!). If you do not match that with the background color, you will not encounter an error, but it's more appealing if you do so. 此行显示“下一页”文字的颜色（并非按钮本身，仅指“下一页”这个词！）。若未将其与背景颜色匹配，虽不会引发错误，但匹配后视觉效果更佳。
If we change this to the green #00b359 as before, the button will look like this: 若如先前操作将其改为绿色#00b359，按钮将呈现如下外观：
Notice that after changing the color of the words as above, the color changes back to white when you hover over the button with your mouse. This is because another color line controls the color when the button is hovered over: 请注意，按上述方式修改文字颜色后，当鼠标悬停在按钮上时，颜色会恢复为白色。这是因为另有颜色代码行控制按钮悬停状态的颜色：
If you change this color code to green (#00b359) as above, the "Next" will turn green when you hover over the button, as such: 如果你如上所述将此颜色代码改为绿色（#00b359），那么当你悬停在按钮上时，“下一步”按钮就会变成绿色，就像这样：
Font size and style 字体大小与样式
The following lines control the font size and style in the button: 以下代码行控制按钮中的字体大小和样式：
The first line (font-size;1.5em;) determines how large the font that says "Next" is. The unit "em" means the size is relative to the current font size of the element; 2em = twice the font size. This line accepts units such as pixels (px), point (pt) and percentages (%). So you can experiment by changing this to font-size:12px; or 14pt or 150% for example. 第一行（font-size;1.5em;）决定了“下一页”字体的显示大小。单位“em”表示尺寸相对于元素当前的字体大小；2em即两倍字体大小。此行接受像素（px）、点（pt）和百分比（%）等单位。因此，您可以尝试将其更改为font-size:12px;、14pt或150%等值进行实验。
The second line (font-weight:bolder;) determines how thick the characters of the word are. This can be changed to the following values: 第二行（font-weight:bolder;）决定了字符的笔画粗细。该属性可更改为以下值：
normal, which is the default normal character thickness normal，即默认的标准字符粗细
bold, which defines typically thick characters bold，通常定义为加粗字符
bolder, which defines extra thick characters 更粗，用于定义特粗字符
lighter, which defines extra thin characters 更细，用于定义特细字符
You can add a few lines here to make the "Next" text always appear italic or underlined. Here's how. 你可以在这里添加几行代码，让“下一页”文本始终以斜体或下划线形式显示。具体方法如下。
To make the button text italic, you can add the following line to the .next block: 要将按钮文本设为斜体，可以在 .next 块中添加以下行：
To make the "Next" text always underlined, you can add: 若要使“下一页”文本始终显示下划线，可以添加：
Text decoration also supports overline and line-through, which respectively create a line over the text and a line through the text. You can combine these by simply adding these to the text-decoration as such: 文本装饰还支持上划线和删除线，分别会在文本上方和中间添加线条。您可以通过将这些属性添加到 text-decoration 中来进行组合，例如：
So if you change the code the following way: 因此，如果按以下方式修改代码：
The button will end up looking like this: 按钮最终会呈现如下效果：
Additionally, if you add those lines to the .next:hover block instead like this: 此外，如果你将这几行代码添加到 .next:hover 区块中，效果如下：
The text decorations will only appear when the button is hovered over with the mouse, and the text will turn italic. 文本装饰效果仅在鼠标悬停在按钮上时才会显现，同时文本会变为斜体。
More changes 更多更改
The other code lines in this file aren't making any major changes like the ones above, so they are not covered here; although, don't mess with them if you do not know how to use CSS (Cascading Style Sheets). 该文件中的其他代码行并未像上述那样进行重大更改，因此此处不作介绍；不过，如果你不知道如何使用CSS（层叠样式表），请不要随意改动它们。
If you want to learn more about CSS, W3schools has excellent tutorials. 如果你想了解更多关于CSS的知识，W3schools提供了优秀的教程。