Spec-Zone .ru спецификации, руководства, описания, API

CSS JavaFX Справочник

последнее обновление: 1 сентября 2011

Содержание

• Введение
  • CSS и График Сцены JavaFX
  • Ограничения
  • Наследование
  • Примеры
• Типы
  • наследоваться
  • <булев>
  • <строка>
  • <число> & <целое число>
  • <размер>
  • <длина>
  • <процент>
  • <угол>
  • <точка>
  • <цветная остановка>
  • <туры>
  • <эффект>
  • <шрифт>
  • <краска>
  • <цвет>
• Узлы
  • javafx.scene
    • Узел
    • Сцена
  • javafx.scene.image
    • ImageView
  • javafx.scene.layout
    • AnchorPane
    • BorderPane
    • FlowPane
    • GridPane
    • HBox
    • Область
    • Область
    • StackPane
    • TilePane
    • VBox
  • javafx.scene.shape
    • Форма
    • Дуга
    • Круг
    • CubicCurve
    • Эллипс
    • Строка
    • Путь
    • Многоугольник
    • QuadCurve
    • Прямоугольник
    • SVGPath
  • javafx.scene.text
    • Текст
• Средства управления
  • javafx.scene.control
    • Аккордеон
    • Кнопка
    • ButtonBase
    • Ячейка
    • CheckBox
    • CheckMenuItem
    • ChoiceBox
    • Управление
    • Гиперссылка
    • IndexedCell
    • Метка
    • Маркированный
    • ListCell
    • ListView
    • Меню
    • MenuBar
    • MenuButton
    • MenuItem
    • MenuItemBase
    • PasswordField
    • ProgressBar
    • ProgressIndicator
    • RadioButton
    • RadioMenuItem
    • ScrollBar
    • ScrollPane
    • Разделитель
    • Ползунок
    • SplitMenuButton
    • SplitPane
    • TabPane
    • TableView
    • TextArea
    • TextInputControl
    • TextField
    • TitledPane
    • ToggleButton
    • ToolBar
    • Подсказка
    • TreeCell
    • TreeView
• Диаграммы
  • javafx.scene.chart
    • Диаграмма
    • XYChart
    • AreaChart
    • BarChart
    • BubbleChart
    • LineChart
    • ScatterChart
    • PieChart
    • Ось
    • ValueAxis
    • NumberAxis
    • CategoryAxis
    • Легенда
• Ссылки

Введение

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

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

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

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

CSS и График Сцены JavaFX

Стили CSS применяются к узлам в графике сцены JavaFX в пути, подобном способу, которым стили CSS применяются к элементам в HTML ДОМ.

Стили CSS загружаются из нескольких источников. Есть таблица стилей значения по умолчанию, встроенная в систему. Таблицы стилей также загружаются из URL, определенных в переменной таблиц стилей объекта Сцены. URL может быть абсолютный URL или относительный URL. Если относительный URL дается, он разрешается против базового URL ClassLoder конкретного Приложения class. Если, например, есть основной class com.wicked.cool.ui.Main это расширяет Приложение, относительный URL "com/wicked/cool/resources/styles.css" решил бы правильно. Относительный URL "../resources/styles.css" не был бы начиная с пути ".." относительно корня не допустимый путь. Ссылаясь на таблицу стилей в отдельном пакете, часто легче использовать ClassLoder некоторого class в другом пакете, чтобы найти ресурс. Например, если "styles.css" файл будет находиться в том же самом пакете как Основной, то следующий код даст корректный URL: com.wicked.cool.ui.Main.class.getResource("styles.css").toExternalForm()

Правила, загруженные из таблиц стилей Сцены, имеют приоритет по правилам из встроенной таблицы стилей. Наконец, у каждого узла есть переменная стиля, которая может содержать объявления стиля. (Это походит на стиль =, "..." приписывают, который может появиться на элементах HTML.) Объявления specifed здесь имеют приоритет по правилам, происходящим в другом месте. Порядок приоритета правил стиля может быть изменен, используя"! важный" в объявлении стиля.

У каждого узла в графике сцены есть styleClass переменная, Список <Строка>. Это походит на class =, "..." приписывают, который может появиться на элементах HTML. Предоставление строки для styleClass переменной узла вызывает свойства стиля для того стиля class к примененному к этот узел. Стили для классов стиля могут быть определены, используя ".styleclass" селекторный синтаксис в таблице стилей. Отметьте, что у узла может быть больше чем один стиль class.

У каждого узла в графике сцены есть переменная идентификатора, строка. Это походит на идентификатор =, "..." приписывают, который может казаться элементы HTML. Предоставление строки для переменной идентификатора узла заставляет свойства стиля для этого узла искаться, используя тот идентификатор. Стили для определенных идентификаторов могут быть определены, используя "#nodeid" селекторный синтаксис в таблице стилей.

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

Стили CSS применяются асинхронно. Таким образом, стили CSS загружаются, и значения преобразовываются и присваивали некоторое время после того, как объект графика сцены был создан и добавлен к графику сцены, но прежде, чем график сцены будет сначала размечен и нарисован. Кроме того, если стили, которые применяются к объекту, изменились (например, потому что его pseudo-class изменился), значения от недавно примененных стилей не будут сразу применены. Вместо этого они будут применены когда-то после того, как состояние объекта изменилось, но прежде, чем сцена будет затем нарисована.

Приложение стилей CSS влияет на значения переменных объектов JavaFX. Во многих случаях программы JavaFX могут записать в эти переменные, если они общедоступны. Это повышает возможность, что CSS мог бы перезаписать значения, которые были инициализированы или присвоены программой JavaFX. Так как стили CSS применяются асинхронно, возможно, что значения могли бы быть присвоены программой и использоваться в течение некоторого времени прежде, чем быть перезаписанным CSS в произвольное время спустя. Чтобы избежать проблем как это, реализация CSS применяет следующую политику к переменным в базовых классах, которые устанавливаются свойствами стиля CSS. Политика следует за каскадными правилами CSS; у стиля из таблицы стилей агента пользователя есть более низкий приоритет чем пользовательский стиль, у которого есть более низкий приоритет чем стиль автора. В JavaFX пользовательский стиль интерпретируется как программно переменная набора. Стили автора из внешних таблиц стилей (от переменной таблицы стилей Сцены). Намерение состоит в том, чтобы позволить разработчикам переопределять трудно кодированные стили. Это позволяет приложению быть разработанным разработчиком, не имея необходимость перекомпилировать код. Таким образом программно переменная набора переопределит стиль из таблицы стилей агента пользователя, но стиль из таблицы стилей автора переопределит программно переменная набора (см. ограничения).

Соглашения о присвоении имен были установлены для того, чтобы произойти, CSS разрабатывает имена class от JavaFX имена class, и для того, чтобы получить имена свойства CSS из имен переменной JavaFX. Отметьте, что это - только соглашение о присвоении имен; нет никакого автоматического преобразования имени. Большинство JavaFX называет использование "Camel-регистром," то есть, смешанные имена случая сформированный из сложных слов, где первая буква каждого подслова используется для своей выгоды. Большинство имен CSS в мире HTML является всем нижним регистром со сложными словами, разделенными дефисами. Соглашение состоит в том, чтобы поэтому взять JavaFX имена class и сформироваться, их соответствующий CSS разрабатывает имя class, разделяя сложные слова дефисами и convering буквы ко всему нижнему регистру. Например, у JavaFX ToggleButton class был бы стиль class "выключателя". Соглашение для того, чтобы отобразить имена переменной JavaFX на имена свойства CSS подобно с добавлением префикса "-fx-". Например, у blendMode переменной было бы соответствующее имя свойства CSS "-fx-режим-смешивания".

Ограничения

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

- операторы ключевого слова игнорируются.

":first-дочерний-элемент" и ":lang" псевдоклассы не поддерживаются. ":first-строка", ":first-буквенная", ":after", и ":before" псевдоэлементы, не поддерживается.

":active" и ":focus" динамические псевдоклассы не поддерживаются. Однако, Узлы действительно поддерживают ":pressed" и ":focused" псевдоклассы, которые подобны.

":link" и ":visited" псевдоклассы не поддерживаются вообще. Однако, объекты Гиперссылки могут быть разработаны, и они поддерживают ":visited" pseudo-class.

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

CSS JavaFX использует цветовую модель HSB вместо цветовой модели HSL.

Возможно использовать JavaFX имя class в качестве селектора типа, однако, такое использование не рекомендуется. Например, возможно определить стили для ToggleButton, используя синтаксис "ToggleButton {...}". Такое использование не рекомендуется, потому что имя, используемое, чтобы соответствовать селектор типа, является фактическим конкретным именем class, используемым в программе JavaFX. Это имя class может измениться в случае разделения на подклассы. Если бы приложение должно было разделить ToggleButton на подклассы class, эти стили больше не применялись бы.

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

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

Стиль из таблицы стилей агента пользователя не будет переопределять значение переменной, которая инициализируется, вызывая метод набора переменной. Метод impl_cssClearUserSetProperties () в Узле существует как обходное решение для этой проблемы. Вызов этого метода очистит состояние, связанное с отслеживанием звонков в метод набора Styleable propery.

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

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

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

В пределах иерархии классов JavaFX (например, Прямоугольник является подклассом Формы, которая поочередно является подклассом Узла), свойства CSS предка являются также свойствами CSS потомка. Это означает, что подкласс ответит на тот же самый набор свойств как его классы предка, и к дополнительным свойствам это определяет себя. Так, Форма поддерживает все свойства Узла плюс еще несколько, и Прямоугольник поддерживает все свойства Формы плюс пара больше. Однако, потому что, используя JavaFX имя class в качестве селектора типа является точным совпадением, обеспечивая объявления стиля для Формы не будет заставлять Прямоугольник использовать те значения (если значение.css для свойства Прямоугольника не будет, "наследовались").

Примеры

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

Сцена сцены = новая Сцена (новая Группа ());
scene.getStylesheets ().add (“test.css”);
Прямоугольник rect = новый Прямоугольник (100 100);
rect.setLayoutX (50);
rect.setLayoutY (50);
rect.getStyleClass ().add ("мой-rect");
((Группа) scene.getRoot ()).getChildren ().add (rect);

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

.my-rect {-fx-заливка: красный;}

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

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

.my-rect {
   - fx-заливка: желтый;
   - fx-штрих: зеленый;
   -fx-stroke-width: 5;
   -fx-stroke-dash-array: 12 2 4 2;
   -fx-stroke-dash-offset: 6;
   -fx-stroke-line-cap: торец;
}

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

Типы

наследоваться

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

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

<булев>

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

<строка>

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

"это - 'строка'"
"это \"строка \""
'это - "строка"'
'это - \'string \''

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

<число> & <целое число>

У некоторых типов значения могут быть целочисленные значения (обозначенный <целым числом>) или значения вещественного числа (обозначенный <числом>). Вещественные числа и целые числа определяются в десятичной записи только. <Целое число> состоит из одной или более цифр "0" к "9". <Число> может или быть <целое число>, или это может быть нуль или больше цифр, сопровождаемых точкой (.), сопровождаемой одной или более цифрами. И целым числам и вещественным числам можно предшествовать "-" или "+", чтобы указать на знак.-0 эквивалентно 0 и не отрицательное число.

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

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

<размер>

Размер <число> с модулями <длины> или <процента>, Если модули не определяются, тогда определил, что 'px' принимается.

<длина>

<число> [px | MMS | см | в | pt | pc | em | исключая]?

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

Родственник

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

Абсолютный

• в: дюймы — 1 дюйм равен 2.54 сантиметрам.
• см: сантиметры
• MMS: миллиметры
• pt: точки — точки, используемые CSS 2.1, равны 1/72-ому из дюйма.
• pc: цицеро — 1 цицеро равен 12 точкам.

<процент>

Они - процент некоторой длины, обычно к width или height узла.

<число> [%]

<угол>

Угол <число> с одним из следующих модулей.

<число> [градус | радиус | градиент | поворот]

• градус: угол в градусах - все другие угловые модули преобразовывается в градусы.
• радиус: угол в радианах
• градиент: угол в gradians
• поворот: угол по очереди

<точка>

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

[[<длина> <длина>] | [<процент> | <процент>]]

<цветная остановка>

Остановки на синтаксис цветной остановки W3C.

[ <цвет> [ <процент> | <длина>]? ]

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

"красные, белые 70 %, синих", допустимо начиная с расстояния для красного, и синими, как предполагается, составляют 0 % и 100 %, соответственно.

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

"красные, белые 70, синие", не допустимо, так как единицы расстояния не соглашаются.

"красный, белый, синий" допустимо. Остановки распределяются равномерно между 0 % и 100 %.

<туры>

url ([\"\']? <адрес> [\" \']?)

<адрес> может быть абсолютным URI, например:

url (http://example.com)
url ('http://example.com')
url ("http://example.com")

или это может быть относительно расположения файла CSS.

<эффект>

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

Падающая тень

Высокоуровневый эффект, который представляет тень данного контента позади контента.

dropshadow (<тип размытости>, <цвет>, <число>, <число>, <число>, <число>)

<тип размытости> = [гауссов | одно поле передачи | три поля передачи | два поля передачи]
<цвет> теневой Цвет.
<число> радиус теневого ядра размытости. В диапазоне [0.0... 127.0], типичное значение 10.
<число> распространение тени. Распространение является частью радиуса, где содействие исходного материала составит 100 %. Остающейся части радиуса будет управлять содействием ядро размытости. Распространение 0.0 приведет к распределению тени, определенной полностью алгоритмом размытости. Распространение 1.0 приведет к основательному росту, исходящему из исходной непрозрачности материала к пределу радиуса с очень резким сокращением к прозрачности в радиусе. Значения должны быть в диапазоне [0.0... 1.0].
<число> теневое смещение в направлении X, в пикселях.
<число> теневое смещение в направлении Y, в пикселях.

Внутренняя Тень

Высокоуровневый эффект, который представляет тень в краях данного контента.

innershadow (<тип размытости>, <цвет>, <число>, <число>, <число>, <число>)

<тип размытости> = [гауссов | одно поле передачи | три поля передачи | два поля передачи]
<цвет> теневой Цвет.
<число> радиус теневого ядра размытости. В диапазоне [0.0... 127.0], типичное значение 10.
<число> дроссель тени. Дроссель является частью радиуса, где содействие исходного материала составит 100 %. Остающейся части радиуса будет управлять содействием ядро размытости. Дроссель 0.0 приведет к распределению тени, определенной полностью алгоритмом размытости. Дроссель 1.0 приведет к основательному росту внутрь тени от краев до предела радиуса с очень резким сокращением к прозрачности в радиусе. Значения должны быть в диапазоне [0.0... 1.0].
<число> теневое смещение в направлении X, в пикселях.
<число> теневое смещение в направлении Y, в пикселях.

<шрифт>

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

<семейство шрифтов> имя строки семейства шрифтов. Фактическое имя семейства шрифтов, доступное на системе, может использоваться, или одна из следующих универсальных фамилий может использоваться:

• 'засечка' (например, Времена)
• 'гротесковый шрифт' (например, Helvetica)
• 'курсив' (например, Zapf-канцелярия)
• 'фантазия' (например, Западный)
• 'моноширинный' (например, Курьер)

<размер шрифта> размер шрифта, используя <размер> синтаксис.

<стиль шрифта> стиль шрифта, используя следующий синтаксис:
[нормальный | курсив | наклонный]

<насыщенность шрифта> вес шрифта, используя следующий синтаксис:
[нормальный | полужирный | более смелый | легче | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]

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

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

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

<краска>

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

<цвет> | <линейный градиент> | <радиальный градиент>

Линейные Градиенты <линейный градиент>

линейный градиент ([[от <точки> до <точки>] | [<стороне-или-углу>],]? [[повторитесь |, отражаются],]? <цветная остановка> [<цветная остановка>] +)

где <сторона-или-угол> = [оставленный | право] || [вершина | нижняя часть]

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

Если ни повторение, ни отражение не даются, то значения по умолчанию CycleMethod "NO_CYCLE".
Если ни одному [от <точки> до <точки>], ни [<стороне-или-углу>] не дают, то значения по умолчанию направления градиента к 'к нижней части'.
Остановки на синтаксис цветной остановки W3C и нормализуются соответственно.

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

линейный градиент (к нижнему правому, красному, черному)

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

линейный градиент (от 0 % 0 % до 100 % 100 %, красных 0 %, черных 100 %)

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

линейный градиент (от 0px 0px к 0px 50px, серый, darkgray 50 %, dimgray 99 %, белых)

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

линейный (<размер>, <размер>) к (<размер>, <размер>) остановки [(<число>, <цвет>)] + [повторение | отражаются]?

Радиальные Градиенты <радиальный градиент>

радиальный градиент ([угол фокуса <угол>,]? [расстояние фокуса <процент>,]? [центр <точка>,]? радиус [<длина> | <процент>] [[повторение | отражается],]? <цветная остановка> [<цветная остановка>] +)

Если ни повторение, ни отражение не даются, то значения по умолчанию CycleMethod "NO_CYCLE".
Остановки на синтаксис цветной остановки W3C и нормализуются соответственно.

Следующее является примерами использования радиального градиента:

радиальный градиент (радиус 100 %, красных, darkgray, черный)

радиальный градиент (угол фокуса 45 градусов, расстояние фокуса 20 %, центрируют 25 % 25 %, радиус 50 %, отражаются, серый, darkgray 75 %, dimgray),

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

радиальный [угол фокуса <число> | <число>]]? [расстояние фокуса <размер>]? [центр <размер, размер>]? <размер> остановки [(<число>, <цвет>)] + [повторение | отражаются]?

<цвет>

<именованный цвет> | <искал цвет> | <rgb-цвет> | <hsb-цвет> | <цветная функция>

Названные Цвета <именованный цвет>

CSS поддерживает набор именованных постоянных цветов. Названный цветами может быть определен с только их неупомянутым именем например:

.button {
   - fx-цвет-фона: красный;
}

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

Смотревшие Цвета <искал цвет>

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

В следующем примере весь цвет фона всех кнопок использует искавшую цветную "abc".

.root {abc: #f00}
.button {-fx-цвет-фона: abc}

Цвета RGB <rgb-цвет>

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

#<digit><digit><digit>
| #<digit><digit><digit><digit><digit><digit>
| rgb (<целое число>, <целое число>, <целое число>)
| rgb (<целочисленный> %, <целочисленный> %, <целочисленный> %)
| rgba (<целое число>, <целое число>, <целое число>, <число>)
| rgba (<целочисленный> %, <целочисленный> %, <целочисленный> %, <число>)

Эти примеры все определяют тот же самый цвет:

em {цвет: #f00}/* #rgb */em {цвет: #ff0000}/* #rrggbb */em {цвет: rgb (255,0,0)}
em {цвет: rgb (100 %, 0 %, 0 %)} em {цвет: rgba (255,0,0,1)}

Шестнадцатеричный RGB: формат значения 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 + Альфа: Это - расширение цветовой модели RGB, чтобы включать 'альфа-' значение, которое определяет непрозрачность цвета. Это выполняется через функциональный синтаксис формы rgba (...) формируются, который берет четвертый параметр, который является альфа-значением. Альфа-значение должно быть числом в диапазоне 0.0 (представление абсолютно прозрачного) и 1.0 (абсолютно непрозрачный). Как с rgb () функция, красные, зеленые, и синие значения могут быть десятичными целыми числами или процентами. Следующие примеры все определяют тот же самый цвет:

em {цвет: rgb (255,0,0)}/* целое число располагаются 0 - 255*/em {цвет: rgba (255,0,0,1)/* то же самое, с явной непрозрачностью 1 */em {цвет: rgb (100 %, 0 %, 0 %)}/* пускают в ход диапазон 0.0 % - 100.0 % */em {цвет: rgba (100 %, 0 %, 0 %, 1)}/* то же самое, с явной непрозрачностью 1 */

Цвета HSB <hsb-цвет>

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

hsb (<число>, <число> %, <число> %) | hsba (<число>, <число> %, <число> %, <число>)

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

Цветные Функции <цветная функция>

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

<произойдите> | <лестничная структура>

Произойдите <происходят>

произойдите (<цвет>, <число> %)

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

Лестничная структура <лестничная структура>

лестничная структура (<цвет>, <цветная остановка> [<цветная остановка>] +)

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

Остановки на синтаксис цветной остановки W3C и нормализуются соответственно.

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

фон: белый;
-fx-text-fill: лестничная структура (фон, белые 49 %, черные 50 %);

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

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

лестничная структура (<цветные>) остановки [(<число>, <цвет>)] +

Узлы

Узел

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

Сцена

Стиль class: сцена

У объекта Сцены нет никаких устанавливаемых свойств CSS, и при этом у него нет никаких псевдоклассов. Однако, корневой узел сцены присваивается стиль class "корень" (кроме того, чтобы разработать классы, уже присвоенные узлу). Это полезно, потому что корневой узел Сцены является корневым контейнером для всех активных узлов графика сцены. Таким образом это может служить контейнером для свойств, которые наследованы или ищутся.

ImageView

AnchorPane

BorderPane

FlowPane

GridPane

HBox

Область

Область

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

Каждая Область состоит из нескольких уровней, нарисованных от нижней части до вершины, в этом порядке:

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

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

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

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

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

Перечеркиваемые границы определяются со свойствами-fx-border-color,-fx-border-style,-fx-border-width,-fx-border-radius и-fx-border-insets. Каждое свойство содержит серию элементов. Число элементов в-x-свойство цвета границы определяет число границ, которые красятся. Каждая граница в ряду красится, используя информацию от соответствующего серийного элемента-fx-border-style,-fx-border-width,-fx-border-radius, и-fx-border-insets свойства.

Границы изображения определяются со свойствами-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-insets свойства.

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

StackPane

TilePane

VBox

Форма

Дуга

У узла Дуги есть все свойства Формы и Узла.

Круг

У Кругового узла есть все свойства Формы и Узла.

CubicCurve

У узла CubicCurve есть все свойства Формы и Узла.

Эллипс

У узла Эллипса есть все свойства Формы и Узла.

Строка

У узла Строки есть все свойства Формы и Узла.

Путь

У узла Пути есть все свойства Формы и Узла.

Многоугольник

У узла Многоугольника есть все свойства Формы и Узла.

QuadCurve

У узла QuadCurve есть все свойства Формы и Узла.

Прямоугольник

SVGPath

У узла SVGPath есть все свойства Формы и Узла.

Текст

В JavaFX 2.0 кожа значения по умолчанию для всего моделирования поддержки средств управления из CSS. Это выполняется, создавая кожу из объектов расположения, названных Областями. Большинство свойств стиля для управления обеспечивается объектами Области, которые включают кожу управления. У каждого объекта Области подструктуры кожи есть свой собственный стиль class так, чтобы это могло быть разработано определенно. Само управление будет иногда обеспечивать свойства CSS в дополнение к обеспеченным его Областями. Наконец, средства управления могут также определить псевдоклассы, такие как "вертикаль" и "горизонталь" в дополнение к определенным Узлом.

Аккордеон

Стиль class: аккордеон

У управления Аккордеоном есть все свойства и псевдоклассы Управления

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

• "сначала названная область" - первый TitledPane

Кнопка

Стиль class: кнопка

У Кнопочного управления есть все свойства ButtonBase

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

ButtonBase

У управления ButtonBase есть все свойства Маркированных

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

Ячейка

Стиль class: ячейка

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

CheckBox

Стиль class: флажок

У управления CheckBox есть все свойства ButtonBase

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

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

• поле — StackPane
• метка — StackPane

CheckMenuItem

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

ChoiceBox

Стиль class: поле выбора

У управления ChoiceBox есть все свойства и псевдоклассы Управления

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

• открытая кнопка — Область
  • стрелка — Область

Управление

У Управления class есть все свойства Родителя

Гиперссылка

Стиль class: гиперссылка

У управления Гиперссылкой есть все свойства ButtonBase.

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

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

• метка — Метка

IndexedCell

Стиль class: индексированная ячейка

У управления IndexedCell есть все свойства Ячейки.

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

Метка

Стиль class: метка

У метки есть все свойства и pseudo-class состояние Маркированных

Маркированный

ListCell

Стиль class: ячейка списка

У управления ListCell есть все устанавливаемые свойства и псевдоклассы IndexedCell.

ListView

Стиль class: представление списка

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

Меню

Стиль class: меню

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

MenuBar

Стиль class: строка меню

У MenuBar есть все свойства и pseudo-class уровень контроля

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

• меню

MenuButton

Стиль class: кнопка меню

У управления MenuButton есть все свойства ButtonBase

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

MenuItem

Стиль class: пункт меню

PasswordField

Стиль class: поле пароля

У управления PasswordField есть все свойства TextField

ProgressBar

Стиль class: индикатор выполнения

У управления ProgressBar есть все свойства и pseudo-class состояние ProgressIndicator

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

• дорожка - StackPane
• панель — Область

ProgressIndicator

Стиль class: индикатор хода выполнения

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

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

• индикатор — StackPane
• продвижение - StackPane
• процент - текст
• галочка - StackPane

RadioButton

Стиль class: переключатель

У управления RadioButton есть все свойства ToggleButton

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

• радио — Область
  • точка — Область
• метка — Метка

RadioMenuItem

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

ScrollBar

Стиль class: полоса прокрутки

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

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

• декрементная кнопка — StackPane
• декрементная стрелка — StackPane
• дорожка — StackPane
• ползунок — StackPane
• кнопка инкремента — StackPane
• стрелка инкремента — StackPane

ScrollPane

Стиль class: область прокрутки

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

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

• прокрутите-bar:vertical — ScrollBar
• прокрутите-bar:horizontall — ScrollBar
• угол - StackPane

Разделитель

Стиль class: разделитель

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

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

• строка — Область

Ползунок

Стиль class: ползунок

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

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

• ось — NumberAxis
• дорожка — Область
• ползунок — Область

SplitMenuButton

Стиль class: кнопка меню разделения

SplitPane

Стиль class: разделенная область

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

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

• делитель разделенной области — StackPane
• вертикальное средство захвата — StackPane
• горизонтальное средство захвата — StackPane

TabPane

Стиль class: область вкладки

Отметьте: styleclass является "плаванием области вкладки", если TabPane плавает.

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

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

• область заголовка вкладки — StackPane
• область заголовков - StackPane
• фон заголовка вкладки - StackPane
• вкладка кнопок управления - StackPane
• "снабдите вкладками вниз кнопку" - Область
• стрелка - StackPane
• вкладка - Вкладка
• метка вкладки - Метка
• близкая кнопка вкладки - StackPane
• область контента вкладки — StackPane

TableView

Стиль class: табличное представление

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

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

• "столбец изменяет размеры строки" - Область
• оверлей столбца - Область
• заполнитель - StackPane
• фон заголовка столбца - StackPane
• "вложенный заголовок столбца"
• заголовок столбца
• заполнитель - Область
• "шоу скрывает кнопку столбцов" - StackPane
• "шоу скрывает изображение столбца" - StackPane
• "столбец перетаскивает заголовок" - StackPane
• метка - Метка

TextArea

Стиль class: текстовая область

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

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

• контент - Область

TextInputControl

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

TextField

Стиль class: текстовое поле

У TextField есть все свойства и pseudo-class состояние TextInputControl

TitledPane

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

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

• title — HBox
• текст — Метка/литий>
• кнопка стрелки — StackPane/li>
  • стрелка — StackPane
• контент — StackPane/li>

ToggleButton

Стиль class: выключатель

У управления ToggleButton есть все свойства ButtonBase.

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

ToolBar

Стиль class: панель инструментов

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

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

• "панель инструментов переполняет кнопки" - StackPane
• стрелка - StackPane

Подсказка

Стиль class: подсказка

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

• метка — Метка
• угол страницы — StackPane

TreeCell

Стиль class: древовидная ячейка

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

TreeView

Стиль class: структурный вид

У TreeView есть весь properites и pseudo-class уровень контроля

Диаграммы

AreaChart

CSS Свойство	Значения	Значение по умолчанию	Комментарии
Имеет все свойства XYChart

BarChart

CSS Свойство	Значения	Значение по умолчанию	Комментарии
-fx-bar-gap	<число>	4
-fx-category-gap	<число>	10
Имеет все свойства XYChart

BubbleChart

CSS Свойство	Значения	Значение по умолчанию	Комментарии
Имеет все свойства XYChart

LineChart

CSS Свойство	Значения	Значение по умолчанию	Комментарии
-fx-symbol-visible	<булев>	истина
Имеет все свойства XYChart

ScatterChart

CSS Свойство	Значения	Значение по умолчанию	Комментарии
Имеет все свойства XYChart

PieChart

CSS Свойство	Значения	Значение по умолчанию	Комментарии
-fx-clockwise	<булев>	истина
-fx-pie-label-visible	<булев>	истина
-fx-label-line-length	<размер>	20
-fx-start-angle	<число>	0
Имеет все свойства Диаграммы

Ось

Стиль class: ось

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

• метка оси — текст
• метка оси — Путь
• метка — текст

ValueAxis

Стиль class: ось

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

• незначительная метка оси — Путь

ValueAxis

Стиль class: ось

CategoryAxis

Стиль class: ось

Легенда

Стиль class: легенда диаграммы

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

• элемент легенды диаграммы - Метка
• "стройте диаграмму символа элемента легенды" - Узел

Ссылки

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

[2] CSS 3 работает происходящий http://www.w3.org/Style/CSS/current-work (май 2010).

[3] Пути SVG: http://www.w3.org/TR/SVG/paths.html

[4] CSS Фоны и Уровень 3 Модуля Границ (май 2010): http://www.w3.org/TR/css3-background/

Copyright (c) 2008, 2011, Oracle и/или его филиалы. Все права защищены. Использование подвергается срокам действия лицензии.