本節概要：界面裝飾
JavaFX對界面及控件的美化非常的友善如果你懂得CSS的話，可以按照自己的喜歡任意設計。
先提前講下樣式是怎麼使用的。
這隻是使用Scene Builder進行樣式設定而不是使用CSS檔案，不過也可以設定很多樣式，可以很友善檢視該控件可以設定哪些樣式，隻是修改沒有CSS檔案那樣的規範而已。
還有一些基本用法：
添加和删除樣式：
通過class和id來使用css檔案設定樣式：
添加css檔案來設定樣式：
CSS控件分析器：
要很好的玩轉樣式，設計更漂亮的界面需要懂CSS才行，否則有些難明白這些是怎麼一回事，上面介紹了基本用法，下面就直接用寫好的樣式不再進行說明。
在styles檔案夾下建立style.css檔案，其内容如下：
.root {
-fx-font-family: "微軟雅黑";
-fx-font-size: 16px;
-fx-background-color: rgb(213, 233, 237);
}
.button {
-fx-background-color: white;
-fx-text-fill: black;
}
.button:hover {
-fx-border-color: rgb(66, 139, 202);
-fx-border-width: 2px;
}
#count {
-fx-background-color: rgb(66, 139, 202);
-fx-text-fill: white;
-fx-font-family: "微軟雅黑";
-fx-font-size: 18px;
}
#count:hover, #reback:hover, #clear:hover {
-fx-border-color: rgb(125, 125, 125);
-fx-border-width: 5px;
}
#reback {
-fx-background-color: rgb(92, 184, 92);
-fx-text-fill: white;
-fx-font-family: "微軟雅黑";
-fx-font-size: 18px;
}
#clear {
-fx-background-color: rgb(217, 83, 79);
-fx-text-fill: white;
-fx-font-family: "微軟雅黑";
-fx-font-size: 18x;
}
然後就是将CSS檔案應用到界面上，有兩種方法。
第一種方法是在fxml檔案中的根據添加stylesheets屬性，其值是css樣式檔案的有效路徑。
運作效果如下圖：
第二種方法是在Main類中的start方法内進行設定。
運作效果和上圖一樣。
這裡采用第二種吧，是以Main.java的内容如下：
package kindredCalculator;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("view/sample.fxml"));
primaryStage.setTitle("親戚關系電腦");
primaryStage.setScene(new Scene(root, 800, 650));
primaryStage.getScene().getStylesheets().add(getClass().getResource("styles/style.css").toExternalForm());
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
可搜尋微信公衆号【Java執行個體程式】或者掃描下方二維碼關注公衆号擷取更多。
注意：在公衆号背景回複【20191126】可擷取本節源碼。