javafx的Css调用和简单的常用

下边是上篇文章进阶版，鉴于引得包略多占篇幅，我只能进行省略。这个是简单的一个小登录界面，负载了一个触发事件，后面有Css样式的调用。Javafx的样式和WEB上的Css格式大概一样，学过WEB很容易就能看懂。很简单只要注意一下：子节点的建立和css文件的引用写法就可以了.

public class FxTest2 extends Application {
	@Override
	public void start(Stage primaryStage) throws Exception {
		// TODO Auto-generated method stub
		
		GridPane grid= new GridPane();   //gridpane进行样式布局，类似于表格的样式
		grid.setAlignment(Pos.CENTER);  
		grid.setHgap(10);     //设置间隔（横向）
		grid.setVgap(20);    //设置间隔（纵向）
		grid.setPadding(new Insets(25,25,25,25));   //离四周的间隔,方向依次是：上，右，下，左

                //界面内容和按钮的触发事件				
		Text newText = new Text("二周目");
		//newText.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));     //设置字体的属性
		//newText.setId("welc");          //设置子节点，为等下的Css中能顺利确定该点打下标记。
		grid.add(newText ,0,0,2,1);
		Label username = new Label("名字:");   
		grid.add(username, 0, 1);        //在表格中做好定位
		Label pass = new Label("密码:");
		grid.add(pass, 0, 2);
		TextField uninput = new TextField();
		grid.add(uninput, 1, 1);
		TextField pinput =new TextField();
		grid.add(pinput, 1, 2);		
		Text txt= new Text();
		txt.setId("clies");
		grid.add(txt, 1, 5);
		
		Button btn = new Button("登录");
		btn.setOnAction(new EventHandler() {
			
			@Override
			public void handle(ActionEvent event) {
				// TODO Auto-generated method stub
				txt.setFill(Color.CHARTREUSE);
				txt.setText(uninput.getText());
				System.out.println("啥进度还是骄傲看到");
			}
		});
		grid.add(btn, 1,3);		
				
		Scene scene = new Scene(grid);	
		primaryStage.setTitle("第二弹");
		primaryStage.setScene(scene);
		//scene.getStylesheets().add( getClass().getResource("Login.css") .toExternalForm());   ///引用Css格式的写法。
		primaryStage.show();
	}
	public static void main(String[] args){
		launch(args);
	}
   }

其所对应的运行结果是：

加上对应的css文件之后：

.root{
	-fx-background-image: url("background.jpg");
}
.button {
   -fx-text-fill: white;
   -fx-font-family: "Arial Narrow";
   -fx-font-weight: bold;

   -fx-background-color: linear-gradient(#61a2b1, #2A5058);
   -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}
.button:hover {
   -fx-background-color: linear-gradient(#2A5058, #61a2b1);
}
.label {
   -fx-font-size: 12px;
   -fx-font-weight: bold;
   -fx-text-fill: #333333;
   -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}
#welc{
	-fx-font-size: 32px;
   -fx-font-family: "Arial Black";
   -fx-fill: #818181;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
   }
 #clies{
 -fx-font-size: 32px;
  -fx-font-family: "Arial Black";
   -fx-fill: #818181;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
 }

注：

1）、子节点：当需要对特点的位置进行修饰时，需要在主程序中用setid定一下位置，相当于做个标记，然后再在css文件里写出来修饰效果就如本栗子中对“二周目”的修饰。

2）、注意引用css文件的写法，已经在主程序中进行的描述。

3）、上面的所有程序都在同一个文件夹里所以不会出现路径问题，如果在不同文件夹里的话还要注意对应的路径更改。

执行出来的效果如下图所示：