本节概要：界面装饰
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】可获取本节源码。
