javafx之CSS初探
文档: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>
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>
<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>
]?]?)
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:
- 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 = #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初探的更多相关文章
- CSS 初探
Css: 指层叠样式表 (Cascading Style Sheets),它是用来进行网页风格设计的.通俗的说就是进行网页美化的,没有html依然存在,多了css 它会更好.但是没有html,css就 ...
- css初探
CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; ...
- JavaFX之FXML+CSS创建窗体以及透明窗体添加阴影
前言 开通博客园有一段日子了,一直没空也没想好该写点什么.最近正好在做一个桌面程序,初次接触JavaFX,体验下来确实比swing好用不少.索性便记记学习笔记吧,虽然FX好像挺没存在感,没人用的感觉. ...
- JavaFX让UI更美观-CSS样式
相对于Swing来说,JavaFX在UI上改善了很多,不仅可以通过FXML来排版布局界面,同时也可以通过CSS样式表来美化UI. 其实在开发JavaFX应用的时候,可以将FXML看做是HTML,这样跟 ...
- JavaFX前言
笔者在一家互联网公司做JavaEE开发,公司开发了移动端的产品,唯独没有PC端的产品,于是领导将任务分配给笔者. 使用Java开发PC客户端,我的第一反应是使用swing API.但是,产品的需求是客 ...
- JavaFX学习之路:详细解释JavaFX架构和框架
JavaFX 2.0平台是基于Java技术的富client平台.它使应用程序开发人员更加easy的开发和部署跨平台的富互联网应用(RIA).JavaFX 2.0文档包括了JavaFX 2.0所提供的功 ...
- 什么是JavaFX
什么是JavaFX JavaFx平台是一个富客户端平台解决方案,它能够使用应用程序开发人员轻松的创建跨平台的富客户端应用程序.它构建在Java技术的基础之上,JavaFX平台提供了一组丰富的图形和媒体 ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- How can I style a JavaFX SplitMenuButton in CSS
0 down vote favorite I try to style a SplitMenuButton in JavaFX. I've got a menuButton and a SplitMe ...
随机推荐
- Spring验证的错误返回------BindingResult
Spring验证的错误返回------BindingResult 参考资料:http://www.mkyong.com/spring-mvc/spring-mvc-form-errors-tag-ex ...
- Android连接网络打印机,jSocket连接网络打印机
老大写的一个打印工具类,记录一下. package com.Ieasy.Tool; import android.annotation.SuppressLint; import java.io.IOE ...
- Matlab中的数据类型
Matlab中有15种基本数据类型,主要是整型.浮点.逻辑.字符.日期和时间.结构数组.单元格数组以及函数句柄等. 1.整型:(int8:uint8:int16:uint16:int3 ...
- 关于java按位操作运算
<1>.在了解位移之前,先了解一下正数和负数的二进制表示形式以及关系:举例15和-15:15 的原码: 00000000 00000000 00000000 00001111 补码 ...
- 20135220谈愈敏Blog8_进程的切换和系统的一般执行过程
进程的切换和系统的一般执行过程 谈愈敏 原创作品转载请注明出处 <Linux内核分析>MOOC课程 http://mooc.study.163.com/course/USTC-100002 ...
- 信息安全系统设计基础exp_2
详见搭档20135322郑伟博客,链接如下:http://www.cnblogs.com/zhengwei0712/p/4971435.html
- 问卷调查——答卷
1.你对自己的未来有什么规划?做了哪些准备?答:对未来的规划,就是像大多数人一样,在学校里有一个好的成绩,掌握扎实的专业基础,然后在国考上得到一个好成绩,得到一个好的工作机会,然后努力工作.目标很简单 ...
- 我从腾讯那“偷了”3000万QQ用户数据,出了份很有趣的独家报告!
声明: 1.目前程序已停止运行!QQ空间也已升级访问安全机制. 2.本“分析”数据源自部分用户的公开信息,并未触及隐私内容,广大网友无需担心. 3.QQ空间会不定期发布大数据分析报告,感兴趣的朋友关注 ...
- spring cloud教程之使用spring boot创建一个应用
<7天学会spring cloud>第一天,熟悉spring boot,并使用spring boot创建一个应用. Spring Boot是Spring团队推出的新框架,它所使用的核心技术 ...
- 端口扫描之王——nmap入门精讲(一)
端口扫描在百度百科上的定义是: 端口扫描是指某些别有用心的人发送一组端口扫描消息,试图以此侵入某台计算机,并了解其提供的计算机网络服务类型(这些网络服务均与端口号相关),但是端口扫描不但可以为黑客所利 ...