一、JavaFX CSS 概述JavaFX 支持使用 CSS 来美化界面与 Web CSS 类似但有自己的特性样式属性以-fx-前缀开头支持伪类:hover、:focused、:pressed支持类选择器.button、.label支持 ID 选择器#myButton1.1 三种应用 CSS 的方式方式适用场景代码示例内联样式单个控件临时样式button.setStyle(-fx-background-color: red;)代码中加载程序内动态切换scene.getStylesheets().add(style.css)FXML 中引用界面与样式分离VBox stylesheetsstyle.css二、JavaFX CSS 核心属性2.1 常用样式属性速查属性说明示例-fx-background-color背景颜色#2196F3,linear-gradient(to bottom, #fff, #eee)-fx-text-fill文字颜色white,#333-fx-font-size字体大小14px,16px-fx-font-family字体Consolas,Microsoft YaHei-fx-padding内边距10px,5 10 5 10-fx-border-color边框颜色#ccc-fx-border-radius边框圆角5px,50%-fx-background-radius背景圆角8px-fx-effect阴影效果dropshadow(gaussian, rgba(0,0,0,0.3), 10, 0, 0, 2)三、按钮样式实战3.1 基础样式/* style.css */.button{-fx-background-color:#2196F3;-fx-text-fill:white;-fx-font-size:14px;-fx-padding:8 20;-fx-background-radius:5px;-fx-cursor:hand;}.button:hover{-fx-background-color:#1976D2;}.button:pressed{-fx-background-color:#1565C0;-fx-translate-y:1px;}.button:disabled{-fx-background-color:#ccc;-fx-text-fill:#999;}3.2 多种按钮风格/* 成功按钮 */.button-success{-fx-background-color:#4CAF50;}.button-success:hover{-fx-background-color:#43A047;}/* 危险按钮 */.button-danger{-fx-background-color:#f44336;}.button-danger:hover{-fx-background-color:#e53935;}/* 警告按钮 */.button-warning{-fx-background-color:#FF9800;}.button-warning:hover{-fx-background-color:#F57C00;}/* 圆角大按钮 */.button-round{-fx-background-radius:25px;-fx-padding:10 30;}3.3 运行效果FX Experience 官方展示的 JavaFX CSS 按钮样式集合包含 Green、Round Red、Bevel Grey、Glass Grey、Shiny Orange、Dark Blue、Record Sales、Rich Blue、Big Yellow 等多种风格在浅色和深色背景下对比展示。四、TableView 样式美化4.1 表格整体样式/* 表格整体 */.table-view{-fx-background-color:transparent;-fx-border-color:#e0e0e0;-fx-border-radius:5px;}/* 表头 */.table-view .column-header{-fx-background-color:linear-gradient(to bottom,#fafafa,#f0f0f0);-fx-border-color:transparent #e0e0e0 #e0e0e0 transparent;-fx-border-width:0 1 1 0;-fx-padding:10 5;}.table-view .column-header .label{-fx-font-weight:bold;-fx-text-fill:#333;}/* 行样式 */.table-row-cell{-fx-background-color:white;-fx-border-color:transparent transparent #f0f0f0 transparent;}.table-row-cell:odd{-fx-background-color:#fafafa;}.table-row-cell:hover{-fx-background-color:#e3f2fd;}.table-row-cell:selected{-fx-background-color:#bbdefb;-fx-text-fill:#1565C0;}五、完整实战浅色主题与深色主题5.1 浅色主题light-theme.css/* 根节点 */.root{-fx-background-color:#f5f5f5;-fx-font-family:Microsoft YaHei,Segoe UI,sans-serif;-fx-font-size:14px;}/* 标签 */.label{-fx-text-fill:#333;}.label-title{-fx-font-size:24px;-fx-font-weight:bold;-fx-text-fill:#1565C0;}.label-subtitle{-fx-font-size:14px;-fx-text-fill:#666;}/* 按钮 */.button{-fx-background-color:#2196F3;-fx-text-fill:white;-fx-padding:8 20;-fx-background-radius:5px;-fx-cursor:hand;-fx-effect:dropshadow(gaussian,rgba(33,150,243,0.3),8,0,0,2);}.button:hover{-fx-background-color:#1976D2;-fx-effect:dropshadow(gaussian,rgba(33,150,243,0.5),12,0,0,4);}.button:pressed{-fx-background-color:#1565C0;-fx-translate-y:1px;}.button-secondary{-fx-background-color:white;-fx-text-fill:#2196F3;-fx-border-color:#2196F3;-fx-border-radius:5px;-fx-border-width:1;-fx-effect:none;}.button-secondary:hover{-fx-background-color:#e3f2fd;}/* 输入框 */.text-field, .password-field, .text-area{-fx-background-color:white;-fx-border-color:#ddd;-fx-border-radius:5px;-fx-padding:8 10;-fx-background-radius:5px;}.text-field:focused, .password-field:focused, .text-area:focused{-fx-border-color:#2196F3;-fx-effect:dropshadow(gaussian,rgba(33,150,243,0.2),8,0,0,0);}/* 菜单栏 */.menu-bar{-fx-background-color:white;-fx-border-color:transparent transparent #e0e0e0 transparent;}.menu:hover, .menu:showing{-fx-background-color:#e3f2fd;}.menu-item:hover{-fx-background-color:#e3f2fd;}/* 面板 */.panel{-fx-background-color:white;-fx-background-radius:8px;-fx-effect:dropshadow(gaussian,rgba(0,0,0,0.08),12,0,0,2);-fx-padding:20;}/* 导航栏 */.nav-panel{-fx-background-color:white;-fx-border-color:transparent #e0e0e0 transparent transparent;}.nav-button{-fx-background-color:transparent;-fx-text-fill:#666;-fx-padding:10 15;-fx-background-radius:5px;-fx-alignment:CENTER_LEFT;-fx-effect:none;}.nav-button:hover{-fx-background-color:#f5f5f5;-fx-text-fill:#333;}.nav-button:selected{-fx-background-color:#e3f2fd;-fx-text-fill:#2196F3;}/* 状态栏 */.status-bar{-fx-background-color:white;-fx-border-color:#e0e0e0 transparent transparent transparent;-fx-padding:5 15;}/* TabPane */.tab-pane .tab-header-area{-fx-padding:5 10 0 10;}.tab{-fx-background-color:transparent;-fx-padding:8 15;}.tab:selected{-fx-background-color:white;-fx-border-color:transparent transparent #2196F3 transparent;-fx-border-width:0 0 2 0;}.tab-label{-fx-text-fill:#666;}.tab:selected .tab-label{-fx-text-fill:#2196F3;-fx-font-weight:bold;}5.2 深色主题dark-theme.css/* 根节点 */.root{-fx-background-color:#1e1e1e;-fx-font-family:Microsoft YaHei,Segoe UI,sans-serif;-fx-font-size:14px;}/* 标签 */.label{-fx-text-fill:#e0e0e0;}.label-title{-fx-font-size:24px;-fx-font-weight:bold;-fx-text-fill:#90caf9;}.label-subtitle{-fx-font-size:14px;-fx-text-fill:#999;}/* 按钮 */.button{-fx-background-color:#2196F3;-fx-text-fill:white;-fx-padding:8 20;-fx-background-radius:5px;-fx-cursor:hand;}.button:hover{-fx-background-color:#42a5f5;}.button:pressed{-fx-background-color:#1976D2;}.button-secondary{-fx-background-color:transparent;-fx-text-fill:#90caf9;-fx-border-color:#90caf9;-fx-border-radius:5px;-fx-border-width:1;}.button-secondary:hover{-fx-background-color:rgba(144,202,249,0.1);}/* 输入框 */.text-field, .password-field, .text-area{-fx-background-color:#2d2d2d;-fx-border-color:#444;-fx-border-radius:5px;-fx-padding:8 10;-fx-text-fill:#e0e0e0;-fx-background-radius:5px;}.text-field:focused, .password-field:focused, .text-area:focused{-fx-border-color:#2196F3;}/* 菜单栏 */.menu-bar{-fx-background-color:#252526;-fx-border-color:transparent transparent #333 transparent;}.menu:hover, .menu:showing{-fx-background-color:#2a2d2e;}.menu-item{-fx-background-color:#252526;}.menu-item:hover{-fx-background-color:#094771;}/* 面板 */.panel{-fx-background-color:#252526;-fx-background-radius:8px;-fx-padding:20;}/* 导航栏 */.nav-panel{-fx-background-color:#252526;-fx-border-color:transparent #333 transparent transparent;}.nav-button{-fx-background-color:transparent;-fx-text-fill:#999;-fx-padding:10 15;-fx-background-radius:5px;-fx-alignment:CENTER_LEFT;}.nav-button:hover{-fx-background-color:#2a2d2e;-fx-text-fill:#e0e0e0;}.nav-button:selected{-fx-background-color:#094771;-fx-text-fill:white;}/* 状态栏 */.status-bar{-fx-background-color:#252526;-fx-border-color:#333 transparent transparent transparent;-fx-padding:5 15;}/* TableView */.table-view{-fx-background-color:transparent;-fx-border-color:#333;}.table-view .column-header{-fx-background-color:#2d2d2d;-fx-border-color:transparent #333 #333 transparent;}.table-view .column-header .label{-fx-text-fill:#e0e0e0;}.table-row-cell{-fx-background-color:#1e1e1e;-fx-border-color:transparent transparent #333 transparent;}.table-row-cell:odd{-fx-background-color:#252526;}.table-row-cell:hover{-fx-background-color:#2a2d2e;}.table-row-cell:selected{-fx-background-color:#094771;}/* TabPane */.tab-pane .tab-header-area{-fx-padding:5 10 0 10;}.tab{-fx-background-color:transparent;-fx-padding:8 15;}.tab:selected{-fx-background-color:#1e1e1e;-fx-border-color:transparent transparent #2196F3 transparent;-fx-border-width:0 0 2 0;}.tab-label{-fx-text-fill:#999;}.tab:selected .tab-label{-fx-text-fill:#90caf9;-fx-font-weight:bold;}六、Java 代码中应用 CSS6.1 加载外部 CSS 文件importjavafx.scene.Scene;publicclassThemeAppextendsApplication{privatebooleanisDarkThemefalse;Overridepublicvoidstart(StageprimaryStage)throwsException{ParentrootFXMLLoader.load(getClass().getResource(/main.fxml));ScenescenenewScene(root);// 加载浅色主题scene.getStylesheets().add(getClass().getResource(/light-theme.css).toExternalForm());primaryStage.setScene(scene);primaryStage.show();}/** * 切换主题 */privatevoidtoggleTheme(Scenescene){scene.getStylesheets().clear();if(isDarkTheme){scene.getStylesheets().add(getClass().getResource(/light-theme.css).toExternalForm());}else{scene.getStylesheets().add(getClass().getResource(/dark-theme.css).toExternalForm());}isDarkTheme!isDarkTheme;}}6.2 FXML 中引用 CSSVBoxstylesheetslight-theme.cssstyleClassroot!-- 子节点会自动应用样式 --/VBox6.3 代码中动态设置样式类ButtonbtnnewButton(主题切换);btn.getStyleClass().add(button-secondary);// 添加样式类// 切换样式类btn.getStyleClass().remove(button-secondary);btn.getStyleClass().add(button-primary);七、运行效果展示7.1 深色主题效果Makery 教程中的 AddressApp 深色主题效果包含菜单栏、人员列表和详情面板整体采用深色背景配合浅色文字。7.2 深色主题 TableViewStack Overflow 上的 JavaFX 深色模式示例展示了深色背景下的 TableView、按钮和输入框样式。7.3 现代化主题组件AtlantaFX 现代化 JavaFX CSS 主题集合展示了 ToolBar、面包屑导航、按钮等多种控件在深色主题下的效果。7.4 浅色主题布局Oracle 官方教程中的 Layout Sample展示了 CSS 样式化后的布局面板包含 Sales 数据展示和多种图表类型选择。7.5 完整组件展示AtlantaFX 主题展示多种组件文档编辑、日历选择、任务列表、音乐播放器、数据表格等采用现代化的卡片式设计风格。常用 CSS 选择器总结选择器说明示例.button所有按钮全局按钮样式.button:hover鼠标悬停悬停效果.button:pressed按下状态点击效果.button:disabled禁用状态灰色显示#myButtonID 选择器特定按钮.button.primary类选择器主按钮.text-field:focused聚焦状态输入框聚焦.table-row-cell:selected选中行表格选中.tab:selected选中标签Tab 选中.check-box:selected选中复选框勾选状态