5.7.5　CSS外观描述

用户对桌面应用外观的要求越来越高，很多应用都提供了更换界面皮肤的功能来满足用户的需求。从前面对AWT和Swing的介绍可以知道，AWT无法改变组件的外观，而Swing则需要通过编写Java代码的方式来实现。JavaFX采用了一种更加先进的做法，即允许使用CSS来改变用户界面的外观。引入CSS支持所带来的影响是巨大的：首先，对用户界面的修改变得很容易，只需要修改CSS代码即可，不需要重新进行编译；其次，熟悉CSS用户界面的设计人员可以直接修改程序的外观，而不需要依靠Java开发人员来编写Java代码；最后，JavaFX和Web应用的外观样式声明可以混杂在一起来使用。

JavaFX中使用的CSS语法基于W3C的CSS 2.1规范，并添加了部分CSS 3的内容。鉴于JavaFX程序本身的特性，所使用的CSS语法中某些属性的含义不同于在Web应用中的含义。JavaFX程序使用的CSS样式表中的所有属性都以“-fx-”作为前缀，以区别于一般的CSS属性。

有两种方式来使用CSS设置程序的外观样式。第一种方式是使用Node类的setStyle方法直接设置节点的CSS样式声明，这种做法适合于修改单个具体的节点的样式，比如，当需要把某个矩形对象rect的填充颜色设为红色，可以使用“rect.setStyle（"-fx-fill：#FF0000"）；”。第二种方式是把样式声明提取到单独的CSS文件中，并通过Scene类的对象来应用CSS文件。如代码清单5-22所示，在Scene类的对象中添加了新的CSS文件“main.css”，在“main.css”中定义了相关的样式规则。为了在CSS文件中能够引用界面上的组件，一般需要使用setId方法为组件指定一个标识符。“main.css”中的样式声明是“#rect{-fx-fill：#ff0000；}”，把标识符为“rect”的节点的填充颜色设置为红色。

代码清单5-22　使用CSS描述JavaFX程序外观的示例

Group root=new Group（）；

Rectangle rect=new Rectangle（100，50）；

rect.setId（"rect"）；

root.getChildren（）.add（rect）；

Scene scene=new Scene（root，300，250）；

scene.getStylesheets（）.add（"main.css"）；

如果在CSS文件中定义了CSS类，可以在代码中为组件添加CSS类，例如，“rect.getStyleClass（）.add（"myRect"）”为rect对象添加了名称为“myRect”的CSS类。