143. JavaFX 与 CSS 样式

原创

于 2025-06-01 00:10:33 发布 · 931 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #java #开发语言 #编程基础

一、JavaFX CSS 基础概念

JavaFX CSS 的作用

JavaFX CSS（层叠样式表）用于定义 JavaFX 应用程序的视觉样式，包括控件的颜色、字体、边框、背景等。它的核心作用包括：

样式与逻辑分离：将界面样式与业务逻辑代码解耦，提升代码可维护性。
统一风格管理：通过集中定义样式，确保应用程序整体视觉一致性。
动态换肤：运行时修改 CSS 文件即可实现主题切换，无需重新编译代码。

JavaFX CSS 的特点

1. 与 Web CSS 的异同

相似点：语法基本兼容（如选择器、属性名），支持 class 和 id。
差异点：
- 属性前缀：JavaFX 使用 -fx-（如 -fx-background-color）。
- 特有属性：支持 JavaFX 专属属性（如 -fx-effect 用于阴影）。

2. 选择器类型

类型选择器：按控件类名（如 Button { ... }）。
类选择器：通过 .style-class（如 .my-button { ... }）。
ID 选择器：通过 #id（如 #submit-btn { ... }）。

3. 样式优先级

遵循层叠规则：

内联样式（setStyle()） > 外部 CSS 文件。
后加载的 CSS 覆盖先加载的。

4. 常用属性示例

.button {
   
   
    -fx-background-color: #4CAF50;
    -fx-text-fill: white;
    -fx-font-size: 14px;
    -fx-border-radius: 5px;
}

注意事项

性能优化：避免过度使用复杂选择器（如后代选择器）。
兼容性：部分 Web CSS 属性（如 flexbox）不适用于 JavaFX。
调试工具：使用 ScenicView 工具实时检查控件样式。

示例代码（加载 CSS）

// 在 Scene 中加载 CSS 文件
Scene scene = new Scene(root);
scene.getStylesheets().add("styles/main.css");

JavaFX CSS 与传统 Web CSS 的区别

1. 目标平台与渲染引擎

JavaFX CSS：专为 JavaFX 应用程序设计，由 JavaFX 渲染引擎（Prism）处理，主要用于桌面和嵌入式应用。
Web CSS：为浏览器设计，由浏览器引擎（如 Blink、WebKit）渲染，用于网页和 Web 应用。

2. 选择器支持

JavaFX CSS：支持基本选择器（类、ID、类型），但不支持伪类（如 :hover）和伪元素（如 ::before）。
Web CSS：支持完整的选择器体系，包括伪类、伪元素、属性选择器等。

3. 属性差异

JavaFX CSS：使用特定于 JavaFX 的属性，如 -fx-background-color（而非 background-color）、-fx-font-size 等。
Web CSS：遵循 W3C 标准属性（如 background-color、font-size）。

4. 布局与盒模型

JavaFX CSS：布局由 JavaFX 布局管理器（如 HBox、VBox）控制，CSS 主要用于样式修饰，不直接参与布局计算。
Web CSS：盒模型（margin、padding、border）直接影响布局，支持 Flexbox、Grid 等现代布局方式。

5. 单位系统

JavaFX CSS：支持像素（px）、百分比（%）和 em，但不支持 rem、vh/vw 等相对单位。
Web CSS：支持所有标准单位（px、%、em、rem、vh/vw 等）。

6. 动画与过渡

JavaFX CSS：通过 JavaFX API（如 Transition 类）实现动画，CSS 仅支持简单状态切换。
Web CSS：支持 @keyframes 和 transition 实现复杂动画效果。

7. 示例代码对比

/* JavaFX CSS */
.button {
   
   
    -fx-background-color: #3498db;
    -fx-text-fill: white;
    -fx-font-size: 14px;
}

/* Web CSS */
.button {
   
   
    background-color: #3498db;
    color: white;
    font-size: 14px;
    transition: background-color 0.3s;
}

8. 注意事项

兼容性：JavaFX CSS 属性以 -fx- 前缀开头，直接使用 Web CSS 属性无效。
功能限制：JavaFX CSS 不支持媒体查询（@media）或自定义变量（var()）。

JavaFX CSS 样式表的基本语法

JavaFX CSS 样式表用于定义 JavaFX 应用程序中 UI 控件的外观和样式。其语法类似于标准 CSS，但针对 JavaFX 控件进行了专门优化。

基本结构

JavaFX CSS 样式表由 选择器 和 声明块 组成：

/* 选择器 */
.selector {
   
   
    /* 声明块 */
    -fx-property: value;
    -fx-another-property: value;
}

选择器类型

类型选择器：基于控件类型（类名）

Button {
     
     
    -fx-background-color: #3498db;
}

类选择器：基于 styleClass 属性（以 . 开头）

.my-button {
     
     
    -fx-font-size: 14px;
}

ID 选择器：基于 id 属性（以 # 开头）

#submit-button {
     
     
    -fx-text-fill: white;
}

伪类选择器：基于控件状态（以 : 开头）

Button:hover {
     
     
    -fx-background-color: #2980b9;
}

常用属性命名规则

JavaFX CSS 属性通常以 -fx- 前缀开头，例如：

-fx-background-color
-fx-text-fill
-fx-font-size
-fx-border-width

值类型

颜色：
- 十六进制：#RRGGBB 或 #RGB
- RGB/RGBA：rgb(red, green, blue) 或 rgba(red, green, blue, alpha)
- 颜色名称：red, blue 等
尺寸：
- 像素：px（如 12px）
- 点：pt
- 百分比：%
字体：
- 字体族："Arial", sans-serif
- 字体大小：14px
- 字体粗细：bold, normal

示例代码

/* 类型选择器 */
Label {
   
   
    -fx-font-size: 16px;
    -fx-text-fill: #2c3e50;
}

/* 类选择器 */
.warning-text {
   
   
    -fx-text-fill: #e74c3c;
    -fx-font-weight: bold;
}

/* ID 选择器 */
#main-title {
   
   
    -fx-font-size: 24px;
    -fx-font-style: italic;
}

/* 伪类选择器 */
Button:pressed {
   
   
    -fx-background-color: #2c3e50;
}

/* 多属性设置 */
.text-field {
   
   
    -fx-background-color: #ecf0f1;
    -fx-border-color: #bdc3c7;
    -fx-border-width: 1px;
    -fx-border-radius: 3px;
}

注意事项

JavaFX CSS 与 Web CSS 不完全兼容，属性名前需要加 -fx- 前缀
某些 JavaFX 控件有特定的样式类（如 .button, .text-input）
样式优先级：ID 选择器 > 类选择器 > 类型选择器
可以使用 !important 提高优先级（但不推荐滥用）

JavaFX CSS 选择器类型

JavaFX 使用 CSS 选择器来定位和样式化场景图中的节点。以下是 JavaFX 支持的 CSS 选择器类型：

1. 类型选择器（Type Selector）

定义：通过节点的 JavaFX 类名（如 Button、Label）来选择元素。

示例：

Button {
     
     
    -fx-background-color: #4CAF50;
}

注意：类名区分大小写，必须与 JavaFX 类的名称完全一致。

2. ID 选择器（ID Selector）

定义：通过节点的 id 属性（setId() 设置）来选择特定节点。

示例：

#submitButton {
     
     
    -fx-font-weight: bold;
}

注意：id 在场景图中应唯一，否则可能覆盖样式。

3. 类选择器（Class Selector）

定义：通过节点的样式类（getStyleClass().add() 添加）选择元素。

示例：

.warning {
     
     
    -fx-text-fill: red;
}

注意：一个节点可以有多个样式类，用空格分隔（如 styleClass="warning highlight"）。

4. 伪类选择器（Pseudo-class Selector）

定义：根据节点的状态（如悬停、禁用）动态应用样式。

示例：

Button:hover {
     
     
    -fx-scale-x: 1.05;
}

常见伪类：:hover、:pressed、:disabled、:focused。

5. 子选择器（Child Selector）

定义：选择特定父节点的直接子节点。

示例：

VBox > Button {
     
     
    -fx-margin: 5px;
}

注意：仅匹配直接子节点，不匹配嵌套更深的后代节点。

6. 后代选择器（Descendant Selector）

定义：选择父节点内的所有匹配后代节点（不限层级）。

示例：

HBox Label {
     
     
    -fx-font-style: italic;
}

7. 属性选择器（Attribute Selector）

定义：根据节点的属性（如 text、visible）选择元素。

示例：

Button[text="OK"] {
     
     
    -fx-background-color: green;
}

8. 并集选择器（Grouping Selector）

定义：通过逗号分隔多个选择器，共享相同样式规则。

示例：

Button, Label {
     
     
    -fx-font-family: "Arial";
}

优先级规则

顺序：ID > 类/伪类 > 类型 > 继承样式。
覆盖：更具体的选择器优先级更高（如 #id 覆盖 .class）。

示例代码

// Java 代码中设置节点 ID 和样式类
Button btn = new Button("Submit");
btn.setId("submitButton");
btn.getStyleClass().add("primary");

/* CSS 文件示例 */
.primary {
   
   
    -fx-background-color: #2196F3;
}
#submitButton:hover {
   
   
    -fx-opacity: 0.8;
}

JavaFX CSS 属性命名规范

基本规则

前缀规则：所有 JavaFX 专属 CSS 属性以 -fx- 开头（例如 -fx-background-color）。
命名风格：采用小写字母和连字符组合（kebab-case），例如 -fx-font-size。
与标准 CSS 的区别：标准 CSS 属性（如 font-size）在 JavaFX 中无效，必须使用 -fx-font-size。

常见属性分类

布局属性

-fx-alignment: 控制子节点对齐方式（如 CENTER、TOP_LEFT）。
-fx-padding: 设置内边距（如 5px 10px）。

外观属性

-fx-background-color: 背景色（支持线性渐变，如 linear-gradient(to right, #FF0000, #00FF00)）。
-fx-border-color: 边框颜色（可多方向设置，如 -fx-border-color: red green blue yellow）。

文本属性

-fx-font-family: 字体（如 "Arial"）。
-fx-text-fill: 文字颜色（如 #333333）。

状态伪类

:hover: 鼠标悬停样式。
:pressed: 按下状态样式。

.button:hover {
   
   
    -fx-background-color: #DDDDDD;
}

注意事项

兼容性：JavaFX CSS 是标准 CSS 的子集，部分属性（如 display）不支持。
优先级：内联样式 > 外部 CSS 文件 > 默认样式。
单位：推荐使用 px（像素）或 em，避免百分比单位（部分属性不支持）。

示例代码

/* 自定义按钮样式 */
.my-button {
   
   
    -fx-background-color: #4CAF50;
    -fx-text-fill: white;
    -fx-font-size: 14px;
    -fx-padding: 8px 16px;
}
.my-button:hover {
   
   
    -fx-background-color: #45a049;
}

JavaFX CSS 样式优先级规则

定义

JavaFX CSS 样式优先级规则决定了当多个样式同时作用于一个节点时，最终应用哪个样式。优先级由高到低依次为：内联样式 > 用户代理样式表 > 父样式表 > 默认样式表。

优先级层次

内联样式（最高优先级）
直接在代码中通过 setStyle() 方法设置的样式。
```
button.setStyle("-fx-background-color: red;");
```
用户样式表（.css 文件）
通过 scene.getStylesheets().add() 加载的外部 CSS 文件。
```
scene.getStylesheets().add("styles.css");
```
父样式表（继承的样式）
从父节点继承的样式（如 Parent 或 Scene 的样式）。
默认样式表（最低优先级）
JavaFX 内置的默认样式（如 modena.css）。

选择器优先级

在同一层次中，CSS 选择器的优先级由高到低为：

ID 选择器（如 #myButton）
类选择器（如 .button-style）
类型选择器（如 Button）

示例

假设有以下 CSS 和代码：

/* styles.css */
.button-style {
   
    -fx-background-color: blue; }
#myButton {
   
    -fx-background-color: green; }

Button button = new Button("Click");
button.setId("myButton");
button.getStyleClass().add("button-style");
button.setStyle("-fx-background-color: red;");

最终按钮背景色为 red（内联样式优先级最高）。

注意事项

!important 关键字
在 CSS 中可用 !important 强制覆盖优先级，但 JavaFX CSS 不支持此特性。
样式冲突
同一优先级下，后定义的样式会覆盖前者。
继承限制
并非所有属性都支持继承（如 -fx-background-color 不继承，需显式设置）。

JavaFX CSS 注释方式

单行注释

使用 /* 和 */ 包裹注释内容，仅支持单行注释。
示例：

/* 这是一个单行注释 */
.button {
   
   
    -fx-background-color: #3498db; /* 按钮背景色 */
}

注意事项

不支持多行注释：JavaFX CSS 不识别 /* ... */ 跨行注释，每行需单独注释。
错误示例：
```
/* 这是
多行注释（无效） */
```

注释位置：可放在样式规则外部或行尾，但不可打断属性值。
错误示例：

.label {
     
     
    -fx-text-fill: red /* 颜色 */ blue; /* 无效！ */
}

实际应用场景

样式说明：解释复杂样式的用途。

/* 主标题样式：字号20，加粗 */
.title {
     
     
    -fx-font-size: 20px;
    -fx-font-weight: bold;
}

临时禁用样式：通过注释快速调试。

/* 
.button:hover {
    -fx-effect: dropshadow(3px, 3px, 5px, #888);
}
*/

二、JavaFX CSS 样式应用

加载 CSS 文件的方法

在 JavaFX 中，可以通过以下方式加载 CSS 文件来为界面元素设置样式：

1. 通过 Scene 加载

Scene scene = new Scene(root);
scene.getStylesheets().add("style.css"); // 加载同级目录下的 style.css

2. 通过 Parent 节点加载

Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
root.getStylesheets().add(getClass().getResource("style.css").toExternalForm());

3. 通过代码动态加载

Button btn = new Button("Click");
btn.getStyleClass().add("my-button"); // 对应 CSS 中的 .my-button 类

注意事项

路径问题：
- 相对路径从项目根目录开始
- 使用 getResource() 时路径相对于当前类所在包
文件位置：
- 推荐将 CSS 文件放在 resources 目录
- 确保构建时 CSS 文件被正确复制到输出目录
加载顺序：
- 后加载的样式会覆盖先加载的同名样式
- 可通过 !important 强制优先级

示例 CSS 文件

/* style.css */
.root {
   
   
    -fx-background-color: #f0f0f0;
}

.my-button {
   
   
    -fx-background-color: #4CAF50;
    -fx-text-fill: white;
}

.my-button:hover {
   
   
    -fx-background-color: #45a049;
}

内联样式设置方式

概念定义

内联样式（Inline Style）是直接将 CSS 样式规则写在 JavaFX 组件的 style 属性中的方式。它通过 setStyle() 方法或 XML 属性直接应用，优先级高于外部样式表和内部样式表。

使用场景

快速测试：临时调试或验证样式效果。
动态修改：通过代码运行时调整样式（如用户交互时改变颜色）。
覆盖全局样式：针对特定组件需要例外样式时。

语法格式

// Java代码示例
button.setStyle("-fx-background-color: #FF5733; -fx-text-fill: white;");

或 FXML 中：

<Button text="确定" style="-fx-background-color: #FF5733; -fx-text-fill: white;"/>

注意事项

优先级最高：内联样式会覆盖外部CSS和Scene级别的样式。
维护性差：大量使用会导致代码混杂，建议复杂样式使用外部CSS。
性能影响：频繁动态修改内联样式可能触发多次布局计算。

示例代码

// 动态切换按钮样式
Button btn = new Button("切换状态");
btn.setOnAction(e -> {
   
   
    if (btn.getStyle().contains("red")) {
   
   
        btn.setStyle("-fx-background-color: green;");
    } else {
   
   
        btn.setStyle("-fx-background-color: red;");
    }
});

与CSS选择器的区别

特性	内联样式	外部CSS
作用范围	单个组件	所有匹配选择器的组件
优先级	最高	较低
可维护性	差	好
动态修改能力	直接通过代码修改	需重新加载样式表

动态修改样式的方法

在 JavaFX 中，可以通过代码动态修改控件的样式，实现运行时样式切换或响应式设计。以下是几种常见方式：

使用 `setStyle()` 方法

Button btn = new Button("Click Me");
// 直接设置内联样式
btn.setStyle("-fx-background-color: #FF5733; -fx-text-fill: white;");

特点：

优先级高于外部 CSS 文件
适用于临时样式覆盖
语法与 CSS 相同，但需要以字符串形式传递

动态切换样式类

// 定义CSS类
.toggle-button {
   
   
    -fx-background-color: #3498db;
}
.toggle-button:selected {
   
   
    -fx-background-color: #e74c3c;
}

// Java代码
ToggleButton toggleBtn = new ToggleButton("Toggle");
toggleBtn.getStyleClass().add("toggle-button");
toggleBtn.selectedProperty().addListener((obs, oldVal, newVal) -> {
   
   
    if(newVal) {
   
   
        toggleBtn.getStyleClass().add("selected");
    } else {
   
   
        toggleBtn.getStyleClass().remove("selected");
    }
});

使用 `lookup()` 查找样式属性

// 获取当前应用的背景色
Region region = (Region) node;
Paint bg = (Paint

最低0.47元/天解锁文章

143. JavaFX 与 CSS 样式

一、JavaFX CSS 基础概念

JavaFX CSS 的作用

JavaFX CSS 的特点

1. 与 Web CSS 的异同

2. 选择器类型

3. 样式优先级

4. 常用属性示例

注意事项

示例代码（加载 CSS）

JavaFX CSS 与传统 Web CSS 的区别

1. 目标平台与渲染引擎

2. 选择器支持

3. 属性差异

4. 布局与盒模型

5. 单位系统

6. 动画与过渡

7. 示例代码对比

8. 注意事项

JavaFX CSS 样式表的基本语法

基本结构

选择器类型

常用属性命名规则

值类型

示例代码

注意事项

JavaFX CSS 选择器类型

1. 类型选择器（Type Selector）

2. ID 选择器（ID Selector）

3. 类选择器（Class Selector）

4. 伪类选择器（Pseudo-class Selector）

5. 子选择器（Child Selector）

6. 后代选择器（Descendant Selector）

7. 属性选择器（Attribute Selector）

8. 并集选择器（Grouping Selector）

优先级规则

示例代码

JavaFX CSS 属性命名规范

基本规则

常见属性分类

布局属性

外观属性

文本属性

状态伪类

注意事项

示例代码

JavaFX CSS 样式优先级规则

定义

优先级层次

选择器优先级

示例

注意事项

JavaFX CSS 注释方式

单行注释

注意事项

实际应用场景

二、JavaFX CSS 样式应用

加载 CSS 文件的方法

1. 通过 Scene 加载

2. 通过 Parent 节点加载

3. 通过代码动态加载

注意事项

示例 CSS 文件

内联样式设置方式

概念定义

使用场景

语法格式

注意事项

示例代码

与CSS选择器的区别

动态修改样式的方法

使用 setStyle() 方法

动态切换样式类

使用 lookup() 查找样式属性

使用 `setStyle()` 方法

使用 `lookup()` 查找样式属性