JavaFX - CSS

  • 简述

    Cascading Style Sheets,也称为 CSS,是一种简单的设计语言,旨在简化网页呈现的过程。
    CSS 处理网页的外观和感觉部分。使用 CSS,您可以控制文本颜色、字体样式、段落间距、列大小和布局。除此之外,您还可以控制使用的背景图像或颜色、布局设计、不同设备和屏幕尺寸的显示变化以及各种其他效果。
  • JavaFX 中的 CSS

    JavaFX 为您提供了使用 CSS 来增强应用程序外观的便利。包javafx.css 包含用于为 JavaFX 应用程序应用 CSS 的类。
    CSS 包含由浏览器解释然后应用于文档中相应元素的样式规则。
    样式规则由三部分组成,它们是 -
    • Selector- 选择器是一个 HTML 标签,将在其中应用样式。这可以是任何标签,如<h1> 或者 <table>, 等等。
    • Property− 属性是 HTML 标签的一种属性。简单来说,所有 HTML 属性都转换为 CSS 属性。它们可能是颜色,border, 等等。
    • Value- 值被分配给属性。例如,颜色属性可以具有值red 或者 #F1F1F1, 等等。
    您可以按如下方式放置 CSS 样式规则语法 -
    
    selector { property: value }
    
    CSS 样式
    JavaFX 使用的默认样式表是 modena.css. 它位于 JavaFX 运行时 jar 中。

    添加您自己的样式表

    您可以将自己的样式表添加到 JavaFX 中的场景,如下所示 -
    
    Scene scene = new Scene(new Group(), 500, 400); 
    scene.getStylesheets().add("path/stylesheet.css");
    

    添加内联样式表

    您还可以使用 setStyle()方法。这些样式仅由键值对组成,它们适用于设置它们的节点。以下是将内联样式表设置为按钮的示例代码。
    
    .button { 
       -fx-background-color: red; 
       -fx-text-fill: white; 
    }
    

    例子

    假设我们开发了一个 JavaFX 应用程序,它显示一个带有文本字段、密码字段和两个按钮的表单。默认情况下,此表单如下面的屏幕截图所示 -
    网格窗格
    以下程序是一个示例,演示如何在 JavaFX 中向上述应用程序添加样式。
    将此代码保存在名称为的文件中 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.setMoognment(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); 
           
          // Setting title to the Stage   
          stage.setTitle("CSS Example"); 
             
          // 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 CssExample.java 
    java CssExample
    
    执行时,上述程序会生成一个 JavaFX 窗口,如下所示。
    CSS 示例