文档：http://www.haogongju.net/art/1807238

javafx中的css元素必须有-fx-前缀。

一、介绍

java8中新增了javafx.css开放了css相关api。

选择器分类：

Type选择器：通过Node的getTypeSelector可以获取

id选择器：通过设定id=属性（注意这里的id不是fx:id）

styleClass属性： styleClass可以使用class选择器

选择器命名规范：如ToggleButton需要写成：toggle-button

与w3c css语法的一些区别：

1.不支持 @font?face, @-keyword 等

2.不支持层次伪类选择器

3.伪类:active,:focus等，在Nodes中变为:pressed, :focused

4.超链接伪类:link,:visited变为:visited

5.javafx中不支持逗号序列的值，如不能再-fx-font-family以逗号分隔同时指导fontsize等

6.javafx css使用HSB颜色模型代替HSL

7、javafx css不会对uri进行编码

关于Inheritance继承

举例：

Scene scene = new Scene(new Group()); scene.getStylesheets().add(“test.css”); Rectangle rect = new Rectangle(100,100); rect.setLayoutX(50); rect.setLayoutY(50); rect.getStyleClass().add("my-rect"); ((Group)scene.getRoot()).getChildren().add(rect);

.my-rect { -fx-fill: red; }

.my-rect {  -fx-fill: yellow;  -fx-stroke: green;  -fx-stroke-width: 5;  -fx-stroke-dash-array: 12 2 4 2;  -fx-stroke-dash-offset: 6;  -fx-stroke-line-cap: butt;}

语法排错：

WARNING: com.sun.javafx.css.parser.CSSParser declaration Expected ‘<percent>‘ while parsing ‘-fx-background-color‘ at ?[1,49]

<url>[line, position]

Types

uri url( http://example.com )

 javafx css支持DropShadow与InnerShadow

dropshadow( <blur-type> , <color> , <number> , <number> , <number> , <number> )

inne rshadow( <blur-type> ,  <color>  ,  <number>  ,  <number>  ,  <number>  ,  <number>  )
<blur-type> = [ gaussian | one-pass-box | three-pass-box | two-pass-box ]

-fx-font-family: [serif/sans-serif/cursive/fantasy/monospace]

-fx-font-style: [normal| italic | oblique]

-fx-font-weight: [normal| bold| bolder| lighter| 100| ...|900]

-fx-font: [[ <font-style> || <font-weight> ]? <font-size> <font-family> ]

<color>  |  <linear-gradient>  |  <radial-gradient>  |  <image-pattern>

<repeating-image-pattern>

Linear Gradients <linear-gradient>

linear-gradient( [ [from  <point>  to  <point> ] | [ to <side-or-corner>], ]? [ [ repeat | reflect ], ]?  <color-stop> [,  <color-stop> ]+) 

t from top left to bottom right of the filled area with red at the top left corner and black at the bottom right.

linear-gradient(to bottom right, red, black)

  linear-gradient(from 0% 0% to 100% 100%, red 0%, black 100%)

create a 50px high bar at the top with a 3 color gradient with white underneath  for the rest of the filled area.

linear-gradient(from 0px 0px  to 0px 50px, gray, darkgray 50%, dimgray 99%, white)

Radial Gradient <radial-gradient>

Image Paint <image-pattern>

image-pattern( <string> , [ <size> ,  <size> ,  <size> ,  <size> [,  <boolean> ]?]?)

<string>  The URL of the image.
<size>  The  x  origin of the anchor rectangle.
<size>  The  y  origin of the anchor rectangle.
<size>  The width of the anchor rectangle.
<size>  The height of the anchor rectangle.
<boolean>  The proportional flag which indicates whether start and end locations are proportional  or absolute

repeating-image-pattern("com/mycompany/myapp/images/Duke.png")

.button {
    -fx-background-color: red;
}

looked-up Colors:很有用的一个特性可以引用颜色值，举例秒懂

.root { abc: #f00 }
.button { -fx-background-color: abc }

.label { -fx-text-fill: #f00 } /* #rgb */

javafx一些类中的css属性：

Stage

PopupWindow没有可以被css styled的properties，但是PopupWindow可以有自己的scene，可以通过scene的root节点

root.popup来进行styled

Nodes

Node类：

-fx-blend-mode; -fx-cursor; -fx-effect; -fx-focus-tranversable; -fx-opacity; 

-fx-rotate; -fx-scale-x/y/z; -fx-translate-x/y/z

visibility: [ visible | hidden | collapse | inherit ]

伪类：disabled,focused,hover,pressed,show-mnemonic

Scene:

ImageView: -fx-image

Region:

关于长度单位的补充：

javafx之CSS初探