前言
JavaFX 使用 CSS 文件来修饰 GUI 的外观，JavaFX 的 CSS 样式基于 W3C CSS 的 2.1 版本，JavaFX 的 CSS 语法和 HTML 的 CSS 语法一样。
CSS 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。每条声明由一个属性和一个值组成。
selector {property: value}
举例如下
h1 {-fx-color:red; -fx-font-size:14px;
}
JavaFX 的选择器
1. 类型选择器（type selector）
类型选择器事实上是控件类选择器，针对每种控件，如 Button，Label 等。
-
使用类型选择器，控制该类型控件的外观
-
其对应的命名规则为将 JavaFX 的类名成首字母小写，如果是由多个单词拼接的类名，将每个单词原来大写的首字母小写然后用连字符将多个单词连接。
JavaFX Class CSS type class Button button Label label CheckBox check-box TextField text-field
举例如下
.button {-fx-background-color: blue;
}
2. 类选择器（class selector）
不针对单一控件，一个类选择器可以应用到多个控件。
- 类选择器允许以一种独立于文档元素的方式来指定样式
- 使用时必须指定每个实例的
styleClass属性。才能使用这些选择器 - 简单来说类型选择器针对类，类选择器针对实例
举例如下
.font-large {-fx-font-size: 16pt;
}
3. ID选择器（id selector）
针对标有特定 id的控件
- 一般情况下一个 ID 选择器对应这唯一的一个控件。
举例如下
#lbl-title { -fx-font-color: red; -fx-font-size: 20px; -fx-font-weight: bolder;}
4. 伪类选择器
针对控件的不同状态所定义的样式。如控件选择状态、点击状态、鼠标在控件上面等。
| 状态 | 描述 |
|---|---|
| :disabled | 表示元素被禁用的状态 |
| :focused | 表示元素获得了焦点的状态 |
| :hover | 表示鼠标悬停在元素上的状态 |
| :pressed | 表示元素被按下的状态 |
举例如下
.button:hover { -fx-background-color: green;
}
5. 后代选择器
后代选择器（descendant selector）又称为包含选择器。
- 后代选择器可以选择作为某元素后代的元素。
- 如下例子表示选择h1 元素中的 em 元素
举例如下
h1 em {-fx-color:red;
}
6. 子元素选择器
如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
举例如下
只选择作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {-fx-color:red;
}
7. 组合选择器
组合选择器可以同时选定多个选择器。所有的选择器分享相同的声明。用逗号将需要组合的选择器分开。
举例如下
VBox,Button {-fx-background-color: lightgray;
}
属性声明的规则
命名规则是以 -fx 开头，然后连接该类的属性，属性名称的单词首字母小写，然后用连字符连接拼接的属性单词。
比如-fx-background-color对应着 Button 的 backgroundColor 属性
.button {-fx-background-color: blue;
}
常用属性
.label {-fx-background-color: blue;-fx-font-size: 11pt;-fx-font-family: "Segoe UI Semibold";-fx-text-fill: white;-fx-opacity: 0.6;
}
CSS文件 的使用
css 文件是指定给 JavaFX 的控件的。这个控件的所有子控件都能应用这个 CSS 文件。这个控件的父控件和平级控件不能应用。所以指定 css 文件事实上是给控件的Stylesheets属性赋值。
Scene 加载 CSS 文件
FXMLLoader fxmlLoader = new FXMLLoader(HelloApplication.class.getResource("hello-view.fxml"));
Scene scene = new Scene(fxmlLoader.load(), 320, 240);
scene.getStylesheets().add(this.getClass().getResource("/css/style.css").toExternalForm());
stage.setTitle("Hello!");
stage.setScene(scene);
stage.show();
3. JavaFX Scene Builder工具中指定 CSS 文件
选择控件后，在左边的Properties页面下指定即可
styleClass 属性赋值（使用类选择器）
1. 在代码使用设置 styleClass 属性
getStyleClass().add("font-large") //会自动应用css样式。。自动生效
2. 在 FXML 文件中设置 styleClass 属性
<!--单一styleClass属性-->
<GridPane styleClass="background"/>
<!--多个styleClass属性-->
<GridPane"><styleClass><String fx:value="background" /><String fx:value="label-bright" /></styleClass>
</GridPane>
3. 在 JavaFX Scene Builder 工具中设置 styleClass 属性
id 属性（使用ID选择器）
1. 在代码中设置 id 属性
//只能指定单一ID
root.setID();
2. 在 FXML 中设置 id 属性
<GridPane id="aaa" />
3. 在 JavaFX Scene Builder 工具中设置 id 属性
style属性使用
1. 在代码中设置 style 属性
label.setStyle("-fx-font-size: 24px;");
2. 在 FXML 中设置 style 属性
<Button>style="-fx-min-height: 30; -fx-min-width: 80;-fx-background-color: #337ab7;">
</Button>
注意：该属性完全可以用 css 文件和 id 选择器代替。
3. 在 JavaFX Scene Builder 工具中设置 style 属性
更换应用皮肤
通过切换 css 文件可以使用更换应用皮肤
primaryStage.getScene().getStylesheets().clear(); //清除后，会取消所有显示外观
File cssFile = new File("css/" + cssFilePath);
primaryStage.getScene().getStylesheets().add(cssFile.toURI().toString());//调用add方法后，会自动应用css
第三方外观框架
在实际开发中，可以使用现有的第三方开源框架来美化 JavaFX 应用。
这里推荐两个JavaFX CSS开源框架：
- bootstrapfx （MIT协议）
- jbootx （没有声明开源协议）。
Bootstrapfx 框架
官网地址：https://gitee.com/tju_xiaoyong/bootstrapfx/
BootstrapFX是一个开源项目，它将流行的前端框架 Bootstrap 与强大的 JavaFX 结合在一起，为Java开发者提供了一种更简洁、直观的方式来构建桌面应用程序。
通过这个项目，你可以利用Bootstrap的优美设计和响应式布局，打造具有现代感和跨平台兼容性的JavaFX应用。
使用步骤
-
导入 Bootstrapfx 依赖包
<!-- BootstrapFX --> <dependency><groupId>org.kordamp.bootstrapfx</groupId><artifactId>bootstrapfx-core</artifactId><version>0.4.0</version> </dependency> -
JavaFX 应用程序设置 BootstrapFX 样式
scene.getStylesheets().add(BootstrapFX.bootstrapFXStylesheet()); -
在 FXML 文件中使用 BootstrapFX 样式
<!-- Button 控件 --><Button text="Submit" fx:id="submitButton" GridPane.columnIndex="4" GridPane.rowIndex="4" styleClass="btn-info"/>
