java fxml与css如何协同工作

JavaFX 中的 FXML 和 CSS 是两种不同的技术，它们可以协同工作以创建美观且功能丰富的用户界面。FXML 主要用于定义界面的结构和布局，而 CSS 用于定义界面的样式和外观。

以下是如何在 JavaFX 项目中使用 FXML 和 CSS 的简要指南：

1. 创建 FXML 文件：首先，你需要创建一个 FXML 文件来定义你的界面布局。FXML 文件是一种基于 XML 的语言，用于描述 JavaFX 场景图的结构。你可以使用任何文本编辑器创建 FXML 文件，但建议使用支持 FXML 的集成开发环境（IDE），如 IntelliJ IDEA 或 Eclipse。

2. 编写 FXML 代码：在 FXML 文件中，你可以定义各种 JavaFX 控件（如按钮、标签、文本框等）并设置它们的属性。例如：

   <Button text="Click me!" layoutX="100" layoutY="100" /> </AnchorPane> 

3. 创建 CSS 文件：接下来，创建一个 CSS 文件来定义界面的样式。CSS 文件可以包含颜色、字体、边距等样式信息。例如，创建一个名为 styles.css 的文件，并添加以下内容：

.button {     -fx-background-color: #4CAF50;     -fx-text-fill: white; } 

4. 将 CSS 文件应用到 FXML 文件：要将 CSS 文件应用到 FXML 文件，你需要在 FXML 文件的根元素中添加一个 stylesheets 属性。例如：

   <Button text="Click me!" layoutX="100" layoutY="100" /> </AnchorPane> 

请注意，stylesheets 属性的值应该是 CSS 文件的相对路径。

5. 在 Java 代码中加载 FXML 文件：最后，在你的 Java 代码中，你需要使用 FXMLLoader 类加载 FXML 文件并创建相应的 JavaFX 场景图。例如：

import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Parent; import javafx.scene.Scene; import javafx.stage.Stage;  public class Main extends Application {     @Override     public void start(Stage primaryStage) throws Exception {         Parent root = FXMLLoader.load(getClass().getResource("/path/to/your_fxml_file.fxml"));         primaryStage.setTitle("JavaFX with FXML and CSS");         primaryStage.setScene(new Scene(root, 300, 275));         primaryStage.show();     }      public static void main(String[] args) {         launch(args);     } } 

现在，当你运行你的 JavaFX 应用程序时，它将加载 FXML 文件并应用 CSS 样式，从而创建一个具有所需布局和外观的用户界面。