javafx的Css调用和简单的常用

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

public class FxTest2 extends Application {@Overridepublic void start(Stage primaryStage) throws Exception {// TODO Auto-generated method stubGridPane 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<ActionEvent>() {@Overridepublic void handle(ActionEvent event) {// TODO Auto-generated method stubtxt.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）、上面的所有程序都在同一个文件夹里所以不会出现路径问题，如果在不同文件夹里的话还要注意对应的路径更改。
执行出来的效果如下图所示：