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 ‘<percent>‘ while parsing ‘-fx-background-color‘ at ?[1,49]

<url>[line, position]



Types

inherit
boolean
string
number
integer
size
angle
point {x,y}
percentage %

effect:
 javafx css支持DropShadow与InnerShadow
dropshadow( <blur-type> , <color> , <number> , <number> , <number> , <number> )
innershadow( <blur-type> , <color> , <number> , <number> , <number> , <number> )

<blur-type> = [ 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: [[ <font-style> || <font-weight> ]? <font-size> <font-family> ]

paint

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>
radial-gradient([ focus-angle <angle>, ]? [ focus-distance <percentage>, ]? [ center <point>, ]? radius [ <length> | <percentage> ] [ [ repeat | reflect ], ]?<color-stop>[, <color-stop>]+)

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>
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

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)



javafx之CSS初探,布布扣,bubuko.com

javafx之CSS初探

上一篇:Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解


下一篇:JAVA之IO技术异常处理机制