本教程通過新增級聯樣式表（CSS）使您的JavaFX應用程式看起來很有吸引力。您開發設計，建立.css檔案並應用新樣式。

在本教程中，您將獲取一個使用標籤，按鈕和背景顏色的預設樣式的登入表單，並通過一些簡單的CSS修改將其轉換為程式化的應用程式，如圖5-1所示。

圖5-1使用和不使用CSS的登入表單

本入門教程中使用的工具是NetBeans IDE。在開始之前，請確保您使用的NetBeans IDE版本支援JavaFX 8.有關詳細資訊，請參閱Java SE下載頁面的Certified System Configurations頁面。

1、建立專案

如果您從一開始就按照入門指南進行操作，那麼您已經建立了本教程所需的Login專案。如果沒有，請通過右鍵單擊

2、建立CSS檔案

您的第一個任務是建立一個新的CSS檔案，並將其儲存在與應用程式主類相同的目錄中。之後，您必須使JavaFX應用程式知道新新增的級聯樣式表。

1. 在NetBeans IDE Projects視窗中，展開Login專案節點，然後展開Source Packages目錄節點。

2. 右鍵單擊Source Packages目錄下的login資料夾，選擇New，然後選擇Other。

3. 在“新建檔案”對話方塊中，選擇“ 其他”，然後選擇“ 層疊樣式表”

   ，並單擊“ 下一步”。

4. 在“檔名”文字欄位中輸入“ 登入”，並確保“資料夾”文字欄位值為src\login。

5. 單擊完成。

6. 在Login.java檔案中，通過包含下面以粗體顯示的程式碼行來初始化類的style sheets變數Scene以指向級聯樣式表，以便它如示例5-1所示。

   示例5-1初始化樣式表變數

   Scene scene = new Scene(grid, 300, 275);
   primaryStage.setScene(scene);
   scene.getStylesheets().add
    (Login.class.getResource("Login.css").toExternalForm());
   primaryStage.show();
    
   

   此程式碼src\login在NetBeans專案的目錄中查詢樣式表。

3、新增背景影象

背景圖片有助於使您的表單更具吸引力。在本教程中，您將新增一個帶有亞麻紋理的灰色背景。

首先，通過右鍵單擊background.jpg影象並將其儲存到src\loginLogin NetBeans專案的資料夾中來下載背景影象。

現在，將background-image屬性的程式碼新增到CSS檔案中。請記住，路徑是相對於樣式表的。因此，在示例5-2的程式碼中，background.jpg映像與Login.css檔案位於同一目錄中。

例5-2背景影象

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

背景影象應用於.root樣式，這意味著它將應用於Scene例項的根節點。樣式定義由property（-fx-background-image）的名稱和property（）的值組成url(”background.jpg”)。

圖5-2顯示了具有新灰色背景的登入表單。

圖5-2灰色亞麻背景

4、標籤樣式

下一個要增強的控制元件是標籤。您將使用.label樣式類，這意味著樣式將影響表單中的所有標籤。程式碼在例5-3中。

示例5-3字型大小，填充，重量和對標籤的影響

.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參考指南”中有關效果的部分。

增強的使用者名稱和密碼標籤如圖5-3所示。

圖5-3帶陰影的更大，更大的標籤

5、風格文字

現在，Text在表單中的兩個物件上建立一些特殊效果：scenetitle包括文字Welcome，以及actiontarget使用者按下登入按鈕時返回的文字。您可以將不同的樣式Text應用於以各種方式使用的物件。

1. 在該Login.java檔案中，刪除以下程式碼行，這些程式碼行定義當前為文字物件設定的內聯樣式：

   scenetitle.setFont(Font.font(”Tahoma”, FontWeight.NORMAL, 20));

   actiontarget.setFill(Color.FIREBRICK);

   通過內聯樣式切換到CSS，您可以將設計與內容分開。這種方法使設計人員更容易控制樣式而無需修改內容。

2. 使用setID()Node類的方法為每個文字節點建立一個ID ：以粗體新增以下行，使它們如示例5-4所示。

   示例5-4為文字節點建立ID

   ...
   Text scenetitle = new Text("Welcome");
   scenetitle.setId("welcome-text");
   ...
   ...
   grid.add(actiontarget, 1, 6);
   actiontarget.setId("actiontarget");
   ..

3. 在Login.css檔案中，定義welcome-text和actiontargetID 的樣式屬性。對於樣式名稱，請使用前面帶有數字符號（＃）的ID，如例5-5所示。

   例5-5文字效果

   #welcome-text {
      -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 );
   }
   #actiontarget {
     -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），並應用內部陰影效果，從而建立浮雕效果。您可以通過將文字填充顏色更改為背景的較暗版本，將內部陰影應用於任何顏色。有關內部陰影屬性引數的詳細資訊，請參閱“ JavaFX CSS參考指南”中有關效果的部分。

樣式定義actiontarget與您之前看到的類似。

圖5-4顯示了兩個Text物件的字型更改和陰影效果。

圖5-4帶陰影效果的文字

6、按鈕樣式

下一步是設定按鈕的樣式，使使用者將滑鼠懸停在按鈕上時更改樣式。此更改將為使用者提供按鈕是互動式的指示，這是一種標準設計實踐。

首先，通過新增例5-6中的程式碼為按鈕的初始狀態建立樣式。此程式碼使用.button樣式類選擇器，這樣如果您在以後向表單新增按鈕，則新按鈕也將使用此樣式。

例5-6按鈕的陰影

.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 );
}

現在，當用戶將滑鼠懸停在按鈕上時，建立略微不同的外觀。您可以使用懸停偽類來執行此操作。偽類包括類的選擇器和由冒號（:)分隔的狀態名稱，如例5-7所示。

例5-7按鈕懸停樣式

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

圖5-5顯示了按鈕的初始和懸停狀態，其中包含新的藍灰色背景和白色粗體文字。

圖5-5初始和懸停按鈕狀態

圖5-6顯示了最終的應用程式。

圖5-6最終的程式化應用程式

7、從這往哪兒走

以下是您可以嘗試的一些事項：

• 看看你可以用CSS建立什麼。一些文件，可以幫助你剝皮的JavaFX應用程式使用CSS，用CSS樣式圖表，以及JavaFX的CSS參考指南。使用CSS進行Skinning和JavaFX Scene Builder使用者指南的CSS Analyzer部分還提供了有關如何使用JavaFX Scene Builder工具為JavaFX FXML佈局設定外觀的資訊。

• 見造型FX按鈕用CSS為如何建立使用CSS普通按鈕樣式的例子。