Основы

[SheeZe]

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

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

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

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

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

Code: Select all

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


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

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

Code: Select all

.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, пример такой:

Code: Select all

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


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

Как навесить один и тот же стиль на все кнопки?
Описание базового css класса для кнопок.

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

Code: Select all

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

Code: Select all

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


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

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

Как задать свойство color в css стилях?
Аналог свойства color из мира веб технологий.

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

Code: Select all

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


Как навесить один и тот же стиль на несколько css классов?
Для этого предусмотрен следующий синтаксис:

Code: Select all

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


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

Полная инструкция по Java FX CSS