Qt样式表设置。。。持续更新

样式表介绍语法、选择器、属性

Qt样式表（style sheet）简称QSS，它是用于制定用户界面的强有力机制，其概念，术语，语法规则是受到HTML中的级联样式表（Cascading Style Sheets，CSS）启发而来的，只是QSS是是应用于窗体界面的。

个人认为使用 QSS 有以下好处:

• 可读性高并且非常直观,便于设置界面样式。
• 在每个平台上都有相同的显示效果。
• 可以在界面代码中省去与显示效果相关的大量代码,将界面逻辑独立出来，样式表集中于一个文件中编写。
• 在界面风格(配色, 字体等)改变的情况下, 可以不用修改项目源码就可以实现。

样式表语法

样式表由一系列的样式规则组成。一条样式规则由一个选择器和一个声明语句组成，选择器指明了哪个（或者说是哪种）控件将会受规则影响，而声明语句则指明了哪些属性会设置到这个（这些）控件，语法如下：selector{attribute:value;}。

• selector 代表选择器, 指明了哪个(或者说是哪种)控件将会受到规则影响。
• {attribute: value;} 代表声明语句, 其中 attribute 表示属性, value 表示属性的值, 属性与它的值之间必须以冒号（:）隔开, 属性值后面必须以分号（;）结束, 表示这条属性已经设置完成。
• 整条语句加起来的意思是, 在整个应用程序中, 被 selector 匹配的控件, 它们控件的 attribute 属性的值应该被设置为 value。

特性和盒模型

特性：
层叠性：是处理样式发生冲突的一种能力，只有在多个选择器匹配到同一个 Widget 才会发生层叠性。

pBtn1->setStyleSheet("QPushButton{color: yellow;}");
pBtn1->setStyleSheet(".QPushButton{color: blue;}");

吃下栗子：这两个选择器匹配到同一个按钮，但后一个样式会覆盖前面的样式。

盒模型

盒模型是形象的把所有的 Widget 看做是一个“盒子”，该盒子包含外边距，边距，内边距，内容。可以把它看作是有包含关系的矩形，并且这种包含关系是固定不变的。如下图：

MARGIN（外边距）：该区域保持与其它盒子之间的距离。
BORDER（边框）：该区域有自己的颜色，不会受到盒子的背景颜色影响。
PADDING（内边距）：该区域会受到背景颜色的影响。
CONYENY（内容）：盒子的内容，显示文本，图像或其他控件。
备注：除了内容外, 其他三个部分均不能单独设置颜色, 只能设置其宽度, 并且是以像素为单位。Widget 的width和height属性指的是整个盒子的宽度和高度。

选择器

只挑选常用的选择器说明：
1）类型选择器(很少使用)
格式：类名{属性:值;} 解释:类名即 Widget 类名, 由 QObject :: metaObject() :: className()获取, 类型选择器匹配所有该类以及该类的派生类对象。

一般用法：类型选择器会匹配所有该类以及该类的派生类的对象, 所以我们在程序中, 有时为了统一一些具有相似性的控件的样式, 可以使用类型选择器。

举个栗子：QPushButton{ color: blue; } 这条语句表示将程序中所有的 QPushButton 类和它的派生类的对象, 它们的前景色(即文字 颜色)被设置为蓝色

2）类选择器（只影响自身，不影响其子类样式）
格式如下：**.**类名{属性:值;} 类选择器的类名前面有一个（.）, 这种选择器只会匹配该类的所有对象, 而不会匹配其派生类的对象。

一般用法：类选择器提供了一种匹配所有该类的对象但不会匹配派生类的方法, 通常用来特例化拥有派生类的类对象。

举个栗子：.QFrame{ padding: 15px 25px; }这条语句表示将程序中所有的 QFrame 设置相同的样式，但又不想影响它的子类对象(QLabel, QTableWidget等等)

3）ID选择器（经常使用）
格式如下：类名#id{属性:值;} id 指的是控件类的 objectName，“#” + objectName 表示匹配所有 objectName 为 ID选择器所指定名称的Widget，为其设置样式。

注意点：

• objectName 是大小写敏感的，并尽可能保持唯一性， objectName 中不能含有空格。
• “#” 与 ID 之间不能有空格，并 保证 objectName 不要在运行时被改变，否则加载样式表文件时会匹配不到原先的控件。

一般用法：ID 选择器一般用于为比较特殊的控件设置样式，例如在项目界面中需要突出一个重要的按钮, 那么此时我可以给这个按钮设置一个独特的样式用以提醒用户。

举个栗子：QPushButton#settings_button{ color: red; background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #454648, stop:1 #7A7A7A);}

4）后代选择器（经常使用）
格式如下：选择器1 选择器2 {属性:值;} 即在选择器1 匹配的所有对象中, 找到选择器2 所匹配的所有后代对象, 并给它们设置样式。

注意点：

• 后代选择器必须用空格隔开每个选择器，并可以通过空格一直延续下去。
• 后代选择器可以使用其它类型的选择器。

一般用法：后代选择器一般用于指定特定控件类的后代的样式。

举个栗子： QWidget QFrame QPushButton{ font-size: 20px; padding: 0px; } 这表示将应用程序中QWidget下QFrame控件里的QPushButton设置指定样式。

5）子控件选择器
格式如下：类型选择器::子控件{属性:值;} 类选择器::子控件{属性:值;} 表示对类型选择器或类选择器指定的所有控件的子控件设置样式。

6）伪类选择器（经常使用）
格式如下：类型选择器::状态{属性:值;} 类选择器::状态{属性:值;} 表示对类型选择器或类选择器指定的所有控件设置它在指定状态时的样式。

注意点：

• 伪状态以冒号（ : ） 作为分隔紧跟着选择器。
• 伪状态可以使用感叹号（ ! ）进行取反。
• 伪状态可以链接起来使用（逻辑与的效果）。
• 伪状态可以与子控件 组合使用。

一般用法：主要设置控件的在不同操作的样式显示，如QPushButton的鼠标悬浮，点击，放开时的样式设置，又称三态。

举个栗子：QPushButton:hover { color: red} 这表示鼠标悬浮在 QPushButton 的上方时样式生效。QRadioButton:!hover { color: yellow} 这表示鼠标未悬浮在 QPushButton 的上方时样式生效。

属性（background，color，border等）

1）背景属性（background）
background-color — 经常使用
取值: Brush 类型(Brush 类型介绍见本节最后)。
作用: 设置控件的背景颜色，默认是 border 之内的矩形区域，包括内边距和内容矩形。

background-image
取值: URL 类型，格式是 url(filename)，filename 是一个本地文件路径或 Qt 资源文件路径，不支持网络图片。
作用: 设置控件的背景图片。可以与背景颜色共存，背景图片会覆盖背景颜色，在没有被图片覆盖的区域，显示背景颜色。

background-repeat
取值:

• repeat-x：在水平方向上平铺
• repeat-y：在垂直方向上平铺
• repeat：在水平和垂直方向上都平铺，这是默认值
• no-repeat：不平铺
  作用: 设置背景图片的平铺方式。

background-position
取值:

• top：向上对齐
• left：向左对齐
• bottom：向下对齐
• right：向右对齐
• center：居中
  格式 ： background-position: 水平对齐方式 垂直对齐方式。
  作用 ： 设置背景图片的对齐方式， 默认情况下向左上对齐。

background-attachment
取值:

• scroll：滚动，这是默认值
• fixed：固定
  作用 : 设置背景图片在带滚动条的控件 (QAbstractScrollArea) 中是固定在一个位置还是随着滚动条滚动。

background-clip
取值:

• margin：外边距矩形
• border：边框矩形
• padding：内边距矩形
• content：内容矩形
  作用: 设置背景颜色覆盖的区域,，默认情况下背景只覆盖内边距矩形，如果没有指定，默认值为 border。

background-origin