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

Содержание

Знакомство.

Никогда еще стиль пользовательского интерфейса 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".

Properties that inherit by default
КлассСвойствоCSS свойствоПервоначальный значение
javafx.scene.Node cursor -fx-cursor javafx.scene.Cursor.DEFAULT
javafx.scene.text.Text textAlignment -fx-text-alignment javafx.scene.text.TextAlignment.LEFT
javafx.scene.text.Font font -fx-font, -fx-font-family, -fx-font-size, -fx-font-weight, -fx-font-style Font.DEFAULT (12px system)

В иерархии классов 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; }

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

A rectangle with red fill

Если 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;
}

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

A rectangle with yellow fill and a green, dashed border

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

Когда синтаксический анализатор 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 таблицы стилей. Если стиль отображается во встроенном стиле, путь указывается относительно корня пути к классам (независимо от того, есть ли в начале '/' или нет).

Примеры разрешения URL-адресов в таблицах стилей
URL таблицы стилейURL в стилеРешает
file:///some/path/build/classes/com/mycompany/myapp/mystyles.css url(images/Duke.png) file:///some/path/build/classes/com/mycompany/myapp/images/Duke.png
file:///some/path/build/classes/com/mycompany/myapp/mystyles.css url(../images/Duke.png) file:///some/path/build/classes/com/mycompany/images/Duke.png
jar:file:/some/path/build/myapp.jar!/com/mycompany/myapp/mystyles.css url(images/Duke.png) jar:file:/some/path/build/myapp.jar!/com/mycompany/myapp/images/Duke.png

 

Примеры разрешения URL-адресов в стилях Inline
ClasspathURL в стилеРазрешенный URL-адрес
file:///some/path/build/classes url(/com/mycompany/resources/images/Duke.png) file:///some/path/build/classes/com/mycompany/resources/images/Duke.png
file:///some/path/build/myapp.jar url(/com/mycompany/resources/images/Duke.png) jar:file:/some/path/build/myapp.jar!/com/mycompany/resources/images/Duke.png

 

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

Например, приведенный ниже фрагмент кода создает сцену, заполненную вымышленным изображением 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".

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-font <font> inherit сокращенное свойство для font-size, font-family, font-weight и font-style
-fx-font-family <font-family> inherit  
-fx-font-size <font-size> inherit  
-fx-font-style <font-style> inherit  
-fx-font-weight <font-weight> inherit  

<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:

aliceblue = #f0f8ff
antiquewhite = #faebd7
aqua = #00ffff
aquamarine = #7fffd4
azure = #f0ffff
beige = #f5f5dc
bisque = #ffe4c4
black = #000000
blanchedalmond = #ffebcd
blue = #0000ff
blueviolet = #8a2be2
brown = #a52a2a
burlywood = #deb887
cadetblue = #5f9ea0
chartreuse = #7fff00
chocolate = #d2691e
coral = #ff7f50
cornflowerblue = #6495ed
cornsilk = #fff8dc
crimson = #dc143c
cyan = #00ffff
darkblue = #00008b
darkcyan = #008b8b
darkgoldenrod = #b8860b
darkgray = #a9a9a9
darkgreen = #006400
darkgrey = #a9a9a9
darkkhaki = #bdb76b
darkmagenta = #8b008b
darkolivegreen = #556b2f
darkorange = #ff8c00
darkorchid = #9932cc
darkred = #8b0000
darksalmon = #e9967a
darkseagreen = #8fbc8f
darkslateblue = #483d8b
darkslategray = #2f4f4f
darkslategrey = #2f4f4f
darkturquoise = #00ced1
darkviolet = #9400d3
deeppink = #ff1493
deepskyblue = #00bfff
dimgray = #696969
dimgrey = #696969
dodgerblue = #1e90ff
firebrick = #b22222
floralwhite = #fffaf0
forestgreen = #228b22
fuchsia = #ff00ff
gainsboro = #dcdcdc
ghostwhite = #f8f8ff
gold = #ffd700
goldenrod = #daa520
gray = #808080
green = #008000
greenyellow = #adff2f
grey = #808080
honeydew = #f0fff0
hotpink = #ff69b4
indianred = #cd5c5c
indigo = #4b0082
ivory = #fffff0
khaki = #f0e68c
lavender = #e6e6fa
lavenderblush = #fff0f5
lawngreen = #7cfc00
lemonchiffon = #fffacd
lightblue = #add8e6
lightcoral = #f08080
lightcyan = #e0ffff
lightgoldenrodyellow = #fafad2
lightgray = #d3d3d3
lightgreen = #90ee90
lightgrey = #d3d3d3
lightpink = #ffb6c1
lightsalmon = #ffa07a
lightseagreen = #20b2aa
lightskyblue = #87cefa
lightslategray = #778899
lightslategrey = #778899
lightsteelblue = #b0c4de
lightyellow = #ffffe0
lime = #00ff00
limegreen = #32cd32
linen = #faf0e6
magenta = #ff00ff
maroon = #800000
mediumaquamarine = #66cdaa
mediumblue = #0000cd
mediumorchid = #ba55d3
mediumpurple = #9370db
mediumseagreen = #3cb371
mediumslateblue = #7b68ee
mediumspringgreen = #00fa9a
mediumturquoise = #48d1cc
mediumvioletred = #c71585
midnightblue = #191970
mintcream = #f5fffa
mistyrose = #ffe4e1
moccasin = #ffe4b5
navajowhite = #ffdead
navy = #000080
oldlace = #fdf5e6
olive = #808000
olivedrab = #6b8e23
orange = #ffa500
orangered = #ff4500
orchid = #da70d6
palegoldenrod = #eee8aa
palegreen = #98fb98
paleturquoise = #afeeee
palevioletred = #db7093
papayawhip = #ffefd5
peachpuff = #ffdab9
peru = #cd853f
pink = #ffc0cb
plum = #dda0dd
powderblue = #b0e0e6
purple = #800080
red = #ff0000
rosybrown = #bc8f8f
royalblue = #4169e1
saddlebrown = #8b4513
salmon = #fa8072
sandybrown = #f4a460
seagreen = #2e8b57
seashell = #fff5ee
sienna = #a0522d
silver = #c0c0c0
skyblue = #87ceeb
slateblue = #6a5acd
slategray = #708090
slategrey = #708090
snow = #fffafa
springgreen = #00ff7f
steelblue = #4682b4
tan = #d2b48c
teal = #008080
thistle = #d8bfd8
tomato = #ff6347
turquoise = #40e0d0
violet = #ee82ee
wheat = #f5deb3
white = #ffffff
whitesmoke = #f5f5f5
yellow = #ffff00
yellowgreen = #9acd32
transparent = rgba(0,0,0,0)

Искомые цвета <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

javafx.stage

Group

Style class: .root.popup

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

Nodes

javafx.scene

Group

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

Доступные свойства CSS
CSS свойствоЗначенияПо умолчаниюКомментарии
Group расширяет Parent. Group не добавляет никаких дополнительных свойств CSS.
Также имеет все свойства Parent

 

Node

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

Доступные свойства CSS
CSS свойствоЗначенияПо умолчаниюДиапазонКомментарии
-fx-blend-mode [ add | blue | color-burn | color-dodge | darken | difference | exclusion | green | hard-light | lighten | multiply | overlay | red | screen | soft-light | src-atop | src-in | src-out | src-over ] null    
-fx-cursor [ null | crosshair | default | hand | move | e-resize | h-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | v-resize | text | wait ] | <url> null   наследует
-fx-effect <effect> null    
-fx-focus-traversable <boolean> false   Значение по умолчанию для элементов управления - истина, хотя есть некоторые исключения. Подробнее см. Controls.
-fx-view-order <number> 0   Это свойство используется для изменения порядка рендеринга и выбора узла в его родительском элементе без изменения порядка дочернего списка родительского элемента. Родитель обходит своих дочерних элементов в порядке убывания viewOrder.
-fx-opacity <number> 1 [0.0 ... 1.0] Концептуально непрозрачность можно рассматривать как операцию постобработки. По сути, после рендеринга узла (включая его потомков) в закадровое изображение RGBA, параметр непрозрачности указывает, как смешать закадровый рендеринг с текущим составным рендерингом.
-fx-rotate <number> 0   Это угол поворота в градусах. Нулевой градус находится у отметки 3 часа (прямо вправо). Значения угла положительные по часовой стрелке. Вращение происходит примерно в центре.
-fx-scale-x <number> 1   шкала около центра
-fx-scale-y <number> 1   шкала около центра
-fx-scale-z <number> 1   шкала около центра
-fx-translate-x <number> 0    
-fx-translate-y <number> 0    
-fx-translate-z <number> 0    
visibility [ visible | hidden | collapse | inherit ] true (i.e, visible)   См. Свойство видимости W3C

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

Доступные псевдоклассы CSS
CSS ПсевдоклассКомментарии
disabled применяется, когда disabled переменная - true
focused применяется, когда focused переменная - true
hover применяется, когда hover переменная - true
pressed применяется, когда pressed переменная - true
show-mnemonic применяется, когда должна быть показана доступность mnemonic (обычно underscore)..

Parent

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

Доступные Свойства CSS
Свойство CSSЗначенияПо умолчаниюКомментарии
Parent расширяет Node. Parent не добавляет никаких дополнительных свойств CSS.
Также имеет все свойства Node

 

Scene

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

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

javafx.scene.image

ImageView

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

Доступные свойства CSS
CSS свойствоЗначенияПо умолчаниюКомментарии
-fx-image <uri> null Относительные URL-адреса сопоставляются с URL-адресом таблицы стилей.
Также имеет все свойства Node
javafx.scene.layout

 

AnchorPane

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

Доступные свойства CSS
CSS свойствоЗначенияПо умолчаниюКомментарии
AnchorPane расширяет Pane и не добавляет никаких дополнительных свойств CSS.
Также имеет все свойства Pane

BorderPane

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

Доступные свойства CSS
CSS свойствоЗначенияПо умолчаниюКомментарии
BorderPane расширяет Pane и не добавляет никаких дополнительных свойств CSS.
Также имеет все свойства Pane

 

DialogPane

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

Доступные свойства CSS
CSS свойствоЗначенияПо умолчаниюКомментарии
-fx-graphic <uri> null  
Также имеет все свойства Pane

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

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

FlowPane

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

Доступные свойства CSS
CSS свойствоЗначенияПо умолчаниюКомментарии
-fx-hgap <size> 0  
-fx-vgap <size> 0  
-fx-alignment [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] top-left  
-fx-column-halignment [ left | center | right ] left  
-fx-row-valignment [ top | center | baseline | bottom ] center  
-fx-orientation [ horizontal | vertical ] horizontal  
Также имеет все свойства Pane

GridPane

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

Доступные свойства CSS
CSS свойствоЗначенияПо умолчаниюКомментарии  
-fx-hgap <size> 0    
-fx-vgap <size> 0    
-fx-alignment [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] top-left    
-fx-grid-lines-visible <boolean> false    
Также имеет все свойства Pane

HBox

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

Доступные свойства CSS
CSS свойствоЗначенияПо умолчаниюКомментарии
-fx-spacing <size> 0  
-fx-alignment [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] top-left  
-fx-fill-height <boolean> true  
Также имеет все свойства Pane

Pane

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

Доступные свойства CSS
CSS свойствоЗначенияПо умолчаниюКомментарии
Pane расширяет область для отображения дочерних элементов Region. Pane не добавляет никаких дополнительных свойств CSS.
Также имеет все свойства Region

 

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.

Доступные свойства CSS
CSS свойствоЗначенияПо умолчаниюКомментарии
ЗАПОЛНЕНИЕ ФОНА (см. CSS-фоны и границы, уровень 3: фоны)
-fx-region-background javafx.scene.layout.Background null Это не может быть установлено непосредственно из CSS, но создается из значений свойств -fx-background-color, -fx-background-image, -fx-background-insert, -fx-background-position, -fx-background-radius, -fx-background-repeat, -fx-background-size
-fx-background-color <paint> [ , <paint> ]* transparent Серия значений цвета, разделенных запятыми.
-fx-background-insets <size> | <size> <size> <size> <size> [ , [ <size> | <size> <size> <size> <size>] ]* 0 0 0 0

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

-fx-background-radius [<size>]{1,4} [ / [<size>]{1,4} ]? [ , [<size>]{1,4} [ / [<size>]{1,4} ]? ]* 0 0 0 0

Тот же синтаксис и семенатика, что и CSS Backgrounds and Borders Module Level 3: Радиусы кривой, применяется к -fx-background-radius. Обратите внимание, что JavaFX поддерживает только сокращенный синтаксис.

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

ФОНОВЫЕ ИЗОБРАЖЕНИЯ (см. CSS Level 3 Модуль "Фоны и границы": Фоновые изображения)
-fx-background-image <uri> [ , <uri> ]* null Серия URI изображений, разделенных запятыми.
-fx-background-position

<bg-position> [ , <bg-position> ]*
where <bg-position> = [
    [ [ <size> | left | center | right ] [ <size> | top | center | bottom ]? ]
    | [ [ center | [ left | right ] <size>? ] || [ center | [ top | bottom ] <size>? ]
]

0% 0%

Серия значений <bg-position> , разделенных запятыми. Каждый элемент bg-position в серии применяется к соответствующему изображению в серии фоновых изображений.

-fx-background-repeat <repeat-style> [ , <repeat-style> ]*
where <repeat-style> = repeat-x | repeat-y | [repeat | space | round | stretch | no-repeat]{1,2}
repeat repeat

Серия значений <repeat-style>, разделенных запятыми. Каждый элемент повторяющегося стиля в серии применяется к соответствующему изображению в серии фоновых изображений.

-fx-background-size <bg-size> [ , <bg-size> ]*
<bg-size> = [ <size> | auto ]{1,2} | cover | contain | stretch
auto auto

Серия значений <bg-size>, разделенных запятыми. Каждый элемент bg-size в серии применяется к соответствующему изображению в серии фоновых изображений.

ГЛАДКИЕ ГРАНИЦЫ (см. CSS уровень 3 Модуль "Фоны и границы" : Границы)
-fx-region-border javafx.scene.layout.Border null Это не может быть установлено непосредственно из CSS, но создается из значений свойств -fx-border-color, -fx-border-insets, -fx-border-radius, -fx-border-style, -fx-border-width, -fx-border-image-insets, -fx-border-image-repeat, -fx-border-image-slice, -fx-border-image-source, -fx-border-image-width
-fx-border-color <paint> | <paint> <paint> <paint> <paint> [ , [<paint> | <paint> <paint> <paint> <paint>] ]* null

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

-fx-border-insets <size> | <size> <size> <size> <size> [ , [ <size> | <size> <size> <size> <size>] ]* null

Серия вставок или наборов из четырех значений вставки, разделенных запятыми. Для каждого элемента в серии одно значение вставки означает, что все вставки одинаковы; и если указан набор из четырех значений вставки, они используются для верхнего, правого, нижнего и левого краев области в указанном порядке. Каждый элемент в серии вставок относится к соответствующему элементу в серии цветов границы.

-fx-border-radius [<size>]{1,4} [ / [<size>]{1,4} ]? [ , [<size>]{1,4} [ / [<size>]{1,4} ]? ]* null

См. Раздел: CSS «Фон и границы модуля, уровень 3: радиусы кривых». JavaFX поддерживает только сокращенный синтаксис.

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

-fx-border-style

<border-style> [ , <border-style> ]*
where <border-style> = <dash-style> [phase <number>]? [centered | inside | outside]? [line-join [miter <number> | bevel | round]]? [line-cap [square | butt | round]]?
where <dash-style> = [ none | solid | dotted | dashed | segments( <number>, <number> [, <number>]*) ]

null

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

Стиль тире сегментов определяет последовательность,представляющую длины сегментов тире. Альтернативные записи в последовательности представляют собой длины непрозрачных и прозрачных сегментов тире. Это соответствует переменной формы StrokeDashArray.

Необязательный параметр фазы определяет точку в штриховом узоре, которая будет соответствовать началу штриха. Это соответствует переменной формы strokeDashOffset.

-fx-border-width <size> | <size> <size> <size> <size> [ , [ <size> | <size> <size> <size> <size>] ]* null

Ряд значений ширины или наборов из четырех значений ширины, разделенных запятыми. Для каждого элемента в серии одно значение ширины означает, что все ширины границ одинаковы; и если задан набор из четырех значений ширины, они используются для ширины верхней, правой, нижней и левой границ в указанном порядке. Если граница не прямоугольная, используется только первое значение ширины. Каждый элемент в серии ширин применяется к соответствующему элементу в серии цветов границ.

-fx-border-image-source <uri> [ , <uri> ]* null

Серия изображений URI, разделенных запятыми.

-fx-border-image-insets <size> | <size> <size> <size> <size> [ , [ <size> | <size> <size> <size> <size>] ]* 0 0 0 0

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

-fx-border-image-repeat <repeat-style> [ , <repeat-style> ]*
where <repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
repeat repeat

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

-fx-border-image-slice

[<size> | <size> <size> <size> <size> ] fill? [ , [ <size> | <size> <size> <size> <size> <size> ] fill? ]*

100%

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

-fx-border-image-width <size> | <size> <size> <size> <size> [ , [ <size> | <size> <size> <size> <size>] ]* 1 1 1 1

Ряд значений ширины или наборов из четырех значений ширины, разделенных запятыми. Для каждого элемента в серии одно значение ширины означает, что все ширины границ одинаковы; и если задан набор из четырех значений ширины, они используются для ширины верхней, правой, нижней и левой границ в указанном порядке. Если граница не прямоугольная, используется только первое значение ширины. Каждый элемент в серии ширин применяется к соответствующему элементу в серии изображений границ. Здесь можно использовать процентные значения, и в этом случае значения считаются пропорциональными области изображения границы.

ДРУГОЙ
-fx-padding <size> | <size> <size> <size> <size> 0 0 0 0

Набор из четырех значений заполнения, разделенных запятыми. Для каждого элемента в серии одно значение заполнения означает, что все поля одинаковы; и если указан набор из четырех значений заполнения, они используются для верхнего, правого, нижнего и левого краев области в указанном порядке.

-fx-position-shape <boolean> true Значение true означает, что форма центрирована в пределах ширины и высоты области, в противном случае форма располагается в исходной позиции. Не действует, если строка формы не указана.
-fx-scale-shape <boolean> true Значение true означает, что форма масштабируется для соответствия размеру области, в противном случае форма имеет исходный размер, а ее положение зависит от значения свойства position-shape. Не действует, если строка формы не указана.
-fx-shape "<string>" null Строка пути SVG. Если указать здесь форму, область принимает эту форму вместо прямоугольника или прямоугольника с закругленными углами. Синтаксис этой строки пути указан в [3].
-fx-snap-to-pixel <boolean> true Определяет, охватывает ли эта область положение/интервал и сводит ли значения размера к границам пикселей при размещении своих дочерних элементов.
-fx-region-background   null Это свойство устанавливается путем указания -fx-background-color и/или -fx-background-image. При желании также могут быть установлены свойства -fx-background-insets, -fx-background-radius, -fx-background-position, -fx-background-repeat, and -fx-background-size. Чтобы установить для фона региона значение null, укажите стиль "-fx-background-color: null; -fx-background-image: null;". В настоящее время нет сокращенной записи для -fx-region-background.
-fx-region-border   null Это свойство устанавливается путем указания -fx-border-color and/or -fx-border-image. Необязательно -fx-border-insets, -fx-border-radius, -fx-border-style, -fx-border-width, -fx-border-image-insets, -fx-border-image-repeat, -fx-border-image-slice и -fx-border-image-width могут быть указаны. Чтобы установить для фона региона значение null, укажите стиль "-fx-border-color: null; -fx-border-image: null;". В настоящее время нет сокращенной записи для -fx-region-border.
-fx-min-height, -fx-pref-height, -fx-max-height <size> -1 Значения в процентах бесполезны, поскольку фактическое значение будет вычисляться из ширины и/или высоты родительского элемента Regions до того, как он будет выложен.
-fx-min-width, -fx-pref-width, -fx-max-width <size> -1 Значения в процентах бесполезны, поскольку фактическое значение будет вычисляться из ширины и/или высоты родительского элемента Region до его размещения.
Также имеет все свойства Parent

 

StackPane

Style class: empty by default

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-alignment [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] top-left  
Also has all properties of Pane

TilePane

Style class: empty by default

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-orientation [ horizontal | vertical ] horizontal  
-fx-pref-rows <integer> 5  
-fx-pref-columns <integer> 5  
-fx-pref-tile-width <size> -1  
-fx-pref-tile-height <size> -1  
-fx-hgap <size> 0  
-fx-vgap <size> 0  
-fx-alignment [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] top-left  
-fx-tile-alignment [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] center  
Also has all properties of Pane

VBox

Style class: empty by default

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-spacing <size> 0  
-fx-alignment [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] top-left  
-fx-fill-width <boolean> true  
Also has all properties of Pane
javafx.scene.media

MediaView

Style class: media-view

javafx.scene.shape

Shape

Style class: empty by default

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-fill <paint> BLACK  
-fx-smooth <boolean> true  
-fx-stroke <paint> null  
-fx-stroke-type [ inside | outside | centered ] centered  
-fx-stroke-dash-array <size>[ <size>]+ see comment The initial value is that of an empty array, effectively a solid line.
-fx-stroke-dash-offset <number> 0  
-fx-stroke-line-cap [ square | butt | round ] square  
-fx-stroke-line-join [ miter | bevel | round ] miter  
-fx-stroke-miter-limit <number> 10  
-fx-stroke-width <size> 1  
Also has all properties of Node

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

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-fill <paint> null  
-fx-stroke <paint> black  
Also has all properties of Shape

Path

Style class: empty by default

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-fill <paint> null  
-fx-stroke <paint> black  
Also has all properties of Shape

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

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-arc-height <size> 0  
-fx-arc-width <size> 0  
Also has all properties of Shape

SVGPath

Style class: empty by default

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

javafx.scene.text

Text

Style class: empty by default

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-font <font> Font.DEFAULT inherits
-fx-font-smoothing-type [ gray | lcd ] gray  
-fx-strikethrough <boolean> false  
-fx-tab-size <integer> 8  
-fx-text-alignment [ left | center | right | justify ] left inherits
-fx-text-origin [ baseline | top | bottom ] baseline  
-fx-underline <boolean> false  
Also has font properties and all properties of Shape
javafx.scene.web

WebView

Style class: web-view

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-context-menu-enabled <boolean> true  
-fx-font-smoothing-type [ gray | lcd ] lcd  
-fx-font-scale <number> 1  
-fx-min-width <size> 0  
-fx-min-height <size> 0  
-fx-pref-width <size> 800  
-fx-pref-height <size> 600  
-fx-max-width <size> Double.MAX_VALUE  
-fx-max-height <size> Double.MAX_VALUE  
Also has all properties of Parent
javafx.scene.control

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

Available CSS Pseudo-classes
CSS Pseudo-classComments
cancel applies if this Button receives VK_ESC if the event is not otherwise consumed
default applies if this Button receives VK_ENTER if the event is not otherwise consumed
Also has all pseudo‑classes of ButtonBase

ButtonBase

The ButtonBase control has all the properties of Labeled

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
armed applies when the armed variable is true
Also has all pseudo‑classes of Labeled

Cell

Style class: cell

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-cell-size <size> 24 The cell size. For vertical ListView or a TreeView or TableView this is the height, for a horizontal ListView this is the width.
The Cell control has all the properties of Labeled

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
empty applies when the empty variable is true
filled applies when the empty variable is false
selected applies when the selected variable is true
Also has all pseudo‑classes of Labeled

Substructure

  • text — a Labeled

CheckBox

Style class: check-box

The CheckBox control has all the properties of ButtonBase

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
selected applies when the selected variable is true
determinate applies when the indeterminate variable is false
indeterminate applies when the indeterminate variable is true
Also has all pseudo‑classes of ButtonBase

Substructure

  • box — a StackPane
    • mark — a StackPane

CheckMenuItem

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
selected applies if this item is selected

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

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-color-label-visible <boolean> true  
Also has all properties of Control

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
Available CSS Pseudo-classes
CSS Pseudo-classComments
editable applies when the editable variable is true
showing applies when the showing variable is true
armed applies when the armed variable is true

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

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-skin <string> null The class name of the Control's Skin.
-fx-focus-traversable <boolean> true Control sets the default value of the focusTraversable property to true. The default value of the focusTraversable property for the following controls is false: Accordion, Cell, Label, MenuBar, ProgressBar, ProgressIndicator, ScrollBar, ScrollPane, Separator, SplitPane, ToolBar.

DatePicker

Style class: date-picker

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

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-show-week-numbers <boolean> true if the resource bundle property "DatePicker.showWeekNumbers" contains the country code.  
Also has all properties of Control

Substructure

  • date-picker-display-node — TextField

HTMLEditor

Style class: html-editor

The Hyperlink control has all the properties of Control.

Substructure

Hyperlink

Style class: hyperlink

The Hyperlink control has all the properties of ButtonBase.

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-cursor [ null | crosshair | default | hand | move | e-resize | h-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | v-resize | text | wait ] | <url> hand inherits

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
visited applies when the visited variable is true
Also has all pseudo‑classes of ButtonBase

Substructure

  • label — Label

IndexedCell

Style class: indexed-cell

The IndexedCell control has all the properties of Cell.

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
even applies if this cell's index is even
odd applies if this cell's index is odd
Also has all pseudo‑classes of Cell

Label

Style class: label

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

Labeled

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-alignment [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] center-left  
-fx-text-alignment [ left | center | right | justify ] left text-align from CSS spec maps to textAlignment in JavaFX
-fx-text-overrun [ center-ellipsis | center-word-ellipsis | clip | ellipsis | leading-ellipsis | leading-word-ellipsis | word-ellipsis ] ellipsis  
-fx-wrap-text <boolean> false  
-fx-font <font> platform dependent inherits
The initial value is that of Font.getDefault()
-fx-underline <boolean> false  
-fx-graphic <uri> null  
-fx-content-display [ top | right | bottom | left | center | right | graphic-only | text-only ] left  
-fx-graphic-text-gap <size> 4  
-fx-label-padding <size> | <size> <size> <size> <size> [0,0,0,0]  
-fx-text-fill <paint> black  
-fx-ellipsis-string <string> ...  
Also has properties of Control

ListCell

Style class: list-cell

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

ListView

Style class: list-view

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-orientation [ horizontal | vertical ] vertical  

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
horizontal applies if this ListView is horizontal
vertical applies if this ListView is vertical

Substructure

  • .list-view — the ListView<T>
    • .virtual-flow — VirtualFlow

Menu

Style class: menu

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
showing applies if this Menu is showing
Also has all pseudo‑classes of Control

MenuBar

Style class: menu-bar

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-use-system-menu-bar <boolean> false  
Also has all properties of Control

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

Available CSS Pseudo-classes
CSS Pseudo-classComments
openvertically applies if the openVertically variable is true
showing applies if the showing variable is true
Also has all pseudo‑classes of Node

MenuItem

Style class: menu-item

Pagination

Style class: pagination

Pagination has all the pseudo‑class states of Control

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-max-page-indicator-count <number> 10  
-fx-arrows-visible <boolean> true  
-fx-tooltip-visible <boolean> false When set to true, a tooltip which shows the page number is set on the page indicators. This property controls whether or not the tooltip is visible on the page indicators and does not affect the visibility of the tooltip set or installed on the Pagination control itself.
-fx-page-information-visible <boolean> true  
-fx-page-information-alignment [ top | bottom | left | right ] bottom  
Also has all properties 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

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-indeterminate-bar-length <number> 60  
-fx-indeterminate-bar-escape <boolean> true  
-fx-indeterminate-bar-flip <boolean> true  
-fx-indeterminate-bar-animation-time <number> 2.0  
Also has all properties of Control

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
determinate applies if the indeterminate variable is false
indetermindate applies if the indeterminate variable is true
Also has all pseudo‑classes of Control

Substructure

  • track — StackPane
    • bar — Region

ProgressIndicator

Style class: progress-indicator

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-indeterminate-segment-count <number> 8  
-fx-progress-color <paint> null  
-fx-spin-enabled <boolean> false  
Also has all properties of Control

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
determinate applies if the indeterminate variable is false
indetermindate applies if the indeterminate variable is true
Also has all pseudo‑classes of Control

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

Available CSS Pseudo-classes
CSS Pseudo-classComments
selected applies if this item is selected

ScrollBar

Style class: scroll-bar

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-orientation [ horizontal | vertical ] horizontal  
-fx-block-increment <number> 10  
-fx-unit-increment <number> 1  

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
vertical applies if this ScrollBar is vertical
horizontal applies if this ScrollBar is horizontal
Also has all pseudo‑classes of Control

Substructure

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

ScrollPane

Style class: scroll-pane

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-fit-to-width <boolean> false  
-fx-fit-to-height <boolean> false  
-fx-pannable <boolean> false  
-fx-hbar-policy [ never | always | as-needed ] as-needed  
-fx-vbar-policy [ never | always | as-needed ] as-needed  
Also has all properties of Control

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
pannable applies if this ScrollPane is pannable
fitToWidth applies if this ScrollPane is fitToWidth
fitToHeight applies if this ScrollPane is fitToHeight
Also has all pseudo‑classes of Control

Substructure

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

Separator

Style class: separator

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-orientation [ horizontal | vertical ] horizontal  
-fx-halignment [ left | center | right ] center  
-fx-valignment [ top | center | baseline | bottom ] center  
Also has all properties of Control

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
horizontal applies if this Separator is horizontal
vertical applies if this Separator is vertical
Also has all pseudo‑classes of Control

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.

Available Style Classes
Style ClassComment
arrows-on-right-horizontal The arrows are placed on the right of the Spinner, pointing horizontally (i.e. left and right)
arrows-on-left-vertical The arrows are placed on the left of the Spinner, pointing vertically (i.e. up and down)
arrows-on-left-horizontal The arrows are placed on the left of the Spinner, pointing horizontally (i.e. left and right)
split-arrows-vertical The arrows are placed above and beneath the spinner, stretching to take the entire width
split-arrows-horizontal The decrement arrow is placed on the left of the Spinner, and the increment on the right

 

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-initial-delay <duration> 300ms  
-fx-repeat-delay <duration> 60ms  
Also has all properties of Control

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
Also has all pseudo‑classes of Control

Substructure

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

Slider

Style class: slider

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-orientation [ horizontal | vertical ] horizontal  
-fx-show-tick-labels <boolean> false  
-fx-show-tick-marks <boolean> false  
-fx-major-tick-unit <number> 25  
-fx-minor-tick-count <integer> 3  
-fx-show-tick-labels <boolean> false  
-fx-snap-to-ticks <boolean> false  
-fx-block-increment <integer> 10  
Also has all properties of Control

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
horizontal applies if this Slider is horizontal
vertical applies if this Slider is vertical
Also has all pseudo‑classes of Control

Substructure

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

SplitMenuButton

Style class: split-menu-button

Available CSS Properties
CSS PropertyValuesDefaultComments
Also has all properties of MenuButton

SplitPane

Style class: split-pane

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-orientation [ horizontal | vertical ] horizontal  
Also has all properties of Control

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
horizontal applies if this Slider is horizontal
vertical applies if this Slider is vertical
Also has all pseudo‑classes of Control

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.

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-tab-min-width <integer> 0  
-fx-tab-max-width <integer> Double.MAX_VALUE  
-fx-tab-min-height <integer> 0  
-fx-tab-max-height <integer> Double.MAX_VALUE  
-fx-open-tab-animation [ grow | none ] grow 'none' disables Tab opening animation
-fx-close-tab-animation [ grow | none ] grow 'none' disables Tab closing animation
Also has all properties of Control

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
top applies if the side is top
right applies if the side is rght
bottom applies if the side is bottom
left applies if the side is left
Also has all pseudo‑classes of Control

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

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-size <size> 20 The table column header size.
Also has all properties of Region

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
last-visible applies if this is the last visible column in the table.
Also has all pseudo‑classes of Node

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

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-fixed-cell-size <size> -1 A value greater than zero sets the fixed cell size of the table. A value of zero or less disables fixed cell size.
Also has all properties of Control

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
cell-selection applies if this TableView's selection model is cell selection
row-selection applies if this TableView's selection model is row selection
Also has all pseudo‑classes of Node

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

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-pref-column-count number 40  
-fx-pref-row-count number 10  
-fx-wrap-text boolean false  
Also has all properties of TextInputControl

Substructure

  • scroll-pane — ScrollPane
    • content — Region

TextInputControl

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-font <font> null inherits
-fx-text-fill <paint> black  
-fx-prompt-text-fill <paint> gray  
-fx-highlight-fill <paint> dodgerblue  
-fx-highlight-text-fill <paint> white  
-fx-display-caret <boolean> true  
Also has Font Properties and all properties of Control

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
readonly applies if this TextInputControl is not editable
Also has all pseudo‑classes of Control

TextField

Style class: text-field

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-alignment [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] center-left  
-fx-pref-column-count number 12  
Also has all properties of TextInputControl

TextField has all the pseudo‑class states of TextInputControl

TitledPane

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-animated <boolean> true  
-fx-collapsible <boolean> true  
Also has Font Properties and all properties of Labeled

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
expanded applies if this TitledPane is expanded
collapsed applies if this TitledPane is collapsed
Also has all pseudo‑classes of Labeled

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

Available CSS Pseudo-classes
CSS Pseudo-classComments
selected applies if this ToggleButton is selected
Also has all pseudo‑classes of ButtonBase

ToolBar

Style class: tool-bar

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-orientation [ horizontal | vertical ] horizontal  
Also has all properties of Control

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
horizontal applies if this ToolBar is horizontal
vertical applies if this ToolBar is vertical
Also has all pseudo‑classes of Control

Substructure

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

Tooltip

Style class: tooltip

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-text-alignment [ left | center | right | justify ] left  
-fx-text-overrun [ center-ellipsis | center-word-ellipsis | clip | ellipsis | leading-ellipsis | leading-word-ellipsis | word-ellipsis ] ellipsis  
-fx-wrap-text <boolean> false  
-fx-graphic <uri> null  
-fx-content-display [ top | right | bottom | left | center | right | graphic-only | text-only ] left  
-fx-graphic-text-gap <size> 4  
-fx-font <font> Font.DEFAULT inherits
-fx-show-delay <duration> 1000ms  
-fx-show-duration <duration> 5000ms  
-fx-hide-delay <duration> 200ms  

Substructure

  • label — Label
  • page-corner — StackPane

TreeCell

Style class: tree-cell

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-indent <size> 10 The amout of space to multiply by the treeItem.level to get the left margin
Also has all properties of IndexedCell

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
expanded applies if this cell is expanded
collapsed applies if this cell is not expanded
Also has all pseudo‑classes of IndexedCell

TreeTableCell

Style class: tree-table-cell

Available CSS Properties
CSS PropertyValuesDefaultComments
Also has all properties of IndexedCell

Pseudo-classes

Available CSS Pseudo-classes
CSS Pseudo-classComments
last-visible true if this is the last visible cell, typically the right-most cell in the TreeTableView
Also has all pseudo‑classes of IndexedCell

TreeView

Style class: tree-table-view

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-fixed-cell-size <size> Region.USE_COMPUTED_SIZE If both -fx-cell-size and -fx-fixed-cell-size properties are specified in CSS, -fx-fixed-cell-size takes precedence.
Also has all properties and pseudo‑class state of Control

TreeView

Style class: tree-view

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-fixed-cell-size <size> Region.USE_COMPUTED_SIZE If both -fx-cell-size and -fx-fixed-cell-size properties are specified in CSS, -fx-fixed-cell-size takes precedence.
Also has all properties and pseudo‑class state of Control

Charts

javafx.scene.chart

AreaChart

Available Style Classes
Style classCommentsProperties
"chart-series-area-line series<i> default-color<j>" Where <i> is the index of the series and <j> is the series’ color index. Node
"chart-series-area-fill series<i> default-color<j>" Where <i> is the index of the series and <j> is the series’ color index. Path
"chart-area-symbol series<i> data<j> default-color<k>" Where <i> is the index of the series, <j> is the index of the data within the series, and <k> is the series’ color index Path
"chart-area-symbol series<i> area-legend-symbol default-color<j>" Where <i> is the index of the series and <j> is the series’ color index LegendItem

 

Available CSS Properties
CSS PropertyValuesDefaultComments
Has all properties of XYChart

Axis

Style class: axis

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-side Side null  
-fx-tick-length <size> 8  
-fx-tick-label-font <font> 8 system  
-fx-tick-label-fill <paint> black  
-fx-tick-label-gap <size> 3  
-fx-tick-mark-visible <boolean> true  
-fx-tick-labels-visible <boolean> true  
Has all properties of Region

Substructure

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

BarChart

Available Style Classes
Style classCommentsProperties
"bar-chart"    
"chart-bar series<i> data<j> default-color<k>" Where <i> is the index of the series, <j> is the index of the data within the series, and <k> is the series’ color index. If the data value is negative, the "negative" style class is added; e.g., .negative.chart-bar. Node
"chart-bar series<i> bar-legend-symbol default-color<j>" Where <i> is the index of the series and <j> is the series’ color index LegendItem

 

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-bar-gap <number> 4  
-fx-category-gap <number> 10  
Has all properties of XYChart

BubbleChart

Available Style Classes
Style classCommentsProperties
"chart-bubble series<i> data<j> default-color<k>" Where <i> is the index of the series, <j> is the index of the data within the series, and <k> is the series’ color index Node
"chart-bubble series<i> bubble-legend-symbol default-color<j>" Where <i> is the index of the series and <j> is the series’ color index LegendItem

 

Available CSS Properties
CSS PropertyValuesDefaultComments
Has all properties of XYChart

CategoryAxis

Style class: axis

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-start-margin <number> 5 The margin between the axis start and the first tick-mark
-fx-end-margin <number> 5 The margin between the axis start and the first tick-mark
-fx-gap-start-and-end <boolean> true If this is true then half the space between ticks is left at the start and end
Has all properties of Axis

Chart

Style class: chart

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-legend-side Side bottom  
-fx-legend-visible <boolean> true  
-fx-title-side Side top  
Has all properties of Region

Substructure

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

Legend

Style class: chart-legend

Available CSS Properties
CSS PropertyValuesDefaultComments
Has all properties of Region

Substructure

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

LineChart

Available Style Classes
Style classCommentsProperties
"chart-series-line series<i> default-color<j>" Where <i> is the index of the series and <j> is the series’ color index Node
"chart-line-symbol series<i> data<j> default-color<k>" Where <i> is the index of the series, <j> is the index of the data within the series, and <k> is the series’ color index Node
"chart-line-symbol series<i> default-color<j>" Where <i> is the index of the series and <j> is the series’ color index LegendItem

 

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-create-symbols <boolean> true  
Has all properties of XYChart

NumberAxis

Style class: axis

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-tick-unit <number> 5 The value between each major tick mark in data units.
Has all properties of ValueAxis

PieChart

Available Style Classes
Style classCommentsProperties
"chart-pie data<i> default-color<j>" Where <i> is the index of the data and <j> is the series’ color index. If the data value is negative, the "negative" style‑class is added; e.g., .negative.chart-pie. Node
"chart-pie-label-line;"   Path
"chart-pie-label;"   Text
"pie-legend-symbol <i–th data item’s style‑class>" Each item in the legend has the style‑class "pie-legend-symbol" plus the style‑class of the corresponding data item LegendItem

 

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-clockwise <boolean> true  
-fx-pie-label-visible <boolean> true  
-fx-label-line-length <size> 20  
-fx-start-angle <number> 0  
Has all properties of Chart

ScatterChart

Available Style Classes
Style classCommentsProperties
"chart-symbol series<i> data<j> default-color<k>" Where <i> is the index of the series, <j> is the index of the data within the series, and <k> is the series’ color index Node
"chart-symbol series<i> data0 default-color0" The LegendItem symbols are assigned the style‑class of the first symbol of the series. LegendItem

 

Available CSS Properties
CSS PropertyValuesDefaultComments
Has all properties of XYChart

ValueAxis

Style class: axis

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-minor-tick-length <size> 5  
-fx-minor-tick-count <size> 5  
-fx-minor-tick-visible <boolean> true  
Has all properties of Axis

Substructure

  • axis-minor-tick-mark — Path

XYChart

Style class: set by sub-type

Available CSS Properties
CSS PropertyValuesDefaultComments
-fx-alternative-column-fill-visible <boolean> true  
-fx-alternative-row-fill-visible <boolean> true  
-fx-horizontal-grid-lines-visible <boolean> true  
-fx-horizontal-zero-line-visible <boolean> true  
-fx-vertical-grid-lines-visible <boolean> true  
-fx-vertical-zero-line-visible <boolean> true  
Has all properties of chart

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