JavaFX使我们可以使用CSS设置JavaFX组件的样式，就像我们可以使用CSS设置网页中HTML和SVG元素的样式一样。 JavaFX使用与Web CSS相同的CSS语法，但是CSS属性是JavaFX特有的，因此名称与WebFX的名称略有不同。

使用CSS对JavaFX应用程序进行样式设置可将样式(外观)与应用程序代码分开。这样可以使应用程序代码更简洁，并且更容易更改应用程序的样式。我们不必查看Java代码内部即可更改样式。我们还可以使用共享的CSS样式表一次更改许多组件的样式。

在本JavaFX CSS教程中，我将更深入地研究将CSS样式应用于JavaFX应用程序的多种不同方式，以及可以样式化和不能样式化的内容。 JavaFX CSS函数非常先进，因此仅CSS可以做很多事情。

我假设我们已经对CSS的核心概念有所了解，例如CSS语法，CSS规则，CSS属性等。如果没有，那么在我的CSS教程中阅读有关CSS的基础知识可能是一个好主意。

CSS样式方法

有几种不同的方法可以将CSS样式应用于JavaFX组件。这些方法是：

• JavaFX默认CSS样式表
• 场景特定的CSS样式表
• 父级特定的CSS样式表
• 组件style属性

在以下各节中，我将简要说明这些CSS样式机制中的每一种如何工作。

默认CSS样式表

JavaFX应用程序具有适用于所有JavaFX组件的默认CSS样式表。如果我们不提供组件的样式，则默认的CSS样式表样式表将为JavaFX组件设置样式，从而使它们看起来很漂亮。

JavaFX 8的默认样式表称为Modena，位于JavaFX JAR文件中。

场景特定的CSS样式表

我们可以为JavaFXScene对象设置CSS样式表。然后，将此CSS样式表应用于添加到该"场景"对象的场景图中的所有JavaFX组件。如果两个样式表都设置了相同的CSS属性，则特定于场景的CSS样式表将覆盖默认样式表中指定的样式。

以下是在"场景"对象上设置CSS样式表的示例：

scene.getStylesheets().add("style1/button-styles.css");

这个例子告诉JavaFX寻找一个名为" button-styles.css"的样式表文件，该文件位于名为" style1"的目录中。 JavaFX在类路径上寻找该文件，因此目录" style1"应位于该应用程序的类路径中所包含的目录(或者JAR文件)之一的根目录下。

指向CSS样式表文件的字符串被解释为URL。这意味着我们还可以在文件系统中指定文件的完整路径。但是，优良作法是将CSS文件视为资源，并将它们与应用程序的代码捆绑在一起。运行该应用程序的用户通常不会更改样式，因此无需在代码外分发文件(就像使用用户打算更改的配置文件一样)。

父级特定CSS样式表

也可以在JavaFXParent类的所有子类上设置CSS样式表。 " Parent"类是所有可以有子组件的组件的基类，这意味着它们可以其中包含其他组件。在"父"子类上设置的样式表中指定的CSS属性通常将优先于场景样式表中指定的CSS规则和默认样式表。

JavaFX布局组件是"父"子类的典型示例。如果在布局组件上设置CSS样式表，则样式表将应用于该布局组件内的所有组件。

在Parent子类上设置CSS样式表看起来类似于在Scene对象上设置样式表。这是在作为父类的VBox上设置CSS样式表的示例：

Button button1 = new Button("Button 1");
Button button2 = new Button("Button 2");

VBox vbox = new VBox(button1, button2);

vbox.getStylesheets().add("style1/button-styles.css");

这段代码将在VBox上设置style1 / button-styles.css样式表。因此，样式表将应用于VBox内部的两个按钮。

零部件样式属性

我们可以通过直接在组件上设置CSS属性来为特定组件设置CSS样式。这是通过在组件的style属性中设置一个包含CSS属性的String来完成的。

通过" style"属性设置的CSS属性优先于组件嵌套其中的任何" Parent"子类中指定的CSS属性，场景样式表和默认样式表。

这是为JavaFXButton设置style属性的示例：

Button button = new Button("Button 2");
button.setStyle("-fx-background-color: #0000ff");

本示例将style属性中的背景颜色CSS属性设置为蓝色。

我们可以在同一样式字符串内设置多个CSS属性。这是一个看起来的例子：

String styles =
        "-fx-background-color: #0000ff;" +
        "-fx-border-color: #ff0000;" ;

Button button = new Button("Button 2");
button.setStyle(styles);

JavaFX CSS属性

如前所述，JavaFX包含其自己的CSS属性集。 JavaFX CSS属性的命名与HTML使用的CSS属性有些不同。但是，JavaFX团队使JavaFX CSS属性的名称与HTML中使用的CSS属性非常接近。如果我们熟悉Web的CSS，则通常可以猜出相应的JavaFX CSS属性是什么。

并非所有CSS属性都可以应用于所有JavaFX组件，但是许多CSS属性可以应用于多个JavaFX组件。