【QT入门】Qt自定义控件与样式设计之qss介绍(Qt style sheet)

往期回顾：

【QT入门】 无边框窗口设计之实现圆角窗口-CSDN博客【QT入门】 无边框窗口设计综合运用之自定义标题栏带圆角阴影的窗口-CSDN博客

【QT入门】 无边框窗口设计之综合运用，实现WPS的tab页面-CSDN博客

【QT入门】Qt自定义控件与样式设计之qss介绍(Qt style sheet)

一、qss简介

1、什么是qss样式

Qt-style-sheet, 简写就是qss, Qt样式表，不需要用C++代码控件进行重载，就可以修改控件外观，美化界面,类似于前端的css,但是没有css功能强大。qss千变万化，可以写出各种花里胡哨的样式。

qss样式很多，篇幅很多，没法一一细讲，自己多看qss简介大全，需要用到什么得时候就去搜就是，主要是多看多记多熟悉，我以及把常用的上传。

https://download.csdn.net/download/LF__plus/89089225?spm=1001.2014.3001.5501

qss样式的注释形式： /*我是qss注释*/ 

2、QLabel 样式示例

比如：以QLabel为例进行介绍：

QLabel 
{
    background-color: rgb(54,54,54);   /*背景色*/
    color: rgb(230,230,230);           /*字体颜色，前景色*/
    font-family: "Microsoft YaHei";    /*字体类型*/
    font-size: 14px;                   /*字体大小*/         
}

颜色可以直接用英文单词来写，也可以用rgb（r，g，b）来写，也可以rgba（r， g， b，透明度）来写。

二、常用样式

 1、字体样式

1.1示例

font-family: "Microsoft YaHei";
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #123456;

我们一一分析

font-family	为设置字体类型，标准形式需要加双引号，不加也可能会生效，具体看系统是否支持，中英文都支持，但要保证字体编码支持，一般程序编码为"utf-8"时没问题。
font-size	为设置字体大小，单位一般使用 px 像素
font-style	为设置字体斜体样式，italic 为斜体， normal 为不斜体
font-weight	为设置字体加粗样式，bold 为加粗， normal 为不加粗
color	为设置字体颜色，可以使用十六进制数表示颜色，也可以使用某些特殊的字体颜色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置，其中 r、g、b、a 值为0~255，如果想不显示颜色可以设置值为透明 transparent；注意：字体颜色用的是 color 属性，没有 font-color 这个属性

注意：字体颜色不是font-color，直接就是color 

当然字体也可以一起设置：

font: bold italic 18px "Microsoft YaHei";

同时设置字体 style weight size family 的样式时，style(是否斜体) 和 weight (是否加粗)必须出现在开头，size 和 family 在后面，而且 size 必须在 family 之前，否则样式将不生效， 

 2、边框样式

2.1示例

QLabel 
{
    border-style: solid;
 /*单独设置某一边 border-right-style:dotted;*/
 
 border-width: 2px;
 border-color: red;
}

也可以一起设置

border: 2px solid red;

solid 为实线， dashed 为虚线， dotted 为点线， none 为不显示（如果不设置 border-style 的话，默认带边框） 

单独的属性设置：上、右、下、左

border-top-style: solid;
border-top-width: 2px;
border-top-color: red;
border-top: 2px solid red; 

---

border-right-style: solid;
border-right-width: 3px;
border-right-color: green;
border-right: 3px solid green;

---

border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: blue;
border-bottom: 2px solid blue;

---

border-left-style: solid;
border-left-width: 3px;
border-left-color: aqua;
border-left: 3px solid aqua; 

边框半径(圆角)：

border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 20px;
border-radius: 20px;  /*统一的半径*/

3、文字位置 

3.1对齐方式

 在 qss 中，没有对齐方式，只能通过设置 padding 来实现文字的显示位置

一般 padding-left 相当于 x 坐标，padding-top 相当于 y 坐标，设置这两个就可以在任意位置显示了（默认情况下文字是上下左右都居中显示的），这里就涉及到一个问题，如果同时设置padding-left 和padding-right呢？建议是不要同时设置，可能会出问题，一般来说真实开发的时候原型图上都会给清楚的。

4、背景样式

4.1示例

background-color: rgb(54,54,54);
background-image: url(:/imgs/picture/0.png);   /*显示背景图片, 也可以不用引号*/
background-repeat: no-repeat;  /*不重复显示*/
background-position: left center;

再次一一分析：

background-color	为设置背景颜色，可以使用十六进制数表示颜色，也可以使用某些特殊的字体颜色：red, green, blue等，或者使用rgb(r,g,b)和rgba(r,g,b,a)来设置，其中 r、g、b、a 值为0~255，如果想不显示颜色可以设置值为透明 transparent
background-image	为设置背景图片，图片路径为 url(image-path)
background-repeat	为设置背景图是否重复填充背景，如果背景图片尺寸小于背景实际大小的话，默认会自动重复填充图片，可以设置为 no-repeat 不重复，repeat-x 在x轴重复，repeat-y 在y轴重复
background-position	为设置背景图片显示位置，只支持 left right top bottom center；值 left right center 为设置水平位置，值 top bottom center 为设置垂直位置

同样的有统一设置

background: url(":/imgs/picture/0.png") no-repeat left center #363636;

background 为设置背景的所有属性，color image repeat position 这些属性值出现的顺序可以任意 

 5、动态悬浮样式

 5.1示例

QLabel:hover
{
 color: red;
 border-color: green;
    background-color: #363636;
}

就是当鼠标放上去的时候会显示什么，这个运用是非常非常广泛的，多多熟悉 

 6、禁止使用的样式

6.1示例

QLabel:disabled
{
 color: blue;
 border-color: brown;
    background-color: #363636;
}

---

以上，就是qss常用的一些样式。

都看到这里了，点个赞再走呗朋友~

加油吧，预祝大家变得更强！