CSS，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS能夠對網頁中的物件的位置排版進行畫素級的精確控制，支援幾乎所有的字型字號樣式，擁有對網頁物件和模型樣式編輯的能力，並能夠進行初步互動設計，是目前基於文字展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力，簡化或者優化寫法，針對各類人群，有較強的易讀性。

       借用CSS的靈感， Qt也支援Qt自己的CSS, 簡稱QSS。同CSS相似，CSS的主要功能與最終目的都是能使介面的表現與介面的元素分離，即質與形的分離，就如同一個人可以在不同的時候穿上不同的衣服一樣，css機制的引入，使得設計一種面板與介面控制元件分離的軟體成為可能，應用程式也能像web介面那樣隨意地改變外觀。

       在這裡，先不講QSS的語法，因為它跟CSS很相似，但更加簡單。先講一下如何 在QWidget中新增QSS：

       首先當然要建立QSS檔案，建立 一個QWidget專案，新增一個qrc資原始檔，然後增加一個字首“/”（很關鍵）。然後在這裡新增一個QSS檔案（自己新建一個記事本，修改成myQss.qss），新增到qrc資原始檔中，效果是這樣的：

myQss.qss程式碼：

QPushButton{
        background:qlineargradient(spread:pad, x1:0.460227, y1:0, x2:0.465818, y2:0.875, stop:0 rgba(170, 255, 255, 255), stop:1 rgba(255, 255, 255, 255));
        border-radius:8px;
        border:2px solid rgb(0, 170, 255)
}

QPushButton:hover{
        background:qlineargradient(spread:pad, x1:0.460227, y1:0, x2:0.443091, y2:0.898, stop:0 rgba(0, 255, 255, 255), stop:1 rgba(255, 255, 255, 255))
}

QPushButton:hover:pressed{
        background:qlineargradient(spread:pad, x1:0.460227, y1:0, x2:0.465818, y2:0.875, stop:0 rgba(170, 255, 255, 255), stop:1 rgba(255, 255, 255, 255));
}
 

#include "widget.h"
#include <QFile>
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QString qss;
    QFile qssFile(":/myQss.qss");
    qssFile.open(QFile::ReadOnly);

    if(qssFile.isOpen())
    {
        qss = QLatin1String(qssFile.readAll());
        qApp->setStyleSheet(qss);
        qssFile.close();
    }

    Widget w;
    w.show();

    return a.exec();
}
 

在ui介面檔案中拉了兩個pushbutton按鈕，發現兩個按鈕都根據qss檔案美化。