javafx的css语法_JavaFX让UI更美观-CSS样式(示例代码)

相对于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: 4