JavaFX- 1.2 JavaFX起步:简单示例应用（三）使用CSS美化表单

使用CSS美化表单

本教程将会学习如何使用一个叠层样式表（CSS）美化我们的JavaFX应用程序。设计一个窗体、创建一个.css文件，并且应用在窗体上。

本教程将会使用上一教程的代码，并且新建css文件应用在窗体上，达到下图的效果：

创建工程

1. 新建包JavaFX_LoginFormWithCSS
2. 复制JavaFX_LoginForm.LoginForm到JavaFX_CSS4Login包下并重命名为LoginFormWithCSS
3. 在包JavaFX_LoginFormWithCSS下新建css文件
4. 修改Main.java 启动方法 增加launch(LoginFormWithCSS.class);并注释掉之前的launch(LoginForm.class);
5. 下载 background.jpg至包下。最终工程结构如下：

初始化css文件绑定到场景中

在创建完scene后添加如下代码进行css绑定：

        scene.getStylesheets().
        		add(LoginFormWithCSS.class.
                getResource("login.css").
                toExternalForm());

添加背景图片

背景图像有助于使您的表单更具吸引力。 在本教程中，您将添加带有亚麻质地的灰色背景。

现在，将background-image属性的代码添加到CSS文件中。 请记住，路径是相对于样式表的。 因此，在示例的代码中，background.jpg图像与login.css文件位于同一目录中。

.root {
    -fx-background-image: url("background.jpg");
}

背景图像将应用于.root样式，这意味着它将应用于Scene实例的根节点。 样式定义包括属性的名称（-fx-background-image）和属性的值（url（“ background.jpg”））。

点击运行我们即可看到带有背景图片的窗体，在运行执行可能需要执行一次重新编译，否则会提示找不到图片;

设置labels的样式

接下来要增强的控件是标签。 您将使用.label样式类，这意味着样式将影响表单中的所有标签

.label {
    -fx-font-size: 12px;
    -fx-font-weight: bold;
    -fx-text-fill: #333333;
    -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}

本示例增加了字体大小和粗细，并应用了灰色的阴影（＃333333）。 投影的目的是在深灰色文本和浅灰色背景之间增加对比度。 有关投影属性的参数的详细信息，请参见《 JavaFX CSS参考指南》中有关效果的部分。

设置文本样式

现在，以以下形式在两个Text对象上创建一些特殊效果：Scenetitle（其中包括文本Welcome）和text，即当用户按下Sign in按钮时返回的文本。 您可以将不同的样式应用于以多个使用的Text对象。

1. 在LoginFormWithCSS.java文件中移除对text文本组件的样式设置代码

    text.setFill(Color.FIREBRICK);
    sceneTitle.setFont(Font.font("Tahoma", FontWeight.NORMAL,20));
   

   通过切换到内联样式的CSS，可以将设计与内容分离。 这种方法使设计人员更容易控制样式，而不必修改内容。

2. 为需要增加样式的组件设置id属性，代码如下

   ...
   sceneTitle.setId("welcome");
   ...
   text.setId("text");
   

3. 在login.css文件中使用#+id名进行设置样式：

   #welcome {
   -fx-font-size: 32px;
   -fx-font-family: "Arial Black";
   -fx-fill: #818181;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
   }
   #text {
   -fx-fill: FIREBRICK;
   -fx-font-weight: bold;
   -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
   }
   

欢迎文本的大小增加到32点，并且字体更改为Arial Black。 文本填充颜色设置为深灰色（＃818181），并应用内部阴影效果，从而产生压纹效果。 通过将文本填充颜色更改为较暗的背景，可以将内部阴影应用于任何颜色。 有关inner shadow属性的参数的详细信息，请参见《 JavaFX CSS参考指南》中有关效果的部分。

设置按钮样式

下一步是设置按钮的样式，当用户将鼠标悬停在按钮上时，按钮将更改样式。 此更改将向用户指示按钮是交互式的，这是标准的设计方式。

首先，通过添加示例代码，为按钮的初始状态创建样式。 这段代码使用.button样式类选择器，因此，如果以后再向表单添加按钮，则新按钮也将使用此样式。

.button {
    -fx-text-fill: white;
    -fx-font-family: "Arial Narrow";
    -fx-font-weight: bold;
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

现在，当用户将鼠标悬停在按钮上时，创建略有不同的外观。您可以使用悬停伪类来执行此操作。 伪类包括该类的选择器和状态名称，并用冒号（:)分隔，如示例所示。

.button:hover {
    -fx-background-color: linear-gradient(#2A5058, #61a2b1);
}

下图显示了两种按钮不同状态下的显示效果：

运行