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 窗口。