javafx之CSS相关（自用）
一、介绍
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 ‘’ while parsing ‘-fx-background-color’ at ?[1,49]
[line, position]
Types
inherit
boolean
string
number
integer
size
angle
point {x,y}
percentage %
uri url( http://example.com )
effect:
javafx css支持DropShadow与InnerShadow
dropshadow( , , , , , )
inne rshadow( , , , , , )
= [ gaussian | one-pass-box | three-pass-box | two-pass-box ]
font
-fx-font-family: [serif/sans-serif/cursive/fantasy/monospace]
-fx-font-size
-fx-font-style: [normal| italic | oblique]
-fx-font-weight: [normal| bold| bolder| lighter| 100| …|900]
-fx-font: [[ || ]? ]
paint
| | |
Linear Gradients
linear-gradient( [ [from to ] | [ to ], ]? [ [ repeat | reflect ], ]? [, ]+)
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([ focus-angle , ]? [ focus-distance , ]? [ center , ]? radius [ | ] [ [ repeat | reflect ], ]?[, ]+)
radial-gradient(radius 100%, red, darkgray, black)
radial-gradient(focus-angle 45deg, focus-distance 20%, center 25% 25%, radius 50%, reflect, gray, darkgray 75%, dimgray)
Image Paint
image-pattern( , [ , , , [, ]?]?)
The URL of the image.
The x origin of the anchor rectangle.
The y origin of the anchor rectangle.
The width of the anchor rectangle.
The height of the anchor rectangle.
The proportional flag which indicates whether start and end locations are proportional or absolute
image-pattern(“images/Duke.png”)
image-pattern(“images/Duke.png”, 20%, 20%, 80%, 80%)
image-pattern(“images/Duke.png”, 20%, 20%, 80%, 80%, true)
image-pattern(“images/Duke.png”, 20, 20, 80, 80, false)
image-pattern(“images/Duke.png”, 0, 0, imageWidth, imageHeight, false)
repeating-image-pattern(“com/mycompany/myapp/images/Duke.png”)
color
.button {
-fx-background-color: red;
}
looked-up Colors:很有用的一个特性可以引用颜色值，举例秒懂
.root { abc: #f00 }
.button { -fx-background-color: abc }
rgb colors:
.label { -fx-text-fill: #f00 } /* #rgb */
.label { -fx-text-fill: #ff0000 } /* #rrggbb */
.label { -fx-text-fill: rgb(255,0,0) }
.label { -fx-text-fill: rgb(100%, 0%, 0%) }
.label { -fx-text-fill: rgba(255,0,0,1) }
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:
没一个Region包含：
background fills： -fx-background-color/radius/insets
background images : -fx-background-image/repeat/position/size
border strokes:
border images:
contents:
Region的形状相关：-fx-shape; -fx-scale-shape
-fx-min-width, -fx-pref-width; -fx-max-width
FlowPane:
-fx-hgap; -fx-vgap;-fx-alignment;-fx-orientation
GridPane
-fx-hgap; -fx-vgap; -fx-alignment; -fx-grid-lines-visible
HBox
-fx-spacing; -fx-alignment;-fx-fill-height
Shape
-fx-fill; -fx-smooth; -fx-stroke; -fx-stroke-type; -fx-stroke-dash-array/offset; -fx-stroke-line-cap/join
-fx-stroke-miter-limit; -fx-stroke-width
Text
-fx-font; -fx-text-alignment; -fx-underline
Button
伪类：cancel , default,armed
Cell
伪类：empty,filled,selected
CheckBox
伪类：selected,determinate,indeterminate
CheckMenuItem:
ComboBox:
伪类：editable,showing,armed
Control:
-fx-skin: -fx-focus-taversable
Hyperlink
-fx-cursor
伪类：visited
ListView:
-fx-orientation
伪类：horizentat,vertical
Menu:
伪类：showing
ProgressIndicator
-fx-indeterminate-segment-count
-fx-progress-color
-fx-spin-enabled
伪类：determinate,indeterminate
ProgressBar
-fx-indeterminate-bar-length/escape/flip/animation-time
ScrollBar
-fx-orientation; -fx-block-increment;-fx-unit-increment
伪类：vertical, horizental
TextInputControl
-fx-prompt-text-fill; -fx-highlight-fill; -fx-dislay-caret
关于长度单位的补充：
Relative
px : pixels, relative to the viewing device
em : the ‘font-size’ of the relevant font
ex : the ‘x-height’ of the relevant font
Absolute
in : inches — 1 inch is equal to 2.54 centimeters.
cm : centimeters
mm : millimeters
pt : points — the points used by CSS 2.1 are equal to 1/72nd of an inch.
pc : picas — 1 pica is equal to 12 points.
关于角度的补充
deg : angle in degrees - all other angle units are converted to degrees.
rad : angle in radians
grad : angle in gradians
turn : angle in turns