QT5 QSS

設計Qt程序Ui的時候，可以像WEB端使用CSS一樣，使用QSS，使頁面美化跟代碼層分開，利於維護。

過程如下：

    1、建立文本文件，寫入樣式表內容，更改文件后綴名為qss；

    2、在工程中新建資源文件*.qrc，將qss文件加入資源文件qrc中，此處注意prefix最好為"/"，否則在調用qss文件時會找不到文件；

    3、通過傳入路徑\文件名的方式創建一個QFile對象，以readonly的方式打開，然后readAll，最后qApp->setStyleSheet就可以使qss生效。

 

使用：

 MainWidget::MainWidget(QWidget *parent) :

  QWidget(parent),

   ui( new  Ui::MainWidget)

{

　　 //應用樣式 apply the qss style

   QFile file( ":/qss/main.qss" );

   file.open(QFile::ReadOnly);

   QTextStream filetext(&file);

   QString stylesheet = filetext.readAll();

   this ->setStyleSheet(stylesheet);

  　file.close();

}

該段代碼寫在ui界面的后台cpp文件的構造函數中,主要是this->setStyleSheet()函數的設置功能，要說明的是該函數除了可以對整個當前構造數所在的那個類所表示的ui進行整體應用樣式以外，setStyleSheet()函數本身是QWidget的成員函數，幾乎Qt中的大多數控件都可以直接使用該函數分別設置自己的樣式。

 

 

QSS語法

QSS的語法規則幾乎與CSS相同。一條QSS的樣式是由兩部分組成的，一部分是選擇器指定了哪些控件會受到影響，另一部分是指定了屬性的值，表示這些控件的哪些屬性會受到影響。例如：  QPushButton { color: red }

 

 

QSS選擇器類型

1.通配選擇器：*  ; 匹配　　所有的控件
2.類型選擇器：QPushButton ; 匹配所有QPushButton和其子類的實例
3.屬性選擇器：QPushButton[flat="false"]; 匹配所有flat屬性是false的QPushButton實例，注意該屬性可以是自定義的屬性，不一定非要是類本身具有的屬性
4.類選擇器：  .QPushButton ;  匹配所有QPushButton的實例，但是並不匹配其子類。這是與CSS中的類選擇器不一樣的地方，注意前面有一個點號
5.ID選擇器：  #myButton; 匹配所有id為myButton的控件實例，這里的id實際上就是objectName指定的值
6.后代選擇器： QDialog QPushButton ; 所有QDialog容器中包含的QPushButton，不管是直接的還是間接的
7.子選擇器：  QDialog > QPushButton; 所有QDialog容器下面的QPushButton，其中要求QPushButton的直接父容器是QDialog

另外上面所有的這些選擇器可以聯合使用，並且支持一次設置多個選擇器類型，用逗號隔開，這點與CSS一樣，例如#frameCut,#frameInterrupt,#frameJoin 表示所有這些id使用一個規則。#mytable  QPushButton 表示選擇所有id為mytable的容器下面的QPushButton實例

 

想了解更詳細的=》http://www.cnblogs.com/wangqiguo/p/4960776.html

 

 

 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

cpp文件下的按鈕區分，設置對象名字

button=new QPushButton(this);
button->setText(tr("按鈕一號"));
button->setObjectName("nameOne");//給按鈕一號設置一個ID值
button2=new QPushButton(this);
button2->setText("按鈕二號");
button2->setObjectName("nameTwo");//給按鈕二號設置一個ID值


QSS文件里設置屬性
QPushButton#nameOne{color:yellow;background-image:url(":/green.jpg")}
QPushButton#nameTwo{border:2px groove gray;border-radius:10px;padding:2px 4px;}