1 <!doctype html> 2 3 <!-- 4 /* 5 * Copyright (c) 2012, 2018, Oracle and/or its affiliates. All rights reserved. 6 * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER. 7 * 8 * This code is free software; you can redistribute it and/or modify it 9 * under the terms of the GNU General Public License version 2 only, as 10 * published by the Free Software Foundation. Oracle designates this 11 * particular file as subject to the "Classpath" exception as provided 12 * by Oracle in the LICENSE file that accompanied this code. 13 * 14 * This code is distributed in the hope that it will be useful, but WITHOUT 15 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or 16 * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License 17 * version 2 for more details (a copy is included in the LICENSE file that 18 * accompanied this code). 19 * 20 * You should have received a copy of the GNU General Public License version 21 * 2 along with this work; if not, write to the Free Software Foundation, 22 * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA. 23 * 24 * Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA 25 * or visit www.oracle.com if you need additional information or have any 26 * questions. 27 */ 28 --> 29 30 <html lang="en"> 31 <head> 32 <meta name="description" content="This document describes the JavaFX 33 Cascading Style Sheets (CSS) for JavaFX @FXVERSION@ and explains the 34 styles, values, properties and associated grammar."> 35 <meta name="keywords" content="JavaFX, JavaFX CSS, JavaFX CSS reference, 36 JavaFX CSS guide, JavaFX styling, CSS styles, CSS, cascading style sheets, 37 JavaFX GUI development, JavaFX application development"> 38 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 39 <title>JavaFX CSS Reference Guide</title> 40 <style type="text/css"> 41 body { 42 font-family: Helvetica, Arial, sans-serif; 43 font-size: 14px; 44 } 45 h1 { 46 font-size: 28px; 47 color:#385E76 48 } 49 h2 { 50 border-top: 3px dashed #DDD; 51 margin-top: 30px; 52 padding-top: 15px; 53 font-size: 22px; 54 color:#385E76 55 } 56 h3 { 57 background-color: #EEE; 58 padding: 3px; 59 font-size: 18px; 60 } 61 h4 { 62 font-size: 16px; 63 margin: 18px 0px 10px 0px; 64 } 65 ul.contents li { 66 font-size: 12px; 67 font-weight:bold; 68 list-style-type:circle; 69 margin: 3px 0px 3px 0px; 70 } 71 ul.contents li li { 72 font-weight:normal; 73 list-style-type:circle; 74 } 75 /*ul.contents a { 76 color:#000 77 }*/ 78 a { 79 text-decoration:none; 80 color:#06C 81 } 82 .csspropertytable { 83 border-spacing: 1px; 84 background-color: #CCC; 85 } 86 .csspropertytable th, .csspropertytable td { 87 padding: 2px; 88 } 89 .csspropertytable thead th, .csspropertytable thead td { 90 font-size: 10px; 91 text-align: center; 92 background-color: #CCC; 93 } 94 .csspropertytable tbody { 95 background-color:#FFF; 96 font-size: 12px; 97 } 98 /*.csspropertytable td:first-child { 99 color:#06C; 100 font-weight:bold; 101 white-space:nowrap; 102 }*/ 103 .cssmisctable { 104 border-spacing: 2px; 105 background-color:#CCC; 106 } 107 .cssmisctable th, .cssmisctable td { 108 padding: 4px; 109 } 110 .cssmisctable thead { 111 font-size: 10px; 112 } 113 .cssmisctable tbody th, .cssmisctable tbody td { 114 font-size: 12px; 115 text-align: left; 116 font-weight: normal; 117 background-color: #FFF; 118 } 119 .package { 120 margin: 15px 0px 0px 0px; 121 padding: 2px; 122 background-color:#666; 123 color:#FFF; 124 font-weight:bold; 125 border:none 126 } 127 .package td { 128 background-color:#666; 129 font-size: 14px; 130 } 131 th.parents, td.parents { 132 font-weight:bold; 133 color:#C00; 134 background-color:#DDD; 135 padding: 4px; 136 text-align:center; 137 font-size: 10px; 138 } 139 th.propertyname, td.propertyname { 140 color:#06C; 141 background-color: #FFF; 142 font-weight:bold; 143 text-align:left; 144 white-space:nowrap; 145 } 146 td.value { 147 font-family:"Lucida Console", Monaco, monospace; 148 font-size: 10px; 149 } 150 td.default { 151 font-family:"Lucida Console", Monaco, monospace; 152 font-size: 10px; 153 text-align:center; 154 white-space:nowrap; 155 } 156 td.range { 157 font-family:"Lucida Console", Monaco, monospace; 158 font-size: 10px; 159 text-align:center; 160 white-space:nowrap; 161 } 162 td.implemented { 163 text-align:center; 164 white-space:nowrap; 165 } 166 .grammar { 167 font-family:"Lucida Console", Monaco, monospace; 168 font-size: 14px; 169 color:#039; 170 } 171 p.example { 172 font-family:"Lucida Console", Monaco, monospace; 173 font-size: 14px; 174 /* white-space: pre; */ 175 176 padding: 0px 0px 0px 40px; 177 color:#090; 178 margin: 0px; 179 } 180 span.example { 181 font-family:"Lucida Console", Monaco, monospace; 182 font-size: 14px; 183 color:#090; 184 } 185 p.subtitle { 186 font-style: italic; 187 color:#999; 188 } 189 p.styleclass { 190 font-style: italic; 191 } 192 .grammar .typelink , p .typelink , td .typelink{ 193 font-family:"Lucida Console", Monaco, monospace; 194 font-size: 14px; 195 color:#039; 196 } 197 td.value .typelink { 198 font-family:"Lucida Console", Monaco, monospace; 199 font-size: 10px; 200 color:#039; 201 } 202 203 /* Oracle FX style */ 204 .fx-code-header { 205 background: #ffffff; 206 background-image:url(fx_code_header.jpg); 207 height: 50px; 208 width: 656px; 209 } 210 211 /* Oracle FX style */ 212 .version { 213 font-family:Verdana, Arial, Helvetica, sans-serif; 214 font-size:10px; 215 padding-top:2px; 216 color:#265F7F; 217 line-height:1.2em; 218 position:relative; 219 left:425px; 220 top:10px; 221 width:200px; 222 text-align:right; 223 } 224 225 /* Color Table Styles */ 226 div.colorsquare { 227 display:inline-block; 228 width:20em; 229 margin: 3px 3px 230 } 231 div.colorsquare > span { 232 background: none repeat scroll 0% 50%; 233 display:inline-block; 234 width:16px; 235 height:16px; 236 border:2px solid black; 237 margin-right:1em; 238 } 239 </style> 240 </head> 241 <body> 242 <div class="fx-code-header"> 243 <div class="version"><br> 244 Release: JavaFX @FXVERSION@</div> 245 </div> 246 <h1>JavaFX CSS Reference Guide</h1> 247 <h2>Contents</h2> 248 <ul class="contents"> 249 <li><a href="#intro">Introduction</a> 250 <ul> 251 <li><a href="#introscenegraph">CSS and the JavaFX Scene Graph</a></li> 252 <li><a href="#introstylesheets">Scene, Parent and SubScene Stylesheets</a></li> 253 <li><a href="#intronaming">Naming Conventions</a></li> 254 <li><a href="#intropublicapi">CSS Public API</a></li> 255 <li><a href="#introinheritance">Inheritance</a></li> 256 <li><a href="#introatrules">@ Rules</a></li> 257 <li><a href="#introexamples">Examples</a></li> 258 <li><a href="#introparserwarnings">Understanding Parser Warnings</a></li> 259 <li><a href="#introlimitations">Limitations</a></li> 260 </ul> 261 </li> 262 <li><a href="#types">Types</a> 263 <ul> 264 <li><a href="#typeinherit">inherit</a></li> 265 <li><a href="#typeboolean"><boolean></a></li> 266 <li><a href="#typestring"><string></a></li> 267 <li><a href="#typenumber"><number> & <integer></a> </li> 268 <li><a href="#typesize"><size></a></li> 269 <li><a href="#typelength"><length></a></li> 270 <li><a href="#typepercentage"><percentage></a></li> 271 <li><a href="#typeangle"><angle></a></li> 272 <li><a href="#typeduration"><duration></a></li> 273 <li><a href="#typepoint"><point></a></li> 274 <li><a href="#typecolorstop"><color-stop></a></li> 275 <li><a href="#typeurl"><uri></a></li> 276 <li><a href="#typeeffect"><effect></a></li> 277 <li><a href="#typefont"><font></a></li> 278 <li><a href="#typepaint"><paint></a></li> 279 <li><a href="#typecolor"><color></a></li> 280 </ul> 281 </li> 282 <li><a href="#stage">Stage</a> 283 <ul> 284 <li>javafx.stage 285 <ul> 286 <li><a href="#popupwindow">PopupWindow</a></li> 287 </ul> 288 </li> 289 </ul> 290 </li> 291 <li><a href="#nodes">Nodes</a> 292 <ul> 293 <li>javafx.scene 294 <ul> 295 <li><a href="#group">Group</a></li> 296 <li><a href="#node">Node</a></li> 297 <li><a href="#parent">Parent</a></li> 298 <li><a href="#scene">Scene</a></li> 299 </ul> 300 </li> 301 </ul> 302 <ul> 303 <li>javafx.scene.image 304 <ul> 305 <li><a href="#imageview">ImageView</a></li> 306 </ul> 307 </li> 308 </ul> 309 <ul> 310 <li>javafx.scene.layout 311 <ul> 312 <li><a href="#anchorpane">AnchorPane</a></li> 313 <li><a href="#border">BorderPane</a></li> 314 <li><a href="#dialogpane">DialogPane</a></li> 315 <li><a href="#flowpane">FlowPane</a></li> 316 <li><a href="#gridpane">GridPane</a></li> 317 <li><a href="#hbox">HBox</a></li> 318 <li><a href="#pane">Pane</a></li> 319 <li><a href="#region">Region</a></li> 320 <li><a href="#stackpane">StackPane</a></li> 321 <li><a href="#tilepane">TilePane</a></li> 322 <li><a href="#vbox">VBox</a></li> 323 </ul> 324 </li> 325 </ul> 326 <ul> 327 <li>javafx.scene.media 328 <ul> 329 <li><a href="#mediaview">MediaView</a></li> 330 </ul> 331 </li> 332 </ul> 333 <ul> 334 <li>javafx.scene.shape 335 <ul> 336 <li><a href="#shape">Shape</a></li> 337 <li><a href="#arc">Arc</a></li> 338 <li><a href="#circle">Circle</a></li> 339 <li><a href="#cubiccurve">CubicCurve</a></li> 340 <li><a href="#ellipse">Ellipse</a></li> 341 <li><a href="#line">Line</a></li> 342 <li><a href="#path">Path</a></li> 343 <li><a href="#polygon">Polygon</a></li> 344 <li><a href="#quadcurve">QuadCurve</a></li> 345 <li><a href="#rectangle">Rectangle</a></li> 346 <li><a href="#svgpath">SVGPath</a></li> 347 </ul> 348 </li> 349 </ul> 350 <ul> 351 <li>javafx.scene.text 352 <ul> 353 <li><a href="#text">Text</a></li> 354 </ul> 355 </li> 356 </ul> 357 <ul> 358 <li>javafx.scene.web 359 <ul> 360 <li><a href="#webview">WebView</a></li> 361 </ul> 362 </li> 363 </ul> 364 </li> 365 <li><a href="#controls">Controls</a> 366 <ul> 367 <li>javafx.scene.control 368 <ul> 369 <li><a href="#accordion">Accordion</a></li> 370 <li><a href="#button">Button</a></li> 371 <li><a href="#buttonbase">ButtonBase</a></li> 372 <li><a href="#cell">Cell</a></li> 373 <li><a href="#checkbox">CheckBox</a></li> 374 <li><a href="#checkmenuitem">CheckMenuItem</a></li> 375 <li><a href="#choicebox">ChoiceBox</a></li> 376 <li><a href="#colorpicker">ColorPicker</a></li> 377 <li><a href="#combobox">ComboBox</a></li> 378 <li><a href="#contextmenu">ContextMenu</a></li> 379 <li><a href="#control">Control</a></li> 380 <li><a href="#datepicker">DatePicker</a></li> 381 <li><a href="#htmleditor">HTMLEditor</a></li> 382 <li><a href="#hyperlink">Hyperlink</a></li> 383 <li><a href="#indexedcell">IndexedCell</a></li> 384 <li><a href="#label">Label</a></li> 385 <li><a href="#labeled">Labeled</a></li> 386 <li><a href="#listcell">ListCell</a></li> 387 <li><a href="#listview">ListView</a></li> 388 <li><a href="#menu">Menu</a></li> 389 <li><a href="#menubar">MenuBar</a></li> 390 <li><a href="#menubutton">MenuButton</a></li> 391 <li><a href="#menuitem">MenuItem</a></li> 392 <li><a href="#pagination">Pagination</a></li> 393 <li><a href="#passwordfield">PasswordField</a></li> 394 <li><a href="#progressbar">ProgressBar</a></li> 395 <li><a href="#progressindicator">ProgressIndicator</a></li> 396 <li><a href="#radiobutton">RadioButton</a></li> 397 <li><a href="#radiomenuitem">RadioMenuItem</a></li> 398 <li><a href="#scrollbar">ScrollBar</a></li> 399 <li><a href="#scrollpane">ScrollPane</a></li> 400 <li><a href="#separator">Separator</a></li> 401 <li><a href="#spinner">Spinner</a></li> 402 <li><a href="#slider">Slider</a></li> 403 <li><a href="#splitmenubutton">SplitMenuButton</a></li> 404 <li><a href="#splitpane">SplitPane</a></li> 405 <li><a href="#tabpane">TabPane</a></li> 406 <li><a href="#tablecolumnheader">TableColumnHeader</a></li> 407 <li><a href="#tableview">TableView</a></li> 408 <li><a href="#text-area">TextArea</a></li> 409 <li><a href="#textinputcontrol">TextInputControl</a></li> 410 <li><a href="#textfield">TextField</a></li> 411 <li><a href="#titledpane">TitledPane</a></li> 412 <li><a href="#togglebutton">ToggleButton</a></li> 413 <li><a href="#toolbar">ToolBar</a></li> 414 <li><a href="#tooltip">Tooltip</a></li> 415 <li><a href="#treecell">TreeCell</a></li> 416 <li><a href="#treetablecell">TreeTableCell</a></li> 417 <li><a href="#treetableview">TreeTableView</a></li> 418 <li><a href="#treeview">TreeView</a></li> 419 <li><a href="#webview">WebView</a></li> 420 </ul> 421 </li> 422 </ul> 423 </li> 424 <li><a href="#charts">Charts</a> 425 <ul> 426 <li> javafx.scene.chart 427 <ul> 428 <li><a href="#areachart">AreaChart</a> </li> 429 <li><a href="#axis">Axis</a> </li> 430 <li><a href="#barchart">BarChart</a> </li> 431 <li><a href="#bubblechart">BubbleChart</a> </li> 432 <li><a href="#categoryaxis">CategoryAxis</a> </li> 433 <li><a href="#chart">Chart</a> </li> 434 <li><a href="#legend">Legend</a> </li> 435 <li><a href="#linechart">LineChart</a> </li> 436 <li><a href="#numberaxis">NumberAxis</a> </li> 437 <li><a href="#piechart">PieChart</a> </li> 438 <li><a href="#scatterchart">ScatterChart</a> </li> 439 <li><a href="#valueaxis">ValueAxis</a> </li> 440 <li><a href="#xychart">XYChart</a> </li> 441 </ul> 442 </li> 443 </ul> 444 </li> 445 <li><a href="#references">References</a></li> 446 </ul> 447 <h2><a id="intro">Introduction</a></h2> 448 <p> 449 Never has styling a Java UI been easier than with JavaFX and Cascading Style Sheets (CSS). Going from one 450 theme to another, or customizing the look of just one control, can all be done through CSS. To the novice, 451 this may be unfamiliar territory; but the learning curve is not that great. Give CSS styling a try and the 452 benefits will soon be apparent. You can also split the design and development workflow, or defer design 453 until later in the project. Up to the last minute changes, and even post-deployment changes, in the UI's 454 look can be achieved through JavaFX CSS. 455 </p> 456 <p> 457 The structure of this document is as follows. First, there is a 458 description of all value types for JavaFX CSS properties.Where 459 appropriate, this includes a grammar for the syntax of values of that 460 type. Then, for each scene‑graph node that supports CSS styles, a table is 461 given that lists the properties that are supported, along with type and 462 semantic information. The pseudo‑classes for each class are also given. 463 The description of CSS properties continues for the controls. For each 464 control, the substructure of that control's skin is given, along with the 465 style‑class names for the Region objects that implement that substructure. 466 </p> 467 <h3><a id="introscenegraph">CSS and the JavaFX Scene Graph</a></h3> 468 <p> 469 JavaFX Cascading Style Sheets (CSS) is based on the W3C CSS version 2.1 <a href="#references">[1]</a> 470 with some additions from current work on version 3 <a href="#references">[2]</a>. 471 JavaFX CSS also has some extensions to CSS in support of specific JavaFX 472 features. The goal for JavaFX CSS is to allow web developers already 473 familiar with CSS for HTML to use CSS to customize and develop themes for 474 JavaFX controls and scene‑graph objects in a natural way. 475 </p> 476 <p> 477 JavaFX has a rich set of extensions to CSS in support of features such as 478 color derivation, property lookup, and multiple background colors and 479 borders for a single node. These features add significant new power for 480 developers and designers and are described in detail in this document. 481 </p> 482 483 <p> 484 To the extent possible, JavaFX CSS follows the W3C standards; however, with few exceptions, JavaFX 485 property names have been prefixed with a vendor extension of "-fx-". Even if these properties seem to be 486 compatible with standard HTML CSS, JavaFX CSS processing assumes that the property values 487 make use of JavaFX CSS extensions. 488 </p> 489 490 <p>CSS styles are applied to nodes in the JavaFX scene‑graph in a way 491 similar to the way CSS styles are applied to elements in the HTML DOM. 492 Styles are first applied to the parent, then to its children. The code is 493 written such that only those branches of the scene‑graph that might need 494 CSS reapplied are visited. A node is styled after it is added to the scene 495 graph. Styles are reapplied when there is a change to the node's 496 pseudo‑class state, style‑class, id, inline style, or parent, or stylesheets 497 are added to or removed from the scene. Note that the Node must be in the 498 scene‑graph for CSS to be applied. The Node does not have 499 to be shown, but must have a non‑null value for its sceneProperty. See 500 <a href="../../../javafx/scene/Node.html#applyCss--">applyCss</a> for more details.</p> 501 502 <p> 503 During a normal scene‑graph pulse, CSS styles are applied before the scene‑graph is 504 laid out and painted. Styles for events that trigger a pseudo‑class state change, 505 such as MouseEvent.MOUSE_ENTERED which triggers the "hover" state, are 506 applied on the next pulse following the event. 507 </p> 508 <p> 509 <a href="http://www.w3.org/TR/css3-selectors/">CSS selectors</a> are used to match styles to scene‑graph 510 nodes. 511 The relationship of a Node to a CSS selector is as follows: 512 <ul> 513 <li> 514 Node's <a href="../../../javafx/scene/Node.html#getTypeSelector--">getTypeSelector</a> method returns a 515 String which is analogous to a CSS <a href="http://www.w3.org/TR/css3-selectors/#type-selectors">Type 516 Selector</a>. 517 By default, this method returns the simple name of the class. Note that the simple name of an inner class 518 or of an anonymous class may not be usable as a type selector. In such a case, this method should be 519 overridden to return 520 a meaningful value. 521 </li> 522 <li> 523 Each node in the scene‑graph has a <a href="../../../javafx/scene/Node.html#getStyleClass--">styleClass 524 property</a>. 525 Note that a node may have more than one style‑class. 526 A Node's styleClass is analogous to the class="..." attribute that can 527 appear on HTML elements. See <a href="http://www.w3.org/TR/css3-selectors/#class-html">Class Selectors</a>. 528 </li> 529 <li> 530 Each node in the scene‑graph has an <strong>id</strong> variable, a 531 string. This is analogous to the id="..." attribute that can appear HTML 532 elements. See <a href="http://www.w3.org/TR/css3-selectors/#id-selectors">ID Selectors</a>. 533 </li> 534 </ul> 535 <p> 536 JavaFX CSS also supports pseudo‑classes, but does not implement the full range of pseudo‑classes as 537 specified in <a href="http://www.w3.org/TR/css3-selectors/#pseudo-classes">Pseudo‑classes</a>. The pseudo‑classes 538 supported by each Node type are given in the tables within this reference. Note that JavaFX does not currently 539 support structural pseudo‑classes. 540 </p> 541 <p> 542 Each node honors a set of properties that depends on the node's JavaFX 543 class (as distinct from its styleClass). The properties honored by each 544 node class are shown in detail in tables later in this document. The 545 property value that is actually applied depends on the precedence of the 546 origin of the rule, as described above, as well as the specificity of the 547 rule's selector as described in CSS 2 <a href="cssref.html#references">[1]</a> 548 . Ultimately, a property value string is converted into a JavaFX value of 549 the appropriate type and is then assigned to an instance variable of the 550 JavaFX object. 551 </p> 552 <h3><a id="introstylesheets">Scene, Parent and SubScene Stylesheets</a></h3> 553 <p> 554 CSS styles can come from style sheets or inline styles. Style sheets are 555 loaded from the URLs specified in the 556 <a href="../../../javafx/scene/Scene.html#getStylesheets--">getStylesheets</a> 557 property of the Scene object. If the scene‑graph contains a Control, a 558 default user agent style sheet is loaded. Inline styles are specified via 559 the Node <span style="font-weight: bold;">setStyle</span> API. Inline 560 styles are analogous to the style="..." attribute of an HTML element. 561 Styles loaded from a Scene's style sheets take precedence over selectors from 562 the user agent style sheet. Inline styles take precedence over 563 styles originating elsewhere. The precedence order of style selectors can be 564 modified using "!important" in a style declaration. 565 </p> 566 <p> 567 Beginning with JavaFX 2.1, the Parent class has a 568 <a href="../../../javafx/scene/Parent.html#getStylesheets--">getStylesheets</a> property, 569 allowing style sheets to be set on a container. This allows for one branch 570 of of the scene‑graph to have a distinct set of styles. Any instance of 571 Parent can have style sheets. A child will take its styles from its own 572 inline styles, the style sheets of all its ancestors, and any style sheets 573 from the Scene. 574 </p> 575 <p> 576 Beginning with JavaFX 8u20, the Scene class has a 577 <a href="../../../javafx/scene/Scene.html#getUserAgentStylesheet--">getUserAgentStylesheet</a> property, 578 allowing a user‑style sheet to be set on a Scene. This allows a Scene 579 to have a set of user‑agent styles distinct from the platform default. When a user‑agent 580 stylesheet is set on a Scene, the user‑agent styles are used instead of the styles from the 581 platform default user‑agent stylesheet. 582 </p> 583 <p> 584 Beginning with JavaFX 8u20, the SubScene class has a 585 <a href="../../../javafx/scene/SubScene.html#getUserAgentStylesheet--">getUserAgentStylesheet</a> property, 586 allowing a user‑style sheet to be set on a SubScene. This allows a SubScene 587 of the scene‑graph to have set of user‑agent styles distinct from the platform default 588 or from the Scene in which the SubScene is contained. When a user‑agent 589 stylesheet is set on a SubScene, the user‑agent styles are used instead of the styles from the 590 platform default user‑agent stylesheet or any user‑agent stylesheet set on the Scene. 591 </p> 592 <p>It is important to note that styles from a stylesheet added to a Scene or Parent, do not affect 593 a SubScene which is a child or descendent of the Scene or Parent. Unless a user‑agent has 594 been set on the SubScene, the SubScene will get styles 595 from the a Scene's user‑agent stylesheet or the platform user‑agent stylesheet.</p> 596 The implementation allows designers to style an application by using style 597 sheets to override property values set from code. For example, a call to <code>rectangle.setFill(Color.YELLOW)</code> 598 can be overridden by an inline‑style or a style from an author stylesheet. This has implications for 599 the cascade; particularly, when does a style from a style sheet override a 600 value set from code? The JavaFX CSS implementation applies the following 601 order of precedence: <cite>a style from a user agent style sheet has lower 602 priority than a value set from code, which has lower priority than a Scene 603 or Parent style sheet. Inline styles have highest precedence. Style sheets 604 from a Parent instance are considered to be more specific than those styles 605 from Scene style sheets.</cite> 606 <h3><a id="intronaming">Naming Conventions</a></h3> 607 <p>Naming conventions have been established for deriving CSS style‑class 608 names from JavaFX class names, and for deriving CSS property names from 609 JavaFX variable names. Note that this is only a naming convention; there 610 is no automatic name conversion. Most JavaFX names use "camel case," that 611 is, mixed case names formed from compound words, where the initial letter 612 of each sub-word is capitalized. Most CSS names in the HTML world are all 613 lower case, with compound words separated by hyphens. The convention is 614 therefore to take JavaFX class names and form their corresponding CSS 615 style‑class name by separating the compound words with hyphens and 616 convering the letters to all lower case. For example, the JavaFX 617 ToggleButton class would have a style‑class of "toggle-button". The 618 convention for mapping JavaFX variable names to CSS property names is 619 similar, with the addition of the "-fx-" prefix. For example, the 620 blendMode variable would have a corresponding CSS property name of 621 "-fx-blend-mode". </p> 622 <h3><a id="intropublicapi">CSS Public API</a></h3> 623 Beginning with JavaFX 8, public API is available for developers to create styleable properties and manage 624 pseudo-class state. Refer to <a href="../../../javafx/css/package-summary.html">javafx.css</a> for details. 625 <h3><a id="introinheritance">Inheritance</a></h3> 626 <p>CSS also provides for certain properties to be inherited by default, or 627 to be inherited if the property value is 'inherit'. If a value is 628 inherited, it is inherited from the computed value of the element's parent 629 in the document tree. In JavaFX, inheritance is similar, except that 630 instead of elements in the document tree, inheritance occurs from parent 631 nodes in the scene‑graph. </p> 632 <p>The following properties inherit by default. Any property can be made to 633 inherit by giving it the value <a href="#typeinherit" class="typelink">"inherit"</a>.</p> 634 <table class="cssmisctable"> 635 <caption>Properties that inherit by default</caption> 636 <thead> 637 <tr> 638 <th scope="col">Class</th> 639 <th scope="col">Property</th> 640 <th scope="col">CSS Property</th> 641 <th scope="col">Initial Value</th> 642 </tr> 643 </thead> 644 <tbody> 645 <tr> 646 <th scope="row">javafx.scene.Node</th> 647 <td>cursor</td> 648 <td>-fx-cursor</td> 649 <td>javafx.scene.Cursor.DEFAULT</td> 650 </tr> 651 <tr> 652 <th scope="row">javafx.scene.text.Text</th> 653 <td>textAlignment</td> 654 <td>-fx-text-alignment</td> 655 <td>javafx.scene.text.TextAlignment.LEFT</td> 656 </tr> 657 <tr> 658 <th scope="row">javafx.scene.text.Font</th> 659 <td>font</td> 660 <td>-fx-font, -fx-font-family, -fx-font-size, -fx-font-weight, -fx-font-style</td> 661 <td>Font.DEFAULT (12px system)</td> 662 </tr> 663 </tbody> 664 </table> 665 <p>Within the hierarchy of JavaFX classes (for example, Rectangle is a 666 subclass of Shape, which in turn is a subclass of Node), the CSS 667 properties of an ancestor are also CSS properties of the descendant. This 668 means that a subclass will respond to the same set of properties as its 669 ancestor classes, and to additional properties it defines itself. So, a 670 Shape supports all the properties of Node plus several more, and Rectangle 671 supports all the properties of Shape plus a couple more. However, because 672 using a JavaFX class name as a type selector is an exact match, providing 673 style declarations for a Shape will not cause a Rectangle to use those 674 values (unless the .css value for the Rectangle's property is "inherit").</p> 675 <p>For font inheritance, the CSS engine looks <span style="font-style:italic;">only</span> for the styles in the table above. When 676 looking for a font to inherit, the search 677 terminates at any node that has a Font property that was set by the user. The user-set font is 678 inherited provided there is not an author or an inline-style that applies specifically to that node. 679 In this case, the inherited font is created from the user-set font and any parts of the applicable 680 author or in-line style. 681 <h3><a id="introatrules">@ Rules</a></h3> 682 <p> 683 Beginning with JavaFX 8u20, the CSS 684 <a href="http://www.w3.org/TR/CSS21/cascade.html#at-import">@import</a> is also partially supported. 685 Only unconditional import is supported. In other words, the media‑type qualifier is not supported. 686 Also, the JavaFX CSS parser is non-compliant with regard to where an @import may appear within a stylesheet 687 (see <a href="http://www.w3.org/TR/CSS21/syndata.html#at-rules">At‑rules</a>). 688 Users are cautioned that this will be fixed in a future release. Adherence to the W3C standard is strongly advised. 689 </p> 690 <p>Since JavaFX 8, the implementation partially supports the CSS3 syntax to load a font from a URL using the 691 <a href="http://www.w3.org/TR/css3-fonts/#the-font-face-rule">@font‑face</a> rule:</p> 692 <textarea rows="8" cols="132"> 693 694 @font-face { 695 font-family: 'sample'; 696 font-style: normal; 697 font-weight: normal; 698 src: local('sample'), url('http://font.samples/resources/sample.ttf';) format('truetype'); 699 } 700 </textarea> 701 <p>This allows public resources for fonts to be used in a JavaFX application. For example, assume the URL 702 "http://font.samples/web?family=samples" returns the @font‑face rule given above. Then the 703 following code shows how the sample font could be used in a JavaFX application.</p> 704 <textarea rows="20" cols="132"> 705 706 import javafx.application.Application; 707 import javafx.scene.Scene; 708 import javafx.scene.control.Label; 709 import javafx.stage.Stage; 710 711 public class HelloFontFace extends Application { 712 @Override public void start(Stage primaryStage) { 713 Label label = new Label("Hello @FontFace"); 714 label.setStyle("-fx-font-family: sample; -fx-font-size: 80;"); 715 Scene scene = new Scene(label); 716 scene.getStylesheets().add("http://font.samples/web?family=samples"); 717 primaryStage.setTitle("Hello @FontFace"); 718 primaryStage.setScene(scene); 719 primaryStage.show(); 720 } 721 722 public static void main(String[] args) { launch(args); } 723 } 724 </textarea> 725 <p>Or, the URL could be imported into a stylesheet with the @import rule.</p> 726 <p>Although the parser will parse the syntax, all @font‑face descriptors are ignored except for 727 the <code>src</code> descriptor. The <code>src</code> descriptor is expected to be a 728 <a href="#typeurl" class="typelink"><url></a>. The <code>format</code> hint is ignored.</p> 729 <h3><a id="introexamples">Examples</a></h3> 730 <p>Consider the following simple JavaFX application: </p> 731 <p class="example">Scene scene = new Scene(new Group()); <br> 732 scene.getStylesheets().add(“test.css”); <br> 733 Rectangle rect = new Rectangle(100,100); <br> 734 rect.setLayoutX(50); <br> 735 rect.setLayoutY(50); <br> 736 rect.getStyleClass().add("my-rect"); <br> 737 ((Group)scene.getRoot()).getChildren().add(rect); </p> 738 <p>Without any styles, this will display a plain black rectangle. If 739 test.css contains the following: </p> 740 <p class="example">.my-rect { -fx-fill: red; }</p> 741 <p>the rectangle will be red instead of black: </p> 742 <p><img src="cssexample1.png" alt="A rectangle with red fill"></p> 743 <p>If test.css contains the following: </p> 744 <p class="example">.my-rect {<br> 745 -fx-fill: yellow;<br> 746 -fx-stroke: green;<br> 747 -fx-stroke-width: 5;<br> 748 -fx-stroke-dash-array: 12 2 4 2;<br> 749 -fx-stroke-dash-offset: 6;<br> 750 -fx-stroke-line-cap: butt;<br> 751 }<br> 752 </p> 753 <p>the result will be a yellow rectangle with a nicely dashed green border: 754 </p> 755 <p><img src="cssexample2.png" alt="A rectangle with yellow fill and a green, dashed border"></p> 756 <h3><a id="introparserwarnings">Understanding 757 Parser Warnings</a></h3> 758 <p>When the JavaFX CSS parser encounters a syntax error, a warning message 759 is emitted which conveys as much information as is available to help 760 resolve the error. For example </p> 761 <p class="example"> WARNING: javafx.css.CssParser declaration 762 Expected '<percent>' while parsing '-fx-background-color' at ?[1,49] 763 </p> 764 <p>The cryptic '<span class="p example">?[1,49]</span>' pertains to the 765 location of the error. The format of the location string is </p> 766 <p class="grammar"><url>[line, position]</p> 767 <p>If the error is found while parsing a file, the file URL will be given. 768 If the error is from an inline style (as in the example above), the URL is 769 given as a question mark. The line and position give an offset into the 770 file or string where the token begins. <em>Please note that the line and 771 position may not be accurate in releases prior to JavaFX 2.2.</em><br> 772 </p> 773 <p>Applications needing to detect errors from the parser can add a listener 774 to the errors property of javafx.css.CssParser. <br> 775 </p> 776 <h3><a id="introlimitations">Limitations</a></h3> 777 <ol> 778 <li> While the JavaFX CSS parser will parse valid CSS syntax, it is not a 779 fully compliant CSS parser. One should not expect the parser to handle 780 syntax not specified in this document.</li> 781 <li>With the exception of @font‑face and @import, @-keyword statements are ignored.</li> 782 <li>The <media-query-list> of the @import statement is not parsed.</li> 783 <li>The structural pseudo‑classes are not supported. </li> 784 <li>The ":active" and ":focus" dynamic pseudo‑classes are not supported. 785 However, <a href="#node">Nodes</a> do support the ":pressed" and 786 ":focused" pseudo‑classes, which are similar. </li> 787 <li>The ":link" and ":visited" pseudo‑classes are not supported in general. 788 However, <a href="#hyperlink">Hyperlink</a> objects can be styled, and 789 they support the ":visited" pseudo‑class. </li> 790 <li>JavaFX CSS does not support comma-separated series of font family names 791 in the -fx-font-family property. The optional line height parameter when 792 specifying fonts is not supported. There is no equivalent for the 793 font-variant property.</li> 794 <li>JavaFX CSS uses the HSB color model instead of the HSL color model. </li> 795 <li>If a property of a node is initialized by calling the set method of the 796 property, the CSS implementation will see this as a user set value and the 797 value will not be overwritten by a style from a user agent style 798 sheet.</li> 799 <li>When parsing a <a href="http://www.w3.org/TR/CSS2/syndata.html#uri">URI</a>, 800 the parser doesn't handle URI escapes nor \<hex-digit>[1,6] code points.</li> 801 </ol> 802 <h2><a id="types">Types</a></h2> 803 <h3><a id="typeinherit">inherit</a></h3> 804 <p>Each property has a type, which determines what kind of value and the 805 syntax for specifying those values. In addition, each property may have a 806 specified value of 'inherit', which means that, for a given node, the 807 property takes the same computed value as the property for the node's 808 parent. The 'inherit' value can be used on properties that are not 809 normally inherited. 810 </p> 811 <p>If the 'inherit' value is set on the root element, the property is 812 assigned its initial value.</p> 813 <h3><a id="typeboolean"><boolean></a></h3> 814 <p>Boolean values can either have the string value of "true" or "false", the 815 values are case insensitive as all CSS is case insensitive.</p> 816 <h3><a id="typestring"><string></a></h3> 817 <p>Strings can either be written with double quotes or with single quotes. 818 Double quotes cannot occur inside double quotes, unless escaped (e.g., as 819 '\"' or as '\22'). Analogously for single quotes (e.g., "\'" or "\27").</p> 820 <p class="example">"this is a 'string'"<br> 821 "this is a \"string\""<br> 822 'this is a "string"'<br> 823 'this is a \'string\''</p> 824 <p>A string cannot directly contain a newline. To include a newline in a 825 string, use an escape representing the line feed character in ISO-10646 826 (U+000A), such as "\A" or "\00000a". This character represents the generic 827 notion of "newline" in CSS. See the 'content' property for an example.</p> 828 <h3><a id="typenumber"><number> & 829 <integer></a></h3> 830 <p>Some value types may have integer values (denoted by <integer>) or 831 real number values (denoted by <number>). Real numbers and integers 832 are specified in decimal notation only. An <integer> consists of one 833 or more digits "0" to "9". A <number> can either be an 834 <integer>, or it can be zero or more digits followed by a dot (.) 835 followed by one or more digits. Both integers and real numbers may be 836 preceded by a "-" or "+" to indicate the sign. -0 is equivalent to 0 and 837 is not a negative number.</p> 838 <p class="grammar">[+|-]? [[0-9]+|[0-9]*"."[0-9]+]</p> 839 <p>Note that many properties that allow an integer or real number as a value 840 actually restrict the value to some range, often to a non-negative value.</p> 841 <h3><a id="typesize"><size></a></h3> 842 <p>A size is a <a href="#typenumber" class="typeref"><number></a> 843 with units of <a href="#typelength" class="typeref"><length></a> or 844 <a href="#typepercentage" class="typeref"><percentage></a>. If a unit 845 is not specified then 'px' is assumed.</p> 846 <h4><a id="typelength"><length></a></h4> 847 <p class="grammar"><a href="#typenumber"><number></a>[ px | mm | cm | 848 in | pt | pc | em | ex ]?</p> 849 <p>No whitespace is allowed between the number and units if provided. Some 850 units are relative and others absolute. </p> 851 <p><strong>Relative</strong></p> 852 <ul> 853 <li><strong>px</strong>: pixels, relative to the viewing device</li> 854 <li><strong>em</strong>: the 'font-size' of the relevant font</li> 855 <li><strong>ex</strong>: the 'x-height' of the relevant font</li> 856 </ul> 857 <p><strong>Absolute</strong></p> 858 <ul> 859 <li><strong>in</strong>: inches — 1 inch is equal to 2.54 860 centimeters.</li> 861 <li><strong>cm</strong>: centimeters</li> 862 <li><strong>mm</strong>: millimeters</li> 863 <li><strong>pt</strong>: points — the points used by CSS 2.1 are 864 equal to 1/72nd of an inch.</li> 865 <li><strong>pc</strong>: picas — 1 pica is equal to 12 points.</li> 866 </ul> 867 <h4><a id="typepercentage"><percentage></a></h4> 868 <p>These are a percentage of some length, typically to the width or height 869 of a node.</p> 870 <p class="grammar"><a href="#typenumber"><number></a>[ % ]</p> 871 <h3><a id="typeangle"><angle></a></h3> 872 <p>An angle is a <a href="#typenumber" class="typeref"><number></a> 873 with one of the following units.</p> 874 <p> </p> 875 <p class="grammar"><a href="#typenumber"><number></a>[ deg | rad | 876 grad | turn ]</p> 877 <ul> 878 <li><strong>deg</strong>: angle in degrees — all other angle units are 879 converted to degrees.</li> 880 <li><strong>rad</strong>: angle in radians</li> 881 <li><strong>grad</strong>: angle in gradians</li> 882 <li><strong>turn</strong>: angle in turns</li> 883 </ul> 884 <h3><a id="typeduration"><duration></a></h3> 885 <p>A duration is a <a href="#typenumber" class="typeref"><number></a> 886 with second or millisecond units, or the value <span class="grammar">indefinite</span>.</p> 887 <p> </p> 888 <p class="grammar">[<a href="#typenumber"><number></a>[ s | ms ]] | indefinite</p> 889 <ul> 890 <li><strong>s</strong>: duration in seconds</li> 891 <li><strong>ms</strong>: duration in milliseconds. One second is 1000 milliseconds.</li> 892 <li><strong>indefinite</strong>: See <a href="../../util/Duration.html#INDEFINITE" class="typelink">Duration.INDEFINITE</a></li> 893 </ul> 894 <p>See also <a href="http://www.w3.org/TR/css3-values/#time" class="typelink">W3C time units</a>.</p> 895 <h3><a id="typepoint"><point></a></h3> 896 <p>A point is an {x,y} coordinate.</p> 897 <p class="grammar">[ [ <length> <length> ] | [ 898 <percentage> | <percentage> ] ]</p> 899 <h3><a id="typecolorstop"><color-stop></a></h3> 900 <p>Stops are per <a href="https://www.w3.org/TR/css3-images/#color-stop-syntax" 901 class="typelink">W3C 902 color-stop syntax</a>.</p> 903 <p class="grammar">[ <a href="#typecolor" class="typeref"><color></a> 904 [ <a href="#typepercentage" class="typeref"><percentage></a> | <a 905 href="#typelength" 906 class="typeref"><length></a>]? 907 ]</p> 908 <p>In a series of <color-stop>, stop distance values must all be 909 <percentage> or <length>. Furthermore, if <length> 910 values are used, then the distance value for first and last stop in the 911 series must be specified. This restriction may be removed in a future 912 release.</p> 913 <p>"<span style="color: #009900; ">red, white 70%, blue</span>" is valid since the 914 distance for red and blue is assumed to be 0% and 100%, respectively.</p> 915 <p>"<span style="color: #009900; ">red 10, white, blue 90</span>" is valid. Because 916 distance for red and blue is 10 and 90, respectively, the distance for 917 white can be calculated.</p> 918 <p>"<span style="color: #009900; ">red, white 70, blue</span>" is <span style="font-style:italic;">not</span> valid 919 since distance units do not agree.</p> 920 <p>"<span style="color: #009900; ">red, white, blue</span>" is valid. The stops are 921 distributed evenly between 0% and 100%.</p> 922 <h3><a id="typeurl"><uri></a></h3> 923 <p class="grammar">url ( [\"\']? <address> [\"\']? )</p> 924 <p><span class="grammar"><address></span> is a hierarchical URI of the form [scheme:][//authority][path] <a href="#references">(see [2])</a>. 925 For example:</p> 926 <p class="example"> 927 url(http://example.com/images/Duke.png)<br> 928 url(/com/example/javafx/app/images/Duke.png)<br> 929 </p> 930 <p>If the <span class="grammar"><address></span> does not have a [scheme:] component, the <span class="grammar"><address></span> 931 is considered to be the [path] component only. 932 A leading '/' character indicates that the [path] is relative to the 933 root of the classpath. If the the style appears in a stylesheet and 934 has no leading '/' character, the path is relative to the base URI of 935 the stylesheet. If the style appears in an inline style, the path is 936 relative to the root of the classpath (regardless of whether or not 937 there is a leading '/'). 938 </p> 939 <table class="cssmisctable"> 940 <caption>Examples of Resolving URLs in Stylesheets</caption> 941 <thead> 942 <tr> 943 <th scope="col">Stylesheet URL</th><th scope="col">URL in Style</th><th scope="col">Resolves to</th> 944 </tr> 945 </thead> 946 <tbody> 947 <tr> 948 <th scope="row">file:///some/path/build/classes/com/mycompany/myapp/mystyles.css</th> 949 <td>url(images/Duke.png)</td> 950 <td>file:///some/path/build/classes/com/mycompany/myapp/images/Duke.png</td> 951 </tr> 952 <tr> 953 <th scope="row">file:///some/path/build/classes/com/mycompany/myapp/mystyles.css</th> 954 <td>url(../images/Duke.png)</td> 955 <td>file:///some/path/build/classes/com/mycompany/images/Duke.png</td> 956 </tr> 957 <tr> 958 <th scope="row">jar:file:/some/path/build/myapp.jar!/com/mycompany/myapp/mystyles.css</th> 959 <td>url(images/Duke.png)</td> 960 <td>jar:file:/some/path/build/myapp.jar!/com/mycompany/myapp/images/Duke.png</td> 961 </tr> 962 </tbody> 963 </table> 964 <p> </p> 965 <table class="cssmisctable"> 966 <caption>Examples of Resolving URLs in Inline Styles</caption> 967 <thead> 968 <tr> 969 <th scope="col">Classpath</th><th scope="col">URL in Style</th><th scope="col">Resolved URL</th> 970 </tr> 971 </thead> 972 <tbody> 973 <tr> 974 <th scope="row">file:///some/path/build/classes</th> 975 <td>url(/com/mycompany/resources/images/Duke.png)</td> 976 <td>file:///some/path/build/classes/com/mycompany/resources/images/Duke.png</td> 977 </tr> 978 <tr> 979 <th scope="row">file:///some/path/build/myapp.jar</th> 980 <td>url(/com/mycompany/resources/images/Duke.png)</td> 981 <td>jar:file:/some/path/build/myapp.jar!/com/mycompany/resources/images/Duke.png</td> 982 </tr> 983 </tbody> 984 </table> 985 <p>Note that for inline styles, leading dot-segments (e.g. '..' or '.') do resolve since the path is always 986 anchored at the root of the classpath.</p> 987 <p>As an example, the code snippet below creates a scene filled with a fictional 'Duke.png' image, located in an 988 'image' directory:</p> 989 <textarea rows="9" cols="132"> 990 991 @Override public void start(Stage stage) { 992 StackPane root = new StackPane(); 993 root.setStyle("-fx-background-image: url(images/Duke.png);"); 994 Scene scene = new Scene(root, 300, 250); 995 stage.setScene(scene); 996 stage.show(); 997 } 998 </textarea> 999 <p>The same style would work equally as well from a stylesheet.</p> 1000 <h3><a id="typeeffect"><effect></a></h3> 1001 <p>JavaFX CSS currently supports the DropShadow and InnerShadow effects from 1002 the JavaFX platform. See the class documentation in javafx.scene.effect 1003 for further details about the semantics of the various effect parameters.</p> 1004 <h4>Drop Shadow</h4> 1005 <p>A high-level effect that renders a shadow of the given content behind the 1006 content.</p> 1007 <p><span class="grammar">dropshadow( <blur-type> , <a href="#typecolor" 1008 class="typelink"><color></a> 1009 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber" 1010 class="typelink"><number></a> 1011 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber" 1012 class="typelink"><number></a> 1013 )</span></p> 1014 <p style="margin-left: 40px;"><span class="grammar"><blur-type> = [ 1015 gaussian | one-pass-box | three-pass-box | two-pass-box ]<br> 1016 <a href="#typecolor" class="typelink"><color></a></span> The 1017 shadow Color.<br> 1018 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span> 1019 The radius of the shadow blur kernel. In the range [0.0 ... 127.0], 1020 typical value 10.<br> 1021 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span> 1022 The spread of the shadow. The spread is the portion of the radius where 1023 the contribution of the source material will be 100%. The remaining 1024 portion of the radius will have a contribution controlled by the blur 1025 kernel. A spread of 0.0 will result in a distribution of the shadow 1026 determined entirely by the blur algorithm. A spread of 1.0 will result in 1027 a solid growth outward of the source material opacity to the limit of the 1028 radius with a very sharp cutoff to transparency at the radius. Values 1029 should be in the range [0.0 ... 1.0].<br> 1030 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span> 1031 The shadow offset in the x direction, in pixels. <br> 1032 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span> 1033 The shadow offset in the y direction, in pixels. </p> 1034 <h4>Inner Shadow</h4> 1035 <p>A high-level effect that renders a shadow inside the edges of the given 1036 content.</p> 1037 <p><span class="grammar">innershadow( <blur-type> , <a href="#typecolor" 1038 class="typelink"><color></a> 1039 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber" 1040 class="typelink"><number></a> 1041 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber" 1042 class="typelink"><number></a> 1043 )</span></p> 1044 <p style="margin-left: 40px;"><span class="grammar"><blur-type> = [ 1045 gaussian | one-pass-box | three-pass-box | two-pass-box ]<br> 1046 </span><span class="grammar"><a href="#typecolor" class="typelink"><color></a></span> 1047 The shadow Color.<br> 1048 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span> 1049 The radius of the shadow blur kernel. In the range [0.0 ... 127.0], 1050 typical value 10.<br> 1051 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span> 1052 The choke of the shadow. The choke is the portion of the radius where the 1053 contribution of the source material will be 100%. The remaining portion of 1054 the radius will have a contribution controlled by the blur kernel. A choke 1055 of 0.0 will result in a distribution of the shadow determined entirely by 1056 the blur algorithm. A choke of 1.0 will result in a solid growth inward of 1057 the shadow from the edges to the limit of the radius with a very sharp 1058 cutoff to transparency inside the radius. Values should be in the range 1059 [0.0 ... 1.0].<br> 1060 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span> 1061 The shadow offset in the x direction, in pixels. <br> 1062 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span> 1063 The shadow offset in the y direction, in pixels. </p> 1064 <h3><a id="typefont"><font></a></h3> 1065 <p>JavaFX CSS supports the ability to specify fonts using separate family, 1066 size, style, and weight properties, as well as the ability to specify a 1067 font using a single shorthand property. There are four value types related 1068 to fonts plus a shorthand property that encompasses all four properties. 1069 The font-related types are as follows. </p> 1070 <p><span class="grammar"><font-family></span>The string name of the 1071 font family. An actual font family name available on the system can be 1072 used, or one of the following generic family names can be used:</p> 1073 <ul> 1074 <li>'serif' (e.g., Times)</li> 1075 <li>'sans-serif' (e.g., Helvetica)</li> 1076 <li>'cursive' (e.g., Zapf-Chancery)</li> 1077 <li>'fantasy' (e.g., Western)</li> 1078 <li>'monospace' (e.g., Courier)</li> 1079 </ul> 1080 <p><span class="grammar"><font-size></span> The size of the font, 1081 using the <span class="grammar"><size></span> syntax.</p> 1082 <p><span class="grammar"><font-style></span> The font's style, using 1083 the following syntax:<br> 1084 <span class="grammar">[ normal | italic | oblique ]</span></p> 1085 <p><span class="grammar"><font-weight></span> The font's weight, using 1086 the following syntax:<br> 1087 <span class="grammar">[ normal | bold | bolder | lighter | 100 | 200 | 300 1088 | 400 | 500 | 600 | 700 | 800 | 900 ]</span></p> 1089 <p><span class="grammar"><font></span> This font shorthand property 1090 can be used in place of the above properties. It uses the following 1091 syntax:<br> 1092 <span class="grammar">[[ <font-style> || <font-weight> ]? 1093 <font-size> <font-family> ]</span></p> 1094 <h4><a id="fontprops">Font Properties</a></h4> 1095 <p>Most classes that use text will support the following font properties. In 1096 some cases a similar set of properties will be supported but with a 1097 different prefix instead of "-fx-font".</p> 1098 <table class="csspropertytable"> 1099 <caption>Available CSS Properties</caption> 1100 <thead> 1101 <tr> 1102 <th class="propertyname" scope="col">CSS Property</th> 1103 <th class="value" scope="col">Values</th> 1104 <th scope="col">Default</th> 1105 <th scope="col">Comments</th> 1106 </tr> 1107 </thead> 1108 <tbody> 1109 <tr> 1110 <th class="propertyname" scope="row">-fx-font</th> 1111 <td class="value"><a href="#typefont" class="typelink"><font></a></td> 1112 <td>inherit</td> 1113 <td>shorthand property for font-size, font-family, font-weight and 1114 font-style</td> 1115 </tr> 1116 <tr> 1117 <th class="propertyname" scope="row">-fx-font-family</th> 1118 <td class="value"><a href="#typefont" class="typelink"><font-family></a></td> 1119 <td>inherit</td> 1120 <td> </td> 1121 </tr> 1122 <tr> 1123 <th class="propertyname" scope="row">-fx-font-size</th> 1124 <td class="value"><a href="#typefont" class="typelink"><font-size></a></td> 1125 <td>inherit</td> 1126 <td> </td> 1127 </tr> 1128 <tr> 1129 <th class="propertyname" scope="row">-fx-font-style</th> 1130 <td class="value"><a href="#typefont" class="typelink"><font-style></a></td> 1131 <td>inherit</td> 1132 <td> </td> 1133 </tr> 1134 <tr> 1135 <th class="propertyname" scope="row">-fx-font-weight</th> 1136 <td class="value"><a href="#typefont" class="typelink"><font-weight></a></td> 1137 <td>inherit</td> 1138 <td> </td> 1139 </tr> 1140 </tbody> 1141 </table> 1142 <h3><a id="typepaint"><paint></a></h3> 1143 <p>Paint values can either be a solid color specified in one of the color 1144 syntaxes, they can be a linear or radial gradient, or an image-pattern.</p> 1145 <p class="grammar"><a href="#typecolor" class="typelink"><color></a> | 1146 <a href="#typelinear-gradient" class="typelink"><linear-gradient></a> | 1147 <a href="#typeradial-gradient" class="typelink"><radial-gradient></a> | 1148 <a href="#typeimage-pattern" class="typelink"><image-pattern></a> 1149 <a href="#typeimage-pattern" class="typelink"><repeating-image-pattern></a></p> 1150 <h4>Linear Gradients<span class="grammar" style="font-size: smaller;"> 1151 <a id="typelinear-gradient"><linear-gradient></a> 1152 </span></h4> 1153 <p class="grammar">linear-gradient( [ [from <a href="#typepoint" class="typelink"><point></a> 1154 to <a href="#typepoint" class="typelink"><point></a>] | [ to 1155 <side-or-corner>], ]? [ [ repeat | reflect ], ]? <a href="#typecolorstop" 1156 class="typelink"><color-stop></a>[, 1157 <a href="#typecolorstop" class="typelink"><color-stop></a>]+) <br> 1158 <br> 1159 where <side-or-corner> = [left | right] || [top | bottom] </p> 1160 <p> </p> 1161 <p>Linear gradient creates a gradient going though all the stop colors along 1162 the line between the "from" <a href="#typepoint" class="typelink"><point></a> 1163 and the "to" <a href="#typepoint" class="typelink"><point></a>. If 1164 the points are percentages, then they are relative to the size of the area 1165 being filled. Percentage and length sizes can not be mixed in a single 1166 gradient function.</p> 1167 <p> If neither repeat nor reflect are given, then the CycleMethod defaults 1168 "NO_CYCLE".<br> 1169 If neither [from <point> to <point>] nor [ to 1170 <side-or-corner> ] are given, then the gradient direction defaults 1171 to 'to bottom'.<br> 1172 Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax." 1173 class="typelink">W3C 1174 color-stop syntax</a> and are normalized accordingly. </p> 1175 <p>This example will create a gradient from top left to bottom right of the 1176 filled area with red at the top left corner and black at the bottom right.</p> 1177 <p class="example">linear-gradient(to bottom right, red, black)</p> 1178 <p>This is equivalent to: </p> 1179 <p class="example">linear-gradient(from 0% 0% to 100% 100%, red 0%, black 1180 100%)</p> 1181 <p>This more complex example will create a 50px high bar at the top with a 3 1182 color gradient with white underneath for the rest of the filled area.</p> 1183 <p class="example">linear-gradient(from 0px 0px to 0px 50px, gray, darkgray 1184 50%, dimgray 99%, white)</p> 1185 <p><span style="color: #af0000; ">The following syntax for linear gradient does not 1186 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX 1187 2.0 CSS parser supports the syntax but this support may be removed in 1188 later releases.</span></p> 1189 <p class="grammar"><span style="color: #af0000; ">linear (<size>, <size>) 1190 to (<size>, <size>) stops [ (<number>,<color>) 1191 ]+ [ repeat | reflect ]?</span></p> 1192 <h4>Radial Gradients <span class="grammar" style="font-size: smaller;"> 1193 <a id="typeradial-gradient"><radial-gradient></a> 1194 </span></h4> 1195 <p class="grammar">radial-gradient([ focus-angle <a href="#typeangle" class="typelink"><angle></a>, 1196 ]? [ focus-distance <a href="#typepercentage" class="typelink"><percentage></a>, 1197 ]? [ center <a href="#typepoint" class="typelink"><point></a>, ]? 1198 radius [ <a href="#typelength" class="typelink"><length></a> | <a 1199 href="#typepercentage" 1200 class="typelink"><percentage></a> 1201 ] [ [ repeat | reflect ], ]? <a href="#typecolorstop" class="typelink"><color-stop></a>[, 1202 <a href="#typecolorstop" class="typelink"><color-stop></a>]+) </p> 1203 <p>Radial gradient creates a gradient going though all the stop colors radiating outward from 1204 the <a href="#typepoint" class="typelink">center point</a> 1205 to the <a href="#typelength" class="typelink">radius</a>. If the center point is not given, 1206 the center defaults to (0,0). Percentage values are relative to the size of the area 1207 being filled. Percentage and length sizes can not be mixed in a single gradient function.</p> 1208 <p> If neither repeat nor reflect are given, then the CycleMethod defaults 1209 "NO_CYCLE".<br> 1210 Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax." 1211 class="typelink">W3C 1212 color-stop syntax</a> and are normalized accordingly. </p> 1213 <p>Following are examples of the use of radial-gradient:</p> 1214 <p class="example">radial-gradient(radius 100%, red, darkgray, black)</p> 1215 <p class="example">radial-gradient(focus-angle 45deg, focus-distance 20%, 1216 center 25% 25%, radius 50%, reflect, gray, darkgray 75%, dimgray)</p> 1217 <p><span style="color: #af0000; ">The following syntax for radial gradient does not 1218 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX 1219 2.0 CSS parser supports the syntax but this support may be removed in 1220 later releases.</span></p> 1221 <p class="grammar"><span style="color: #af0000; ">radial [focus-angle <number> 1222 | <number> ] ]? [ focus-distance <size> ]? [ center 1223 <size,size> ]? <size> stops [ ( <number>, 1224 <color> ) ]+ [ repeat | reflect ]?</span></p> 1225 <h4>Image Paint <span class="grammar" style="font-size: smaller;"> 1226 <a id="typeimage-pattern"><image-pattern></a> 1227 </span></h4> 1228 <p class="grammar">image-pattern(<a href="#typestring" class="typelink"><string></a>, 1229 [<a href="#typesize" class="typelink"><size></a>, 1230 <a href="#typesize" class="typelink"><size></a>, 1231 <a href="#typesize" class="typelink"><size></a>, 1232 <a href="#typesize" class="typelink"><size></a>[, 1233 <a href="#typeboolean" class="typelink"><boolean></a>]?]?)</p> 1234 <p>The parameters, in order, are:<br> 1235 <p style="margin-left: 40px;"> 1236 <span class="grammar"><a href="#typestring" class="typelink"><string></a></span> 1237 The URL of the image.<br> 1238 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span> 1239 The <span style="font-style:italic;">x</span> origin of the anchor rectangle.<br> 1240 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span> 1241 The <span style="font-style: italic;">y</span> origin of the anchor rectangle.<br> 1242 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span> 1243 The width of the anchor rectangle.<br> 1244 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span> 1245 The height of the anchor rectangle.<br> 1246 <span class="grammar"><a href="#typeboolean" class="typelink"><boolean></a></span> 1247 The proportional flag which indicates whether start and end locations are proportional or absolute<br> 1248 </p> 1249 <p>For a full explanation of the parameters, refer to the 1250 <a href="../paint/ImagePattern.html" class="typelink">ImagePattern</a> javadoc.</p> 1251 <p>Following are examples of the use of image-pattern:</p> 1252 <p class="example">image-pattern("images/Duke.png")</p> 1253 <p class="example">image-pattern("images/Duke.png", 20%, 20%, 80%, 80%)</p> 1254 <p class="example">image-pattern("images/Duke.png", 20%, 20%, 80%, 80%, true)</p> 1255 <p class="example">image-pattern("images/Duke.png", 20, 20, 80, 80, false)</p> 1256 1257 <p>Related, there is the <code>repeating-image-pattern</code> function which is a shorthand 1258 for producing tiled image based fills. It is equivalent to 1259 <p class="example">image-pattern("images/Duke.png", 0, 0, imageWidth, imageHeight, false)</p> 1260 1261 <p class="grammar">repeating-image-pattern(<a href="#typestring" class="typelink"><string></a>)</p> 1262 <p>The only parameter is the uri of the image. Following is an example of the use of image-pattern:</p> 1263 <p class="example">repeating-image-pattern("com/mycompany/myapp/images/Duke.png")</p> 1264 1265 1266 1267 <h3><a id="typecolor"><color></a></h3> 1268 <p class="grammar"><named-color> | <looked-up-color> | 1269 <rgb-color> | <hsb-color> | <color-function></p> 1270 <h4>Named Colors <span class="grammar" style="font-size: smaller;"><named-color></span></h4> 1271 <p>CSS supports a bunch of named constant colors. Named colors can be 1272 specified with just their unquoted name for example: </p> 1273 <p class="example">.button {<br> 1274 -fx-background-color: red;<br> 1275 }</p> 1276 <p>The named colors that are available in CSS are:</p> 1277 1278 <div style="margin:0 3em"> 1279 <div class="colorsquare"><span style="background-color:aliceblue;"> </span>aliceblue = #f0f8ff</div> 1280 <div class="colorsquare"><span style="background-color:antiquewhite;"> </span>antiquewhite = #faebd7</div> 1281 <div class="colorsquare"><span style="background-color:aqua;"> </span>aqua = #00ffff</div> 1282 <div class="colorsquare"><span style="background-color:aquamarine;"> </span>aquamarine = #7fffd4</div> 1283 <div class="colorsquare"><span style="background-color:azure;"> </span>azure = #f0ffff</div> 1284 <div class="colorsquare"><span style="background-color:beige;"> </span>beige = #f5f5dc</div> 1285 <div class="colorsquare"><span style="background-color:bisque;"> </span>bisque = #ffe4c4</div> 1286 <div class="colorsquare"><span style="background-color:black;"> </span>black = #000000</div> 1287 <div class="colorsquare"><span style="background-color:blanchedalmond;"> </span>blanchedalmond = #ffebcd</div> 1288 <div class="colorsquare"><span style="background-color:blue;"> </span>blue = #0000ff</div> 1289 <div class="colorsquare"><span style="background-color:blueviolet;"> </span>blueviolet = #8a2be2</div> 1290 <div class="colorsquare"><span style="background-color:brown;"> </span>brown = #a52a2a</div> 1291 <div class="colorsquare"><span style="background-color:burlywood;"> </span>burlywood = #deb887</div> 1292 <div class="colorsquare"><span style="background-color:cadetblue;"> </span>cadetblue = #5f9ea0</div> 1293 <div class="colorsquare"><span style="background-color:chartreuse;"> </span>chartreuse = #7fff00</div> 1294 <div class="colorsquare"><span style="background-color:chocolate;"> </span>chocolate = #d2691e</div> 1295 <div class="colorsquare"><span style="background-color:coral;"> </span>coral = #ff7f50</div> 1296 <div class="colorsquare"><span style="background-color:cornflowerblue;"> </span>cornflowerblue = #6495ed</div> 1297 <div class="colorsquare"><span style="background-color:cornsilk;"> </span>cornsilk = #fff8dc</div> 1298 <div class="colorsquare"><span style="background-color:crimson;"> </span>crimson = #dc143c</div> 1299 <div class="colorsquare"><span style="background-color:cyan;"> </span>cyan = #00ffff</div> 1300 <div class="colorsquare"><span style="background-color:darkblue;"> </span>darkblue = #00008b</div> 1301 <div class="colorsquare"><span style="background-color:darkcyan;"> </span>darkcyan = #008b8b</div> 1302 <div class="colorsquare"><span style="background-color:darkgoldenrod;"> </span>darkgoldenrod = #b8860b</div> 1303 <div class="colorsquare"><span style="background-color:darkgray;"> </span>darkgray = #a9a9a9</div> 1304 <div class="colorsquare"><span style="background-color:darkgreen;"> </span>darkgreen = #006400</div> 1305 <div class="colorsquare"><span style="background-color:darkgrey;"> </span>darkgrey = #a9a9a9</div> 1306 <div class="colorsquare"><span style="background-color:darkkhaki;"> </span>darkkhaki = #bdb76b</div> 1307 <div class="colorsquare"><span style="background-color:darkmagenta;"> </span>darkmagenta = #8b008b</div> 1308 <div class="colorsquare"><span style="background-color:darkolivegreen;"> </span>darkolivegreen = #556b2f</div> 1309 <div class="colorsquare"><span style="background-color:darkorange;"> </span>darkorange = #ff8c00</div> 1310 <div class="colorsquare"><span style="background-color:darkorchid;"> </span>darkorchid = #9932cc</div> 1311 <div class="colorsquare"><span style="background-color:darkred;"> </span>darkred = #8b0000</div> 1312 <div class="colorsquare"><span style="background-color:darksalmon;"> </span>darksalmon = #e9967a</div> 1313 <div class="colorsquare"><span style="background-color:darkseagreen;"> </span>darkseagreen = #8fbc8f</div> 1314 <div class="colorsquare"><span style="background-color:darkslateblue;"> </span>darkslateblue = #483d8b</div> 1315 <div class="colorsquare"><span style="background-color:darkslategray;"> </span>darkslategray = #2f4f4f</div> 1316 <div class="colorsquare"><span style="background-color:darkslategrey;"> </span>darkslategrey = #2f4f4f</div> 1317 <div class="colorsquare"><span style="background-color:darkturquoise;"> </span>darkturquoise = #00ced1</div> 1318 <div class="colorsquare"><span style="background-color:darkviolet;"> </span>darkviolet = #9400d3</div> 1319 <div class="colorsquare"><span style="background-color:deeppink;"> </span>deeppink = #ff1493</div> 1320 <div class="colorsquare"><span style="background-color:deepskyblue;"> </span>deepskyblue = #00bfff</div> 1321 <div class="colorsquare"><span style="background-color:dimgray;"> </span>dimgray = #696969</div> 1322 <div class="colorsquare"><span style="background-color:dimgrey;"> </span>dimgrey = #696969</div> 1323 <div class="colorsquare"><span style="background-color:dodgerblue;"> </span>dodgerblue = #1e90ff</div> 1324 <div class="colorsquare"><span style="background-color:firebrick;"> </span>firebrick = #b22222</div> 1325 <div class="colorsquare"><span style="background-color:floralwhite;"> </span>floralwhite = #fffaf0</div> 1326 <div class="colorsquare"><span style="background-color:forestgreen;"> </span>forestgreen = #228b22</div> 1327 <div class="colorsquare"><span style="background-color:fuchsia;"> </span>fuchsia = #ff00ff</div> 1328 <div class="colorsquare"><span style="background-color:gainsboro;"> </span>gainsboro = #dcdcdc</div> 1329 <div class="colorsquare"><span style="background-color:ghostwhite;"> </span>ghostwhite = #f8f8ff</div> 1330 <div class="colorsquare"><span style="background-color:gold;"> </span>gold = #ffd700</div> 1331 <div class="colorsquare"><span style="background-color:goldenrod;"> </span>goldenrod = #daa520</div> 1332 <div class="colorsquare"><span style="background-color:gray;"> </span>gray = #808080</div> 1333 <div class="colorsquare"><span style="background-color:green;"> </span>green = #008000</div> 1334 <div class="colorsquare"><span style="background-color:greenyellow;"> </span>greenyellow = #adff2f</div> 1335 <div class="colorsquare"><span style="background-color:grey;"> </span>grey = #808080</div> 1336 <div class="colorsquare"><span style="background-color:honeydew;"> </span>honeydew = #f0fff0</div> 1337 <div class="colorsquare"><span style="background-color:hotpink;"> </span>hotpink = #ff69b4</div> 1338 <div class="colorsquare"><span style="background-color:indianred;"> </span>indianred = #cd5c5c</div> 1339 <div class="colorsquare"><span style="background-color:indigo;"> </span>indigo = #4b0082</div> 1340 <div class="colorsquare"><span style="background-color:ivory;"> </span>ivory = #fffff0</div> 1341 <div class="colorsquare"><span style="background-color:khaki;"> </span>khaki = #f0e68c</div> 1342 <div class="colorsquare"><span style="background-color:lavender;"> </span>lavender = #e6e6fa</div> 1343 <div class="colorsquare"><span style="background-color:lavenderblush;"> </span>lavenderblush = #fff0f5</div> 1344 <div class="colorsquare"><span style="background-color:lawngreen;"> </span>lawngreen = #7cfc00</div> 1345 <div class="colorsquare"><span style="background-color:lemonchiffon;"> </span>lemonchiffon = #fffacd</div> 1346 <div class="colorsquare"><span style="background-color:lightblue;"> </span>lightblue = #add8e6</div> 1347 <div class="colorsquare"><span style="background-color:lightcoral;"> </span>lightcoral = #f08080</div> 1348 <div class="colorsquare"><span style="background-color:lightcyan;"> </span>lightcyan = #e0ffff</div> 1349 <div class="colorsquare"><span style="background-color:lightgoldenrodyellow;"> </span>lightgoldenrodyellow = #fafad2</div> 1350 <div class="colorsquare"><span style="background-color:lightgray;"> </span>lightgray = #d3d3d3</div> 1351 <div class="colorsquare"><span style="background-color:lightgreen;"> </span>lightgreen = #90ee90</div> 1352 <div class="colorsquare"><span style="background-color:lightgrey;"> </span>lightgrey = #d3d3d3</div> 1353 <div class="colorsquare"><span style="background-color:lightpink;"> </span>lightpink = #ffb6c1</div> 1354 <div class="colorsquare"><span style="background-color:lightsalmon;"> </span>lightsalmon = #ffa07a</div> 1355 <div class="colorsquare"><span style="background-color:lightseagreen;"> </span>lightseagreen = #20b2aa</div> 1356 <div class="colorsquare"><span style="background-color:lightskyblue;"> </span>lightskyblue = #87cefa</div> 1357 <div class="colorsquare"><span style="background-color:lightslategray;"> </span>lightslategray = #778899</div> 1358 <div class="colorsquare"><span style="background-color:lightslategrey;"> </span>lightslategrey = #778899</div> 1359 <div class="colorsquare"><span style="background-color:lightsteelblue;"> </span>lightsteelblue = #b0c4de</div> 1360 <div class="colorsquare"><span style="background-color:lightyellow;"> </span>lightyellow = #ffffe0</div> 1361 <div class="colorsquare"><span style="background-color:lime;"> </span>lime = #00ff00</div> 1362 <div class="colorsquare"><span style="background-color:limegreen;"> </span>limegreen = #32cd32</div> 1363 <div class="colorsquare"><span style="background-color:linen;"> </span>linen = #faf0e6</div> 1364 <div class="colorsquare"><span style="background-color:magenta;"> </span>magenta = #ff00ff</div> 1365 <div class="colorsquare"><span style="background-color:maroon;"> </span>maroon = #800000</div> 1366 <div class="colorsquare"><span style="background-color:mediumaquamarine;"> </span>mediumaquamarine = #66cdaa</div> 1367 <div class="colorsquare"><span style="background-color:mediumblue;"> </span>mediumblue = #0000cd</div> 1368 <div class="colorsquare"><span style="background-color:mediumorchid;"> </span>mediumorchid = #ba55d3</div> 1369 <div class="colorsquare"><span style="background-color:mediumpurple;"> </span>mediumpurple = #9370db</div> 1370 <div class="colorsquare"><span style="background-color:mediumseagreen;"> </span>mediumseagreen = #3cb371</div> 1371 <div class="colorsquare"><span style="background-color:mediumslateblue;"> </span>mediumslateblue = #7b68ee</div> 1372 <div class="colorsquare"><span style="background-color:mediumspringgreen;"> </span>mediumspringgreen = #00fa9a</div> 1373 <div class="colorsquare"><span style="background-color:mediumturquoise;"> </span>mediumturquoise = #48d1cc</div> 1374 <div class="colorsquare"><span style="background-color:mediumvioletred;"> </span>mediumvioletred = #c71585</div> 1375 <div class="colorsquare"><span style="background-color:midnightblue;"> </span>midnightblue = #191970</div> 1376 <div class="colorsquare"><span style="background-color:mintcream;"> </span>mintcream = #f5fffa</div> 1377 <div class="colorsquare"><span style="background-color:mistyrose;"> </span>mistyrose = #ffe4e1</div> 1378 <div class="colorsquare"><span style="background-color:moccasin;"> </span>moccasin = #ffe4b5</div> 1379 <div class="colorsquare"><span style="background-color:navajowhite;"> </span>navajowhite = #ffdead</div> 1380 <div class="colorsquare"><span style="background-color:navy;"> </span>navy = #000080</div> 1381 <div class="colorsquare"><span style="background-color:oldlace;"> </span>oldlace = #fdf5e6</div> 1382 <div class="colorsquare"><span style="background-color:olive;"> </span>olive = #808000</div> 1383 <div class="colorsquare"><span style="background-color:olivedrab;"> </span>olivedrab = #6b8e23</div> 1384 <div class="colorsquare"><span style="background-color:orange;"> </span>orange = #ffa500</div> 1385 <div class="colorsquare"><span style="background-color:orangered;"> </span>orangered = #ff4500</div> 1386 <div class="colorsquare"><span style="background-color:orchid;"> </span>orchid = #da70d6</div> 1387 <div class="colorsquare"><span style="background-color:palegoldenrod;"> </span>palegoldenrod = #eee8aa</div> 1388 <div class="colorsquare"><span style="background-color:palegreen;"> </span>palegreen = #98fb98</div> 1389 <div class="colorsquare"><span style="background-color:paleturquoise;"> </span>paleturquoise = #afeeee</div> 1390 <div class="colorsquare"><span style="background-color:palevioletred;"> </span>palevioletred = #db7093</div> 1391 <div class="colorsquare"><span style="background-color:papayawhip;"> </span>papayawhip = #ffefd5</div> 1392 <div class="colorsquare"><span style="background-color:peachpuff;"> </span>peachpuff = #ffdab9</div> 1393 <div class="colorsquare"><span style="background-color:peru;"> </span>peru = #cd853f</div> 1394 <div class="colorsquare"><span style="background-color:pink;"> </span>pink = #ffc0cb</div> 1395 <div class="colorsquare"><span style="background-color:plum;"> </span>plum = #dda0dd</div> 1396 <div class="colorsquare"><span style="background-color:powderblue;"> </span>powderblue = #b0e0e6</div> 1397 <div class="colorsquare"><span style="background-color:purple;"> </span>purple = #800080</div> 1398 <div class="colorsquare"><span style="background-color:red;"> </span>red = #ff0000</div> 1399 <div class="colorsquare"><span style="background-color:rosybrown;"> </span>rosybrown = #bc8f8f</div> 1400 <div class="colorsquare"><span style="background-color:royalblue;"> </span>royalblue = #4169e1</div> 1401 <div class="colorsquare"><span style="background-color:saddlebrown;"> </span>saddlebrown = #8b4513</div> 1402 <div class="colorsquare"><span style="background-color:salmon;"> </span>salmon = #fa8072</div> 1403 <div class="colorsquare"><span style="background-color:sandybrown;"> </span>sandybrown = #f4a460</div> 1404 <div class="colorsquare"><span style="background-color:seagreen;"> </span>seagreen = #2e8b57</div> 1405 <div class="colorsquare"><span style="background-color:seashell;"> </span>seashell = #fff5ee</div> 1406 <div class="colorsquare"><span style="background-color:sienna;"> </span>sienna = #a0522d</div> 1407 <div class="colorsquare"><span style="background-color:silver;"> </span>silver = #c0c0c0</div> 1408 <div class="colorsquare"><span style="background-color:skyblue;"> </span>skyblue = #87ceeb</div> 1409 <div class="colorsquare"><span style="background-color:slateblue;"> </span>slateblue = #6a5acd</div> 1410 <div class="colorsquare"><span style="background-color:slategray;"> </span>slategray = #708090</div> 1411 <div class="colorsquare"><span style="background-color:slategrey;"> </span>slategrey = #708090</div> 1412 <div class="colorsquare"><span style="background-color:snow;"> </span>snow = #fffafa</div> 1413 <div class="colorsquare"><span style="background-color:springgreen;"> </span>springgreen = #00ff7f</div> 1414 <div class="colorsquare"><span style="background-color:steelblue;"> </span>steelblue = #4682b4</div> 1415 <div class="colorsquare"><span style="background-color:tan;"> </span>tan = #d2b48c</div> 1416 <div class="colorsquare"><span style="background-color:teal;"> </span>teal = #008080</div> 1417 <div class="colorsquare"><span style="background-color:thistle;"> </span>thistle = #d8bfd8</div> 1418 <div class="colorsquare"><span style="background-color:tomato;"> </span>tomato = #ff6347</div> 1419 <div class="colorsquare"><span style="background-color:turquoise;"> </span>turquoise = #40e0d0</div> 1420 <div class="colorsquare"><span style="background-color:violet;"> </span>violet = #ee82ee</div> 1421 <div class="colorsquare"><span style="background-color:wheat;"> </span>wheat = #f5deb3</div> 1422 <div class="colorsquare"><span style="background-color:white;"> </span>white = #ffffff</div> 1423 <div class="colorsquare"><span style="background-color:whitesmoke;"> </span>whitesmoke = #f5f5f5</div> 1424 <div class="colorsquare"><span style="background-color:yellow;"> </span>yellow = #ffff00</div> 1425 <div class="colorsquare"><span style="background-color:yellowgreen;"> </span>yellowgreen = #9acd32</div> 1426 <div class="colorsquare"><span style="background-color:transparent;"> </span>transparent = rgba(0,0,0,0)</div> 1427 </div> 1428 <h4>Looked-up Colors <span class="grammar" style="font-size: smaller;"><looked-up-color></span></h4> 1429 <p>With looked-up colors you can refer to any other color property that is 1430 set on the current node or any of its parents. This is a very powerful 1431 feature, as it allows a generic palette of colors to be specified on the 1432 scene then used thoughout the application. If you want to change one of 1433 those palette colors you can do so at any level in the scene tree and it 1434 will affect that node and all its decendents. Looked-up colors are not 1435 looked up until they are applied, so they are live and react to any style 1436 changes that might occur, such as replacing a palette color at runtime 1437 with the "style" property on a node.</p> 1438 <p>In the following example, all background color of all buttons uses the 1439 looked up color "abc".</p> 1440 <p class="example">.root { abc: #f00 }<br> 1441 .button { -fx-background-color: abc }</p> 1442 <h4>RGB Colors <span class="grammar" style="font-size: smaller;"><rgb-color></span></h4> 1443 <p>The RGB color model is used in numerical color specifications. It has a 1444 number of different supported forms.</p> 1445 <p class="grammar">#<digit><digit><digit><br> 1446 | 1447 #<digit><digit><digit><digit><digit><digit><br> 1448 | rgb( <a href="#typenumber" class="typelink"><integer></a> , <a href="#typenumber" 1449 class="typelink"><integer></a> 1450 , <a href="#typenumber" class="typelink"><integer></a> )<br> 1451 | rgb( <a href="#typenumber" class="typelink"><integer></a> %, <a 1452 href="#typenumber" 1453 class="typelink"><integer></a>% 1454 , <a href="#typenumber" class="typelink"><integer></a>% )<br> 1455 | rgba( <a href="#typenumber" class="typelink"><integer></a> , <a 1456 href="#typenumber" 1457 class="typelink"><integer></a> 1458 , <a href="#typenumber" class="typelink"><integer></a> , <a href="#typenumber" 1459 class="typelink"><number></a> 1460 ) <br> 1461 | rgba( <a href="#typenumber" class="typelink"><integer></a>% , <a 1462 href="#typenumber" 1463 class="typelink"><integer></a>% 1464 , <a href="#typenumber" class="typelink"><integer></a> %, <a href="#typenumber" 1465 class="typelink"><number></a> 1466 )</p> 1467 <p>These examples all specify the same color for the text fill of a Label:</p> 1468 <p class="example"> </p> 1469 <ul style="list-style: none;"> 1470 <li>.label { -fx-text-fill: #f00 } /* #rgb */</li> 1471 <li>.label { -fx-text-fill: #ff0000 } /* #rrggbb */</li> 1472 <li>.label { -fx-text-fill: rgb(255,0,0) }</li> 1473 <li> .label { -fx-text-fill: rgb(100%, 0%, 0%) }</li> 1474 <li>.label { -fx-text-fill: rgba(255,0,0,1) }</li> 1475 </ul> 1476 <p> </p> 1477 <p><strong>RGB Hex</strong>: The format of an RGB value in hexadecimal 1478 notation is a ‘#’ immediately followed by either three or six 1479 hexadecimal characters. The three-digit RGB notation (#rgb) is converted 1480 into six-digit form (#rrggbb) by replicating digits, not by adding zeros. 1481 For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) 1482 can be specified with the short notation (#fff) and removes any 1483 dependencies on the color depth of the display.</p> 1484 <p><strong>RGB Decimal or Percent</strong>: The format of an RGB value in 1485 the functional notation is ‘rgb(’ followed by a 1486 comma-separated list of three numerical values (either three decimal 1487 integer values or three percentage values) followed by ‘)’. 1488 The integer value 255 corresponds to 100%, and to F or FF in the 1489 hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. White 1490 space characters are allowed around the numerical values.</p> 1491 <p><strong>RGB + Alpha</strong>: This is an extension of the RGB color model 1492 to include an ‘alpha’ value that specifies the opacity of a 1493 color. This is accomplished via a functional syntax of the form rgba(...) 1494 form that takes a fourth parameter which is the alpha value. The alpha 1495 value must be a number in the range 0.0 (representing completely 1496 transparent) and 1.0 (completely opaque). As with the rgb() function, the 1497 red, green, and blue values may be decimal integers or percentages. The 1498 following examples all specify the same color:</p> 1499 <p class="example"> </p> 1500 <ul style="list-style: none;"> 1501 <li>.label { -fx-text-fill: rgb(255,0,0) } /* integer range 0 — 255*/</li> 1502 <li> .label { -fx-text-fill: rgba(255,0,0,1) /* the same, with explicit 1503 opacity of 1 */</li> 1504 <li> .label { -fx-text-fill: rgb(100%,0%,0%) } /* float range 0.0% — 1505 100.0% */</li> 1506 <li> .label { -fx-text-fill: rgba(100%,0%,0%,1) } /* the same, with 1507 explicit opacity of 1 */</li> 1508 </ul> 1509 <p> </p> 1510 <h4>HSB Colors <span class="grammar" style="font-size: smaller;"><hsb-color></span></h4> 1511 <p>Colors can be specified using the HSB (sometimes called HSV) color model, 1512 as follows:</p> 1513 <p class="grammar">hsb( <a href="#typenumber" class="typelink"><number></a> 1514 , <a href="#typenumber" class="typelink"><number></a>% , <a href="#typenumber" 1515 class="typelink"><number></a>% 1516 ) | hsba( <a href="#typenumber" class="typelink"><number></a> , <a 1517 href="#typenumber" 1518 class="typelink"><number></a>% 1519 , <a href="#typenumber" class="typelink"><number></a>% , <a href="#typenumber" 1520 class="typelink"><number></a> 1521 )</p> 1522 <p>The first number is <span style="font-style:italic;">hue</span>, a number in the range 0 to 360 1523 degrees. The second number is <em>saturation,</em> a percentage in the 1524 range 0% to 100%. The third number is <span style="font-style:italic;">brightness</span>, also a 1525 percentage in the range 0% to 100%. The hsba(...) form takes a fourth 1526 parameter at the end which is a alpha value in the range 0.0 to 1.0, 1527 specifying completely transparent and completely opaque, respectively.</p> 1528 <h4>Color Functions <span class="grammar" style="font-size: smaller;"><color-function></span></h4> 1529 <p>JavaFX supports some color computation functions. These compute new 1530 colors from input colors at the time the color style is applied. This 1531 enables a color theme to be specified using a single base color and to 1532 have variant colors computed from that base color. There are two color 1533 functions: derive() and ladder().</p> 1534 <p class="grammar"><derive> | <ladder></p> 1535 <p><strong>Derive </strong><span class="grammar" style="font-size: smaller;"><derive></span></p> 1536 <p class="grammar">derive( <a href="#typecolor" class="typelink"><color></a> 1537 , <a href="#typenumber" class="typelink"><number></a>% )</p> 1538 <p>The derive function takes a color and computes a brighter or darker 1539 version of that color. The second parameter is the brightness offset, 1540 representing how much brighter or darker the derived color should be. Positive percentages indicate brighter colors 1541 and negative percentages indicate darker colors. A value of -100% means 1542 completely black, 0% means no change in brightness, and 100% means 1543 completely white.</p> 1544 <p><strong>Ladder</strong><span class="grammar" style="font-size: smaller;"><ladder></span></p> 1545 <p class="grammar">ladder(<a href="#typecolor" class="typelink"><color></a> 1546 , <a href="#typecolorstop" class="typelink"><color-stop></a> [, <a 1547 href="#typecolorstop" 1548 class="typelink"><color-stop></a>]+)</p> 1549 <p>The ladder function interpolates between colors. The effect is as if a 1550 gradient is created using the stops provided, and then the brightness of 1551 the provided <a href="#typecolor" class="typelink"><color></a> is 1552 used to index a color value within that gradient. At 0% brightness, the 1553 color at the 0.0 end of the gradient is used; at 100% brightness, the 1554 color at the 1.0 end of the gradient is used; and at 50% brightness, the 1555 color at 0.5, the midway point of the gradient, is used. Note that no 1556 gradient is actually rendered. This is merely an interpolation function 1557 that results in a single color.</p> 1558 <p>Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax." 1559 class="typelink">W3C 1560 color-stop syntax</a> and are normalized accordingly.</p> 1561 <p>For example, you could use the following if you want the text color to be 1562 black or white depending upon the brightness of the background.</p> 1563 <p class="example">background: white;<br> 1564 -fx-text-fill: ladder(background, white 49%, black 50%);</p> 1565 <p>The resulting -fx-text-fill value will be black, because the background 1566 (white) has a brightness of 100%, and the color at 1.0 on the gradient is 1567 black. If we were to change the background color to black or dark grey, 1568 the brightness would be less than 50%, giving an -fx-text-fill value of 1569 white.</p> 1570 <p><span style="color: #af0000; ">The following syntax for ladder does not 1571 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX 1572 2.0 CSS parser supports the syntax but this support may be removed in 1573 later releases.</span></p> 1574 <p class="grammar"><span style="color: #af0000; ">ladder(<a href="#typecolor" class="typelink"><color></a>) 1575 stops [ ( <a href="#typenumber" class="typelink"><number></a> , <a 1576 href="#typecolor" 1577 class="typelink"><color></a> 1578 ) ]+ </span></p> 1579 <h2><a id="stage">Stage</a></h2> 1580 <table class="package" width="100%"> 1581 <tbody> 1582 <tr> 1583 <td>javafx.stage</td> 1584 </tr> 1585 </tbody> 1586 </table> 1587 <h4><a id="popupwindow">Group</a></h4> 1588 <p class="styleclass">Style class: .root.popup</p> 1589 <p>PopupWindow does not have any properties that can be styled by CSS, but a PopupWindow does have its own Scene. 1590 Scene's root gets the .root style-class by default. If the Scene is the root scene of a PopupWindow, then the 1591 .popup style-class is also added. This allows the root scene of a PopupWindow to have distinct styles via 1592 the CSS rule <code>.root.popup { /* declarations */ }</code> 1593 <h2><a id="nodes">Nodes</a></h2> 1594 <table class="package" width="100%"> 1595 <tbody> 1596 <tr> 1597 <td>javafx.scene</td> 1598 </tr> 1599 </tbody> 1600 </table> 1601 <h4><a id="group">Group</a></h4> 1602 <p class="styleclass">Style class: empty by default</p> 1603 <table class="csspropertytable"> 1604 <caption>Available CSS Properties</caption> 1605 <thead> 1606 <tr> 1607 <th class="propertyname" scope="col">CSS Property</th> 1608 <th class="value" scope="col">Values</th> 1609 <th scope="col">Default</th> 1610 <th scope="col">Comments</th> 1611 </tr> 1612 </thead> 1613 <tbody> 1614 <tr> 1615 <th colspan="4" scope="row">Group extends Parent. Group does not add any additional CSS properties.</td> 1616 </tr> 1617 <tr> 1618 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#parent">Parent</a></td> 1619 </tr> 1620 </tbody> 1621 </table> 1622 <br> 1623 <h4><a id="node">Node</a></h4> 1624 <p class="styleclass">Style class: empty by default<br> 1625 </p> 1626 <table class="csspropertytable"> 1627 <caption>Available CSS Properties</caption> 1628 <thead> 1629 <tr> 1630 <th class="propertyname" scope="col">CSS Property</th> 1631 <th class="value" scope="col">Values</th> 1632 <th class="default" scope="col">Default</th> 1633 <th class="range" scope="col">Range</th> 1634 <th scope="col">Comments</th> 1635 </tr> 1636 </thead> 1637 <tbody> 1638 <tr> 1639 <th class="propertyname" scope="row">-fx-blend-mode</th> 1640 <td class="value">[ add | blue | color-burn | color-dodge | darken | 1641 difference | exclusion | green | hard-light | lighten | multiply | 1642 overlay | red | screen | soft-light | src-atop | src-in | src-out | 1643 src-over ] </td> 1644 <td>null</td> 1645 <td> </td> 1646 <td> </td> 1647 </tr> 1648 <tr> 1649 <th class="propertyname" scope="row">-fx-cursor</th> 1650 <td class="value">[ null | crosshair | default | hand | move | 1651 e-resize | h-resize | ne-resize | nw-resize | n-resize | se-resize | 1652 sw-resize | s-resize | w-resize | v-resize | text | wait ] | <a href="#typeurl" 1653 class="typelink"><url></a></td> 1654 <td class="default">null</td> 1655 <td class="range"> </td> 1656 <td>inherits </td> 1657 </tr> 1658 <tr> 1659 <th class="propertyname" scope="row">-fx-effect</th> 1660 <td class="value"><a href="#typeeffect" class="typelink"><effect></a></td> 1661 <td class="default">null</td> 1662 <td class="range"> </td> 1663 <td> </td> 1664 </tr> 1665 <tr> 1666 <th class="propertyname" scope="row">-fx-focus-traversable</th> 1667 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 1668 <td class="default">false</td> 1669 <td class="range"> </td> 1670 <td>The default value for controls is true, although there are some exceptions. 1671 See <a href="#controls">Controls</a> for details.</td> 1672 </tr> 1673 <tr> 1674 <th class="propertyname" scope="row">-fx-view-order</th> 1675 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 1676 <td class="default">0</td> 1677 <td class="range"> </td> 1678 <td>This property is used to alter the rendering and picking order of 1679 a node within its parent without reordering the parent's children list. 1680 The parent traverses its children in decreasing viewOrder order. 1681 </td> 1682 </tr> 1683 <tr> 1684 <th class="propertyname" scope="row">-fx-opacity</th> 1685 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 1686 <td class="default">1</td> 1687 <td class="range">[0.0 ... 1.0]</td> 1688 <td>Opacity can be thought of conceptually as a postprocessing 1689 operation. Conceptually, after the node (including its descendants) 1690 is rendered into an RGBA offscreen image, the opacity setting 1691 specifies how to blend the offscreen rendering into the current 1692 composite rendering. </td> 1693 </tr> 1694 <tr> 1695 <th class="propertyname" scope="row">-fx-rotate</th> 1696 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 1697 <td class="default">0</td> 1698 <td class="range"> </td> 1699 <td>This is the angle of the rotation in degrees. Zero degrees is at 3 1700 o'clock (directly to the right). Angle values are positive 1701 clockwise. Rotation is about the center.</td> 1702 </tr> 1703 <tr> 1704 <th class="propertyname" scope="row">-fx-scale-x</th> 1705 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 1706 <td class="default">1</td> 1707 <td class="range"> </td> 1708 <td>scale about the center</td> 1709 </tr> 1710 <tr> 1711 <th class="propertyname" scope="row">-fx-scale-y</th> 1712 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 1713 <td class="default">1</td> 1714 <td class="range"> </td> 1715 <td>scale about the center</td> 1716 </tr> 1717 <tr> 1718 <th class="propertyname" scope="row">-fx-scale-z</th> 1719 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 1720 <td class="default">1</td> 1721 <td class="range"> </td> 1722 <td>scale about the center</td> 1723 </tr> 1724 <tr> 1725 <th class="propertyname" scope="row">-fx-translate-x</th> 1726 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 1727 <td class="default">0</td> 1728 <td class="range"> </td> 1729 <td> </td> 1730 </tr> 1731 <tr> 1732 <th class="propertyname" scope="row">-fx-translate-y</th> 1733 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 1734 <td class="default">0</td> 1735 <td class="range"> </td> 1736 <td> </td> 1737 </tr> 1738 <tr> 1739 <th class="propertyname" scope="row">-fx-translate-z</th> 1740 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 1741 <td class="default">0</td> 1742 <td class="range"> </td> 1743 <td> </td> 1744 </tr> 1745 <tr> 1746 <th class="propertyname" scope="row">visibility</th> 1747 <td class="value">[ visible | hidden | collapse | inherit ]</td> 1748 <td class="default">true (i.e, visible)</td> 1749 <td class="range"> </td> 1750 <td>See <a href="http://www.w3.org/TR/CSS2/visufx.html#visibility">W3C 1751 visibility property</a></td> 1752 </tr> 1753 </tbody> 1754 </table> 1755 <h4>Pseudo-classes</h4> 1756 <table class="csspropertytable"> 1757 <caption>Available CSS Pseudo-classes</caption> 1758 <thead> 1759 <tr> 1760 <th class="propertyname" scope="col">CSS Pseudo-class</th> 1761 <th scope="col">Comments</th> 1762 </tr> 1763 </thead> 1764 <tbody> 1765 <tr> 1766 <th class="propertyname" scope="row">disabled</th> 1767 <td>applies when the <strong>disabled</strong> variable is true</td> 1768 </tr> 1769 <tr> 1770 <th class="propertyname" scope="row">focused</th> 1771 <td>applies when the <strong>focused</strong> variable is true</td> 1772 </tr> 1773 <tr> 1774 <th class="propertyname" scope="row">hover</th> 1775 <td>applies when the <strong>hover</strong> variable is true</td> 1776 </tr> 1777 <tr> 1778 <th class="propertyname" scope="row">pressed</th> 1779 <td>applies when the <strong>pressed</strong> variable is true</td> 1780 </tr> 1781 <tr> 1782 <th class="propertyname" scope="row">show-mnemonic</th> 1783 <td>apples when the mnemonic affordance (typically an underscore) 1784 should be shown.</td> 1785 </tr> 1786 </tbody> 1787 </table> 1788 <h4><a id="parent">Parent</a></h4> 1789 <p class="styleclass">Style 1790 class: empty by default</p> 1791 <table class="csspropertytable"> 1792 <caption>Available CSS Properties</caption> 1793 <thead> 1794 <tr> 1795 <th class="propertyname" scope="col">CSS Property</th> 1796 <th class="value" scope="col">Values</th> 1797 <th scope="col">Default</th> 1798 <th scope="col">Comments</th> 1799 </tr> 1800 </thead> 1801 <tbody> 1802 <tr> 1803 <th colspan="4" scope="row">Parent extends Node. Parent does not add any additional CSS properties.</th> 1804 </tr> 1805 <tr> 1806 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#node">Node</a></th> 1807 </tr> 1808 </tbody> 1809 </table> 1810 <br> 1811 <h4><a id="scene">Scene</a></h4> 1812 <p class="styleclass">Style class: not applicable<br> 1813 </p> 1814 <p>The Scene object has no settable CSS properties, nor does it have any 1815 pseudo‑classes. However, the root node of the scene is assigned the style 1816 class "root" (in addition to style classes already assigned to the node). 1817 This is useful because the root node of Scene is the root container for 1818 all active scene‑graph nodes. Thus, it can serve as a container for 1819 properties that are inherited or looked up.</p> 1820 <table class="package" width="100%"> 1821 <tbody> 1822 <tr> 1823 <td>javafx.scene.image</td> 1824 </tr> 1825 </tbody> 1826 </table> 1827 <h4><a id="imageview">ImageView</a></h4> 1828 <p class="styleclass">Style class: image-view</p> 1829 <table class="csspropertytable"> 1830 <caption>Available CSS Properties</caption> 1831 <thead> 1832 <tr> 1833 <th class="propertyname" scope="col">CSS Property</th> 1834 <th class="value" scope="col">Values</th> 1835 <th scope="col">Default</th> 1836 <th scope="col">Comments</th> 1837 </tr> 1838 </thead> 1839 <tbody> 1840 <tr> 1841 <th class="propertyname" scope="row">-fx-image</th> 1842 <td class="value"><a href="#typeurl" class="typelink"><uri></a></td> 1843 <td class="default">null</td> 1844 <td>Relative URLs are resolved against the URL of the stylesheet.</td> 1845 </tr> 1846 <tr> 1847 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#node">Node</a></th> 1848 </tr> 1849 </tbody> 1850 </table> 1851 <table class="package" width="100%"> 1852 <tbody> 1853 <tr> 1854 <td>javafx.scene.layout</td> 1855 </tr> 1856 </tbody> 1857 </table> 1858 <br> 1859 <h4><a id="anchorpane">AnchorPane</a></h4> 1860 <p class="styleclass">Style class: empty by default</p> 1861 <table class="csspropertytable"> 1862 <caption>Available CSS Properties</caption> 1863 <thead> 1864 <tr> 1865 <th class="propertyname" scope="col">CSS Property</th> 1866 <th class="value" scope="col">Values</th> 1867 <th scope="col">Default</th> 1868 <th scope="col">Comments</th> 1869 </tr> 1870 </thead> 1871 <tbody> 1872 <tr> 1873 <th colspan="4" scope="row">AnchorPane extends Pane and does not add any additional CSS properties.</th> 1874 </tr> 1875 <tr> 1876 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#pane">Pane</a></th> 1877 </tr> 1878 </tbody> 1879 </table> 1880 <h4><a id="border">BorderPane</a></h4> 1881 <p class="styleclass">Style class: empty by default</p> 1882 <table class="csspropertytable"> 1883 <caption>Available CSS Properties</caption> 1884 <thead> 1885 <tr> 1886 <th class="propertyname" scope="col">CSS Property</th> 1887 <th class="value" scope="col">Values</th> 1888 <th scope="col">Default</th> 1889 <th scope="col">Comments</th> 1890 </tr> 1891 </thead> 1892 <tbody> 1893 <tr> 1894 <th colspan="4" scope="row">BorderPane extends Pane and does not add any additional CSS properties.</th> 1895 </tr> 1896 <tr> 1897 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#pane">Pane</a></th> 1898 </tr> 1899 </tbody> 1900 </table> 1901 <br> 1902 1903 <h4><a id="dialogpane">DialogPane</a></h4> 1904 <p class="styleclass">Style class: dialog-pane</p> 1905 <table class="csspropertytable"> 1906 <caption>Available CSS Properties</caption> 1907 <thead> 1908 <tr> 1909 <th class="propertyname" scope="col">CSS Property</th> 1910 <th class="value" scope="col">Values</th> 1911 <th scope="col">Default</th> 1912 <th scope="col">Comments</th> 1913 </tr> 1914 </thead> 1915 <tbody> 1916 <tr> 1917 <th class="propertyname" scope="row">-fx-graphic</th> 1918 <td class="value"><a href="#typeurl" class="typelink"><uri></a></td> 1919 <td>null</td> 1920 <td> </td> 1921 </tr> 1922 <tr> 1923 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#pane">Pane</a></th> 1924 </tr> 1925 </tbody> 1926 </table> 1927 <h4>Substructure</h4> 1928 <ul> 1929 <li>header-panel — BoderPane 1930 <ul><li>graphic-container — StackPane</li></ul> 1931 </li> 1932 <li>content — Label</li> 1933 <li>button-bar — ButtonBar</li> 1934 </ul> 1935 1936 <h4><a id="flowpane">FlowPane</a></h4> 1937 <p class="styleclass">Style class: empty by default</p> 1938 <table class="csspropertytable"> 1939 <caption>Available CSS Properties</caption> 1940 <thead> 1941 <tr> 1942 <th class="propertyname" scope="col">CSS Property</th> 1943 <th class="value" scope="col">Values</th> 1944 <th scope="col">Default</th> 1945 <th scope="col">Comments</th> 1946 </tr> 1947 </thead> 1948 <tbody> 1949 <tr> 1950 <th class="propertyname" scope="row">-fx-hgap</th> 1951 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 1952 <td class="default">0</td> 1953 <td> </td> 1954 </tr> 1955 <tr> 1956 <th class="propertyname" scope="row">-fx-vgap</th> 1957 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 1958 <td class="default">0</td> 1959 <td> </td> 1960 </tr> 1961 <tr> 1962 <th class="propertyname" scope="row">-fx-alignment</th> 1963 <td class="value">[ top-left | top-center | top-right | center-left | 1964 center | center-right bottom-left | bottom-center | bottom-right | 1965 baseline-left | baseline-center | baseline-right ]</td> 1966 <td class="default">top-left</td> 1967 <td> </td> 1968 </tr> 1969 <tr> 1970 <th class="propertyname" scope="row">-fx-column-halignment</th> 1971 <td class="value">[ left | center | right ]</td> 1972 <td class="default">left</td> 1973 <td> </td> 1974 </tr> 1975 <tr> 1976 <th class="propertyname" scope="row">-fx-row-valignment</th> 1977 <td class="value">[ top | center | baseline | bottom ] </td> 1978 <td class="default">center</td> 1979 <td> </td> 1980 </tr> 1981 <tr> 1982 <th class="propertyname" scope="row">-fx-orientation</th> 1983 <td class="value">[ horizontal | vertical ]</td> 1984 <td class="default">horizontal</td> 1985 <td> </td> 1986 </tr> 1987 <tr> 1988 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#pane">Pane</a></th> 1989 </tr> 1990 </tbody> 1991 </table> 1992 <h4><a id="gridpane">GridPane</a></h4> 1993 <p class="styleclass">Style class: empty by default</p> 1994 <table class="csspropertytable"> 1995 <caption>Available CSS Properties</caption> 1996 <thead> 1997 <tr> 1998 <th class="propertyname" scope="col">CSS Property</th> 1999 <th class="value" scope="col">Values</th> 2000 <th scope="col">Default</th> 2001 <th scope="col">Comments</th> 2002 <td><br> 2003 </td> 2004 </tr> 2005 </thead> 2006 <tbody> 2007 <tr> 2008 <th class="propertyname" scope="row">-fx-hgap</th> 2009 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 2010 <td class="default">0</td> 2011 <td> </td> 2012 <td><br> 2013 </td> 2014 </tr> 2015 <tr> 2016 <th class="propertyname" scope="row">-fx-vgap</th> 2017 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 2018 <td class="default">0</td> 2019 <td> </td> 2020 <td><br> 2021 </td> 2022 </tr> 2023 <tr> 2024 <th class="propertyname" scope="row">-fx-alignment</th> 2025 <td class="value">[ top-left | top-center | top-right | center-left | 2026 center | center-right bottom-left | bottom-center | bottom-right | 2027 baseline-left | baseline-center | baseline-right ]</td> 2028 <td class="default">top-left</td> 2029 <td> </td> 2030 <td><br> 2031 </td> 2032 </tr> 2033 <tr> 2034 <th class="propertyname" scope="row">-fx-grid-lines-visible</th> 2035 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 2036 <td class="default">false</td> 2037 <td class="range"> </td> 2038 <td> </td> 2039 </tr> 2040 <tr> 2041 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#pane">Pane</a></th> 2042 </tr> 2043 </tbody> 2044 </table> 2045 <h4><a id="hbox">HBox</a></h4> 2046 <p class="styleclass">Style class: empty by default</p> 2047 <table class="csspropertytable"> 2048 <caption>Available CSS Properties</caption> 2049 <thead> 2050 <tr> 2051 <th class="propertyname" scope="col">CSS Property</th> 2052 <th class="value" scope="col">Values</th> 2053 <th scope="col">Default</th> 2054 <th scope="col">Comments</th> 2055 </tr> 2056 </thead> 2057 <tbody> 2058 <tr> 2059 <th class="propertyname" scope="row">-fx-spacing</th> 2060 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 2061 <td>0</td> 2062 <td> </td> 2063 </tr> 2064 <tr> 2065 <th class="propertyname" scope="row">-fx-alignment</th> 2066 <td class="value">[ top-left | top-center | top-right | center-left | 2067 center | center-right bottom-left | bottom-center | bottom-right | 2068 baseline-left | baseline-center | baseline-right ]</td> 2069 <td class="default">top-left</td> 2070 <td> </td> 2071 </tr> 2072 <tr> 2073 <th class="propertyname" scope="row">-fx-fill-height</th> 2074 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 2075 <td class="default">true</td> 2076 <td> </td> 2077 </tr> 2078 <tr> 2079 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#pane">Pane</a></th> 2080 </tr> 2081 </tbody> 2082 </table> 2083 <h4><a id="pane">Pane</a></h4> 2084 <p class="styleclass">Style class: empty by default</p> 2085 <table class="csspropertytable"> 2086 <caption>Available CSS Properties</caption> 2087 <thead> 2088 <tr> 2089 <th class="propertyname" scope="col">CSS Property</th> 2090 <th class="value" scope="col">Values</th> 2091 <th scope="col">Default</th> 2092 <th scope="col">Comments</th> 2093 </tr> 2094 </thead> 2095 <tbody> 2096 <tr> 2097 <th colspan="4" scope="row">Pane extends Region to expose Region's children. Pane does not add any additional CSS properties.</th> 2098 </tr> 2099 <tr> 2100 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#region">Region</a></th> 2101 </tr> 2102 </tbody> 2103 </table> 2104 <br> 2105 <h4><a id="region">Region</a></h4> 2106 <p class="styleclass">Style class: empty by default</p> 2107 <p>A Region is a Node (extending from Parent) with backgrounds and borders 2108 that are styleable via CSS. A Region is typically a rounded rectangle, 2109 though this can be modified through CSS to be an arbitrary shape. Regions 2110 can contain other Region objects (sub-regions) or they can contain 2111 sub-controls. All Regions have the same set of CSS properties as described 2112 below. </p> 2113 <p>Each Region consists of several layers, painted from bottom to top, in 2114 this order:</p> 2115 <ol> 2116 <li>background fills</li> 2117 <li>background images</li> 2118 <li>border strokes</li> 2119 <li>border images</li> 2120 <li>contents</li> 2121 </ol> 2122 <p>The background and border mechanisms are patterned after the CSS 3 draft 2123 backgrounds and borders module. See <a href="#references">[4]</a> for a 2124 detailed description.</p> 2125 <p>Background fills are specified with the properties <span class="propertyname">-fx-background-color</span>, 2126 <span class="propertyname">-fx-background-radius</span> and <span class="propertyname">-fx-background-insets</span>. 2127 The -fx-background-color property is a series of one or more 2128 comma-separated <paint> values. The number of values in the series 2129 determines the number of background rectangles that are painted. 2130 Background rectangles are painted in the order specified using the given 2131 <paint> value. Each background rectangle can have different radii 2132 and insets. The -fx-background-radius and -fx-background-insets properties 2133 are series of comma-separated values (or sets of values). The radius and 2134 insets values used for a particular background are the found in the 2135 corresponding position in the -fx-background-radius and 2136 -fx-background-insets series. For example, suppose a series of three 2137 values is given for the -fx-background-color property. A series of three 2138 values should also be specified for the -fx-background-radius and 2139 -fx-background-insets properties. The first background will be painted 2140 using the first radius value and first insets value, the second background 2141 will be painted with the second radius value and second insets value, and 2142 so forth.</p> 2143 <p>Note also that properties such as -fx-background-radius and 2144 -fx-background-insets can contain a series of values or <span style="font-style:italic;">sets</span> of 2145 four values. A set of values is separated by whitespace, whereas the 2146 values or sets-of-values in a series are separated by commas. For 2147 -fx-background-radius, a single value indicates that the value should be 2148 used for the radius of all four corners of the background rectangle. A set 2149 of four values indicates that different radius values are to be used for 2150 the top-left, top-right, bottom-right, and bottom-left corners, in that 2151 order. Similarly, the -fx-background-insets property can also contain a 2152 series of values or sets of values. A set of four values for 2153 -fx-background-insets indicates that different insets are to be used for 2154 the top, right, bottom, and left edges of the rectangle, in that order.</p> 2155 <p>Background images are specified with the properties <span class="propertyname">-fx-background-image</span>, 2156 <span class="propertyname">-fx-background-repeat</span>, <span class="propertyname">-fx-background-position</span> 2157 and <span class="propertyname">-fx-background-size</span>. The number of 2158 images in the series of -fx-background-image values determines the number 2159 of background images that are painted. The -fx-background-repeat, 2160 -fx-background-position, and -fx-background-size properties each can 2161 contain a series of values. For each item in the -fx-background-image 2162 series, the corresponding items in the -fx-background-repeat, 2163 -fx-background-position, and -fx-background-size properties are applied to 2164 that background image.</p> 2165 <p>Stroked borders are specified with the properties <span class="propertyname">-fx-border-color</span>, 2166 <span class="propertyname">-fx-border-style</span>, <span class="propertyname">-fx-border-width</span>, 2167 <span class="propertyname">-fx-border-radius</span> and <span class="propertyname">-fx-border-insets</span>. 2168 Each property contains a series of items. The maximum number of items in the -fx- 2169 border-color or -fx-border-style property determines the number of border layers that are painted.. 2170 Each border in the series is painted using information from the 2171 corresponding series item of the -fx-border-color, -fx-border-style, -fx-border-width, 2172 -fx-border-radius, and -fx-border-insets properties. If there is no -fx-border-color, the default color is black. 2173 if there is no -fx-border-style, the default style is solid. </p> 2174 <p>Image borders are specified with the properties <span class="propertyname">-fx-border-image-source</span>, 2175 <span class="propertyname">-fx-border-image-repeat</span>, <span class="propertyname">-fx-border-image-slice</span>, 2176 <span class="propertyname">-fx-border-image-width</span> and <span class="propertyname">-fx-border-image-insets</span>. 2177 Each property contains a series of items. The number of items in the 2178 -fx-border-image-source property determines the number of images that are 2179 painted. Each image in the series is painted using information from the 2180 corresponding series items of the -fx-border-image-repeat, 2181 -fx-border-image-slice, -fx-border-image-width, and 2182 -fx-border-image-insets properties.</p> 2183 <p>The region's contents are a sequence of nodes, like any other container. 2184 The contents are set programmatically and cannot be set via CSS.</p> 2185 <table class="csspropertytable"> 2186 <caption>Available CSS Properties</caption> 2187 <thead> 2188 <tr> 2189 <th class="propertyname" scope="col">CSS Property</th> 2190 <th class="value" scope="col">Values</th> 2191 <th scope="col">Default</th> 2192 <th scope="col">Comments</th> 2193 </tr> 2194 </thead> 2195 <tbody> 2196 <tr> 2197 <th colspan="4" class="propertyname" scope="row"><em>BACKGROUND FILLS</em> (see <a 2198 href="http://www.w3.org/TR/css3-background/#backgrounds" 2199 target="_blank">CSS 2200 Backgrounds and Borders Module Level 3: Backgrounds</a>)</th> 2201 </tr> 2202 <tr> 2203 <th class="propertyname" scope="row">-fx-region-background</th> 2204 <td class="value">javafx.scene.layout.Background</td> 2205 <td class="default">null</td> 2206 <td>This cannot be set directly from CSS but is created from the property values of 2207 -fx-background-color, -fx-background-image, -fx-background-insets, -fx-background-position, 2208 -fx-background-radius, -fx-background-repeat, -fx-background-size</td> 2209 </tr> 2210 <tr> 2211 <th class="propertyname" scope="row">-fx-background-color</th> 2212 <td class="value"><a href="#typepaint" class="typelink"><paint></a> 2213 [ , <a href="#typepaint" class="typelink"><paint></a> ]*</td> 2214 <td class="default">transparent</td> 2215 <td>A series of paint values separated by commas.</td> 2216 </tr> 2217 <tr> 2218 <th class="propertyname" scope="row">-fx-background-insets</th> 2219 <td class="value"><a href="#typesize" class="typelink"><size></a> 2220 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2221 class="typelink"><size></a> 2222 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2223 class="typelink"><size></a> 2224 [ , [ <a href="#typesize" class="typelink"><size></a> | <a href="#typesize" 2225 class="typelink"><size></a> 2226 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2227 class="typelink"><size></a> 2228 <a href="#typesize" class="typelink"><size></a>] ]*</td> 2229 <td class="default">0 0 0 0</td> 2230 <td> 2231 <p>A series of size values or sets of four size values, separated by 2232 commas. A single size value means all insets are the same. 2233 Otherwise, the four values for each inset are given in the order 2234 top, right, bottom, left. Each comma-separated value or set of 2235 values in the series applies to the corresponding background 2236 color.</p> 2237 </td> 2238 </tr> 2239 <tr> 2240 <th class="propertyname" scope="row">-fx-background-radius</th> 2241 <td class="value">[<a href="#typesize" class="typelink"><size></a>]{1,4} [ / [<a href="#typesize" class="typelink"><size></a>]{1,4} ]? 2242 [ , [<a href="#typesize" class="typelink"><size></a>]{1,4} [ / [<a href="#typesize" class="typelink"><size></a>]{1,4} ]? ]* 2243 <td class="default">0 0 0 0</td> 2244 <td> 2245 <p>The same syntax and semenatics as CSS Backgrounds and Borders Module Level 3: <a href="http://www.w3.org/TR/css3-background/#the-border-radius">Curve Radii</a> 2246 applies to -fx-background-radius. Note that JavaFX supports only the short-hand syntax.</p> 2247 <p>Each comma-separated value or set of values in the series applies to the corresponding background color.</p> 2248 </td> 2249 </tr> 2250 <tr> 2251 <th colspan="4" class="propertyname" scope="row"><em>BACKGROUND IMAGES</em> (see <a 2252 href="http://www.w3.org/TR/css3-background/#the-background-image" 2253 target="_blank">CSS 2254 Backgrounds and Borders Module Level 3: Background Image</a>)</th> 2255 </tr> 2256 <tr> 2257 <th class="propertyname" scope="row">-fx-background-image</th> 2258 <td class="value"><a href="#typeurl" class="typelink"><uri></a> 2259 [ , <a href="#typeurl" class="typelink"><uri></a> ]*</td> 2260 <td class="default">null</td> 2261 <td>A series of image URIs separated by commas.</td> 2262 </tr> 2263 <tr> 2264 <th class="propertyname" scope="row">-fx-background-position</th> 2265 <td class="value"> 2266 <p><bg-position> [ , <bg-position> ]*<br> 2267 <strong>where</strong> <bg-position> = [<br> 2268 [ [ <a href="#typesize" class="typelink"><size></a> 2269 | left | center | right ] [ <a href="#typesize" class="typelink"><size></a> 2270 | top | center | bottom ]? ]<br> 2271 | [ [ center | [ left | right ] <a href="#typesize" 2272 class="typelink"><size></a>? 2273 ] || [ center | [ top | bottom ] <a href="#typesize" class="typelink"><size></a>? 2274 ]<br> 2275 ] </p> 2276 </td> 2277 <td class="default">0% 0%</td> 2278 <td> 2279 <p>A series of <bg-position> values separated by commas. Each 2280 bg-position item in the series applies to the corresponding image 2281 in the background-image series.</p> 2282 </td> 2283 </tr> 2284 <tr> 2285 <th class="propertyname" scope="row">-fx-background-repeat</th> 2286 <td class="value"><repeat-style> [ , <repeat-style> ]*<br> 2287 <strong>where</strong> <repeat-style> = repeat-x | repeat-y | 2288 [repeat | space | round | stretch | no-repeat]{1,2}</td> 2289 <td class="default">repeat repeat</td> 2290 <td> 2291 <p>A series of <repeat-style> values separated by commas. Each 2292 repeat-style item in the series applies to the corresponding image 2293 in the background-image series.</p> 2294 </td> 2295 </tr> 2296 <tr> 2297 <th class="propertyname" scope="row">-fx-background-size</th> 2298 <td class="value"><bg-size> [ , <bg-size> ]*<br> 2299 <bg-size> = [ <a href="#typesize" class="typelink"><size></a> 2300 | auto ]{1,2} | cover | contain | stretch</td> 2301 <td class="default">auto auto</td> 2302 <td> 2303 <p>A series of <bg-size> values separated by commas. Each 2304 bg-size item in the series applies to the corresponding image in 2305 the background-image series.</p> 2306 </td> 2307 </tr> 2308 <tr> 2309 <th colspan="4" class="propertyname" scope="row"><em>STROKED BORDERS</em> (see <a 2310 href="http://www.w3.org/TR/css3-background/#borders" 2311 target="_blank">CSS Backgrounds and Borders Module Level 3: Borders</a>) 2312 <div><em>BORDER IMAGES</em> (see <a href="http://www.w3.org/TR/css3-background/#border-images" 2313 target="_blank">CSS 2314 Backgrounds and Borders Module Level 3: Border Images</a>)</div> 2315 </th> 2316 </tr> 2317 2318 <tr> 2319 <th class="propertyname" scope="row">-fx-region-border</th> 2320 <td class="value">javafx.scene.layout.Border</td> 2321 <td class="default">null</td> 2322 <td>This cannot be set directly from CSS but is created from the property values of 2323 -fx-border-color, -fx-border-insets, -fx-border-radius, -fx-border-style, -fx-border-width, 2324 -fx-border-image-insets, -fx-border-image-repeat, -fx-border-image-slice, -fx-border-image-source, 2325 -fx-border-image-width</td> 2326 </tr> 2327 <tr> 2328 <th class="propertyname" scope="row">-fx-border-color</th> 2329 <td class="value"><a href="#typepaint" class="typelink"><paint></a> 2330 | <a href="#typepaint" class="typelink"><paint></a> <a href="#typepaint" 2331 class="typelink"><paint></a> 2332 <a href="#typepaint" class="typelink"><paint></a> <a href="#typepaint" 2333 class="typelink"><paint></a> 2334 [ , [<a href="#typepaint" class="typelink"><paint></a> | <a href="#typepaint" 2335 class="typelink"><paint></a> 2336 <a href="#typepaint" class="typelink"><paint></a> <a href="#typepaint" 2337 class="typelink"><paint></a> 2338 <a href="#typepaint" class="typelink"><paint></a>] ]*</td> 2339 <td class="default">null</td> 2340 <td> 2341 <p>A series of paint values or sets of four paint values, separated 2342 by commas. For each item in the series, if a single paint value is 2343 specified, then that paint is used as the border for all sides of 2344 the region; and if a set of four paints is specified, they are 2345 used for the top, right, bottom, and left borders of the region, 2346 in that order. If the border is not rectangular, only the first 2347 paint value in the set is used.</p> 2348 </td> 2349 </tr> 2350 <tr> 2351 <th class="propertyname" scope="row">-fx-border-insets</th> 2352 <td class="value"><a href="#typesize" class="typelink"><size></a> 2353 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2354 class="typelink"><size></a> 2355 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2356 class="typelink"><size></a> 2357 [ , [ <a href="#typesize" class="typelink"><size></a> | <a href="#typesize" 2358 class="typelink"><size></a> 2359 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2360 class="typelink"><size></a> 2361 <a href="#typesize" class="typelink"><size></a>] ]*</td> 2362 <td class="default">null</td> 2363 <td> 2364 <p>A series of inset or sets of four inset values, separated by 2365 commas. For each item in the series, a single inset value means 2366 that all insets are the same; and if a set of four inset values is 2367 specified, they are used for the top, right, bottom, and left 2368 edges of the region, in that order. Each item in the series of 2369 insets applies to the corresponding item in the series of border 2370 colors.</p> 2371 </td> 2372 </tr> 2373 <tr> 2374 <th class="propertyname" scope="row">-fx-border-radius</th> 2375 <td class="value">[<a href="#typesize" class="typelink"><size></a>]{1,4} [ / [<a href="#typesize" class="typelink"><size></a>]{1,4} ]? 2376 [ , [<a href="#typesize" class="typelink"><size></a>]{1,4} [ / [<a href="#typesize" class="typelink"><size></a>]{1,4} ]? ]* 2377 <td class="default">null</td> 2378 <td> 2379 <p>Refer to CSS Backgrounds and Borders Module Level 3: <a href="http://www.w3.org/TR/css3-background/#the-border-radius">Curve Radii</a>. 2380 JavaFX supports only the short-hand syntax.</p> 2381 <p>Each comma-separated value or set of values in the series applies to the corresponding border color.</p> 2382 </td> 2383 </tr> 2384 <tr> 2385 <th class="propertyname" scope="row">-fx-border-style</th> 2386 <td class="value"> 2387 <p><border-style> [ , <border-style> ]*<br> 2388 <strong>where</strong> <border-style> = <dash-style> 2389 [phase <number>]? [centered | inside | outside]? [line-join 2390 [miter <a href="#typenumber" class="typelink"><number></a> 2391 | bevel | round]]? [line-cap [square | butt | round]]?<br> 2392 <strong>where</strong> <dash-style> = [ none | solid | 2393 dotted | dashed | segments( <number>, <number> [, 2394 <number>]*) ]</p> 2395 </td> 2396 <td class="default">null</td> 2397 <td> 2398 <p>A series of border style values, separated by commas. Each item 2399 in the series applies to the corresponding item in the series of 2400 border colors.</p> 2401 <p>The <span style="font-style:italic;">segments</span> dash-style defines a sequence representing 2402 the lengths of the dash segments. Alternate entries in the 2403 sequence represent the lengths of the opaque and transparent 2404 segments of the dashes. This corresponds to the <span style="font-style:italic;">strokeDashArray</span> 2405 variable of Shape.</p> 2406 <p>The optional <span style="font-style:italic;">phase</span> parameter defines the point in the 2407 dashing pattern that will correspond to the beginning of the 2408 stroke. This corresponds to the <span style="font-style:italic;">strokeDashOffset</span> variable 2409 of Shape.</p> 2410 </td> 2411 </tr> 2412 <tr> 2413 <th class="propertyname" scope="row">-fx-border-width</th> 2414 <td class="value"><a href="#typesize" class="typelink"><size></a> 2415 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2416 class="typelink"><size></a> 2417 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2418 class="typelink"><size></a> 2419 [ , [ <a href="#typesize" class="typelink"><size></a> | <a href="#typesize" 2420 class="typelink"><size></a> 2421 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2422 class="typelink"><size></a> 2423 <a href="#typesize" class="typelink"><size></a>] ]*</td> 2424 <td class="default">null</td> 2425 <td> 2426 <p>A series of width or sets of four width values, separated by 2427 commas. For each item in the series, a single width value means 2428 that all border widths are the same; and if a set of four width 2429 values is specified, they are used for the top, right, bottom, and 2430 left border widths, in that order. If the border is not 2431 rectangular, only the first width value is used. Each item in the 2432 series of widths applies to the corresponding item in the series 2433 of border colors. </p> 2434 </td> 2435 </tr> 2436 <tr> 2437 <th class="propertyname" scope="row">-fx-border-image-source</th> 2438 <td class="value"><a href="#typeurl" class="typelink"><uri></a> 2439 [ , <a href="#typeurl" class="typelink"><uri></a> ]*</td> 2440 <td class="default">null</td> 2441 <td> 2442 <p>A series of image URIs, separated by commas.</p> 2443 </td> 2444 </tr> 2445 <tr> 2446 <th class="propertyname" scope="row">-fx-border-image-insets</th> 2447 <td class="value"><a href="#typesize" class="typelink"><size></a> 2448 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2449 class="typelink"><size></a> 2450 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2451 class="typelink"><size></a> 2452 [ , [ <a href="#typesize" class="typelink"><size></a> | <a href="#typesize" 2453 class="typelink"><size></a> 2454 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2455 class="typelink"><size></a> 2456 <a href="#typesize" class="typelink"><size></a>] ]*</td> 2457 <td class="default">0 0 0 0</td> 2458 <td> 2459 <p>A series of inset or sets of four inset values, separated by 2460 commas. For each item in the series, a single inset value means 2461 that all insets are the same; and if a set of four inset values is 2462 specified, they are used for the top, right, bottom, and left 2463 edges of the region, in that order. Each item in the series of 2464 insets applies to the corresponding image in the series of border 2465 images.</p> 2466 </td> 2467 </tr> 2468 <tr> 2469 <th class="propertyname" scope="row">-fx-border-image-repeat</th> 2470 <td class="value"><repeat-style> [ , <repeat-style> ]*<br> 2471 <strong>where</strong> <repeat-style> = repeat-x | repeat-y | 2472 [repeat | space | round | no-repeat]{1,2}</td> 2473 <td class="default">repeat repeat</td> 2474 <td> 2475 <p>A series of repeat-style values, separated by commas. Each item 2476 in the series applies to the corresponding image in the series of 2477 border images.</p> 2478 </td> 2479 </tr> 2480 <tr> 2481 <th class="propertyname" scope="row">-fx-border-image-slice</th> 2482 <td class="value"> 2483 <p>[<a href="#typesize" class="typelink"><size></a> | <a href="#typesize" 2484 class="typelink"><size></a> 2485 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2486 class="typelink"><size></a> 2487 <a href="#typesize" class="typelink"><size></a> ] fill? [ , 2488 [ <a href="#typesize" class="typelink"><size></a> | <a href="#typesize" 2489 class="typelink"><size></a> 2490 <a 2491 href="#typesize" 2492 class="typelink"><size></a> 2493 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2494 class="typelink"><size></a> 2495 <a href="#typesize" class="typelink"><size></a> ] fill? ]*</p> 2496 </td> 2497 <td class="default">100%</td> 2498 <td> 2499 <p>A series of image slice values or sets of four values, separated 2500 by commas. Each item in the series applies to the corresponding 2501 image in the series of border images. For each item in the series, 2502 if four values are given, they specify the size of the top, right, 2503 bottom, and left slices. This effectively divides the image into 2504 nine regions: an upper left corner, a top edge, an upper right 2505 corner, a right edge, a lower right corner, a bottom edge, a lower 2506 left corner, a left edge and a middle. If one value is specified, 2507 this value is used for the slice values for all four edges. If 2508 'fill' is present, the middle slice is preserved, otherwise it is 2509 discarded. Percentage values may be used here, in which case the 2510 values are considered proportional to the source image.</p> 2511 </td> 2512 </tr> 2513 <tr> 2514 <th class="propertyname" scope="row">-fx-border-image-width</th> 2515 <td class="value"><a href="#typesize" class="typelink"><size></a> 2516 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2517 class="typelink"><size></a> 2518 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2519 class="typelink"><size></a> 2520 [ , [ <a href="#typesize" class="typelink"><size></a> | <a href="#typesize" 2521 class="typelink"><size></a> 2522 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2523 class="typelink"><size></a> 2524 <a href="#typesize" class="typelink"><size></a>] ]*</td> 2525 <td class="default">1 1 1 1</td> 2526 <td> 2527 <p>A series of width or sets of four width values, separated by 2528 commas. For each item in the series, a single width value means 2529 that all border widths are the same; and if a set of four width 2530 values is specified, they are used for the top, right, bottom, and 2531 left border widths, in that order. If the border is not 2532 rectangular, only the first width value is used. Each item in the 2533 series of widths applies to the corresponding item in the series 2534 of border images. Percentage values may be used here, in which 2535 case the values are considered proportional to the border image 2536 area.</p> 2537 </td> 2538 </tr> 2539 <tr> 2540 <th colspan="4" class="propertyname" scope="row"><span style="font-style:italic;">OTHER</span></th> 2541 </tr> 2542 <tr> 2543 <th class="propertyname" scope="row">-fx-padding</th> 2544 <td class="value"><a href="#typesize" class="typelink"><size></a> 2545 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2546 class="typelink"><size></a> 2547 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2548 class="typelink"><size></a> 2549 </td> 2550 <td class="default">0 0 0 0</td> 2551 <td> 2552 <p>A sets of four padding values, separated by commas. For each item 2553 in the series, a single padding value means that all padding are 2554 the same; and if a set of four padding values is specified, they 2555 are used for the top, right, bottom, and left edges of the region, 2556 in that order.</p> 2557 </td> 2558 </tr> 2559 <tr> 2560 <th class="propertyname" scope="row">-fx-position-shape</th> 2561 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 2562 <td class="default">true</td> 2563 <td>If <strong>true</strong> means the shape centered within the 2564 region's width and height, otherwise the shape is positioned at its 2565 source position. Has no effect if a shape string is not specified.</td> 2566 </tr> 2567 <tr> 2568 <th class="propertyname" scope="row">-fx-scale-shape</th> 2569 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 2570 <td class="default">true</td> 2571 <td>If <strong>true</strong> means the shape is scaled to fit the 2572 size of the region, otherwise the shape is at its source size, and 2573 its position depends on the value of the position-shape property. 2574 Has no effect if a shape string is not specified.</td> 2575 </tr> 2576 <tr> 2577 <th class="propertyname" scope="row">-fx-shape</th> 2578 <td class="value">"<a href="#typestring" class="typelink"><string></a>"</td> 2579 <td class="default">null</td> 2580 <td>An SVG path string. By specifying a shape here the region takes on 2581 that shape instead of a rectangle or rounded rectangle. The syntax 2582 of this path string is specified in <a href="#references">[3]</a>.</td> 2583 </tr> 2584 <tr> 2585 <th class="propertyname" scope="row">-fx-snap-to-pixel</th> 2586 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 2587 <td class="default">true</td> 2588 <td>Defines whether this region rounds position/spacing and ceils size 2589 values to pixel boundaries when laying out its children.</td> 2590 </tr> 2591 <tr> 2592 <th class="propertyname" scope="row">-fx-region-background</th> 2593 <td class="value"> </td> 2594 <td class="default">null</td> 2595 <td>This property is set by specifying -fx-background-color and/or -fx-background-image. 2596 Optionally, the properties -fx-background-insets, -fx-background-radius, 2597 -fx-background-position, -fx-background-repeat, and -fx-background-size may also be set. 2598 In order to set the Region background to null, 2599 specify the style "-fx-background-color: null; -fx-background-image: null;". There is no 2600 shorthand notation for -fx-region-background at this time.</td> 2601 </tr> 2602 <tr> 2603 <th class="propertyname" scope="row">-fx-region-border</th> 2604 <td class="value"> </td> 2605 <td class="default">null</td> 2606 <td>This property is set by specifying -fx-border-color and/or -fx-border-image. 2607 Optionally -fx-border-insets, -fx-border-radius, -fx-border-style, 2608 -fx-border-width, -fx-border-image-insets, -fx-border-image-repeat, 2609 -fx-border-image-slice and -fx-border-image-width may be specified. 2610 In order to set the Region background to null, 2611 specify the style "-fx-border-color: null; -fx-border-image: null;". There is no 2612 shorthand notation for -fx-region-border at this time.</td> 2613 </tr> 2614 <tr> 2615 <th class="propertyname" scope="row">-fx-min-height, -fx-pref-height, -fx-max-height</th> 2616 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 2617 <td class="default">-1</td> 2618 <td>Percentage values are not useful since the actual value would be 2619 computed from the width and/or height of the Regions's parent before 2620 the parent is laid out.</td> 2621 </tr> 2622 <tr> 2623 <th class="propertyname" scope="row">-fx-min-width, -fx-pref-width, -fx-max-width</th> 2624 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 2625 <td class="default">-1</td> 2626 <td>Percentage values are not useful since the actual value would be 2627 computed from the width and/or height of the Region's parent before 2628 the parent is laid out.</td> 2629 </tr> 2630 <tr> 2631 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#parent">Parent</a><br> 2632 </th> 2633 </tr> 2634 </tbody> 2635 </table> 2636 <br> 2637 <h4><a id="stackpane">StackPane</a></h4> 2638 <p class="styleclass">Style class: empty by default</p> 2639 <table class="csspropertytable"> 2640 <caption>Available CSS Properties</caption> 2641 <thead> 2642 <tr> 2643 <th class="propertyname" scope="col">CSS Property</th> 2644 <th class="value" scope="col">Values</th> 2645 <th scope="col">Default</th> 2646 <th scope="col">Comments</th> 2647 </tr> 2648 </thead> 2649 <tbody> 2650 <tr> 2651 <th class="propertyname" scope="row">-fx-alignment</th> 2652 <td class="value">[ top-left | top-center | top-right | center-left | 2653 center | center-right bottom-left | bottom-center | bottom-right | 2654 baseline-left | baseline-center | baseline-right ]</td> 2655 <td class="default">top-left</td> 2656 <td> </td> 2657 </tr> 2658 <tr> 2659 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#pane">Pane</a></th> 2660 </tr> 2661 </tbody> 2662 </table> 2663 <h4><a id="tilepane">TilePane</a></h4> 2664 <p class="styleclass">Style class: empty by default</p> 2665 <table class="csspropertytable"> 2666 <caption>Available CSS Properties</caption> 2667 <thead> 2668 <tr> 2669 <th class="propertyname" scope="col">CSS Property</th> 2670 <th class="value" scope="col">Values</th> 2671 <th scope="col">Default</th> 2672 <th scope="col">Comments</th> 2673 </tr> 2674 </thead> 2675 <tbody> 2676 <tr> 2677 <th class="propertyname" scope="row">-fx-orientation</th> 2678 <td class="value">[ horizontal | vertical ]</td> 2679 <td class="default">horizontal</td> 2680 <td> </td> 2681 </tr> 2682 <tr> 2683 <th class="propertyname" scope="row">-fx-pref-rows</th> 2684 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td> 2685 <td class="default">5</td> 2686 <td> </td> 2687 </tr> 2688 <tr> 2689 <th class="propertyname" scope="row">-fx-pref-columns</th> 2690 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td> 2691 <td class="default">5</td> 2692 <td> </td> 2693 </tr> 2694 <tr> 2695 <th class="propertyname" scope="row">-fx-pref-tile-width</th> 2696 <td class="value"><a href="#typenumber" class="typelink"><size></a></td> 2697 <td class="default">-1</td> 2698 <td> </td> 2699 </tr> 2700 <tr> 2701 <th class="propertyname" scope="row">-fx-pref-tile-height</th> 2702 <td class="value"><a href="#typenumber" class="typelink"><size></a></td> 2703 <td class="default">-1</td> 2704 <td> </td> 2705 </tr> 2706 <tr> 2707 <th class="propertyname" scope="row">-fx-hgap</th> 2708 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 2709 <td class="default">0</td> 2710 <td> </td> 2711 </tr> 2712 <tr> 2713 <th class="propertyname" scope="row">-fx-vgap</th> 2714 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 2715 <td class="default">0</td> 2716 <td> </td> 2717 </tr> 2718 <tr> 2719 <th class="propertyname" scope="row">-fx-alignment</th> 2720 <td class="value">[ top-left | top-center | top-right | center-left | 2721 center | center-right bottom-left | bottom-center | bottom-right | 2722 baseline-left | baseline-center | baseline-right ]</td> 2723 <td class="default">top-left</td> 2724 <td> </td> 2725 </tr> 2726 <tr> 2727 <th class="propertyname" scope="row">-fx-tile-alignment</th> 2728 <td class="value">[ top-left | top-center | top-right | center-left | 2729 center | center-right bottom-left | bottom-center | bottom-right | 2730 baseline-left | baseline-center | baseline-right ]</td> 2731 <td class="default">center</td> 2732 <td> </td> 2733 </tr> 2734 <tr> 2735 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#pane">Pane</a></th> 2736 </tr> 2737 </tbody> 2738 </table> 2739 <h4><a id="vbox">VBox</a></h4> 2740 <p class="styleclass">Style class: empty by default</p> 2741 <table class="csspropertytable"> 2742 <caption>Available CSS Properties</caption> 2743 <thead> 2744 <tr> 2745 <th class="propertyname" scope="col">CSS Property</th> 2746 <th class="value" scope="col">Values</th> 2747 <th scope="col">Default</th> 2748 <th scope="col">Comments</th> 2749 </tr> 2750 </thead> 2751 <tbody> 2752 <tr> 2753 <th class="propertyname" scope="row">-fx-spacing</th> 2754 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 2755 <td>0</td> 2756 <td> </td> 2757 </tr> 2758 <tr> 2759 <th class="propertyname" scope="row">-fx-alignment</th> 2760 <td class="value">[ top-left | top-center | top-right | center-left | 2761 center | center-right bottom-left | bottom-center | bottom-right | 2762 baseline-left | baseline-center | baseline-right ]</td> 2763 <td class="default">top-left</td> 2764 <td> </td> 2765 </tr> 2766 <tr> 2767 <th class="propertyname" scope="row">-fx-fill-width</th> 2768 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 2769 <td class="default">true</td> 2770 <td> </td> 2771 </tr> 2772 <tr> 2773 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#pane">Pane</a></th> 2774 </tr> 2775 </tbody> 2776 </table> 2777 2778 <table class="package" width="100%"> 2779 <tbody> 2780 <tr> 2781 <td>javafx.scene.media</td> 2782 </tr> 2783 </tbody> 2784 </table> 2785 <h4><a id="mediaview">MediaView</a></h4> 2786 <p class="styleclass">Style class: media-view</p> 2787 2788 <table class="package" width="100%"> 2789 <tbody> 2790 <tr> 2791 <td>javafx.scene.shape</td> 2792 </tr> 2793 </tbody> 2794 </table> 2795 <h4><a id="shape">Shape</a></h4> 2796 <p class="styleclass">Style class: empty by default</p> 2797 <table class="csspropertytable"> 2798 <caption>Available CSS Properties</caption> 2799 <thead> 2800 <tr> 2801 <th class="propertyname" scope="col">CSS Property</th> 2802 <th class="value" scope="col">Values</th> 2803 <th scope="col">Default</th> 2804 <th scope="col">Comments</th> 2805 </tr> 2806 </thead> 2807 <tbody> 2808 <tr> 2809 <th class="propertyname" scope="row">-fx-fill</th> 2810 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 2811 <td>BLACK</td> 2812 <td> </td> 2813 </tr> 2814 <tr> 2815 <th class="propertyname" scope="row">-fx-smooth</th> 2816 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 2817 <td>true</td> 2818 <td> </td> 2819 </tr> 2820 <tr> 2821 <th class="propertyname" scope="row">-fx-stroke</th> 2822 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 2823 <td>null</td> 2824 <td> </td> 2825 </tr> 2826 <tr> 2827 <th class="propertyname" scope="row">-fx-stroke-type</th> 2828 <td class="value">[ inside | outside | centered ]</td> 2829 <td>centered</td> 2830 <td> </td> 2831 </tr> 2832 <tr> 2833 <th class="propertyname" scope="row">-fx-stroke-dash-array</th> 2834 <td class="value"><a href="#typesize" class="typelink"><size></a>[ 2835 <a href="#typesize" class="typelink"><size></a>]+</td> 2836 <td>see comment</td> 2837 <td>The initial value is that of an empty array, effectively a solid line. 2838 </tr> 2839 <tr> 2840 <th class="propertyname" scope="row">-fx-stroke-dash-offset</th> 2841 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 2842 <td>0</td> 2843 <td> </td> 2844 </tr> 2845 <tr> 2846 <th class="propertyname" scope="row">-fx-stroke-line-cap</th> 2847 <td class="value">[ square | butt | round ] </td> 2848 <td>square</td> 2849 <td> </td> 2850 </tr> 2851 <tr> 2852 <th class="propertyname" scope="row">-fx-stroke-line-join</th> 2853 <td class="value">[ miter | bevel | round ] </td> 2854 <td>miter</td> 2855 <td> </td> 2856 </tr> 2857 <tr> 2858 <th class="propertyname" scope="row">-fx-stroke-miter-limit</th> 2859 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 2860 <td>10</td> 2861 <td> </td> 2862 </tr> 2863 <tr> 2864 <th class="propertyname" scope="row">-fx-stroke-width</th> 2865 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 2866 <td>1</td> 2867 <td> </td> 2868 </tr> 2869 <tr> 2870 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#node">Node</a></th> 2871 </tr> 2872 </tbody> 2873 </table> 2874 <h4><a id="arc">Arc</a></h4> 2875 <p class="styleclass">Style class: empty by default</p> 2876 <p>The Arc node has all the properties of <a href="#shape">Shape</a> and <a 2877 href="#node">Node</a>.</p> 2878 <h4><a id="circle">Circle</a></h4> 2879 <p class="styleclass">Style class: empty by default</p> 2880 <p>The Circle node has all the properties of <a href="#shape">Shape</a> and 2881 <a href="#node">Node</a>.</p> 2882 <h4><a id="cubiccurve">CubicCurve</a></h4> 2883 <p class="styleclass">Style class: empty by default</p> 2884 <p>The CubicCurve node has all the properties of <a href="#shape">Shape</a> 2885 and <a href="#node">Node</a>.</p> 2886 <h4><a id="ellipse">Ellipse</a></h4> 2887 <p class="styleclass">Style class: empty by default</p> 2888 <p>The Ellipse node has all the properties of <a href="#shape">Shape</a> 2889 and <a href="#node">Node</a>.</p> 2890 <h4><a id="line">Line</a></h4> 2891 <p class="styleclass">Style class: empty by default</p> 2892 <table class="csspropertytable"> 2893 <caption>Available CSS Properties</caption> 2894 <thead> 2895 <tr> 2896 <th class="propertyname" scope="col">CSS Property</th> 2897 <th class="value" scope="col">Values</th> 2898 <th scope="col">Default</th> 2899 <th scope="col">Comments</th> 2900 </tr> 2901 </thead> 2902 <tbody> 2903 <tr> 2904 <th class="propertyname" scope="row">-fx-fill</th> 2905 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 2906 <td>null</td> 2907 <td></td> 2908 </tr> 2909 <tr> 2910 <th class="propertyname" scope="row">-fx-stroke</th> 2911 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 2912 <td>black</td> 2913 <td></td> 2914 </tr> 2915 <tr> 2916 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#node">Shape</a></th> 2917 </tr> 2918 </tbody> 2919 </table> 2920 <h4><a id="path">Path</a></h4> 2921 <p class="styleclass">Style class: empty by default</p> 2922 <table class="csspropertytable"> 2923 <caption>Available CSS Properties</caption> 2924 <thead> 2925 <tr> 2926 <th class="propertyname" scope="col">CSS Property</th> 2927 <th class="value" scope="col">Values</th> 2928 <th scope="col">Default</th> 2929 <th scope="col">Comments</th> 2930 </tr> 2931 </thead> 2932 <tbody> 2933 <tr> 2934 <th class="propertyname" scope="row">-fx-fill</th> 2935 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 2936 <td>null</td> 2937 <td></td> 2938 </tr> 2939 <tr> 2940 <th class="propertyname" scope="row">-fx-stroke</th> 2941 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 2942 <td>black</td> 2943 <td></td> 2944 </tr> 2945 <tr> 2946 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#node">Shape</a></th> 2947 </tr> 2948 </tbody> 2949 </table> 2950 <h4><a id="polygon">Polygon</a></h4> 2951 <p class="styleclass">Style class: empty by default</p> 2952 <p>The Polygon node has all the properties of <a href="#shape">Shape</a> 2953 and <a href="#node">Node</a>.</p> 2954 <h4><a id="quadcurve">QuadCurve</a></h4> 2955 <p class="styleclass">Style class: empty by default</p> 2956 <p>The QuadCurve node has all the properties of <a href="#shape">Shape</a> 2957 and <a href="#node">Node</a>.</p> 2958 <h4><a id="rectangle">Rectangle</a></h4> 2959 <p class="styleclass">Style class: empty by default</p> 2960 <table class="csspropertytable"> 2961 <caption>Available CSS Properties</caption> 2962 <thead> 2963 <tr> 2964 <th class="propertyname" scope="col">CSS Property</th> 2965 <th class="value" scope="col">Values</th> 2966 <th scope="col">Default</th> 2967 <th scope="col">Comments</th> 2968 </tr> 2969 </thead> 2970 <tbody> 2971 <tr> 2972 <th class="propertyname" scope="row">-fx-arc-height</th> 2973 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 2974 <td>0</td> 2975 <td> </td> 2976 </tr> 2977 <tr> 2978 <th class="propertyname" scope="row">-fx-arc-width</th> 2979 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 2980 <td>0</td> 2981 <td> </td> 2982 </tr> 2983 <tr> 2984 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#shape">Shape</a></th> 2985 </tr> 2986 </tbody> 2987 </table> 2988 <h4><a id="svgpath">SVGPath</a></h4> 2989 <p class="styleclass">Style class: empty by default</p> 2990 <p>The SVGPath node has all the properties of <a href="#shape">Shape</a> 2991 and <a href="#node">Node</a>.</p> 2992 <table class="package" width="100%"> 2993 <tbody> 2994 <tr> 2995 <td>javafx.scene.text</td> 2996 </tr> 2997 </tbody> 2998 </table> 2999 <h4><a id="text">Text</a></h4> 3000 <p class="styleclass">Style class: empty by default</p> 3001 <table class="csspropertytable"> 3002 <caption>Available CSS Properties</caption> 3003 <thead> 3004 <tr> 3005 <th class="propertyname" scope="col">CSS Property</th> 3006 <th class="value" scope="col">Values</th> 3007 <th scope="col">Default</th> 3008 <th scope="col">Comments</th> 3009 </tr> 3010 </thead> 3011 <tbody> 3012 <tr> 3013 <th class="propertyname" scope="row">-fx-font</th> 3014 <td class="value"><a href="#typefont" class="typelink"><font></a></td> 3015 <td>Font.DEFAULT</td> 3016 <td>inherits</td> 3017 </tr> 3018 <tr> 3019 <th class="propertyname" scope="row">-fx-font-smoothing-type</th> 3020 <td class="value">[ gray | lcd ] </td> 3021 <td>gray</td> 3022 <td> </td> 3023 </tr> 3024 <tr> 3025 <th class="propertyname" scope="row">-fx-strikethrough</th> 3026 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 3027 <td>false</td> 3028 <td> </td> 3029 </tr> 3030 <tr> 3031 <th class="propertyname" scope="row">-fx-tab-size</th> 3032 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td> 3033 <td>8</td> 3034 <td> </td> 3035 </tr> <tr> 3036 <th class="propertyname" scope="row">-fx-text-alignment</th> 3037 <td class="value">[ left | center | right | justify ] </td> 3038 <td>left</td> 3039 <td>inherits</td> 3040 </tr> 3041 <tr> 3042 <th class="propertyname" scope="row">-fx-text-origin</th> 3043 <td class="value">[ baseline | top | bottom ] </td> 3044 <td>baseline</td> 3045 <td> </td> 3046 </tr> 3047 <tr> 3048 <th class="propertyname" scope="row">-fx-underline</th> 3049 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 3050 <td>false</td> 3051 <td> </td> 3052 </tr> 3053 <tr> 3054 <th colspan="4" class="parents" scope="row">Also has <a href="#fontprops">font 3055 properties</a> and all properties of Shape</th> 3056 </tr> 3057 </tbody> 3058 </table> 3059 <table class="package" width="100%"> 3060 <tbody> 3061 <tr> 3062 <td>javafx.scene.web</td> 3063 </tr> 3064 </tbody> 3065 </table> 3066 <h4><a id="webview">WebView</a></h4> 3067 <p class="styleclass">Style class: web-view</p> 3068 <table class="csspropertytable"> 3069 <caption>Available CSS Properties</caption> 3070 <thead> 3071 <tr> 3072 <th class="propertyname" scope="col">CSS Property</th> 3073 <th class="value" scope="col">Values</th> 3074 <th scope="col">Default</th> 3075 <th scope="col">Comments</th> 3076 </tr> 3077 </thead> 3078 <tbody> 3079 <tr> 3080 <th class="propertyname" scope="row">-fx-context-menu-enabled</th> 3081 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 3082 <td>true</td> 3083 <td> </td> 3084 </tr> 3085 <tr> 3086 <th class="propertyname" scope="row">-fx-font-smoothing-type</th> 3087 <td class="value">[ gray | lcd ] </td> 3088 <td>lcd</td> 3089 <td> </td> 3090 </tr> 3091 <tr> 3092 <th class="propertyname" scope="row">-fx-font-scale</th> 3093 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 3094 <td>1</td> 3095 <td> </td> 3096 </tr> 3097 <tr> 3098 <th class="propertyname" scope="row">-fx-min-width</th> 3099 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3100 <td>0</td> 3101 <td> </td> 3102 </tr> 3103 <tr> 3104 <th class="propertyname" scope="row">-fx-min-height</th> 3105 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3106 <td>0</td> 3107 <td> </td> 3108 </tr> 3109 <tr> 3110 <th class="propertyname" scope="row">-fx-pref-width</th> 3111 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3112 <td>800</td> 3113 <td> </td> 3114 </tr> 3115 <tr> 3116 <th class="propertyname" scope="row">-fx-pref-height</th> 3117 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3118 <td>600</td> 3119 <td> </td> 3120 </tr> 3121 <tr> 3122 <th class="propertyname" scope="row">-fx-max-width</th> 3123 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3124 <td>Double.MAX_VALUE</td> 3125 <td> </td> 3126 </tr> 3127 <tr> 3128 <th class="propertyname" scope="row">-fx-max-height</th> 3129 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3130 <td>Double.MAX_VALUE</td> 3131 <td> </td> 3132 </tr> 3133 <tr> 3134 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#parent">Parent</a></th> 3135 </tr> 3136 </tbody> 3137 </table> 3138 <!-- Controls --> 3139 <table class="package" width="100%"> 3140 <tbody> 3141 <tr> 3142 <td>javafx.scene.control</td> 3143 </tr> 3144 </tbody> 3145 </table> 3146 <p>Since JavaFX 2.0, the default skins for all controls support styling from 3147 CSS. This is accomplished by building the skins from layout objects called 3148 Regions. Most of the style properties for a control are provided by the 3149 Region objects that comprise the control's skin. Each Region object of the 3150 skin's substructure has its own style‑class so that it can be styled 3151 specifically. The control itself will sometimes provide CSS properties in 3152 addition to those provided by its Regions. Finally, controls may also 3153 define pseudo‑classes such as "vertical" and "horizontal" in addition to 3154 those defined by Node.</p> 3155 <p>With the following exceptions, controls are focus traversable. This means that <a href="#control">Control</a> sets the initial value 3156 of the focusTraversable property true; whereas in <a href="#node">Node</a>, the initial value of the focusTraversable property 3157 is false. The following controls are not focus traversable by default: Accordion, Cell, Label, MenuBar, 3158 ProgressBar, ProgressIndicator, ScrollBar, ScrollPane, Separator, SplitPane, ToolBar.</p> 3159 <h4><a id="accordion">Accordion</a></h4> 3160 <p class="styleclass">Style class: accordion</p> 3161 <p>The Accordion control has all the properties and pseudo‑classes of <a href="#control">Control</a></p> 3162 <h4>Substructure</h4> 3163 <ul> 3164 <li>first-titled-pane — the first TitledPane </li> 3165 </ul> 3166 <h4><a id="button">Button</a></h4> 3167 <p class="styleclass">Style class: button</p> 3168 <p>The Button control has all the properties of <a href="#buttonbase">ButtonBase</a></p> 3169 <h4>Pseudo-classes</h4> 3170 <table class="csspropertytable"> 3171 <caption>Available CSS Pseudo-classes</caption> 3172 <thead> 3173 <tr> 3174 <th class="propertyname" scope="col">CSS Pseudo-class</th> 3175 <th scope="col">Comments</th> 3176 </tr> 3177 </thead> 3178 <tbody> 3179 <tr> 3180 <th class="propertyname" scope="row">cancel</th> 3181 <td>applies if this Button receives VK_ESC if the event is not 3182 otherwise consumed</td> 3183 </tr> 3184 <tr> 3185 <th class="propertyname" scope="row">default</th> 3186 <td>applies if this Button receives VK_ENTER if the event is not 3187 otherwise consumed</td> 3188 </tr> 3189 <tr> 3190 <td colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#buttonbase">ButtonBase</a></td> 3191 </tr> 3192 </tbody> 3193 </table> 3194 <h4><a id="buttonbase">ButtonBase</a></h4> 3195 <p>The ButtonBase control has all the properties of <a href="#labeled">Labeled</a></p> 3196 <h4>Pseudo-classes</h4> 3197 <table class="csspropertytable"> 3198 <caption>Available CSS Pseudo-classes</caption> 3199 <thead> 3200 <tr> 3201 <th class="propertyname" scope="col">CSS Pseudo-class</th> 3202 <th scope="col">Comments</th> 3203 </tr> 3204 </thead> 3205 <tbody> 3206 <tr> 3207 <th class="propertyname" scope="row">armed</th> 3208 <td>applies when the <strong>armed</strong> variable is true</td> 3209 </tr> 3210 <tr> 3211 <td colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#labeled">Labeled</a></td> 3212 </tr> 3213 </tbody> 3214 </table> 3215 <h4><a id="cell">Cell</a></h4> 3216 <p class="styleclass">Style class: cell</p> 3217 <table class="csspropertytable"> 3218 <caption>Available CSS Properties</caption> 3219 <thead> 3220 <tr> 3221 <th class="propertyname" scope="col">CSS Property</th> 3222 <th class="value" scope="col">Values</th> 3223 <th scope="col">Default</th> 3224 <th scope="col">Comments</th> 3225 </tr> 3226 </thead> 3227 <tbody> 3228 <tr> 3229 <th class="propertyname" scope="row">-fx-cell-size</th> 3230 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3231 <td>24</td> 3232 <td>The cell size. For vertical ListView or a TreeView or TableView 3233 this is the height, for a horizontal ListView this is the width.</td> 3234 </tr> 3235 <tr> 3236 <th colspan="4" class="parents" scope="row">The Cell control has all the 3237 properties of <a href="#labeled">Labeled</a></th> 3238 </tr> 3239 </tbody> 3240 </table> 3241 <h4>Pseudo-classes</h4> 3242 <table class="csspropertytable"> 3243 <caption>Available CSS Pseudo-classes</caption> 3244 <thead> 3245 <tr> 3246 <th class="propertyname" scope="col">CSS Pseudo-class</th> 3247 <th scope="col">Comments</th> 3248 </tr> 3249 </thead> 3250 <tbody> 3251 <tr> 3252 <th class="propertyname" scope="row">empty</th> 3253 <td>applies when the <strong>empty </strong>variable is true</td> 3254 </tr> 3255 <tr> 3256 <th class="propertyname" scope="row">filled</th> 3257 <td>applies when the <strong>empty</strong> variable is false</td> 3258 </tr> 3259 <tr> 3260 <th class="propertyname" scope="row">selected</th> 3261 <td>applies when the <strong>selected</strong> variable is true</td> 3262 </tr> 3263 <tr> 3264 <td colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#labeled">Labeled</a></td> 3265 </tr> 3266 </tbody> 3267 </table> 3268 <h4>Substructure</h4> 3269 <ul> 3270 <li>text — a Labeled</li> 3271 </ul> 3272 <h4><a id="checkbox">CheckBox</a></h4> 3273 <p class="styleclass">Style class: check-box</p> 3274 <p>The CheckBox control has all the properties of <a href="#buttonbase">ButtonBase</a></p> 3275 <h4>Pseudo-classes</h4> 3276 <table class="csspropertytable"> 3277 <caption>Available CSS Pseudo-classes</caption> 3278 <thead> 3279 <tr> 3280 <th class="propertyname" scope="col">CSS Pseudo-class</th> 3281 <th scope="col">Comments</th> 3282 </tr> 3283 </thead> 3284 <tbody> 3285 <tr> 3286 <th class="propertyname" scope="row">selected</th> 3287 <td>applies when the <strong>selected</strong> variable is true</td> 3288 </tr> 3289 <tr> 3290 <th class="propertyname" scope="row">determinate</th> 3291 <td>applies when the <strong>indeterminate </strong>variable is 3292 false</td> 3293 </tr> 3294 <tr> 3295 <th class="propertyname" scope="row">indeterminate</th> 3296 <td>applies when the <strong>indeterminate </strong>variable is true</td> 3297 </tr> 3298 <tr> 3299 <td colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#buttonbase">ButtonBase</a></td> 3300 </tr> 3301 </tbody> 3302 </table> 3303 <h4>Substructure</h4> 3304 <ul> 3305 <li>box — a StackPane 3306 <ul> 3307 <li>mark — a StackPane</li> 3308 </ul> 3309 </li> 3310 </ul> 3311 <h4><a id="checkmenuitem">CheckMenuItem</a></h4> 3312 <h4>Pseudo-classes</h4> 3313 <table class="csspropertytable"> 3314 <caption>Available CSS Pseudo-classes</caption> 3315 <thead> 3316 <tr> 3317 <th class="propertyname" scope="col">CSS Pseudo-class</th> 3318 <th scope="col">Comments</th> 3319 </tr> 3320 </thead> 3321 <tbody> 3322 <tr> 3323 <th class="propertyname" scope="row">selected</th> 3324 <td>applies if this item is selected</td> 3325 </tr> 3326 </tbody> 3327 </table> 3328 <h4><a id="choicebox">ChoiceBox</a></h4> 3329 <p class="styleclass">Style class: choice-box</p> 3330 <p>The ChoiceBox control has all the properties and pseudo‑classes of <a href="#control">Control</a></p> 3331 <h4>Substructure</h4> 3332 <ul> 3333 <li>open-button — Region 3334 <ul> 3335 <li>arrow — Region </li> 3336 </ul> 3337 </li> 3338 </ul> 3339 <h4><a id="colorpicker">ColorPicker</a></h4> 3340 <p class="styleclass">Style class: color-picker</p> 3341 <p>The ColorPicker control has all the properties and pseudo‑classes of <a href="#comboboxbase">ComboBoxBase</a></p> 3342 <table class="csspropertytable"> 3343 <caption>Available CSS Properties</caption> 3344 <thead> 3345 <tr> 3346 <th class="propertyname" scope="col">CSS Property</th> 3347 <th class="value" scope="col">Values</th> 3348 <th scope="col">Default</th> 3349 <th scope="col">Comments</th> 3350 </tr> 3351 </thead> 3352 <tbody> 3353 <tr> 3354 <th class="propertyname" scope="row">-fx-color-label-visible</th> 3355 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 3356 <td>true</td> 3357 <td> </td> 3358 </tr> 3359 <tr> 3360 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#control">Control</a></th> 3361 </tr> 3362 </tbody> 3363 </table> 3364 <h4>Substructure</h4> 3365 <ul> 3366 <li>color display node — Label</li> 3367 <li>arrow-button — StackPane 3368 <ul> 3369 <li>arrow — StackPane</li> 3370 </ul> 3371 </li> 3372 </ul> 3373 <h4><a id="combobox">ComboBox</a></h4> 3374 <p class="styleclass">Style class: combo-box</p> 3375 <p>The ComboBox control has all the properties and pseudo‑classes of <a href="#comboboxbase">ComboBoxBase</a></p> 3376 <h4>Substructure</h4> 3377 <ul> 3378 <li>list-cell — a ListCell instance used to show the selection in the 3379 button area of a non-editable ComboBox</li> 3380 <li>text-input — a TextField instance used to show the selection and 3381 allow input in the button area of an editable ComboBox</li> 3382 <li>combo-box-popup — a PopupControl that is displayed when the button is 3383 pressed 3384 <ul> 3385 <li>list-view — a ListView 3386 <ul> 3387 <li>list-cell — a ListCell</li> 3388 </ul> 3389 </li> 3390 </ul> 3391 </li> 3392 </ul> 3393 <h4><a id="comboboxbase">ComboBoxBase</a></h4> 3394 <p class="styleclass">Style class: combo-box-base</p> 3395 <p>The ComboBoxBase control has all the properties of <a href="#control">Control</a></p> 3396 <h4>Substructure</h4> 3397 <ul> 3398 <li>arrow-button — a StackPane 3399 <ul> 3400 <li>arrow — a StackPane </li> 3401 </ul> 3402 </li> 3403 </ul> 3404 <table class="csspropertytable"> 3405 <caption>Available CSS Pseudo-classes</caption> 3406 <thead> 3407 <tr> 3408 <th class="propertyname" scope="col">CSS Pseudo-class</th> 3409 <th scope="col">Comments</th> 3410 </tr> 3411 </thead> 3412 <tbody> 3413 <tr> 3414 <th class="propertyname" scope="row">editable</th> 3415 <td>applies when the <strong>editable </strong>variable is true</td> 3416 </tr> 3417 <tr> 3418 <th class="propertyname" scope="row">showing</th> 3419 <td>applies when the <strong>showing </strong>variable is true</td> 3420 </tr> 3421 <tr> 3422 <th class="propertyname" scope="row">armed</th> 3423 <td>applies when the <strong>armed </strong>variable is true</td> 3424 </tr> 3425 </tbody> 3426 </table> 3427 <h4><a id="contextmenu">ContextMenu</a></h4> 3428 <p class="styleclass">Style class: context-menu</p> 3429 <p>The ContextMenu class has all the properties of <a href="#popupcontrol">PopupControl</a>.</p> 3430 The selector for a ContextMenu may be made more specific by using the selector for the control from which the ContextMenu was shown. 3431 For example, 3432 <p class="example">.choice-box > .context-menu { ... }</p> 3433 <h4>Substructure</h4> 3434 <ul> 3435 <li>context-menu — a Region 3436 <ul> 3437 <li>scroll-arrow — a StackPane 3438 <ul><li>menu-up-arrow — a StackPane</li></ul> 3439 </li> 3440 <li>scroll-arrow — a StackPane 3441 <ul><li>menu-down-arrow — a StackPane</li></ul> 3442 </li> 3443 <li>* — a VBox 3444 <ul> 3445 <li>menu-item — a Region 3446 <ul> 3447 <li>label — a Label</li> 3448 <li>left-container — a StackPane (for radio buttons and check boxes)</li> 3449 <li>right-container — a StackPane (for pull-right menus) 3450 <ul> 3451 <li>arrow — a Region</li> 3452 </ul> 3453 </li> 3454 <li>graphic-container — a StackPane (for MenuItem graphic)</li> 3455 </ul> 3456 </li> 3457 </ul> 3458 </li> 3459 </ul> 3460 </li> 3461 </ul> 3462 <h4><a id="control">Control</a></h4> 3463 <p>The Control class has all the properties of <a href="#region">Region</a></p> 3464 <table class="csspropertytable"> 3465 <caption>Available CSS Properties</caption> 3466 <thead> 3467 <tr> 3468 <th class="propertyname" scope="col">CSS Property</th> 3469 <th class="value" scope="col">Values</th> 3470 <th scope="col">Default</th> 3471 <th scope="col">Comments</th> 3472 </tr> 3473 </thead> 3474 <tbody> 3475 <tr> 3476 <th class="propertyname" scope="row">-fx-skin</th> 3477 <td class="value"><a href="#typestring" class="typelink"><string></a></td> 3478 <td>null</td> 3479 <td>The class name of the Control's Skin.</td> 3480 </tr> 3481 <tr> 3482 <th class="propertyname" scope="row">-fx-focus-traversable</th> 3483 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 3484 <td class="default">true</td> 3485 <td>Control sets the default value of the focusTraversable property to true. The default value 3486 of the focusTraversable property for the following controls is false: Accordion, Cell, Label, MenuBar, 3487 ProgressBar, ProgressIndicator, ScrollBar, ScrollPane, Separator, SplitPane, ToolBar.</td> 3488 </tr> 3489 </tbody> 3490 </table> 3491 <h4><a id="datepicker">DatePicker</a></h4> 3492 <p class="styleclass">Style class: date-picker</p> 3493 <p>The DatePicker control has all the properties and pseudo‑classes of <a href="#comboboxbase">ComboBoxBase</a></p> 3494 <table class="csspropertytable"> 3495 <caption>Available CSS Properties</caption> 3496 <thead> 3497 <tr> 3498 <th class="propertyname" scope="col">CSS Property</th> 3499 <th class="value" scope="col">Values</th> 3500 <th scope="col">Default</th> 3501 <th scope="col">Comments</th> 3502 </tr> 3503 </thead> 3504 <tbody> 3505 <tr> 3506 <th class="propertyname" scope="row">-fx-show-week-numbers</th> 3507 <td class="value"><a href="#typeboolean" class="typeboolean"><boolean></a></td> 3508 <td>true if the resource bundle property "DatePicker.showWeekNumbers" contains the country code.</td> 3509 <td> </td> 3510 </tr> 3511 <tr> 3512 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#control">Control</a></th> 3513 </tr> 3514 </tbody> 3515 </table> 3516 <h4>Substructure</h4> 3517 <ul> 3518 <li>date-picker-display-node — TextField</li> 3519 </ul> 3520 3521 <h4><a id="htmleditor">HTMLEditor</a></h4> 3522 <p class="styleclass">Style class: html-editor</p> 3523 <p>The Hyperlink control has all the properties of <a href="#control">Control</a>.</p> 3524 <h4>Substructure</h4> 3525 <ul> 3526 <li>grid — GridPane (contains WebView) 3527 <ul> 3528 <li>top-toolbar — ToolBar 3529 <ul> 3530 <li>html-editor-cut — <a href="#togglebutton">ToggleButton</a></li> 3531 <li>html-editor-copy — <a href="#togglebutton">ToggleButton</a></li> 3532 <li>html-editor-paste — <a href="#togglebutton">ToggleButton</a></li> 3533 <li>html-editor-align-left — <a href="#togglebutton">ToggleButton</a></li> 3534 <li>html-editor-align-right — <a href="#togglebutton">ToggleButton</a></li> 3535 <li>html-editor-align-center — <a href="#togglebutton">ToggleButton</a></li> 3536 <li>html-editor-align-justify — <a href="#togglebutton">ToggleButton</a></li> 3537 <li>html-editor-outdent — <a href="#togglebutton">ToggleButton</a></li> 3538 <li>html-editor-indent — <a href="#togglebutton">ToggleButton</a></li> 3539 <li>html-editor-bullets — <a href="#togglebutton">ToggleButton</a></li> 3540 <li>html-editor-numbers — <a href="#togglebutton">ToggleButton</a></li> 3541 </ul> 3542 </li> 3543 <li>web-view — <a href="#webview">WebView</a></li> 3544 <li>bottom-toolbar — ToolBar 3545 <ul> 3546 <li>format-menu-button — ComboBox</li> 3547 <li>font-family-menu-button — <a href="#combobox">ComboBox</a></li> 3548 <li>font-size-menu-button — <a href="#combobox">ComboBox</a></li> 3549 <li>html-editor-bold — <a href="#togglebutton">ToggleButton</a></li> 3550 <li>html-editor-italic — <a href="#togglebutton">ToggleButton</a></li> 3551 <li>html-editor-underline — <a href="#togglebutton">ToggleButton</a></li> 3552 <li>html-editor-strike — <a href="#togglebutton">ToggleButton</a></li> 3553 <li>html-editor-hr — <a href="#togglebutton">ToggleButton</a></li> 3554 <li>html-editor-foreground — <a href="#colorpicker">ColorPicker</a></li> 3555 <li>html-editor-background — <a href="#colorpicker">ColorPicker</a></li> 3556 3557 </ul> 3558 </li> 3559 </ul> 3560 </li> 3561 </ul> 3562 <h4><a id="hyperlink">Hyperlink</a></h4> 3563 <p class="styleclass">Style class: hyperlink</p> 3564 <p>The Hyperlink control has all the properties of <a href="#buttonbase">ButtonBase</a>.</p> 3565 <table class="csspropertytable"> 3566 <caption>Available CSS Properties</caption> 3567 <thead> 3568 <tr> 3569 <th class="propertyname" scope="col">CSS Property</th> 3570 <th class="value" scope="col">Values</th> 3571 <th scope="col">Default</th> 3572 <th scope="col">Comments</th> 3573 </tr> 3574 </thead> 3575 <tbody> 3576 <tr> 3577 <th class="propertyname" scope="row">-fx-cursor</th> 3578 <td class="value">[ null | crosshair | default | hand | move | 3579 e-resize | h-resize | ne-resize | nw-resize | n-resize | se-resize | 3580 sw-resize | s-resize | w-resize | v-resize | text | wait ] | <a href="#typeurl" 3581 class="typelink"><url></a></td> 3582 <td class="default">hand</td> 3583 <td>inherits </td> 3584 </tr> 3585 </tbody> 3586 </table> 3587 <h4>Pseudo-classes</h4> 3588 <table class="csspropertytable"> 3589 <caption>Available CSS Pseudo-classes</caption> 3590 <thead> 3591 <tr> 3592 <th class="propertyname" scope="col">CSS Pseudo-class</th> 3593 <th scope="col">Comments</th> 3594 </tr> 3595 </thead> 3596 <tbody> 3597 <tr> 3598 <th class="propertyname" scope="row">visited</th> 3599 <td>applies when the <strong>visited </strong>variable is true</td> 3600 </tr> 3601 <tr> 3602 <td colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#buttonbase">ButtonBase</a></td> 3603 </tr> 3604 </tbody> 3605 </table> 3606 <h4>Substructure</h4> 3607 <ul> 3608 <li>label — Label</li> 3609 </ul> 3610 <h4><a id="indexedcell">IndexedCell</a></h4> 3611 <p class="styleclass">Style class: indexed-cell</p> 3612 <p>The IndexedCell control has all the properties of <a href="#cell">Cell</a>.</p> 3613 <h4>Pseudo-classes</h4> 3614 <table class="csspropertytable"> 3615 <caption>Available CSS Pseudo-classes</caption> 3616 <thead> 3617 <tr> 3618 <th class="propertyname" scope="col">CSS Pseudo-class</th> 3619 <th scope="col">Comments</th> 3620 </tr> 3621 </thead> 3622 <tbody> 3623 <tr> 3624 <th class="propertyname" scope="row">even</th> 3625 <td>applies if this cell's index is even</td> 3626 </tr> 3627 <tr> 3628 <th class="propertyname" scope="row">odd</th> 3629 <td>applies if this cell's index is odd</td> 3630 </tr> 3631 <tr> 3632 <th colspan="4" class="parents" scope="row">Also has all pseudo‑classes of <a href="#cell">Cell</a></th> 3633 </tr> 3634 </tbody> 3635 </table> 3636 <h4><a id="label">Label</a></h4> 3637 <p class="styleclass">Style class: label</p> 3638 <p>Label has all the properties and pseudo‑class state of <a href="#labeled">Labeled</a></p> 3639 <h4><a id="labeled">Labeled</a></h4> 3640 <table class="csspropertytable"> 3641 <caption>Available CSS Properties</caption> 3642 <thead> 3643 <tr> 3644 <th class="propertyname" scope="col">CSS Property</th> 3645 <th class="value" scope="col">Values</th> 3646 <th scope="col">Default</th> 3647 <th scope="col">Comments</th> 3648 </tr> 3649 </thead> 3650 <tbody> 3651 <tr> 3652 <th class="propertyname" scope="row">-fx-alignment</th> 3653 <td class="value">[ top-left | top-center | top-right | center-left | 3654 center | center-right bottom-left | bottom-center | bottom-right | 3655 baseline-left | baseline-center | baseline-right ]</td> 3656 <td class="default">center-left</td> 3657 <td> </td> 3658 </tr> 3659 <tr> 3660 <th class="propertyname" scope="row">-fx-text-alignment</th> 3661 <td class="value">[ left | center | right | justify ]</td> 3662 <td>left</td> 3663 <td>text-align from CSS spec maps to textAlignment in JavaFX</td> 3664 </tr> 3665 <tr> 3666 <th class="propertyname" scope="row">-fx-text-overrun</th> 3667 <td class="value">[ center-ellipsis | center-word-ellipsis | clip | 3668 ellipsis | leading-ellipsis | leading-word-ellipsis | word-ellipsis 3669 ]</td> 3670 <td>ellipsis</td> 3671 <td> </td> 3672 </tr> 3673 <tr> 3674 <th class="propertyname" scope="row">-fx-wrap-text</th> 3675 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 3676 <td>false</td> 3677 <td> </td> 3678 </tr> 3679 <tr> 3680 <th class="propertyname" scope="row">-fx-font</th> 3681 <td class="value"><a href="#typefont" class="typelink"><font></a></td> 3682 <td>platform dependent</td> 3683 <td>inherits<br>The initial value is that of Font.getDefault()</td> 3684 </tr> 3685 <tr> 3686 <th class="propertyname" scope="row">-fx-underline</th> 3687 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 3688 <td>false</td> 3689 <td> </td> 3690 </tr> 3691 <tr> 3692 <th class="propertyname" scope="row">-fx-graphic</th> 3693 <td class="value"><a href="#typeurl" class="typelink"><uri></a></td> 3694 <td>null</td> 3695 <td> </td> 3696 </tr> 3697 <tr> 3698 <th class="propertyname" scope="row">-fx-content-display</th> 3699 <td class="value">[ top | right | bottom | left | center | right | 3700 graphic-only | text-only ]</td> 3701 <td>left</td> 3702 <td> </td> 3703 </tr> 3704 <tr> 3705 <th class="propertyname" scope="row">-fx-graphic-text-gap</th> 3706 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3707 <td>4</td> 3708 <td> </td> 3709 </tr> 3710 <tr> 3711 <th class="propertyname" scope="row">-fx-label-padding</th> 3712 <td class="value"><a href="#typesize" class="typelink"><size></a> 3713 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 3714 class="typelink"><size></a> 3715 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 3716 class="typelink"><size></a></td> 3717 <td>[0,0,0,0]</td> 3718 <td> </td> 3719 </tr> 3720 <tr> 3721 <th class="propertyname" scope="row">-fx-text-fill</th> 3722 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 3723 <td>black</td> 3724 <td> </td> 3725 </tr> 3726 <tr> 3727 <th class="propertyname" scope="row">-fx-ellipsis-string</th> 3728 <td class="value"><a href="#typestring" class="typelink"><string></a></td> 3729 <td>...</td> 3730 <td> </td> 3731 </tr> 3732 <tr> 3733 <th colspan="4" class="parents" scope="row">Also has properties of <a href="#control">Control</a></th> 3734 </tr> 3735 </tbody> 3736 </table> 3737 <h4><a id="listcell">ListCell</a></h4> 3738 <p class="styleclass">Style class: list-cell</p> 3739 <p>The ListCell control has all the settable properties and pseudo‑classes 3740 of <a href="#indexedcell">IndexedCell</a>.</p> 3741 <h4><a id="listview">ListView</a></h4> 3742 <p class="styleclass">Style class: list-view</p> 3743 <table class="csspropertytable"> 3744 <caption>Available CSS Properties</caption> 3745 <thead> 3746 <tr> 3747 <th class="propertyname" scope="col">CSS Property</th> 3748 <th class="value" scope="col">Values</th> 3749 <th scope="col">Default</th> 3750 <th scope="col">Comments</th> 3751 </tr> 3752 </thead> 3753 <tbody> 3754 <tr> 3755 <th class="propertyname" scope="row">-fx-orientation</th> 3756 <td class="value">[ horizontal | vertical ]</td> 3757 <td class="default">vertical</td> 3758 <td> </td> 3759 </tr> 3760 </tbody> 3761 </table> 3762 <h4>Pseudo-classes</h4> 3763 <table class="csspropertytable"> 3764 <caption>Available CSS Pseudo-classes</caption> 3765 <thead> 3766 <tr> 3767 <th class="propertyname" scope="col">CSS Pseudo-class</th> 3768 <th scope="col">Comments</th> 3769 </tr> 3770 </thead> 3771 <tbody> 3772 <tr> 3773 <th class="propertyname" scope="row">horizontal</th> 3774 <td>applies if this ListView is horizontal</td> 3775 </tr> 3776 <tr> 3777 <th class="propertyname" scope="row">vertical</th> 3778 <td>applies if this ListView is vertical</td> 3779 </tr> 3780 </tbody> 3781 </table> 3782 <h4>Substructure</h4> 3783 <ul> 3784 <li>.list-view — the ListView<T> 3785 <ul> 3786 <li>.virtual-flow — VirtualFlow 3787 <ul> 3788 <li>.clipped-container — <a href="#region">Region</a> 3789 <ul> 3790 <li>.sheet — Group 3791 <ul><li>.cell.indexed-cell.list-cell — <a href="#listcell">ListCell<T></a></li></ul> 3792 <li>.scroll-bar — <a href="#scrollbar">ScrollBar</a></li> 3793 </ul> 3794 </li> 3795 </ul> 3796 </li> 3797 </ul> 3798 </li> 3799 </ul> 3800 3801 <h4><a id="menu">Menu</a></h4> 3802 <p class="styleclass">Style class: menu</p> 3803 <h4>Pseudo-classes</h4> 3804 <table class="csspropertytable"> 3805 <caption>Available CSS Pseudo-classes</caption> 3806 <thead> 3807 <tr> 3808 <th class="propertyname" scope="col">CSS Pseudo-class</th> 3809 <th scope="col">Comments</th> 3810 </tr> 3811 </thead> 3812 <tbody> 3813 <tr> 3814 <th class="propertyname" scope="row">showing</th> 3815 <td>applies if this Menu is showing</td> 3816 </tr> 3817 <tr> 3818 <td colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#control">Control</a></td> 3819 </tr> 3820 </tbody> 3821 </table> 3822 <h4><a id="menubar">MenuBar</a></h4> 3823 <p class="styleclass">Style class: menu-bar</p> 3824 <table class="csspropertytable"> 3825 <caption>Available CSS Properties</caption> 3826 <thead> 3827 <tr> 3828 <th class="propertyname" scope="col">CSS Property</th> 3829 <th class="value" scope="col">Values</th> 3830 <th scope="col">Default</th> 3831 <th scope="col">Comments</th> 3832 </tr> 3833 </thead> 3834 <tbody> 3835 <tr> 3836 <th class="propertyname" scope="row">-fx-use-system-menu-bar</th> 3837 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 3838 <td>false</td> 3839 <td> </td> 3840 </tr> 3841 <tr> 3842 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#control">Control</a></th> 3843 </tr> 3844 </tbody> 3845 </table> 3846 <p>MenuBar has all the pseudo‑class states of <a href="#control">Control</a></p> 3847 <h4>Substructure</h4> 3848 <ul> 3849 <li>menu</li> 3850 </ul> 3851 <h4><a id="menubutton">MenuButton</a></h4> 3852 <p class="styleclass">Style class: menu-button</p> 3853 <p>The MenuButton control has all the properties of <a href="#buttonbase">ButtonBase</a></p> 3854 <h4>Pseudo-classes</h4> 3855 <table class="csspropertytable"> 3856 <caption>Available CSS Pseudo-classes</caption> 3857 <thead> 3858 <tr> 3859 <th class="propertyname" scope="col">CSS Pseudo-class</th> 3860 <th scope="col">Comments</th> 3861 </tr> 3862 </thead> 3863 <tbody> 3864 <tr> 3865 <th class="propertyname" scope="row">openvertically</th> 3866 <td>applies if the <strong>openVertically</strong> variable is true</td> 3867 </tr> 3868 <tr> 3869 <th class="propertyname" scope="row">showing</th> 3870 <td>applies if the <strong>showing</strong> variable is true</td> 3871 </tr> 3872 <tr> 3873 <td colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#node">Node</a></td> 3874 </tr> 3875 </tbody> 3876 </table> 3877 <h4><a id="menuitem">MenuItem</a></h4> 3878 <p class="styleclass">Style class: menu-item</p> 3879 <h4><a id="pagination">Pagination</a></h4> 3880 <p class="styleclass">Style class: pagination</p> 3881 <p>Pagination has all the pseudo‑class states of <a href="#control">Control</a></p> 3882 <table class="csspropertytable"> 3883 <caption>Available CSS Properties</caption> 3884 <thead> 3885 <tr> 3886 <th class="propertyname" scope="col">CSS Property</th> 3887 <th class="value" scope="col">Values</th> 3888 <th scope="col">Default</th> 3889 <th scope="col">Comments</th> 3890 </tr> 3891 </thead> 3892 <tbody> 3893 <tr> 3894 <th class="propertyname" scope="row">-fx-max-page-indicator-count</th> 3895 <td class="value"><a href="#typesize" class="typelink"><number></a></td> 3896 <td>10</td> 3897 <td> </td> 3898 </tr> 3899 <tr> 3900 <th class="propertyname" scope="row">-fx-arrows-visible</th> 3901 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 3902 <td>true</td> 3903 <td> </td> 3904 </tr> 3905 <tr> 3906 <th class="propertyname" scope="row">-fx-tooltip-visible</th> 3907 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 3908 <td>false</td> 3909 <td>When set to true, a tooltip which shows the page number is set on the page indicators. 3910 This property controls whether or not the tooltip is visible on the page indicators and <em>does 3911 not</em> affect the visibility of the tooltip set or installed on the Pagination control itself.</td> 3912 </tr> 3913 <tr> 3914 <th class="propertyname" scope="row">-fx-page-information-visible</th> 3915 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 3916 <td>true</td> 3917 <td> </td> 3918 </tr> 3919 <tr> 3920 <th class="propertyname" scope="row">-fx-page-information-alignment</th> 3921 <td class="value">[ top | bottom | left | right ]</td> 3922 <td>bottom</td> 3923 <td> </td> 3924 </tr> 3925 <tr> 3926 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#control">Control</a></th> 3927 </tr> 3928 </tbody> 3929 </table> 3930 <h4>Substructure</h4> 3931 <ul> 3932 <li>page — StackPane</li> 3933 <li>pagination-control — StackPane 3934 <ul> 3935 <li>leftArrowButton — Button 3936 <ul> 3937 <li>leftArrow — StackPane</li> 3938 </ul> 3939 </li> 3940 <li>rightArrowButton — Button 3941 <ul> 3942 <li>rightArrow — StackPane</li> 3943 </ul> 3944 </li> 3945 <li>bullet-button — ToggleButton</li> 3946 <li>number-button — ToogleButton</li> 3947 <li>page-information — Label</li> 3948 </ul> 3949 </li> 3950 </ul> 3951 <h4><a id="passwordfield">PasswordField</a></h4> 3952 <p class="styleclass">Style class: password-field</p> 3953 <p>The PasswordField control has all the properties of <a href="#textfield">TextField</a></p> 3954 <h4><a id="popupcontrol">PopupControl</a></h4> 3955 <p>PopupControl is also a <a href="#popupwindow">PopupWindow</a> and as such, its root node has the 3956 style-class .root.popup</p> 3957 <h4><a id="progressbar">ProgressBar</a></h4> 3958 <p class="styleclass">Style class: progress-bar</p> 3959 <table class="csspropertytable"> 3960 <caption>Available CSS Properties</caption> 3961 <thead> 3962 <tr> 3963 <th class="propertyname" scope="col">CSS Property</th> 3964 <th class="value" scope="col">Values</th> 3965 <th scope="col">Default</th> 3966 <th scope="col">Comments</th> 3967 </tr> 3968 </thead> 3969 <tbody> 3970 <tr> 3971 <th class="propertyname" scope="row">-fx-indeterminate-bar-length</th> 3972 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 3973 <td>60</td> 3974 <td> </td> 3975 </tr> 3976 <tr> 3977 <th class="propertyname" scope="row">-fx-indeterminate-bar-escape</th> 3978 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 3979 <td>true</td> 3980 <td> </td> 3981 </tr> 3982 <tr> 3983 <th class="propertyname" scope="row">-fx-indeterminate-bar-flip</th> 3984 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 3985 <td>true</td> 3986 <td> </td> 3987 </tr> 3988 <tr> 3989 <th class="propertyname" scope="row">-fx-indeterminate-bar-animation-time</th> 3990 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 3991 <td>2.0</td> 3992 <td> </td> 3993 </tr> 3994 <tr> 3995 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#control">Control</a></th> 3996 </tr> 3997 </tbody> 3998 </table> 3999 <h4>Pseudo-classes</h4> 4000 <table class="csspropertytable"> 4001 <caption>Available CSS Pseudo-classes</caption> 4002 <thead> 4003 <tr> 4004 <th class="propertyname" scope="row">CSS Pseudo-class</th> 4005 <th>Comments</th> 4006 </tr> 4007 </thead> 4008 <tbody> 4009 <tr> 4010 <th class="propertyname" scope="row">determinate</th> 4011 <td>applies if the <strong>indeterminate</strong> variable is false</td> 4012 </tr> 4013 <tr> 4014 <th class="propertyname" scope="row">indetermindate</th> 4015 <td>applies if the <strong>indeterminate</strong> variable is true</td> 4016 </tr> 4017 <tr> 4018 <td colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#control">Control</a></td> 4019 </tr> 4020 </tbody> 4021 </table> 4022 <h4>Substructure</h4> 4023 <ul> 4024 <li>track — StackPane 4025 <ul> 4026 <li>bar — Region</li> 4027 </ul> 4028 </li> 4029 </ul> 4030 <h4><a id="progressindicator">ProgressIndicator</a></h4> 4031 <p class="styleclass">Style class: progress-indicator</p> 4032 <table class="csspropertytable"> 4033 <caption>Available CSS Properties</caption> 4034 <thead> 4035 <tr> 4036 <th class="propertyname" scope="col">CSS Property</th> 4037 <th class="value" scope="col">Values</th> 4038 <th scope="col">Default</th> 4039 <th scope="col">Comments</th> 4040 </tr> 4041 </thead> 4042 <tbody> 4043 <tr> 4044 <th class="propertyname" scope="row">-fx-indeterminate-segment-count</th> 4045 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 4046 <td>8</td> 4047 <td> </td> 4048 </tr> 4049 <tr> 4050 <th class="propertyname" scope="row">-fx-progress-color</th> 4051 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 4052 <td>null</td> 4053 <td> </td> 4054 </tr> 4055 <tr> 4056 <th class="propertyname" scope="row">-fx-spin-enabled</th> 4057 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 4058 <td>false</td> 4059 <td> </td> 4060 </tr> 4061 <tr> 4062 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#control">Control</a></th> 4063 </tr> 4064 </tbody> 4065 </table> 4066 <h4>Pseudo-classes</h4> 4067 <table class="csspropertytable"> 4068 <caption>Available CSS Pseudo-classes</caption> 4069 <thead> 4070 <tr> 4071 <th class="propertyname" scope="col">CSS Pseudo-class</th> 4072 <th scope="col">Comments</th> 4073 </tr> 4074 </thead> 4075 <tbody> 4076 <tr> 4077 <th class="propertyname" scope="row">determinate</th> 4078 <td>applies if the <strong>indeterminate</strong> variable is false</td> 4079 </tr> 4080 <tr> 4081 <th class="propertyname" scope="row">indetermindate</th> 4082 <td>applies if the <strong>indeterminate</strong> variable is true</td> 4083 </tr> 4084 <tr> 4085 <td colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#control">Control</a></td> 4086 </tr> 4087 </tbody> 4088 </table> 4089 <h4>Substructure</h4> 4090 <ul> 4091 <li>indicator — StackPane</li> 4092 <li>progress — StackPane</li> 4093 <li>percentage — Text</li> 4094 <li>tick — StackPane</li> 4095 </ul> 4096 <h4><a id="radiobutton">RadioButton</a></h4> 4097 <p class="styleclass">Style class: radio-button</p> 4098 <p>The RadioButton control has all the properties of <a href="#togglebutton">ToggleButton</a></p> 4099 <h4>Substructure</h4> 4100 <ul> 4101 <li>radio — Region 4102 <ul> 4103 <li>dot — Region</li> 4104 </ul> 4105 </li> 4106 <li>label — Label</li> 4107 </ul> 4108 <h4><a id="radiomenuitem">RadioMenuItem</a></h4> 4109 <h4>Pseudo-classes</h4> 4110 <table class="csspropertytable"> 4111 <caption>Available CSS Pseudo-classes</caption> 4112 <thead> 4113 <tr> 4114 <th class="propertyname" scope="col">CSS Pseudo-class</th> 4115 <th scope="col">Comments</th> 4116 </tr> 4117 </thead> 4118 <tbody> 4119 <tr> 4120 <th class="propertyname" scope="row">selected</th> 4121 <td>applies if this item is selected</td> 4122 </tr> 4123 </tbody> 4124 </table> 4125 <h4><a id="scrollbar">ScrollBar</a></h4> 4126 <p class="styleclass">Style class: scroll-bar</p> 4127 <table class="csspropertytable"> 4128 <caption>Available CSS Properties</caption> 4129 <thead> 4130 <tr> 4131 <th class="propertyname" scope="col">CSS Property</th> 4132 <th class="value" scope="col">Values</th> 4133 <th scope="col">Default</th> 4134 <th scope="col">Comments</th> 4135 </tr> 4136 </thead> 4137 <tbody> 4138 <tr> 4139 <th class="propertyname" scope="row">-fx-orientation</th> 4140 <td class="value">[ horizontal | vertical ]</td> 4141 <td class="default">horizontal</td> 4142 <td> </td> 4143 </tr> 4144 <tr> 4145 <th class="propertyname" scope="row">-fx-block-increment</th> 4146 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 4147 <td>10</td> 4148 <td> </td> 4149 </tr> 4150 <tr> 4151 <th class="propertyname" scope="row">-fx-unit-increment</th> 4152 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 4153 <td>1</td> 4154 <td> </td> 4155 </tr> 4156 </tbody> 4157 </table> 4158 <h4>Pseudo-classes</h4> 4159 <table class="csspropertytable"> 4160 <caption>Available CSS Pseudo-classes</caption> 4161 <thead> 4162 <tr> 4163 <th class="propertyname" scope="col">CSS Pseudo-class</th> 4164 <th scope="col">Comments</th> 4165 </tr> 4166 </thead> 4167 <tbody> 4168 <tr> 4169 <th class="propertyname" scope="row">vertical</th> 4170 <td>applies if this ScrollBar is vertical</td> 4171 </tr> 4172 <tr> 4173 <th class="propertyname" scope="row">horizontal</th> 4174 <td>applies if this ScrollBar is horizontal</td> 4175 </tr> 4176 <tr> 4177 <td colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#control">Control</a></td> 4178 </tr> 4179 </tbody> 4180 </table> 4181 <h4>Substructure</h4> 4182 <ul> 4183 <li>decrement-button — StackPane 4184 <ul> 4185 <li>decrement-arrow — StackPane </li> 4186 </ul> 4187 </li> 4188 <li>track — StackPane</li> 4189 <li>thumb — StackPane</li> 4190 <li>increment-button — StackPane 4191 <ul> 4192 <li>increment-arrow — StackPane</li> 4193 </ul> 4194 </li> 4195 </ul> 4196 <h4><a id="scrollpane">ScrollPane</a></h4> 4197 <p class="styleclass">Style class: scroll-pane</p> 4198 <table class="csspropertytable"> 4199 <caption>Available CSS Properties</caption> 4200 <thead> 4201 <tr> 4202 <th class="propertyname" scope="col">CSS Property</th> 4203 <th class="value" scope="col">Values</th> 4204 <th scope="col">Default</th> 4205 <th scope="col">Comments</th> 4206 </tr> 4207 </thead> 4208 <tbody> 4209 <tr> 4210 <th class="propertyname" scope="row">-fx-fit-to-width</th> 4211 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4212 <td>false</td> 4213 <td> </td> 4214 </tr> 4215 <tr> 4216 <th class="propertyname" scope="row">-fx-fit-to-height</th> 4217 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4218 <td>false</td> 4219 <td> </td> 4220 </tr> 4221 <tr> 4222 <th class="propertyname" scope="row">-fx-pannable</th> 4223 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4224 <td>false</td> 4225 <td> </td> 4226 </tr> 4227 <tr> 4228 <th class="propertyname" scope="row">-fx-hbar-policy</th> 4229 <td class="value">[ never | always | as-needed ]</td> 4230 <td>as-needed</td> 4231 <td> </td> 4232 </tr> 4233 <tr> 4234 <th class="propertyname" scope="row">-fx-vbar-policy</th> 4235 <td class="value">[ never | always | as-needed ]</td> 4236 <td>as-needed</td> 4237 <td> </td> 4238 </tr> 4239 <tr> 4240 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#control">Control</a></th> 4241 </tr> 4242 </tbody> 4243 </table> 4244 <h4>Pseudo-classes</h4> 4245 <table class="csspropertytable"> 4246 <caption>Available CSS Pseudo-classes</caption> 4247 <thead> 4248 <tr> 4249 <th class="propertyname" scope="col">CSS Pseudo-class</th> 4250 <th scope="col">Comments</th> 4251 </tr> 4252 </thead> 4253 <tbody> 4254 <tr> 4255 <th class="propertyname" scope="row">pannable</th> 4256 <td>applies if this ScrollPane is pannable</td> 4257 </tr> 4258 <tr> 4259 <th class="propertyname" scope="row">fitToWidth</th> 4260 <td>applies if this ScrollPane is fitToWidth</td> 4261 </tr> 4262 <tr> 4263 <th class="propertyname" scope="row">fitToHeight</th> 4264 <td>applies if this ScrollPane is fitToHeight</td> 4265 </tr> 4266 <tr> 4267 <td colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#control">Control</a></td> 4268 </tr> 4269 </tbody> 4270 </table> 4271 <h4>Substructure</h4> 4272 <ul> 4273 <li>viewport — StackPane 4274 <ul> 4275 <li> * — StackPane</li> 4276 <li> 4277 <ul><li>The ScrollPane's content</li></ul> 4278 </li> 4279 </ul> 4280 </li> 4281 <li>scroll-bar:vertical — ScrollBar</li> 4282 <li>scroll-bar:horizontall — ScrollBar</li> 4283 <li>corner — StackPane</li> 4284 </ul> 4285 <h4><a id="separator">Separator</a></h4> 4286 <p class="styleclass">Style class: separator</p> 4287 <table class="csspropertytable"> 4288 <caption>Available CSS Properties</caption> 4289 <thead> 4290 <tr> 4291 <th class="propertyname" scope="col">CSS Property</th> 4292 <th class="value" scope="col">Values</th> 4293 <th scope="col">Default</th> 4294 <th scope="col">Comments</th> 4295 </tr> 4296 </thead> 4297 <tbody> 4298 <tr> 4299 <th class="propertyname" scope="row">-fx-orientation</th> 4300 <td class="value">[ horizontal | vertical ]</td> 4301 <td class="default">horizontal</td> 4302 <td> </td> 4303 </tr> 4304 <tr> 4305 <th class="propertyname" scope="row">-fx-halignment</th> 4306 <td class="value">[ left | center | right ]</td> 4307 <td>center</td> 4308 <td> </td> 4309 </tr> 4310 <tr> 4311 <th class="propertyname" scope="row">-fx-valignment</th> 4312 <td class="value">[ top | center | baseline | bottom ]</td> 4313 <td>center</td> 4314 <td> </td> 4315 </tr> 4316 <tr> 4317 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#control">Control</a></th> 4318 </tr> 4319 </tbody> 4320 </table> 4321 <h4>Pseudo-classes</h4> 4322 <table class="csspropertytable"> 4323 <caption>Available CSS Pseudo-classes</caption> 4324 <thead> 4325 <tr> 4326 <th class="propertyname" scope="col">CSS Pseudo-class</th> 4327 <th scope="col">Comments</th> 4328 </tr> 4329 </thead> 4330 <tbody> 4331 <tr> 4332 <th class="propertyname" scope="row">horizontal</th> 4333 <td>applies if this Separator is horizontal</td> 4334 </tr> 4335 <tr> 4336 <th class="propertyname" scope="row">vertical</th> 4337 <td>applies if this Separator is vertical</td> 4338 </tr> 4339 <tr> 4340 <td colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#control">Control</a></td> 4341 </tr> 4342 </tbody> 4343 </table> 4344 <h4>Substructure</h4> 4345 <ul> 4346 <li>line — Region</li> 4347 </ul> 4348 <h4><a id="spinner">Spinner</a></h4> 4349 <p class="styleclass">Style class: spinner</p> 4350 <p>Note that the default style class, "spinner", puts arrows on right, stacked vertically. The following 4351 style classes can also be used in combination with the default style class in order to control the 4352 layout of the Spinner. 4353 </p> 4354 <table class="csspropertytable"> 4355 <caption>Available Style Classes</caption> 4356 <thead> 4357 <tr> 4358 <th class="propertyname" scope="col">Style Class</th> 4359 <th scope="col">Comment</th> 4360 </tr> 4361 </thead> 4362 <tbody> 4363 <tr> 4364 <th scope="row" class="propertyname">arrows-on-right-horizontal</th> 4365 <td>The arrows are placed on the right of the Spinner, pointing horizontally (i.e. left and right)</td> 4366 </tr> 4367 <tr> 4368 <th scope="row" class="propertyname">arrows-on-left-vertical</th> 4369 <td>The arrows are placed on the left of the Spinner, pointing vertically (i.e. up and down)</td> 4370 </tr> 4371 <tr> 4372 <th scope="row" class="propertyname">arrows-on-left-horizontal</th> 4373 <td>The arrows are placed on the left of the Spinner, pointing horizontally (i.e. left and right)</td> 4374 </tr> 4375 <tr> 4376 <th scope="row" class="propertyname">split-arrows-vertical</th> 4377 <td>The arrows are placed above and beneath the spinner, stretching to take the entire width</td> 4378 </tr> 4379 <tr> 4380 <th scope="row" class="propertyname">split-arrows-horizontal</th> 4381 <td>The decrement arrow is placed on the left of the Spinner, and the increment on the right</td> 4382 </tr> 4383 </tbody> 4384 </table> 4385 4386 <p> </p> 4387 <table class="csspropertytable"> 4388 <caption>Available CSS Properties</caption> 4389 <thead> 4390 <tr> 4391 <th class="propertyname" scope="col">CSS Property</th> 4392 <th class="value" scope="col">Values</th> 4393 <th scope="col">Default</th> 4394 <th scope="col">Comments</th> 4395 </tr> 4396 </thead> 4397 <tbody> 4398 <tr> 4399 <th scope="row" class="propertyname">-fx-initial-delay</th> 4400 <td class="value"><a href="#typeduration" class="typelink"><duration></a></td> 4401 <td>300ms</td> 4402 <td> </td> 4403 </tr> 4404 <tr> 4405 <th scope="row" class="propertyname" >-fx-repeat-delay</th> 4406 <td class="value"><a href="#typeduration" class="typelink"><duration></a></td> 4407 <td>60ms</td> 4408 <td> </td> 4409 </tr> 4410 <tr> 4411 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#control">Control</a></th> 4412 </tr> 4413 </tbody> 4414 </table> 4415 <h4>Pseudo-classes</h4> 4416 <table class="csspropertytable"> 4417 <caption>Available CSS Pseudo-classes</caption> 4418 <thead> 4419 <tr> 4420 <th class="propertyname" scope="col">CSS Pseudo-class</th> 4421 <th scope="col">Comments</th> 4422 </tr> 4423 </thead> 4424 <tbody> 4425 <tr> 4426 <td colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#control">Control</a></td> 4427 </tr> 4428 </tbody> 4429 </table> 4430 <h4>Substructure</h4> 4431 <ul> 4432 <li>text-field — TextField</li> 4433 <li>increment-arrow-button — StackPane 4434 <ul> 4435 <li>increment-arrow — Region</li> 4436 </ul> 4437 </li> 4438 <li>decrement-arrow-button — StackPane 4439 <ul> 4440 <li>decrement-arrow — Region</li> 4441 </ul> 4442 </li> 4443 </ul> 4444 <h4><a id="slider">Slider</a></h4> 4445 <p class="styleclass">Style class: slider</p> 4446 <table class="csspropertytable"> 4447 <caption>Available CSS Properties</caption> 4448 <thead> 4449 <tr> 4450 <th class="propertyname" scope="col">CSS Property</th> 4451 <th class="value" scope="col">Values</th> 4452 <th scope="col">Default</th> 4453 <th scope="col">Comments</th> 4454 </tr> 4455 </thead> 4456 <tbody> 4457 <tr> 4458 <th class="propertyname" scope="row">-fx-orientation</th> 4459 <td class="value">[ horizontal | vertical ]</td> 4460 <td class="default">horizontal</td> 4461 <td> </td> 4462 </tr> 4463 <tr> 4464 <th class="propertyname" scope="row">-fx-show-tick-labels</th> 4465 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4466 <td>false</td> 4467 <td> </td> 4468 </tr> 4469 <tr> 4470 <th class="propertyname" scope="row">-fx-show-tick-marks</th> 4471 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4472 <td>false</td> 4473 <td> </td> 4474 </tr> 4475 <tr> 4476 <th class="propertyname" scope="row">-fx-major-tick-unit</th> 4477 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 4478 <td>25</td> 4479 <td> </td> 4480 </tr> 4481 <tr> 4482 <th class="propertyname" scope="row">-fx-minor-tick-count</th> 4483 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td> 4484 <td>3</td> 4485 <td> </td> 4486 </tr> 4487 <tr> 4488 <th class="propertyname" scope="row">-fx-show-tick-labels</th> 4489 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4490 <td>false</td> 4491 <td> </td> 4492 </tr> 4493 <tr> 4494 <th class="propertyname" scope="row">-fx-snap-to-ticks</th> 4495 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4496 <td>false</td> 4497 <td> </td> 4498 </tr> 4499 <tr> 4500 <th class="propertyname" scope="row">-fx-block-increment</th> 4501 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td> 4502 <td>10</td> 4503 <td> </td> 4504 </tr> 4505 <tr> 4506 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#control">Control</a></th> 4507 </tr> 4508 </tbody> 4509 </table> 4510 <h4>Pseudo-classes</h4> 4511 <table class="csspropertytable"> 4512 <caption>Available CSS Pseudo-classes</caption> 4513 <thead> 4514 <tr> 4515 <th class="propertyname" scope="col">CSS Pseudo-class</th> 4516 <th scope="col">Comments</th> 4517 </tr> 4518 </thead> 4519 <tbody> 4520 <tr> 4521 <th class="propertyname" scope="row">horizontal</th> 4522 <td>applies if this Slider is horizontal</td> 4523 </tr> 4524 <tr> 4525 <th class="propertyname" scope="row">vertical</th> 4526 <td>applies if this Slider is vertical</td> 4527 </tr> 4528 <tr> 4529 <th colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#control">Control</a></th> 4530 </tr> 4531 </tbody> 4532 </table> 4533 <h4>Substructure</h4> 4534 <ul> 4535 <li>axis — NumberAxis</li> 4536 <li>track — Region</li> 4537 <li>thumb — Region</li> 4538 </ul> 4539 <h4><a id="splitmenubutton">SplitMenuButton</a></h4> 4540 <p class="styleclass">Style class: split-menu-button</p> 4541 <table class="csspropertytable"> 4542 <caption>Available CSS Properties</caption> 4543 <thead> 4544 <tr> 4545 <th class="propertyname" scope="col">CSS Property</th> 4546 <th class="value" scope="col">Values</th> 4547 <th scope="col">Default</th> 4548 <th scope="col">Comments</th> 4549 </tr> 4550 </thead> 4551 <tbody> 4552 <tr> 4553 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#menubutton">MenuButton</a></th> 4554 </tr> 4555 </tbody> 4556 </table> 4557 <h4><a id="splitpane">SplitPane</a></h4> 4558 <p class="styleclass">Style class: split-pane</p> 4559 <table class="csspropertytable"> 4560 <caption>Available CSS Properties</caption> 4561 <thead> 4562 <tr> 4563 <th class="propertyname" scope="col">CSS Property</th> 4564 <th class="value" scope="col">Values</th> 4565 <th scope="col">Default</th> 4566 <th scope="col">Comments</th> 4567 </tr> 4568 </thead> 4569 <tbody> 4570 <tr> 4571 <th class="propertyname" scope="row">-fx-orientation</th> 4572 <td class="value">[ horizontal | vertical ]</td> 4573 <td class="default">horizontal</td> 4574 <td> </td> 4575 </tr> 4576 <tr> 4577 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#control">Control</a></th> 4578 </tr> 4579 </tbody> 4580 </table> 4581 <h4>Pseudo-classes</h4> 4582 <table class="csspropertytable"> 4583 <caption>Available CSS Pseudo-classes</caption> 4584 <thead> 4585 <tr> 4586 <th class="propertyname" scope="col">CSS Pseudo-class</th> 4587 <th scope="col">Comments</th> 4588 </tr> 4589 </thead> 4590 <tbody> 4591 <tr> 4592 <th class="propertyname" scope="row">horizontal</th> 4593 <td>applies if this Slider is horizontal</td> 4594 </tr> 4595 <tr> 4596 <th class="propertyname" scope="row">vertical</th> 4597 <td>applies if this Slider is vertical</td> 4598 </tr> 4599 <tr> 4600 <th colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#control">Control</a></th> 4601 </tr> 4602 </tbody> 4603 </table> 4604 <h4>Substructure</h4> 4605 <ul> 4606 <li>split-pane-divider — StackPane 4607 <ul> 4608 <li>vertical-grabber — StackPane</li> 4609 <li>horizontal-grabber — StackPane</li> 4610 </ul> 4611 </li> 4612 </ul> 4613 <h4><a id="tabpane">TabPane</a></h4> 4614 <p class="styleclass">Style class: tab-pane</p> 4615 <p>Note: The styleclass is "tab-pane floating" if the TabPane is floating.</p> 4616 <table class="csspropertytable"> 4617 <caption>Available CSS Properties</caption> 4618 <thead> 4619 <tr> 4620 <th class="propertyname" scope="col">CSS Property</th> 4621 <th class="value" scope="col">Values</th> 4622 <th scope="col">Default</th> 4623 <th scope="col">Comments</th> 4624 </tr> 4625 </thead> 4626 <tbody> 4627 <tr> 4628 <th class="propertyname" scope="row">-fx-tab-min-width</th> 4629 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td> 4630 <td>0</td> 4631 <td> </td> 4632 </tr> 4633 <tr> 4634 <th class="propertyname" scope="row">-fx-tab-max-width</th> 4635 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td> 4636 <td>Double.MAX_VALUE</td> 4637 <td> </td> 4638 </tr> 4639 <tr> 4640 <th class="propertyname" scope="row">-fx-tab-min-height</th> 4641 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td> 4642 <td>0</td> 4643 <td> </td> 4644 </tr> 4645 <tr> 4646 <th class="propertyname" scope="row">-fx-tab-max-height</th> 4647 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td> 4648 <td>Double.MAX_VALUE</td> 4649 <td> </td> 4650 </tr> 4651 <tr> 4652 <th class="propertyname" scope="row">-fx-open-tab-animation</th> 4653 <td class="value">[ grow | none ]</td> 4654 <td>grow</td> 4655 <td>'none' disables Tab opening animation</td> 4656 </tr> 4657 <tr> 4658 <th class="propertyname" scope="row">-fx-close-tab-animation</th> 4659 <td class="value">[ grow | none ]</td> 4660 <td>grow</td> 4661 <td>'none' disables Tab closing animation</td> 4662 </tr> 4663 <tr> 4664 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#control">Control</a></th> 4665 </tr> 4666 </tbody> 4667 </table> 4668 <h4>Pseudo-classes</h4> 4669 <table class="csspropertytable"> 4670 <caption>Available CSS Pseudo-classes</caption> 4671 <thead> 4672 <tr> 4673 <th class="propertyname" scope="col">CSS Pseudo-class</th> 4674 <th scope="col">Comments</th> 4675 </tr> 4676 </thead> 4677 <tbody> 4678 <tr> 4679 <th class="propertyname" scope="row">top</th> 4680 <td>applies if the side is top</td> 4681 </tr> 4682 <tr> 4683 <th class="propertyname" scope="row">right</th> 4684 <td>applies if the side is rght</td> 4685 </tr> 4686 <tr> 4687 <th class="propertyname" scope="row">bottom</th> 4688 <td>applies if the side is bottom</td> 4689 </tr> 4690 <tr> 4691 <th class="propertyname" scope="row">left</th> 4692 <td>applies if the side is left</td> 4693 </tr> 4694 <tr> 4695 <th colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#control">Control</a></th> 4696 </tr> 4697 </tbody> 4698 </table> 4699 <h4>Substructure</h4> 4700 <ul> 4701 <li>tab-header-area — StackPane 4702 <ul> 4703 <li>headers-region — StackPane</li> 4704 <li>tab-header-background — StackPane</li> 4705 <li>control-buttons-tab — StackPane 4706 <ul> 4707 <li>tab-down-button — Pane 4708 <ul> 4709 <li>arrow — StackPane</li> 4710 </ul> 4711 </li> 4712 </ul> 4713 </li> 4714 <li>tab — Tab 4715 <ul> 4716 <li>tab-label — Label</li> 4717 <li>tab-close-button — StackPane</li> 4718 </ul> 4719 </li> 4720 </ul> 4721 </li> 4722 <li>tab-content-area — StackPane</li> 4723 </ul> 4724 <h4><a id="tablecolumnheader">TableColumnHeader</a></h4> 4725 <p class="styleclass">Style class: column-header</p> 4726 <table class="csspropertytable"> 4727 <caption>Available CSS Properties</caption> 4728 <thead> 4729 <tr> 4730 <th class="propertyname" scope="col">CSS Property</th> 4731 <th class="value" scope="col">Values</th> 4732 <th scope="col">Default</th> 4733 <th scope="col">Comments</th> 4734 </thead> 4735 <tbody> 4736 <tr> 4737 <th class="propertyname" scope="row">-fx-size</th> 4738 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 4739 <td>20</td> 4740 <td>The table column header size.</td> 4741 </tr> 4742 <tr> 4743 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#region">Region</a></th> 4744 </tr> 4745 </tbody> 4746 </table> 4747 <h4>Pseudo-classes</h4> 4748 <table class="csspropertytable"> 4749 <caption>Available CSS Pseudo-classes</caption> 4750 <thead> 4751 <tr> 4752 <th class="propertyname" scope="col">CSS Pseudo-class</th> 4753 <th scope="col">Comments</th> 4754 </tr> 4755 </thead> 4756 <tbody> 4757 <tr> 4758 <th class="propertyname" scope="row">last-visible</th> 4759 <td>applies if this is the last visible column in the table.</td> 4760 </tr> 4761 <tr> 4762 <th colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#node">Node</a></th> 4763 </tr> 4764 </tbody> 4765 </table> 4766 <h4>Substructure</h4> 4767 <ul> 4768 <li>column-resize-line — Region</li> 4769 <li>column-overlay — Region</li> 4770 <li>placeholder — StackPane</li> 4771 <li>column-header-background — StackPane 4772 <ul> 4773 <li>nested-column-header 4774 <ul> 4775 <li>column-header</li> 4776 </ul> 4777 </li> 4778 <li>filler — Region</li> 4779 <li>show-hide-columns-button — StackPane 4780 <ul> 4781 <li>show-hide-column-image — StackPane</li> 4782 </ul> 4783 </li> 4784 <li>column-drag-header — StackPane 4785 <ul> 4786 <li>label — Label</li> 4787 </ul> 4788 </li> 4789 </ul> 4790 </li> 4791 </ul> 4792 <h4><a id="tableview">TableView</a></h4> 4793 <p class="styleclass">Style class: table-view</p> 4794 <table class="csspropertytable"> 4795 <caption>Available CSS Properties</caption> 4796 <thead> 4797 <tr> 4798 <th class="propertyname" scope="col">CSS Property</th> 4799 <th class="value" scope="col">Values</th> 4800 <th scope="col">Default</th> 4801 <th scope="col">Comments</th> 4802 </thead> 4803 <tbody> 4804 <tr> 4805 <th class="propertyname" scope="row">-fx-fixed-cell-size</th> 4806 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 4807 <td>-1</td> 4808 <td>A value greater than zero sets the fixed cell size of the table. 4809 A value of zero or less disables fixed cell size.</td> 4810 </tr> 4811 <tr> 4812 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#control">Control</a></th> 4813 </tr> 4814 </tbody> 4815 </table> 4816 <h4>Pseudo-classes</h4> 4817 <table class="csspropertytable"> 4818 <caption>Available CSS Pseudo-classes</caption> 4819 <thead> 4820 <tr> 4821 <th class="propertyname" scope="col">CSS Pseudo-class</th> 4822 <th scope="col">Comments</th> 4823 </tr> 4824 </thead> 4825 <tbody> 4826 <tr> 4827 <th class="propertyname" scope="row">cell-selection</th> 4828 <td>applies if this TableView's selection model is cell selection</td> 4829 </tr> 4830 <tr> 4831 <th class="propertyname" scope="row">row-selection</th> 4832 <td>applies if this TableView's selection model is row selection</td> 4833 </tr> 4834 <tr> 4835 <th colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#node">Node</a></th> 4836 </tr> 4837 </tbody> 4838 </table> 4839 <h4>Substructure</h4> 4840 <ul> 4841 <li>column-resize-line — Region</li> 4842 <li>column-overlay — Region</li> 4843 <li>placeholder — StackPane</li> 4844 <li>column-header-background — StackPane 4845 <ul> 4846 <li>nested-column-header 4847 <ul> 4848 <li>column-header</li> 4849 </ul> 4850 </li> 4851 <li>filler — Region</li> 4852 <li>show-hide-columns-button — StackPane 4853 <ul> 4854 <li>show-hide-column-image — StackPane</li> 4855 </ul> 4856 </li> 4857 <li>column-drag-header — StackPane 4858 <ul> 4859 <li>label — Label</li> 4860 </ul> 4861 </li> 4862 </ul> 4863 </li> 4864 <li>table-column — TableColumn</li> 4865 </ul> 4866 <h4><a id="text-area">TextArea</a></h4> 4867 <p class="styleclass">Style class: text-area</p> 4868 <table class="csspropertytable"> 4869 <caption>Available CSS Properties</caption> 4870 <thead> 4871 <tr> 4872 <th class="propertyname" scope="col">CSS Property</th> 4873 <th class="value" scope="col">Values</th> 4874 <th scope="col">Default</th> 4875 <th scope="col">Comments</th> 4876 </tr> 4877 </thead> 4878 <tbody> 4879 <tr> 4880 <th class="propertyname" scope="row">-fx-pref-column-count</th> 4881 <td class="value">number</td> 4882 <td class="default">40</td> 4883 <td> </td> 4884 </tr> 4885 <tr> 4886 <th class="propertyname" scope="row">-fx-pref-row-count</th> 4887 <td class="value">number</td> 4888 <td class="default">10</td> 4889 <td> </td> 4890 </tr> 4891 <tr> 4892 <th class="propertyname" scope="row">-fx-wrap-text</th> 4893 <td class="value">boolean</td> 4894 <td class="default">false</td> 4895 <td> </td> 4896 </tr> 4897 <tr> 4898 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#textinputcontrol">TextInputControl</a></th> 4899 </tr> 4900 </tbody> 4901 </table> 4902 <h4>Substructure</h4> 4903 <ul> 4904 <li>scroll-pane — ScrollPane 4905 <ul> 4906 <li>content — Region</li> 4907 </ul> 4908 </li> 4909 </ul> 4910 <h4><a id="textinputcontrol">TextInputControl</a></h4> 4911 <table class="csspropertytable"> 4912 <caption>Available CSS Properties</caption> 4913 <thead> 4914 <tr> 4915 <th class="propertyname" scope="col">CSS Property</th> 4916 <th class="value" scope="col">Values</th> 4917 <th scope="col">Default</th> 4918 <th scope="col">Comments</th> 4919 </tr> 4920 </thead> 4921 <tbody> 4922 <tr> 4923 <th class="propertyname" scope="row">-fx-font</th> 4924 <td class="value"><a href="#typefont" class="typelink"><font></a></td> 4925 <td>null</td> 4926 <td>inherits</td> 4927 </tr> 4928 <tr> 4929 <th class="propertyname" scope="row">-fx-text-fill</th> 4930 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 4931 <td>black</td> 4932 <td> </td> 4933 </tr> 4934 <tr> 4935 <th class="propertyname" scope="row">-fx-prompt-text-fill</th> 4936 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 4937 <td>gray</td> 4938 <td> </td> 4939 </tr> 4940 <tr> 4941 <th class="propertyname" scope="row">-fx-highlight-fill</th> 4942 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 4943 <td>dodgerblue</td> 4944 <td> </td> 4945 </tr> 4946 <tr> 4947 <th class="propertyname" scope="row">-fx-highlight-text-fill</th> 4948 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 4949 <td>white</td> 4950 <td> </td> 4951 </tr> 4952 <tr> 4953 <th class="propertyname" scope="row">-fx-display-caret</th> 4954 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4955 <td>true</td> 4956 <td> </td> 4957 </tr> 4958 <tr> 4959 <th colspan="4" class="parents" scope="row">Also has <a href="#fontprops">Font 4960 Properties</a> and all properties of <a href="#control">Control</a></th> 4961 </tr> 4962 </tbody> 4963 </table> 4964 <h4>Pseudo-classes</h4> 4965 <table class="csspropertytable"> 4966 <caption>Available CSS Pseudo-classes</caption> 4967 <thead> 4968 <tr> 4969 <th class="propertyname" scope="col">CSS Pseudo-class</th> 4970 <th scope="col">Comments</th> 4971 </tr> 4972 </thead> 4973 <tbody> 4974 <tr> 4975 <th class="propertyname" scope="row">readonly</th> 4976 <td>applies if this TextInputControl is not editable</td> 4977 </tr> 4978 <tr> 4979 <th colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#control">Control</a></th> 4980 </tr> 4981 </tbody> 4982 </table> 4983 <h4><a id="textfield">TextField</a></h4> 4984 <p class="styleclass">Style class: text-field</p> 4985 <table class="csspropertytable"> 4986 <caption>Available CSS Properties</caption> 4987 <thead> 4988 <tr> 4989 <th class="propertyname" scope="col">CSS Property</th> 4990 <th class="value" scope="col">Values</th> 4991 <th scope="col">Default</th> 4992 <th scope="col">Comments</th> 4993 </tr> 4994 </thead> 4995 <tbody> 4996 <tr> 4997 <th class="propertyname" scope="row">-fx-alignment</th> 4998 <td class="value">[ top-left | top-center | top-right | center-left | 4999 center | center-right bottom-left | bottom-center | bottom-right | 5000 baseline-left | baseline-center | baseline-right ]</td> 5001 <td class="default">center-left</td> 5002 <td> </td> 5003 </tr> 5004 <tr> 5005 <th class="propertyname" scope="row">-fx-pref-column-count</th> 5006 <td class="value">number</td> 5007 <td class="default">12</td> 5008 <td> </td> 5009 </tr> 5010 <tr> 5011 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#textinputcontrol">TextInputControl</a></th> 5012 </tr> 5013 </tbody> 5014 </table> 5015 <p>TextField has all the pseudo‑class states of <a href="#textinputcontrol">TextInputControl</a></p> 5016 <h4><a id="titledpane">TitledPane</a></h4> 5017 <table class="csspropertytable"> 5018 <caption>Available CSS Properties</caption> 5019 <thead> 5020 <tr> 5021 <th class="propertyname" scope="col">CSS Property</th> 5022 <th class="value" scope="col">Values</th> 5023 <th scope="col">Default</th> 5024 <th scope="col">Comments</th> 5025 </tr> 5026 </thead> 5027 <tbody> 5028 <tr> 5029 <th class="propertyname" scope="row">-fx-animated</th> 5030 <td class="value"><a href="#typenumber" class="typelink"><boolean></a></td> 5031 <td>true</td> 5032 <td> </td> 5033 </tr> 5034 <tr> 5035 <th class="propertyname" scope="row">-fx-collapsible</th> 5036 <td class="value"><a href="#typenumber" class="typelink"><boolean></a></td> 5037 <td>true</td> 5038 <td> </td> 5039 </tr> 5040 <tr> 5041 <th colspan="4" class="parents" scope="row">Also has <a href="#fontprops">Font 5042 Properties</a> and all properties of <a href="#labeled">Labeled</a></th> 5043 </tr> 5044 </tbody> 5045 </table> 5046 <h4>Pseudo-classes</h4> 5047 <table class="csspropertytable"> 5048 <caption>Available CSS Pseudo-classes</caption> 5049 <thead> 5050 <tr> 5051 <th class="propertyname" scope="col">CSS Pseudo-class</th> 5052 <th scope="col">Comments</th> 5053 </tr> 5054 </thead> 5055 <tbody> 5056 <tr> 5057 <th class="propertyname" scope="row">expanded</th> 5058 <td>applies if this TitledPane is expanded</td> 5059 </tr> 5060 <tr> 5061 <th class="propertyname" scope="row">collapsed</th> 5062 <td>applies if this TitledPane is collapsed</td> 5063 </tr> 5064 <tr> 5065 <th colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#labeled">Labeled</a></th> 5066 </tr> 5067 </tbody> 5068 </table> 5069 <h4>Substructure</h4> 5070 <ul> 5071 <li>title — HBox 5072 <ul> 5073 <li>text — Label/li> </li> 5074 <li>arrow-button — StackPane/li> 5075 <ul> 5076 <li>arrow — StackPane</li> 5077 </ul> 5078 </li> 5079 </ul> 5080 </li> 5081 <li>content — StackPane/li> </li> 5082 </ul> 5083 <h4><a id="togglebutton">ToggleButton</a></h4> 5084 <p class="styleclass">Style class: toggle-button</p> 5085 <p>The ToggleButton control has all the properties of <a href="#buttonbase">ButtonBase</a>.</p> 5086 <h4>Pseudo-classes</h4> 5087 <table class="csspropertytable"> 5088 <caption>Available CSS Pseudo-classes</caption> 5089 <thead> 5090 <tr> 5091 <th class="propertyname" scope="col">CSS Pseudo-class</th> 5092 <th scope="col">Comments</th> 5093 </tr> 5094 </thead> 5095 <tbody> 5096 <tr> 5097 <th class="propertyname" scope="row">selected</th> 5098 <td>applies if this ToggleButton is selected</td> 5099 </tr> 5100 <tr> 5101 <th colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#buttonbase">ButtonBase</a></th> 5102 </tr> 5103 </tbody> 5104 </table> 5105 <h4><a id="toolbar">ToolBar</a></h4> 5106 <p class="styleclass">Style class: tool-bar</p> 5107 <table class="csspropertytable"> 5108 <caption>Available CSS Properties</caption> 5109 <thead> 5110 <tr> 5111 <th class="propertyname" scope="col">CSS Property</th> 5112 <th class="value" scope="col">Values</th> 5113 <th scope="col">Default</th> 5114 <th scope="col">Comments</th> 5115 </tr> 5116 </thead> 5117 <tbody> 5118 <tr> 5119 <th class="propertyname" scope="row">-fx-orientation</th> 5120 <td class="value">[ horizontal | vertical ]</td> 5121 <td class="default">horizontal</td> 5122 <td> </td> 5123 </tr> 5124 <tr> 5125 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#control">Control</a></th> 5126 </tr> 5127 </tbody> 5128 </table> 5129 <h4>Pseudo-classes</h4> 5130 <table class="csspropertytable"> 5131 <caption>Available CSS Pseudo-classes</caption> 5132 <thead> 5133 <tr> 5134 <th class="propertyname" scope="col">CSS Pseudo-class</th> 5135 <th scope="col">Comments</th> 5136 </tr> 5137 </thead> 5138 <tbody> 5139 <tr> 5140 <th class="propertyname" scope="row">horizontal</th> 5141 <td>applies if this ToolBar is horizontal</td> 5142 </tr> 5143 <tr> 5144 <th class="propertyname" scope="row">vertical</th> 5145 <td>applies if this ToolBar is vertical</td> 5146 </tr> 5147 <tr> 5148 <th colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#control">Control</a></th> 5149 </tr> 5150 </tbody> 5151 </table> 5152 <h4>Substructure</h4> 5153 <ul> 5154 <li>tool-bar-overflow-button — StackPane 5155 <ul> 5156 <li>arrow — StackPane</li> 5157 </ul> 5158 </li> 5159 </ul> 5160 <h4><a id="tooltip">Tooltip</a></h4> 5161 <p class="styleclass">Style class: tooltip</p> 5162 <table class="csspropertytable"> 5163 <caption>Available CSS Properties</caption> 5164 <thead> 5165 <tr> 5166 <th class="propertyname" scope="col">CSS Property</th> 5167 <th class="value" scope="col">Values</th> 5168 <th scope="col">Default</th> 5169 <th scope="col">Comments</th> 5170 </tr> 5171 </thead> 5172 <tbody> 5173 <tr> 5174 <th class="propertyname" scope="row">-fx-text-alignment</th> 5175 <td class="value">[ left | center | right | justify ]</td> 5176 <td>left</td> 5177 <td> </td> 5178 </tr> 5179 <tr> 5180 <th class="propertyname" scope="row">-fx-text-overrun</th> 5181 <td class="value">[ center-ellipsis | center-word-ellipsis | clip | 5182 ellipsis | leading-ellipsis | leading-word-ellipsis | word-ellipsis 5183 ]</td> 5184 <td>ellipsis</td> 5185 <td> </td> 5186 </tr> 5187 <tr> 5188 <th class="propertyname" scope="row">-fx-wrap-text</th> 5189 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 5190 <td>false</td> 5191 <td> </td> 5192 </tr> 5193 <tr> 5194 <th class="propertyname" scope="row">-fx-graphic</th> 5195 <td class="value"><a href="#typeurl" class="typelink"><uri></a></td> 5196 <td>null</td> 5197 <td> </td> 5198 </tr> 5199 <tr> 5200 <th class="propertyname" scope="row">-fx-content-display</th> 5201 <td class="value">[ top | right | bottom | left | center | right | 5202 graphic-only | text-only ]</td> 5203 <td>left</td> 5204 <td> </td> 5205 </tr> 5206 <tr> 5207 <th class="propertyname" scope="row">-fx-graphic-text-gap</th> 5208 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 5209 <td>4</td> 5210 <td> </td> 5211 </tr> 5212 <tr> 5213 <th class="propertyname" scope="row">-fx-font</th> 5214 <td class="value"><a href="#typefont" class="typelink"><font></a></td> 5215 <td>Font.DEFAULT</td> 5216 <td>inherits</td> 5217 </tr> 5218 <tr> 5219 <th class="propertyname" scope="row">-fx-show-delay</th> 5220 <td class="value"><a href="#typefont" class="typelink"><duration></a></td> 5221 <td>1000ms</td> 5222 <td> </td> 5223 </tr> 5224 <tr> 5225 <th class="propertyname" scope="row">-fx-show-duration</th> 5226 <td class="value"><a href="#typefont" class="typelink"><duration></a></td> 5227 <td>5000ms</td> 5228 <td> </td> 5229 </tr> 5230 <tr> 5231 <th class="propertyname" scope="row">-fx-hide-delay</th> 5232 <td class="value"><a href="#typefont" class="typelink"><duration></a></td> 5233 <td>200ms</td> 5234 <td> </td> 5235 </tr> 5236 5237 </tbody> 5238 </table> 5239 <h4>Substructure</h4> 5240 <ul> 5241 <li>label — Label</li> 5242 <li>page-corner — StackPane</li> 5243 </ul> 5244 <h4><a id="treecell">TreeCell</a></h4> 5245 <p class="styleclass">Style class: tree-cell</p> 5246 <table class="csspropertytable"> 5247 <caption>Available CSS Properties</caption> 5248 <thead> 5249 <tr> 5250 <th class="propertyname" scope="col">CSS Property</th> 5251 <th class="value" scope="col">Values</th> 5252 <th scope="col">Default</th> 5253 <th scope="col">Comments</th> 5254 </tr> 5255 </thead> 5256 <tbody> 5257 <tr> 5258 <th class="propertyname" scope="row">-fx-indent</th> 5259 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 5260 <td>10</td> 5261 <td>The amout of space to multiply by the treeItem.level to get the 5262 left margin</td> 5263 </tr> 5264 <tr> 5265 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#indexedcell">IndexedCell</a></th> 5266 </tr> 5267 </tbody> 5268 </table> 5269 <h4>Pseudo-classes</h4> 5270 <table class="csspropertytable"> 5271 <caption>Available CSS Pseudo-classes</caption> 5272 <thead> 5273 <tr> 5274 <th class="propertyname" scope="col">CSS Pseudo-class</th> 5275 <th scope="col">Comments</th> 5276 </tr> 5277 </thead> 5278 <tbody> 5279 <tr> 5280 <th class="propertyname" scope="row">expanded</th> 5281 <td>applies if this cell is expanded</td> 5282 </tr> 5283 <tr> 5284 <th class="propertyname" scope="row">collapsed</th> 5285 <td>applies if this cell is not expanded</td> 5286 </tr> 5287 <tr> 5288 <td colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#indexedcell">IndexedCell</a></td> 5289 </tr> 5290 </tbody> 5291 </table> 5292 <h4><a id="treetablecell">TreeTableCell</a></h4> 5293 <p class="styleclass">Style class: tree-table-cell</p> 5294 <table class="csspropertytable"> 5295 <caption>Available CSS Properties</caption> 5296 <thead> 5297 <tr> 5298 <th class="propertyname" scope="col">CSS Property</th> 5299 <th class="value" scope="col">Values</th> 5300 <th scope="col">Default</th> 5301 <th scope="col">Comments</th> 5302 </tr> 5303 </thead> 5304 <tbody> 5305 <tr> 5306 <th colspan="4" class="parents" scope="row">Also has all properties of <a href="#indexedcell">IndexedCell</a></th> 5307 </tr> 5308 </tbody> 5309 </table> 5310 <h4>Pseudo-classes</h4> 5311 <table class="csspropertytable"> 5312 <caption>Available CSS Pseudo-classes</caption> 5313 <thead> 5314 <tr> 5315 <th class="propertyname" scope="col">CSS Pseudo-class</th> 5316 <th scope="col">Comments</th> 5317 </tr> 5318 </thead> 5319 <tbody> 5320 <tr> 5321 <th class="propertyname" scope="row">last-visible</th> 5322 <td>true if this is the last visible cell, typically the right-most cell in the TreeTableView</td> 5323 </tr> 5324 <tr> 5325 <th colspan="2" class="parents" scope="row">Also has all pseudo‑classes of <a href="#indexedcell">IndexedCell</a></th> 5326 </tr> 5327 </tbody> 5328 </table> 5329 5330 <h4><a id="treetableview">TreeView</a></h4> 5331 <p class="styleclass">Style class: tree-table-view</p> 5332 <table class="csspropertytable"> 5333 <caption>Available CSS Properties</caption> 5334 <thead> 5335 <tr> 5336 <th class="propertyname" scope="col">CSS Property</th> 5337 <th class="value" scope="col">Values</th> 5338 <th scope="col">Default</th> 5339 <th scope="col">Comments</th> 5340 </tr> 5341 </thead> 5342 <tbody> 5343 <tr> 5344 <th class="propertyname" scope="row">-fx-fixed-cell-size</th> 5345 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 5346 <td>Region.USE_COMPUTED_SIZE</td> 5347 <td>If both -fx-cell-size and -fx-fixed-cell-size properties are 5348 specified in CSS, -fx-fixed-cell-size takes precedence.</td> 5349 </tr> 5350 <tr> 5351 <th colspan="4" class="parents" scope="row">Also has all properties and pseudo‑class state of <a href="#control">Control</a></th> 5352 </tr> 5353 </tbody> 5354 </table> 5355 5356 <h4><a id="treeview">TreeView</a></h4> 5357 <p class="styleclass">Style class: tree-view</p> 5358 <table class="csspropertytable"> 5359 <caption>Available CSS Properties</caption> 5360 <thead> 5361 <tr> 5362 <th class="propertyname" scope="col">CSS Property</th> 5363 <th class="value" scope="col">Values</th> 5364 <th scope="col">Default</th> 5365 <th scope="col">Comments</th> 5366 </tr> 5367 </thead> 5368 <tbody> 5369 <tr> 5370 <th class="propertyname" scope="row">-fx-fixed-cell-size</th> 5371 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 5372 <td>Region.USE_COMPUTED_SIZE</td> 5373 <td>If both -fx-cell-size and -fx-fixed-cell-size properties are 5374 specified in CSS, -fx-fixed-cell-size takes precedence.</td> 5375 </tr> 5376 <tr> 5377 <th colspan="4" class="parents" scope="row">Also has all properties and pseudo‑class state of <a href="#control">Control</a></th> 5378 </tr> 5379 </tbody> 5380 </table> 5381 <!-- Charts --> 5382 <h2><a id="charts">Charts</a></h2> 5383 <table class="package" width="100%"> 5384 <tbody> 5385 <tr> 5386 <td>javafx.scene.chart</td> 5387 </tr> 5388 </tbody> 5389 </table> 5390 <h4><a id="areachart">AreaChart</a></h4> 5391 <table class="csspropertytable"> 5392 <caption>Available Style Classes</caption> 5393 <thead> 5394 <tr> 5395 <th class="propertyname" scope="col">Style class</th> 5396 <th scope="col">Comments</th> 5397 <th scope="col">Properties</th> 5398 </tr> 5399 </thead> 5400 <tbody> 5401 <tr> 5402 <th class="propertyname" scope="row">"chart-series-area-line series<i> 5403 default-color<j>"</th> 5404 <td>Where <i> is the index of the series and <j> is the 5405 series’ color index. 5406 <td><a href="#node" class="typelink">Node</a> </td> 5407 </tr> 5408 <tr> 5409 <th class="propertyname" scope="row">"chart-series-area-fill series<i> 5410 default-color<j>"</th> 5411 <td>Where <i> is the index of the series and <j> is the 5412 series’ color index. 5413 <td><a href="#path" class="typelink">Path</a> </td> 5414 </tr> 5415 <tr> 5416 <th class="propertyname" scope="row">"chart-area-symbol series<i> 5417 data<j> default-color<k>"</th> 5418 <td>Where <i> is the index of the series, <j> is the index 5419 of the data within the series, and <k> is the series’ 5420 color index</td> 5421 <td><a href="#path" class="typelink">Path</a> </td> 5422 </tr> 5423 <tr> 5424 <th class="propertyname" scope="row">"chart-area-symbol series<i> 5425 area-legend-symbol default-color<j>"</th> 5426 <td>Where <i> is the index of the series and <j> is the 5427 series’ color index</td> 5428 <td>LegendItem </td> 5429 </tr> 5430 </tbody> 5431 </table> 5432 <p> </p> 5433 <table class="csspropertytable"> 5434 <caption>Available CSS Properties</caption> 5435 <thead> 5436 <tr> 5437 <th class="propertyname" scope="col">CSS Property</th> 5438 <th class="value" scope="col">Values</th> 5439 <th scope="col">Default</th> 5440 <th scope="col">Comments</th> 5441 </tr> 5442 </thead> 5443 <tbody> 5444 <tr> 5445 <th colspan="4" class="parents" scope="row">Has all properties of <a href="#xychart">XYChart</a></th> 5446 </tr> 5447 </tbody> 5448 </table> 5449 <h4><a id="axis">Axis</a></h4> 5450 <p class="styleclass">Style class: axis</p> 5451 <table class="csspropertytable"> 5452 <caption>Available CSS Properties</caption> 5453 <thead> 5454 <tr> 5455 <th class="propertyname" scope="col">CSS Property</th> 5456 <th class="value" scope="col">Values</th> 5457 <th scope="col">Default</th> 5458 <th scope="col">Comments</th> 5459 </tr> 5460 </thead> 5461 <tbody> 5462 <tr> 5463 <th class="propertyname" scope="row">-fx-side</th> 5464 <td class="value">Side</td> 5465 <td>null</td> 5466 <td> </td> 5467 </tr> 5468 <tr> 5469 <th class="propertyname" scope="row">-fx-tick-length</th> 5470 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 5471 <td>8</td> 5472 <td> </td> 5473 </tr> 5474 <tr> 5475 <th class="propertyname" scope="row">-fx-tick-label-font</th> 5476 <td class="value"><a href="#typefont" class="typelink"><font></a></td> 5477 <td>8 system</td> 5478 <td> </td> 5479 </tr> 5480 <tr> 5481 <th class="propertyname" scope="row">-fx-tick-label-fill</th> 5482 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 5483 <td>black</td> 5484 <td> </td> 5485 </tr> 5486 <tr> 5487 <th class="propertyname" scope="row">-fx-tick-label-gap</th> 5488 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 5489 <td>3</td> 5490 <td> </td> 5491 </tr> 5492 <tr> 5493 <th class="propertyname" scope="row">-fx-tick-mark-visible</th> 5494 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 5495 <td>true</td> 5496 <td> </td> 5497 </tr> 5498 <tr> 5499 <th class="propertyname" scope="row">-fx-tick-labels-visible</th> 5500 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 5501 <td>true</td> 5502 <td> </td> 5503 </tr> 5504 <tr> 5505 <th colspan="4" class="parents" scope="row">Has all properties of <a href="#region">Region</a></th> 5506 </tr> 5507 </tbody> 5508 </table> 5509 <h4>Substructure</h4> 5510 <ul> 5511 <li>axis-label — Text</li> 5512 <li>axis-tick-mark — Path</li> 5513 </ul> 5514 <h4><a id="barchart">BarChart</a></h4> 5515 <table class="csspropertytable"> 5516 <caption>Available Style Classes</caption> 5517 <thead> 5518 <tr> 5519 <th class="propertyname" scope="col">Style class</th> 5520 <th scope="col">Comments</th> 5521 <th scope="col">Properties</th> 5522 </tr> 5523 </thead> 5524 <tbody> 5525 <tr> 5526 <th class="propertyname" scope="row">"bar-chart"</th> 5527 <td> </td> 5528 <td> </td> 5529 </tr> 5530 <tr> 5531 <th class="propertyname" scope="row">"chart-bar series<i> data<j> 5532 default-color<k>"</th> 5533 <td>Where <i> is the index of the series, <j> is the index 5534 of the data within the series, and <k> is the series’ 5535 color index. 5536 If the data value is negative, the "negative" style 5537 class is added; e.g., <code>.negative.chart-bar</code>.</td> 5538 <td><a href="#node" class="typelink">Node</a> </td> 5539 </tr> 5540 <tr> 5541 <th class="propertyname" scope="row">"chart-bar series<i> bar-legend-symbol 5542 default-color<j>"</th> 5543 <td>Where <i> is the index of the series and <j> is the 5544 series’ color index</td> 5545 <td>LegendItem </td> 5546 </tr> 5547 </tbody> 5548 </table> 5549 <p> </p> 5550 <table class="csspropertytable"> 5551 <caption>Available CSS Properties</caption> 5552 <thead> 5553 <tr> 5554 <th class="propertyname" scope="col">CSS Property</th> 5555 <th class="value" scope="col">Values</th> 5556 <th scope="col">Default</th> 5557 <th scope="col">Comments</th> 5558 </tr> 5559 </thead> 5560 <tbody> 5561 <tr> 5562 <th class="propertyname" scope="row">-fx-bar-gap</th> 5563 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 5564 <td>4</td> 5565 <td> </td> 5566 </tr> 5567 <tr> 5568 <th class="propertyname" scope="row">-fx-category-gap</th> 5569 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 5570 <td>10</td> 5571 <td> </td> 5572 </tr> 5573 <tr> 5574 <th colspan="4" class="parents" scope="row">Has all properties of <a href="#xychart">XYChart</a></th> 5575 </tr> 5576 </tbody> 5577 </table> 5578 <h4><a id="bubblechart">BubbleChart</a></h4> 5579 <table class="csspropertytable"> 5580 <caption>Available Style Classes</caption> 5581 <thead> 5582 <tr> 5583 <th class="propertyname" scope="col">Style class</th> 5584 <th scope="col">Comments</th> 5585 <th scope="col">Properties</th> 5586 </tr> 5587 </thead> 5588 <tbody> 5589 <tr> 5590 <th class="propertyname" scope="row">"chart-bubble series<i> data<j> 5591 default-color<k>"</th> 5592 <td>Where <i> is the index of the series, <j> is the index 5593 of the data within the series, and <k> is the series’ 5594 color index</td> 5595 <td><a href="#node" class="typelink">Node</a> </td> 5596 </tr> 5597 <tr> 5598 <th class="propertyname" scope="row">"chart-bubble series<i> 5599 bubble-legend-symbol default-color<j>"</th> 5600 <td>Where <i> is the index of the series and <j> is the 5601 series’ color index</td> 5602 <td>LegendItem </td> 5603 </tr> 5604 </tbody> 5605 </table> 5606 <p> </p> 5607 <table class="csspropertytable"> 5608 <caption>Available CSS Properties</caption> 5609 <thead> 5610 <tr> 5611 <th class="propertyname" scope="col">CSS Property</th> 5612 <th class="value" scope="col">Values</th> 5613 <th scope="col">Default</th> 5614 <th scope="col">Comments</th> 5615 </tr> 5616 </thead> 5617 <tbody> 5618 <tr> 5619 <th colspan="4" class="parents" scope="row">Has all properties of <a href="#xychart">XYChart</a></th> 5620 </tr> 5621 </tbody> 5622 </table> 5623 <h4><a id="categoryaxis">CategoryAxis</a></h4> 5624 <p class="styleclass">Style class: axis</p> 5625 <table class="csspropertytable"> 5626 <caption>Available CSS Properties</caption> 5627 <thead> 5628 <tr> 5629 <th class="propertyname" scope="col">CSS Property</th> 5630 <th class="value" scope="col">Values</th> 5631 <th scope="col">Default</th> 5632 <th scope="col">Comments</th> 5633 </tr> 5634 </thead> 5635 <tbody> 5636 <tr> 5637 <th class="propertyname" scope="row">-fx-start-margin</th> 5638 <td class="value"><a href="#typesize" class="typelink"><number></a></td> 5639 <td>5</td> 5640 <td>The margin between the axis start and the first tick-mark</td> 5641 </tr> 5642 <tr> 5643 <th class="propertyname" scope="row">-fx-end-margin</th> 5644 <td class="value"><a href="#typesize" class="typelink"><number></a></td> 5645 <td>5</td> 5646 <td>The margin between the axis start and the first tick-mark</td> 5647 </tr> 5648 <tr> 5649 <th class="propertyname" scope="row">-fx-gap-start-and-end</th> 5650 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 5651 <td>true</td> 5652 <td>If this is true then half the space between ticks is left at the 5653 start and end</td> 5654 </tr> 5655 <tr> 5656 <th colspan="4" class="parents" scope="row">Has all properties of <a href="#axis">Axis</a></th> 5657 </tr> 5658 </tbody> 5659 </table> 5660 <h4><a id="chart">Chart</a></h4> 5661 <p class="styleclass">Style class: chart</p> 5662 <table class="csspropertytable"> 5663 <caption>Available CSS Properties</caption> 5664 <thead> 5665 <tr> 5666 <th class="propertyname" scope="col">CSS Property</th> 5667 <th class="value" scope="col">Values</th> 5668 <th scope="col">Default</th> 5669 <th scope="col">Comments</th> 5670 </tr> 5671 </thead> 5672 <tbody> 5673 <tr> 5674 <th class="propertyname" scope="row">-fx-legend-side</th> 5675 <td class="value">Side</td> 5676 <td>bottom</td> 5677 <td> </td> 5678 </tr> 5679 <tr> 5680 <th class="propertyname" scope="row">-fx-legend-visible</th> 5681 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 5682 <td>true</td> 5683 <td> </td> 5684 </tr> 5685 <tr> 5686 <th class="propertyname" scope="row">-fx-title-side</th> 5687 <td class="value">Side</td> 5688 <td>top</td> 5689 <td> </td> 5690 </tr> 5691 <tr> 5692 <th colspan="4" class="parents" scope="row">Has all properties of <a href="#region">Region</a></th> 5693 </tr> 5694 </tbody> 5695 </table> 5696 <h4>Substructure</h4> 5697 <ul> 5698 <li>chart-title — Label</li> 5699 <li>chart-content — Pane</li> 5700 </ul> 5701 <h4><a id="legend">Legend</a></h4> 5702 <p class="styleclass">Style class: chart-legend</p> 5703 <table class="csspropertytable"> 5704 <caption>Available CSS Properties</caption> 5705 <thead> 5706 <tr> 5707 <th class="propertyname" scope="col">CSS Property</th> 5708 <th class="value" scope="col">Values</th> 5709 <th scope="col">Default</th> 5710 <th scope="col">Comments</th> 5711 </tr> 5712 </thead> 5713 <tbody> 5714 <tr> 5715 <th colspan="4" class="parents" scope="row">Has all properties of <a href="#region">Region</a></th> 5716 </tr> 5717 </tbody> 5718 </table> 5719 <h4>Substructure</h4> 5720 <ul> 5721 <li>chart-legend-item — Label</li> 5722 <li>chart-legend-item-symbol — Node (the Label's graphic)</li> 5723 </ul> 5724 <h4><a id="linechart">LineChart</a></h4> 5725 <table class="csspropertytable"> 5726 <caption>Available Style Classes</caption> 5727 <thead> 5728 <tr> 5729 <th class="propertyname" scope="col">Style class</th> 5730 <th scope="col">Comments</th> 5731 <th scope="col">Properties</th> 5732 </tr> 5733 </thead> 5734 <tbody> 5735 <tr> 5736 <th class="propertyname" scope="row">"chart-series-line series<i> 5737 default-color<j>"</th> 5738 <td>Where <i> is the index of the series and <j> is the 5739 series’ color index</td> 5740 <td><a href="#node" class="typelink">Node</a> </td> 5741 </tr> 5742 <tr> 5743 <th class="propertyname" scope="row">"chart-line-symbol series<i> 5744 data<j> default-color<k>"</th> 5745 <td>Where <i> is the index of the series, <j> is the index 5746 of the data within the series, and <k> is the series’ 5747 color index</td> 5748 <td><a href="#node" class="typelink">Node</a> </td> 5749 </tr> 5750 <tr> 5751 <th class="propertyname" scope="row">"chart-line-symbol series<i> 5752 default-color<j>"</th> 5753 <td>Where <i> is the index of the series and <j> is the 5754 series’ color index</td> 5755 <td>LegendItem </td> 5756 </tr> 5757 </tbody> 5758 </table> 5759 <p> </p> 5760 <table class="csspropertytable"> 5761 <caption>Available CSS Properties</caption> 5762 <thead> 5763 <tr> 5764 <th class="propertyname" scope="col">CSS Property</th> 5765 <th class="value" scope="col">Values</th> 5766 <th scope="col">Default</th> 5767 <th scope="col">Comments</th> 5768 </tr> 5769 </thead> 5770 <tbody> 5771 <tr> 5772 <th class="propertyname" scope="row">-fx-create-symbols</th> 5773 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 5774 <td>true</td> 5775 <td> </td> 5776 </tr> 5777 <tr> 5778 <th colspan="4" class="parents" scope="row">Has all properties of <a href="#xychart">XYChart</a></th> 5779 </tr> 5780 </tbody> 5781 </table> 5782 <h4><a id="numberaxis">NumberAxis</a></h4> 5783 <p class="styleclass">Style class: axis</p> 5784 <table class="csspropertytable"> 5785 <caption>Available CSS Properties</caption> 5786 <thead> 5787 <tr> 5788 <th class="propertyname" scope="col">CSS Property</th> 5789 <th class="value" scope="col">Values</th> 5790 <th scope="col">Default</th> 5791 <th scope="col">Comments</th> 5792 </tr> 5793 </thead> 5794 <tbody> 5795 <tr> 5796 <th class="propertyname" scope="row">-fx-tick-unit</th> 5797 <td class="value"><a href="#typesize" class="typelink"><number></a></td> 5798 <td>5</td> 5799 <td>The value between each major tick mark in data units.</td> 5800 </tr> 5801 <tr> 5802 <th colspan="4" class="parents" scope="row">Has all properties of <a href="#valueaxis">ValueAxis</a></th> 5803 </tr> 5804 </tbody> 5805 </table> 5806 <h4><a id="piechart">PieChart</a></h4> 5807 <table class="csspropertytable"> 5808 <caption>Available Style Classes</caption> 5809 <thead> 5810 <tr> 5811 <th class="propertyname" scope="col">Style class</th> 5812 <th scope="col">Comments</th> 5813 <th scope="col">Properties</th> 5814 </tr> 5815 </thead> 5816 <tbody> 5817 <tr> 5818 <th class="propertyname" scope="row">"chart-pie data<i> 5819 default-color<j>"</th> 5820 <td>Where <i> is the index of the data and <j> is the 5821 series’ color index. If the data value is negative, the 5822 "negative" style‑class is added; e.g., <code>.negative.chart-pie</code>.</td> 5823 <td><a href="#node" class="typelink">Node</a> </td> 5824 </tr> 5825 <tr> 5826 <th class="propertyname" scope="row">"chart-pie-label-line;"</th> 5827 <td> </td> 5828 <td><a href="#path" class="typelink">Path</a> </td> 5829 </tr> 5830 <tr> 5831 <th class="propertyname" scope="row">"chart-pie-label;"</th> 5832 <td> </td> 5833 <td><a href="#path" class="typelink">Text</a> </td> 5834 </tr> 5835 <tr> 5836 <th class="propertyname" scope="row">"pie-legend-symbol <<em>i–th</em> 5837 data item’s style‑class>"</th> 5838 <td>Each item in the legend has the style‑class "pie-legend-symbol" 5839 plus the style‑class of the corresponding data item</td> 5840 <td>LegendItem </td> 5841 </tr> 5842 </tbody> 5843 </table> 5844 <p> </p> 5845 <table class="csspropertytable"> 5846 <caption>Available CSS Properties</caption> 5847 <thead> 5848 <tr> 5849 <th class="propertyname" scope="col">CSS Property</th> 5850 <th class="value" scope="col">Values</th> 5851 <th scope="col">Default</th> 5852 <th scope="col">Comments</th> 5853 </tr> 5854 </thead> 5855 <tbody> 5856 <tr> 5857 <th class="propertyname" scope="row">-fx-clockwise</th> 5858 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 5859 <td>true</td> 5860 <td> </td> 5861 </tr> 5862 <tr> 5863 <th class="propertyname" scope="row">-fx-pie-label-visible</th> 5864 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 5865 <td>true</td> 5866 <td> </td> 5867 </tr> 5868 <tr> 5869 <th class="propertyname" scope="row">-fx-label-line-length</th> 5870 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 5871 <td>20</td> 5872 <td> </td> 5873 </tr> 5874 <tr> 5875 <th class="propertyname" scope="row">-fx-start-angle</th> 5876 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 5877 <td>0</td> 5878 <td> </td> 5879 </tr> 5880 <tr> 5881 <th colspan="4" class="parents" scope="row">Has all properties of <a href="#chart">Chart</a></th> 5882 </tr> 5883 </tbody> 5884 </table> 5885 <h4><a id="scatterchart">ScatterChart</a></h4> 5886 <table class="csspropertytable"> 5887 <caption>Available Style Classes</caption> 5888 <thead> 5889 <tr> 5890 <th class="propertyname" scope="col">Style class</th> 5891 <th scope="col">Comments</th> 5892 <th scope="col">Properties</th> 5893 </tr> 5894 </thead> 5895 <tbody> 5896 <tr> 5897 <th class="propertyname" scope="row">"chart-symbol series<i> data<j> 5898 default-color<k>"</th> 5899 <td>Where <i> is the index of the series, <j> is the index 5900 of the data within the series, and <k> is the series’ 5901 color index</td> 5902 <td><a href="#node" class="typelink">Node</a> </td> 5903 </tr> 5904 <tr> 5905 <th class="propertyname" scope="row">"chart-symbol series<i> data0 default-color0"</th> 5906 <td>The LegendItem symbols are assigned the style‑class of the first 5907 symbol of the series.</td> 5908 <td>LegendItem </td> 5909 </tr> 5910 </tbody> 5911 </table> 5912 <p> </p> 5913 <table class="csspropertytable"> 5914 <caption>Available CSS Properties</caption> 5915 <thead> 5916 <tr> 5917 <th class="propertyname" scope="col">CSS Property</th> 5918 <th class="value" scope="col">Values</th> 5919 <th scope="col">Default</th> 5920 <th scope="col">Comments</th> 5921 </tr> 5922 </thead> 5923 <tbody> 5924 <tr> 5925 <th colspan="4" class="parents" scope="row">Has all properties of <a href="#xychart">XYChart</a></th> 5926 </tr> 5927 </tbody> 5928 </table> 5929 <h4><a id="valueaxis">ValueAxis</a></h4> 5930 <p class="styleclass">Style class: axis</p> 5931 <table class="csspropertytable"> 5932 <caption>Available CSS Properties</caption> 5933 <thead> 5934 <tr> 5935 <th class="propertyname" scope="col">CSS Property</th> 5936 <th class="value" scope="col">Values</th> 5937 <th scope="col">Default</th> 5938 <th scope="col">Comments</th> 5939 </tr> 5940 </thead> 5941 <tbody> 5942 <tr> 5943 <th class="propertyname" scope="row">-fx-minor-tick-length</th> 5944 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 5945 <td>5</td> 5946 <td> </td> 5947 </tr> 5948 <tr> 5949 <th class="propertyname" scope="row">-fx-minor-tick-count</th> 5950 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 5951 <td>5</td> 5952 <td> </td> 5953 </tr> 5954 <tr> 5955 <th class="propertyname" scope="row">-fx-minor-tick-visible</th> 5956 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 5957 <td>true</td> 5958 <td> </td> 5959 </tr> 5960 <tr> 5961 <th colspan="4" class="parents" scope="row">Has all properties of <a href="#axis">Axis</a></th> 5962 </tr> 5963 </tbody> 5964 </table> 5965 <h4>Substructure</h4> 5966 <ul> 5967 <li>axis-minor-tick-mark — Path</li> 5968 </ul> 5969 <h4><a id="xychart">XYChart</a></h4> 5970 <p class="styleclass">Style class: set by sub-type</p> 5971 <table class="csspropertytable"> 5972 <caption>Available CSS Properties</caption> 5973 <thead> 5974 <tr> 5975 <th class="propertyname" scope="col">CSS Property</th> 5976 <th class="value" scope="col">Values</th> 5977 <th scope="col">Default</th> 5978 <th scope="col">Comments</th> 5979 </tr> 5980 </thead> 5981 <tbody> 5982 <tr> 5983 <th class="propertyname" scope="row">-fx-alternative-column-fill-visible</th> 5984 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 5985 <td>true</td> 5986 <td> </td> 5987 </tr> 5988 <tr> 5989 <th class="propertyname" scope="row">-fx-alternative-row-fill-visible</th> 5990 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 5991 <td>true</td> 5992 <td> </td> 5993 </tr> 5994 <tr> 5995 <th class="propertyname" scope="row">-fx-horizontal-grid-lines-visible</th> 5996 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 5997 <td>true</td> 5998 <td> </td> 5999 </tr> 6000 <tr> 6001 <th class="propertyname" scope="row">-fx-horizontal-zero-line-visible</th> 6002 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 6003 <td>true</td> 6004 <td> </td> 6005 </tr> 6006 <tr> 6007 <th class="propertyname" scope="row">-fx-vertical-grid-lines-visible</th> 6008 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 6009 <td>true</td> 6010 <td> </td> 6011 </tr> 6012 <tr> 6013 <th class="propertyname" scope="row">-fx-vertical-zero-line-visible</th> 6014 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 6015 <td>true</td> 6016 <td> </td> 6017 </tr> 6018 <tr> 6019 <th colspan="4" class="parents" scope="row">Has all properties of <a href="#chart">chart</a></th> 6020 </tr> 6021 </tbody> 6022 </table> 6023 <h4>Substructure</h4> 6024 <ul> 6025 <li>plot-content — Group</li> 6026 <li>chart-plot-background — Region</li> 6027 <li>chart-alternative-column-fill — Path</li> 6028 <li>chart-alternative-row-fill — Path</li> 6029 <li>chart-vertical-grid-lines — Path</li> 6030 <li>chart-horizontal-grid-lines — Path</li> 6031 <li>chart-vertical-zero-line — Line</li> 6032 <li>chart-horizontal-zero-line — Line</li> 6033 </ul> 6034 <h2><a id="references">References</a></h2> 6035 <p>[1] CSS 2.1: <a href="http://www.w3.org/TR/CSS21/" target="_blank">http://www.w3.org/TR/CSS21/</a> 6036 </p> 6037 <p>[2] CSS 3 work in progress <a href="http://www.w3.org/Style/CSS/current-work" 6038 target="_blank">http://www.w3.org/Style/CSS/current-work</a> 6039 (May 2010). </p> 6040 <p>[3] SVG Paths: <a href="http://www.w3.org/TR/SVG/paths.html" target="_blank">http://www.w3.org/TR/SVG/paths.html</a> 6041 </p> 6042 <p>[4] CSS Backgrounds and Borders Module Level 3: <a href="http://www.w3.org/TR/css3-background/" 6043 target="_blank">http://www.w3.org/TR/css3-background/</a> 6044 </p> 6045 <p>[5] Uniform Resource Identifier (URI): Generic Syntax <a href="http://www.ietf.org/rfc/rfc3986">RFC-3986</a></p> 6046 <hr> 6047 <p> 6048 <small><a href="http://bugreport.java.com/bugreport/">Report a bug or suggest an enhancement</a><br> Copyright © 2008, 2020, Oracle and/or its affiliates. All rights reserved.</small> 6049 </p> 6050 <br> 6051 </body> 6052 </html>