[редактировать]

JavaFX CSS

• Что такое CSS стиль и класс?
• Как изменить стиль, цвет и т.п. при наведении?
• Как навесить один и тот же стиль на все кнопки?
• Как написать css стиль к форме?
• Как задать свойство color в css стилях?
• Как навесить один и тот же стиль на несколько css классов?

---

Что такое CSS стиль и класс?

Описание концепции CSS стилей.

CSS это система, которая позволяет менять внешний вид ваших программ, это похоже на систему скинов, где скин описывается текстом с определенными правилами. Если вы знакомы с web технологиями, то вам это знакомо.

В develnext применяются css стили для скинирования программ, правда немного видоизмененные, с дополнительными возможностями.

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

-fx-font-size: 11px;
-fx-font-weight: bold;

Т.е. у нас идет набор свойств -fx-font-size и -fx-font-weight, а после двоиточия следует их значения.

Описание стилей в файле

Для описания стилей в файле нужно использовать специальные метки CSS классы, их можно задавать в свойстве каждого визуального объекта, у каждого объекта может быть несколько css классов. Синтаксис css файла таков:

.fantasy-button {
   -fx-font-size: 11px;
   -fx-font-weight: bold;
}

fantasy-button это имя css класса, которое указывается у объектов. Этот стиль будет действовать на все объекты, у которых есть css класс fantasy-button, обратите внимание на точку в начале в css файле, она обязательная только в css файле, указывать ее у объектов НЕ НУЖНО!

Префикс FX

Если вы не заметили, то все свойства начинаются с префикса -fx-, это особенность платформы. Все свойства всегда начинаются с этого префикса. Это префикс вендора платформы JavaFX, просто запомните это.

Это также означает, что некоторые свойства имеют иную логику работы отличающуюся от веба, а некоторые свойства вообще отсутствуют в вебе, например -fx-text-fill.

---

Как изменить стиль, цвет и т.п. при наведении?

Описание псевдо стиля hover.

Для этого в css есть специальный псевдо стиль :hover, пример такой:

.button:hover {
    -fx-text-color: blue;
}

Пишем класс, а затем :hover и все стили будут применяться при наведении на объект с данным классом.

---

Как навесить один и тот же стиль на все кнопки?

Описание базового css класса для кнопок.

У всех кнопок в develnext всегда есть css класс button, поэтому через него можно задать стиль всем кнопкам в программе в файле css стилей:

.button {
    -fx-background-color: red;
    -fx-border-radius: 4px;
    -fx-text-fill: white;
    -fx-cursor: hand;
    -fx-effect: dropshadow(three-pass-box, gray, 10px, 0, 0, 0);
}

.button:hover {
    -fx-background-color: orangered;
}

.button:pressed {
    -fx-background-color: orange;
}

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

---

Как написать css стиль к форме?

Описание возможностей по написанию стилей к самой форме.

Описывайте стиль формы в файле CSS стилей, все формы в develnext имеют класс root:

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

Этот стиль сделает все формы в проекте красными после старта.

Важно знать, что приоритет стилей выше, чем свойства и настройки объектов и форм.

---

Как задать свойство color в css стилях?

Аналог свойства color из мира веб технологий.

В CSS стилях develnext нет свойства color, вместо него надо использовать свойство -fx-text-fill:

.my-button {
   -fx-text-fill: #384DFD;
}

---

Как навесить один и тот же стиль на несколько css классов?

Для этого предусмотрен следующий синтаксис:

.button, .label {
    -fx-text-fill: gray;
}

Вы просто пишите несколько css класcов через запятую, можно писать и с псевдо-классами, например с :hover.