Qt5--QSS常用的笔记

语法

和css一样，qss的语法也是：

selector {property: value}

不同的属性间用;分隔，同一个属性可以设置多个值，用空格分隔

selector {property1: value1 value2; property2: value3}  

选择器（selector）

选择器有3种写法和CSS的写法一致。

• 1、控件类：直接控制所有的这类控件。
  
  • 例子：QPushButton, QLabel { ....... }
• 2、控件名：控制特定的也就是这个名字的控件。
  
  • 例子：QToolButton#tools { ....... }
• 3、控件的特定状态：比如鼠标点击、鼠标放上去。。。控件各呈现什么状态。
  
  • 例子（鼠标放上去时）：QPushButton:hover { ..... }
• 4、子控件：当一个控件里面含有子控件时，使用这个方法。
  
  • 例子（下拉菜单的图标）：QComboBox::drop-down { ........ }

使用方法

在Qt的C++文件里面使用：

1、对于特定的控件，可以直接使用setStyleSheet()（不需要加选择器）

this->ui->label_1->setStyleSheet("{color:red}");

2、可以对对话框，widget或者window使用setStyleSheet设置里面所有控件的属性

myDialog->setStyleSheet("QLineEdit { background-color: yellow }");

3、书写格式一般写成：

this->setStyleSheet("#photo{"
                    "border:1px;"
                    "}"
                    "QLabel{"
                    "color:#4a4a4a;"
                    "}"
                  );

4、可以统一写进一个.css文件里，然后读出来。

QFile qssfile(":/style/base.qss");
qssfile.open(QFile::ReadOnly);
QString qss;
qss = qssfile.readAll();
this->setStyleSheet(qss);

.css文件里一般是这么写的：

QLabel {
    color:#4a4a4a;
}

QPushButton {
    background-color:#3dce3d;
    color:white;
    border:0px;
}

常用的QSS属性

qss的属性特别多，常用的qss就几个属性：

语法	功能
background-color	设置元素的背景颜色。
background-image	设置元素的背景图像
color	设置字体颜色
border	设置边框属性
font-family	规定文本的字体系列
font-size	规定文本的字体尺寸