【JavaFX设计自由度】：CSS支持让UI更灵活

目录
1. JavaFX概述和CSS基础

1.1 JavaFX简介
1.2 CSS在用户界面中的作用
1.3 CSS基础语法

2. CSS在JavaFX中的应用

2.1 CSS的基本语法和选择器

2.1.1 CSS的基本语法结构
2.1.2 选择器的种类和使用方式

2.2 JavaFX中的CSS类和伪类

2.2.1 JavaFX CSS类的定义和使用
2.2.2 JavaFX伪类的定义和使用

2.3 CSS样式在JavaFX中的继承和优先级

2.3.1 样式继承的概念和实现方式
2.3.2 样式优先级的规则和应用

总结

3. JavaFX CSS应用实践

3.1 基本UI组件的样式定制

3.1.1 控件样式的定制方法
3.1.2 窗口样式的定制方法

3.2 复杂UI布局的样式定制

3.2.1 使用CSS布局的概念和方法
3.2.2 实现复杂的界面布局案例

解锁专栏，查看完整目录1. JavaFX概述和CSS基础
1.1 JavaFX简介
JavaFX 是一个用于构建丰富的互联网应用程序 (RIA) 的 SDK，它为开发者提供了强大的UI组件库和一个高度可定制的样式系统。自 Java 8 起，JavaFX 成为了 Java 标准版的一部分，适用于创建跨平台桌面和移动应用程序。通过使用JavaFX，开发者能够使用Java编程语言，结合CSS（层叠样式表），来设计和实现应用程序的用户界面。
1.2 CSS在用户界面中的作用
CSS 在JavaFX中的应用，使得UI的样式定义与内容的结构相分离，增强了程序的可维护性和可扩展性。通过定义不同的样式规则，开发者能够快速修改应用程序的外观，实现主题变换、元素样式的统一管理，以及动态的用户交互效果。
1.3 CSS基础语法
在JavaFX中使用的CSS基础语法遵循标准的CSS规则，例如：
.button { -fx-background-color: #409eff; -fx-text-fill: white; -fx-font-size: 14px;}登录后复制
这段代码为所有类名为.button的JavaFX控件设置了背景颜色、文字颜色以及字体大小。通过CSS，可以精细地控制UI组件的外观，从而使得应用程序具备更加吸引用户的界面。
2. CSS在JavaFX中的应用
2.1 CSS的基本语法和选择器
2.1.1 CSS的基本语法结构
在JavaFX中，CSS 用于定义和控制用户界面的样式。CSS的基本语法结构由三个主要部分组成：选择器、属性和值。选择器用于指定哪些元素将应用样式规则，属性定义了需要改变的样式特征，而值则确定了属性的具体表现。
一个简单的CSS规则看起来如下：
selector { property: value;}登录后复制
例如，如果我们想要设置所有按钮的背景颜色为蓝色，我们可以写成：
.button { -fx-background-color: blue;}登录后复制
在这个例子中，.button 是选择器，-fx-background-color 是属性，而 blue 是值。在JavaFX中，CSS属性通常以 -fx- 开头，以区分常规的CSS属性。
2.1.2 选择器的种类和使用方式
选择器在JavaFX CSS中可以非常灵活和强大。它们可以是元素类型、ID、类或属性选择器，并且支持伪类和伪元素。常用的选择器包括：

类型选择器：如 Button 选择所有类型为 Button 的节点。
类选择器：如 .primaryButton 选择所有具有 primaryButton 类的节点。
ID选择器：如 #okButton 选择具有 okButton ID的节点。
属性选择器：如 [text="OK"] 选择文本属性为 “OK” 的节点。
伪类选择器：如 :hover 用于选择鼠标悬停在其上的节点。

使用组合选择器可以进一步精细控制应用的样式，例如：
.button:hover { -fx-background-color: green;}登录后复制
这里，button:hover 是一个伪类选择器组合，表示当鼠标悬停在按钮上时，按钮的背景颜色变为绿色。
2.2 JavaFX中的CSS类和伪类
2.2.1 JavaFX CSS类的定义和使用
CSS类在JavaFX中用于封装一组样式属性，并且可以在多个节点之间复用。类的定义在样式表中进行，随后可以在JavaFX节点中通过 setStyle 方法或直接在 FXML 中引用。
定义一个CSS类的例子：
.my-class { -fx-background-color: lightgray; -fx-font-size: 14pt;}登录后复制
在JavaFX节点中应用这个类：
Button okButton = new Button("OK");okButton.setStyle("-fx-class: my-class;");登录后复制
或者在FXML文件中直接引用：
<Button text="OK" styleClass="my-class" />登录后复制
通过这种方式，多个控件可以共享相同的视觉样式，而无需为每个控件单独设置样式。
2.2.2 JavaFX伪类的定义和使用
伪类在JavaFX CSS中用于描述元素的特定状态，比如悬停、选中、禁用等。定义伪类允许开发者为这些状态提供不同的样式规则。
例如，定义一个按钮在悬停时的样式：
.button:hover { -fx-background-color: orange;}登录后复制
应用伪类的条件可以非常具体。例如，只在按钮的文本为 “Help” 且鼠标悬停时改变背景颜色：
.button[text="Help"]:hover { -fx-background-color: yellow;}登录后复制
伪类为用户界面提供了一种动态反馈的方式，改善用户体验。
2.3 CSS样式在JavaFX中的继承和优先级
2.3.1 样式继承的概念和实现方式
JavaFX中的CSS样式可以被继承。这意味着某些样式属性可以传递给子节点，除非被明确覆盖。这可以帮助减少冗余样式定义，使得样式表更加简洁。
比如，为一个窗口定义背景色，并希望所有子节点也继承这个背景色：
.window { -fx-background-color: white;}登录后复制
所有子节点，除非另有定义，都将继承窗口的背景色。
2.3.2 样式优先级的规则和应用
当多个样式规则应用于同一个节点时，CSS具有一个优先级规则来决定哪些样式将被使用。JavaFX遵循标准的CSS优先级规则：

内联样式 (Inline style) > 内部样式表 (Internal style sheet) > 外部样式表 (External style sheet)
具体选择器优先于通用选择器
伪类和伪元素具有比普通类更高的优先级
后声明的样式覆盖先前声明的样式

优先级是通过比较选择器的权重来决定的，权重由选择器的类型决定：

内联样式（直接在JavaFX节点上设置）：权重最高，值为1000
ID选择器：权重为100
类选择器和伪类：权重为10
类型选择器（元素类型）和伪元素：权重为1

当出现样式冲突时，拥有最高权重的选择器决定最终的样式。例如，如果一个按钮同时被 .button 和 #myButton 选择器选中，ID选择器的样式将优先被应用，因为它的权重更高。
总结
在本章节中，我们了解了CSS在JavaFX中的基本语法和选择器的应用，以及如何定义和使用JavaFX中的CSS类和伪类。此外，还探讨了样式继承和优先级规则，这对于掌握JavaFX CSS至关重要。通过这些基础知识，我们能够更好地定制和优化JavaFX应用程序的用户界面。
3. JavaFX CSS应用实践
3.1 基本UI组件的样式定制
3.1.1 控件样式的定制方法
在JavaFX中，控件样式的定制是创建美观用户界面的基础。CSS允许开发者定义广泛的设计元素，如颜色、字体、背景、边框等。要定制控件样式，首先要理解控件的类层次结构，这是因为每个控件都可能继承自一个或多个父类，它们可能已经具有一些默认的样式。
以下是一个简单的代码示例，演示如何为一个Button控件定制样式：
Button button = new Button("Click me");button.setStyle("-fx-background-color: #4CAF50; -fx-text-fill: white;");登录后复制
在上述代码中，我们设置了按钮的背景颜色和文本颜色。CSS属性使用标准的-fx-前缀，这是JavaFX中用于所有样式的特定前缀。通过这种方式，我们可以为JavaFX应用程序中的任何控件应用样式。
3.1.2 窗口样式的定制方法
窗口样式定制通常涉及到场景图的根元素，即Stage。对窗口样式的定制包括改变窗口的大小、标题、背景颜色等。这可以通过设置Scene对象的样式来完成。
Stage stage = new Stage();stage.setTitle("JavaFX CSS Example");stage.setScene(new Scene(new BorderPane(), 300, 200));// 设置窗口背景色stage.getScene().getRoot().setStyle("-fx-background-color: #778899;");登录后复制
在这个例子中，我们为一个简单的窗口设置了标题，并改变了其背景颜色。需要注意的是，窗口背景通常应用到Scene的根元素上，而不是Stage本身。
3.2 复杂UI布局的样式定制
3.2.1 使用CSS布局的概念和方法
JavaFX提供了丰富的布局容器，如BorderPane, HBox, VBox等，它们可以用来构建复杂的用户界面。使用CSS布局可以让我们对这些容器进行细致的样式定制。布局的定制可能包括调整间距、大小、对齐方式等。
下面是如何使用CSS来调整HBox中元素的间距和对齐方式的一个例子：
HBox hbox = new HBox(10); // 设置控件间的水平间隔为10hbox.setAlignment(Pos.CENTER);hbox.getChildren().addAll(new Button("Button 1"), new Button("Button 2"));// 设置HBox的样式hbox.setStyle("-fx-background-color: #E0E0E0; -fx-alignment: center; -fx-spacing: 20;");登录后复制
通过上述代码，我们创建了一个具有10像素间距和居中对齐的水平布局。我们还为HBox设置了背景颜色和控件之间的额外间距。
3.2.2 实现复杂的界面布局案例
为了更好地展示如何应用复杂的样式定制，我们可以设计一个具体的应用场景。假设我们要设计一个登录界面，包含用户名和密码输入框、登录按钮以及忘记密码的链接。这个布局可以使用GridPane来实现，以便于更好地控制每个元素的位置。
GridPane grid = new GridPane();grid.setHgap(10);grid.setVgap(10);// 添加标签和文本输入框grid.add(new Label("Username:"), 0, 0);TextField 登录后复制