I am going through the various tutorials and references concerning the use of css styles. I wish to provide a configurable css to augment the root css and I am having difficulty understanding one aspect of the caspian.css file.
It has lines such as:
-fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, derive(-fx-control-inner-background,-5%);
I can understand the derive part of it but why multiple values for the color. How does this work?
Sorry if this is obvious to some people but I can't find the answer.
答案 0 :(得分：2)
A Region can have multiple background fills/images (as can be seen by looking at Background). Each fill is drawn in order, one on top of the other, followed by the images in the same manner. If you take a look at the JavaFX CSS Reference Guide, you'll see that what you've posted is simply the CSS syntax for declaring multiple fills.
This is usually combined with setting the insets for each fill (i.e. -fx-background-insets) and padding (i.e. -fx-padding) which is how JavaFX renders "borders". Basically, the top background(s) are inset slightly which allows the bottom background(s) to show around the edges of the region. I don't remember where I read this, but I believe the reason they use this approach is because it's less expensive than using a real border.
If you're wondering why the values are -fx-focus-color, -fx-cell-focus-inner-border, et cetera, JavaFX CSS supports named colors. Somewhere else in the CSS file, maybe in .root {...}, those values are defined and are then used throughout the style sheet. This can make it easier to use a uniform color pallet across the entire UI.
Also, note that since JavaFX 8 the default style sheet is "modena.css".
答案 1 :(得分：0)
进一步阅读给了我答案。埋在caspian.css文件中的是这样的：
/*******************************************************************************
*******************************************************************************
** **
** CSS Sections for each control. In general, each control will have a main **
** section that defines the following: **
** **
** .control-name { **
** -fx-background-color: a, b, c, d **
** -fx-background-insets: e, f, g, h **
** -fx-background-radius: i, j, k, l **
** -fx-padding: m **
** -fx-text-fill: n **
** } **
** **
** where: **
** **
** -fx-background-color, -fx-background-insets, and -fx-background-radius **
** are parallel arrays that specify background colors for the control. **
** **
** -fx-background represents a sequence of colors for regions that will be **
** drawn, one on top of the other. **
** **
** -fx-background-insets is a comma separated list of insets that represent **
** the top right bottom left insets from the edge of the control for each **
** color specified in the -fx-background-color list. A single size for **
** an inset means the same inset will be used for the top right bottom left **
** values. A negative inset will draw outside the bounds of the control. **
** **
** -fx-background-radius is a comma separated list of values that represent **
** the radii of the top right, bottom right, bottom left, and top left **
** corners of the rectangle associated with the rectangle from the **
** -fx-background-color list. As with insets, a single size for a radius **
** means the same radius will be used for all corners. **
** **
** Typically, the following values will be used: **
** **
** a/e/i = -fx-shadow-highlight-color, 0 0 -1 0, 5 **
** Draws a background highlight dropped 1 pixel down with **
** corners with a 5 pixel radius. **
** b/f/j = -fx-outer-border, 0, 5 **
** Draws an outer border the size of the control (insets = 0) and **
** with corners with a 5 pixel radius. **
** c/g/k = -fx-inner-border, 1, 4 **
** Draws an inner border inset 1 pixel from the control edge and **
** with corners with a smaller radius (radius = 4). **
** d/h/l = -fx-body-color, 2, 3 **
** Draws the body last, inset 2 pixels from the control edge and **
** with corners with an even smaller radius (radius = 3). **
** m = Padding from the edge of the control to the outer edge of the **
** skin content. **
** n = If specified, the color chosen for -fx-text-fill should match **
** the innermost color from -fx-background-colors (e.g., 'd'). **
** See the -fx-text-fill entry in .scene for more information. **
** **
** The control will also typically define pseudoclass sections for when it **
** is focused, when the mouse is hovering over it ("hover") and when the **
** mouse button is being held down on it (e.g., "armed"). **
** **
** For example, in the "focused" pseudoclass, -fx-focus-color will typically **
** just replace -fx-shadow-highlight-color and will be drawn so it extents **
** outside the control with a glowing effect. The glowing effect is **
** achieved by using a non-integer insets value of -1.4 and the radius **
** is adjusted accordingly. **
** **
** .control-name:focused { **
** -fx-background-color: -fx-focus-color, b, c, d **
** -fx-background-insets: -1.4, f, g, h **
** -fx-background-radius: 6.4, j, k, l **
** } **
** **
** In the "hover" pseudoclass, the -fx-color is replaced with -fx-hover-base **
** which will result in a re-derivation of the other colors in **
** -fx-background-colors: **
** **
** .control-name:hover { **
** -fx-color: -fx-hover-base; **
** } **
** **
** In the "armed" pseudoclass, the -fx-color is replaced with **
** -fx-pressed-base, which will result in a rederivation of the other colors **
** in -fx-background-colors: **
** **
** .control-name:armed { **
** -fx-color: -fx-pressed-base; **
** } **
** **
** The control will also typically include a "disabled" pseudoclass which **
** makes the component transparent: **
** **
** .control-name:disabled { **
** -fx-opacity: -fx-disabled-opacity; **
** } **
** **
*******************************************************************************
******************************************************************************/
有趣的是它不在modena.css文件中