CSS 在FXML中如何添加CSS样式表

在本文中，我们将介绍如何在FXML中添加CSS样式表，以实现页面的美化和样式的统一。

阅读更多：CSS 教程

了解FXML和CSS样式表

在开始之前，我们先来了解一下FXML和CSS样式表。FXML是一种用于定义JavaFX用户界面的XML格式文件。它允许我们以分离的方式创建用户界面，将界面的结构和逻辑分开，使得代码的组织更加清晰。而CSS样式表用于定义用户界面的外观，包括颜色、字体、布局等。通过在FXML中引入CSS样式表，我们可以轻松地为界面添加样式，使其更加漂亮和易于定制化。

在FXML中添加CSS样式表

要在FXML中添加CSS样式表，我们需要遵循以下几个步骤：

1. 创建CSS样式表文件

首先，我们需要创建一个CSS样式表文件，可以将其命名为style.css。这个文件可以放在与FXML文件相同的目录下，或者放在任意你希望的位置。在style.css文件中，我们可以定义各种样式规则，比如设置界面的背景色、字体、按钮的样式等。

2. 在FXML文件中引入CSS样式表

接下来，在FXML文件中引入CSS样式表。我们可以通过在FXML的根节点上添加stylesheets属性并指定CSS文件的路径来实现这一目的。例如，如果我们的style.css文件与FXML文件位于同一目录下，那么可以在FXML的根节点中添加如下属性：

<StackPane stylesheets="@style.css">
  <!-- 界面的其他元素和布局 -->
</StackPane>

这样，FXML文件就会与style.css关联起来，其中的元素将应用CSS样式表中定义的样式规则。

3. 在FXML中应用CSS样式

现在，我们可以在FXML文件中应用CSS样式了。通过在需要应用样式的元素上添加styleClass属性，并指定在CSS样式表中定义的样式类名称，即可将样式应用于该元素。比如，如果需要将一个按钮的样式定义为button-class，可以在FXML文件的按钮元素上添加如下属性：

<Button styleClass="button-class" text="点击我" />

这样，按钮元素就会应用button-class在style.css中定义的样式规则。

示例说明

为了更好地理解如何在FXML中添加CSS样式表，我们举一个简单的例子。假设我们有一个FXML文件，其中包含一个按钮和一个标签，我们希望将按钮的背景色设置为蓝色，标签的字体颜色设置为红色。我们可以按照以下步骤实现：

创建一个名为style.css的CSS样式表文件，其中包含以下内容：

.button-class {
 -fx-background-color: blue;
}

.label-class {
 -fx-text-fill: red;
}

在FXML文件的根节点中添加stylesheets属性，指定style.css文件的路径：

<StackPane stylesheets="@style.css">
 <!-- 界面的其他元素和布局 -->
</StackPane>

在FXML文件中的按钮元素上添加styleClass属性，指定样式类名称为button-class：
```
<Button styleClass="button-class" text="点击我" />
```
在FXML文件中的标签元素上添加styleClass属性，指定样式类名称为label-class：
```
<Label styleClass="label-class" text="这是一个标签" />
```