这个主题讲述了：怎样在JavaFX中使用CSS来给你的应用程序创建自定义的外观样式表包含了关于UI元素的外观样式定义。在JavaFX中使用CSS和在HTML使用css类似。JavaFX中的css是基于W3C css2.1版本，添加了一些目前CSS3.0的工作版本的一些内容和支持javafx特性的一些扩展功能。通过在Javafx中的使用css,可以改变你的UI外观，图37-1和图37-2显示了前后的变化。
图37-1 样式1
图37-2 样式2
JavaFX应用程序中默认的样式表是modena.css，这个文件可以在JavaFX运行时JAR文件jfxrt.jar中能够找到，它定义了根节点和UI控件的样式。jfxrt.jar存在于jdk的安装目录的\jre\lib\ext目录下。使用如下命令可以从这个jar文件中提取出modena.css：
jar xf jfxrt.jar com/sun/javafx/scene/control/skin/modena/modena.css |
图37-3显示了示例UI的默认样式的外观
图37-3 默认样式
创建样式表
你能够创建并添加自己的样式表来覆盖默认的样式。最典型的做法是，你可以创建以.css为扩展名的文件，然后把它们放到与JavaFX应用程序主类相同的目录下。
样式表controlStyle1.css提供了图37-1中的外观定义，样式表controlStyle2.css提供了图37-2中的外观定义。它们能够应用到Scene对象上，该对象的path代表样式表的路径，stylesheet代表样式表的名称。例如图37-2中的样式表的path和name是uicontrolcss/controlStyle2.css。
例子37-1 增加一个样式表
|
Scene scene = new Scene(new Group(), 500, 400); scene.getStylesheets().add("path/stylesheet.css"); |
定义样式
一个样式定义包含样式的名称（也叫选择器），一系列样式属性的规则集合。定义个规则用{}括起来。例子37-2定义两个一个名叫.custom-button的样式。
例子37-2 样式定义
|
.custom-button { -fx-font: 16px "Serif"; -fx-padding: 10; -fx-background-color: #CCFF99; } |
选择器
有多种类型的样式可以定义，每种类型的样式都有它自己对选择的约定。
样式类classes对应class的名字。按照惯例，样式class名包含一个或多个单词，中间用-连接，前面用.开头。
class选择器的例子：
|
.button .check-box .scroll-bar |
你也能够通过节点的ID来定义样式，这个ID由节点的setId()方法进行设置。样式名称前以#开头，例如，一个节点的id是my-button，那么它的样式就是#my-button。
ID样式选择器的例子
|
#my-button #shaded-hbox |
使用组合的选择器也是可以的。包含元素的一些classes可以有它们自己的子样式定义，例如，许多UI控件有一个label的子class。这些定义的选择器可以通过一个空格和它的子class连接起来。
包含子class的选择器的例子
|
.check-box .label .check-box .box .radio-button .dot |
伪类也可以用于定义节点的状态，例如当节点获得焦点时。这些定义通过：来和类选择器连接。
包含伪类的选择器的例子：
|
.radio-button:focused .radio-button:hover .scroll-bar:vertical |
规则和属性
样式定义的规则是给属性赋予一个值的形式。规则属性名和类的属性名相对应。按惯例，属性名一般使用多个单词，用-连接起来。JavaFX样式表的属性名是以-fx-开头的属性名称，属性名和值之间用：隔开，然后以；结尾。
规则的例子
|
-fx-background-color: #333333; -fx-text-fill: white; -fx-alignment: CENTER; |
.root样式类被应用到Scene实例的root节点中。因为在scene中，所有的节点都是root节点的子节点，.root样式可以应用到任何节点。
.root样式类包含的属性能够被其他样式用来提供UI的一致性。例如，-fx-focused-base属性被其他的UI控件的样式用来定义控件获得焦点时的颜色。下面的定义说明了-fx-focused-base属性是怎样用于CheckBox样式的。
|
.check-box:focused { -fx-color: -fx-focused-base; } |
美化你的Scene
你可以很便捷的通过.root样式来修饰你的UI控件。实例中前两个样式是设置字体和字的大小，其他的颜色是通过base这项来获取，background设置了scene背景颜色。例37-3，是controlStyle2.css中的.root样式。
例37-3 Root样式
|
.root{ -fx-font-size: 16pt; -fx-font-family: "Courier New"; -fx-base: rgb(132, 145, 47); -fx-background: rgb(225, 228, 203); } |
美化你的控件
你也可以进一步通过定义各种样式来修饰你的每个控件。你可以覆写默认样式表或者创建新的class样式和id样式。你也可以为你代码中的每个节点定义样式。
覆写默认样式
你可以在你的样式表中覆写默认默认，方法是给样式中的属性进行重新赋值。例37-4，显示了controlStyle2.css中对Button类的样式定义。
例37-4 覆写一个样式
|
.button{ -fx-text-fill: rgb(49, 89, 23); -fx-border-color: rgb(49, 89, 23); -fx-border-radius: 5; -fx-padding: 3 6 6 6; } |
上面的样式定义了文本颜色，边框颜色，边框尺寸，空白大小。那个按钮的颜色和按钮文本字体的样式则继承自.root 样式。这个按钮的外观见下图。
创建class样式
你可以创建一个class样式，例37-5中显示了controlStyle2.css中定义的一个名叫.button1的样式
例37-5 定义新样式
|
.button1{ -fx-text-fill: #006464; -fx-background-color: #DFB951; -fx-border-radius: 20; -fx-background-radius: 20; -fx-padding: 5; } |
其外观如下图：
注意：按钮的文本字体继承自controlStyle1.css中定义的.root样式
-为了把这个class样式应用到节点，我们可以使用节点的getStyleClass().add()方法。例37-6中显示了把.button1应用到按钮。
例37-6 应用一个样式
|
Button buttonAccept = new Button("Accept"); buttonAccept.getStyleClass().add("button1"); |
注意：为节点增加一个样式是有累计效应的。上例中的按钮将同时呈现.button和.button1中的组合样式。
创建一个ID样式
ID样式是以#开头的，如例37-7创建一个#font-button。
例37-7 定义一个ID样式
|
#font-button { -fx-font: bold italic 20pt "Arial"; -fx-effect: dropshadow( one-pass-box , black , 8 , 0.0 , 2 , 0 ); } |
上例中定义个样式效果如下图：
例37-8 应用ID样式到节点
|
Button buttonFont = new Button("Font"); buttonFont.setId("font-button"); |
在代码中设置样式
你也可以再代码中设置样式属性，设置在代码中的样式优先于样式表中的样式显示。例37-9显示了怎样在代码中设置一个按钮的背景色和字体颜色。
|
Button buttonColor = new Button("Color"); buttonColor.setStyle("-fx-background-color: slateblue; -fx-text-fill: white;"); |
效果如下图：
