Несколько значений javafx css при объявлении
Я просматриваю различные руководства и ссылки, касающиеся использования стилей css. Я хочу предоставить настраиваемый css для расширения корневого css, и у меня возникли трудности с пониманием одного аспекта файла caspian.css.
В нем есть такие строки, как:
-fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, derive(-fx-control-inner-background,-5%);
Я могу понять его производную часть, но почему несколько значений цвета. Как это работает?
Извините, если это очевидно для некоторых людей, но я не могу найти ответ.
Ответы 2
Region может иметь несколько фоновых заливок/изображений (как можно увидеть, взглянув на Background). Каждая заливка рисуется по порядку, одна поверх другой, за которой следуют изображения таким же образом. Если вы посмотрите на Справочное руководство по CSS для JavaFX, вы увидите, что то, что вы опубликовали, — это просто синтаксис CSS для объявления множественных заливок.
Обычно это сочетается с настройкой вставок для каждой заливки (например, -fx-background-insets) и заполнения (например, -fx-padding), как JavaFX отображает «границы». По сути, верхний фон (фоны) немного вставлен, что позволяет нижнему фону (фонам) отображаться по краям области. Я не помню, где я это прочитал, но я считаю, что причина, по которой они используют этот подход, заключается в том, что он дешевле, чем использование настоящей границы.
Если вам интересно, почему значения -fx-focus-color, -fx-cell-focus-inner-border и так далее, JavaFX CSS поддерживает искомые цвета. Где-то еще в файле CSS, может быть, в .root {...}, эти значения определены и затем используются во всей таблице стилей. Это может упростить использование единой цветовой палитры во всем пользовательском интерфейсе.
Также обратите внимание, что, начиная с JavaFX 8, таблица стилей по умолчанию — «modena.css».
Дальнейшее чтение дало мне ответ. В файле 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.