1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
3 <!--
4 /*
5 * Copyright (c) 2017, 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
710 <p class="example">.my-rect {<br>
711 -fx-fill: yellow;<br>
712 -fx-stroke: green;<br>
713 -fx-stroke-width: 5;<br>
714 -fx-stroke-dash-array: 12 2 4 2;<br>
715 -fx-stroke-dash-offset: 6;<br>
716 -fx-stroke-line-cap: butt;<br>
717 }<br>
718 </p>
719 <p>the result will be a yellow rectangle with a nicely dashed green border:
720 </p>
721 <p><img src="cssexample2.png" alt="A rectangle with yellow fill and a green, dashed border"></p>
722 <h3><a name="introparserwarnings" id="introparserwarnings">Understanding
723 Parser Warnings</a></h3>
724 <p>When the JavaFX CSS parser encounters a syntax error, a warning message
725 is emitted which conveys as much information as is available to help
726 resolve the error. For example </p>
727 <p class="example"> WARNING: javafx.css.CssParser declaration
728 Expected '<percent>' while parsing '-fx-background-color' at ?[1,49]
729 </p>
730 <p>The cryptic '<span class="p example">?[1,49]</span>' pertains to the
731 location of the error. The format of the location string is </p>
732 <p class="grammar"><url>[line, position]</p>
733 <p>If the error is found while parsing a file, the file URL will be given.
734 If the error is from an inline style (as in the example above), the URL is
735 given as a question mark. The line and position give an offset into the
736 file or string where the token begins. <em>Please note that the line and
737 position may not be accurate in releases prior to JavaFX 2.2.</em><br>
738 </p>
739 <p>Applications needing to detect errors from the parser can add a listener
740 to the errors property of javafx.css.CssParser. <br>
741 </p>
742 <h3><a name="introlimitations" id="introlimitations">Limitations</a></h3>
743 <ol>
744 <li> While the JavaFX CSS parser will parse valid CSS syntax, it is not a
745 fully compliant CSS parser. One should not expect the parser to handle
746 syntax not specified in this document.</li>
747 <li>With the exception of @font‑face and @import, @-keyword statements are ignored.</li>
748 <li>The <media-query-list> of the @import statement is not parsed.</li>
749 <li>The structural pseudo‑classes are not supported. </li>
750 <li>The ":active" and ":focus" dynamic pseudo‑classes are not supported.
832 </ul>
833 <h4><a name="typepercentage" id="typepercentage"><percentage></a></h4>
834 <p>These are a percentage of some length, typically to the width or height
835 of a node.</p>
836 <p class="grammar"><a href="#typenumber"><number></a>[ % ]</p>
837 <h3><a name="typeangle" id="typeangle"><angle></a></h3>
838 <p>An angle is a <a href="#typenumber" class="typeref"><number></a>
839 with one of the following units.</p>
840 <p> </p>
841 <p class="grammar"><a href="#typenumber"><number></a>[ deg | rad |
842 grad | turn ]</p>
843 <ul>
844 <li><strong>deg</strong>: angle in degrees — all other angle units are
845 converted to degrees.</li>
846 <li><strong>rad</strong>: angle in radians</li>
847 <li><strong>grad</strong>: angle in gradians</li>
848 <li><strong>turn</strong>: angle in turns</li>
849 </ul>
850 <h3><a name="typeduration" id="typeduration"><duration></a></h3>
851 <p>A duration is a <a href="#typenumber" class="typeref"><number></a>
852 with second or millisecond units, or the value <span class="grammar">indefinite</span>.</p>
853 <p> </p>
854 <p class="grammar">[<a href="#typenumber"><number></a>[ s | ms ]] | indefinite</p>
855 <ul>
856 <li><strong>s</strong>: duration in seconds</li>
857 <li><strong>ms</strong>: duration in milliseconds. One second is 1000 milliseconds.</li>
858 <li><strong>indefinite</strong>: See <a href="../../util/Duration.html#INDEFINITE" class="typelink">Duration.INDEFINITE</a></li>
859 </ul>
860 <p>See also <a href="http://www.w3.org/TR/css3-values/#time" class="typelink">W3C time units</a>.</p>
861 <h3><a name="typepoint" id="typepoint"><point></a></h3>
862 <p>A point is an {x,y} coordinate.</p>
863 <p class="grammar">[ [ <length> <length> ] | [
864 <percentage> | <percentage> ] ]</p>
865 <h3><a name="typecolorstop" id="typecolorstop"><color-stop></a></h3>
866 <p>Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
867 class="typelink">W3C
868 color-stop syntax</a>.</p>
869 <p class="grammar">[ <a href="#typecolor" class="typeref"><color></a>
870 [ <a href="#typepercentage" class="typeref"><percentage></a> | <a
871 href="#typelength"
872 class="typeref"><length></a>]?
873 ]</p>
874 <p>In a series of <color-stop>, stop distance values must all be
875 <percentage> or <length>. Furthermore, if <length>
876 values are used, then the distance value for first and last stop in the
877 series must be specified. This restriction may be removed in a future
878 release.</p>
879 <p>"<span style="color: #009900; ">red, white 70%, blue</span>" is valid since the
880 distance for red and blue is assumed to be 0% and 100%, respectively.</p>
881 <p>"<span style="color: #009900; ">red 10, white, blue 90</span>" is valid. Because
882 distance for red and blue is 10 and 90, respectively, the distance for
883 white can be calculated.</p>
884 <p>"<span style="color: #009900; ">red, white 70, blue</span>" is <span style="font-style:italic;">not</span> valid
885 since distance units do not agree.</p>
886 <p>"<span style="color: #009900; ">red, white, blue</span>" is valid. The stops are
887 distributed evenly between 0% and 100%.</p>
888 <h3><a name="typeurl" id="typeurl"><uri></a></h3>
889 <p class="grammar">url ( [\"\']? <address> [\"\']? )</p>
890 <p><span class="grammar"><address></span> is a hierarchical URI of the form [scheme:][//authority][path] <a href="#references">(see [2])</a>.
891 For example:</p>
892 <p class="example">
893 url(http://example.com/images/Duke.png)<br>
894 url(/com/example/javafx/app/images/Duke.png)<br>
895 </p>
896 <p>If the <span class="grammar"><address></span> does not have a [scheme:] component, the <span class="grammar"><address></span>
897 is considered to be the [path] component only.
898 A leading '/' character indicates that the [path] is relative to the
899 root of the classpath. If the the style appears in a stylesheet and
900 has no leading '/' character, the path is relative to the base URI of
901 the stylesheet. If the style appears in an inline style, the path is
902 relative to the root of the classpath (regardless of whether or not
903 there is a leading '/').
904 </p>
905 <table class="csspropertytable" cellspacing="3" cellpadding="4">
906 <caption>Examples of Resolving URLs in Stylesheets</caption>
907 <tr>
908 <th>Stylesheet URL</th><th>URL in Style</th><th>Resolves to</th>
909 </tr>
910 <tr>
911 <td>file:///some/path/build/classes/com/mycompany/myapp/mystyles.css</td>
912 <td>url(images/Duke.png)</td>
913 <td>file:///some/path/build/classes/com/mycompany/myapp/images/Duke.png</td>
914 </tr>
915 <tr>
916 <td>file:///some/path/build/classes/com/mycompany/myapp/mystyles.css</td>
945 <p>As an example, the code snippet below creates a scene filled with a fictional 'Duke.png' image, located in an
946 'image' directory:</p>
947 <textarea rows="9" cols="132">
948
949 @Override public void start(Stage stage) {
950 StackPane root = new StackPane();
951 root.setStyle("-fx-background-image: url(images/Duke.png);");
952 Scene scene = new Scene(root, 300, 250);
953 stage.setScene(scene);
954 stage.show();
955 }
956 </textarea>
957 <p>The same style would work equally as well from a stylesheet.</p>
958 <h3><a name="typeeffect" id="typeeffect"><effect></a></h3>
959 <p>JavaFX CSS currently supports the DropShadow and InnerShadow effects from
960 the JavaFX platform. See the class documentation in javafx.scene.effect
961 for further details about the semantics of the various effect parameters.</p>
962 <h4>Drop Shadow</h4>
963 <p>A high-level effect that renders a shadow of the given content behind the
964 content.</p>
965 <p><span class="grammar">dropshadow( <blur-type> , <a href="#typecolor"
966 class="typelink"><color></a>
967 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
968 class="typelink"><number></a>
969 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
970 class="typelink"><number></a>
971 )</span></p>
972 <p style="margin-left: 40px;"><span class="grammar"><blur-type> = [
973 gaussian | one-pass-box | three-pass-box | two-pass-box ]<br>
974 <a href="#typecolor" class="typelink"><color></a></span> The
975 shadow Color.<br>
976 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
977 The radius of the shadow blur kernel. In the range [0.0 ... 127.0],
978 typical value 10.<br>
979 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
980 The spread of the shadow. The spread is the portion of the radius where
981 the contribution of the source material will be 100%. The remaining
982 portion of the radius will have a contribution controlled by the blur
983 kernel. A spread of 0.0 will result in a distribution of the shadow
984 determined entirely by the blur algorithm. A spread of 1.0 will result in
985 a solid growth outward of the source material opacity to the limit of the
986 radius with a very sharp cutoff to transparency at the radius. Values
987 should be in the range [0.0 ... 1.0].<br>
988 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
989 The shadow offset in the x direction, in pixels. <br>
990 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
991 The shadow offset in the y direction, in pixels. </p>
992 <h4>Inner Shadow</h4>
993 <p>A high-level effect that renders a shadow inside the edges of the given
994 content.</p>
995 <p><span class="grammar">innershadow( <blur-type> , <a href="#typecolor"
996 class="typelink"><color></a>
997 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
998 class="typelink"><number></a>
999 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
1000 class="typelink"><number></a>
1001 )</span></p>
1002 <p style="margin-left: 40px;"><span class="grammar"><blur-type> = [
1003 gaussian | one-pass-box | three-pass-box | two-pass-box ]<br>
1004 </span><span class="grammar"><a href="#typecolor" class="typelink"><color></a></span>
1005 The shadow Color.<br>
1006 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1007 The radius of the shadow blur kernel. In the range [0.0 ... 127.0],
1008 typical value 10.<br>
1009 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1010 The choke of the shadow. The choke is the portion of the radius where the
1011 contribution of the source material will be 100%. The remaining portion of
1012 the radius will have a contribution controlled by the blur kernel. A choke
1013 of 0.0 will result in a distribution of the shadow determined entirely by
1014 the blur algorithm. A choke of 1.0 will result in a solid growth inward of
1015 the shadow from the edges to the limit of the radius with a very sharp
1016 cutoff to transparency inside the radius. Values should be in the range
1017 [0.0 ... 1.0].<br>
1018 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1019 The shadow offset in the x direction, in pixels. <br>
1020 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1021 The shadow offset in the y direction, in pixels. </p>
1022 <h3><a name="typefont" id="typefont"><font></a></h3>
1023 <p>JavaFX CSS supports the ability to specify fonts using separate family,
1024 size, style, and weight properties, as well as the ability to specify a
1025 font using a single shorthand property. There are four value types related
1026 to fonts plus a shorthand property that encompasses all four properties.
1027 The font-related types are as follows. </p>
1028 <p><span class="grammar"><font-family></span>The string name of the
1029 font family. An actual font family name available on the system can be
1030 used, or one of the following generic family names can be used:</p>
1031 <ul>
1032 <li>'serif' (e.g., Times)</li>
1033 <li>'sans-serif' (e.g., Helvetica)</li>
1034 <li>'cursive' (e.g., Zapf-Chancery)</li>
1035 <li>'fantasy' (e.g., Western)</li>
1036 <li>'monospace' (e.g., Courier)</li>
1037 </ul>
1038 <p><span class="grammar"><font-size></span> The size of the font,
1039 using the <span class="grammar"><size></span> syntax.</p>
1040 <p><span class="grammar"><font-style></span> The font's style, using
1041 the following syntax:<br>
1042 <span class="grammar">[ normal | italic | oblique ]</span></p>
1043 <p><span class="grammar"><font-weight></span> The font's weight, using
1044 the following syntax:<br>
1045 <span class="grammar">[ normal | bold | bolder | lighter | 100 | 200 | 300
1046 | 400 | 500 | 600 | 700 | 800 | 900 ]</span></p>
1047 <p><span class="grammar"><font></span> This font shorthand property
1048 can be used in place of the above properties. It uses the following
1049 syntax:<br>
1050 <span class="grammar">[[ <font-style> || <font-weight> ]?
1051 <font-size> <font-family> ]</span></p>
1052 <h4><a name="fontprops" id="fontprops">Font Properties</a></h4>
1053 <p>Most classes that use text will support the following font properties. In
1054 some cases a similar set of properties will be supported but with a
1055 different prefix instead of "-fx-font".</p>
1056 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
1057 <thead>
1058 <tr>
1059 <th class="propertyname">CSS Property</th>
1060 <th class="value">Values</th>
1061 <th>Default</th>
1062 <th>Comments</th>
1063 </tr>
1064 </thead>
1065 <tbody>
1066 <tr>
1067 <td class="propertyname">-fx-font</td>
1068 <td class="value"><a href="#typefont" class="typelink"><font></a></td>
1069 <td>inherit</td>
1070 <td>shorthand property for font-size, font-family, font-weight and
1087 <td class="value"><a href="#typefont" class="typelink"><font-style></a></td>
1088 <td>inherit</td>
1089 <td> </td>
1090 </tr>
1091 <tr>
1092 <td class="propertyname">-fx-font-weight</td>
1093 <td class="value"><a href="#typefont" class="typelink"><font-weight></a></td>
1094 <td>inherit</td>
1095 <td> </td>
1096 </tr>
1097 </tbody>
1098 </table>
1099 <h3><a name="typepaint" id="typepaint"><paint></a></h3>
1100 <p>Paint values can either be a solid color specified in one of the color
1101 syntaxes, they can be a linear or radial gradient, or an image-pattern.</p>
1102 <p class="grammar"><a href="#typecolor" class="typelink"><color></a> |
1103 <a href="#typelinear-gradient" class="typelink"><linear-gradient></a> |
1104 <a href="#typeradial-gradient" class="typelink"><radial-gradient></a> |
1105 <a href="#typeimage-pattern" class="typelink"><image-pattern></a>
1106 <a href="#typeimage-pattern" class="typelink"><repeating-image-pattern></a></p>
1107 <h4>Linear Gradients<span class="grammar" style="font-size: smaller;">
1108 <a name="typelinear-gradient" id="typelinear-gradient"><linear-gradient></a>
1109 </span></h4>
1110 <p class="grammar">linear-gradient( [ [from <a href="#typepoint" class="typelink"><point></a>
1111 to <a href="#typepoint" class="typelink"><point></a>] | [ to
1112 <side-or-corner>], ]? [ [ repeat | reflect ], ]? <a href="#typecolorstop"
1113 class="typelink"><color-stop></a>[,
1114 <a href="#typecolorstop" class="typelink"><color-stop></a>]+) <br>
1115 <br>
1116 where <side-or-corner> = [left | right] || [top | bottom] </p>
1117 <p> </p>
1118 <p>Linear gradient creates a gradient going though all the stop colors along
1119 the line between the "from" <a href="#typepoint" class="typelink"><point></a>
1120 and the "to" <a href="#typepoint" class="typelink"><point></a>. If
1121 the points are percentages, then they are relative to the size of the area
1122 being filled. Percentage and length sizes can not be mixed in a single
1123 gradient function.</p>
1124 <p> If neither repeat nor reflect are given, then the CycleMethod defaults
1125 "NO_CYCLE".<br>
1126 If neither [from <point> to <point>] nor [ to
1127 <side-or-corner> ] are given, then the gradient direction defaults
1129 Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1130 class="typelink">W3C
1131 color-stop syntax</a> and are normalized accordingly. </p>
1132 <p>This example will create a gradient from top left to bottom right of the
1133 filled area with red at the top left corner and black at the bottom right.</p>
1134 <p class="example">linear-gradient(to bottom right, red, black)</p>
1135 <p>This is equivalent to: </p>
1136 <p class="example">linear-gradient(from 0% 0% to 100% 100%, red 0%, black
1137 100%)</p>
1138 <p>This more complex example will create a 50px high bar at the top with a 3
1139 color gradient with white underneath for the rest of the filled area.</p>
1140 <p class="example">linear-gradient(from 0px 0px to 0px 50px, gray, darkgray
1141 50%, dimgray 99%, white)</p>
1142 <p><span style="color: #af0000; ">The following syntax for linear gradient does not
1143 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX
1144 2.0 CSS parser supports the syntax but this support may be removed in
1145 later releases.</span></p>
1146 <p class="grammar"><span style="color: #af0000; ">linear (<size>, <size>)
1147 to (<size>, <size>) stops [ (<number>,<color>)
1148 ]+ [ repeat | reflect ]?</span></p>
1149 <h4>Radial Gradients <span class="grammar" style="font-size: smaller;">
1150 <a name="typeradial-gradient" id="typeradial-gradient"><radial-gradient></a>
1151 </span></h4>
1152 <p class="grammar">radial-gradient([ focus-angle <a href="#typeangle" class="typelink"><angle></a>,
1153 ]? [ focus-distance <a href="#typepercentage" class="typelink"><percentage></a>,
1154 ]? [ center <a href="#typepoint" class="typelink"><point></a>, ]?
1155 radius [ <a href="#typelength" class="typelink"><length></a> | <a
1156 href="#typepercentage"
1157 class="typelink"><percentage></a>
1158 ] [ [ repeat | reflect ], ]? <a href="#typecolorstop" class="typelink"><color-stop></a>[,
1159 <a href="#typecolorstop" class="typelink"><color-stop></a>]+) </p>
1160 <p>Radial gradient creates a gradient going though all the stop colors radiating outward from
1161 the <a href="#typepoint" class="typelink">center point</a>
1162 to the <a href="#typelength" class="typelink">radius</a>. If the center point is not given,
1163 the center defaults to (0,0). Percentage values are relative to the size of the area
1164 being filled. Percentage and length sizes can not be mixed in a single gradient function.</p>
1165 <p> If neither repeat nor reflect are given, then the CycleMethod defaults
1166 "NO_CYCLE".<br>
1167 Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1168 class="typelink">W3C
1169 color-stop syntax</a> and are normalized accordingly. </p>
1170 <p>Following are examples of the use of radial-gradient:</p>
1171 <p class="example">radial-gradient(radius 100%, red, darkgray, black)</p>
1172 <p class="example">radial-gradient(focus-angle 45deg, focus-distance 20%,
1173 center 25% 25%, radius 50%, reflect, gray, darkgray 75%, dimgray)</p>
1174 <p><span style="color: #af0000; ">The following syntax for radial gradient does not
1175 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX
1176 2.0 CSS parser supports the syntax but this support may be removed in
1177 later releases.</span></p>
1178 <p class="grammar"><span style="color: #af0000; ">radial [focus-angle <number>
1179 | <number> ] ]? [ focus-distance <size> ]? [ center
1180 <size,size> ]? <size> stops [ ( <number>,
1181 <color> ) ]+ [ repeat | reflect ]?</span></p>
1182 <h4>Image Paint <span class="grammar" style="font-size: smaller;">
1183 <a name="typeimage-pattern" id="typeimage-pattern"><image-pattern></a>
1184 </span></h4>
1185 <p class="grammar">image-pattern(<a href="#typestring" class="typelink"><string></a>,
1186 [<a href="#typesize" class="typelink"><size></a>,
1187 <a href="#typesize" class="typelink"><size></a>,
1188 <a href="#typesize" class="typelink"><size></a>,
1189 <a href="#typesize" class="typelink"><size></a>[,
1190 <a href="#typeboolean" class="typelink"><boolean></a>]?]?)</p>
1191 <p>The parameters, in order, are:<br>
1192 <p style="margin-left: 40px;">
1193 <span class="grammar"><a href="#typestring" class="typelink"><string></a></span>
1194 The URL of the image.<br>
1195 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1196 The <span style="font-style:italic;">x</span> origin of the anchor rectangle.<br>
1197 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1198 The <span style="font-style: italic;">y</span> origin of the anchor rectangle.<br>
1199 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1200 The width of the anchor rectangle.<br>
1201 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1202 The height of the anchor rectangle.<br>
1203 <span class="grammar"><a href="#typeboolean" class="typelink"><boolean></a></span>
1204 The proportional flag which indicates whether start and end locations are proportional or absolute<br>
1205 </p>
1206 <p>For a full explanation of the parameters, refer to the
1207 <a href="../paint/ImagePattern.html" class="typelink">ImagePattern</a> javadoc.</p>
1208 <p>Following are examples of the use of image-pattern:</p>
1209 <p class="example">image-pattern("images/Duke.png")</p>
1210 <p class="example">image-pattern("images/Duke.png", 20%, 20%, 80%, 80%)</p>
1211 <p class="example">image-pattern("images/Duke.png", 20%, 20%, 80%, 80%, true)</p>
1212 <p class="example">image-pattern("images/Duke.png", 20, 20, 80, 80, false)</p>
1213
1214 <p>Related, there is the <code>repeating-image-pattern</code> function which is a shorthand
1215 for producing tiled image based fills. It is equivalent to
1216 <p class="example">image-pattern("images/Duke.png", 0, 0, imageWidth, imageHeight, false)</p>
1217
1218 <p class="grammar">repeating-image-pattern(<a href="#typestring" class="typelink"><string></a>)</p>
1219 <p>The only parameter is the uri of the image. Following is an example of the use of image-pattern:</p>
1220 <p class="example">repeating-image-pattern("com/mycompany/myapp/images/Duke.png")</p>
1221
1222
1223
1224 <h3><a name="typecolor" id="typecolor"><color></a></h3>
1225 <p class="grammar"><named-color> | <looked-up-color> |
1226 <rgb-color> | <hsb-color> | <color-function></p>
1227 <h4>Named Colors <span class="grammar" style="font-size: smaller;"><named-color></span></h4>
1228 <p>CSS supports a bunch of named constant colors. Named colors can be
1229 specified with just their unquoted name for example: </p>
1230 <p class="example">.button {<br>
1231 -fx-background-color: red;<br>
1232 }</p>
1233 <p>The named colors that are available in CSS are:</p>
1234 <table summary="property table" class="html4colortable">
1235 <tbody>
1236 <tr>
1237 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aliceblue;"></span><br>
1238 </td>
1239 <td>aliceblue = #f0f8ff</td>
1240 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% antiquewhite;"></span><br>
1241 </td>
1242 <td>antiquewhite = #faebd7</td>
1243 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aqua;"></span><br>
1244 </td>
1245 <td>aqua = #00ffff</td>
1246 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aquamarine;"></span><br>
1247 </td>
1248 <td>aquamarine = #7fffd4</td>
1249 </tr>
1250 <tr>
1251 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% azure;"></span><br>
1252 </td>
1253 <td>azure = #f0ffff</td>
1254 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% beige;"></span><br>
1255 </td>
1256 <td>beige = #f5f5dc</td>
1257 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% bisque;"></span><br>
1258 </td>
1259 <td>bisque = #ffe4c4</td>
1260 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% black;"></span><br>
1261 </td>
1262 <td>black = #000000</td>
1263 </tr>
1264 <tr>
1265 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blanchedalmond;"></span><br>
1266 </td>
1267 <td>blanchedalmond = #ffebcd</td>
1268 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blue;"></span><br>
1269 </td>
1270 <td>blue = #0000ff</td>
1271 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blueviolet;"></span><br>
1272 </td>
1273 <td>blueviolet = #8a2be2</td>
1274 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% brown;"></span><br>
1275 </td>
1276 <td>brown = #a52a2a</td>
1277 </tr>
1278 <tr>
1279 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% burlywood;"></span><br>
1280 </td>
1281 <td>burlywood = #deb887</td>
1282 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cadetblue;"></span><br>
1283 </td>
1284 <td>cadetblue = #5f9ea0</td>
1285 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% chartreuse;"></span><br>
1286 </td>
1287 <td>chartreuse = #7fff00</td>
1288 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% chocolate;"></span><br>
1289 </td>
1290 <td>chocolate = #d2691e</td>
1291 </tr>
1292 <tr>
1293 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% coral;"></span><br>
1294 </td>
1295 <td>coral = #ff7f50</td>
1296 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cornflowerblue;"></span><br>
1297 </td>
1298 <td>cornflowerblue = #6495ed</td>
1299 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cornsilk;"></span><br>
1300 </td>
1301 <td>cornsilk = #fff8dc</td>
1302 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% crimson;"></span><br>
1303 </td>
1304 <td>crimson = #dc143c</td>
1305 </tr>
1306 <tr>
1307 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cyan;"></span><br>
1308 </td>
1309 <td>cyan = #00ffff</td>
1310 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkblue;"></span><br>
1311 </td>
1312 <td>darkblue = #00008b</td>
1313 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkcyan;"></span><br>
1314 </td>
1315 <td>darkcyan = #008b8b</td>
1316 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgoldenrod;"></span><br>
1317 </td>
1318 <td>darkgoldenrod = #b8860b</td>
1319 </tr>
1320 <tr>
1321 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgray;"></span><br>
1322 </td>
1323 <td>darkgray = #a9a9a9</td>
1324 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgreen;"></span><br>
1325 </td>
1326 <td>darkgreen = #006400</td>
1327 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgrey;"></span><br>
1328 </td>
1329 <td>darkgrey = #a9a9a9</td>
1330 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkkhaki;"></span><br>
1331 </td>
1332 <td>darkkhaki = #bdb76b</td>
1333 </tr>
1334 <tr>
1335 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkmagenta;"></span><br>
1336 </td>
1337 <td>darkmagenta = #8b008b</td>
1338 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkolivegreen;"></span><br>
1339 </td>
1340 <td>darkolivegreen = #556b2f</td>
1341 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkorange;"></span><br>
1342 </td>
1343 <td>darkorange = #ff8c00</td>
1344 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkorchid;"></span><br>
1345 </td>
1346 <td>darkorchid = #9932cc</td>
1347 </tr>
1348 <tr>
1349 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkred;"></span><br>
1350 </td>
1351 <td>darkred = #8b0000</td>
1352 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darksalmon;"></span><br>
1353 </td>
1354 <td>darksalmon = #e9967a</td>
1355 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkseagreen;"></span><br>
1356 </td>
1357 <td>darkseagreen = #8fbc8f</td>
1358 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslateblue;"></span><br>
1359 </td>
1360 <td>darkslateblue = #483d8b</td>
1361 </tr>
1362 <tr>
1363 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslategray;"></span><br>
1364 </td>
1365 <td>darkslategray = #2f4f4f</td>
1366 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslategrey;"></span><br>
1367 </td>
1368 <td>darkslategrey = #2f4f4f</td>
1369 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkturquoise;"></span><br>
1370 </td>
1371 <td>darkturquoise = #00ced1</td>
1372 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkviolet;"></span><br>
1373 </td>
1374 <td>darkviolet = #9400d3</td>
1375 </tr>
1376 <tr>
1377 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% deeppink;"></span><br>
1378 </td>
1379 <td>deeppink = #ff1493</td>
1380 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% deepskyblue;"></span><br>
1381 </td>
1382 <td>deepskyblue = #00bfff</td>
1383 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dimgray;"></span><br>
1384 </td>
1385 <td>dimgray = #696969</td>
1386 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dimgrey;"></span><br>
1387 </td>
1388 <td>dimgrey = #696969</td>
1389 </tr>
1390 <tr>
1391 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dodgerblue;"></span><br>
1392 </td>
1393 <td>dodgerblue = #1e90ff</td>
1394 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% firebrick;"></span><br>
1395 </td>
1396 <td>firebrick = #b22222</td>
1397 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% floralwhite;"></span><br>
1398 </td>
1399 <td>floralwhite = #fffaf0</td>
1400 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% forestgreen;"></span><br>
1401 </td>
1402 <td>forestgreen = #228b22</td>
1403 </tr>
1404 <tr>
1405 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% fuchsia;"></span><br>
1406 </td>
1407 <td>fuchsia = #ff00ff</td>
1408 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gainsboro;"></span><br>
1409 </td>
1410 <td>gainsboro = #dcdcdc</td>
1411 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% ghostwhite;"></span><br>
1412 </td>
1413 <td>ghostwhite = #f8f8ff</td>
1414 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gold;"></span><br>
1415 </td>
1416 <td>gold = #ffd700</td>
1417 </tr>
1418 <tr>
1419 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% goldenrod;"></span><br>
1420 </td>
1421 <td>goldenrod = #daa520</td>
1422 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gray;"></span><br>
1423 </td>
1424 <td>gray = #808080</td>
1425 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% green;"></span><br>
1426 </td>
1427 <td>green = #008000</td>
1428 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% greenyellow;"></span><br>
1429 </td>
1430 <td>greenyellow = #adff2f</td>
1431 </tr>
1432 <tr>
1433 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% grey;"></span><br>
1434 </td>
1435 <td>grey = #808080</td>
1436 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% honeydew;"></span><br>
1437 </td>
1438 <td>honeydew = #f0fff0</td>
1439 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% hotpink;"></span><br>
1440 </td>
1441 <td>hotpink = #ff69b4</td>
1442 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% indianred;"></span><br>
1443 </td>
1444 <td>indianred = #cd5c5c</td>
1445 </tr>
1446 <tr>
1447 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% indigo;"></span><br>
1448 </td>
1449 <td>indigo = #4b0082</td>
1450 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% ivory;"></span><br>
1451 </td>
1452 <td>ivory = #fffff0</td>
1453 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% khaki;"></span><br>
1454 </td>
1455 <td>khaki = #f0e68c</td>
1456 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lavender;"></span><br>
1457 </td>
1458 <td>lavender = #e6e6fa</td>
1459 </tr>
1460 <tr>
1461 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lavenderblush;"></span><br>
1462 </td>
1463 <td>lavenderblush = #fff0f5</td>
1464 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lawngreen;"></span><br>
1465 </td>
1466 <td>lawngreen = #7cfc00</td>
1467 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lemonchiffon;"></span><br>
1468 </td>
1469 <td>lemonchiffon = #fffacd</td>
1470 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightblue;"></span><br>
1471 </td>
1472 <td>lightblue = #add8e6</td>
1473 </tr>
1474 <tr>
1475 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightcoral;"></span><br>
1476 </td>
1477 <td>lightcoral = #f08080</td>
1478 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightcyan;"></span><br>
1479 </td>
1480 <td>lightcyan = #e0ffff</td>
1481 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgoldenrodyellow;"></span><br>
1482 </td>
1483 <td>lightgoldenrodyellow = #fafad2</td>
1484 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgray;"></span><br>
1485 </td>
1486 <td>lightgray = #d3d3d3</td>
1487 </tr>
1488 <tr>
1489 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgreen;"></span><br>
1490 </td>
1491 <td>lightgreen = #90ee90</td>
1492 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgrey;"></span><br>
1493 </td>
1494 <td>lightgrey = #d3d3d3</td>
1495 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightpink;"></span><br>
1496 </td>
1497 <td>lightpink = #ffb6c1</td>
1498 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightsalmon;"></span><br>
1499 </td>
1500 <td>lightsalmon = #ffa07a</td>
1501 </tr>
1502 <tr>
1503 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightseagreen;"></span><br>
1504 </td>
1505 <td>lightseagreen = #20b2aa</td>
1506 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightskyblue;"></span><br>
1507 </td>
1508 <td>lightskyblue = #87cefa</td>
1509 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightslategray;"></span><br>
1510 </td>
1511 <td>lightslategray = #778899</td>
1512 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightslategrey;"></span><br>
1513 </td>
1514 <td>lightslategrey = #778899</td>
1515 </tr>
1516 <tr>
1517 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightsteelblue;"></span><br>
1518 </td>
1519 <td>lightsteelblue = #b0c4de</td>
1520 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightyellow;"></span><br>
1521 </td>
1522 <td>lightyellow = #ffffe0</td>
1523 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lime;"></span><br>
1524 </td>
1525 <td>lime = #00ff00</td>
1526 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% limegreen;"></span><br>
1527 </td>
1528 <td>limegreen = #32cd32</td>
1529 </tr>
1530 <tr>
1531 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% linen;"></span><br>
1532 </td>
1533 <td>linen = #faf0e6</td>
1534 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% magenta;"></span><br>
1535 </td>
1536 <td>magenta = #ff00ff</td>
1537 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% maroon;"></span><br>
1538 </td>
1539 <td>maroon = #800000</td>
1540 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumaquamarine;"></span><br>
1541 </td>
1542 <td>mediumaquamarine = #66cdaa</td>
1543 </tr>
1544 <tr>
1545 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumblue;"></span><br>
1546 </td>
1547 <td>mediumblue = #0000cd</td>
1548 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumorchid;"></span><br>
1549 </td>
1550 <td>mediumorchid = #ba55d3</td>
1551 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumpurple;"></span><br>
1552 </td>
1553 <td>mediumpurple = #9370db</td>
1554 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumseagreen;"></span><br>
1555 </td>
1556 <td>mediumseagreen = #3cb371</td>
1557 </tr>
1558 <tr>
1559 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumslateblue;"></span><br>
1560 </td>
1561 <td>mediumslateblue = #7b68ee</td>
1562 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumspringgreen;"></span><br>
1563 </td>
1564 <td>mediumspringgreen = #00fa9a</td>
1565 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumturquoise;"></span><br>
1566 </td>
1567 <td>mediumturquoise = #48d1cc</td>
1568 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumvioletred;"></span><br>
1569 </td>
1570 <td>mediumvioletred = #c71585</td>
1571 </tr>
1572 <tr>
1573 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% midnightblue;"></span><br>
1574 </td>
1575 <td>midnightblue = #191970</td>
1576 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mintcream;"></span><br>
1577 </td>
1578 <td>mintcream = #f5fffa</td>
1579 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mistyrose;"></span><br>
1580 </td>
1581 <td>mistyrose = #ffe4e1</td>
1582 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% moccasin;"></span><br>
1583 </td>
1584 <td>moccasin = #ffe4b5</td>
1585 </tr>
1586 <tr>
1587 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% navajowhite;"></span><br>
1588 </td>
1589 <td>navajowhite = #ffdead</td>
1590 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% navy;"></span><br>
1591 </td>
1592 <td>navy = #000080</td>
1593 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% oldlace;"></span><br>
1594 </td>
1595 <td>oldlace = #fdf5e6</td>
1596 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% olive;"></span><br>
1597 </td>
1598 <td>olive = #808000</td>
1599 </tr>
1600 <tr>
1601 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% olivedrab;"></span><br>
1602 </td>
1603 <td>olivedrab = #6b8e23</td>
1604 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orange;"></span><br>
1605 </td>
1606 <td>orange = #ffa500</td>
1607 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orangered;"></span><br>
1608 </td>
1609 <td>orangered = #ff4500</td>
1610 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orchid;"></span><br>
1611 </td>
1612 <td>orchid = #da70d6</td>
1613 </tr>
1614 <tr>
1615 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palegoldenrod;"></span><br>
1616 </td>
1617 <td>palegoldenrod = #eee8aa</td>
1618 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palegreen;"></span><br>
1619 </td>
1620 <td>palegreen = #98fb98</td>
1621 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% paleturquoise;"></span><br>
1622 </td>
1623 <td>paleturquoise = #afeeee</td>
1624 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palevioletred;"></span><br>
1625 </td>
1626 <td>palevioletred = #db7093</td>
1627 </tr>
1628 <tr>
1629 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% papayawhip;"></span><br>
1630 </td>
1631 <td>papayawhip = #ffefd5</td>
1632 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% peachpuff;"></span><br>
1633 </td>
1634 <td>peachpuff = #ffdab9</td>
1635 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% peru;"></span><br>
1636 </td>
1637 <td>peru = #cd853f</td>
1638 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% pink;"></span><br>
1639 </td>
1640 <td>pink = #ffc0cb</td>
1641 </tr>
1642 <tr>
1643 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% plum;"></span><br>
1644 </td>
1645 <td>plum = #dda0dd</td>
1646 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% powderblue;"></span><br>
1647 </td>
1648 <td>powderblue = #b0e0e6</td>
1649 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% purple;"></span><br>
1650 </td>
1651 <td>purple = #800080</td>
1652 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% red;"></span><br>
1653 </td>
1654 <td>red = #ff0000</td>
1655 </tr>
1656 <tr>
1657 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% rosybrown;"></span><br>
1658 </td>
1659 <td>rosybrown = #bc8f8f</td>
1660 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% royalblue;"></span><br>
1661 </td>
1662 <td>royalblue = #4169e1</td>
1663 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% saddlebrown;"></span><br>
1664 </td>
1665 <td>saddlebrown = #8b4513</td>
1666 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% salmon;"></span><br>
1667 </td>
1668 <td>salmon = #fa8072</td>
1669 </tr>
1670 <tr>
1671 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% sandybrown;"></span><br>
1672 </td>
1673 <td>sandybrown = #f4a460</td>
1674 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% seagreen;"></span><br>
1675 </td>
1676 <td>seagreen = #2e8b57</td>
1677 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% seashell;"></span><br>
1678 </td>
1679 <td>seashell = #fff5ee</td>
1680 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% sienna;"></span><br>
1681 </td>
1682 <td>sienna = #a0522d</td>
1683 </tr>
1684 <tr>
1685 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% silver;"></span><br>
1686 </td>
1687 <td>silver = #c0c0c0</td>
1688 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% skyblue;"></span><br>
1689 </td>
1690 <td>skyblue = #87ceeb</td>
1691 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slateblue;"></span><br>
1692 </td>
1693 <td>slateblue = #6a5acd</td>
1694 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slategray;"></span><br>
1695 </td>
1696 <td>slategray = #708090</td>
1697 </tr>
1698 <tr>
1699 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slategrey;"></span><br>
1700 </td>
1701 <td>slategrey = #708090</td>
1702 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% snow;"></span><br>
1703 </td>
1704 <td>snow = #fffafa</td>
1705 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% springgreen;"></span><br>
1706 </td>
1707 <td>springgreen = #00ff7f</td>
1708 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% steelblue;"></span><br>
1709 </td>
1710 <td>steelblue = #4682b4</td>
1711 </tr>
1712 <tr>
1713 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% tan;"></span><br>
1714 </td>
1715 <td>tan = #d2b48c</td>
1716 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% teal;"></span><br>
1717 </td>
1718 <td>teal = #008080</td>
1719 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% thistle;"></span><br>
1720 </td>
1721 <td>thistle = #d8bfd8</td>
1722 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% tomato;"></span><br>
1723 </td>
1724 <td>tomato = #ff6347</td>
1725 </tr>
1726 <tr>
1727 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% turquoise;"></span><br>
1728 </td>
1729 <td>turquoise = #40e0d0</td>
1730 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% violet;"></span><br>
1731 </td>
1732 <td>violet = #ee82ee</td>
1733 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% wheat;"></span><br>
1734 </td>
1735 <td>wheat = #f5deb3</td>
1736 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% white;"></span><br>
1737 </td>
1738 <td>white = #ffffff</td>
1739 </tr>
1740 <tr>
1741 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% whitesmoke;"></span><br>
1742 </td>
1743 <td>whitesmoke = #f5f5f5</td>
1744 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% yellow;"></span><br>
1745 </td>
1746 <td>yellow = #ffff00</td>
1747 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% yellowgreen;"></span><br>
1748 </td>
1749 <td>yellowgreen = #9acd32</td>
1750 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% transparent;"></span><br>
1751 </td>
1752 <td>transparent = rgba(0,0,0,0)</td>
1753 </tr>
1754 </tbody>
1755 </table>
1756 <h4>Looked-up Colors <span class="grammar" style="font-size: smaller;"><looked-up-color></span></h4>
1757 <p>With looked-up colors you can refer to any other color property that is
1758 set on the current node or any of its parents. This is a very powerful
1759 feature, as it allows a generic palette of colors to be specified on the
1760 scene then used thoughout the application. If you want to change one of
1761 those palette colors you can do so at any level in the scene tree and it
1762 will affect that node and all its decendents. Looked-up colors are not
1763 looked up until they are applied, so they are live and react to any style
1764 changes that might occur, such as replacing a palette color at runtime
1765 with the "style" property on a node.</p>
1766 <p>In the following example, all background color of all buttons uses the
1767 looked up color "abc".</p>
1768 <p class="example">.root { abc: #f00 }<br>
1769 .button { -fx-background-color: abc }</p>
1770 <h4>RGB Colors <span class="grammar" style="font-size: smaller;"><rgb-color></span></h4>
1771 <p>The RGB color model is used in numerical color specifications. It has a
1772 number of different supported forms.</p>
1773 <p class="grammar">#<digit><digit><digit><br>
1774 |
1775 #<digit><digit><digit><digit><digit><digit><br>
1776 | rgb( <a href="#typenumber" class="typelink"><integer></a> , <a href="#typenumber"
1777 class="typelink"><integer></a>
1778 , <a href="#typenumber" class="typelink"><integer></a> )<br>
1779 | rgb( <a href="#typenumber" class="typelink"><integer></a> %, <a
1780 href="#typenumber"
1781 class="typelink"><integer></a>%
1782 , <a href="#typenumber" class="typelink"><integer></a>% )<br>
1783 | rgba( <a href="#typenumber" class="typelink"><integer></a> , <a
1784 href="#typenumber"
1785 class="typelink"><integer></a>
1786 , <a href="#typenumber" class="typelink"><integer></a> , <a href="#typenumber"
1787 class="typelink"><number></a>
1788 ) <br>
1789 | rgba( <a href="#typenumber" class="typelink"><integer></a>% , <a
1790 href="#typenumber"
1818 space characters are allowed around the numerical values.</p>
1819 <p><strong>RGB + Alpha</strong>: This is an extension of the RGB color model
1820 to include an ‘alpha’ value that specifies the opacity of a
1821 color. This is accomplished via a functional syntax of the form rgba(...)
1822 form that takes a fourth parameter which is the alpha value. The alpha
1823 value must be a number in the range 0.0 (representing completely
1824 transparent) and 1.0 (completely opaque). As with the rgb() function, the
1825 red, green, and blue values may be decimal integers or percentages. The
1826 following examples all specify the same color:</p>
1827 <p class="example"></p>
1828 <ul style="list-style: none;">
1829 <li>.label { -fx-text-fill: rgb(255,0,0) } /* integer range 0 — 255*/</li>
1830 <li> .label { -fx-text-fill: rgba(255,0,0,1) /* the same, with explicit
1831 opacity of 1 */</li>
1832 <li> .label { -fx-text-fill: rgb(100%,0%,0%) } /* float range 0.0% —
1833 100.0% */</li>
1834 <li> .label { -fx-text-fill: rgba(100%,0%,0%,1) } /* the same, with
1835 explicit opacity of 1 */</li>
1836 </ul>
1837 <p></p>
1838 <h4>HSB Colors <span class="grammar" style="font-size: smaller;"><hsb-color></span></h4>
1839 <p>Colors can be specified using the HSB (sometimes called HSV) color model,
1840 as follows:</p>
1841 <p class="grammar">hsb( <a href="#typenumber" class="typelink"><number></a>
1842 , <a href="#typenumber" class="typelink"><number></a>% , <a href="#typenumber"
1843 class="typelink"><number></a>%
1844 ) | hsba( <a href="#typenumber" class="typelink"><number></a> , <a
1845 href="#typenumber"
1846 class="typelink"><number></a>%
1847 , <a href="#typenumber" class="typelink"><number></a>% , <a href="#typenumber"
1848 class="typelink"><number></a>
1849 )</p>
1850 <p>The first number is <span style="font-style:italic;">hue</span>, a number in the range 0 to 360
1851 degrees. The second number is <em>saturation,</em> a percentage in the
1852 range 0% to 100%. The third number is <span style="font-style:italic;">brightness</span>, also a
1853 percentage in the range 0% to 100%. The hsba(...) form takes a fourth
1854 parameter at the end which is a alpha value in the range 0.0 to 1.0,
1855 specifying completely transparent and completely opaque, respectively.</p>
1856 <h4>Color Functions <span class="grammar" style="font-size: smaller;"><color-function></span></h4>
1857 <p>JavaFX supports some color computation functions. These compute new
1858 colors from input colors at the time the color style is applied. This
1859 enables a color theme to be specified using a single base color and to
1860 have variant colors computed from that base color. There are two color
1861 functions: derive() and ladder().</p>
1862 <p class="grammar"><derive> | <ladder></p>
1863 <p><strong>Derive </strong><span class="grammar" style="font-size: smaller;"><derive></span></p>
1864 <p class="grammar">derive( <a href="#typecolor" class="typelink"><color></a>
1865 , <a href="#typenumber" class="typelink"><number></a>% )</p>
1866 <p>The derive function takes a color and computes a brighter or darker
1867 version of that color. The second parameter is the brightness offset,
1868 representing how much brighter or darker the derived color should be. Positive percentages indicate brighter colors
1869 and negative percentages indicate darker colors. A value of -100% means
1870 completely black, 0% means no change in brightness, and 100% means
1871 completely white.</p>
1872 <p><strong>Ladder</strong><span class="grammar" style="font-size: smaller;"><ladder></span></p>
1873 <p class="grammar">ladder(<a href="#typecolor" class="typelink"><color></a>
1874 , <a href="#typecolorstop" class="typelink"><color-stop></a> [, <a
1875 href="#typecolorstop"
1876 class="typelink"><color-stop></a>]+)</p>
1877 <p>The ladder function interpolates between colors. The effect is as if a
1878 gradient is created using the stops provided, and then the brightness of
1879 the provided <a href="#typecolor" class="typelink"><color></a> is
1880 used to index a color value within that gradient. At 0% brightness, the
1881 color at the 0.0 end of the gradient is used; at 100% brightness, the
1882 color at the 1.0 end of the gradient is used; and at 50% brightness, the
1883 color at 0.5, the midway point of the gradient, is used. Note that no
1884 gradient is actually rendered. This is merely an interpolation function
1885 that results in a single color.</p>
1886 <p>Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1887 class="typelink">W3C
1888 color-stop syntax</a> and are normalized accordingly.</p>
1889 <p>For example, you could use the following if you want the text color to be
1890 black or white depending upon the brightness of the background.</p>
1891 <p class="example">background: white;<br>
1892 -fx-text-fill: ladder(background, white 49%, black 50%);</p>
2426 <h4><a name="region" id="region">Region</a></h4>
2427 <p class="styleclass">Style class: empty by default</p>
2428 <p>A Region is a Node (extending from Parent) with backgrounds and borders
2429 that are styleable via CSS. A Region is typically a rounded rectangle,
2430 though this can be modified through CSS to be an arbitrary shape. Regions
2431 can contain other Region objects (sub-regions) or they can contain
2432 sub-controls. All Regions have the same set of CSS properties as described
2433 below. </p>
2434 <p>Each Region consists of several layers, painted from bottom to top, in
2435 this order:</p>
2436 <ol>
2437 <li>background fills</li>
2438 <li>background images</li>
2439 <li>border strokes</li>
2440 <li>border images</li>
2441 <li>contents</li>
2442 </ol>
2443 <p>The background and border mechanisms are patterned after the CSS 3 draft
2444 backgrounds and borders module. See <a href="#references">[4]</a> for a
2445 detailed description.</p>
2446 <p>Background fills are specified with the properties <span class="propertyname">-fx-background-color</span>,
2447 <span class="propertyname">-fx-background-radius</span> and <span class="propertyname">-fx-background-insets</span>.
2448 The -fx-background-color property is a series of one or more
2449 comma-separated <paint> values. The number of values in the series
2450 determines the number of background rectangles that are painted.
2451 Background rectangles are painted in the order specified using the given
2452 <paint> value. Each background rectangle can have different radii
2453 and insets. The -fx-background-radius and -fx-background-insets properties
2454 are series of comma-separated values (or sets of values). The radius and
2455 insets values used for a particular background are the found in the
2456 corresponding position in the -fx-background-radius and
2457 -fx-background-insets series. For example, suppose a series of three
2458 values is given for the -fx-background-color property. A series of three
2459 values should also be specified for the -fx-background-radius and
2460 -fx-background-insets properties. The first background will be painted
2461 using the first radius value and first insets value, the second background
2462 will be painted with the second radius value and second insets value, and
2463 so forth.</p>
2464 <p>Note also that properties such as -fx-background-radius and
2465 -fx-background-insets can contain a series of values or <span style="font-style:italic;">sets</span> of
2466 four values. A set of values is separated by whitespace, whereas the
2467 values or sets-of-values in a series are separated by commas. For
2468 -fx-background-radius, a single value indicates that the value should be
2469 used for the radius of all four corners of the background rectangle. A set
2470 of four values indicates that different radius values are to be used for
2471 the top-left, top-right, bottom-right, and bottom-left corners, in that
2472 order. Similarly, the -fx-background-insets property can also contain a
2473 series of values or sets of values. A set of four values for
2474 -fx-background-insets indicates that different insets are to be used for
2475 the top, right, bottom, and left edges of the rectangle, in that order.</p>
2476 <p>Background images are specified with the properties <span class="propertyname">-fx-background-image</span>,
2477 <span class="propertyname">-fx-background-repeat</span>, <span class="propertyname">-fx-background-position</span>
2478 and <span class="propertyname">-fx-background-size</span>. The number of
2479 images in the series of -fx-background-image values determines the number
2480 of background images that are painted. The -fx-background-repeat,
2481 -fx-background-position, and -fx-background-size properties each can
2482 contain a series of values. For each item in the -fx-background-image
2483 series, the corresponding items in the -fx-background-repeat,
2484 -fx-background-position, and -fx-background-size properties are applied to
2485 that background image.</p>
2486 <p>Stroked borders are specified with the properties <span class="propertyname">-fx-border-color</span>,
2487 <span class="propertyname">-fx-border-style</span>, <span class="propertyname">-fx-border-width</span>,
2488 <span class="propertyname">-fx-border-radius</span> and <span class="propertyname">-fx-border-insets</span>.
2489 Each property contains a series of items. The maximum number of items in the -fx-
2490 border-color or -fx-border-style property determines the number of border layers that are painted..
2491 Each border in the series is painted using information from the
2492 corresponding series item of the -fx-border-color, -fx-border-style, -fx-border-width,
2493 -fx-border-radius, and -fx-border-insets properties. If there is no -fx-border-color, the default color is black.
2494 if there is no -fx-border-style, the default style is solid. </p>
2495 <p>Image borders are specified with the properties <span class="propertyname">-fx-border-image-source</span>,
2496 <span class="propertyname">-fx-border-image-repeat</span>, <span class="propertyname">-fx-border-image-slice</span>,
2497 <span class="propertyname">-fx-border-image-width</span> and <span class="propertyname">-fx-border-image-insets</span>.
2498 Each property contains a series of items. The number of items in the
2499 -fx-border-image-source property determines the number of images that are
2500 painted. Each image in the series is painted using information from the
2501 corresponding series items of the -fx-border-image-repeat,
2502 -fx-border-image-slice, -fx-border-image-width, and
2503 -fx-border-image-insets properties.</p>
2504 <p>The region's contents are a sequence of nodes, like any other container.
2505 The contents are set programmatically and cannot be set via CSS.</p>
2506 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
2507 <thead>
2508 <tr>
2509 <th class="propertyname">CSS Property</th>
2510 <th class="value">Values</th>
2511 <th class="default">Default</th>
2512 <th>Comments</th>
2513 </tr>
2514 </thead>
2515 <tbody>
2516 <tr>
2517 <td colspan="4" class="propertyname"><em>BACKGROUND FILLS</em> (see <a
|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
3 <!--
4 /*
5 * Copyright (c) 2012, 2017, 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
710 <p class="example">.my-rect {<br>
711 -fx-fill: yellow;<br>
712 -fx-stroke: green;<br>
713 -fx-stroke-width: 5;<br>
714 -fx-stroke-dash-array: 12 2 4 2;<br>
715 -fx-stroke-dash-offset: 6;<br>
716 -fx-stroke-line-cap: butt;<br>
717 }<br>
718 </p>
719 <p>the result will be a yellow rectangle with a nicely dashed green border:
720 </p>
721 <p><img src="cssexample2.png" alt="A rectangle with yellow fill and a green, dashed border"></p>
722 <h3><a name="introparserwarnings" id="introparserwarnings">Understanding
723 Parser Warnings</a></h3>
724 <p>When the JavaFX CSS parser encounters a syntax error, a warning message
725 is emitted which conveys as much information as is available to help
726 resolve the error. For example </p>
727 <p class="example"> WARNING: javafx.css.CssParser declaration
728 Expected '<percent>' while parsing '-fx-background-color' at ?[1,49]
729 </p>
730 <p>The cryptic '<span class="p example">?[1,49]</span>' pertains to the
731 location of the error. The format of the location string is </p>
732 <p class="grammar"><url>[line, position]</p>
733 <p>If the error is found while parsing a file, the file URL will be given.
734 If the error is from an inline style (as in the example above), the URL is
735 given as a question mark. The line and position give an offset into the
736 file or string where the token begins. <em>Please note that the line and
737 position may not be accurate in releases prior to JavaFX 2.2.</em><br>
738 </p>
739 <p>Applications needing to detect errors from the parser can add a listener
740 to the errors property of javafx.css.CssParser. <br>
741 </p>
742 <h3><a name="introlimitations" id="introlimitations">Limitations</a></h3>
743 <ol>
744 <li> While the JavaFX CSS parser will parse valid CSS syntax, it is not a
745 fully compliant CSS parser. One should not expect the parser to handle
746 syntax not specified in this document.</li>
747 <li>With the exception of @font‑face and @import, @-keyword statements are ignored.</li>
748 <li>The <media-query-list> of the @import statement is not parsed.</li>
749 <li>The structural pseudo‑classes are not supported. </li>
750 <li>The ":active" and ":focus" dynamic pseudo‑classes are not supported.
832 </ul>
833 <h4><a name="typepercentage" id="typepercentage"><percentage></a></h4>
834 <p>These are a percentage of some length, typically to the width or height
835 of a node.</p>
836 <p class="grammar"><a href="#typenumber"><number></a>[ % ]</p>
837 <h3><a name="typeangle" id="typeangle"><angle></a></h3>
838 <p>An angle is a <a href="#typenumber" class="typeref"><number></a>
839 with one of the following units.</p>
840 <p> </p>
841 <p class="grammar"><a href="#typenumber"><number></a>[ deg | rad |
842 grad | turn ]</p>
843 <ul>
844 <li><strong>deg</strong>: angle in degrees — all other angle units are
845 converted to degrees.</li>
846 <li><strong>rad</strong>: angle in radians</li>
847 <li><strong>grad</strong>: angle in gradians</li>
848 <li><strong>turn</strong>: angle in turns</li>
849 </ul>
850 <h3><a name="typeduration" id="typeduration"><duration></a></h3>
851 <p>A duration is a <a href="#typenumber" class="typeref"><number></a>
852 with second or millisecond units, or the value <span class="grammar">indefinite</span>.</p>
853 <p> </p>
854 <p class="grammar">[<a href="#typenumber"><number></a>[ s | ms ]] | indefinite</p>
855 <ul>
856 <li><strong>s</strong>: duration in seconds</li>
857 <li><strong>ms</strong>: duration in milliseconds. One second is 1000 milliseconds.</li>
858 <li><strong>indefinite</strong>: See <a href="../../util/Duration.html#INDEFINITE" class="typelink">Duration.INDEFINITE</a></li>
859 </ul>
860 <p>See also <a href="http://www.w3.org/TR/css3-values/#time" class="typelink">W3C time units</a>.</p>
861 <h3><a name="typepoint" id="typepoint"><point></a></h3>
862 <p>A point is an {x,y} coordinate.</p>
863 <p class="grammar">[ [ <length> <length> ] | [
864 <percentage> | <percentage> ] ]</p>
865 <h3><a name="typecolorstop" id="typecolorstop"><color-stop></a></h3>
866 <p>Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
867 class="typelink">W3C
868 color-stop syntax</a>.</p>
869 <p class="grammar">[ <a href="#typecolor" class="typeref"><color></a>
870 [ <a href="#typepercentage" class="typeref"><percentage></a> | <a
871 href="#typelength"
872 class="typeref"><length></a>]?
873 ]</p>
874 <p>In a series of <color-stop>, stop distance values must all be
875 <percentage> or <length>. Furthermore, if <length>
876 values are used, then the distance value for first and last stop in the
877 series must be specified. This restriction may be removed in a future
878 release.</p>
879 <p>"<span style="color: #009900; ">red, white 70%, blue</span>" is valid since the
880 distance for red and blue is assumed to be 0% and 100%, respectively.</p>
881 <p>"<span style="color: #009900; ">red 10, white, blue 90</span>" is valid. Because
882 distance for red and blue is 10 and 90, respectively, the distance for
883 white can be calculated.</p>
884 <p>"<span style="color: #009900; ">red, white 70, blue</span>" is <span style="font-style:italic;">not</span> valid
885 since distance units do not agree.</p>
886 <p>"<span style="color: #009900; ">red, white, blue</span>" is valid. The stops are
887 distributed evenly between 0% and 100%.</p>
888 <h3><a name="typeurl" id="typeurl"><uri></a></h3>
889 <p class="grammar">url ( [\"\']? <address> [\"\']? )</p>
890 <p><span class="grammar"><address></span> is a hierarchical URI of the form [scheme:][//authority][path] <a href="#references">(see [2])</a>.
891 For example:</p>
892 <p class="example">
893 url(http://example.com/images/Duke.png)<br>
894 url(/com/example/javafx/app/images/Duke.png)<br>
895 </p>
896 <p>If the <span class="grammar"><address></span> does not have a [scheme:] component, the <span class="grammar"><address></span>
897 is considered to be the [path] component only.
898 A leading '/' character indicates that the [path] is relative to the
899 root of the classpath. If the the style appears in a stylesheet and
900 has no leading '/' character, the path is relative to the base URI of
901 the stylesheet. If the style appears in an inline style, the path is
902 relative to the root of the classpath (regardless of whether or not
903 there is a leading '/').
904 </p>
905 <table class="csspropertytable" cellspacing="3" cellpadding="4">
906 <caption>Examples of Resolving URLs in Stylesheets</caption>
907 <tr>
908 <th>Stylesheet URL</th><th>URL in Style</th><th>Resolves to</th>
909 </tr>
910 <tr>
911 <td>file:///some/path/build/classes/com/mycompany/myapp/mystyles.css</td>
912 <td>url(images/Duke.png)</td>
913 <td>file:///some/path/build/classes/com/mycompany/myapp/images/Duke.png</td>
914 </tr>
915 <tr>
916 <td>file:///some/path/build/classes/com/mycompany/myapp/mystyles.css</td>
945 <p>As an example, the code snippet below creates a scene filled with a fictional 'Duke.png' image, located in an
946 'image' directory:</p>
947 <textarea rows="9" cols="132">
948
949 @Override public void start(Stage stage) {
950 StackPane root = new StackPane();
951 root.setStyle("-fx-background-image: url(images/Duke.png);");
952 Scene scene = new Scene(root, 300, 250);
953 stage.setScene(scene);
954 stage.show();
955 }
956 </textarea>
957 <p>The same style would work equally as well from a stylesheet.</p>
958 <h3><a name="typeeffect" id="typeeffect"><effect></a></h3>
959 <p>JavaFX CSS currently supports the DropShadow and InnerShadow effects from
960 the JavaFX platform. See the class documentation in javafx.scene.effect
961 for further details about the semantics of the various effect parameters.</p>
962 <h4>Drop Shadow</h4>
963 <p>A high-level effect that renders a shadow of the given content behind the
964 content.</p>
965 <p><span class="grammar">dropshadow( <blur-type> , <a href="#typecolor"
966 class="typelink"><color></a>
967 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
968 class="typelink"><number></a>
969 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
970 class="typelink"><number></a>
971 )</span></p>
972 <p style="margin-left: 40px;"><span class="grammar"><blur-type> = [
973 gaussian | one-pass-box | three-pass-box | two-pass-box ]<br>
974 <a href="#typecolor" class="typelink"><color></a></span> The
975 shadow Color.<br>
976 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
977 The radius of the shadow blur kernel. In the range [0.0 ... 127.0],
978 typical value 10.<br>
979 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
980 The spread of the shadow. The spread is the portion of the radius where
981 the contribution of the source material will be 100%. The remaining
982 portion of the radius will have a contribution controlled by the blur
983 kernel. A spread of 0.0 will result in a distribution of the shadow
984 determined entirely by the blur algorithm. A spread of 1.0 will result in
985 a solid growth outward of the source material opacity to the limit of the
986 radius with a very sharp cutoff to transparency at the radius. Values
987 should be in the range [0.0 ... 1.0].<br>
988 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
989 The shadow offset in the x direction, in pixels. <br>
990 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
991 The shadow offset in the y direction, in pixels. </p>
992 <h4>Inner Shadow</h4>
993 <p>A high-level effect that renders a shadow inside the edges of the given
994 content.</p>
995 <p><span class="grammar">innershadow( <blur-type> , <a href="#typecolor"
996 class="typelink"><color></a>
997 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
998 class="typelink"><number></a>
999 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
1000 class="typelink"><number></a>
1001 )</span></p>
1002 <p style="margin-left: 40px;"><span class="grammar"><blur-type> = [
1003 gaussian | one-pass-box | three-pass-box | two-pass-box ]<br>
1004 </span><span class="grammar"><a href="#typecolor" class="typelink"><color></a></span>
1005 The shadow Color.<br>
1006 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1007 The radius of the shadow blur kernel. In the range [0.0 ... 127.0],
1008 typical value 10.<br>
1009 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1010 The choke of the shadow. The choke is the portion of the radius where the
1011 contribution of the source material will be 100%. The remaining portion of
1012 the radius will have a contribution controlled by the blur kernel. A choke
1013 of 0.0 will result in a distribution of the shadow determined entirely by
1014 the blur algorithm. A choke of 1.0 will result in a solid growth inward of
1015 the shadow from the edges to the limit of the radius with a very sharp
1016 cutoff to transparency inside the radius. Values should be in the range
1017 [0.0 ... 1.0].<br>
1018 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1019 The shadow offset in the x direction, in pixels. <br>
1020 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1021 The shadow offset in the y direction, in pixels. </p>
1022 <h3><a name="typefont" id="typefont"><font></a></h3>
1023 <p>JavaFX CSS supports the ability to specify fonts using separate family,
1024 size, style, and weight properties, as well as the ability to specify a
1025 font using a single shorthand property. There are four value types related
1026 to fonts plus a shorthand property that encompasses all four properties.
1027 The font-related types are as follows. </p>
1028 <p><span class="grammar"><font-family></span>The string name of the
1029 font family. An actual font family name available on the system can be
1030 used, or one of the following generic family names can be used:</p>
1031 <ul>
1032 <li>'serif' (e.g., Times)</li>
1033 <li>'sans-serif' (e.g., Helvetica)</li>
1034 <li>'cursive' (e.g., Zapf-Chancery)</li>
1035 <li>'fantasy' (e.g., Western)</li>
1036 <li>'monospace' (e.g., Courier)</li>
1037 </ul>
1038 <p><span class="grammar"><font-size></span> The size of the font,
1039 using the <span class="grammar"><size></span> syntax.</p>
1040 <p><span class="grammar"><font-style></span> The font's style, using
1041 the following syntax:<br>
1042 <span class="grammar">[ normal | italic | oblique ]</span></p>
1043 <p><span class="grammar"><font-weight></span> The font's weight, using
1044 the following syntax:<br>
1045 <span class="grammar">[ normal | bold | bolder | lighter | 100 | 200 | 300
1046 | 400 | 500 | 600 | 700 | 800 | 900 ]</span></p>
1047 <p><span class="grammar"><font></span> This font shorthand property
1048 can be used in place of the above properties. It uses the following
1049 syntax:<br>
1050 <span class="grammar">[[ <font-style> || <font-weight> ]?
1051 <font-size> <font-family> ]</span></p>
1052 <h4><a name="fontprops" id="fontprops">Font Properties</a></h4>
1053 <p>Most classes that use text will support the following font properties. In
1054 some cases a similar set of properties will be supported but with a
1055 different prefix instead of "-fx-font".</p>
1056 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
1057 <thead>
1058 <tr>
1059 <th class="propertyname">CSS Property</th>
1060 <th class="value">Values</th>
1061 <th>Default</th>
1062 <th>Comments</th>
1063 </tr>
1064 </thead>
1065 <tbody>
1066 <tr>
1067 <td class="propertyname">-fx-font</td>
1068 <td class="value"><a href="#typefont" class="typelink"><font></a></td>
1069 <td>inherit</td>
1070 <td>shorthand property for font-size, font-family, font-weight and
1087 <td class="value"><a href="#typefont" class="typelink"><font-style></a></td>
1088 <td>inherit</td>
1089 <td> </td>
1090 </tr>
1091 <tr>
1092 <td class="propertyname">-fx-font-weight</td>
1093 <td class="value"><a href="#typefont" class="typelink"><font-weight></a></td>
1094 <td>inherit</td>
1095 <td> </td>
1096 </tr>
1097 </tbody>
1098 </table>
1099 <h3><a name="typepaint" id="typepaint"><paint></a></h3>
1100 <p>Paint values can either be a solid color specified in one of the color
1101 syntaxes, they can be a linear or radial gradient, or an image-pattern.</p>
1102 <p class="grammar"><a href="#typecolor" class="typelink"><color></a> |
1103 <a href="#typelinear-gradient" class="typelink"><linear-gradient></a> |
1104 <a href="#typeradial-gradient" class="typelink"><radial-gradient></a> |
1105 <a href="#typeimage-pattern" class="typelink"><image-pattern></a>
1106 <a href="#typeimage-pattern" class="typelink"><repeating-image-pattern></a></p>
1107 <h4>Linear Gradients<span class="grammar" style="font-size: smaller;">
1108 <a name="typelinear-gradient" id="typelinear-gradient"><linear-gradient></a>
1109 </span></h4>
1110 <p class="grammar">linear-gradient( [ [from <a href="#typepoint" class="typelink"><point></a>
1111 to <a href="#typepoint" class="typelink"><point></a>] | [ to
1112 <side-or-corner>], ]? [ [ repeat | reflect ], ]? <a href="#typecolorstop"
1113 class="typelink"><color-stop></a>[,
1114 <a href="#typecolorstop" class="typelink"><color-stop></a>]+) <br>
1115 <br>
1116 where <side-or-corner> = [left | right] || [top | bottom] </p>
1117 <p> </p>
1118 <p>Linear gradient creates a gradient going though all the stop colors along
1119 the line between the "from" <a href="#typepoint" class="typelink"><point></a>
1120 and the "to" <a href="#typepoint" class="typelink"><point></a>. If
1121 the points are percentages, then they are relative to the size of the area
1122 being filled. Percentage and length sizes can not be mixed in a single
1123 gradient function.</p>
1124 <p> If neither repeat nor reflect are given, then the CycleMethod defaults
1125 "NO_CYCLE".<br>
1126 If neither [from <point> to <point>] nor [ to
1127 <side-or-corner> ] are given, then the gradient direction defaults
1129 Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1130 class="typelink">W3C
1131 color-stop syntax</a> and are normalized accordingly. </p>
1132 <p>This example will create a gradient from top left to bottom right of the
1133 filled area with red at the top left corner and black at the bottom right.</p>
1134 <p class="example">linear-gradient(to bottom right, red, black)</p>
1135 <p>This is equivalent to: </p>
1136 <p class="example">linear-gradient(from 0% 0% to 100% 100%, red 0%, black
1137 100%)</p>
1138 <p>This more complex example will create a 50px high bar at the top with a 3
1139 color gradient with white underneath for the rest of the filled area.</p>
1140 <p class="example">linear-gradient(from 0px 0px to 0px 50px, gray, darkgray
1141 50%, dimgray 99%, white)</p>
1142 <p><span style="color: #af0000; ">The following syntax for linear gradient does not
1143 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX
1144 2.0 CSS parser supports the syntax but this support may be removed in
1145 later releases.</span></p>
1146 <p class="grammar"><span style="color: #af0000; ">linear (<size>, <size>)
1147 to (<size>, <size>) stops [ (<number>,<color>)
1148 ]+ [ repeat | reflect ]?</span></p>
1149 <h4>Radial Gradients <span class="grammar" style="font-size: smaller;">
1150 <a name="typeradial-gradient" id="typeradial-gradient"><radial-gradient></a>
1151 </span></h4>
1152 <p class="grammar">radial-gradient([ focus-angle <a href="#typeangle" class="typelink"><angle></a>,
1153 ]? [ focus-distance <a href="#typepercentage" class="typelink"><percentage></a>,
1154 ]? [ center <a href="#typepoint" class="typelink"><point></a>, ]?
1155 radius [ <a href="#typelength" class="typelink"><length></a> | <a
1156 href="#typepercentage"
1157 class="typelink"><percentage></a>
1158 ] [ [ repeat | reflect ], ]? <a href="#typecolorstop" class="typelink"><color-stop></a>[,
1159 <a href="#typecolorstop" class="typelink"><color-stop></a>]+) </p>
1160 <p>Radial gradient creates a gradient going though all the stop colors radiating outward from
1161 the <a href="#typepoint" class="typelink">center point</a>
1162 to the <a href="#typelength" class="typelink">radius</a>. If the center point is not given,
1163 the center defaults to (0,0). Percentage values are relative to the size of the area
1164 being filled. Percentage and length sizes can not be mixed in a single gradient function.</p>
1165 <p> If neither repeat nor reflect are given, then the CycleMethod defaults
1166 "NO_CYCLE".<br>
1167 Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1168 class="typelink">W3C
1169 color-stop syntax</a> and are normalized accordingly. </p>
1170 <p>Following are examples of the use of radial-gradient:</p>
1171 <p class="example">radial-gradient(radius 100%, red, darkgray, black)</p>
1172 <p class="example">radial-gradient(focus-angle 45deg, focus-distance 20%,
1173 center 25% 25%, radius 50%, reflect, gray, darkgray 75%, dimgray)</p>
1174 <p><span style="color: #af0000; ">The following syntax for radial gradient does not
1175 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX
1176 2.0 CSS parser supports the syntax but this support may be removed in
1177 later releases.</span></p>
1178 <p class="grammar"><span style="color: #af0000; ">radial [focus-angle <number>
1179 | <number> ] ]? [ focus-distance <size> ]? [ center
1180 <size,size> ]? <size> stops [ ( <number>,
1181 <color> ) ]+ [ repeat | reflect ]?</span></p>
1182 <h4>Image Paint <span class="grammar" style="font-size: smaller;">
1183 <a name="typeimage-pattern" id="typeimage-pattern"><image-pattern></a>
1184 </span></h4>
1185 <p class="grammar">image-pattern(<a href="#typestring" class="typelink"><string></a>,
1186 [<a href="#typesize" class="typelink"><size></a>,
1187 <a href="#typesize" class="typelink"><size></a>,
1188 <a href="#typesize" class="typelink"><size></a>,
1189 <a href="#typesize" class="typelink"><size></a>[,
1190 <a href="#typeboolean" class="typelink"><boolean></a>]?]?)</p>
1191 <p>The parameters, in order, are:<br>
1192 <p style="margin-left: 40px;">
1193 <span class="grammar"><a href="#typestring" class="typelink"><string></a></span>
1194 The URL of the image.<br>
1195 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1196 The <span style="font-style:italic;">x</span> origin of the anchor rectangle.<br>
1197 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1198 The <span style="font-style: italic;">y</span> origin of the anchor rectangle.<br>
1199 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1200 The width of the anchor rectangle.<br>
1201 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1202 The height of the anchor rectangle.<br>
1203 <span class="grammar"><a href="#typeboolean" class="typelink"><boolean></a></span>
1204 The proportional flag which indicates whether start and end locations are proportional or absolute<br>
1205 </p>
1206 <p>For a full explanation of the parameters, refer to the
1207 <a href="../paint/ImagePattern.html" class="typelink">ImagePattern</a> javadoc.</p>
1208 <p>Following are examples of the use of image-pattern:</p>
1209 <p class="example">image-pattern("images/Duke.png")</p>
1210 <p class="example">image-pattern("images/Duke.png", 20%, 20%, 80%, 80%)</p>
1211 <p class="example">image-pattern("images/Duke.png", 20%, 20%, 80%, 80%, true)</p>
1212 <p class="example">image-pattern("images/Duke.png", 20, 20, 80, 80, false)</p>
1213
1214 <p>Related, there is the <code>repeating-image-pattern</code> function which is a shorthand
1215 for producing tiled image based fills. It is equivalent to
1216 <p class="example">image-pattern("images/Duke.png", 0, 0, imageWidth, imageHeight, false)</p>
1217
1218 <p class="grammar">repeating-image-pattern(<a href="#typestring" class="typelink"><string></a>)</p>
1219 <p>The only parameter is the uri of the image. Following is an example of the use of image-pattern:</p>
1220 <p class="example">repeating-image-pattern("com/mycompany/myapp/images/Duke.png")</p>
1221
1222
1223
1224 <h3><a name="typecolor" id="typecolor"><color></a></h3>
1225 <p class="grammar"><named-color> | <looked-up-color> |
1226 <rgb-color> | <hsb-color> | <color-function></p>
1227 <h4>Named Colors <span class="grammar" style="font-size: smaller;"><named-color></span></h4>
1228 <p>CSS supports a bunch of named constant colors. Named colors can be
1229 specified with just their unquoted name for example: </p>
1230 <p class="example">.button {<br>
1231 -fx-background-color: red;<br>
1232 }</p>
1233 <p>The named colors that are available in CSS are:</p>
1234 <table summary="property table" class="html4colortable">
1235 <tbody>
1236 <tr>
1237 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aliceblue;"></span><br>
1238 </td>
1239 <td>aliceblue = #f0f8ff</td>
1240 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% antiquewhite;"></span><br>
1241 </td>
1242 <td>antiquewhite = #faebd7</td>
1243 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aqua;"></span><br>
1244 </td>
1245 <td>aqua = #00ffff</td>
1246 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aquamarine;"></span><br>
1247 </td>
1248 <td>aquamarine = #7fffd4</td>
1249 </tr>
1250 <tr>
1251 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% azure;"></span><br>
1252 </td>
1253 <td>azure = #f0ffff</td>
1254 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% beige;"></span><br>
1255 </td>
1256 <td>beige = #f5f5dc</td>
1257 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% bisque;"></span><br>
1258 </td>
1259 <td>bisque = #ffe4c4</td>
1260 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% black;"></span><br>
1261 </td>
1262 <td>black = #000000</td>
1263 </tr>
1264 <tr>
1265 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blanchedalmond;"></span><br>
1266 </td>
1267 <td>blanchedalmond = #ffebcd</td>
1268 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blue;"></span><br>
1269 </td>
1270 <td>blue = #0000ff</td>
1271 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blueviolet;"></span><br>
1272 </td>
1273 <td>blueviolet = #8a2be2</td>
1274 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% brown;"></span><br>
1275 </td>
1276 <td>brown = #a52a2a</td>
1277 </tr>
1278 <tr>
1279 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% burlywood;"></span><br>
1280 </td>
1281 <td>burlywood = #deb887</td>
1282 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cadetblue;"></span><br>
1283 </td>
1284 <td>cadetblue = #5f9ea0</td>
1285 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% chartreuse;"></span><br>
1286 </td>
1287 <td>chartreuse = #7fff00</td>
1288 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% chocolate;"></span><br>
1289 </td>
1290 <td>chocolate = #d2691e</td>
1291 </tr>
1292 <tr>
1293 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% coral;"></span><br>
1294 </td>
1295 <td>coral = #ff7f50</td>
1296 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cornflowerblue;"></span><br>
1297 </td>
1298 <td>cornflowerblue = #6495ed</td>
1299 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cornsilk;"></span><br>
1300 </td>
1301 <td>cornsilk = #fff8dc</td>
1302 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% crimson;"></span><br>
1303 </td>
1304 <td>crimson = #dc143c</td>
1305 </tr>
1306 <tr>
1307 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cyan;"></span><br>
1308 </td>
1309 <td>cyan = #00ffff</td>
1310 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkblue;"></span><br>
1311 </td>
1312 <td>darkblue = #00008b</td>
1313 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkcyan;"></span><br>
1314 </td>
1315 <td>darkcyan = #008b8b</td>
1316 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgoldenrod;"></span><br>
1317 </td>
1318 <td>darkgoldenrod = #b8860b</td>
1319 </tr>
1320 <tr>
1321 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgray;"></span><br>
1322 </td>
1323 <td>darkgray = #a9a9a9</td>
1324 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgreen;"></span><br>
1325 </td>
1326 <td>darkgreen = #006400</td>
1327 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgrey;"></span><br>
1328 </td>
1329 <td>darkgrey = #a9a9a9</td>
1330 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkkhaki;"></span><br>
1331 </td>
1332 <td>darkkhaki = #bdb76b</td>
1333 </tr>
1334 <tr>
1335 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkmagenta;"></span><br>
1336 </td>
1337 <td>darkmagenta = #8b008b</td>
1338 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkolivegreen;"></span><br>
1339 </td>
1340 <td>darkolivegreen = #556b2f</td>
1341 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkorange;"></span><br>
1342 </td>
1343 <td>darkorange = #ff8c00</td>
1344 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkorchid;"></span><br>
1345 </td>
1346 <td>darkorchid = #9932cc</td>
1347 </tr>
1348 <tr>
1349 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkred;"></span><br>
1350 </td>
1351 <td>darkred = #8b0000</td>
1352 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darksalmon;"></span><br>
1353 </td>
1354 <td>darksalmon = #e9967a</td>
1355 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkseagreen;"></span><br>
1356 </td>
1357 <td>darkseagreen = #8fbc8f</td>
1358 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslateblue;"></span><br>
1359 </td>
1360 <td>darkslateblue = #483d8b</td>
1361 </tr>
1362 <tr>
1363 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslategray;"></span><br>
1364 </td>
1365 <td>darkslategray = #2f4f4f</td>
1366 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslategrey;"></span><br>
1367 </td>
1368 <td>darkslategrey = #2f4f4f</td>
1369 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkturquoise;"></span><br>
1370 </td>
1371 <td>darkturquoise = #00ced1</td>
1372 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkviolet;"></span><br>
1373 </td>
1374 <td>darkviolet = #9400d3</td>
1375 </tr>
1376 <tr>
1377 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% deeppink;"></span><br>
1378 </td>
1379 <td>deeppink = #ff1493</td>
1380 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% deepskyblue;"></span><br>
1381 </td>
1382 <td>deepskyblue = #00bfff</td>
1383 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dimgray;"></span><br>
1384 </td>
1385 <td>dimgray = #696969</td>
1386 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dimgrey;"></span><br>
1387 </td>
1388 <td>dimgrey = #696969</td>
1389 </tr>
1390 <tr>
1391 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dodgerblue;"></span><br>
1392 </td>
1393 <td>dodgerblue = #1e90ff</td>
1394 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% firebrick;"></span><br>
1395 </td>
1396 <td>firebrick = #b22222</td>
1397 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% floralwhite;"></span><br>
1398 </td>
1399 <td>floralwhite = #fffaf0</td>
1400 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% forestgreen;"></span><br>
1401 </td>
1402 <td>forestgreen = #228b22</td>
1403 </tr>
1404 <tr>
1405 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% fuchsia;"></span><br>
1406 </td>
1407 <td>fuchsia = #ff00ff</td>
1408 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gainsboro;"></span><br>
1409 </td>
1410 <td>gainsboro = #dcdcdc</td>
1411 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% ghostwhite;"></span><br>
1412 </td>
1413 <td>ghostwhite = #f8f8ff</td>
1414 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gold;"></span><br>
1415 </td>
1416 <td>gold = #ffd700</td>
1417 </tr>
1418 <tr>
1419 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% goldenrod;"></span><br>
1420 </td>
1421 <td>goldenrod = #daa520</td>
1422 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gray;"></span><br>
1423 </td>
1424 <td>gray = #808080</td>
1425 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% green;"></span><br>
1426 </td>
1427 <td>green = #008000</td>
1428 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% greenyellow;"></span><br>
1429 </td>
1430 <td>greenyellow = #adff2f</td>
1431 </tr>
1432 <tr>
1433 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% grey;"></span><br>
1434 </td>
1435 <td>grey = #808080</td>
1436 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% honeydew;"></span><br>
1437 </td>
1438 <td>honeydew = #f0fff0</td>
1439 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% hotpink;"></span><br>
1440 </td>
1441 <td>hotpink = #ff69b4</td>
1442 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% indianred;"></span><br>
1443 </td>
1444 <td>indianred = #cd5c5c</td>
1445 </tr>
1446 <tr>
1447 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% indigo;"></span><br>
1448 </td>
1449 <td>indigo = #4b0082</td>
1450 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% ivory;"></span><br>
1451 </td>
1452 <td>ivory = #fffff0</td>
1453 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% khaki;"></span><br>
1454 </td>
1455 <td>khaki = #f0e68c</td>
1456 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lavender;"></span><br>
1457 </td>
1458 <td>lavender = #e6e6fa</td>
1459 </tr>
1460 <tr>
1461 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lavenderblush;"></span><br>
1462 </td>
1463 <td>lavenderblush = #fff0f5</td>
1464 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lawngreen;"></span><br>
1465 </td>
1466 <td>lawngreen = #7cfc00</td>
1467 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lemonchiffon;"></span><br>
1468 </td>
1469 <td>lemonchiffon = #fffacd</td>
1470 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightblue;"></span><br>
1471 </td>
1472 <td>lightblue = #add8e6</td>
1473 </tr>
1474 <tr>
1475 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightcoral;"></span><br>
1476 </td>
1477 <td>lightcoral = #f08080</td>
1478 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightcyan;"></span><br>
1479 </td>
1480 <td>lightcyan = #e0ffff</td>
1481 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgoldenrodyellow;"></span><br>
1482 </td>
1483 <td>lightgoldenrodyellow = #fafad2</td>
1484 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgray;"></span><br>
1485 </td>
1486 <td>lightgray = #d3d3d3</td>
1487 </tr>
1488 <tr>
1489 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgreen;"></span><br>
1490 </td>
1491 <td>lightgreen = #90ee90</td>
1492 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgrey;"></span><br>
1493 </td>
1494 <td>lightgrey = #d3d3d3</td>
1495 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightpink;"></span><br>
1496 </td>
1497 <td>lightpink = #ffb6c1</td>
1498 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightsalmon;"></span><br>
1499 </td>
1500 <td>lightsalmon = #ffa07a</td>
1501 </tr>
1502 <tr>
1503 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightseagreen;"></span><br>
1504 </td>
1505 <td>lightseagreen = #20b2aa</td>
1506 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightskyblue;"></span><br>
1507 </td>
1508 <td>lightskyblue = #87cefa</td>
1509 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightslategray;"></span><br>
1510 </td>
1511 <td>lightslategray = #778899</td>
1512 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightslategrey;"></span><br>
1513 </td>
1514 <td>lightslategrey = #778899</td>
1515 </tr>
1516 <tr>
1517 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightsteelblue;"></span><br>
1518 </td>
1519 <td>lightsteelblue = #b0c4de</td>
1520 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightyellow;"></span><br>
1521 </td>
1522 <td>lightyellow = #ffffe0</td>
1523 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lime;"></span><br>
1524 </td>
1525 <td>lime = #00ff00</td>
1526 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% limegreen;"></span><br>
1527 </td>
1528 <td>limegreen = #32cd32</td>
1529 </tr>
1530 <tr>
1531 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% linen;"></span><br>
1532 </td>
1533 <td>linen = #faf0e6</td>
1534 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% magenta;"></span><br>
1535 </td>
1536 <td>magenta = #ff00ff</td>
1537 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% maroon;"></span><br>
1538 </td>
1539 <td>maroon = #800000</td>
1540 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumaquamarine;"></span><br>
1541 </td>
1542 <td>mediumaquamarine = #66cdaa</td>
1543 </tr>
1544 <tr>
1545 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumblue;"></span><br>
1546 </td>
1547 <td>mediumblue = #0000cd</td>
1548 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumorchid;"></span><br>
1549 </td>
1550 <td>mediumorchid = #ba55d3</td>
1551 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumpurple;"></span><br>
1552 </td>
1553 <td>mediumpurple = #9370db</td>
1554 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumseagreen;"></span><br>
1555 </td>
1556 <td>mediumseagreen = #3cb371</td>
1557 </tr>
1558 <tr>
1559 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumslateblue;"></span><br>
1560 </td>
1561 <td>mediumslateblue = #7b68ee</td>
1562 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumspringgreen;"></span><br>
1563 </td>
1564 <td>mediumspringgreen = #00fa9a</td>
1565 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumturquoise;"></span><br>
1566 </td>
1567 <td>mediumturquoise = #48d1cc</td>
1568 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumvioletred;"></span><br>
1569 </td>
1570 <td>mediumvioletred = #c71585</td>
1571 </tr>
1572 <tr>
1573 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% midnightblue;"></span><br>
1574 </td>
1575 <td>midnightblue = #191970</td>
1576 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mintcream;"></span><br>
1577 </td>
1578 <td>mintcream = #f5fffa</td>
1579 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mistyrose;"></span><br>
1580 </td>
1581 <td>mistyrose = #ffe4e1</td>
1582 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% moccasin;"></span><br>
1583 </td>
1584 <td>moccasin = #ffe4b5</td>
1585 </tr>
1586 <tr>
1587 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% navajowhite;"></span><br>
1588 </td>
1589 <td>navajowhite = #ffdead</td>
1590 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% navy;"></span><br>
1591 </td>
1592 <td>navy = #000080</td>
1593 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% oldlace;"></span><br>
1594 </td>
1595 <td>oldlace = #fdf5e6</td>
1596 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% olive;"></span><br>
1597 </td>
1598 <td>olive = #808000</td>
1599 </tr>
1600 <tr>
1601 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% olivedrab;"></span><br>
1602 </td>
1603 <td>olivedrab = #6b8e23</td>
1604 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orange;"></span><br>
1605 </td>
1606 <td>orange = #ffa500</td>
1607 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orangered;"></span><br>
1608 </td>
1609 <td>orangered = #ff4500</td>
1610 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orchid;"></span><br>
1611 </td>
1612 <td>orchid = #da70d6</td>
1613 </tr>
1614 <tr>
1615 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palegoldenrod;"></span><br>
1616 </td>
1617 <td>palegoldenrod = #eee8aa</td>
1618 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palegreen;"></span><br>
1619 </td>
1620 <td>palegreen = #98fb98</td>
1621 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% paleturquoise;"></span><br>
1622 </td>
1623 <td>paleturquoise = #afeeee</td>
1624 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palevioletred;"></span><br>
1625 </td>
1626 <td>palevioletred = #db7093</td>
1627 </tr>
1628 <tr>
1629 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% papayawhip;"></span><br>
1630 </td>
1631 <td>papayawhip = #ffefd5</td>
1632 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% peachpuff;"></span><br>
1633 </td>
1634 <td>peachpuff = #ffdab9</td>
1635 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% peru;"></span><br>
1636 </td>
1637 <td>peru = #cd853f</td>
1638 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% pink;"></span><br>
1639 </td>
1640 <td>pink = #ffc0cb</td>
1641 </tr>
1642 <tr>
1643 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% plum;"></span><br>
1644 </td>
1645 <td>plum = #dda0dd</td>
1646 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% powderblue;"></span><br>
1647 </td>
1648 <td>powderblue = #b0e0e6</td>
1649 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% purple;"></span><br>
1650 </td>
1651 <td>purple = #800080</td>
1652 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% red;"></span><br>
1653 </td>
1654 <td>red = #ff0000</td>
1655 </tr>
1656 <tr>
1657 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% rosybrown;"></span><br>
1658 </td>
1659 <td>rosybrown = #bc8f8f</td>
1660 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% royalblue;"></span><br>
1661 </td>
1662 <td>royalblue = #4169e1</td>
1663 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% saddlebrown;"></span><br>
1664 </td>
1665 <td>saddlebrown = #8b4513</td>
1666 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% salmon;"></span><br>
1667 </td>
1668 <td>salmon = #fa8072</td>
1669 </tr>
1670 <tr>
1671 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% sandybrown;"></span><br>
1672 </td>
1673 <td>sandybrown = #f4a460</td>
1674 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% seagreen;"></span><br>
1675 </td>
1676 <td>seagreen = #2e8b57</td>
1677 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% seashell;"></span><br>
1678 </td>
1679 <td>seashell = #fff5ee</td>
1680 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% sienna;"></span><br>
1681 </td>
1682 <td>sienna = #a0522d</td>
1683 </tr>
1684 <tr>
1685 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% silver;"></span><br>
1686 </td>
1687 <td>silver = #c0c0c0</td>
1688 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% skyblue;"></span><br>
1689 </td>
1690 <td>skyblue = #87ceeb</td>
1691 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slateblue;"></span><br>
1692 </td>
1693 <td>slateblue = #6a5acd</td>
1694 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slategray;"></span><br>
1695 </td>
1696 <td>slategray = #708090</td>
1697 </tr>
1698 <tr>
1699 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slategrey;"></span><br>
1700 </td>
1701 <td>slategrey = #708090</td>
1702 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% snow;"></span><br>
1703 </td>
1704 <td>snow = #fffafa</td>
1705 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% springgreen;"></span><br>
1706 </td>
1707 <td>springgreen = #00ff7f</td>
1708 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% steelblue;"></span><br>
1709 </td>
1710 <td>steelblue = #4682b4</td>
1711 </tr>
1712 <tr>
1713 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% tan;"></span><br>
1714 </td>
1715 <td>tan = #d2b48c</td>
1716 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% teal;"></span><br>
1717 </td>
1718 <td>teal = #008080</td>
1719 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% thistle;"></span><br>
1720 </td>
1721 <td>thistle = #d8bfd8</td>
1722 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% tomato;"></span><br>
1723 </td>
1724 <td>tomato = #ff6347</td>
1725 </tr>
1726 <tr>
1727 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% turquoise;"></span><br>
1728 </td>
1729 <td>turquoise = #40e0d0</td>
1730 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% violet;"></span><br>
1731 </td>
1732 <td>violet = #ee82ee</td>
1733 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% wheat;"></span><br>
1734 </td>
1735 <td>wheat = #f5deb3</td>
1736 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% white;"></span><br>
1737 </td>
1738 <td>white = #ffffff</td>
1739 </tr>
1740 <tr>
1741 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% whitesmoke;"></span><br>
1742 </td>
1743 <td>whitesmoke = #f5f5f5</td>
1744 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% yellow;"></span><br>
1745 </td>
1746 <td>yellow = #ffff00</td>
1747 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% yellowgreen;"></span><br>
1748 </td>
1749 <td>yellowgreen = #9acd32</td>
1750 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% transparent;"></span><br>
1751 </td>
1752 <td>transparent = rgba(0,0,0,0)</td>
1753 </tr>
1754 </tbody>
1755 </table>
1756 <h4>Looked-up Colors <span class="grammar" style="font-size: smaller;"><looked-up-color></span></h4>
1757 <p>With looked-up colors you can refer to any other color property that is
1758 set on the current node or any of its parents. This is a very powerful
1759 feature, as it allows a generic palette of colors to be specified on the
1760 scene then used thoughout the application. If you want to change one of
1761 those palette colors you can do so at any level in the scene tree and it
1762 will affect that node and all its decendents. Looked-up colors are not
1763 looked up until they are applied, so they are live and react to any style
1764 changes that might occur, such as replacing a palette color at runtime
1765 with the "style" property on a node.</p>
1766 <p>In the following example, all background color of all buttons uses the
1767 looked up color "abc".</p>
1768 <p class="example">.root { abc: #f00 }<br>
1769 .button { -fx-background-color: abc }</p>
1770 <h4>RGB Colors <span class="grammar" style="font-size: smaller;"><rgb-color></span></h4>
1771 <p>The RGB color model is used in numerical color specifications. It has a
1772 number of different supported forms.</p>
1773 <p class="grammar">#<digit><digit><digit><br>
1774 |
1775 #<digit><digit><digit><digit><digit><digit><br>
1776 | rgb( <a href="#typenumber" class="typelink"><integer></a> , <a href="#typenumber"
1777 class="typelink"><integer></a>
1778 , <a href="#typenumber" class="typelink"><integer></a> )<br>
1779 | rgb( <a href="#typenumber" class="typelink"><integer></a> %, <a
1780 href="#typenumber"
1781 class="typelink"><integer></a>%
1782 , <a href="#typenumber" class="typelink"><integer></a>% )<br>
1783 | rgba( <a href="#typenumber" class="typelink"><integer></a> , <a
1784 href="#typenumber"
1785 class="typelink"><integer></a>
1786 , <a href="#typenumber" class="typelink"><integer></a> , <a href="#typenumber"
1787 class="typelink"><number></a>
1788 ) <br>
1789 | rgba( <a href="#typenumber" class="typelink"><integer></a>% , <a
1790 href="#typenumber"
1818 space characters are allowed around the numerical values.</p>
1819 <p><strong>RGB + Alpha</strong>: This is an extension of the RGB color model
1820 to include an ‘alpha’ value that specifies the opacity of a
1821 color. This is accomplished via a functional syntax of the form rgba(...)
1822 form that takes a fourth parameter which is the alpha value. The alpha
1823 value must be a number in the range 0.0 (representing completely
1824 transparent) and 1.0 (completely opaque). As with the rgb() function, the
1825 red, green, and blue values may be decimal integers or percentages. The
1826 following examples all specify the same color:</p>
1827 <p class="example"></p>
1828 <ul style="list-style: none;">
1829 <li>.label { -fx-text-fill: rgb(255,0,0) } /* integer range 0 — 255*/</li>
1830 <li> .label { -fx-text-fill: rgba(255,0,0,1) /* the same, with explicit
1831 opacity of 1 */</li>
1832 <li> .label { -fx-text-fill: rgb(100%,0%,0%) } /* float range 0.0% —
1833 100.0% */</li>
1834 <li> .label { -fx-text-fill: rgba(100%,0%,0%,1) } /* the same, with
1835 explicit opacity of 1 */</li>
1836 </ul>
1837 <p></p>
1838 <h4>HSB Colors <span class="grammar" style="font-size: smaller;"><hsb-color></span></h4>
1839 <p>Colors can be specified using the HSB (sometimes called HSV) color model,
1840 as follows:</p>
1841 <p class="grammar">hsb( <a href="#typenumber" class="typelink"><number></a>
1842 , <a href="#typenumber" class="typelink"><number></a>% , <a href="#typenumber"
1843 class="typelink"><number></a>%
1844 ) | hsba( <a href="#typenumber" class="typelink"><number></a> , <a
1845 href="#typenumber"
1846 class="typelink"><number></a>%
1847 , <a href="#typenumber" class="typelink"><number></a>% , <a href="#typenumber"
1848 class="typelink"><number></a>
1849 )</p>
1850 <p>The first number is <span style="font-style:italic;">hue</span>, a number in the range 0 to 360
1851 degrees. The second number is <em>saturation,</em> a percentage in the
1852 range 0% to 100%. The third number is <span style="font-style:italic;">brightness</span>, also a
1853 percentage in the range 0% to 100%. The hsba(...) form takes a fourth
1854 parameter at the end which is a alpha value in the range 0.0 to 1.0,
1855 specifying completely transparent and completely opaque, respectively.</p>
1856 <h4>Color Functions <span class="grammar" style="font-size: smaller;"><color-function></span></h4>
1857 <p>JavaFX supports some color computation functions. These compute new
1858 colors from input colors at the time the color style is applied. This
1859 enables a color theme to be specified using a single base color and to
1860 have variant colors computed from that base color. There are two color
1861 functions: derive() and ladder().</p>
1862 <p class="grammar"><derive> | <ladder></p>
1863 <p><strong>Derive </strong><span class="grammar" style="font-size: smaller;"><derive></span></p>
1864 <p class="grammar">derive( <a href="#typecolor" class="typelink"><color></a>
1865 , <a href="#typenumber" class="typelink"><number></a>% )</p>
1866 <p>The derive function takes a color and computes a brighter or darker
1867 version of that color. The second parameter is the brightness offset,
1868 representing how much brighter or darker the derived color should be. Positive percentages indicate brighter colors
1869 and negative percentages indicate darker colors. A value of -100% means
1870 completely black, 0% means no change in brightness, and 100% means
1871 completely white.</p>
1872 <p><strong>Ladder</strong><span class="grammar" style="font-size: smaller;"><ladder></span></p>
1873 <p class="grammar">ladder(<a href="#typecolor" class="typelink"><color></a>
1874 , <a href="#typecolorstop" class="typelink"><color-stop></a> [, <a
1875 href="#typecolorstop"
1876 class="typelink"><color-stop></a>]+)</p>
1877 <p>The ladder function interpolates between colors. The effect is as if a
1878 gradient is created using the stops provided, and then the brightness of
1879 the provided <a href="#typecolor" class="typelink"><color></a> is
1880 used to index a color value within that gradient. At 0% brightness, the
1881 color at the 0.0 end of the gradient is used; at 100% brightness, the
1882 color at the 1.0 end of the gradient is used; and at 50% brightness, the
1883 color at 0.5, the midway point of the gradient, is used. Note that no
1884 gradient is actually rendered. This is merely an interpolation function
1885 that results in a single color.</p>
1886 <p>Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1887 class="typelink">W3C
1888 color-stop syntax</a> and are normalized accordingly.</p>
1889 <p>For example, you could use the following if you want the text color to be
1890 black or white depending upon the brightness of the background.</p>
1891 <p class="example">background: white;<br>
1892 -fx-text-fill: ladder(background, white 49%, black 50%);</p>
2426 <h4><a name="region" id="region">Region</a></h4>
2427 <p class="styleclass">Style class: empty by default</p>
2428 <p>A Region is a Node (extending from Parent) with backgrounds and borders
2429 that are styleable via CSS. A Region is typically a rounded rectangle,
2430 though this can be modified through CSS to be an arbitrary shape. Regions
2431 can contain other Region objects (sub-regions) or they can contain
2432 sub-controls. All Regions have the same set of CSS properties as described
2433 below. </p>
2434 <p>Each Region consists of several layers, painted from bottom to top, in
2435 this order:</p>
2436 <ol>
2437 <li>background fills</li>
2438 <li>background images</li>
2439 <li>border strokes</li>
2440 <li>border images</li>
2441 <li>contents</li>
2442 </ol>
2443 <p>The background and border mechanisms are patterned after the CSS 3 draft
2444 backgrounds and borders module. See <a href="#references">[4]</a> for a
2445 detailed description.</p>
2446 <p>Background fills are specified with the properties <span class="propertyname">-fx-background-color</span>,
2447 <span class="propertyname">-fx-background-radius</span> and <span class="propertyname">-fx-background-insets</span>.
2448 The -fx-background-color property is a series of one or more
2449 comma-separated <paint> values. The number of values in the series
2450 determines the number of background rectangles that are painted.
2451 Background rectangles are painted in the order specified using the given
2452 <paint> value. Each background rectangle can have different radii
2453 and insets. The -fx-background-radius and -fx-background-insets properties
2454 are series of comma-separated values (or sets of values). The radius and
2455 insets values used for a particular background are the found in the
2456 corresponding position in the -fx-background-radius and
2457 -fx-background-insets series. For example, suppose a series of three
2458 values is given for the -fx-background-color property. A series of three
2459 values should also be specified for the -fx-background-radius and
2460 -fx-background-insets properties. The first background will be painted
2461 using the first radius value and first insets value, the second background
2462 will be painted with the second radius value and second insets value, and
2463 so forth.</p>
2464 <p>Note also that properties such as -fx-background-radius and
2465 -fx-background-insets can contain a series of values or <span style="font-style:italic;">sets</span> of
2466 four values. A set of values is separated by whitespace, whereas the
2467 values or sets-of-values in a series are separated by commas. For
2468 -fx-background-radius, a single value indicates that the value should be
2469 used for the radius of all four corners of the background rectangle. A set
2470 of four values indicates that different radius values are to be used for
2471 the top-left, top-right, bottom-right, and bottom-left corners, in that
2472 order. Similarly, the -fx-background-insets property can also contain a
2473 series of values or sets of values. A set of four values for
2474 -fx-background-insets indicates that different insets are to be used for
2475 the top, right, bottom, and left edges of the rectangle, in that order.</p>
2476 <p>Background images are specified with the properties <span class="propertyname">-fx-background-image</span>,
2477 <span class="propertyname">-fx-background-repeat</span>, <span class="propertyname">-fx-background-position</span>
2478 and <span class="propertyname">-fx-background-size</span>. The number of
2479 images in the series of -fx-background-image values determines the number
2480 of background images that are painted. The -fx-background-repeat,
2481 -fx-background-position, and -fx-background-size properties each can
2482 contain a series of values. For each item in the -fx-background-image
2483 series, the corresponding items in the -fx-background-repeat,
2484 -fx-background-position, and -fx-background-size properties are applied to
2485 that background image.</p>
2486 <p>Stroked borders are specified with the properties <span class="propertyname">-fx-border-color</span>,
2487 <span class="propertyname">-fx-border-style</span>, <span class="propertyname">-fx-border-width</span>,
2488 <span class="propertyname">-fx-border-radius</span> and <span class="propertyname">-fx-border-insets</span>.
2489 Each property contains a series of items. The maximum number of items in the -fx-
2490 border-color or -fx-border-style property determines the number of border layers that are painted..
2491 Each border in the series is painted using information from the
2492 corresponding series item of the -fx-border-color, -fx-border-style, -fx-border-width,
2493 -fx-border-radius, and -fx-border-insets properties. If there is no -fx-border-color, the default color is black.
2494 if there is no -fx-border-style, the default style is solid. </p>
2495 <p>Image borders are specified with the properties <span class="propertyname">-fx-border-image-source</span>,
2496 <span class="propertyname">-fx-border-image-repeat</span>, <span class="propertyname">-fx-border-image-slice</span>,
2497 <span class="propertyname">-fx-border-image-width</span> and <span class="propertyname">-fx-border-image-insets</span>.
2498 Each property contains a series of items. The number of items in the
2499 -fx-border-image-source property determines the number of images that are
2500 painted. Each image in the series is painted using information from the
2501 corresponding series items of the -fx-border-image-repeat,
2502 -fx-border-image-slice, -fx-border-image-width, and
2503 -fx-border-image-insets properties.</p>
2504 <p>The region's contents are a sequence of nodes, like any other container.
2505 The contents are set programmatically and cannot be set via CSS.</p>
2506 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
2507 <thead>
2508 <tr>
2509 <th class="propertyname">CSS Property</th>
2510 <th class="value">Values</th>
2511 <th class="default">Default</th>
2512 <th>Comments</th>
2513 </tr>
2514 </thead>
2515 <tbody>
2516 <tr>
2517 <td colspan="4" class="propertyname"><em>BACKGROUND FILLS</em> (see <a
|