11 使用CSS和CSS分析器进行样式设置
本章介绍了JavaFX Scene Builder提供的层叠样式表（CSS）支持，并描述了CSS分析器功能。
Scene Builder使用的JavaFX GUI控件预先使用默认的JavaFX Modena外观进行样式设置。当您将GUI控件从库面板拖动到内容或层次结构面板时，Scene Builder会立即呈现此预定义的JavaFX样式。您可以通过从菜单栏选择预览并选择一个JavaFX主题来更改布局中使用的JavaFX主题，如图11-1所示。从下拉列表中，您可以选择针对目标平台的基于Modena的主题。您还可以选择Caspian主题，这是JavaFX 2.x版本中使用的默认主题。您还可以通过在检查器面板的属性部分更改组件的属性或在CSS文件中定义自己的样式规则来自定义应用程序中使用的样式。
Scene Builder目前不生成CSS文件，但允许您使用本地CSS编辑器创建和修改CSS文件。您在CSS文件中保存的更改会立即由Scene Builder呈现，该文件由内容面板中显示的当前FXML布局使用。
您可以在场景级别、给定容器内或通过节点级别的内联样式设置中添加CSS规则。通过检查器面板属性部分的JavaFX CSS子部分中的样式表列表视图，您可以为FXML布局中的选定GUI元素分配要使用的CSS文件，如果该GUI元素是容器或GUI控件。您可以将样式表附加到FXML布局的任何部分，从最顶层的父GUI元素到最低层。
图11-2的左侧显示了检查器面板的属性部分，其中IssueTracking.css文件分配给布局中使用的最顶层VBox容器。图的右侧显示了darkList样式类分配给ListView元素。darkList样式类在IssueTracking.css样式表中定义，并从其容器父级（最顶层VBox容器）继承给ListView元素。
在父元素上定义的CSS规则可以用于为父GUI元素本身和其所有子元素设置样式。您可以通过将其添加到Inspector面板的属性部分的样式类属性中来定义要与GUI元素一起使用的特定样式类。从样式表属性引用的CSS文件是从FXML文件中引用的，因此它们与FXML文件一起部署。
在Scene Builder中，您可以通过选择预览，然后选择场景样式表，最后选择添加样式表或打开样式表选项来模拟将样式表附加到应用程序场景。当样式表中定义了“根”样式类时，此预览命令非常有用。在这种情况下，一旦将样式表附加到场景中，样式表中定义的“根”类的样式将应用于内容面板中的布局。
您可以使用以下步骤使用系统编辑器编辑现有的CSS文件：
-
在Inspector面板的属性部分中，找到样式表属性，然后单击要编辑的CSS文件。
-
单击列表视图右下角的下拉箭头，如图11-3所示。
-
选择要编辑的CSS文件的打开命令。
您还可以使用下拉菜单中提供的Reveal命令来查看CSS文件在系统中的位置。您还可以通过CSS分析器面板导航到CSS文件，如后面的使用CSS分析器面板中所述。
使用CSS分析器面板
CSS分析器面板可以帮助您了解各种可能的CSS规则如何影响当前选定的GUI元素的各个方面。它显示了所有可能的属性值来源的概览视图。分配给选定GUI元素某个方面的每个CSS属性值可能来自API或预定义的CSS规则。这些来源按优先顺序列出，这样您就可以了解为什么给定的来源优先于另一个。该面板还提供了一种导航到CSS属性值来源的方法，以帮助您开发和排除故障CSS样式表。
CSS分析器面板默认情况下不显示。要显示面板，请从主菜单中选择View，然后选择Show CSS Analyzer，如图11-4所示。
CSS分析器面板出现在主窗口底部，类似于图11-5所示。
该面板包括以下部分，其中大部分在图11-5中突出显示。
-
搜索文本字段：位于面板右上角。它使您能够筛选出要查看的特定属性。
-
CSS分析器菜单：位于搜索文本字段的右侧。单击下拉箭头可查看可用命令的菜单，如图11-6所示。
-
视图模式：允许您选择样式属性的显示格式。默认为表格视图。规则视图模式以CSS规则格式显示属性。文本视图模式以文本样式显示属性。
-
复制可样式路径：允许您复制样式路径文本字段中的当前值，并将其粘贴到您的CSS文件中以修改当前选定组件或其子元素的样式。
-
隐藏默认值属性：从视图中删除所有只有默认值的属性。具有非默认值的属性，如样式表和内联样式，仍然显示。显示默认值属性显示组件的所有属性。
-
拆分默认值：刷新属性的视图，为样式属性的默认值包括两列：API默认值和FX主题默认值。合并默认值命令将默认值组合为单列，这是默认设置。
-
-
可样式路径文本字段：位于面板左上角。当您单击路径中的箭头时，它使您能够发现子元素。您可以使用CSS分析器菜单复制该路径，并将路径粘贴到您的CSS文件中以分配新的样式值。
-
CSS选择模式按钮：位于搜索文本字段下方。这是打开CSS分析器时的默认模式。它允许您选择当前选定组件的子元素。在图11-5中，CSS选择模式按钮被选中。这使您能够选择内容面板中ScrollPane组件的底部水平滚动条。滚动条以黄色突出显示，表示它是当前选定的ScrollPane的子元素。相应地，可样式路径显示到当前选定元素的完整路径。此功能显示了如何为皮肤设置样式。
-
CSS选择模式按钮：位于CSS选择模式按钮旁边。这是标准的选择模式，允许您选择一个组件。
-
属性列：表格中的第一列。显示当前选定元素可用的所有样式属性。
-
默认列：显示API和JavaFX主题为样式属性提供的默认值。
-
检查器列：显示使用检查器面板设置的属性值。某些属性同时出现在检查器面板的属性部分和CSS分析器面板中。要编辑这些属性，将鼠标悬停在CSS分析器面板相应单元格中，并点击右上角的齿轮图标选择在检查器中显示。相应的属性在检查器面板的属性部分中用蓝色环标出。
-
样式表列：显示通过在检查器面板的属性部分的样式表文本视图中设置的属性值。列中包含该值来源的CSS文件的名称。您还可以点击单元格右上角的齿轮图标，选择打开命令，在默认的CSS编辑器中打开您的CSS文件。
-
内联样式列：显示通过检查器面板的属性部分的JavaFX CSS子部分中的样式文本视图设置的内联样式值。您可以使用单元格右上角的齿轮图标选择在检查器中显示命令，以在检查器面板中显示样式文本视图。
您可以从CSS文件中修改属性值。或者，您可以使用检查器面板的属性部分中的JavaFX CSS子部分来编辑CSS属性或使用Style属性来覆盖任何CSS属性。
当将CSS属性值分配给当前选定的GUI组件时，新样式会立即在内容面板中呈现。
要了解有关CSS分析器功能的更多信息，请使用以下步骤自定义Button组件，使其具有圆角，并将该样式用于随后添加到您的FXML布局中的所有按钮。
-
从库中拖动一个按钮到内容面板中。
你会看到CSS分析器显示了-fx-background-radius的值，如图11-7所示，作为按钮的CSS属性之一。
-
点击属性列中的-fx-background-radius属性名称，你将跳转到相应的在线API文档中，该文档位于
JavaFX CSS参考指南，其中提供了每个属性值的语法。 -
修改-fx-background-radius属性值。
-
创建一个CSS规则，以便将新的按钮样式应用于您添加到当前FXML布局中的所有按钮。
-
使用系统命令，在包含当前FXML布局的同一目录中创建一个空的CSS文件，例如
test.css。 -
在Inspector面板的属性部分，点击Stylesheets属性中的+按钮，如图11-8所示。
-
在添加样式表对话框中，导航到
test.css文件位置，选择它，然后点击打开将其添加到Stylesheets属性中。
您将看到test.css文件已添加到Stylesheets属性中。 -
通过点击Stylesheets属性中的向下箭头，选择打开test.css来编辑
test.css文件。 -
将以下CSS规则添加到
test.css文件中，并保存文件。 -
再次在Content面板中选择按钮。注意，在CSS分析器面板中，按钮现在继承了来自
test.css文件的CSS规则，因为按钮是AnchorPane组件的子级。由于它仍然具有内联样式值，该值具有优先权，并且是在Content面板中呈现的样式。如果您不需要更改此特定按钮的样式，可以从Inspector面板的属性部分中删除该样式值。
-
