JavaFX CSS 样式

JavaFX 使您能够使用 CSS 设置 JavaFX 组件的样式，就像您可以使用 CSS 设置网页中的 HTML 和 SVG 元素一样。JavaFX 使用与 Web 的 CSS 相同的 CSS 语法，但 CSS 属性特定于 JavaFX，因此与它们的 Web 对应物的名称略有不同。
使用 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 应用程序有一个默认的 CSS 样式表，它适用于所有 JavaFX 组件。如果您不提供组件样式，则默认 CSS 样式表样式表将为 JavaFX 组件设置样式，使它们看起来很漂亮。
JavaFX 8 的默认样式表称为 Modena，位于 JavaFX JAR 文件中。

场景特定的 CSS 样式表

您可以为 JavaFXScene对象设置 CSS 样式表。然后将此 CSS 样式表应用于为该Scene对象添加到场景图中的所有 JavaFX 组件。场景特定的 CSS 样式表将覆盖默认样式表中指定的样式，以防两个样式表设置相同的 CSS 属性。
下面是在Scene对象上设置 CSS 样式表的示例：

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

这个例子告诉 JavaFX 寻找一个名为的样式表文件button-styles.css，该文件位于一个名为style1. JavaFX 在类路径中查找此文件，因此该目录 style1应位于应用程序的类路径中包含的目录（或 JAR 文件）之一的根目录中。
指向 CSS 样式表文件的字符串被解释为 URL。这意味着您还可以指定文件系统中文件的完整路径。但是，将 CSS 文件视为资源并将它们与应用程序的代码捆绑在一起是一种很好的做法。运行应用程序的用户通常不会更改样式，因此无需在代码之外分发文件（就像您使用用户打算更改的配置文件一样）。

父级特定 CSS 样式表

也可以在 JavaFXParent类的所有子类上设置 CSS 样式表。该类 Parent是所有可以有子组件的组件的基类，这意味着它们可以在其中包含其他组件。在子类上设置的样式表中指定的 CSS 属性Parent通常优先于场景样式表中指定的 CSS 规则和默认样式表。
JavaFX 布局组件是Parent子类的典型示例。如果您在布局组件上设置 CSS 样式表，则样式表将应用于该布局组件内的所有组件。
在子类上设置 CSS 样式表Parent看起来类似于在Scene 对象上设置它。VBox这是一个在子类上设置 CSS 样式表的示例Parent：

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");

此代码将style1/button-styles.css在VBox. 样式表将因此应用于 VBox 内的两个按钮。

组件样式属性

您可以通过直接在组件上设置 CSS 属性来为特定组件设置 CSS 样式。这是通过在组件的style属性中设置一个包含 CSS 属性的字符串来完成的。
通过该属性设置的 CSSstyle属性优先于 Parent在组件嵌套在其中的任何子类、场景样式表和默认样式表中指定的 CSS 属性。
这是一个style为 JavaFX 设置属性的示例Button：

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

此示例将属性中的背景颜色 CSS 属性设置style为蓝色。
您可以在同一个样式字符串中设置多个 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 属性被称为什么。
以下是最常用的 JavaFX CSS 属性列表。并非所有 CSS 属性都可以应用于所有 JavaFX 组件，但许多 CSS 属性可以应用于多个 JavaFX 组件。顺便说一句，我会随着时间的推移更新这个列表，所以以后再回来看看（希望）更完整的 JavaFX CSS 属性列表。