Qt StyleSheet使用的一些注意事项

使用Stylesheet 优化界面，常常会因为过滤器不正确或语法有一点错误导致达不到想要的效果。

版本：

Qt Creator 2.5.2

qmake 4.8.5

对于不是集成QFrame的窗口类，盒子模型等语法可能不起作用，需要使用QSS来描绘界面时，建议都至少集成QFrame，而不是QWidget

使用Qt设计师修改Qt控件的StypeSheet使界面显示更美观

 

字体优先应用顺序：

当前控件的样式表（StypeSheet）属性 > 父控件的样式表（StypeSheet）属性 > 当前控件字体（Font）属性

 

父控件的字体（Font）属性不影响子控件的字体

 

其它属性（如颜色）应该类似

 

颜色

color: rgb(0, 85, 255);                            字体颜色

gridline-color: rgb(255, 0, 0);                 网格线颜色

selection-color: rgb(255, 255, 0);           当前所选择的字体颜色

若QT原生的QPushButton或QToolButton使用了stylesheet设置了，那么按下的动作向下效果将会没有

 

/*隐藏TabWidget主窗口按钮  不知为何，下面这句加上unchecked，“上.png”不会显示出来的*/

TabWidget QToolButton#HideContextButton{

image : url(skin/tree/上.png)

}

TabWidget QToolButton#HideContextButton:checked{

image : url(skin/tree/下.png)

}

/*隐藏TabWidget按钮*/

TabWidget QToolButton#HideContextButton{

border : 0px;       /*仅设置image时，该句还是加上，否则可能会不显示image*/

image : url(skin/tree/下.png)

}

背景颜色不包括margin区域的颜色

width不包括margin

父窗口设置了radius但子窗口没有设置，radius将不被显示（被子窗口覆盖了）

 注意QSS文件若为UTF-8编码，其中的中文内容将不生效，需为ANSI

设置窗口容器内的控件的字体时，直接在容器对象设置 font-size: 22px; 不起作用，要每个控件都设置

若要隐藏一条边，且指定颜色，这样设置更可靠

TabWidget QStackedWidget{

border-top: 0px;

border-right: 1px;

border-bottom: 1px;

border-left: 1px;

border-top-color: #6b95b6;

border-left-color: #6b95b6;

border-right-color: #6b95b6;

border-bottom-color: #6b95b6;

    border-top-style: solid;

border-left-style: solid;

border-right-style: solid;

border-right-style: solid;

background-color: #1e3756

}

这种方式不生效

TabWidget QStackedWidget{

border-top: 0px 1px 1px 1px;

border-top-color: #6b95b6;

border-left-color: #6b95b6;

border-right-color: #6b95b6;

border-bottom-color: #6b95b6;

    border-top-style: solid;

border-left-style: solid;

border-right-style: solid;

border-right-style: solid;

background-color: #1e3756

}

单独设置border可能不生效，这样靠谱点

TabWidget#BottomTabWidget{

min-height : 0px;

max-height : 226px;

border-bottom: 1px;

border-top: 0px;

border-right: 0px;

border-left: 0px;

border-bottom-style: solid;

border-bottom-color: #6b95b6;

}