Qt应用———Qt Style sheets样式表（2）

2、style sheet句法（the Style Sheet Syntax）

Qt Style Sheet的术语和句法规则几乎与HTML CSS的完全一样。如果你已经了解CSS，你可以快速浏览这一章内容。

Style Rules

Style Sheets（样式表）是由一系列的style语句规则构成的。一条style语句由一个选择语句和一个声明语句构成。选择语句指明了哪一个控件被这条语句影响；声明语句指明了这个控件的哪一个特性被设置。

QPushButton {color : red}

在上面这条语句中，QPushButton就是选择语句，{color : red}是声明语句。这条语句指明了QPushButton和它的子类（比如MyPushButton）将使用红色作为前景色（即文本色）。

Qt Style Sheet一般都是不区分大小写的（即color Color COLOR 和cOlOr都是指一个属性）。唯一的例外就是class名称，object名称和Qt property名称是区分大小写的。

几个选择语句可以在同一个声明中指出，用逗号将这些选择语句分开，例如下面这句：

QPushButton, QLineEdit, QComboBox {color :red}

等价于：

QPushButton{color :red}

QLineEdit {color :red}

QComboBox {color :red}

Style语句的声明部分是 property:value,闭合的大括号和用于隔开的分号构成，例如：

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

Qt widgets提供的属性（property）列表可以查询下面的List of Properties章节。

Selector Types(选择器的类型)

目前为止所有的例子都是用的最简单的选择器类型，类型选择器。Qt Style Sheets支持所有在CSS2中定义的选择器。下面这个表总结了最常用到的选择器类型。

Selector	Example	Explanation
Universal selector	*	匹配所有控件
Type Selector	QPushButton	匹配QPushButton及其子类的实例
Property Selector	QPushButton[flat=”false]
Class Selector	.QPushButton	适用于QPushButton的实例，但是不适用与其子类
ID Selector	QPushButton#okButton	适用于所有object name是okButton的QPushButton实例（用名字指明哪一个控件）
Descendant Selector	QDialog QPushButton	适用于是QDialog的派生类（子类）的QPushButton实例
Child Selector	QDialog > QPushButton	适用于QDialog直接子类的QPushButton实例

Sub-Controls（子控件）

设计复杂的控件风格，必然需要访问widget的子控件，比如QComboBox的下拉按钮，或者QSpinBox的上下箭头。选择器可能包含子控件，这就可能限定了具体widget子控件的语句的应用。比如：

QComboBox::drop-down { image: url(dropdown.png)}

上面的语句设定了所有QComboBox的下拉按钮的风格。虽然这种双冒号的句法让人回想起CSS3的伪元素，Qt子控件在概念上是与其不同的，并且有不同的级联语义。

子控件总是与另一个元素——参数元素放在一起。这个参数元素可能是widget或者另一个子控件。例如，QComboBox的：：drop-down默认放置在QComboBox方形区域的右上角。：：drop-down默认放置在：：drop-down子控件内容区域的中间。看看接下来子控件的the list of Stylable Widgets来设置widget和其默认位置的风格。

使用subcontrol-origin属性可以改变使用的原始矩形。例如，如果我们想要将drop-down放置在QComboBox的边距矩形取代默认的填充矩形，我们可以指出：

QComboBox {

       Margin-right:20px;

}

QComboBox::drop-down {

       Subcontrol-origin:margin;

}

在边距矩形中的drop-down的对齐方式可以使用subcontrol-position属性来改变。

Width 和height属性可以用来控制子控件的大小。注意：设置一个图片也会隐形的设置子控件的大小。

相对位置项（position:relative）使子控件的位置偏移它的初始位置。例如，当QComboBox的drop-down按钮被按下后，我们可能喜欢里面的箭头偏移来给人一种按下的感觉。要达到这种目的，我们可以指明：

QComboBox::down-arrow {

       Image:url(down_arrow.png);

}

QComboBox::down-arrow:pressed {

       Position : relative;

       Top: 1px;left: 1px;

}

绝对位置项（position:absolute）,允许子控件的位置和大小通过相关参数元素进行修改。一旦设定好位置，将会跟widget一样处理，并且可以使用box model来设定风格。

看看接下来的List of Sub-Controls一节来查看支持的子控件，并查阅例程。

注意：对于复杂的widget控件比如QComboBox和QScrollBar，如果一个属性或者子控件已经设定了，所有的其他属性或者子控件也必须设定。