Qt—qss笔记

一个样式表由一系列样式规则构成。每个样式规则都有着下面的形式：

selector{attribute: value}

1. 选择器（selector）部分通常为一个类名（如：QComboBox）。
2. 属性 (attribute) 部分是一个样式表属性的名字
3. 值 （value）是赋给该属性的值
4. 为了方便，还有一种简化形式：

selector1,selector2,...,selectorN{
    attribute1: value1;
    attribute2: value2;   
            .
            .
            .
            .
    attributeM: valueM;
}

1. 这种简化形式可以同时为N个选择器相匹配的部件设置M种属性
2. 例

QCheckBox,QSpinBox,QComboBox{
    color: red;
    background-color: white;
    font: bold;
    font-family: "仿宋"
}

1. 方箱模型

2. 在样式表中，每个部件都被看作一个由四个同心相似的巨型组成的箱体。

   1. 空白（margin）

       空白区域位于边框外，并且总是透明的。

   2. 边框（border）

               边框为部件提供了四周的框架，其中border-style可以设置一些框架风格，如inset、outset、solid、ridge。

   3. 填充（padding）

               填充在边框和内容区域提供了空白间隔。

   4. 内容（content）

                对于一个平面部件，例如一个空白，边框和填充都是0像素的部件而言，这四个矩形框是完全重合的。

 

---

1. 前景（foreground）与 背景（background）。
2. 部件的前景色用于绘制上面的文本，可以通过color属性指定 。
3. 背景色用于绘制部件的填充矩形，可以通过background-color属性指定 。
4. 背景图片使用background-image 属性定义，它用于绘制由background-origin 指定的矩形区域（空白，边框，填充或内容）。
5. 背景图片可以在矩形区域内的对齐和平铺方式通过background-position和 background-repeat属性指定。
6. 如果指定的背景图片具有alpha通道（即有半透明效果），通过background-color 指定的颜色将会透过透明区域。这一功能可以使背景图片在多种环境下重复利用。
7. 该例子中使用的样式表如下所示：

QFrame{
    margin: 10px;
    border: 2px solid green;
    padding: 20px;

    background-color: gray;
    background-image: url(qt.png);
    background-position: top right;
    background-origin: content;
    background-repeat: none;
}

1. 在这个例子中，QFrame四周的空白、边框，和填充值都是一样的。

2. 实际上margin属性可以在上下左右四个方向分别制定我们需要的不同值，例如：

QFrame{
    margin: 14px 18px 20px 25px
}

同时，我们可以分贝制定margin-top , margin-right, margin-bootom,margin-left 四个属性。

 QFrame{
     margin-top: 14px;
     margin-right: 18px;
     margin-bottom: 20px;
     margin-left: 25px;
  }

Qt样式表支持多种控件，例如：QCheckBox，QLabel，QLineEdit，QListView，QMenu，QPushButton,  QTextEdit,  ToolTip。

创建可缩放样式

1. 在默认情况下， 通过 background-image 指定的背景图片会自动重复平铺，以覆盖

2. 部件的整个填充矩形（即边框里面的那个区域）。如果我们想创建能够随着部件大小自动缩放二不是平铺的背景，我们需要

3. 设置一种称之为“边框图片”的东西。

  QPushButton{
      border-width: 4px;
      border-image:url(button.png) 4 4 4 4 stretch stretch;//stretch往外伸缩
  }

伪状态

1. 部件的外观可以按照用户界面元素的状态分别来定义，这在样式表中给称为"伪状态"
2. 例，当push button 被按下时具有阴影状态，我们可以指定一个叫 pressed 的伪状态

 QPushButton{
     border: 2px outset green;
     background :gray;
 }

 QPushButton:pressed{
      border-style : inset;
 }

 

伪状态列表

伪状态	描述
:checked	button部件被选中的时候
:enabled	部件不得使用
:fcous	部件获得焦点
:hover	鼠标位于部件上
:indeterminate checkbox 或 radiobutton	被部分选中
:off	部件可以切换，且处于off状态
:on	部件可以切换，且处于on状态
:pressed	部件被鼠标按下
:unchecked button	部件未被选中