На этом шаге рассмотрим синтаксис параметров и целевых элементов CSS.

    Типичный синтаксис параметров и целевых элементов CSS выглядит следующим образом:

селектор {свойство: значение}

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

QLineEdit {color: red}

    Определение состоит из свойств и значений, а если их несколько, то они отделяются друг от друга точкой с запятой, например:

QLabel {
       color: red;
       background-color: white;
}

    Цвет можно задавать названием в формате RGB или в HTML-стиле:

QLabel {
       color: rgb(255, 0, 0);
       background-color: #FFFFFF;
}

    При помощи свойства background-image мы можем задать растровое изображение для заднего фона виджета. Например:

QLabel {
       background-image: url(pic.png);
}

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

QPushButton, QLineEdit, QLabel {color: red}

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

.PushButton {color: red}

    Для применения определений сразу ко всем виджетам приложения нужно указать вместо имен звездочку (*).

    Можно ограничить применение к виджетам с определенным именем объекта, так, например, QLabel#MyLabel инструктирует задействовать описанный далее стиль только у виджетов QLabel с именем объекта "MyLabel".

    Если вы хотите применить стиль к собственному классу, который находится в пространстве имен, например:

namespace MyNameSpace {
          class MyClass : public QWidget {
          ...
          };
}

    то к нему в CSS можно обратиться и изменить его внешний вид следующим образом:

MyNameSpace—MyClass {
                    background-colode: black;
                    color: white;
}

    Каскадный стиль не чувствителен к регистру, например: COLOR = color = CoLoR и т. д. Исключение составляют лишь имена классов.

    Комментарии в стандарте CSS помещаются, как и в языке С/C++, внутрь последовательности символов /* */, например:

/* комментарий */

    На следующем шаге рассмотрим изменение составных элементов.

Предыдущий шаг Содержание Следующий шаг