个性化阅读
专注于IT技术分析
        找回密码
当前位置：srcmini > Java > 正文

JavaFX CSS

2020-03-08 22:10:34 分类：Java 阅读(821) 评论(0)

本文概述

什么是CSS？

CSS（层叠样式表）是一种设计语言, 用于在不更改其功能的情况下增强网页的外观。它仅以这种方式处理, 网页显示在网络浏览器上。

使用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中使用了多种类型的样式。但是, 每种类型都考虑自己关于选择器的约定。样式类选择器的命名约定如下：

  1. 如果样式类选择器包含多个单词, 请在它们之间使用连字符。
  2. 样式类选择器名称前面带有一个点（。）

选择器的示例是：

.button  
.check-box
.label

可以通过使用节点的ID来定义特定节点的样式。可以使用setId()方法设置此ID。在Node_ID之前使用＃符号为该节点创建样式名称。例如, 具有ID my_label的节点可以具有以下类型的选择器名称。

#my_label

在样式表中定义规则

样式定义的规则将值分配给属性。属性名称有一些约定, 如下所示。

  1. 如果属性名称包含多个单词, 请使用连字符（-）进行分隔。
  2. 样式的属性名称以-fx-开头。
  3. 属性名称和值用冒号（:)分隔。
  4. 规则用分号（;）分隔。

定义属性规则的示例如下。

-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;
JavaFX CSS

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 CSS

设置内联样式

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 CSS
赞(0)
未经允许不得转载：srcmini » JavaFX CSS
标签：

相关推荐

评论 抢沙发

评论前必须登录！

 

猜你喜欢

热门标签

网站开发 (2587)WordPress开发 (2055)WordPress主题 (1517)Web开发 (692)主题 (527)数据科学 (444)教程合集 (317)资源合集 (316)函数 (287)页面 (267)python开发 (261)项目示例 (243)WordPress自定义页面 (233)图像 (219)错误 (213)网站 (189)UX设计 (187)Web安全 (179)模板 (178)Web运维 (177)应用程序 (177)WordPress插件 (176)插件 (171)前端开发 (166)算法 (150)woocommerce (149)数据结构 (149)常见问题 (142)设计 (138)网红 (138)