Qt自己的css简称qss

借用css 的灵感， Qt也支持Qt自己的css, 简称qss。同css 相似，qss的主要功能与最终目的都是能使界面的表现与界面的元素分离，即质与形的分离，就如同一个人可以在不同的时候穿上不同的衣服一样，css机制的引入，使得设计一种皮肤与界面控件分离的软件成为可能，应用程序也能像web界面那样随意地改变外观。

一、QSS语法

同css一样，他也有由一个selector与一个declaration组成，selector指定了是对哪一个控件产生效果，而declaration才是真正的产生作用的语句。如：
QPushButton { color: red }
QPushButton指定了是对所有的QPushButton或是其子类控件（如用户定义的MyPushButton）产生影响，而color:red表明所有的受影响控件的前景色都为red。
除了“类名”，“对象名”，“Qt属性名”这三样东西是大小写敏感的外其他的东西都是大小写不敏感的，如color与Color代表同一属性。
如果有几个selector指定了相同的declaration, 可以使用逗号（,）将各个选择器分开，如：
QPushButton, QLineEdit, QComboBox { color: red }
他相当于：
QPushButton { color: red }
QLineEdit { color: red }
QComboBox { color: red }
declaration部份是一系列的（属性：值）对，使用分号（;）将各个不同的属性值对分开，使用大括号（{}）将所有declaration包含在一起。

1、 一般选择器（selector）

Qt支持所有的CSS2定义的选择器，其祥细内容可以在w3c的网站上查找http://www.w3.org/TR/CSS2/selector.html ， 其中比较常用的selector类型有：

• 通用类型选择器：* 会对所有控件有效果。
• 类型选择器：QPushButton匹配所有QPushButton的实例和其子类的实例。
• 属性选择器：QPushButton[flat=”false”]匹配所有QPushButton属性flat为false的实例，属性分为两种，静态的和动态的，静态属性可以通过Q_PROPERTY() 来指定，来动态属性可以使用setProperty来指定，如：
  QLineEdit *nameEdit = new QLineEdit(this);
  nameEdit->setProperty("mandatoryField", true);
  如果在设置了qss后Qt属性改变了，需要重新设置qss来使其生效，可以使用先unset再set qss。
• 类选择器：.QPushButton匹配所有QPushButton的实例，但不包含其子类，这相当于：*[class~="QPushButton"]     ~=的意思是测试一个QStringList类型的属性是否包含给定的QString
• ID选择器：QPushButton#okButton对应Qt里面的object name设置，使用这条CSS之前要先设置对应控件的object name为okButton，如：Ok->setObjectName(tr(“okButton”));
• 后裔选择器：QDialog QPushButton匹配所有为QDialog后裔（包含儿子，与儿子的儿子的递归）为QPushButton的实例
• 子选择器：QDialog > QPushButton匹配所有的QDialog直接子类QPushButton的实例，不包含儿子的儿子的递归。

2、子控件选择器

• 对于复杂的控件，可能会在其中包含其他子控件，如一个QComboxBox中有一个drop-down的按钮。那么现在如果要设置QComboxBox的下拉按钮的话，就可以这样访问：
  QComboBox::drop-down { image: url(dropdown.png) }其标志是（::）
• 子控件选择器是用位置的引用来代表一个元素，这个元素可以是一个单一控件或是另一个包含子控件的复合控件。使用subcontrol-origin属性可以改变子控件的默认放置位置，如：
  QComboBox {
         margin-right: 20px;
  }
  QComboBox::drop-down {
         subcontrol-origin: margin;
  }
  
  如上语句可以用来改变drop-down的margin。
• 相对位置属性可以用来改变子控件相对于最初位置的偏移量，如当一个QCombox的drop-down按钮被按下时，我们可以用一个内部的小偏移量来表示被按下的效果，如下：
  QComboBox::down-arrow {
         image: url(down_arrow.png);
  }
  QComboBox::down-arrow:pressed {
         position: relative;
         top: 1px; left: 1px;
  }
• 绝对位置属性允许子控件改变自己的位置和大小而不受引用元素的控件。一但位置被设定了，这些子控件就可以被当成一般的widget来对待，并且可以使用合模型。关于合模型可以参考下面。

如果你要查看Qt支持哪些子控件选择器，可以参考：http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-sub-controls-syntax.html
3、伪选择器（pseudo-states）

• 伪选择器以冒号（:）表示，与css里的伪选择器相似，是基于控件的一些基本状态来限定程序的规则，如hover规则表示鼠标经过控件时的状态，而press表示按下按钮时的状态。如：
  QPushButton:hover {
         Background-color:red;
  }
  表示鼠标经过时QPushButton背景变红。
• Pseudo还支持否定符号(!)，如：
  QRadioButton:!hover { color: red }
  表示没有鼠标移上QRadioButton时他显示的颜色是red。
• Pseudo可以被串连在一起，比如：
  QPushButton:hover:!pressed { color: blue; }
  表示QPushButton在鼠标移上却没有点击时显示blue字，但如果点击的时候就不会显示blue颜色了。
• 同样可以和之前所讲的子控件选择器一起联合使用，如：
  QSpinBox::down-button:hover { image: url(btn-combobox-press.bmp) }
• 与前面所讲的一样，伪选择器，子控件选择器等都是可以用逗号(,)分隔表示连续相同的设置的，如：
  QPushButton:hover,QSpinBox::down-button, QCheckBox:checked { color: white ;image: url(btn-combobox-press.bmp);} 表示如下
• 更多请参考：http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-pseudo-states

二、 解决冲突

• 使用object name
  
  • 在程序里面要先设置控件的，如：
    btnOne = new QPushButton(centralWidget);
    btnOne->setObjectName(QString::fromUtf8("btnOneCh"));
  • 这样，我们有了一个object name为btnOneCh的QPushButton，试验一下，使用指定object name的方式，如：
    QPushButton#btnOneCh { color: red }
    QPushButton { color: white }
    可以看出，btnOncCh的color变成了red
• 使用伪选择器，如hover，press，enabled等，如：按扭“1”是disable了的，QPushButton:!enabled {color: white}
• 所有的类型选择器都有一个共同的特性，就是如果有两个属性冲突了的话就会以最后出现的一个为准,如：
  QPushButton { color: red }
  QAbstractButton { color: gray }
  由于QPushButton为QAbstractButton的子类，如果只设置QAbstractButton的可以想像结果是所有的QPushButton都为gray, 如果只设置QPushButton的所有QPushButton都会为red，当两个都能设置起效的时候，以在文本上最后出现的为准，所以结果为Grey
• 当然其中如果有#指定了object name，他所设置的优先级是最大的，具体规则可以参考：http://www.w3.org/TR/CSS2/cascade.html#specificity，或是http://pepper.troll.no/s60prereleases/doc/stylesheet-syntax.html#conflict-resolution 
  QPushButton#btnOneCh { color: red }
  QPushButton { color: blue }
  QAbstractButton { color: gray }
  虽然QAbstractButton在最后，但是之前有#btnOneCh指定了QPushButton“一”的color为red所以最后显示也是“一”为red。

三、级联效应

• 子类可以继承父类的StyleSheet，但是如果子类里面设置了StyleSheet与父类里在设置的有冲突，那么当然会优先考虑子类自己的，
  同样，如果在qApp时面设置了，但是在某一个特定控件里面也设置，如果有冲突，也是优先控件自己的，例如，我在程序时面设置了：btnOneEn->setStyleSheet("QPushButton { color: red }");
  而，当我再设置qApp时，如果，将QPushButton的color设置成grey的，那么结果是对于btnOneEn这个QPushButton来说他的颜色还是red。
  这就是为什么这里设置为grey了btnOneEn却还是red的。
• 如果我们对一个控件设置StyleSheet为：
  QPushButton* myPushButton;
  myPushButton->setStyleSheet("* { color: blue }");
  其实他和设置为：myPushButton->setStyleSheet("color: blue");
  效果相同，只是后一种设置不会对QPushButton的子类产生作用，但第一种却会。

四、继承性

与CSS不同的一点，在CSS box模型中，如果一个元素在别一元素的里面，那么里面的元素会自动继承外面元素的属性，但QSS里面不会，如：
一个QPushButton如果放在一个QGroupBox里面，如果：qApp->setStyleSheet("QGroupBox { color: red; } ");
并不代表在QGroupBox里面的QPushButton也会有color:red的属性，如果要想有的话要显示写明，如：qApp->setStyleSheet("QGroupBox, QGroupBox * { color: red; }");
或者在应用程序里面也可以用QWidget::setFont等来设置到子控件的属性。

五、Namespace冲突

类型选择器能够使用到一个特定的类型，如：
class MyPushButton : public QPushButton {
      // ...
}
qApp->setStyleSheet("MyPushButton { background: yellow; }");

因为QSS使用QObject::className来判断要赋与style sheet的控件类型，如果一个用户定义控件类型在一个namespace里面的话，QObject::className会返回<namespace>::<classname> 的名字，这和子控件选择器的语法相冲突，为了解决此问题，使用“--”来代替“::”，比如：
namespace ns {
      class MyPushButton : public QPushButton {
          // ...
      }
}
qApp->setSytleSheet("ns--MyPushButton { background: yellow; }");

六、设置对像属性

如果在程序里面使用Q_PROPERTY设置的属性，可以在qss里面使用：qproperty-<property name>的形式来访问并设置值。如：
MyLabel { qproperty-pixmap: url(pixmap.png); }
MyGroupBox { qproperty-titleColor: rgb(100, 200, 100); }
QPushButton { qproperty-iconSize: 20px 20px; }
如果属性引用到的是一个由Q_ENUMS申明的enum 时，要引用其属性名字要用定义的名称而不是数字。
引用：http://pepper.troll.no/s60prereleases/doc/stylesheet

QProgressBar{  
    color : solid gray;  
    border: 2px solid gray;  
    border-radius: 5px;  
    background: transparent;  
    padding: 0px;  
    text-align : center ;  
}  
QProgressBar::chunk{  
    background: #B22222;  
}  
  
QTextEdit{  
    border: 10px;  
    border-image: url(image/system/border.png)10 10 10 10 ;  
    background-color: rgba(43,45,31,255);  
}  
  
QTextEdit[description="true"]{  
    border: 10px;  
    border-image: none;  
    background-color: rgba(255,255,255,255);  
}  
  
QTextEdit QScrollBar:vertical  {  
     margin: 22px 0 22px 0;  
}  
  
QScrollBar:add-page  
{  
     background-color: rgba(0,0,0,255);  
}  
  
QScrollBar:sub-page  
{  
     background-color: rgba(0,0,0,255);  
}  
  
 QScrollBar::add-line:vertical  {  
  
     background-color: rgba(43,45,31,255);  
     height: 15px;  
     subcontrol-position: bottom;  
     subcontrol-origin: margin;  
 }  
  
 QScrollBar::sub-line:vertical  {  
  
     background-color: rgba(43,45,31,255);  
     height: 15px;  
     subcontrol-position: top;  
     subcontrol-origin: margin;  
 }  
  
QScrollBar::handle:vertical    {      
    border : 2px solid gray;  
    border-radius: 6px;  
    background-color: solid gray;  
    min-height : 12px;  
}  
  
QScrollBar::up-arrow:vertical  
{  
    border-image: url(image/system/button/scroll-up-arrow.png);  
}  
  
QScrollBar::down-arrow:vertical  
{  
    border-image: url(image/system/button/scroll-down-arrow.png);  
}  
  
 QLineEdit#chat_edit{  
    background-color: rgba(20,20,20,255);  
    color: white;  
    border: 10px transparent;  
    height: 20px;  
    border-image: url(image/system/border.png)10 10 10 10 ;  
 }  
  
QStatusBar::item {  
     border: 0px solid grey;  
 }  
   
QStatusBar{  
    background-image: url(image/system/skill-dock.png);  
    color:white;  
}  
  
QMenu[private_pile="true"]{  
    background-color: rgba(43,63,53,200);  
    border-radius: 1px;  
    color: white;  
}  
  
QPushButton[private_pile="true"]{  
    background-color: rgba(43,63,53,200);  
    border-radius: 1px;  
    color: white;  
}  
  
QPushButton[game_control="true"]{  
    border: 0px solid gray;  
    font: 12px;  
    border-radius: 5px;  
    padding: 6px 12px 6px 12px;  
}  
  
QPushButton#pause{  
    background-image: url(image/system/button/pause.png);  
}  
  
QPushButton#play{  
    background-image: url(image/system/button/play.png);  
}  
  
QPushButton#slow-down{  
    background-image: url(image/system/button/slow-down.png);  
}  
  
QPushButton#speed-up{  
    background-image: url(image/system/button/speed-up.png);  
}  
  
QPushButton#uniform{  
    background-image: url(image/system/button/uniform.png);  
}  
  
#skill_bar_container QPushButton{  
    background-image: url(image/system/button/back.png);  
        border: 1px solid gray;  
        border-radius: 4px;  
    color: yellow;  
    font: 12px;  
    padding: 6px 12px 6px 12px;  
}  
#skill_bar_container QPushButton:disabled{  
    background-image: url(image/system/button/back_shade.png);  
        border-radius: 4px;  
    color: white;  
    font: 12px;  
}  
#skill_bar_container QCheckBox{  
    border: 1px solid gray;  
        border-radius: 4px;  
    color: yellow;  
    font: 12px;  
    padding: 1px 12px 1px 8px;  
}  
#skill_bar_container QCheckBox::indicator{  
    height: 0px;  
    width: 0px;  
}  
#skill_bar_container QCheckBox:unchecked{  
    background-image: url(image/system/button/frequent_checkbox/unchecked.png);  
}  
#skill_bar_container QCheckBox:unchecked:hover{  
    background-image: url(image/system/button/frequent_checkbox/unchecked_hover.png);  
}  
#skill_bar_container QCheckBox:unchecked:pressed{  
    background-image: url(image/system/button/frequent_checkbox/unchecked_press.png);  
}  
#skill_bar_container QCheckBox:checked{  
    background-image: url(image/system/button/frequent_checkbox/checked.png);  
}  
#skill_bar_container QCheckBox:checked:hover{  
    background-image: url(image/system/button/frequent_checkbox/checked_hover.png);  
}  
#skill_bar_container QCheckBox:checked:pressed{  
    background-image: url(image/system/button/frequent_checkbox/checked_press.png);  
}  
#skill_bar_container QComboBox{  
    background-image: url(image/system/button/back2.png);  
    border: 1px solid gray;  
    border-radius: 3px;  
    color: white;  
    padding: 1px 18px 1px 3px;  
}  
#skill_bar_container QComboBox:on{  
    padding-left: 4px;  
    padding-top: 3px;  
}  
#skill_bar_container QComboBox::drop-down{  
    border-bottom-right-radius: 3px;  
    border-left-color: darkgray;  
    border-left-style: solid;  
    border-left-width: 1px;  
    border-top-right-radius: 3px;  
    subcontrol-origin: padding;  
    subcontrol-position: top right;  
    width: 15px;  
}  
#skill_bar_container QComboBox::down-arrow:on{  
    left: 1px;  
    top: 1px;  
} 

[css] view plain copy

1. QProgressBar{  
2.     color : solid gray;  
3.     border: 2px solid gray;  
4.     border-radius: 5px;  
5.     background: transparent;  
6.     padding: 0px;  
7.     text-align : center ;  
8. }  
9. QProgressBar::chunk{  
10.     background: #B22222;  
11. }  
12.   
13. QTextEdit{  
14.     border: 10px;  
15.     border-image: url(image/system/border.png)10 10 10 10 ;  
16.     background-color: rgba(43,45,31,255);  
17. }  
18.   
19. QTextEdit[description="true"]{  
20.     border: 10px;  
21.     border-image: none;  
22.     background-color: rgba(255,255,255,255);  
23. }  
24.   
25. QTextEdit QScrollBar:vertical  {  
26.      margin: 22px 0 22px 0;  
27. }  
28.   
29. QScrollBar:add-page  
30. {  
31.      background-color: rgba(0,0,0,255);  
32. }  
33.   
34. QScrollBar:sub-page  
35. {  
36.      background-color: rgba(0,0,0,255);  
37. }  
38.   
39.  QScrollBar::add-line:vertical  {  
40.   
41.      background-color: rgba(43,45,31,255);  
42.      height: 15px;  
43.      subcontrol-position: bottom;  
44.      subcontrol-origin: margin;  
45.  }  
46.   
47.  QScrollBar::sub-line:vertical  {  
48.   
49.      background-color: rgba(43,45,31,255);  
50.      height: 15px;  
51.      subcontrol-position: top;  
52.      subcontrol-origin: margin;  
53.  }  
54.   
55. QScrollBar::handle:vertical    {      
56.     border : 2px solid gray;  
57.     border-radius: 6px;  
58.     background-color: solid gray;  
59.     min-height : 12px;  
60. }  
61.   
62. QScrollBar::up-arrow:vertical  
63. {  
64.     border-image: url(image/system/button/scroll-up-arrow.png);  
65. }  
66.   
67. QScrollBar::down-arrow:vertical  
68. {  
69.     border-image: url(image/system/button/scroll-down-arrow.png);  
70. }  
71.   
72.  QLineEdit#chat_edit{  
73.     background-color: rgba(20,20,20,255);  
74.     color: white;  
75.     border: 10px transparent;  
76.     height: 20px;  
77.     border-image: url(image/system/border.png)10 10 10 10 ;  
78.  }  
79.   
80. QStatusBar::item {  
81.      border: 0px solid grey;  
82.  }  
83.    
84. QStatusBar{  
85.     background-image: url(image/system/skill-dock.png);  
86.     color:white;  
87. }  
88.   
89. QMenu[private_pile="true"]{  
90.     background-color: rgba(43,63,53,200);  
91.     border-radius: 1px;  
92.     color: white;  
93. }  
94.   
95. QPushButton[private_pile="true"]{  
96.     background-color: rgba(43,63,53,200);  
97.     border-radius: 1px;  
98.     color: white;  
99. }  
100.   
101. QPushButton[game_control="true"]{  
102.     border: 0px solid gray;  
103.     font: 12px;  
104.     border-radius: 5px;  
105.     padding: 6px 12px 6px 12px;  
106. }  
107.   
108. QPushButton#pause{  
109.     background-image: url(image/system/button/pause.png);  
110. }  
111.   
112. QPushButton#play{  
113.     background-image: url(image/system/button/play.png);  
114. }  
115.   
116. QPushButton#slow-down{  
117.     background-image: url(image/system/button/slow-down.png);  
118. }  
119.   
120. QPushButton#speed-up{  
121.     background-image: url(image/system/button/speed-up.png);  
122. }  
123.   
124. QPushButton#uniform{  
125.     background-image: url(image/system/button/uniform.png);  
126. }  
127.   
128. #skill_bar_container QPushButton{  
129.     background-image: url(image/system/button/back.png);  
130.         border: 1px solid gray;  
131.         border-radius: 4px;  
132.     color: yellow;  
133.     font: 12px;  
134.     padding: 6px 12px 6px 12px;  
135. }  
136. #skill_bar_container QPushButton:disabled{  
137.     background-image: url(image/system/button/back_shade.png);  
138.         border-radius: 4px;  
139.     color: white;  
140.     font: 12px;  
141. }  
142. #skill_bar_container QCheckBox{  
143.     border: 1px solid gray;  
144.         border-radius: 4px;  
145.     color: yellow;  
146.     font: 12px;  
147.     padding: 1px 12px 1px 8px;  
148. }  
149. #skill_bar_container QCheckBox::indicator{  
150.     height: 0px;  
151.     width: 0px;  
152. }  
153. #skill_bar_container QCheckBox:unchecked{  
154.     background-image: url(image/system/button/frequent_checkbox/unchecked.png);  
155. }  
156. #skill_bar_container QCheckBox:unchecked:hover{  
157.     background-image: url(image/system/button/frequent_checkbox/unchecked_hover.png);  
158. }  
159. #skill_bar_container QCheckBox:unchecked:pressed{  
160.     background-image: url(image/system/button/frequent_checkbox/unchecked_press.png);  
161. }  
162. #skill_bar_container QCheckBox:checked{  
163.     background-image: url(image/system/button/frequent_checkbox/checked.png);  
164. }  
165. #skill_bar_container QCheckBox:checked:hover{  
166.     background-image: url(image/system/button/frequent_checkbox/checked_hover.png);  
167. }  
168. #skill_bar_container QCheckBox:checked:pressed{  
169.     background-image: url(image/system/button/frequent_checkbox/checked_press.png);  
170. }  
171. #skill_bar_container QComboBox{  
172.     background-image: url(image/system/button/back2.png);  
173.     border: 1px solid gray;  
174.     border-radius: 3px;  
175.     color: white;  
176.     padding: 1px 18px 1px 3px;  
177. }  
178. #skill_bar_container QComboBox:on{  
179.     padding-left: 4px;  
180.     padding-top: 3px;  
181. }  
182. #skill_bar_container QComboBox::drop-down{  
183.     border-bottom-right-radius: 3px;  
184.     border-left-color: darkgray;  
185.     border-left-style: solid;  
186.     border-left-width: 1px;  
187.     border-top-right-radius: 3px;  
188.     subcontrol-origin: padding;  
189.     subcontrol-position: top right;  
190.     width: 15px;  
191. }  
192. #skill_bar_container QComboBox::down-arrow:on{  
193.     left: 1px;  
194.     top: 1px;  
195. }  

设计Qt程序Ui的时候，可以像WEB端使用CSS一样，使用QSS，使页面美化跟代码层分开，利于维护。

过程如下：

    1、建立文本文件，写入样式表内容，更改文件后缀名为qss；

    2、在工程中新建资源文件*.qrc，将qss文件加入资源文件qrc中，此处注意prefix最好为"/"，否则在调用qss文件时会找不到文件；

    3、通过传入路径\文件名的方式创建一个QFile对象，以readonly的方式打开，然后readAll，最后qApp->setStyleSheet就可以使qss生效。

 

 

代码如下

[cpp]  view plain copy

1. QString qss;  
2.   
3.   
4.   
5.     QFile qssFile(":/qss/css.qss");  
6.   
7.     qssFile.open(QFile::ReadOnly);  
8.   
9.     if(qssFile.isOpen())  
10.   
11.     {  
12.   
13.         qss = QLatin1String(qssFile.readAll());  
14.   
15.         qApp->setStyleSheet(qss);  
16.   
17.         qssFile.close();  
18.   
19.     }  

[cpp]  view plain  copy

1. QString qss;  
2.   
3.   
4.   
5.     QFile qssFile(":/qss/css.qss");  
6.   
7.     qssFile.open(QFile::ReadOnly);  
8.   
9.     if(qssFile.isOpen())  
10.   
11.     {  
12.   
13.         qss = QLatin1String(qssFile.readAll());  
14.   
15.         qApp->setStyleSheet(qss);  
16.   
17.         qssFile.close();  
18.   
19.     }