JavaFX CSS 样式文件

前言

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应用。

使用步骤

1. 导入 Bootstrapfx 依赖包

   <!-- BootstrapFX -->
   <dependency>
       <groupId>org.kordamp.bootstrapfx</groupId>
       <artifactId>bootstrapfx-core</artifactId>
       <version>0.4.0</version>
   </dependency>
   

2. JavaFX 应用程序设置 BootstrapFX 样式

   scene.getStylesheets().add(BootstrapFX.bootstrapFXStylesheet());
   

3. 在 FXML 文件中使用 BootstrapFX 样式

     <!-- Button 控件 -->
       <Button text="Submit" fx:id="submitButton" GridPane.columnIndex="4" GridPane.rowIndex="4"
               styleClass="btn-info"/>