JavaFx css样式（三）

JavaFx css样式（三）

JavaFX 从入门入门到入土系列
JavaFx css样式，前面我说过它类似html，他有css控制样式，不过最新的css标准并不支持，同时javafx的css样式都以 -fx-开头，列如设置背景颜色.

.bg{
	-fx-background-color: #1EC6FC;
}

更多详细参考官网文档：https://openjfx.cn/javadoc/16/javafx.graphics/javafx/scene/doc-files/cssref.html

css样式

需要注意，我这里是Maven管理项目。将css放到resources/css/main.css下
main.css

/*作用于指定class*/
.bg{
    -fx-background-color: #1EC6FC;
    -fx-font-size: 20px;
    /*字体颜色*/
    -fx-text-fill: red;
}

/* 作用于全局的按钮样式 */
.button{
    -fx-font-size: 40px
}

java代码如下

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

/**
 * @author lingkang
 * @date 2021/9/17 22:29
 * @description
 */
public class TitleDemo extends Application {
    public void start(Stage stage) throws Exception {
        stage.setTitle("标题");
        stage.getIcons().add(new Image("img/avatar.jpg"));
        stage.setHeight(200);
        stage.setWidth(300);

        Label label = new Label("css 样式");
        // 给label添加css样式
        label.getStyleClass().add("bg");

        Button button = new Button("样式按钮");
        // 直接添加样式
        button.setStyle("-fx-background-color: red;-fx-text-fill: blue;");

        // 使用Vbox纵向布局放标签和按钮
        VBox box = new VBox();
        box.getChildren().add(label);
        box.getChildren().add(button);

        Scene scene = new Scene(box);
        // 将样式css放到场景中，类似html中的全局 css
        scene.getStylesheets().add("css/main.css");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

效果如下