文档：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:

关于长度单位的补充：