javafx css несколько значений при объявлении

Question

Я просматриваю различные учебные пособия и ссылки, касающиеся использования стилей CSS. Я хочу предоставить настраиваемый css для расширения корневого css, и у меня возникают трудности с пониманием одного аспекта файла caspian.css.

В нем есть такие строки, как:

-fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, derive(-fx-control-inner-background,-5%);

Я могу понять его производную часть, но почему несколько значений для цвета. Как это работает?

Извините, если это очевидно для некоторых людей, но я не могу найти ответ.

Answer 1

A Region может иметь несколько фоновых заливок / изображений (это можно увидеть, взглянув на Background).Каждая заливка рисуется по порядку, один над другим, а затем изображения в том же порядке.Если вы посмотрите Справочное руководство по JavaFX CSS , то увидите, что вы разместили просто синтаксис CSS для объявления нескольких заливок.

Обычно это сочетается с настройкойвставки для каждой заливки (т. е. -fx-background-insets) и заполнения (т. е. -fx-padding), как JavaFX отображает «границы».В основном, верхний фон (ы) слегка вставлен, что позволяет нижнему фону (ам) показываться по краям области.Я не помню, где я читал это, но я полагаю, что причина, по которой они используют этот подход, заключается в том, что он дешевле, чем использование реальной границы.

Если вам интересно, почему значения -fx-focus-color, -fx-cell-focus-inner-border и так далее, JavaFX CSS поддерживает именованных цветов .Где-то еще в файле CSS, может быть, в .root {...}, эти значения определены и затем используются во всей таблице стилей.Это может упростить использование единой цветовой палитры для всего пользовательского интерфейса.

Также обратите внимание, что начиная с JavaFX 8 таблица стилей по умолчанию - "modena.css".

Answer 2

Дальнейшее чтение дало мне ответ. В файле 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