您的位置：首页 > Web前端 > CSS

javafx之CSS初探

2014-11-17 12:55 387 查看
文档：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

inherit

boolean

string

number

integer

size

angle

point {x,y}

percentage %

uri url(
http://example.com
)

effect:

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 ]

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

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

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

关于常见颜色的补充：

aliceblue = #f0f8ffantiquewhite = #faebd7aqua = #00ffffaquamarine = #7fffd4
azure = #f0ffffbeige = #f5f5dcbisque = #ffe4c4black = #000000
blanchedalmond = #ffebcdblue = #0000ffblueviolet = #8a2be2brown = #a52a2a
burlywood = #deb887cadetblue = #5f9ea0chartreuse = #7fff00chocolate = #d2691e
coral = #ff7f50cornflowerblue = #6495edcornsilk = #fff8dccrimson = #dc143c
cyan = #00ffffdarkblue = #00008bdarkcyan = #008b8bdarkgoldenrod = #b8860b
darkgray = #a9a9a9darkgreen = #006400darkgrey = #a9a9a9darkkhaki = #bdb76b
darkmagenta = #8b008bdarkolivegreen = #556b2fdarkorange = #ff8c00darkorchid = #9932cc
darkred = #8b0000darksalmon = #e9967adarkseagreen = #8fbc8fdarkslateblue = #483d8b
darkslategray = #2f4f4fdarkslategrey = #2f4f4fdarkturquoise = #00ced1darkviolet = #9400d3
deeppink = #ff1493deepskyblue = #00bfffdimgray = #696969dimgrey = #696969
dodgerblue = #1e90fffirebrick = #b22222floralwhite = #fffaf0forestgreen = #228b22
fuchsia = #ff00ffgainsboro = #dcdcdcghostwhite = #f8f8ffgold = #ffd700
goldenrod = #daa520gray = #808080green = #008000greenyellow = #adff2f
grey = #808080honeydew = #f0fff0hotpink = #ff69b4indianred = #cd5c5c
indigo = #4b0082ivory = #fffff0khaki = #f0e68clavender = #e6e6fa
lavenderblush = #fff0f5lawngreen = #7cfc00lemonchiffon = #fffacdlightblue = #add8e6
lightcoral = #f08080lightcyan = #e0fffflightgoldenrodyellow = #fafad2lightgray = #d3d3d3
lightgreen = #90ee90lightgrey = #d3d3d3lightpink = #ffb6c1lightsalmon = #ffa07a
lightseagreen = #20b2aalightskyblue = #87cefalightslategray = #778899lightslategrey = #778899
lightsteelblue = #b0c4delightyellow = #ffffe0lime = #00ff00limegreen = #32cd32
linen = #faf0e6magenta = #ff00ffmaroon = #800000mediumaquamarine = #66cdaa
mediumblue = #0000cdmediumorchid = #ba55d3mediumpurple = #9370dbmediumseagreen = #3cb371
mediumslateblue = #7b68eemediumspringgreen = #00fa9amediumturquoise = #48d1ccmediumvioletred = #c71585
midnightblue = #191970mintcream = #f5fffamistyrose = #ffe4e1moccasin = #ffe4b5
navajowhite = #ffdeadnavy = #000080oldlace = #fdf5e6olive = #808000
olivedrab = #6b8e23orange = #ffa500orangered = #ff4500orchid = #da70d6
palegoldenrod = #eee8aapalegreen = #98fb98paleturquoise = #afeeeepalevioletred = #db7093
papayawhip = #ffefd5peachpuff = #ffdab9peru = #cd853fpink = #ffc0cb
plum = #dda0ddpowderblue = #b0e0e6purple = #800080red = #ff0000
rosybrown = #bc8f8froyalblue = #4169e1saddlebrown = #8b4513salmon = #fa8072
sandybrown = #f4a460seagreen = #2e8b57seashell = #fff5eesienna = #a0522d
silver = #c0c0c0skyblue = #87ceebslateblue = #6a5acdslategray = #708090
slategrey = #708090snow = #fffafaspringgreen = #00ff7fsteelblue = #4682b4
tan = #d2b48cteal = #008080thistle = #d8bfd8tomato = #ff6347
turquoise = #40e0d0violet = #ee82eewheat = #f5deb3white = #ffffff
whitesmoke = #f5f5f5yellow = #ffff00yellowgreen = #9acd32transparent = rgba(0,0,0,0)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航