直接参考QT文档(the style sheet syntax)翻译一部分
Qt Style Sheet的术语和语法与HTML CSS几乎完全相同(也就是说还是有些不同的)。
1、 Style Rules
示例:
QPushButton { color: red }
样式规则(style rule ):由 选择器+声明 构成
选择器:指明规则的影响对象——QPushButton
多个选择器有相同声明时可以写到一起用“,”隔开:QPushButton, QLineEdit, QComboBox { color: red }
声明:指定了构件哪些属性要设置及设置的样式——{ color: red }
声明必须写在“{ }”中,由一对 属性:值 构成一个语句,多个语句间用“;”分隔。也可以多值属性:Value1 value2 value3 ..;
具体的属性请去官网查看,需要说一下,例如:border你必须设置好border-style:solid
,并且设置好border-width才能看到它,不然你设置了颜色也看不到,其它的类似。属性表的有“*”号的是QT独有的,CSS里没有。一般都通用所有widget,除非特别指出了,比如。text-align,只有QPushButton 和 QProgressBar.才能用,哭死。。
样式表(Style sheets):由一组 样式规则 序列 组成(注意序列,因为排序对规则是有影响的,可参见Conflict Resolution一节)
QT样式表一般是不区分大小,除了几个例外( class names, object names, and Qt property names),即color, Color, COLOR, 和 cOloR都是指同一个颜色属性
2、 Selector Types
Qt Style Sheets 支持所有的 在 CSS2定义的选择器的书写模式,下面列举几个常用的.
Selector 例子 说明 通配选择器 * 匹配所有widgets. 类型选择器 QPushButton 匹配所有 QPushButton类及其全部子类的实例 属性选择器 QPushButton[flat=”false”] 匹配所有QPushButton类中属性flat=”false”的实例 子类选择器 .QPushButton 匹配所有QPushButton类(不包含它的子类)的实例,排除了子类哟 ID选择器 QPushButton#okButton 匹配QPushButton类中指明了ID叫okButton的实例 Descendant Selector QDialog QPushButton 匹配所有派生自QDialog的QPushButton类的实例,可以是多重派生下来的, Child Selector QDialog > QPushButton 匹配所有直接从QDialog派生下来的QPushButton的实例,只能单重派生下来的,即children,不能是grandchildren 举个例子,在用右键单击改变样式表给MAINWINDOW控件写QT样式表时通常该窗口下的所有控件都跟着变化了,因为其默认是类型选择器模式,所以要想不影响窗口里面的子控件就需要用
QMainWindow#Mainwindow{...}
这样的方式了,
3、 Sub-Controls(子控件)—::
对复杂小部件进行样式化,就必定要访问该部件的子控件,例如QComboBox的下拉按钮或QSpinBox的上下箭头。QT选择器可以包含子控制,这使得它可以将规则的应用限制到特定的子控件上。例如:
QComboBox::drop-down { image: url(dropdown.png) }
/* 这样对所有QComboBox的下拉按钮进行了样式设置。*/
4、 Pseudo-States(伪状态)—:
选择器可以包含伪状态,其表示基于小部件的状态来限制规则的应用。伪状态要放要选择器或子控件的尾端,两者之间用冒号“:”分隔。例如:
QPushButton:hover { color: white }
/* 鼠标悬停在QPushButton时颜色为白*/
QComboBox::drop-down:hover { image: url(dropdown_bright.png) }
伪状态可以用“!”来取反,也可以串联多个伪状态,之间用“:”隔开,串联的伪状态必须都满足才用应用规则如下:
QPushButton:hover:!pressed { color: blue; }
/* 鼠标悬停在QPushButton时并且未按下时颜色为蓝*/
伪状态也可以并联,之间用“,”隔开,如下:
QCheckBox:hover, QCheckBox:checked { color: white }
/* 鼠标悬停在QCheckBox或者QCheckBox被勾选时时颜色为白*/
5、 Conflict Resolution(冲突解决机制)
一般我们都会遇上这样的问题:不同的样式规则作用在同一个控件属性,那到底应该用哪个呢?比如:
QPushButton#okButton { color: gray }
QPushButton { color: red }
QPushButton
作用在所有的点击控件上,但上面还指明了叫okButton
的点击控件又是另一种颜色,那到底用哪种呢?
QT的规则是:
优先特异性(specificity)清晰的,就是表述精确的覆盖表述模糊的属性
如:有伪状态的优先于没有伪状态的,具体的ID控件优先类控件等等QPushButton:hover { color: white } QPushButton { color: red }
QPushButton#okButton { color: gray } QPushButton { color: red }
如果特异性级别没差,则按规则顺序,后者覆盖前者。
QPushButton:hover { color: white } QPushButton:enabled { color: red }
鼠标移过一个按下去的QPushButton时,它是红色的,
QPushButton:enabled { color: red } QPushButton:hover { color: white }
鼠标移过一个按下去的QPushButton时,它是白色的
特别的,有继承关系的类之间是没有特异性差异的,无论你是否为更具体的类,如
QPushButton { color: red } QAbstractButton { color: gray }
所有的属于QAbstractButton类的控件都是灰色的,包括QPushButton类(因为QPushButton是继承自QAbstractButton,也属于QAbstractButton),
具体的一个选择器的特异性量度规则参见CSS2 Specification,
通过统计各属性的数量来计算,计算结果用三个变量(a,b,c)来保存,最终结果为 x = a*100+b*10+c,计算出的数值越大越优先。- a:统计选择器中ID属性的个数;
- b:统计选择器其它属性和伪状态的个数;
c:统计选择器元素名的个数;
示例如下:* {} /* a=0 b=0 c=0 -> specificity = 0 */ LI {} /* a=0 b=0 c=1 -> specificity = 1 */ UL LI {} /* a=0 b=0 c=2 -> specificity = 2 */ UL OL+LI {} /* a=0 b=0 c=3 -> specificity = 3 */ H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */ UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */ LI.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */ #x34y {} /* a=1 b=0 c=0 -> specificity = 100 */
6、 QT 样式各部分的可用参数导航:
列表导航:
- 支持样式表的Widgets
- Widgets支持的样式属性
- 样式属性的参数类型列表
比如对齐模式Alignment有哪些可选参数,Border Style可以支持哪几种。。。 - 支持的伪状态
- 支持的子控件
描述项里列出了支持该子控件的widgets