相對於Swing來說，JavaFX在UI上改善了很多，不僅可以通過FXML來排版佈局介面，同時也可以通過CSS樣式表來美化UI。
其實在開發JavaFX應用的時候，可以將FXML看做是HTML，這樣跟CSS結合起來就跟開發WEB應用差不多，只不過兩者之間的語法有點差異。

1. JavaFX CSS語法

JavaFX CSS樣式跟HTML中的CSS樣式很大程度上是相似的，比如class選擇器、組合選擇符、偽元素等。

.root {
 -fx-body-color : #F5F5F5;
 -fx-outer-border : #cecece;
}

VBox > .text-area.first {
 -fx-border-radius: 4 4 0 0;
 -fx-background-radius: 4 4 0 0;
}

.arrow-button:pressed {
 -fx-background-color: #e6e6e6;
 -fx-border-color: #acacac;
 -fx-effect: innershadow(gaussian,#adadad,10,3);
}

但有一點不同的是，JavaFX的CSS樣式語法都是以“-fx-”作為字首。

比如：

/* 在CSS中，樣式是這樣寫的 */
min-height: 46;
max-height: 46;
font-size: 18;
/* 而在JavaFX中CSS必須這樣寫 */
-fx-min-height: 46;
-fx-max-height: 46;
-fx-font-size: 18;

其實，如果瞭解CSS，想要編寫JavaFX的CSS難度並不是很大。

2. 用CSS美化控制元件

在沒有經過CSS美化之前的JavaFX控制元件，其實跟Swing的控制元件差別不大，所以想要讓控制元件更加美觀還是要用CSS來修飾一下。

<Button text="Go."
style="-fx-min-height: 30; -fx-min-width: 80;-fx-background-color: #337ab7;">
</Button>

效果圖：

可以看到使用CSS美化過的按鈕要比之前的按鈕好看多了。

3. 使用CSS樣式表美化控制元件

雖然在控制元件上加上CSS樣式可以達到美化控制元件的效果，但是跟寫CSS一樣，這樣的寫CSS樣式很不利於維護。
更好的方式的使用CSS檔案統一維護樣式，然後通過class選擇器將樣式繫結在控制元件上。

首先程式設計css樣式

在AppUI.fxml相同的目錄下建立AppUI.css，內容如下：

.go {
 -fx-text-fill: white;
 -fx-min-height: 30;
 -fx-min-width: 80;
 -fx-background-color: #337ab7;
}

修改FXML引入樣式

這裡單獨為AppUI.fxml引入樣式，所以這需要在BorderPane的stylesheets屬性指定AppUI.css即可。

<BorderPane prefHeight="400.0" prefWidth="600.0"
      stylesheets="@AppUI.css" xmlns="http://javafx.com/javafx/8.0.172-ea"
      xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.itqn.gui.javafx.wx.ui.AppUI">
 <center>
  <VBox alignment="CENTER" spacing="10.0">
   <Label fx:id="text"/>
   <Button onAction="#click" text="Go." styleClass="go">
    <!--
    <styleClass>
     <String fx:value="btn"/>
     <String fx:value="btn-info"/>
    </styleClass>
     -->
   </Button>
  </VBox>
 </center>
</BorderPane>

注意這裡使用的是styleClass，而不是style，另外如果需要指定多個class樣式的話，應該採用styleClass子元素，而不是styleClass屬性。

修改maven pom.xml

跟之前一樣，要讓css編譯到classpath下面，需要在maven pom.xml配置include。

<build>
 <resources>
  <resource>
   <directory>src/main/java</directory>
   <includes>
    <include>**/*.fxml</include>
    <include>**/*.css</include>
   </includes>
  </resource>
 </resources>
</build>

在實際開發中，可以使用現有的開源框架來美化JavaFX應用，沒有自己從零開始編寫自己的樣式。
這裡推薦兩個JavaFX CSS開源框架：

• bootstrapfx （MIT協議）
• jbootx （沒有宣告開源協議）

bootstrapfx 目前最新的版本是0.2.4，使用它非常方便，只需要在maven引入依賴，然後在場景中新增對應的樣式表即可。

首先引入maven依賴

修改maven pom.xml 加入如下依賴

<dependency>
 <groupId>org.kordamp.bootstrapfx</groupId>
 <artifactId>bootstrapfx-core</artifactId>
 <version>0.2.4</version>
</dependency>

然後在場景（scene）中引入樣式表

這裡跟上面使用樣式表的方式有點不同，在scene引入樣式表後，所有scene裡面的容器和控制元件都能使用。
而單獨為fxml引入樣式表，僅能在當前fxml中使用。

stage.setScene(scene);
stage.getScene().getStylesheets().add("org/kordamp/bootstrapfx/bootstrapfx.css");
stage.show();

在fxml中使用bootstrapfx樣式

<Button text="Go.">
 <styleClass>
  <String fx:value="btn"/>
  <String fx:value="btn-success"/>
 </styleClass>
</Button>

效果圖：

另外：jbootx的使用方式也是一樣的，當然也可以不引入依賴，直接將樣式表放在resources目錄，然後直接新增到場景中。

jbootx的使用示例這裡就不展開了，下面展示一下jbootx的效果圖。

效果圖1：

效果圖2：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。