本文概述
- 什么是CSS？
- JavaFX中的CSS
- 默认样式表
- 将样式表添加到场景
- 在StyleSheet中定义样式
- 选择器
- 在样式表中定义规则
- 班级风格
- ID样式
- 设置内联样式
使用CSS, 我们可以定义颜色, 大小, 字体样式, 段落之间的间距, 对齐方式以及网页的更多内容, 从而使其看起来更精确, 更好。我们还可以为不同尺寸的设备配置应用程序的背景, 布局, 设计和各种显示。
JavaFX中的CSS JavaFX是新一代的UI库, 它提供了配置应用程序主题的工具。 JavaFX提供了javafx.css软件包, 其中包含将CSS应用于JavaFX应用程序的所有类。
将CSS应用于JavaFX应用程序类似于将CSS应用于HTML页面。在本教程的这一部分中, 我们将讨论样式规则以及在JavaFX中调用样式规则的步骤。
默认样式表 JavaFX使用caspian.css作为默认CSS文件。在JavaFX运行时JAR文件jfxrt.jar中可以找到它。此样式表定义了根节点和UI控件的默认样式规则。该文件位于JDK安装目录下的路径/ jre / lib中。以下命令可用于从JAR文件中提取样式表。
# jar xf jfxrt.jar
# com/sun/javafx/scene/control/skin/caspian/caspian.css将样式表添加到场景 但是, JavaFX为我们提供了覆盖默认样式表的功能, 并为应用程序的每个节点定义了自己的样式。我们创建的样式表必须具有扩展名.css, 并且必须位于应用程序主类所在的目录中。
在JavaFX中, 存在将CSS应用于场景的特定语法。语法如下：
Scene scene = new Scene(root, 500, 400);
scene.getStylesheet().add("path/Stylesheet.css");
在StyleSheet中定义样式 可以通过使用样式名称（也称为选择器）和设置样式属性的规则系列来给出样式定义。花括号内给出了样式规则。考虑以下示例, 该示例名为mystyle.css。它为其容器应用程序中使用的每个按钮节点定义样式定义。
例
.button {
-fx-font : 14px "serief";
-fx-padding : 10;
-fx-background-color : #CCFF99;
}选择器 JavaFX中使用了多种类型的样式。但是, 每种类型都考虑自己关于选择器的约定。样式类选择器的命名约定如下：
- 如果样式类选择器包含多个单词, 请在它们之间使用连字符。
- 样式类选择器名称前面带有一个点（。）
.button
.check-box
.label【JavaFX CSS】可以通过使用节点的ID来定义特定节点的样式。可以使用setId()方法设置此ID。在Node_ID之前使用＃符号为该节点创建样式名称。例如, 具有ID my_label的节点可以具有以下类型的选择器名称。
#my_label在样式表中定义规则 样式定义的规则将值分配给属性。属性名称有一些约定, 如下所示。
- 如果属性名称包含多个单词, 请使用连字符（-）进行分隔。
- 样式的属性名称以-fx-开头。
- 属性名称和值用冒号（:)分隔。
- 规则用分号（; ）分隔。
-fx-background-color : #333356;
-fx-font : 16px "serief";
在javafx中定义了一个名为.root的特殊样式类。它应用于场景对象的根节点。由于应用程序的所有节点都是根节点的子节点, 因此可以将应用于此类的样式规则应用于应用程序的整个场景图。
.root
{
-fx-font-family : "serief";
-fx-background1 : rgb(225, 227, 2255);
}班级风格 可以通过将其定义添加到样式表中来创建类样式。例如;
.label1{
-fx-background-color : rgb(123, 126, 227);
-fx-padding : 5;
-fx-text-fill : rgb(245, 123, 201);
}要将上述样式类添加到适当的节点, 请使用方法getStyleClass()。add()方法序列。
Button button = new Button("SUBMIT");
button.getStyleClass().add(button1);
例：
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
public class JavaFX_CSSExample extends Application { @Override
public void start(Stage primaryStage) throws Exception {
Label first_name=new Label("First Name");
Label last_name=new Label("Last Name");
TextField tf1=new TextField();
TextField tf2=new TextField();
Button Submit=new Button ("Submit");
GridPane root=new GridPane();
root.setHgap(10);
root.setVgap(15);
Scene scene = new Scene(root, 400, 200);
root.addRow(0, first_name, tf1);
root.addRow(1, last_name, tf2);
root.addRow(2, Submit);
//Adding CSS file to the root
root.getStylesheets().add("Style.css");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}} // style.css
.label
{
-fx-background-color:Black;
-fx-text-fill:white;
-fx-font-size:16;
-fx-border-color: Wheat;
-fx-border-radius: 5;
}
.button
{
-fx-background-color:Black;
-fx-font-family:courier_new;
-fx-text-fill:White;
-fx-border-color: Wheat;
-fx-border-radius: 5;
-fx-font-size:16;
文章图片
ID样式 JavaFX为我们提供了为单个节点创建样式的工具。可以将样式名称指定为ID名称, 并在其后加上hash（＃）符号。
#submit-button{
-fx-font : bold 18pt "serief";
-fx-background-color : rgb(120, 190, 201);
}例
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class SignUP extends Application {@Override
public void start(Stage primaryStage) throws Exception {
//Adding Labels to the form
Label first_name = new Label("First Name");
Label last_name = new Label("Last Name");
Label Email = new Label("Email ID");
Label Password = new Label("Password");
//Adding text-field to the form
TextField tf1=new TextField();
TextField tf2=new TextField();
TextField tf3=new TextField();
TextField tf4=new TextField();
//creating submit button
Button Submit=new Button ("Submit");
//setting ID for the submit button so that the particular style rules can be applied to it.
Submit.setId("submit");
//Creating reset button
Button Reset=new Button ("Reset");
//Creating title
Text title = new Text();
title.setText("Sign Up");
title.setX(120);
title.setY(120);
title.setUnderline(true);
title.setId("title");
//creating grid-pane
GridPane root=new GridPane();
//creating Scene object
Scene scene = new Scene(root, 400, 400);
//adding the the nodes to the GridPane's rows
root.addRow(0, title);
root.addRow(2, first_name, tf1);
root.addRow(3, last_name, tf2);
root.addRow(4, Email, tf3);
root.addRow(5, Password, tf4);
root.addRow(7, Submit, Reset);
//setting horizontal and vertical gaps between the rows
root.setHgap(10);
root.setVgap(10);
//adding style-sheet to the Scene
root.getStylesheets().add("form.css");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}}//form.css
.root{
-fx-background-color:Wheat;
-fx-alignment:center;
-fx-background-radius: 100;
}
.label{
-fx-font-size:18pt;
-fx-font:bold 10pt"Arial";
-fx-padding:10
}
.button
{
-fx-effect:dropshadow(one-pass-box, black, 8, 0.0, 2, 0);
-fx-border-radius:20;
-fx-font:bold10pt"Arial";
}
#title
{
-fx-font:bold20pt"Arial";
-fx-effect:dropshadow(one-pass-box, GREEN, 8, 0.0, 2, 0);
}
文章图片
设置内联样式 JavaFX有助于我们在JavaFX应用程序代码本身中定义CSS规则。但是, 在JavaFX应用程序代码中定义的规则优先于样式表中的样式。
在下面的示例中, 我们在代码文件本身中定义了CSS规则, 该规则显示了使用CSS规则可以更改标签颜色和字体的方式。
Label label1 = new Label("Name: ");
label1.setStyle("-fx-background-color : blue, -fx-text-fill : white");
例
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
public class JavaFX_CSSExample extends Application { @Override
public void start(Stage primaryStage) throws Exception {
Label first_name=new Label("First Name");
// setting style for the label first_name
first_name.setStyle("-fx-background-color:Black;
-fx-text-fill:white;
-fx-font-size:16");
Label last_name=new Label("Last Name");
//setting style for the label last name
last_name.setStyle("-fx-background-color:Black;
-fx-text-fill:white;
-fx-font-size:16");
TextField tf1=new TextField();
//setting style for the first text field
tf1.setStyle("-fx-background-color:Wheat;
-fx-text-fill:Black;
-fx-font-size:16");
TextField tf2=new TextField();
//setting style for the second TextField
tf2.setStyle("-fx-background-color:Wheat;
-fx-text-fill:Black;
-fx-font-size:16");
Button Submit=new Button ("Submit");
//setting styles for the button
Submit.setStyle("-fx-background-color:Black;
-fx-font-family:courier_new;
-fx-text-fill:white;
-fx-font-size:16");
GridPane root=new GridPane();
root.setHgap(10);
root.setVgap(15);
Scene scene = new Scene(root, 400, 200);
root.addRow(0, first_name, tf1);
root.addRow(1, last_name, tf2);
root.addRow(2, Submit);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}}
文章图片
推荐阅读
- JavaFX圆柱体
- JavaFX三次曲线
- JavaFX便捷方法
- JavaFX颜色
- JavaFX ColorInput
- JavaFX ColorAdjust效果
- JavaFX按钮
- JavaFX Cirlce
- uni-app开发全局弹层组件