< prev index next >

modules/javafx.graphics/src/main/docs/javafx/scene/doc-files/cssref.html

Print this page
rev 10453 : 8179644: Update copyright header for files modified in 2017
Reviewed-by:
   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         &nbsp;&nbsp;&nbsp; -fx-fill: yellow;<br>
 712         &nbsp;&nbsp;&nbsp; -fx-stroke: green;<br>
 713         &nbsp;&nbsp;&nbsp; -fx-stroke-width: 5;<br>
 714         &nbsp;&nbsp;&nbsp; -fx-stroke-dash-array: 12 2 4 2;<br>
 715         &nbsp;&nbsp;&nbsp; -fx-stroke-dash-offset: 6;<br>
 716         &nbsp;&nbsp;&nbsp; -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 '&lt;percent&gt;' 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">&lt;url&gt;[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 &lt;media-query-list&gt; 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">&lt;percentage&gt;</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">&lt;number&gt;</a>[ % ]</p>
 837     <h3><a name="typeangle" id="typeangle">&lt;angle&gt;</a></h3>
 838     <p>An angle is a <a href="#typenumber" class="typeref">&lt;number&gt;</a>
 839       with one of the following units.</p>
 840     <p> </p>
 841     <p class="grammar"><a href="#typenumber">&lt;number&gt;</a>[ deg | rad |
 842       grad | turn ]</p>
 843     <ul>
 844       <li><strong>deg</strong>: angle in degrees &mdash; 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">&lt;duration&gt;</a></h3>
 851     <p>A duration is a <a href="#typenumber" class="typeref">&lt;number&gt;</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">&lt;number&gt;</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">&lt;point&gt;</a></h3>
 862     <p>A point is an {x,y} coordinate.</p>
 863     <p class="grammar">[ [ &lt;length&gt; &lt;length&gt; ]&nbsp;|&nbsp;[
 864       &lt;percentage&gt; | &lt;percentage&gt; ] ]</p>
 865     <h3><a name="typecolorstop" id="typecolorstop">&lt;color-stop&gt;</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">&lt;color&gt;</a>
 870       [ <a href="#typepercentage" class="typeref">&lt;percentage&gt;</a> | <a
 871         href="#typelength"
 872         class="typeref">&lt;length&gt;</a>]?
 873       ]</p>
 874     <p>In a series of &lt;color-stop&gt;, stop distance values must all be
 875       &lt;percentage&gt; or &lt;length&gt;. Furthermore, if &lt;length&gt;
 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">&lt;uri&gt;</a></h3>
 889     <p class="grammar">url ( [\"\']? &lt;address&gt; [\"\']? )</p>
 890     <p><span class="grammar">&lt;address&gt;</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">&lt;address&gt;</span> does not have a [scheme:] component, the <span class="grammar">&lt;address&gt;</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">&lt;effect&gt;</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( &lt;blur-type&gt; , <a href="#typecolor"
 966           class="typelink">&lt;color&gt;</a>
 967         , <a href="#typenumber" class="typelink">&lt;number&gt;</a> , <a href="#typenumber"
 968           class="typelink">&lt;number&gt;</a>
 969         , <a href="#typenumber" class="typelink">&lt;number&gt;</a> , <a href="#typenumber"
 970           class="typelink">&lt;number&gt;</a>
 971         )</span></p>
 972     <p style="margin-left: 40px;"><span class="grammar">&lt;blur-type&gt; = [
 973         gaussian | one-pass-box | three-pass-box | two-pass-box ]<br>
 974         <a href="#typecolor" class="typelink">&lt;color&gt;</a></span> The
 975       shadow Color.<br>
 976       <span class="grammar"><a href="#typenumber" class="typelink">&lt;number&gt;</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">&lt;number&gt;</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">&lt;number&gt;</a></span>
 989       The shadow offset in the x direction, in pixels. <br>
 990       <span class="grammar"><a href="#typenumber" class="typelink">&lt;number&gt;</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( &lt;blur-type&gt; , <a href="#typecolor"
 996           class="typelink">&lt;color&gt;</a>
 997         , <a href="#typenumber" class="typelink">&lt;number&gt;</a> , <a href="#typenumber"
 998           class="typelink">&lt;number&gt;</a>
 999         , <a href="#typenumber" class="typelink">&lt;number&gt;</a> , <a href="#typenumber"
1000           class="typelink">&lt;number&gt;</a>
1001         )</span></p>
1002     <p style="margin-left: 40px;"><span class="grammar">&lt;blur-type&gt; = [
1003         gaussian | one-pass-box | three-pass-box | two-pass-box ]<br>
1004       </span><span class="grammar"><a href="#typecolor" class="typelink">&lt;color&gt;</a></span>
1005       The shadow Color.<br>
1006       <span class="grammar"><a href="#typenumber" class="typelink">&lt;number&gt;</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">&lt;number&gt;</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">&lt;number&gt;</a></span>
1019       The shadow offset in the x direction, in pixels. <br>
1020       <span class="grammar"><a href="#typenumber" class="typelink">&lt;number&gt;</a></span>
1021       The shadow offset in the y direction, in pixels. </p>
1022     <h3><a name="typefont" id="typefont">&lt;font&gt;</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">&lt;font-family&gt;</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">&lt;font-size&gt;</span> The size of the font,
1039       using the <span class="grammar">&lt;size&gt;</span> syntax.</p>
1040     <p><span class="grammar">&lt;font-style&gt;</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">&lt;font-weight&gt;</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">&lt;font&gt;</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">[[ &lt;font-style&gt; || &lt;font-weight&gt; ]?
1051         &lt;font-size&gt; &lt;font-family&gt; ]</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">&lt;font&gt;</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">&lt;font-style&gt;</a></td>
1088           <td>inherit</td>
1089           <td>&nbsp;</td>
1090         </tr>
1091         <tr>
1092           <td class="propertyname">-fx-font-weight</td>
1093           <td class="value"><a href="#typefont" class="typelink">&lt;font-weight&gt;</a></td>
1094           <td>inherit</td>
1095           <td>&nbsp;</td>
1096         </tr>
1097       </tbody>
1098     </table>
1099     <h3><a name="typepaint" id="typepaint">&lt;paint&gt;</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">&lt;color&gt;</a> |
1103       <a href="#typelinear-gradient" class="typelink">&lt;linear-gradient&gt;</a> |
1104       <a href="#typeradial-gradient" class="typelink">&lt;radial-gradient&gt;</a> |
1105       <a href="#typeimage-pattern" class="typelink">&lt;image-pattern&gt;</a>
1106       <a href="#typeimage-pattern" class="typelink">&lt;repeating-image-pattern&gt;</a></p>
1107     <h4>Linear Gradients<span class="grammar" style="font-size: smaller;">
1108             <a name="typelinear-gradient" id="typelinear-gradient">&lt;linear-gradient&gt;</a>
1109         </span></h4>
1110     <p class="grammar">linear-gradient( [ [from <a href="#typepoint" class="typelink">&lt;point&gt;</a>
1111       to <a href="#typepoint" class="typelink">&lt;point&gt;</a>] | [ to
1112       &lt;side-or-corner&gt;], ]? [ [ repeat | reflect ], ]? <a href="#typecolorstop"
1113         class="typelink">&lt;color-stop&gt;</a>[,
1114       <a href="#typecolorstop" class="typelink">&lt;color-stop&gt;</a>]+) <br>
1115       <br>
1116       where &lt;side-or-corner&gt; = [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">&lt;point&gt;</a>
1120       and the "to" <a href="#typepoint" class="typelink">&lt;point&gt;</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 &lt;point&gt; to &lt;point&gt;] nor [ to
1127       &lt;side-or-corner&gt; ] 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 (&lt;size&gt;, &lt;size&gt;)
1147         to (&lt;size&gt;, &lt;size&gt;) stops [ (&lt;number&gt;,&lt;color&gt;)
1148         ]+ [ repeat | reflect ]?</span></p>
1149     <h4>Radial Gradients <span class="grammar" style="font-size: smaller;">
1150             <a name="typeradial-gradient" id="typeradial-gradient">&lt;radial-gradient&gt;</a>
1151         </span></h4>
1152     <p class="grammar">radial-gradient([ focus-angle <a href="#typeangle" class="typelink">&lt;angle&gt;</a>,
1153       ]? [ focus-distance <a href="#typepercentage" class="typelink">&lt;percentage&gt;</a>,
1154       ]? [ center <a href="#typepoint" class="typelink">&lt;point&gt;</a>, ]?
1155       radius [ <a href="#typelength" class="typelink">&lt;length&gt;</a> | <a
1156         href="#typepercentage"
1157         class="typelink">&lt;percentage&gt;</a>
1158       ] [ [ repeat | reflect ], ]? <a href="#typecolorstop" class="typelink">&lt;color-stop&gt;</a>[,
1159       <a href="#typecolorstop" class="typelink">&lt;color-stop&gt;</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 &lt;number&gt;
1179         | &lt;number&gt; ] ]? [ focus-distance &lt;size&gt; ]? [ center
1180         &lt;size,size&gt; ]? &lt;size&gt; stops [ ( &lt;number&gt;,
1181         &lt;color&gt; ) ]+ [ repeat | reflect ]?</span></p>
1182     <h4>Image Paint <span class="grammar" style="font-size: smaller;">
1183             <a name="typeimage-pattern" id="typeimage-pattern">&lt;image-pattern&gt;</a>
1184         </span></h4>
1185     <p class="grammar">image-pattern(<a href="#typestring" class="typelink">&lt;string&gt;</a>,
1186       [<a href="#typesize" class="typelink">&lt;size&gt;</a>,
1187       <a href="#typesize" class="typelink">&lt;size&gt;</a>,
1188       <a href="#typesize" class="typelink">&lt;size&gt;</a>,
1189       <a href="#typesize" class="typelink">&lt;size&gt;</a>[,
1190       <a href="#typeboolean" class="typelink">&lt;boolean&gt;</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">&lt;string&gt;</a></span>
1194       The URL of the image.<br>
1195       <span class="grammar"><a href="#typesize" class="typelink">&lt;size&gt;</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">&lt;size&gt;</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">&lt;size&gt;</a></span>
1200       The width of the anchor rectangle.<br>
1201       <span class="grammar"><a href="#typesize" class="typelink">&lt;size&gt;</a></span>
1202       The height of the anchor rectangle.<br>
1203       <span class="grammar"><a href="#typeboolean" class="typelink">&lt;boolean&gt;</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">&lt;string&gt;</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">&lt;color&gt;</a></h3>
1225     <p class="grammar">&lt;named-color&gt; | &lt;looked-up-color&gt; |
1226       &lt;rgb-color&gt; | &lt;hsb-color&gt; | &lt;color-function&gt;</p>
1227     <h4>Named Colors <span class="grammar" style="font-size: smaller;">&lt;named-color&gt;</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       &nbsp;&nbsp;&nbsp; -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;">&lt;looked-up-color&gt;</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;">&lt;rgb-color&gt;</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">#&lt;digit&gt;&lt;digit&gt;&lt;digit&gt;<br>
1774       |
1775       #&lt;digit&gt;&lt;digit&gt;&lt;digit&gt;&lt;digit&gt;&lt;digit&gt;&lt;digit&gt;<br>
1776       | rgb( <a href="#typenumber" class="typelink">&lt;integer&gt;</a> , <a href="#typenumber"
1777         class="typelink">&lt;integer&gt;</a>
1778       , <a href="#typenumber" class="typelink">&lt;integer&gt;</a> )<br>
1779       | rgb( <a href="#typenumber" class="typelink">&lt;integer&gt;</a> %, <a
1780         href="#typenumber"
1781         class="typelink">&lt;integer&gt;</a>%
1782       , <a href="#typenumber" class="typelink">&lt;integer&gt;</a>% )<br>
1783       | rgba( <a href="#typenumber" class="typelink">&lt;integer&gt;</a> , <a
1784         href="#typenumber"
1785         class="typelink">&lt;integer&gt;</a>
1786       , <a href="#typenumber" class="typelink">&lt;integer&gt;</a> , <a href="#typenumber"
1787         class="typelink">&lt;number&gt;</a>
1788       ) <br>
1789       | rgba( <a href="#typenumber" class="typelink">&lt;integer&gt;</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 &lsquo;alpha&rsquo; 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 &mdash; 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% &mdash;
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;">&lt;hsb-color&gt;</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">&lt;number&gt;</a>
1842       , <a href="#typenumber" class="typelink">&lt;number&gt;</a>% , <a href="#typenumber"
1843         class="typelink">&lt;number&gt;</a>%
1844       ) | hsba( <a href="#typenumber" class="typelink">&lt;number&gt;</a> , <a
1845         href="#typenumber"
1846         class="typelink">&lt;number&gt;</a>%
1847       , <a href="#typenumber" class="typelink">&lt;number&gt;</a>% , <a href="#typenumber"
1848         class="typelink">&lt;number&gt;</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;">&lt;color-function&gt;</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">&lt;derive&gt; | &lt;ladder&gt;</p>
1863     <p><strong>Derive </strong><span class="grammar" style="font-size: smaller;">&lt;derive&gt;</span></p>
1864     <p class="grammar">derive( <a href="#typecolor" class="typelink">&lt;color&gt;</a>
1865       , <a href="#typenumber" class="typelink">&lt;number&gt;</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;">&lt;ladder&gt;</span></p>
1873     <p class="grammar">ladder(<a href="#typecolor" class="typelink">&lt;color&gt;</a>
1874       , <a href="#typecolorstop" class="typelink">&lt;color-stop&gt;</a> [, <a
1875         href="#typecolorstop"
1876         class="typelink">&lt;color-stop&gt;</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">&lt;color&gt;</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 &lt;paint&gt; 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       &lt;paint&gt; 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         &nbsp;&nbsp;&nbsp; -fx-fill: yellow;<br>
 712         &nbsp;&nbsp;&nbsp; -fx-stroke: green;<br>
 713         &nbsp;&nbsp;&nbsp; -fx-stroke-width: 5;<br>
 714         &nbsp;&nbsp;&nbsp; -fx-stroke-dash-array: 12 2 4 2;<br>
 715         &nbsp;&nbsp;&nbsp; -fx-stroke-dash-offset: 6;<br>
 716         &nbsp;&nbsp;&nbsp; -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 '&lt;percent&gt;' 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">&lt;url&gt;[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 &lt;media-query-list&gt; 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">&lt;percentage&gt;</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">&lt;number&gt;</a>[ % ]</p>
 837     <h3><a name="typeangle" id="typeangle">&lt;angle&gt;</a></h3>
 838     <p>An angle is a <a href="#typenumber" class="typeref">&lt;number&gt;</a>
 839       with one of the following units.</p>
 840     <p> </p>
 841     <p class="grammar"><a href="#typenumber">&lt;number&gt;</a>[ deg | rad |
 842       grad | turn ]</p>
 843     <ul>
 844       <li><strong>deg</strong>: angle in degrees &mdash; 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">&lt;duration&gt;</a></h3>
 851     <p>A duration is a <a href="#typenumber" class="typeref">&lt;number&gt;</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">&lt;number&gt;</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">&lt;point&gt;</a></h3>
 862     <p>A point is an {x,y} coordinate.</p>
 863     <p class="grammar">[ [ &lt;length&gt; &lt;length&gt; ]&nbsp;|&nbsp;[
 864       &lt;percentage&gt; | &lt;percentage&gt; ] ]</p>
 865     <h3><a name="typecolorstop" id="typecolorstop">&lt;color-stop&gt;</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">&lt;color&gt;</a>
 870       [ <a href="#typepercentage" class="typeref">&lt;percentage&gt;</a> | <a
 871         href="#typelength"
 872         class="typeref">&lt;length&gt;</a>]?
 873       ]</p>
 874     <p>In a series of &lt;color-stop&gt;, stop distance values must all be
 875       &lt;percentage&gt; or &lt;length&gt;. Furthermore, if &lt;length&gt;
 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">&lt;uri&gt;</a></h3>
 889     <p class="grammar">url ( [\"\']? &lt;address&gt; [\"\']? )</p>
 890     <p><span class="grammar">&lt;address&gt;</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">&lt;address&gt;</span> does not have a [scheme:] component, the <span class="grammar">&lt;address&gt;</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">&lt;effect&gt;</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( &lt;blur-type&gt; , <a href="#typecolor"
 966           class="typelink">&lt;color&gt;</a>
 967         , <a href="#typenumber" class="typelink">&lt;number&gt;</a> , <a href="#typenumber"
 968           class="typelink">&lt;number&gt;</a>
 969         , <a href="#typenumber" class="typelink">&lt;number&gt;</a> , <a href="#typenumber"
 970           class="typelink">&lt;number&gt;</a>
 971         )</span></p>
 972     <p style="margin-left: 40px;"><span class="grammar">&lt;blur-type&gt; = [
 973         gaussian | one-pass-box | three-pass-box | two-pass-box ]<br>
 974         <a href="#typecolor" class="typelink">&lt;color&gt;</a></span> The
 975       shadow Color.<br>
 976       <span class="grammar"><a href="#typenumber" class="typelink">&lt;number&gt;</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">&lt;number&gt;</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">&lt;number&gt;</a></span>
 989       The shadow offset in the x direction, in pixels. <br>
 990       <span class="grammar"><a href="#typenumber" class="typelink">&lt;number&gt;</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( &lt;blur-type&gt; , <a href="#typecolor"
 996           class="typelink">&lt;color&gt;</a>
 997         , <a href="#typenumber" class="typelink">&lt;number&gt;</a> , <a href="#typenumber"
 998           class="typelink">&lt;number&gt;</a>
 999         , <a href="#typenumber" class="typelink">&lt;number&gt;</a> , <a href="#typenumber"
1000           class="typelink">&lt;number&gt;</a>
1001         )</span></p>
1002     <p style="margin-left: 40px;"><span class="grammar">&lt;blur-type&gt; = [
1003         gaussian | one-pass-box | three-pass-box | two-pass-box ]<br>
1004       </span><span class="grammar"><a href="#typecolor" class="typelink">&lt;color&gt;</a></span>
1005       The shadow Color.<br>
1006       <span class="grammar"><a href="#typenumber" class="typelink">&lt;number&gt;</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">&lt;number&gt;</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">&lt;number&gt;</a></span>
1019       The shadow offset in the x direction, in pixels. <br>
1020       <span class="grammar"><a href="#typenumber" class="typelink">&lt;number&gt;</a></span>
1021       The shadow offset in the y direction, in pixels. </p>
1022     <h3><a name="typefont" id="typefont">&lt;font&gt;</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">&lt;font-family&gt;</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">&lt;font-size&gt;</span> The size of the font,
1039       using the <span class="grammar">&lt;size&gt;</span> syntax.</p>
1040     <p><span class="grammar">&lt;font-style&gt;</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">&lt;font-weight&gt;</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">&lt;font&gt;</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">[[ &lt;font-style&gt; || &lt;font-weight&gt; ]?
1051         &lt;font-size&gt; &lt;font-family&gt; ]</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">&lt;font&gt;</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">&lt;font-style&gt;</a></td>
1088           <td>inherit</td>
1089           <td>&nbsp;</td>
1090         </tr>
1091         <tr>
1092           <td class="propertyname">-fx-font-weight</td>
1093           <td class="value"><a href="#typefont" class="typelink">&lt;font-weight&gt;</a></td>
1094           <td>inherit</td>
1095           <td>&nbsp;</td>
1096         </tr>
1097       </tbody>
1098     </table>
1099     <h3><a name="typepaint" id="typepaint">&lt;paint&gt;</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">&lt;color&gt;</a> |
1103       <a href="#typelinear-gradient" class="typelink">&lt;linear-gradient&gt;</a> |
1104       <a href="#typeradial-gradient" class="typelink">&lt;radial-gradient&gt;</a> |
1105       <a href="#typeimage-pattern" class="typelink">&lt;image-pattern&gt;</a>
1106       <a href="#typeimage-pattern" class="typelink">&lt;repeating-image-pattern&gt;</a></p>
1107     <h4>Linear Gradients<span class="grammar" style="font-size: smaller;">
1108             <a name="typelinear-gradient" id="typelinear-gradient">&lt;linear-gradient&gt;</a>
1109         </span></h4>
1110     <p class="grammar">linear-gradient( [ [from <a href="#typepoint" class="typelink">&lt;point&gt;</a>
1111       to <a href="#typepoint" class="typelink">&lt;point&gt;</a>] | [ to
1112       &lt;side-or-corner&gt;], ]? [ [ repeat | reflect ], ]? <a href="#typecolorstop"
1113         class="typelink">&lt;color-stop&gt;</a>[,
1114       <a href="#typecolorstop" class="typelink">&lt;color-stop&gt;</a>]+) <br>
1115       <br>
1116       where &lt;side-or-corner&gt; = [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">&lt;point&gt;</a>
1120       and the "to" <a href="#typepoint" class="typelink">&lt;point&gt;</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 &lt;point&gt; to &lt;point&gt;] nor [ to
1127       &lt;side-or-corner&gt; ] 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 (&lt;size&gt;, &lt;size&gt;)
1147         to (&lt;size&gt;, &lt;size&gt;) stops [ (&lt;number&gt;,&lt;color&gt;)
1148         ]+ [ repeat | reflect ]?</span></p>
1149     <h4>Radial Gradients <span class="grammar" style="font-size: smaller;">
1150             <a name="typeradial-gradient" id="typeradial-gradient">&lt;radial-gradient&gt;</a>
1151         </span></h4>
1152     <p class="grammar">radial-gradient([ focus-angle <a href="#typeangle" class="typelink">&lt;angle&gt;</a>,
1153       ]? [ focus-distance <a href="#typepercentage" class="typelink">&lt;percentage&gt;</a>,
1154       ]? [ center <a href="#typepoint" class="typelink">&lt;point&gt;</a>, ]?
1155       radius [ <a href="#typelength" class="typelink">&lt;length&gt;</a> | <a
1156         href="#typepercentage"
1157         class="typelink">&lt;percentage&gt;</a>
1158       ] [ [ repeat | reflect ], ]? <a href="#typecolorstop" class="typelink">&lt;color-stop&gt;</a>[,
1159       <a href="#typecolorstop" class="typelink">&lt;color-stop&gt;</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 &lt;number&gt;
1179         | &lt;number&gt; ] ]? [ focus-distance &lt;size&gt; ]? [ center
1180         &lt;size,size&gt; ]? &lt;size&gt; stops [ ( &lt;number&gt;,
1181         &lt;color&gt; ) ]+ [ repeat | reflect ]?</span></p>
1182     <h4>Image Paint <span class="grammar" style="font-size: smaller;">
1183             <a name="typeimage-pattern" id="typeimage-pattern">&lt;image-pattern&gt;</a>
1184         </span></h4>
1185     <p class="grammar">image-pattern(<a href="#typestring" class="typelink">&lt;string&gt;</a>,
1186       [<a href="#typesize" class="typelink">&lt;size&gt;</a>,
1187       <a href="#typesize" class="typelink">&lt;size&gt;</a>,
1188       <a href="#typesize" class="typelink">&lt;size&gt;</a>,
1189       <a href="#typesize" class="typelink">&lt;size&gt;</a>[,
1190       <a href="#typeboolean" class="typelink">&lt;boolean&gt;</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">&lt;string&gt;</a></span>
1194       The URL of the image.<br>
1195       <span class="grammar"><a href="#typesize" class="typelink">&lt;size&gt;</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">&lt;size&gt;</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">&lt;size&gt;</a></span>
1200       The width of the anchor rectangle.<br>
1201       <span class="grammar"><a href="#typesize" class="typelink">&lt;size&gt;</a></span>
1202       The height of the anchor rectangle.<br>
1203       <span class="grammar"><a href="#typeboolean" class="typelink">&lt;boolean&gt;</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">&lt;string&gt;</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">&lt;color&gt;</a></h3>
1225     <p class="grammar">&lt;named-color&gt; | &lt;looked-up-color&gt; |
1226       &lt;rgb-color&gt; | &lt;hsb-color&gt; | &lt;color-function&gt;</p>
1227     <h4>Named Colors <span class="grammar" style="font-size: smaller;">&lt;named-color&gt;</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       &nbsp;&nbsp;&nbsp; -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;">&lt;looked-up-color&gt;</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;">&lt;rgb-color&gt;</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">#&lt;digit&gt;&lt;digit&gt;&lt;digit&gt;<br>
1774       |
1775       #&lt;digit&gt;&lt;digit&gt;&lt;digit&gt;&lt;digit&gt;&lt;digit&gt;&lt;digit&gt;<br>
1776       | rgb( <a href="#typenumber" class="typelink">&lt;integer&gt;</a> , <a href="#typenumber"
1777         class="typelink">&lt;integer&gt;</a>
1778       , <a href="#typenumber" class="typelink">&lt;integer&gt;</a> )<br>
1779       | rgb( <a href="#typenumber" class="typelink">&lt;integer&gt;</a> %, <a
1780         href="#typenumber"
1781         class="typelink">&lt;integer&gt;</a>%
1782       , <a href="#typenumber" class="typelink">&lt;integer&gt;</a>% )<br>
1783       | rgba( <a href="#typenumber" class="typelink">&lt;integer&gt;</a> , <a
1784         href="#typenumber"
1785         class="typelink">&lt;integer&gt;</a>
1786       , <a href="#typenumber" class="typelink">&lt;integer&gt;</a> , <a href="#typenumber"
1787         class="typelink">&lt;number&gt;</a>
1788       ) <br>
1789       | rgba( <a href="#typenumber" class="typelink">&lt;integer&gt;</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 &lsquo;alpha&rsquo; 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 &mdash; 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% &mdash;
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;">&lt;hsb-color&gt;</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">&lt;number&gt;</a>
1842       , <a href="#typenumber" class="typelink">&lt;number&gt;</a>% , <a href="#typenumber"
1843         class="typelink">&lt;number&gt;</a>%
1844       ) | hsba( <a href="#typenumber" class="typelink">&lt;number&gt;</a> , <a
1845         href="#typenumber"
1846         class="typelink">&lt;number&gt;</a>%
1847       , <a href="#typenumber" class="typelink">&lt;number&gt;</a>% , <a href="#typenumber"
1848         class="typelink">&lt;number&gt;</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;">&lt;color-function&gt;</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">&lt;derive&gt; | &lt;ladder&gt;</p>
1863     <p><strong>Derive </strong><span class="grammar" style="font-size: smaller;">&lt;derive&gt;</span></p>
1864     <p class="grammar">derive( <a href="#typecolor" class="typelink">&lt;color&gt;</a>
1865       , <a href="#typenumber" class="typelink">&lt;number&gt;</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;">&lt;ladder&gt;</span></p>
1873     <p class="grammar">ladder(<a href="#typecolor" class="typelink">&lt;color&gt;</a>
1874       , <a href="#typecolorstop" class="typelink">&lt;color-stop&gt;</a> [, <a
1875         href="#typecolorstop"
1876         class="typelink">&lt;color-stop&gt;</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">&lt;color&gt;</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 &lt;paint&gt; 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       &lt;paint&gt; 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


< prev index next >