将 CSS 添加到 JavaFX FXML

JavaFX 是一个用于创建丰富的图形用户界面 (GUI) 的框架。JavaFX FXML 是一种使用 XML 明确描述用户界面和其相应的控制在 JavaFX 应用程序中的视图语言。在 JavaFX FXML 中，可以通过添加 CSS 文件来使应用程序的外观更加漂亮。

步骤

第一步：创建 CSS 文件

创建一个名为 styles.css 的新文件，该文件将保存您的 CSS 样式。将 CSS 样式添加到此文件，并确保它们是按照您的要求排序的。

第二步：将 CSS 文件链接到 FXML 文件

在 FXML 文件的顶部添加以下代码来将 styles.css 文件链接到 FXML 文件中：

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Button?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<BorderPane xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.MyController" fx:stylesheets="/path/to/styles.css">
<!-- Your FXML code goes here -->
</BorderPane>

在上面的示例中，fx:stylesheets="/path/to/styles.css" 将 styles.css 文件链接到 FXML 文件中。

第三步：应用样式

在您的 FXML 文件中的任何元素上添加 styleClass 属性，并在 CSS 文件中声明相应的样式以应用样式。

例如，在 FXML 文件中添加以下代码：

<Label text="Hello World!" styleClass="my-label" />

在 CSS 文件中添加以下代码：

.my-label {
    -fx-font-size: 20pt;
    -fx-text-fill: #66CCFF;
}

这将使标签的字体大小为 20pt，文本颜色为 #66CCFF。

第四步：运行 JavaFX 应用程序

以 JavaFX 应用程序的形式运行您的 FXML 文件，您将看到应用程序以您定义的样式呈现。

结论

您已经学习了如何将 CSS 样式添加到 JavaFX FXML 文件中。添加样式将使您的应用程序在视觉上更加吸引人，更符合您的设计需求。