javafx之CSS初探

javaFX 可以通过css来设计界面。javafx中的css只是w3c css2.1规范的一个扩展和子集，并不完全支持所有的css特性。

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 '' 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( , , , , , )

innershadow( ,  ,  ,  ,  ,  )

= [ 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包含：

1. background fills： -fx-background-color/radius/insets
2. background images : -fx-background-image/repeat/position/size
3. border strokes: -fx-border-color/syle/width/radius/insets
4. border images: -fx-border-image-source/repeat/slice/width/insets
5. 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: 伪类：selected

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

关于常见颜色的补充：

	aliceblue = #f0f8ff		antiquewhite = #faebd7		aqua = #00ffff		aquamarine = #7fffd4
	azure = #f0ffff		beige = #f5f5dc		bisque = #ffe4c4		black = #000000
	blanchedalmond = #ffebcd		blue = #0000ff		blueviolet = #8a2be2		brown = #a52a2a
	burlywood = #deb887		cadetblue = #5f9ea0		chartreuse = #7fff00		chocolate = #d2691e
	coral = #ff7f50		cornflowerblue = #6495ed		cornsilk = #fff8dc		crimson = #dc143c
	cyan = #00ffff		darkblue = #00008b		darkcyan = #008b8b		darkgoldenrod = #b8860b
	darkgray = #a9a9a9		darkgreen = #006400		darkgrey = #a9a9a9		darkkhaki = #bdb76b
	darkmagenta = #8b008b		darkolivegreen = #556b2f		darkorange = #ff8c00		darkorchid = #9932cc
	darkred = #8b0000		darksalmon = #e9967a		darkseagreen = #8fbc8f		darkslateblue = #483d8b
	darkslategray = #2f4f4f		darkslategrey = #2f4f4f		darkturquoise = #00ced1		darkviolet = #9400d3
	deeppink = #ff1493		deepskyblue = #00bfff		dimgray = #696969		dimgrey = #696969
	dodgerblue = #1e90ff		firebrick = #b22222		floralwhite = #fffaf0		forestgreen = #228b22
	fuchsia = #ff00ff		gainsboro = #dcdcdc		ghostwhite = #f8f8ff		gold = #ffd700
	goldenrod = #daa520		gray = #808080		green = #008000		greenyellow = #adff2f
	grey = #808080		honeydew = #f0fff0		hotpink = #ff69b4		indianred = #cd5c5c
	indigo = #4b0082		ivory = #fffff0		khaki = #f0e68c		lavender = #e6e6fa
	lavenderblush = #fff0f5		lawngreen = #7cfc00		lemonchiffon = #fffacd		lightblue = #add8e6
	lightcoral = #f08080		lightcyan = #e0ffff		lightgoldenrodyellow = #fafad2		lightgray = #d3d3d3
	lightgreen = #90ee90		lightgrey = #d3d3d3		lightpink = #ffb6c1		lightsalmon = #ffa07a
	lightseagreen = #20b2aa		lightskyblue = #87cefa		lightslategray = #778899		lightslategrey = #778899
	lightsteelblue = #b0c4de		lightyellow = #ffffe0		lime = #00ff00		limegreen = #32cd32
	linen = #faf0e6		magenta = #ff00ff		maroon = #800000		mediumaquamarine = #66cdaa
	mediumblue = #0000cd		mediumorchid = #ba55d3		mediumpurple = #9370db		mediumseagreen = #3cb371
	mediumslateblue = #7b68ee		mediumspringgreen = #00fa9a		mediumturquoise = #48d1cc		mediumvioletred = #c71585
	midnightblue = #191970		mintcream = #f5fffa		mistyrose = #ffe4e1		moccasin = #ffe4b5
	navajowhite = #ffdead		navy = #000080		oldlace = #fdf5e6		olive = #808000
	olivedrab = #6b8e23		orange = #ffa500		orangered = #ff4500		orchid = #da70d6
	palegoldenrod = #eee8aa		palegreen = #98fb98		paleturquoise = #afeeee		palevioletred = #db7093
	papayawhip = #ffefd5		peachpuff = #ffdab9		peru = #cd853f		pink = #ffc0cb
	plum = #dda0dd		powderblue = #b0e0e6		purple = #800080		red = #ff0000
	rosybrown = #bc8f8f		royalblue = #4169e1		saddlebrown = #8b4513		salmon = #fa8072
	sandybrown = #f4a460		seagreen = #2e8b57		seashell = #fff5ee		sienna = #a0522d
	silver = #c0c0c0		skyblue = #87ceeb		slateblue = #6a5acd		slategray = #708090
	slategrey = #708090		snow = #fffafa		springgreen = #00ff7f		steelblue = #4682b4
	tan = #d2b48c		teal = #008080		thistle = #d8bfd8		tomato = #ff6347
	turquoise = #40e0d0		violet = #ee82ee		wheat = #f5deb3		white = #ffffff
	whitesmoke = #f5f5f5		yellow = #ffff00		yellowgreen = #9acd32		transparent = rgba(0,0,0,0)