本教程描述如何使用层叠样式表(CSS)来使JavaFX应用程序看起来更具魅力。你将会开发一个界面,创建一个.css文件,然后应用样式。

在本教程中,你将会对一个Login表单进行操作,它使用默认样式的标签、按钮和背景色,然后通过一些简单的CSS修改将其变成一个样式化的应用程序,如图5-1所示。

图5-1 带有CSS和不带CSS的Login表单

屏幕快照 2016-09-26 13.24.42.png

创建工程

如果你是跟随《JavaFX学习笔记》教程从头开始学习的,那么现在你应该已经创建了本教程所需的Login工程。

创建CSS文件

你的第一个任务是创建一个新的CSS文件,并且将其保存到你的主类所在的文件夹中。然后你需要让JavaFX应用程序感知到新加入的这个CSS。

  1. 在IDE的Projects窗体中,展开Login工程节点下的Source Packages文件夹节点。

  2. 右键单击Source Packages文件夹下的login文件夹然后选择”New”菜单,然后选择”Other”菜单。

  3. 在New File对话框中,选择”Other”,然后选择”Cascading Style Sheet”,然后点击”Next”。

  4. 在File Name文本框中输入Login,并且确保Folder文本框中的值为src\login。

  5. 点击”Finish”。

  6. 在java文件中,初始化Scene类的style sheets变量来指向CSS,使用例5-1中所示的加粗代码行。

- 阅读剩余部分 -