【QT】QSS美化——基础知识 一

目录

一、辅助工具

二、QSS加载方式

三、QSS选择器类型

3.1 通配选择器

3.2 类型选择器

3.3 属性选择器

3.4 类选择器

3.5 ID选择器

3.6 后代选择器

3.7 子选择器

3.8 伪类选择器

四、QSS常用属性

4.1 字体

4.2 颜色

4.3 内边距

4.4 外边距

4.5 背景

4.6 边框

4.7 宽高

五：QSS伪状态与子控件

一、辅助工具
QSS官方：http://doc.qt.io/qt-5/stylesheet-reference.html

CSS参考手册：https://www.w3school.com.cn/cssref/index.asp

样式编辑器，源码地址：https://github.com/hustlei/QssStylesheetEditor

皮肤生成器，源码地址：https://github.com/satchelwu/QSS-Skin-Builder

素材库，阿里矢量图：https://www.iconfont.cn/

二、QSS加载方式
方式一：

myDialog->setStyleSheet("QLineEdit { background-color: yellow }");
nameEdit->setStyleSheet("background-color: yellow");
方式二：

QFile file(":/qss/main.qss");
file.open(QFile::ReadOnly);
QTextStream filetext(&file);
QString stylesheet = filetext.readAll();
this->setStyleSheet(stylesheet);
file.close();
三、QSS选择器类型
3.1 通配选择器
  *  

  匹配所有的控件

3.2 类型选择器
  QPushButton 

  匹配所有QPushButton和其子类的实例

QPushButton {background: gray;}

3.3 属性选择器
   QPushButton[flat="false"]

   匹配所有flat属性是false的QPushButton实例，注意该属性可以是自定义的属性，不一定非要是类本身具有的属性

QPushButton[level='dangerous'] { background: magenta; }
/*openButton->setProperty("level",  "dangerous");*/

3.4 类选择器
 .QPushButton 

 匹配所有QPushButton的实例，但是并不匹配其子类。这是与CSS中的类选择器不一样的地方，注意前面有一个点号

.RedButton { background: magenta; }
 
/*
openButton->setProperty("class",  "RedButton");
closeButton->setProperty("class", "RedButton");
*/

3.5 ID选择器
  #myButton

 匹配所有id为myButton的控件实例，这里的id实际上就是objectName指定的值

#openButton, #closeButton { background: magenta; }

3.6 后代选择器
   QDialog QPushButton

   所有QDialog容器中包含的QPushButton，不管是直接的还是间接的

QDialog {background: gray;}
/* 设置 QDialog中的 QPushButton 的 QSS */
QDialog QPushButton {
    border: 2px solid magenta;
    border-radius: 10px;
    background: white;
    padding: 2px 15px;
}

3.7 子选择器
  QFrame> QPushButton

   所有QFrame容器下面的QPushButton，其中要求QPushButton的直接父容器是QFrame,注意和后代选择器的区别

QFrame {background: gray;}
QFrame > QPushButton {
    border: 2px solid magenta;
    border-radius: 10px;
    background: white;
    padding: 2px 15px;
}
3.8 伪类选择器
选择器:状态 作为选择器，支持 ! 操作符，表示 非。

QPushButton:hover { color: white }
QCheckBox:checked { color: white }
QCheckBox:!checked { color: red }
所有的这些选择器可以联合使用，并且支持一次设置多个选择器类型，用逗号隔开，这点与CSS一样，例如：

#frameCut,#frameInterrupt,#frameJoin 表示所有这些id使用一个规则。

#mytable  QPushButton 表示选择所有id为mytable的容器下面的QPushButton实例

四、QSS常用属性
4.1 字体
大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD

样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)

行高 {line-height: normal;}(正常) 单位：PX、PD、EM

粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)

变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)

大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

字体名：

微软雅黑：

Microsoft YaHei

宋体：SimSun

黑体：SimHei

仿宋： FangSong

楷体：  KaiTi

隶书：LiSu

幼圆：YouYuan

华文细黑：STXihei

华文楷体：STKaiti

华文宋体：STSong

华文中宋：STZhongsong

华文仿宋：STFangsong

方正舒体：FZShuTi

方正姚体：FZYaoti

华文彩云：STCaiyun

华文琥珀：STHupo

华文隶书：STLiti

华文行楷：STXingkai

华文新魏：STXinwei

font: 15px "Segoe UI";             /* 字体:大小 名称 */  
 
font-family: "Segoe UI";           /* 字体名称 */  
4.2 颜色
17种标准色：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,olive, orange, purple, red, silver, teal, white, yellow

colo:rgb(255,255,255);   
 
color: #F5F5F5;               /* 前景(文本)颜色 */  
 
color: qlineargradient();     /* 前景(文本)颜色:线性渐变*/  
 
color: qradialgradient();     /* 前景(文本)颜色:辐射渐变*/  
 
color: qconicalgradient();    /* 前景(文本)颜色:梯形渐变*/  
4.3 内边距
padding: 4px;                      /* 文字边距 */  
 
padding-left: 5px;                 /* 文字左边距 */  
 
padding-right: 10px;               /* 文字右边距 */  
 
padding-top: 3px;                  /* 文字顶边距 */  
 
padding-bottom: 3px;               /* 文字底边距 */
4.4 外边距
margin: 14px 18px 20px 18px; /*外边距 顺序上右下左 */
 
margin-top: 14px;
 
margin-right: 18px;
 
margin-bottom: 20px;
 
margin-left: 18px;
4.5 背景
background-color: #202122;               /* 背景颜色 */  
 
background-color: qlineargradient();    /* 背景颜色:线性渐变*/  
 
background-color: qradialgradient();    /* 背景颜色:辐射渐变*/  
 
background-color: qconicalgradient();   /* 背景颜色:梯形渐变*/  
 
background-image:url(boder.png);        /* 背景图片 */  
 
background-position: ;                 /* 背景图片对齐方式 */  
 
background-repeat: ;                   /* 背景图片平铺方式 */  
4.6 边框
border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;

border-width:; 边框宽度

border-color:#;

简写方法border：width style color; /*简写*/

border: 1px solid #FDBC03;                       /* 边框:宽度 颜色*/  
 
border-image:url(boder.png) 4 8 12 16;           /* 边界图 切线 */  
 
border-radius: 4px;                              /* 角弧度 */  
 
border-top-left-radius: ;                        /* 角弧度:左上角*/  
 
border-top-right-radius: ;                       /* 角弧度:右上角*/  
 
border-bottom-left-radius: ;                     /* 角弧度:左下角*/  
 
border-bottom-right-radius: ;                    /* 角弧度:右下角*/  
4.7 宽高
width:12px;   /*设置宽度 单位像素*/
 
height:40px     /*设置高度*/
 
min-width:65px;     /*最小宽度 设置width无效可以尝试设置min-width */                      
 
min-height:12px;    /*最小高度*/                       
 
max-width:12px;
 
max-height:12px;
五：QSS伪状态与子控件
伪状态列表

:checked                        /*button部件被选中*/ 
:unchecked                      /*button部件未被选中*/ 
:disabled                       /*部件被禁用*/ 
:enabled                        /*部件被启用*/ 
:focus                          /*部件获得焦点*/ 
:hover                          /*鼠标位于部件上*/ 
:indeterminate                  /*checkbox或radiobutton被部分选中*/ 
:off                            /*部件可以切换，且处于off状态*/ 
:on                             /*部件可以切换，且处于on状态*/ 
:pressed                        /*部件被鼠标按下*/ 
子部件列表

::down-arrow         /*combo box或spin box的下拉箭头*/ 
::drop-down          /*combo box的下拉箭头*/ 
 
::indicator      /*checkbox、radio button或可选择group box的指示器*/ 
::item               /*menu、menu bar或status bar的子项目*/ 
::menu-indicator     /*push button的菜单指示器*/ 
::title              /*group box的标题*/ 
 
::down-button        /*spin box的向下按钮*/
::up-arrow           /*spin box的向上箭头*/ 
::up-button          /*spin box的向上按钮*/ 
参考文章：

https://www.cnblogs.com/csuftzzk/p/qss_button_menu.html

https://www.cnblogs.com/bclshuai/p/9809679.html

https://www.cnblogs.com/luxiaolai/p/4409502.html

https://www.cnblogs.com/wangqiguo/p/4960776.html