QSS文件詳解

QSS文件說明

qss語法是在css2.0的基礎上開發的，所以基本支持css2.0的特性

QSS語法

1. 選擇器: #<控件名> 相當於css中的id選擇器
   .<類名> 類選擇器

2. 樣式: css2.0語法

   重點介紹下,偽類選擇器。

QSS文件說明

qss語法是在css2.0的基礎上開發的，所以基本支持css2.0的特性

QSS語法

1. 選擇器: #<控件名> 相當於css中的id選擇器
   .<類名> 類選擇器

2. 樣式: css2.0語法

   重點介紹下,偽類選擇器。

   

   偽選擇器以冒號（:）表示，與css里的偽選擇器相似，是基於控件的一些基本狀態來限定程序的規則，如hover規則表示鼠標經過控件時的狀態，而press表示按下按鈕時的狀態。如：

   QPushButton:hover {
       Background-color:red;
   }
   

   表示鼠標經過時QPushButton背景變紅。

   Pseudo還支持否定符號(!)，如：
   QRadioButton:!hover { color: red }
   表示沒有鼠標移上QRadioButton時他顯示的顏色是red。

   Pseudo可以被串連在一起，比如：
   QPushButton:hover:!pressed { color: blue; }
   表示QPushButton在鼠標移上卻沒有點擊時顯示blue字，但如果點擊的時候就不會顯示blue顏色了。

   同樣可以和之前所講的子控件選擇器一起聯合使用，如：
   QSpinBox::down-button:hover { image: url(btn-combobox-press.bmp) }

   與前面所講的一樣，偽選擇器，子控件選擇器等都是可以用逗號(,)分隔表示連續相同的設置的，如：

   QPushButton:hover,QSpinBox::down-button, QCheckBox:checked{
        color: white ;image: url(btn-combobox-press.bmp);}
   

   

   

QSS使用

1. 直接在源碼中編寫。

qApp->setStyleSheet("QPushButton#firstBtn{color:yellow;background-color:blue}QssDemo{background-color:orange}");

2. 使用文件加載

QFile styfile("xxxx/xxx/style.qss");
styfile.open(QFile::ReadOnly);
QString sty = QString::fromlatin1(styfile.readAll());
styfile.close;

setStyleSheet(sty);

偽選擇器以冒號（:）表示，與css里的偽選擇器相似，是基於控件的一些基本狀態來限定程序的規則，如hover規則表示鼠標經過控件時的狀態，而press表示按下按鈕時的狀態。如：
```
QPushButton:hover {
    Background-color:red;
}
```
表示鼠標經過時`QPushButton`背景變紅。

`Pseudo`還支持否定符號`(!)`，如：
`QRadioButton:!hover { color: red }`
表示沒有鼠標移上`QRadioButton`時他顯示的顏色是red。

`Pseudo`可以被串連在一起，比如：
`QPushButton:hover:!pressed { color: blue; }`
表示`QPushButton`在鼠標移上卻沒有點擊時顯示blue字，但如果點擊的時候就不會顯示blue顏色了。

同樣可以和之前所講的子控件選擇器一起聯合使用，如：
`QSpinBox::down-button:hover { image: url(btn-combobox-press.bmp) }`

與前面所講的一樣，偽選擇器，子控件選擇器等都是可以用逗號(,)分隔表示連續相同的設置的，如：
```
QPushButton:hover,QSpinBox::down-button, QCheckBox:checked{
     color: white ;image: url(btn-combobox-press.bmp);}
```
![圖 2](../images/c32bd82d5c6e90e7ef588b0ddfc0c92a619a439bbe66122b2b98da11db5b4019.png)  

![圖 3](../images/4548b218cc0ff32d7ce3a9fc025e55674927b46e02e3c5859522984ddfe6056f.png)  

QSS使用

1. 直接在源碼中編寫。

qApp->setStyleSheet("QPushButton#firstBtn{color:yellow;background-color:blue}QssDemo{background-color:orange}");

2. 使用文件加載

QFile styfile("xxxx/xxx/style.qss");
styfile.open(QFile::ReadOnly);
QString sty = QString::fromlatin1(styfile.readAll());
styfile.close;

setStyleSheet(sty);