JavaFX入门（五）：使用CSS样式美化你的UI控件

CSS（层叠样式表，Cascading Style Sheets）原来是被用来在网页开发中表现HTML元素样式的一种文本标记语言。HTML用来展现内容，CSS被用来设计内容的样式，这样做的好处就是内容和样式相分离。CSS先后被用到Adobe的RIA开发技术Flex，C++的GUI框架Qt以及JavaFX技术上。如果对CSS不是很熟悉，没关系，十分钟入门CSS的一个教程：W3CSchool CSS教程。

JavaFX的CSS样式基于W3C CSS的2.1版本，是CSS 2.1的一个子集，不包含CSS 2.1的所有特性。同时JavaFX对该版本的CSS有所扩展。参考文档：JavaFX CSS Reference Guide。
JavaFX CSS有三种选择器：
1. type selector
每个JavaFX控件类都对应这一个CSS Type，我们可以使用类型选择器，控制该类型控件的外观。其对应的命名为：将JavaFX的类名成首字母小写，如果是由多个单词拼接的类名，将每个单词原来大写的首字母小写然后用连字符将多个单词连接。比如：

JavaFX Class	CSS type class
Button	button
Label	label
CheckBox	check-box
TextField	text-field
…	…

类型选择器的用法如下：

.button {
    -fx-background-color: blue;
}

这样我们就设置了所有Button的背景色为蓝色。其实类型选择器我们可以看做一种特殊的类选择器。
CSS中属性的命名规则是：以-fx开头，然后连接该类的属性，属性名称的单词首字母小写，然后用连字符连接拼接的属性单词。比如上面的-fx-background-color对应着Button的backgroundColor属性。具体的CSS属性我们可以参考JavaFX CSS Reference Guide文档。
2. class selector
类选择器和W3C的CSS中类选择器是一样的。比如下面的用法：

.font-large {
    -fx-font-size: 16pt;
}

我们定义了一个font–large的类选择器。对于Node的任意子类都有一个getStyleClass()的方法，我们可以通过getStyleClass().add(“font-large”);将给类样式添加到指定的控件上。一个类选择器样式可以应用到多个控件上。
3. id selector
一个典型的ID选择器如下：

#lbl-title {
    -fx-font-color: red;
    -fx-font-size: 20px;
    -fx-font-weight: bolder;
}

ID选择器由#开始进行定义。一般情况下一个ID选择器对应这唯一的一个控件。比如我们有一个ID为libTitle的Label，那么通过该CSS这个Label的字体会进行相应的改变。

Label lblTitle = new Label("欢迎来到中国");
lalTitle.setId("lbl-title");

最后说的是伪类选择器：
伪类的语法为：selector : pseudo-class {property: value}
比如我们设置当鼠标移动到Button上去时背景色变为绿色：

.button:hover {
    -fx-background-color: green;
}

JavaFX中Node类定义的伪类有：

CSS Pseudo-class	Comments
disabled	applies when the disabled variable is true
focused	applies when the focused variable is true
hover