javafx之CSS初探
javaFX 可以通过css来设计界面。javafx中的css只是w3c css2.1规范的一个扩展和子集,并不完全支持所有的css特性。
javafx中的css元素必须有-fx-前缀。
一、介绍
选择器分类:
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
<blur-type> = [ gaussian | one-pass-box | three-pass-box | two-pass-box ]
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)
<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
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)-fx-background-color: red;
}
.button { -fx-background-color: abc }
- .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
Nodes
Node类:
Scene:
Region:
- background fills: -fx-background-color/radius/insets
- background images : -fx-background-image/repeat/position/size
- border strokes: -fx-border-color/syle/width/radius/insets
- border images: -fx-border-image-source/repeat/slice/width/insets
- contents:
FlowPane:
GridPane
HBox
Shape
Text
Button
Cell
CheckBox
CheckMenuItem: 伪类:selected
ComboBox:
Control:
Hyperlink
ListView:
Menu:
ProgressIndicator
ProgressBar
ScrollBar
TextInputControl
补充
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) |