• Java
• JavaFX
• CSS

Исходник: https://openjfx.io/javadoc/15/javafx.graphics/javafx/scene/doc-files/cssref.html

Содержание

• Introduction
  • CSS and the JavaFX Scene Graph
  • Scene, Parent and SubScene Stylesheets
  • Naming Conventions
  • CSS Public API
  • Inheritance
  • @ Rules
  • Examples
  • Understanding Parser Warnings
  • Limitations
• Типы
  • inherit
  • <boolean>
  • <string>
  • <number> & <integer>
  • <size>
  • <length>
  • <percentage>
  • <angle>
  • <duration>
  • <point>
  • <color-stop>
  • <uri>
  • <effect>
  • <font>
  • <paint>
  • <color>
• Сцена
  • javafx.stage
    • PopupWindow
• Узлы
  • javafx.scene
    • Group
    • Node
    • Parent
    • Scene
  • javafx.scene.image
    • ImageView
  • javafx.scene.layout
    • AnchorPane
    • BorderPane
    • DialogPane
    • FlowPane
    • GridPane
    • HBox
    • Pane
    • Region
    • StackPane
    • TilePane
    • VBox
  • javafx.scene.media
    • MediaView
  • javafx.scene.shape
    • Shape
    • Arc
    • Circle
    • CubicCurve
    • Ellipse
    • Line
    • Path
    • Polygon
    • QuadCurve
    • Rectangle
    • SVGPath
  • javafx.scene.text
    • Text
  • javafx.scene.web
    • WebView
• Элементы управления
  • javafx.scene.control
    • Accordion
    • Button
    • ButtonBase
    • Cell
    • CheckBox
    • CheckMenuItem
    • ChoiceBox
    • ColorPicker
    • ComboBox
    • ContextMenu
    • Control
    • DatePicker
    • HTMLEditor
    • Hyperlink
    • IndexedCell
    • Label
    • Labeled
    • ListCell
    • ListView
    • Menu
    • MenuBar
    • MenuButton
    • MenuItem
    • Pagination
    • PasswordField
    • ProgressBar
    • ProgressIndicator
    • RadioButton
    • RadioMenuItem
    • ScrollBar
    • ScrollPane
    • Separator
    • Spinner
    • Slider
    • SplitMenuButton
    • SplitPane
    • TabPane
    • TableColumnHeader
    • TableView
    • TextArea
    • TextInputControl
    • TextField
    • TitledPane
    • ToggleButton
    • ToolBar
    • Tooltip
    • TreeCell
    • TreeTableCell
    • TreeTableView
    • TreeView
    • WebView
• Диаграммы
  • javafx.scene.chart
    • AreaChart
    • Axis
    • BarChart
    • BubbleChart
    • CategoryAxis
    • Chart
    • Legend
    • LineChart
    • NumberAxis
    • PieChart
    • ScatterChart
    • ValueAxis
    • XYChart
• Ссылки

Знакомство.

Никогда еще стиль пользовательского интерфейса Java не был таким простым, как с помощью JavaFX и каскадных таблиц стилей (CSS). Переход от одной темы к другой или настройка внешнего вида только одного элемента управления-все это можно сделать с помощью CSS. Для новичка это может быть незнакомая территория, но кривая обучения не так уж велика. Попробуйте использовать CSS-стиль, и преимущества вскоре станут очевидны. Вы также можете разделить рабочий процесс проектирования и разработки или отложить проектирование до более позднего этапа проекта. Вплоть до последней минуты изменения и даже изменения после развертывания внешнего вида пользовательского интерфейса могут быть достигнуты с помощью JavaFX CSS.

Структура этого документа выглядит следующим образом. Во-первых, есть описание всех типов значений для свойств CSS JavaFX.Там, где это уместно, это включает грамматику для синтаксиса значений этого типа. Затем для каждого узла графа сцены, поддерживающего стили CSS, дается таблица, в которой перечислены поддерживаемые свойства, а также тип и семантическая информация. Также даны псевдоклассы для каждого класса. Описание свойств CSS продолжается для элементов управления. Для каждого элемента управления задается подструктура оболочки этого элемента управления, а также имена классов стилей для объектов области, реализующих эту подструктуру.

CSS и граф сцены JavaFX (Scene Graph).

Каскадные таблицы стилей (CSS) JavaFX основаны на W3C CSS версии 2.1 [1] с некоторыми дополнениями из текущей работы над версией 3 [2]. JavaFX CSS также имеет некоторые расширения CSS для поддержки определенных функций JavaFX. Цель JavaFX CSS - позволить веб-разработчикам, уже знакомым с CSS для HTML, использовать CSS для естественной настройки и разработки тем для элементов управления JavaFX и объектов графа сцены, который называется Scene Graph .

JavaFX имеет богатый набор расширений CSS для поддержки таких функций, как определение цвета, поиск свойств, а также несколько цветов фона и границ для одного узла. Эти функции добавляют значительные новые возможности разработчикам и дизайнерам и подробно описаны в этом документе.

Насколько это возможно, JavaFX CSS следует стандартам W3C; однако, за некоторыми исключениями, имена свойств JavaFX имеют префикс расширения поставщика "-fx-". Даже если эти свойства кажутся совместимыми со стандартным HTML CSS, обработка JavaFX CSS предполагает, что значения свойств используют расширения JavaFX CSS.

Стили CSS применяются к узлам в графе сцены JavaFX аналогично тому, как стили CSS применяются к элементам в HTML DOM. Стили сначала применяются к родительскому элементу, а затем к его дочерним элементам. Код написан так, что посещаются только те ветви графа сцены, для которых может потребоваться повторное применение CSS. Узлу присваивается стиль после того, как он добавляется в граф сцены. Стили применяются повторно при изменении состояния псевдокласса узла, класса стиля, идентификатора, встроенного стиля или родительского элемента, либо таблицы стилей добавляются или удаляются из сцены. Обратите внимание, что для применения CSS узел должен находиться в графе сцены. Узел не должен отображаться, но его свойство sceneProperty должно иметь ненулевое значение. См. applyCss для более подробной информации.

Во время обычного цикла графа сцены стили CSS применяются до того, как граф сцены выложен и раскрашен. Стили для событий, которые запускают изменение состояния псевдокласса, например MouseEvent.MOUSE_ENTERED, которое запускает состояние «hover», применяются к следующему циклу, следующему за событием.

Селекторы CSS используются для сопоставления стилей с узлами графа сцены. Связь узла с селектором CSS следующая:

• Метод getTypeSelector  класса Node возвращает строку, аналогичную Type Selector. По умолчанию этот метод возвращает простое имя класса. Обратите внимание, что простое имя внутреннего класса или анонимного класса может не использоваться в качестве селектора типа. В таком случае этот метод следует переопределить, чтобы он возвращал значимое значение.
• Каждый узел в графе сцены имеет свойство styleClass. Обратите внимание, что у узла может быть более одного класса стиля. StyleClass узла аналогичен атрибуту class = "...", который может появляться в элементах HTML. См. Раздел Селекторы классов.
• Каждый узел в графе сцены имеет переменную id, строку. Это аналог атрибута id = "...", который может появляться в HTML-элементах. См. Раздел Селекторы ID.

vaFX CSS также поддерживает псевдоклассы, но не реализует полный диапазон псевдоклассов, как указано в Псевдоклассах. Псевдоклассы, поддерживаемые каждым типом узла, приведены в таблицах в этом справочнике. Обратите внимание, что JavaFX в настоящее время не поддерживает структурные псевдоклассы.

Каждый узел соблюдает набор свойств, который зависит от класса JavaFX узла (в отличие от его styleClass). Свойства, присущие каждому классу узла, подробно показаны в таблицах далее в этом документе. Фактически применяемое значение свойства зависит от приоритета источника правила, как описано выше, а также от специфики селектора правила, как описано в CSS 2 [1] . В конечном итоге строка значения свойства преобразуется в значение JavaFX соответствующего типа и затем присваивается переменной экземпляра объекта JavaFX.

Таблицы стилей Scene, Parent и SubScene.

Стили CSS могут поступать из таблиц стилей или встроенных стилей. Таблицы стилей загружаются с URL-адресов, указанных в свойстве getStylesheets объекта Scene. Если граф сцены содержит элемент управления, загружается таблица стилей пользовательского агента по умолчанию. Встроенные стили задаются с помощью API Node setStyle. Встроенные стили аналогичны атрибуту style = "..." элемента HTML. Стили, загруженные из таблиц стилей сцены, имеют приоритет над селекторами из таблицы стилей пользовательского агента. Встроенные стили имеют приоритет над стилями, созданными из других источников. Порядок приоритета селекторов стилей можно изменить, используя "! Important" в объявлении стиля.

Начиная с JavaFX 2.1, у родительского класса есть свойство getStylesheets, позволяющее устанавливать таблицы стилей в контейнере. Это позволяет одной ветви графа сцены иметь отдельный набор стилей. Любой экземпляр Родителя может иметь таблицы стилей. Дочерний элемент будет брать свои стили из собственных встроенных стилей, таблиц стилей всех своих предков и любых таблиц стилей из сцены.

Начиная с JavaFX 8u20, класс Scene имеет свойство getUserAgentStylesheet, позволяющее установить пользовательскую таблицу стилей для сцены. Это позволяет Сцене иметь набор стилей пользовательского агента, отличный от стандартного для платформы. Если для сцены задана таблица стилей агента пользователя, то вместо стилей из таблицы стилей агента пользователя по умолчанию используются стили агента пользователя.

Начиная с JavaFX 8u20, у класса SubScene есть свойство getUserAgentStylesheet , позволяющее установить пользовательскую таблицу стилей в SubScene. Это позволяет SubScene графа сцены иметь набор стилей пользовательского агента, отличных от платформы по умолчанию или от сцены, в которой содержится SubScene. Когда таблица стилей пользовательского агента установлена ​​в SubScene, стили пользовательского агента используются вместо стилей из таблицы стилей пользовательского агента по умолчанию для платформы или любой таблицы стилей пользовательского агента, установленной в Scene.

Важно отметить, что стили из таблицы стилей, добавленной к Scene или Parent, не влияют на SubScene, который является дочерним или потомком Scene или Parent. Если пользовательский агент не был установлен на SubScene, SubScene будет получать стили из таблицы стилей пользовательского агента сцены или таблицы стилей пользовательского агента платформы.

Реализация позволяет дизайнерам стилизовать приложение, используя таблицы стилей для переопределения значений свойств, установленных из кода. Например, вызов rectangle.setFill(Color.YELLOW) можно переопределить встроенным стилем или стилем из авторской таблицы стилей. Это имеет значение для каскада; в частности, когда стиль из таблицы стилей переопределяет значение, установленное из кода? В реализации JavaFX CSS применяется следующий порядок приоритета: стиль из таблицы стилей пользовательского агента имеет более низкий приоритет, чем значение, установленное из кода, который имеет более низкий приоритет, чем таблица стилей сцены или родительской таблицы. Встроенные стили имеют наивысший приоритет. Таблицы стилей из родительского экземпляра считаются более конкретными, чем стили из таблиц стилей сцены.

Соглашения об именах.

Установлены соглашения об именах для получения имен классов стилей CSS из имен классов JavaFX и для получения имен свойств CSS из имен переменных JavaFX. Обратите внимание, что это только соглашение об именах; нет автоматического преобразования имени. В большинстве имен JavaFX используется «верблюжий регистр», то есть имена в смешанном регистре, образованные из составных слов, где начальная буква каждого подслова пишется с большой буквы. Большинство имен CSS в мире HTML пишутся строчными буквами, а составные слова разделяются дефисами. Таким образом, принято использовать имена классов JavaFX и формировать соответствующие им имена классов стилей CSS, разделяя составные слова дефисами и преобразовывая буквы в строчные. Например, класс JavaFX ToggleButton будет иметь класс стиля «toggle-button». Соглашение об отображении имен переменных JavaFX на имена свойств CSS аналогично, с добавлением префикса «-fx-». Например, переменной blendMode будет соответствовать имя свойства CSS "-fx-blend-mode".

Публичный API CSS.

Начиная с JavaFX 8, разработчикам доступен общедоступный API для создания настраиваемых свойств и управления состоянием псевдокласса. За подробностями обратитесь к javafx.css.

Наследование.

CSS также предусматривает наследование определенных свойств по умолчанию или наследование, если значение свойства - «inherit». Если значение наследуется, оно наследуется от вычисленного значения родительского элемента в дереве документа. В JavaFX наследование аналогично, за исключением того, что вместо элементов в дереве документа наследование происходит от родительских узлов в графе сцены.

Следующие свойства наследуются по умолчанию. Любое свойство можно заставить наследовать, присвоив ему значение "inherit".

В иерархии классов JavaFX (например, Rectangle является подклассом Shape, который, в свою очередь, является подклассом Node), свойства CSS предка также являются свойствами CSS потомка. Это означает, что подкласс будет реагировать на тот же набор свойств, что и его классы-предки, и на дополнительные свойства, которые он определяет сам. Итак, Shape поддерживает все свойства Node и еще несколько, а Rectangle поддерживает все свойства Shape и еще несколько. Однако, поскольку использование имени класса JavaFX в качестве селектора типа является точным совпадением, предоставление объявлений стиля для Shape не приведет к тому, что Rectangle будет использовать эти значения (если только значение .css для свойства Rectangle не является "inherit").

Для наследования шрифтов механизм CSS ищет только стили в таблице выше. При поиске шрифта для наследования поиск завершается на любом узле, имеющем свойство Font, установленное пользователем. Шрифт, установленный пользователем, наследуется при условии, что нет автора или встроенного стиля, который применяется конкретно к этому узлу. В этом случае унаследованный шрифт создается из установленного пользователем шрифта и любых частей применимого автора или встроенного стиля.

  @ Правила.

Начиная с JavaFX 8u20, CSS @import также частично поддерживается. Поддерживается только безусловный импорт. Другими словами, квалификатор типа носителя не поддерживается. Кроме того, синтаксический анализатор JavaFX CSS несовместим с тем, где может отображаться @import в таблице стилей (см. Правила At-rules). Предупреждаем пользователей, что это будет исправлено в следующем выпуске. Настоятельно рекомендуется соблюдать стандарт W3C.

Начиная с JavaFX 8, реализация частично поддерживает синтаксис CSS3 для загрузки шрифта из URL-адреса с использованием правила @font‑face:

     @font-face {
        font-family: 'sample';
        font-style: normal;
        font-weight: normal;
        src: local('sample'), url('http://font.samples/resources/sample.ttf';) format('truetype');
    }

Это позволяет использовать общедоступные ресурсы для шрифтов в приложении JavaFX. Например, предположим, что URL-адрес "http://font.samples/web?family=samples" возвращает приведенное выше правило @font‑face. Затем следующий код показывает, как образец шрифта можно использовать в приложении JavaFX.

    import javafx.application.Application;
    import javafx.scene.Scene;
    import javafx.scene.control.Label;
    import javafx.stage.Stage;

    public class HelloFontFace extends Application {
        @Override public void start(Stage primaryStage) {
            Label label = new Label("Hello @FontFace");
            label.setStyle("-fx-font-family: sample; -fx-font-size: 80;");
            Scene scene = new Scene(label);
            scene.getStylesheets().add("http://font.samples/web?family=samples");
            primaryStage.setTitle("Hello @FontFace");
            primaryStage.setScene(scene);
            primaryStage.show();
        }

        public static void main(String[] args) { launch(args); }
    }
    

Или URL-адрес можно импортировать в таблицу стилей с помощью правила @import.

Хотя синтаксический анализатор проанализирует синтаксис, все дескрипторы @font-face игнорируются, за исключением дескриптора src. Ожидается, что дескриптор src будет <url>. Подсказка format игнорируется.

Примеры.

Рассмотрим следующее простое приложение JavaFX:

Scene scene = new Scene(new Group());
scene.getStylesheets().add(“test.css”);
Rectangle rect = new Rectangle(100,100);
rect.setLayoutX(50);
rect.setLayoutY(50);
rect.getStyleClass().add("my-rect");
((Group)scene.getRoot()).getChildren().add(rect);

Без стилей будет отображаться простой черный прямоугольник. Если test.css содержит следующее:

.my-rect { -fx-fill: red; }

прямоугольник будет красным вместо черного:

Если test.css содержит следующее:

.my-rect {
    -fx-fill: yellow;
    -fx-stroke: green;
    -fx-stroke-width: 5;
    -fx-stroke-dash-array: 12 2 4 2;
    -fx-stroke-dash-offset: 6;
    -fx-stroke-line-cap: butt;
}

Результатом будет желтый прямоугольник с красивой пунктирной зеленой рамкой:

Что такое предупреждения парсера.

Когда синтаксический анализатор JavaFX CSS обнаруживает синтаксическую ошибку, выдается предупреждающее сообщение, которое передает столько информации, сколько доступно, чтобы помочь устранить ошибку. Например:

WARNING: javafx.css.CssParser declaration Expected '<percent>' while parsing '-fx-background-color' at ?[1,49]

The cryptic '?[1,49]' pertains to the location of the error. The format of the location string is

<url>[line, position]

Если ошибка обнаружена при разборе файла, будет указан URL файла. Если ошибка вызвана встроенным стилем (как в примере выше), URL-адрес отображается в виде вопросительного знака. Строка и позиция задают смещение в файле или строке, где начинается токен. Обратите внимание, что линия и положение могут быть неточными в версиях до JavaFX 2.2.

Приложения, которым необходимо обнаруживать ошибки из синтаксического анализатора, могут добавить слушателя к свойству ошибок javafx.css.CssParser.

Ограничения.

1. Хотя синтаксический анализатор CSS JavaFX будет анализировать действительный синтаксис CSS, он не является полностью совместимым синтаксическим анализатором CSS. Не следует ожидать, что парсер будет обрабатывать синтаксис, не указанный в этом документе.
2. За исключением @font‑face и @import, операторы @-<ключевое слово> игнорируются.
3. <список-медиа-запросов> оператора @import не анализируется.
4. Структурные псевдоклассы не поддерживаются.
5. Динамические псевдоклассы ":active" и ":focus" не поддерживаются. Однако Nodes действительно поддерживают псевдоклассы ":pressed" и ":focused", которые аналогичны.
6. Псевдоклассы ":link" и ":visited" в целом не поддерживаются. Однако объекты Hyperlink могут быть стилизованы, и они поддерживают псевдокласс ":visited".
7. JavaFX CSS не поддерживает разделенные запятыми серии имен семейств шрифтов в свойстве -fx-font-family. Необязательный параметр высоты строки при указании шрифтов не поддерживается. Для свойства font-variant нет эквивалента.
8. JavaFX CSS использует цветовую модель HSB вместо цветовой модели HSL.
9. Если свойство узла инициализируется путем вызова метода set свойства, реализация CSS увидит это как значение, заданное пользователем, и значение не будет перезаписано стилем из таблицы стилей пользовательского агента.
10. При синтаксическом анализе URI анализатор не обрабатывает escape-последовательности URI и кодовые точки \<hex-digit>[1,6].

Типы.

inherit

У каждого свойства есть тип, который определяет, какое у него значение и синтаксис для определения этих значений. Кроме того, каждое свойство может иметь указанное значение 'inherit', что означает, что для данного узла свойство принимает то же вычисленное значение, что и свойство для родительского узла. Значение 'inherit' можно использовать для свойств, которые обычно не наследуются.

Если для корневого элемента задано значение 'inherit', то свойству присваивается его начальное значение.

<boolean>

Логические значения могут иметь строковое значение "true" или "false", значения нечувствительны к регистру, так как все CSS нечувствительны к регистру.

<string>

Строки могут быть записаны как в двойных, так и в одинарных кавычках. Двойные кавычки не могут встречаться внутри двойных кавычек, если они не экранированы (например, как '\"' или как '\22'). Аналогично для одинарных кавычек (например, "\'" или "\27").

"this is a 'string'"
"this is a \"string\""
'this is a "string"'
'this is a \'string\''

Строка не может непосредственно содержать новую строку. Чтобы включить новую строку в строку, используйте escape-символ, представляющий символ перевода строки в ISO-10646 (U+000A), например "\A" или "\00000a". Этот символ представляет общее понятие "новая строка" в CSS. Пример см. в свойстве "content".

<number> и <integer>

Некоторые типы значений могут иметь целочисленные значения (обозначаемые <integer>) или действительные числовые значения (обозначаемые <number>). Действительные числа и целые числа задаются только в десятичной системе счисления.  <integer> состоит из одной или нескольких цифр от "0" до "9". <number> может быть либо <integer>, либо нулем или несколькими цифрами, за которыми следует точка (.), за которой следует одна или несколько цифр. Как целые, так и действительные числа могут предшествовать знаку "-" или"+". -0 эквивалентно 0 и не является отрицательным числом.

[+|-]? [[0-9]+|[0-9]*"."[0-9]+]

Обратите внимание, что многие свойства, допускающие целочисленное или вещественное число в качестве значения, фактически ограничивают его некоторым диапазоном, часто неотрицательным значением.

<size>

Размер-это число <number> с единицами измерения длина <length> или процент <percentage>. Если единица измерения не указана, то предполагается "px".

<length>

<number>[ px | mm | cm | in | pt | pc | em | ex ]?

Между числом и единицами измерения не допускается пробелов, если они предусмотрены. Одни единицы относительны, другие абсолютны.

Относительные

• px: пикселей относительно устройства просмотра
• em: 'font-size' соответствующего шрифта
• ex: 'x-height' соответствующего шрифта

Абсолютные

• in: дюймы - 1 дюйм равен 2,54 сантиметру.
• cm: сантиметры
• mm: миллиметры
• pt: пойнты -  используемые CSS 2.1, равны 1/72 дюйма.
• pc: пик - 1 пик равен 12 пойнтам.

<percentage>

Это процент от некоторой длины, обычно к ширине или высоте узла.

<number>[ % ]

<angle>

Угол - это число <number> с одной из следующих единиц.

<number>[ deg | rad | grad | turn ]

• deg: угол в градусах - все остальные угловые единицы конвертируются в градусы.
• rad: угол в радианах
• grad: угол в градусах
• turn: угол в поворотах

<duration>

Длительность - это число <number> с единицей измерения в секундах или миллисекундах, либо неопределенное значение.

[<number>[ s | ms ]] | indefinite

• s: продолжительность в секундах
• ms: продолжительность в миллисекундах. Одна секунда - это 1000 миллисекунд.
• indefinite: См. Duration.INDEFINITE

См. Также единицы времени W3C.

<point>

Точка - это координата {x, y}.

[ [ <length> <length> ] | [ <percentage> | <percentage> ] ]

<color-stop>

Остановки соответствуют синтаксису W3C color-stop.

[ <color> [ <percentage> | <length>]? ]

В серии <color-stop> все значения расстояния остановки должны быть <percentage> или <length>. Кроме того, если используются значения <length>, то необходимо указать значение расстояния для первой и последней остановки в ряду. Это ограничение может быть снято в будущем выпуске.

"red, white 70%, blue" допустимо, так как расстояние для красного и синего цветов предполагается равным 0% и 100% соответственно.

"red 10, white, blue 90" допустимо. Поскольку расстояние для красного и синего равно 10 и 90, соответственно, расстояние для белого может быть вычислено.

"red, white 70, blue" не допустимо, поскольку единицы измерения расстояния не согласуются.

"red, white, blue" допустимо. Стопы распределяются равномерно от 0% до 100%.

<uri>

url ( [\"\']? <address> [\"\']? )

<address> - это иерархический URI в форме [scheme:][//authority][path] (see [2]). Например:

url(http://example.com/images/Duke.png)
url(/com/example/javafx/app/images/Duke.png)

Если <address> не имеет компонента [scheme:], то <address> считается только компонентом [path]. Начальный символ '/' указывает, что [path] относится к корню пути к классам. Если стиль отображается в таблице стилей и не имеет ведущего символа '/', путь указывается относительно базового URI таблицы стилей. Если стиль отображается во встроенном стиле, путь указывается относительно корня пути к классам (независимо от того, есть ли в начале '/' или нет).

Обратите внимание, что для встроенных стилей ведущие точечные сегменты (например, " .. "или".") разрешаются, поскольку путь всегда привязан к корню пути к классу.

Например, приведенный ниже фрагмент кода создает сцену, заполненную вымышленным изображением Duke.png, расположенным в каталоге image:

    @Override 
     public void start(Stage stage) {
        StackPane root = new StackPane();
        root.setStyle("-fx-background-image: url(images/Duke.png);");
        Scene scene = new Scene(root, 300, 250);
        stage.setScene(scene);
        stage.show();
    }

Один и тот же стиль будет работать одинаково хорошо и из таблицы стилей.

<effect>

JavaFX CSS в настоящее время поддерживает эффекты DropShadow и InnerShadow от платформы JavaFX. Дополнительные сведения о семантике различных параметров эффекта см. в документации по классу в javafx.scene.effect.

Drop Shadow

Эффект высокого уровня, который отображает тень данного содержимого за содержимым.

dropshadow( <blur-type> , <color> , <number> , <number> , <number> , <number> )

<blur-type> = [ gaussian | one-pass-box | three-pass-box | two-pass-box ]
<color> Цвет тени.
<number> Радиус ядра размытия тени. В диапазоне [0,0 ... 127,0] типовое значение 10.
<number> Распространение тени. Разброс - это часть радиуса, в которой вклад исходного материала будет составлять 100%. Оставшаяся часть радиуса будет иметь вклад, контролируемый ядром размытия. Разброс 0,0 приведет к тому, что распределение тени полностью будет определяться алгоритмом размытия. Разброс 1,0 приведет к устойчивому увеличению прозрачности исходного материала до предела радиуса с очень резким ограничением прозрачности по радиусу. Значения должны быть в диапазоне [0,0 ... 1,0].
<number> Смещение тени по оси x в пикселях.
<number> Смещение тени по оси y в пикселях.

Inner Shadow

Эффект высокого уровня, который отображает тень внутри краев данного содержимого.

innershadow( <blur-type> , <color> , <number> , <number> , <number> , <number> )

<blur-type> = [ gaussian | one-pass-box | three-pass-box | two-pass-box ]
<color> Цвет тени.
<number> Радиус ядра размытия тени. В диапазоне [0,0 ... 127,0] типовое значение 10.
<number> Удушение тени. Дроссель - это часть радиуса, где вклад исходного материала будет составлять 100%. Оставшаяся часть радиуса будет иметь вклад, контролируемый ядром размытия. Дросселирование 0,0 приведет к тому, что распределение тени полностью будет определяться алгоритмом размытия. Дросселирование 1.0 приведет к сплошному росту тени внутрь от краев до предела радиуса с очень резким ограничением прозрачности внутри радиуса. Значения должны быть в диапазоне [0,0 ... 1,0].
<number> Смещение тени по оси x в пикселях.
<number> Смещение тени по оси y в пикселях.

<font>

JavaFX CSS поддерживает возможность указывать шрифты с использованием отдельных свойств семейства, размера, стиля и веса, а также возможность указывать шрифт с помощью одного сокращенного свойства. Есть четыре типа значений, связанных со шрифтами, плюс сокращенное свойство, которое охватывает все четыре свойства. Типы, связанные со шрифтом, следующие.

<font-family> Строковое имя семейства шрифтов. Можно использовать фактическое имя семейства шрифтов, доступное в системе, или можно использовать одно из следующих общих имен семейств:

• 'serif' (например, Times)
• 'sans-serif' (например, Helvetica)
• 'cursive' (например., Zapf-Chancery)
• 'fantasy' (например, Western)
• 'monospace' (например, Courier)

<font-size> Размер шрифта с использованием синтаксиса <size>.

<font-style> Стиль шрифта с использованием следующего синтаксиса:
[ normal | italic | oblique ]

<font-weight> Толщина шрифта с использованием следующего синтаксиса:
[ normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ]

<font> Это сокращенное свойство шрифта может использоваться вместо вышеуказанных свойств. Он использует следующий синтаксис:
[[ <font-style> || <font-weight> ]? <font-size> <font-family> ]

Свойства шрифта

Большинство классов, использующих текст, будут поддерживать следующие свойства шрифта. В некоторых случаях будет поддерживаться аналогичный набор свойств, но с другим префиксом вместо "-fx-font".

<paint>

Значения краски могут быть либо сплошным цветом, указанным в одном из цветовых синтаксисов, либо линейным или радиальным градиентом, либо шаблоном изображения.

<color> | <linear-gradient> | <radial-gradient> | <image-pattern> <repeating-image-pattern>

Линейные градиенты <linear-gradient>

linear-gradient( [ [from <point> to <point>] | [ to <side-or-corner>], ]? [ [ repeat | reflect ], ]? <color-stop>[, <color-stop>]+)

где <side-or-corner> = [left | right] || [top | bottom]

Линейный градиент создает градиент, проходящий через все стоп-цвета вдоль линии между "from" <point> и "to" <point>. Если точки указаны в процентах, то они относятся к размеру заполняемой области. Размеры в процентах и ​​длине нельзя смешивать в одной функции градиента.

Если не заданы ни повтор, ни отражение, то CycleMethod по умолчанию "NO_CYCLE".
Если не заданы ни [from <point> to <point>], и [ to <side-or-corner> ] , то по умолчанию используется направление градиента «вниз» 'to bottom'.
Остановки соответствуют W3C синтаксису color-stop и соответственно нормализованы.

В этом примере будет создан градиент от верхнего левого угла к нижнему правому углу залитой области с красным в верхнем левом углу и черным в правом нижнем углу.

linear-gradient(to bottom right, red, black)

Это эквивалентно:

linear-gradient(from 0% 0% to 100% 100%, red 0%, black 100%)

Этот более сложный пример создаст полосу высотой 50 пикселей вверху с трехцветным градиентом с белым внизу для остальной части залитой области.

linear-gradient(from 0px 0px to 0px 50px, gray, darkgray 50%, dimgray 99%, white)

Следующий синтаксис для линейного градиента не соответствует грамматике CSS и не рекомендуется в JavaFX 2.0. Парсер JavaFX 2.0 CSS поддерживает синтаксис, но эта поддержка может быть удалена в более поздних версиях.

linear (<size>, <size>) to (<size>, <size>) stops [ (<number>,<color>) ]+ [ repeat | reflect ]?

Радиальные градиенты <radial-gradient>

radial-gradient([ focus-angle <angle>, ]? [ focus-distance <percentage>, ]? [ center <point>, ]? radius [ <length> | <percentage> ] [ [ repeat | reflect ], ]? <color-stop>[, <color-stop>]+)

Радиальный градиент создает градиент, проходящий через все стоп-цвета, расходящиеся наружу от центральной точки к радиусу. Если центральная точка не указана, по умолчанию используется центр (0,0). Значения в процентах относятся к размеру заполняемой области. Размеры в процентах и ​​длине нельзя смешивать в одной функции градиента.

Если не заданы ни повтор, ни отражение, то CycleMethod по умолчанию "NO_CYCLE".
Остановки соответствуют синтаксису W3C color-stop и соответственно нормализованы.

Ниже приведены примеры использования радиального градиента:

radial-gradient(radius 100%, red, darkgray, black)

radial-gradient(focus-angle 45deg, focus-distance 20%, center 25% 25%, radius 50%, reflect, gray, darkgray 75%, dimgray)

Следующий синтаксис для радиального градиента не соответствует грамматике CSS и не рекомендуется в JavaFX 2.0. Парсер JavaFX 2.0 CSS поддерживает синтаксис, но эта поддержка может быть удалена в более поздних версиях.

radial [focus-angle <number> | <number> ] ]? [ focus-distance <size> ]? [ center <size,size> ]? <size> stops [ ( <number>, <color> ) ]+ [ repeat | reflect ]?

Окраска изображения <image-pattern>

image-pattern(<string>, [<size>, <size>, <size>, <size>[, <boolean>]?]?)

Параметры в следующем порядке:

<string> URL-адрес изображения.
<size> Исходная точка x прямоугольника привязки.
<size> Исходная точка y прямоугольника привязки.
<size> Ширина прямоугольника привязки.
<size> Высота прямоугольника привязки.
<boolean> Пропорциональный флаг, который указывает, являются ли начальные и конечные местоположения пропорциональными или абсолютными.

Полное описание параметров см. В документации ImagePattern javadoc.

Ниже приведены примеры использования шаблона изображения:

image-pattern("images/Duke.png")

image-pattern("images/Duke.png", 20%, 20%, 80%, 80%)

image-pattern("images/Duke.png", 20%, 20%, 80%, 80%, true)

image-pattern("images/Duke.png", 20, 20, 80, 80, false)

В связи с этим существует функция шаблона повторяющегося изображения repeating-image-pattern, которая является сокращением для создания заливок на основе мозаичного изображения. Это эквивалентно

image-pattern("images/Duke.png", 0, 0, imageWidth, imageHeight, false)

repeating-image-pattern(<string>)

Единственный параметр - это uri изображения. Ниже приводится пример использования шаблона изображения:

repeating-image-pattern("com/mycompany/myapp/images/Duke.png")

<color>

<named-color> | <looked-up-color> | <rgb-color> | <hsb-color> | <color-function>

Именованные цвета <named-color>

CSS поддерживает набор именованных постоянных цветов. Именованные цвета могут быть указаны с их именем без кавычек, например:

.button {
    -fx-background-color: red;
}

Именованные цвета, доступные в CSS:

Искомые цвета <looked-up-color>

С помощью искомых цветов вы можете ссылаться на любое другое свойство цвета, установленное для текущего узла или любого из его родителей. Это очень мощная функция, так как она позволяет указать общую палитру цветов для сцены, а затем использовать ее в приложении. Если вы хотите изменить один из этих цветов палитры, вы можете сделать это на любом уровне дерева сцены, и это повлияет на этот узел и все его дочерние элементы. Искомые цвета не просматриваются до тех пор, пока они не будут применены, поэтому они живут и реагируют на любые изменения стиля, которые могут произойти, такие как замена цвета палитры во время выполнения на свойство "style" на узле.

В следующем примере для всего фона всех кнопок используется искомый цвет «abc».

.root { abc: #f00 }
.button { -fx-background-color: abc }

Цвета RGB <rgb-color>

Цветовая модель RGB используется в числовых цветовых спецификациях. Он имеет несколько различных поддерживаемых форм.

#<digit><digit><digit>
| #<digit><digit><digit><digit><digit><digit>
| rgb( <integer> , <integer> , <integer> )
| rgb( <integer> %, <integer>% , <integer>% )
| rgba( <integer> , <integer> , <integer> , <number> )
| rgba( <integer>% , <integer>% , <integer> %, <number> )

Все эти примеры указывают один и тот же цвет для текстовой заливки метки:

.label { -fx-text-fill: #f00 } /* #rgb */
.label { -fx-text-fill: #ff0000 } /* #rrggbb */
.label { -fx-text-fill: rgb(255,0,0) }
.label { -fx-text-fill: rgb(100%, 0%, 0%) }
.label { -fx-text-fill: rgba(255,0,0,1) }

RGB Hex: Формат значения RGB в шестнадцатеричной системе счисления представляет собой «#», за которым сразу следуют три или шесть шестнадцатеричных символов. Трехзначная нотация RGB (#rgb) преобразуется в шестизначную форму (#rrggbb) путем копирования цифр, а не добавления нулей. Например, # fb0 заменяется на # ffbb00. Это гарантирует, что белый цвет (#ffffff) можно указать с помощью краткой записи (#fff), и устраняет любые зависимости от глубины цвета дисплея.

Десятичное число или процент RGB: Формат значения RGB в функциональной записи - «rgb» (за которым следует список из трех числовых значений, разделенных запятыми (либо три десятичных целых числа, либо три процентных значения), за которым следует «)». Целочисленное значение 255 соответствует 100%, а F или FF в шестнадцатеричном представлении: rgb (255,255,255) = rgb (100%, 100%, 100%) = #FFF. Допускаются символы пробела вокруг числовых значений.

RGB + Alpha: Это расширение цветовой модели RGB, которое включает значение «альфа», определяющее непрозрачность цвета. Это достигается с помощью функционального синтаксиса формы rgba (...), который принимает четвертый параметр, который является альфа-значением. Значение альфа должно быть числом в диапазоне от 0,0 (представляет собой полностью прозрачный) и 1,0 (полностью непрозрачный). Как и в случае с функцией rgb (), значения красного, зеленого и синего цветов могут быть десятичными целыми числами или процентами. В следующих примерах указан один и тот же цвет:

.label { -fx-text-fill: rgb(255,0,0) } /* integer range 0 — 255*/
.label { -fx-text-fill: rgba(255,0,0,1) /* the same, with explicit opacity of 1 */
.label { -fx-text-fill: rgb(100%,0%,0%) } /* float range 0.0% — 100.0% */
.label { -fx-text-fill: rgba(100%,0%,0%,1) } /* the same, with explicit opacity of 1 */

Цвета HSB <hsb-color>

Цвета можно указать с помощью цветовой модели HSB (иногда называемой HSV) следующим образом:

hsb( <number> , <number>% , <number>% ) | hsba( <number> , <number>% , <number>% , <number> )

Первое число - оттенок, число в диапазоне от 0 до 360 градусов. Второе число - насыщенность, процентное значение в диапазоне от 0% до 100%. Третье число - это яркость, также в процентах от 0% до 100%. Форма hsba (...) принимает четвертый параметр в конце, который представляет собой альфа-значение в диапазоне от 0,0 до 1,0, определяя, соответственно, полностью прозрачным и полностью непрозрачным.

Цветовые функции <color-function>

JavaFX поддерживает некоторые функции вычисления цвета. Они вычисляют новые цвета из входных цветов во время применения цветового стиля. Это позволяет задавать цветовую тему с использованием одного базового цвета и рассчитывать варианты цветов на основе этого базового цвета. Есть две цветовые функции: derive () и ladder ().

<derive> | <ladder>

Вывести <derive>

derive( <color> , <number>% )

Функция извлечения принимает цвет и вычисляет более яркую или более темную версию этого цвета. Второй параметр - это смещение яркости, показывающее, насколько ярче или темнее должен быть полученный цвет. Положительные проценты указывают на более яркие цвета, а отрицательные проценты указывают на более темные цвета. Значение -100% означает полностью черный цвет, 0% означает отсутствие изменений яркости, а 100% означает полностью белый цвет.

Ladder<ladder>

ladder(<color> , <color-stop> [, <color-stop>]+)

Лестничная функция интерполирует цвета. Эффект такой, как если бы градиент был создан с использованием предоставленных остановок, а затем яркость предоставленного <color> используется для индексации значения цвета в этом градиенте. При яркости 0% используется цвет в конце градиента 0,0; при 100% яркости используется цвет в конце градиента 1.0; а при яркости 50% используется цвет 0,5, средняя точка градиента. Обратите внимание, что на самом деле градиент не отображается. Это просто функция интерполяции, которая дает один цвет.

Остановки соответствуют синтаксису W3C color-stop и соответственно нормализованы.

Например, вы можете использовать следующее, если хотите, чтобы цвет текста был черным или белым в зависимости от яркости фона.

background: white;
-fx-text-fill: ladder(background, white 49%, black 50%);

Результирующее значение -fx-text-fill будет черным, потому что фон (белый) имеет яркость 100%, а цвет градиента 1.0 на градиенте черный. Если бы мы изменили цвет фона на черный или темно-серый, яркость была бы меньше 50%, что дает значение -fx-text-fill белого цвета.

Следующий синтаксис для лестничной диаграммы не соответствует грамматике CSS и не рекомендуется в JavaFX 2.0. Парсер JavaFX 2.0 CSS поддерживает синтаксис, но эта поддержка может быть удалена в более поздних версиях.

ladder(<color>) stops [ ( <number> , <color> ) ]+

Stage

Group

Style class: .root.popup

PopupWindow не имеет никаких свойств, которые могут быть стилизованы с помощью CSS, но PopupWindow имеет собственную сцену. По умолчанию корень сцены получает класс стиля .root. Если Scene является корневой сценой PopupWindow, тогда также добавляется класс стиля .popup. Это позволяет корневой сцене PopupWindow иметь разные стили с помощью правила CSS .root.popup { /* declarations */ }

Nodes

Group

Класс стиля: по умолчанию пустой (empty)

Node

Класс стиля: по умолчанию пустой (empty)

Псевдоклассы

Parent

Класс стиля: пустой по умолчанию (empty)

Scene

Класс стиля: не применимо

Объект Scene не имеет настраиваемых свойств CSS и не имеет псевдоклассов. Однако корневому узлу сцены присваивается класс стиля «root» (в дополнение к классам стилей, уже назначенным узлу). Это полезно, потому что корневой узел сцены является корневым контейнером для всех активных узлов графа сцены. Таким образом, он может служить контейнером для свойств, которые наследуются или ищутся.

ImageView

Класс стиля: просмотр изображения

AnchorPane

Класс стиля: по умолчанию пустой (empty)

BorderPane

Класс стиля: по умолчанию пустой (empty)

DialogPane

Класс стиля: диалоговая панель(dialog-pane)

Подструктура

• панель заголовка — BoderPane
  • графический контейнер — StackPane
• содержание— Label
• панель кнопок — ButtonBar

FlowPane

Класс стиля: по умолчанию пустой(empty)

GridPane

Класс стиля: по умолчанию пустой (empty)

HBox

Класс стиля: по умолчанию пустой (empty)

Pane

Класс стиля: по умолчанию пустой (empty)

Region

Класс стиля: по умолчанию пустой (empty)

Region - расширяет Node (расширяет от Parent) с фоном и границами, которые можно стилизовать с помощью CSS. Region обычно представляет собой прямоугольник с закругленными углами, хотя он может быть изменен с помощью CSS, чтобы иметь произвольную форму. Region могут содержать другие объекты Region (субрегионы) или могут содержать субэлементы управления. Все регионы имеют одинаковый набор свойств CSS, как описано ниже.

Каждый объект Region состоит из нескольких слоев, раскрашенных снизу вверх в следующем порядке:

1. фоновые заливки
2. фоновые изображения
3. штрихованные рамки
4. рамки - изображения
5. содержание

Механизмы фона и границ созданы по образцу модуля CSS 3 эскизов фонов и границ. См. [4] для подробного описания.

Фоновые заливки задаются с помощью свойств -fx-background-color, -fx-background-radius и -fx-background-insert. Свойство -fx-background-color представляет собой набор из одного или нескольких значений <paint>, разделенных запятыми. Количество значений в серии определяет количество закрашенных фоновых прямоугольников. Фоновые прямоугольники окрашиваются в порядке, указанном с помощью заданного значения <paint>. Каждый прямоугольник фона может иметь разные радиусы и вставки. Свойства -fx-background-radius и -fx-background-insert представляют собой серию значений, разделенных запятыми (или наборов значений). Значения радиуса и вставок, используемые для определенного фона, находятся в соответствующей позиции в сериях -fx-background-radius и -fx-background-insert. Например, предположим, что для свойства -fx-background-color задана серия из трех значений. Также следует указать серию из трех значений для свойств -fx-background-radius и -fx-background-insert. Первый фон будет нарисован с использованием первого значения радиуса и первого значения вставок, второй фон будет окрашен вторым значением радиуса и вторым значением вставок и так далее.

Также обратите внимание, что такие свойства, как -fx-background-radius и -fx-background-insert, могут содержать серию значений или наборы из четырех значений. Набор значений разделяется пробелом, тогда как значения или наборы значений в серии разделяются запятыми. Для -fx-background-radius одно значение указывает, что значение должно использоваться для радиуса всех четырех углов фонового прямоугольника. Набор из четырех значений указывает, что разные значения радиуса должны использоваться для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов в указанном порядке. Точно так же свойство -fx-background-left также может содержать серию значений или наборы значений. Набор из четырех значений для -fx-background-insets указывает, что разные вставки должны использоваться для верхнего, правого, нижнего и левого краев прямоугольника в указанном порядке.

Фоновые изображения указываются с помощью свойств -fx-background-image, -fx-background-repeat, -fx-background-position и -fx-background-size. Количество изображений в серии значений -fx-background-image определяет количество нарисованных фоновых изображений. Каждое из свойств -fx-background-repeat, -fx-background-position и -fx-background-size может содержать ряд значений. Для каждого элемента в серии -fx-background-image соответствующие элементы в свойствах -fx-background-repeat, -fx-background-position и -fx-background-size применяются к этому фоновому изображению.

Обведенные границы задаются с помощью свойств -fx-border-color, -fx-border-style, -fx-border-width, -fx-border-radius и -fx-border-insets. Каждое свойство содержит серию элементов. Максимальное количество элементов в свойстве -fx- border-color или -fx-border-style определяет количество окрашиваемых слоев границ. Каждая граница в серии окрашивается с использованием информации из соответствующего элемента серии в -fx Свойства -border-color, -fx-border-style, -fx-border-width, -fx-border-radius и -fx-border-insets. Если нет -fx-border-color, по умолчанию используется черный цвет. если нет -fx-border-style, стиль по умолчанию - solid.

Границы изображения задаются с помощью свойств -fx-border-image-source, -fx-border-image-repeat, -fx-border-image-slice, -fx-border-image-width и -fx-border-image-insets. Каждое свойство содержит серию элементов. Количество элементов в свойстве -fx-border-image-source определяет количество нарисованных изображений. Каждое изображение в серии окрашивается с использованием информации из соответствующих элементов серии -fx-border-image-repeat, -fx-border-image-slice, -fx-border-image-width и -fx-border-image. -вставляет свойства.

Содержимое региона представляет собой последовательность узлов, как и любой другой контейнер. Содержимое устанавливается программно и не может быть установлено через CSS.

StackPane

Style class: empty by default

TilePane

Style class: empty by default

VBox

Style class: empty by default

MediaView

Style class: media-view

Shape

Style class: empty by default

Arc

Style class: empty by default

The Arc node has all the properties of Shape and Node.

Circle

Style class: empty by default

The Circle node has all the properties of Shape and Node.

CubicCurve

Style class: empty by default

The CubicCurve node has all the properties of Shape and Node.

Ellipse

Style class: empty by default

The Ellipse node has all the properties of Shape and Node.

Line

Style class: empty by default

Path

Style class: empty by default

Polygon

Style class: empty by default

The Polygon node has all the properties of Shape and Node.

QuadCurve

Style class: empty by default

The QuadCurve node has all the properties of Shape and Node.

Rectangle

Style class: empty by default

SVGPath

Style class: empty by default

The SVGPath node has all the properties of Shape and Node.

Text

Style class: empty by default

WebView

Style class: web-view

Since JavaFX 2.0, the default skins for all controls support styling from CSS. This is accomplished by building the skins from layout objects called Regions. Most of the style properties for a control are provided by the Region objects that comprise the control's skin. Each Region object of the skin's substructure has its own style‑class so that it can be styled specifically. The control itself will sometimes provide CSS properties in addition to those provided by its Regions. Finally, controls may also define pseudo‑classes such as "vertical" and "horizontal" in addition to those defined by Node.

With the following exceptions, controls are focus traversable. This means that Control sets the initial value of the focusTraversable property true; whereas in Node, the initial value of the focusTraversable property is false. The following controls are not focus traversable by default: Accordion, Cell, Label, MenuBar, ProgressBar, ProgressIndicator, ScrollBar, ScrollPane, Separator, SplitPane, ToolBar.

Accordion

Style class: accordion

The Accordion control has all the properties and pseudo‑classes of Control

Substructure

• first-titled-pane — the first TitledPane

Button

Style class: button

The Button control has all the properties of ButtonBase

Pseudo-classes

ButtonBase

The ButtonBase control has all the properties of Labeled

Pseudo-classes

Cell

Style class: cell

Pseudo-classes

Substructure

• text — a Labeled

CheckBox

Style class: check-box

The CheckBox control has all the properties of ButtonBase

Pseudo-classes

Substructure

• box — a StackPane
  • mark — a StackPane

CheckMenuItem

Pseudo-classes

ChoiceBox

Style class: choice-box

The ChoiceBox control has all the properties and pseudo‑classes of Control

Substructure

• open-button — Region
  • arrow — Region

ColorPicker

Style class: color-picker

The ColorPicker control has all the properties and pseudo‑classes of ComboBoxBase

Substructure

• color display node — Label
• arrow-button — StackPane
  • arrow — StackPane

ComboBox

Style class: combo-box

The ComboBox control has all the properties and pseudo‑classes of ComboBoxBase

Substructure

• list-cell — a ListCell instance used to show the selection in the button area of a non-editable ComboBox
• text-input — a TextField instance used to show the selection and allow input in the button area of an editable ComboBox
• combo-box-popup — a PopupControl that is displayed when the button is pressed
  • list-view — a ListView
    • list-cell — a ListCell

ComboBoxBase

Style class: combo-box-base

The ComboBoxBase control has all the properties of Control

Substructure

• arrow-button — a StackPane
  • arrow — a StackPane

ContextMenu

Style class: context-menu

The ContextMenu class has all the properties of PopupControl.

The selector for a ContextMenu may be made more specific by using the selector for the control from which the ContextMenu was shown. For example,

.choice-box > .context-menu { ... }

Substructure

• context-menu — a Region
  • scroll-arrow — a StackPane
    • menu-up-arrow — a StackPane
  • scroll-arrow — a StackPane
    • menu-down-arrow — a StackPane
  • * — a VBox
    • menu-item — a Region
      • label — a Label
      • left-container — a StackPane (for radio buttons and check boxes)
      • right-container — a StackPane (for pull-right menus)
        • arrow — a Region
      • graphic-container — a StackPane (for MenuItem graphic)

Control

The Control class has all the properties of Region

DatePicker

Style class: date-picker

The DatePicker control has all the properties and pseudo‑classes of ComboBoxBase

Substructure

• date-picker-display-node — TextField

HTMLEditor

Style class: html-editor

The Hyperlink control has all the properties of Control.

Substructure

• grid — GridPane (contains WebView)
  • top-toolbar — ToolBar
    • html-editor-cut — ToggleButton
    • html-editor-copy — ToggleButton
    • html-editor-paste — ToggleButton
    • html-editor-align-left — ToggleButton
    • html-editor-align-right — ToggleButton
    • html-editor-align-center — ToggleButton
    • html-editor-align-justify — ToggleButton
    • html-editor-outdent — ToggleButton
    • html-editor-indent — ToggleButton
    • html-editor-bullets — ToggleButton
    • html-editor-numbers — ToggleButton
  • web-view — WebView
  • bottom-toolbar — ToolBar
    • format-menu-button — ComboBox
    • font-family-menu-button — ComboBox
    • font-size-menu-button — ComboBox
    • html-editor-bold — ToggleButton
    • html-editor-italic — ToggleButton
    • html-editor-underline — ToggleButton
    • html-editor-strike — ToggleButton
    • html-editor-hr — ToggleButton
    • html-editor-foreground — ColorPicker
    • html-editor-background — ColorPicker

Hyperlink

Style class: hyperlink

The Hyperlink control has all the properties of ButtonBase.

Pseudo-classes

Substructure

• label — Label

IndexedCell

Style class: indexed-cell

The IndexedCell control has all the properties of Cell.

Pseudo-classes

Label

Style class: label

Label has all the properties and pseudo‑class state of Labeled

Labeled

ListCell

Style class: list-cell

The ListCell control has all the settable properties and pseudo‑classes of IndexedCell.

ListView

Style class: list-view

Pseudo-classes

Substructure

• .list-view — the ListView<T>
  • .virtual-flow — VirtualFlow
    • .clipped-container — Region
      • .sheet — Group
        • .cell.indexed-cell.list-cell — ListCell<T>
      • .scroll-bar — ScrollBar

Menu

Style class: menu

Pseudo-classes

MenuBar

Style class: menu-bar

MenuBar has all the pseudo‑class states of Control

Substructure

• menu

MenuButton

Style class: menu-button

The MenuButton control has all the properties of ButtonBase

Pseudo-classes

MenuItem

Style class: menu-item

Pagination

Style class: pagination

Pagination has all the pseudo‑class states of Control

Substructure

• page — StackPane
• pagination-control — StackPane
  • leftArrowButton — Button
    • leftArrow — StackPane
  • rightArrowButton — Button
    • rightArrow — StackPane
  • bullet-button — ToggleButton
  • number-button — ToogleButton
  • page-information — Label

PasswordField

Style class: password-field

The PasswordField control has all the properties of TextField

PopupControl

PopupControl is also a PopupWindow and as such, its root node has the style-class .root.popup

ProgressBar

Style class: progress-bar

Pseudo-classes

Substructure

• track — StackPane
  • bar — Region

ProgressIndicator

Style class: progress-indicator

Pseudo-classes

Substructure

• indicator — StackPane
• progress — StackPane
• percentage — Text
• tick — StackPane

RadioButton

Style class: radio-button

The RadioButton control has all the properties of ToggleButton

Substructure

• radio — Region
  • dot — Region
• label — Label

RadioMenuItem

Pseudo-classes

ScrollBar

Style class: scroll-bar

Pseudo-classes

Substructure

• decrement-button — StackPane
  • decrement-arrow — StackPane
• track — StackPane
• thumb — StackPane
• increment-button — StackPane
  • increment-arrow — StackPane

ScrollPane

Style class: scroll-pane

Pseudo-classes

Substructure

• viewport — StackPane
  • * — StackPane
  • • The ScrollPane's content
• scroll-bar:vertical — ScrollBar
• scroll-bar:horizontall — ScrollBar
• corner — StackPane

Separator

Style class: separator

Pseudo-classes

Substructure

• line — Region

Spinner

Style class: spinner

Note that the default style class, "spinner", puts arrows on right, stacked vertically. The following style classes can also be used in combination with the default style class in order to control the layout of the Spinner.

Pseudo-classes

Substructure

• text-field — TextField
• increment-arrow-button — StackPane
  • increment-arrow — Region
• decrement-arrow-button — StackPane
  • decrement-arrow — Region

Slider

Style class: slider

Pseudo-classes

Substructure

• axis — NumberAxis
• track — Region
• thumb — Region

SplitMenuButton

Style class: split-menu-button

SplitPane

Style class: split-pane

Pseudo-classes

Substructure

• split-pane-divider — StackPane
  • vertical-grabber — StackPane
  • horizontal-grabber — StackPane

TabPane

Style class: tab-pane

Note: The styleclass is "tab-pane floating" if the TabPane is floating.

Pseudo-classes

Substructure

• tab-header-area — StackPane
  • headers-region — StackPane
  • tab-header-background — StackPane
  • control-buttons-tab — StackPane
    • tab-down-button — Pane
      • arrow — StackPane
  • tab — Tab
    • tab-label — Label
    • tab-close-button — StackPane
• tab-content-area — StackPane

TableColumnHeader

Style class: column-header

Pseudo-classes

Substructure

• column-resize-line — Region
• column-overlay — Region
• placeholder — StackPane
• column-header-background — StackPane
  • nested-column-header
    • column-header
  • filler — Region
  • show-hide-columns-button — StackPane
    • show-hide-column-image — StackPane
  • column-drag-header — StackPane
    • label — Label

TableView

Style class: table-view

Pseudo-classes

Substructure

• column-resize-line — Region
• column-overlay — Region
• placeholder — StackPane
• column-header-background — StackPane
  • nested-column-header
    • column-header
  • filler — Region
  • show-hide-columns-button — StackPane
    • show-hide-column-image — StackPane
  • column-drag-header — StackPane
    • label — Label
• table-column — TableColumn

TextArea

Style class: text-area

Substructure

• scroll-pane — ScrollPane
  • content — Region

TextInputControl

Pseudo-classes

TextField

Style class: text-field

TextField has all the pseudo‑class states of TextInputControl

TitledPane

Pseudo-classes

Substructure

• title — HBox
  • text — Label/li>
  • arrow-button — StackPane/li>
    • arrow — StackPane
• content — StackPane/li>

ToggleButton

Style class: toggle-button

The ToggleButton control has all the properties of ButtonBase.

Pseudo-classes

ToolBar

Style class: tool-bar

Pseudo-classes

Substructure

• tool-bar-overflow-button — StackPane
  • arrow — StackPane

Tooltip

Style class: tooltip

Substructure

• label — Label
• page-corner — StackPane

TreeCell

Style class: tree-cell

Pseudo-classes

TreeTableCell

Style class: tree-table-cell

Pseudo-classes

TreeView

Style class: tree-table-view

TreeView

Style class: tree-view

Charts

AreaChart

Axis

Style class: axis

Substructure

• axis-label — Text
• axis-tick-mark — Path

BarChart

BubbleChart

CategoryAxis

Style class: axis

Chart

Style class: chart

Substructure

• chart-title — Label
• chart-content — Pane

Legend

Style class: chart-legend

Substructure

• chart-legend-item — Label
• chart-legend-item-symbol — Node (the Label's graphic)

LineChart

NumberAxis

Style class: axis

PieChart

ScatterChart

ValueAxis

Style class: axis

Substructure

• axis-minor-tick-mark — Path

XYChart

Style class: set by sub-type

Substructure

• plot-content — Group
• chart-plot-background — Region
• chart-alternative-column-fill — Path
• chart-alternative-row-fill — Path
• chart-vertical-grid-lines — Path
• chart-horizontal-grid-lines — Path
• chart-vertical-zero-line — Line
• chart-horizontal-zero-line — Line

References

[1] CSS 2.1: http://www.w3.org/TR/CSS21/

[2] CSS 3 work in progress http://www.w3.org/Style/CSS/current-work (May 2010).

[3] SVG Paths: http://www.w3.org/TR/SVG/paths.html

[4] CSS Backgrounds and Borders Module Level 3: http://www.w3.org/TR/css3-background/

[5] Uniform Resource Identifier (URI): Generic Syntax RFC-3986