JavaFX - CSS

CSS，也稱為層疊樣式表，是一種簡單的設計語言，旨在簡化網頁顯示和使用者友好的過程。它允許我們定義網頁使用者介面元素的外觀。使用 CSS，我們可以控制文字的顏色、字型的樣式、段落之間的間距、列的大小和佈局。除此之外，我們還可以控制使用的背景圖片或顏色、佈局設計、不同裝置和螢幕尺寸的視口變化以及各種其他效果。

通常，CSS 廣泛用於 Web 開發，但它也可以應用於 JavaFX 應用程式。在本教程中，我們將學習如何在 JavaFX 應用程式中使用 CSS。

JavaFX 中的 CSS

JavaFX 為我們提供了使用 CSS 來增強應用程式外觀的功能。包javafx.css包含用於為 JavaFX 應用程式應用 CSS 的類。

CSS 包含由瀏覽器解釋然後應用於文件中相應元素的樣式規則。

樣式規則由三個部分組成，如下所示：

• 選擇器 - 選擇器是一個將應用樣式的 HTML 標籤。這可以是任何標籤，例如<h1>或<table>等。

• 屬性 - 屬性是 HTML 標籤的一種屬性型別。簡單來說，所有 HTML 屬性都轉換為 CSS 屬性。它們可以是顏色、邊框等。

• 值 - 值分配給屬性。例如，顏色屬性的值可以是紅色或#F1F1F1等。

我們可以將 CSS 樣式規則語法如下所示：

selector { property: value }

JavaFX 使用的預設樣式表是modena.css。它位於 JavaFX 執行時 jar 中。

在 JavaFX 中新增樣式表

我們可以使用getStylesheets()方法將我們自己的樣式表新增到 JavaFX 中的場景，如下所示：

Scene scene = new Scene(new Group(), 500, 400); 
scene.getStylesheets().add("path/stylesheet.css");

在 JavaFX 中新增內聯樣式表

我們還可以使用setStyle()方法新增內聯樣式。這些樣式僅包含鍵值對，並且適用於設定它們的節點。以下是將內聯樣式表設定為按鈕的示例程式碼。

.button { 
   -fx-background-color: red; 
   -fx-text-fill: white; 
}

示例

假設我們已經開發了一個 JavaFX 應用程式，該應用程式顯示一個包含文字欄位、密碼欄位和兩個按鈕的表單。預設情況下，此表單的外觀如下面的螢幕截圖所示：

以下 JavaFX 程式碼演示瞭如何使用 CSS 為上述應用程式新增樣式。將此程式碼儲存在名為CssExample.java的檔案中。

import javafx.application.Application; 
import static javafx.application.Application.launch; 
import javafx.geometry.Insets; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.control.PasswordField; 
import javafx.scene.layout.GridPane; 
import javafx.scene.text.Text; 
import javafx.scene.control.TextField; 
import javafx.stage.Stage;  

public class CssExample extends Application { 
   @Override 
   public void start(Stage stage) {      
      //creating label email 
      Text text1 = new Text("Email");       
      
      //creating label password 
      Text text2 = new Text("Password"); 
       
      //Creating Text Filed for email        
      TextField textField1 = new TextField();       
      
      //Creating Text Filed for password        
      PasswordField textField2 = new PasswordField();  
       
      //Creating Buttons 
      Button button1 = new Button("Submit"); 
      Button button2 = new Button("Clear");  
      
      //Creating a Grid Pane 
      GridPane gridPane = new GridPane();    
      
      //Setting size for the pane 
      gridPane.setMinSize(400, 200);
      
      //Setting the padding  
      gridPane.setPadding(new Insets(10, 10, 10, 10)); 
      
      //Setting the vertical and horizontal gaps between the columns 
      gridPane.setVgap(5); 
      gridPane.setHgap(5);       
      
      //Setting the Grid alignment 
      gridPane.setAlignment(Pos.CENTER); 
       
      //Arranging all the nodes in the grid 
      gridPane.add(text1, 0, 0); 
      gridPane.add(textField1, 1, 0); 
      gridPane.add(text2, 0, 1);       
      gridPane.add(textField2, 1, 1); 
      gridPane.add(button1, 0, 2); 
      gridPane.add(button2, 1, 2); 
       
      //Styling nodes  
      button1.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;"); 
      button2.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;"); 
       
      text1.setStyle("-fx-font: normal bold 20px 'serif' "); 
      text2.setStyle("-fx-font: normal bold 20px 'serif' ");  
      gridPane.setStyle("-fx-background-color: BEIGE;"); 
       
      // Creating a scene object 
      Scene scene = new Scene(gridPane, 400, 300); 
       
      // Setting title to the Stage   
      stage.setTitle("CSS Example in JavaFX"); 
         
      // Adding scene to the stage 
      stage.setScene(scene);
      
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

使用以下命令從命令提示符編譯並執行儲存的 java 檔案。

javac --module-path %PATH_TO_FX% --add-modules javafx.controls CssExample.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls CssExample

輸出

執行後，上述程式將生成一個如下所示的 JavaFX 視窗。