37 使用CSS样式化UI控件

选择器

可以定义多种类型的样式。每种类型的样式都有自己的选择器约定。

样式类对应于类名。按照约定，由多个单词组成的样式类名之间使用连字符（-）分隔。样式类选择器前面加上一个点（.）。

样式类选择器的示例：

.button
.check-box
.scroll-bar

您还可以定义与节点关联的样式，通过节点的setId()方法设置ID。样式名称是以井号（#）开头的ID。例如，具有ID my-button的节点使用样式#my-button。

ID样式选择器的示例：

#my-button
#shaded-hbox

还可以使用复合选择器。某些类包含可以有自己的样式定义的元素，称为后代类。这些定义由类的选择器和后代类的选择器之间用空格分隔。

后代类选择器的示例：

.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样式类中的样式应用于任何节点。

.root样式类包括其他样式可以使用的属性，以提供UI的一致性。例如，属性-fx-focused-base在.root样式中定义。当其他UI控件具有焦点时，该属性用作控件的颜色。以下定义显示了如何在CheckBox类的样式中使用此属性：

.check-box:focused {
    -fx-color: -fx-focused-base;
}

覆盖默认样式

您可以通过在您的样式表中包含样式并为其分配不同的属性来覆盖默认样式表中的样式。 示例37-4显示了来自controlStyle2.css的Button类的样式。

.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;
}

字体颜色、边框颜色、边框半径和填充都从这个定义中获取。按钮的颜色和标签的字体样式从示例37-3中的.root定义中获取。使用这种样式的按钮如下图所示。

创建类样式

您可以通过在样式表中添加定义来创建类样式。在示例37-5中，controlStyle1.css定义了一个名为.button1的新样式。

.button1{
    -fx-text-fill: #006464;
    -fx-background-color: #DFB951;
    -fx-border-radius: 20;
    -fx-background-radius: 20;
    -fx-padding: 5;
}

任何添加了这个样式的按钮都会显示如下图所示。请注意，标签的字体是从controlStyle1.css中的.root定义中获取的。

要将这个类样式分配给一个节点，使用getStyleClass().add()方法序列。在示例37-6中，展示了将.button1样式分配给Accept按钮的方法。

Button buttonAccept = new Button("Accept");
buttonAccept.getStyleClass().add("button1");

请注意，向节点添加样式是累积的。在将.button1样式类添加到buttonAccept节点之后，该节点将使用.button和.button1样式的规则进行渲染。

创建ID样式

您可以通过创建样式并将样式分配给节点来为单个节点定义样式。样式名称是以井号（#）开头的ID。 示例37-7 创建了一个名为#font-button的样式定义。

#font-button {
    -fx-font: bold italic 20pt "Arial";
    -fx-effect: dropshadow( one-pass-box , black , 8 , 0.0 , 2 , 0 );
}

分配了ID font-button 的按钮如下图所示。

示例37-8展示了如何将ID样式分配给节点。

Button buttonFont = new Button("字体");
buttonFont.setId("font-button");

在代码中设置样式

您还可以选择在应用程序的代码中为节点设置样式属性。代码中设置的规则优先于样式表中的样式。 示例37-9展示了如何更改按钮的背景颜色和字体颜色。

Button buttonColor = new Button("颜色");
buttonColor.setStyle("-fx-background-color: slateblue; -fx-text-fill: white;");

下图显示了按钮的外观。