Использование индивидуальных таблиц стилей подразумевает необходимость создания и активации файлов *.css.
Файлы CSS содержат наборы правил стилей. Каждое правило стиля состоит из двух элементов: селектора и блока объявлений.
Селектор указывает на виджеты, к которым применяется правило. Блок объявлений задает подлежащие изменению свойства виджета(ов).
Ниже приведены несколько примеров, демонстрирующих применение общих правил в файле CSS, а также применение файлов CSS к панелям.
ПРИМЕР
QPushButton { color: red }
В примере в качестве селектора выступает класс кнопок QPushButton. Блоком объявлений является { color: red }. Данное правило устанавливает красный цвет рисунка для всех кнопок.
ПРИМЕР
QLineEdit, QComboBox { color: red; background-color: white }
Один и тот же блок объявлений может использоваться совместно с несколькими селекторами, перечисляемыми через запятую (,).
PanelQT#myPanel QMenu { background-color: white }
PanelQT[type=»configuration»] { background-color: darkgray }
Для более точного указания объектов используются селекторы потомков и селекторы идентификаторов. В примере выше красный цвет фона применяется во всплывающих меню (QMenu) только в том случае, если они открываются в составе панели с именем «myPanel». Цвета фона панелей, имеющих тип «configuration», изменяется на темно-серый.
ПРИМЕЧАНИЕ
В том случае, если имя или тип панели/виджета изменяется во время выполнения программы, таблица стилей должна быть повторно применена при помощи функции «setApplicationProperty()«.
В одном блоке объявлений могут быть указаны несколько свойств. Свойства перечисляются в скобках ({}) и разделяются точкой с запятой.
Все записи свойств (в файле CSS), как правило, нечувствительны к регистру. Т.е. записи, созданные с использованием нижнего и верхнего регистров, интерпретируются одинаково. Исключением являются имена классов, имена объектов и имена свойств Qt, которые чувствительны к регистру.
Ниже в таблице приведен список наиболее важных селекторов.
ПРИМЕЧАНИЕ
Размер шрифта виджета «Вкладка» может быть задан только путем использования QTabBar (вместо QTabBar::tab).
ПРИМЕЧАНИЕ
Каждый виджет обладает свойством «Type» (тип), которое может использоваться в файле CSS в качестве селектора с возможностью определения дополнительных уровней отбора (см. таблицу выше). Пример: изменение цвета на красный для всех кнопок, которые используются для подачи команд закрытия (тип «BtnClose»).
| Widget[type = «BtnClose»] { color: red } |
ПРИМЕЧАНИЕ
При использовании атрибута «type» классов QCheckBox или QRadioButton следует использовать вышестоящий класс «MultiLabeledParent«, например:
| MultiLabeledParent[type = «STYLE»] QCheckBox { color: red } |
ПРИМЕР
Далее представлен внешний вид панели ASCIIMan.pnl без применения и при применении таблицы стилей. Оба рисунка дают представление о возможностях управления внешним видом панелей при помощи файлов CSS.
Рисунок: AsciiMan.pnl без применения таблицы стилей
Рисунок: Пример AsciiMan.pnl при применении таблицы стилей
QComboBox, QSpinBox, QLineEdit
{
border: 2px solid blue;
border-radius: 7px;
padding: 0 3px;
background: lightblue;
selection-background-color: darkgray;
}
QComboBox::drop-down
{
border-radius: 7px;
border-left-width: 1px;
border-left-color: darkgray;
border-left-style: solid;
}
QComboBox::down-arrow
{
image: url(pictures:down.xpm);
}
QCheckBox::indicator
{
border: 1px solid blue;
border-radius: 3px;
}
QCheckBox::indicator:checked
{
image: url(pictures:checked.png);
}
MultiLabeledParent { background: rgba(0, 0, 0, 0); }
QPushButton
{
border: 2px solid rgb(255, 167, 43);
background: rgb(255, 224, 137);
border-radius: 7px;
font-family: «New Century Schoolbook»;
font-size: 14px;
font-style: bold;
}
PanelQT
{
background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 1, stop: 0 #FFAFC0, stop: 1 #FFFFFF);
}
TrendPlot, TrendScaleQT, ClockQT
{
background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 1, stop: 0 #03AFC0, stop: 1 #FF77FF);
}