JavaFX-CSS

JavaFX-CSS是JavaFX中用于定义UI界面样式的语言，它以CSS 2.1为基础，并增加了一些针对JavaFX的扩展。

为什么要使用JavaFX-CSS

JavaFX-CSS提供了一种简单、强大且可读性高的方式来定制JavaFX应用程序的界面外观。通过JavaFX-CSS，我们可以通过外部样式表将UI和业务逻辑分离开来，使得我们的代码更易于维护。

JavaFX-CSS的语法

JavaFX-CSS的基本语法与CSS 2.1非常类似，主要由选择器和声明组成。选择器用来匹配组件，声明用来设置组件的属性。

选择器

JavaFX-CSS中的选择器与CSS 2.1支持的选择器基本一致，包括类选择器、属性选择器、伪类、伪元素、子选择器、后代选择器和通配符等。

类选择器

类选择器指定了带有特定class属性的组件，它的语法与CSS一致，以"."开头，并后接类名，例如：

.button {
    -fx-background-color: red;
}

属性选择器

属性选择器指定了具有特定属性和属性值的组件，与CSS一致，以"["和"]"包含属性和属性值，如下：

.button[text="OK"] {
    -fx-background-color: green;
}

伪类和伪元素

CSS定义了很多伪类和伪元素，JavaFX-CSS也都支持，例如:hover、:disabled、:checked等。

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

子选择器和后代选择器

JavaFX-CSS支持子选择器和后代选择器，例如：

.menu-bar > .menu-button {
    -fx-background-color: pink;
}

.button .label {
    -fx-font-size: 20px;
}

通配符

JavaFX-CSS中也支持通配符，即"*"，用于匹配所有组件。

* {
    -fx-font-family: "Arial";
}

属性

JavaFX-CSS的属性与CSS属性基本一致，但JavaFX-CSS还增加了一些扩展属性，例如-font-size和-fx-font-size，其中-fx-*表示JavaFX特有的属性。

例如：

.button {
    -fx-background-color: red;
    -fx-border-color: black;
    -fx-font-size: 20px;
}

如何使用JavaFX-CSS

JavaFX-CSS提供了两种方式来应用样式，一是内联样式，二是外部样式表。

内联样式

内联样式是将样式直接应用到组件上的最简单方式，例如：

Button button = new Button("Click me");
button.setStyle("-fx-background-color: red; -fx-font-size: 20px;");

外部样式表

外部样式表是将样式和业务逻辑分离的最佳实践方式，它可以让我们更好地管理样式和应用，例如：

.button {
    -fx-background-color: red;
    -fx-font-size: 20px;
}

Scene scene = new Scene(root);
scene.getStylesheets().add("path/to/styles.css");

总结

JavaFX-CSS提供了一种简单、强大且可读性高的方式来定制JavaFX应用程序的界面外观。通过JavaFX-CSS，我们可以通过外部样式表将UI和业务逻辑分离开来，使得我们的代码更易于维护。通过本文，您应该已经掌握了JavaFX-CSS的基本语法和使用方式，欢迎在实践中深入学习和探索。