Qt样式表设置-old版本

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

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
取值:

• margin：外边距矩形
• border：边框矩形
• padding：内边距矩形
• content：内容矩形
  作用: 指明背景图片的覆盖范围矩形，如果没有指定，默认为 padding。通常与 background-position 和 background-image 一起使用。

2）前景属性 （color）
color— 经常使用
取值：Brush 类型的值
作用：与背景相对应，背景设置的是控件的最底层的颜色作为背景，但 color 设置的前景色，也就是控件文字的颜色，color 属性是被所有 widget 都支持的。

3）边框属性（ border）
border— 经常使用
border-width
取值：数值px，单位为像素，数值后面一定要加上像素单位 px，也有其他单位, 但不推荐使用。
作用：设置边框的宽度。

border-color
取值：Brush 类型
作用：设置边框的颜色。

border-radius
取值：水平半径 垂直半径
单位为像素，数值后跟px，如果只有一个值，表示同时设置水平半径和垂直半径，如果有两个值，则第一个代表水平半径，第二个代表垂直半径。
作用: 设置边框四个角的弧度。

border-style
取值：

• dashed: 显示一个虚线边框，线段之间由短划线连接
• dot-dash
• dot-dot-dash
• double :显示一个双线边框
• groove : 显示一个凹陷的边框，通常用于表示“按下”状态
• inset :显示一个内嵌的边框，类似于groove但是更加平滑
• outset :显示一个外嵌的边框，类似于ridge但是更加平滑
• ridge : 显示一个凸起的边框，通常用于表示“突出”状态（也蛮好用的）
• solid :显示一个实线边框（常用）
• none
  作用：设置边框的渲染样式。

border-image（没使用过）
单写格式
作用：单写格式指的是, 对每条边框的每个属性分别进行设置。

• border-top-width
• border-top-style
• border-top-color
• border-right-width
• border-right-style
• border-right-color
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left-width
• border-left-style
• border-left-color
  连写格式
  格式一：这种格式将四条边框的宽度，风格，颜色全部设置为一样。
  border: width style color;//经常使用
  格式二：这种格式设置指定方向边框的样式，可以只设置一条边。
  border-top: width style color;
  border-right: width style color;
  border-bottom: width style color;
  border-left: width style color;
  格式三： 这种连写格式是指定一种属性 ， 按照上右下左四个方向进行设置边框。
  border-width: 上 右 下 左;
  border-style: 上 右 下 左;
  border-color: 上 右 下 左;
  省略左则与右相同，省略下则与上相同，省略右或右下左则与上相同。

4）字体属性（ font）
font-style
取值:

• normal：正常
• italic：斜体
• oblique：倾斜的字体
  作用: 设置字体的风格

font-weight
取值:

• normal: 正常粗细
• bold: 加粗
• 整型数字（数越大，字体越粗）
  作用: 设置文字的粗细

font-size
取值: 数值+px（如20px）
作用: 设置字体的大小

font-family
取值: 各种字体名称（如宋体，黑体，隶书等）
作用: 设置文字的字体

连写格式
font: style weight size family//经常使用

• style 和 weight 的位置可以交换, 并且可以省略。
• size 不能被省略
• size 和 family 必须写在其他两个属性的后面 , 并且位置不能交换。
• family 可以省略 , 省略后使用默认字体。

5）文本属性
text-align
取值:

• top
• bottom
• left
• right
• center（支持这个属性的控件目前只有 QPushButton 和 QProgressBar）
  作用: 设置文本的对齐方式

text-decoration
取值:

• none：没有装饰
• underline：下划线
• overline：上划线
• line-through：删除线
  作用: 给文本添加装饰

padding 和 margin

• 盒模型中的 padding 和 margin 都可以连写，也可以单独写，它们都能完成四个方向上的边距设置，默认情况下都是 0px。
• 与边框和其他连写格式一样， 如果它们连写时， 最多可以指定 4 个值， 最少指定 1 个值, 指定 4 个时，分别表示上右下左方向的边距，省略时也有相同的效果，即省略左时默认和右一样，省略下时默认和上一样，省略右时和上一样。
• 设置边距时， 数值后面必须要带像素单位， 即 px。

width 与 height

• 这两个属性设置的是盒子内容的宽高。
• 这两个属性只对子控件选择器选中的对象有效。
• 这两个属性的取值均是像素值，即数字加像素单位 px。

max-width min width 与 max-height min-height

• 这四个属性对所有的 widget 都有效，用来设置盒子内容的最小或最大尺寸。
• 当最小宽度与最大宽度相等时，意味着给这个盒子的内容设置了一个固定宽度。
• 当最小高度与最大高度相等时，意味着给这个盒子的内容设置了一个固定高度。

outline
属性：
outline

• outline-color
• outline-offset
• outline-style
• outline-radius
• outline-bottom-left-radius
• outline-bottom-right-radius
• outline-top-left-radius
• outline-top-right-radius
  取值：none
  作用：outline（轮廓）是控件有焦点时（如鼠标停留在当前控件时）， 将属性值绘制在边框边缘的外围，可起到突出作用，轮廓线不占据控件，也不一定是矩形。
  栗子：当我们想在一个控件有焦点时,，不绘制轮廓，只需要照抄下面。
  outline: none;

Brush

Brush 一般用来设置颜色，其取值有 3 种， 分别是 Color, Gradien