相对于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, 0, 0, 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 目前最新的版本是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：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
3年以上Android开发的中高级面试宝典（准备金九银十，大厂直通）
网友评论