目录
[QSS盒子模型样式设置（Box Model）](#QSS盒子模型样式设置（Box Model）)
基本语法
基本语法：
选择器 { 属性名：属性值；属性名：属性值;...}
使用控件的setStyleSheet方法就可以把样式设置进去:
cpp
this->setStyleSheet("QPushButton{color:red;}QLabel{color:black;}")样式影响范围
父控件的样式也会应用到子控件上，但不会影响到同级别的其余控件**。如果各种方式设置样式发生冲突就局部优先,例如：如果父控件样式和子控件样式冲突了以子控件为准；如果不冲突就叠加。**
QApplication表示整个客户端，也可以直接给它设置样式，表示全局样式。
样式和代码分离
样式较多的时候，如果还让样式分布在代码的各个地方，就会使得代码（样式）难以维护，因此引入样式和代码分离，这里提供两种方法。
第一种方式
创建一个qss文件并将其引入qrc文件
在qss文件中编辑样式
使用QFile读取qss文件内容，将其设置为全局样式
结果如下：
第二种方式
这种方式利用ui文件进行设置，支持实时预览，步骤如下：
选中项要设置样式的控件，右击选择改变样式表
在这个窗口编写样式
结果如下
QSS选择器
选择器就是指定某个样式应该应用到什么样的目标上**。**
一般选择器
cpp
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
a.setStyleSheet("QPushButton,QLabel,#pushButton{color:blue;} QTextEdit{color:red}");
MainWindow w;
w.show();
return a.exec();
}
子控件选择器
有些控件默认包含子控件，它们没有独立的objectname，如果要单独给他们设置样式就要用到子控件选择器。
在Qt的文档中给我们列出了选择这些子控件的使用的名称，哪些控件包含他们，我们可以进行查看：
使用上面这些名称，我们就可以选择控件中固有的子控件了：
cpp
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
a.setStyleSheet("QComboBox::drop-down{image:url(:/down.png);}");
MainWindow w;
w.show();
return a.exec();
}
伪类选择器
伪类选择器选择的不是控件本身，而是控件所处的状态**，例如：鼠标悬停在控件上，鼠标按下，等等。**
下面是常用状态：
Qt也提供给我们了查询可用状态的文档：
接下来我们来使用一下伪类选择器：
cpp
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
a.setStyleSheet("QPushButton{color:green;}QPushButton:hover{color:red;}QPushButton:pressed{color:blue;}");
MainWindow w;
w.show();
return a.exec();
}
QSS盒子模型样式设置（Box Model）
支持盒子模型的控件可以设置margin，border，padding等属性，而大多数控件都支持它。
盒子模型具体如下：
盒子模型可以设置的属性如下：
复合属性：本来是多个属性，可以通过一个属性来一起设置：
下面是使用示例：
cpp
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
QPushButton* button = new QPushButton(this);
button->setText("按钮");
button->setGeometry(0,0,100,100);
button->setStyleSheet("QPushButton{border:5px solid red;margin:20px;padding:20px;}");
}
geometry设置了按钮的大小，设置外边距或者边框宽度的时候占用的都是按钮的大小，也就是说盒子模型的总大小是不变的（因此上面的按钮看起来比100*100要小）。
有哪些样式可以设置
Qt文档中可以查询可设置的样式，以及这些样式能够被什么控件使用：
一些控件的样式设置
给按钮设置样式
给复选框设置样式
给输入框设置样式
关于样式中的线性渐变色
渐变色的设置是通过类似于函数的语法：
qlineargradient（x1：？，y1：？，x2：？，y2：？，stop:0 ?，stop:0 ?）
?所在的位置是我们需要填入的地方
x1,x2,y1,y2的取值只有0/1：
下面我们会使用线性渐变色。
给列表框设置样式
cpp
QListWidget::item:hover
{
background-color:qlineargradient(x1:0,y1:0,x2:1,y2:0,stop:0 rgb(255, 15, 87),stop:1 rgb(52, 89, 255));
}
QListWidget::item:selected
{
background-color:qlineargradient(x1:0,y1:0,x2:1,y2:0,stop:0 rgb(205, 255, 189),stop:1 rgb(235, 255, 144));
}
给菜单栏设置样式
cpp
QMenuBar
{
background-color:qlineargradient(x1:0,y1:0,x2:1,y2:0,stop: 0 rgb(0, 0, 0),stop: 1 rgb(255, 6, 6));
spacing:3px;
}
QMenuBar::item
{
border-radius: 10px;
border:1px solid white;
color:white;
background-color:transparent;
padding:5px 15px;
}
QMenuBar::item::selected
{
background-color:blue;
}
QMenu::separator
{
background-color:green;
height:2px;
margin:0 10px;
}
QMenu::item
{
border:1px solid transparent;
padding:3px 10px;
}
QMenu::item:selected
{
border:1px solid red;
}
简单设计一个登录界面
cpp
QFrame
{
border-image:url(:/x.png);
}
QLineEdit
{
background-color:rgb(152, 233, 255);
color:red;
border:1px solid black;
border-radius:10px;
padding-left:10px;
font-size:20px;
}
QCheckBox
{
color:white;
}
QPushButton
{
border-radius:10px;
background-color:rgb(170, 170, 127);
color:black;
}
QPushButton:pressed
{
background-color:red;
}