除了合理的布局之外，要使界面更加美观，还需要用样式表来进行一定的设计。

样式表语法基础

Qt的样式表与CSS的语法规则几乎完全相同。

每个样式表规则都有着下面的形式：

selector{attribute:value}

其中，选择器（selector）部分通常是一个类名（如QComboBox），当然还有其他语法形式。属性（attribute）部分是一个样式表属性的名字，（如color），值（value）部分是赋给该属性的值（如red）。

QComboBox{color:red;}

为了使用方便，我们还可以使用一种简化形式，可以对具有相同样式的选择器进行统一操作：

selector1,selector2,...,selectorN{
    attribute1:value1;
    attribute2:value2;
    ...
    attributeN:valueN;
}

首先，先创建一个简单的带按钮的窗口，如图：

再调用setStyleSheet()方法设置按钮的样式。

#include "Widget.h"
#include <QPushButton>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    QPushButton *p_button=new QPushButton(this);
    p_button->move(100,100);
    p_button->setText("QSS");
    p_button->setStyleSheet("QPushButton{color:red;background-color:black;width:80px;height:80px;}");
}

Widget::~Widget()
{

}

P.S：也可以用rgb或者十六进制数设置颜色，比如：rgb(255,255,255) 或者 #FFFFFF

效果如图： 

方盒模型

和CSS中的盒子模型一样，Qt中的部件也具有margin（外边距）、border（边框）、padding（内边距）、content（内容）这些概念。通过以下例子感受一下：

#include "Widget.h"
#include <QPushButton>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    QPushButton *p_button1=new QPushButton(this);
    p_button1->setText("QSS");
    p_button1->setStyleSheet("QPushButton{color:red;background-color:black;width:80px;height:80px;}");
    this->setStyleSheet("QWidget{background-color:gray;"
                        "margin:20px;"
                        "padding:50px;"
                        "border:10px solid #FFF;"
                        "}");
}

Widget::~Widget()
{

}

实现效果： 

可以看到，在上面的代码中，我为窗口设置了灰色的背景，由于设置了margin为20px，所以按钮相对父元素有一个宽度为20px的外边距。同时，边框宽度设置为10px，并且为白色，而内边距设置为50px。

前景和背景

前景和背景在上一个例子中已经了解过了，前景（color）一般用于绘制文本的颜色，背景的作用不言而喻。这里需要提的是，背景不仅可以是颜色，还可以是图片。

#include "Widget.h"
#include <QPushButton>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    QPushButton *p_button1=new QPushButton(this);
    p_button1->setText("QSS");
    p_button1->setStyleSheet("QPushButton{color:red;background-color:black;width:80px;height:80px;}");
    this->setStyleSheet("QWidget{background-color:gray;"
                        "margin:20px;"
                        "padding:50px;"
                        "border:10px solid #FFF;"
                        "background-image:url(C:/Users/MSI-NB/Desktop/bgi.jpg) stretch stretch;"
                        "}");
}

Widget::~Widget()
{

}

实现效果：

伪状态

Qt中一些常用伪状态：

举个例子，我们可以用:hover实现鼠标移入按钮区域时，更换按钮的背景图片的效果：

#include "Widget.h"
#include <QPushButton>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    QPushButton *p_button1=new QPushButton(this);
    p_button1->setText("QSS");
    p_button1->setStyleSheet("QPushButton{color:red;background-color:black;width:80px;height:80px;}");
    this->setStyleSheet("QWidget{background-color:gray;"
                        "margin:20px;"
                        "padding:50px;"
                        "border:10px solid #FFF;"
                        "background-image:url(C:/Users/MSI-NB/Desktop/bgi.jpg)}"
                        //设置伪状态
                        "QWidget:hover{background-image:url(C:/Users/MSI-NB/Desktop/hover.jpg)"
                        "}");
}

Widget::~Widget()
{

}

实现效果：

P.S：如有错误，欢迎指正~