086.PyQt5_QSS_声明

  

我 的 个 人 主 页： 失心疯的个人主页
入 门 教 程 推 荐 ： Python零基础入门教程合集
虚 拟 环 境 搭 建 ： Python项目虚拟环境(超详细讲解)
PyQt5 系 列 教 程： Python GUI(PyQt5)文章合集
Oracle数据库教程： Oracle数据库文章合集
优 质 资 源 下 载 ： 资源下载合集

QSS 声明

QSS_声明

• 作用
  • 指明会作用怎样的样式
• 语法

  {
      key1: value1;
      key2: value2;
  }
  

• 基本声明
• 盒子模型

  • 

  • 以边框border为基准
    • margin：外边距
    • padding：内边距
    • content：内容矩形
  • QSS控制
    • 外边距margin
    • 内边距padding

---

• 边框相关(Border)
  • 边框
    • 控件的边框就是围绕控件内容和内边距的一条或多条线
    • 每个边框有三个方面：样式(border-style)、宽度(border-width)、颜色(border-color)
    • 注意：需要线设置宽度，样式和颜色才能体现出来
    • 样式
      • 四条线统一设置(上 右 下 左)：

        border-style: 样式;
        border-style: 样式1 样式2 样式3 样式4;
        

      • 四条线分开设置

        border-top-style: 样式;
        border-right-style: 样式;
        border-bottom-style: 样式;
        border-left-style: 样式;
        

      • 常用样式

        none        # 无边框
        dotted      # 点状边框
        dashed      # 虚线边框
        solid       # 实线边框
        double      # 双实线边框
        groove      # 3D凹槽边框，其效果取决于
        ridge       # 3D垄状边框
        inset       # 3D inset边框
        outset      # 3D outset边框
        

    • 宽度
      • 四条线统一设置(上 右 下 左)

        # 统一设置
        border-width: 2px;
        
        # 上下 左右分别设置
        border-width: 2px 8px;
        
        # 上 下 左 右 分别设置
        border-width: 2px 4px 8px 16px;
        

      • 四条线分开设置

        border-top-width: 10px;
        border-right-width: 12px;
        border-bottom-width: 14px;
        border-left-width: 16px;
        

      • 常用取值

        32px
        2em
        
        # 注意：1em = 16px
        

    • 颜色
      • 四条线统一设置(上 右 下 左)

        border-color: 颜色;
        border-color: 颜色1 颜色2 颜色3 颜色4;
        

      • 四条线分开设置

        border-top-color: 颜色;
        border-right-color: 颜色;
        border-bottom-color: 颜色;
        border-left-color: 颜色;
        

      • 常用取值

        # color_name
            red
            yellow
            green
            cyan
            blue
            orange
            ...
        
        # rgb_number
            rgb(255,255,255)
            rgb(255,0,255)
        
        # hex_number
            #00ff00
        

  • 边框圆角
    • 边框圆角实际就是相邻两条边框的内切圆
    • 圆心永远在相邻两条边框的平分线上，只需要确定半径则可以决定圆弧大小
    • 四个角统一设置圆角半径(上左 上右 下右 下左)

      border-radius: 10px;
      border-radius: 10px 20px 40px 80px;
      

    • 四个角分别设置圆角半径

      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      

    • 常用取值
      • 具体的像素值
  • 边框图片
    • 设置语法

      border-image:url(图片路径) 四个裁剪值 重复策略
      
      # 示例：border-image:url(../images/test.png) 30 30 30 30 repeat
      

    • 裁剪值
      • 由四条线将图片裁剪为9份，主要是要确定好四条分割线的距离

      上：距离上边的线
      右：距离右边的线
      下：距离下边的线
      左：距离左边的线
      

    • 重复策略
      • 排除四个角，其他部分的重复策略

      round       # 平铺
      repeat      # 重复
      stretch     # 拉伸
      

    • 注意：需要使用border-width辅助确定边框的宽度
    • 示例

      • 

      • 
    • 代码

      from PyQt5.Qt import *
      import sys
      
      class Windows(QWidget):
          def __init__(self):
              super().__init__()
              self.setWindowTitle('QSS-边框图片')
              self.resize(500, 500)
              self.widget_list()
      
          def widget_list(self):
              self.add_widget()
      
          def add_widget(self):
              lab1 = QLabel('边框图片设置',self)
              lab1.resize(300, 300)
              lab1.move(100,100)
      
              lab1.setStyleSheet("""
                  border-image: url(../images/test_2.png) 30 30 30 30 repeat;
                  border-width: 30px;
                  """)
      
      if __name__ == '__main__':
          app = QApplication(sys.argv)
          window = Windows()
      
          window.show()
          sys.exit(app.exec_())
      

---

• 外边距(Margin)
  • 统一设置(上 右 下 左)

    margin: 值;
    margin: 值1 值2 值3 值4;
    
    # 例：margin: 10px 12px 14px 16px;
    

  • 分开设置

    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    

  • 常用取值

    16px
    1em
    

  • 注意
    • resize调整的是包含外边距的尺寸，外边距变大，边框以内尺寸会变小

---

• 内边距(Padding)
  • 统一设置(上 右 下 左)

    padding: 值;
    padding: 值1 值2 值3 值4;
    
    # 例：padding: 10px;
    

  • 分开设置

    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    

  • 常用取值

    16px
    1em
    

---

• 背景(Background)
  • 背景颜色

    # 设置背景颜色
    background-color: 颜色值;
    
    # 设置背景图片
    background-image: url(图片路径);
    
    # 设置背景图片对齐方式
    background-position: top;
        # left              # 水平居左
        # right             # 水平居右
        # top               # 垂直居上
        # bottom            # 垂直居下
        # right top         # 水平居右并且垂直居上
    
    # 设置背景参照位置(设置背景图片紧贴外边距、边框、内边距、内容矩形)
    background-origin: border;
        # margin            # 紧贴外边距
        # border            # 紧贴边框
        # padding           # 紧贴内边距
        # content           # 紧贴内容矩形
        # 注意：设置背景图片紧贴外边框时，超出边框部分并不能显示
    
    # 设置背景裁剪策略
    background-clip: padding;
        # padding           # 沿着内边框进行裁剪，超出部分被剪切掉
        # content           # 沿着内容矩形进行裁剪，超出部分被剪切掉
        # border            # 沿着边框进行裁剪，超出部分被剪切掉
        
    # 设置重复策略
    background-repeat: no-repeat;
        # no-repeat         # 不重复
        # repeat-x          # 水平方向重复
        # repeat-y          # 垂直方向重复
        # repeat-xy         # 水平方向和垂直方向同时重复
        
    # 设置背景图是否跟随内容滚动
    background-attachment: scroll;
        # scroll            # 默认值，背景图像会随着页面其余部件的滚动而移动
        # fixed             # 当页面其余部分滚动时，背景图像不移动
    

  • 常用取值

    # color_name
        red
        yellow
        green
        cyan
        blue
        orange
        ...
    
    # rgb_number
        rgb(255,255,255)
        rgb(255,0,255)
    
    # hex_number
        #00ff00
    
    # 渐变色
        qlineargradient     # 线性渐变
        qradialgradient     # 辐射渐变
        qconicalgradient    # 角度渐变
    

---

• 前景(Color)
  • 字体
    • 统一设置

      font:
      

    • 分开设置

      font-family: 隶书;              # 字体家族
      font-size: 12px;                # 字体尺寸
      font-style: normal;             # 字体样式
          # normal        # 默认值，显示一个标准字体样式
          # italic        # 斜体
          # oblique       # 斜体
      font-weight: bold;              # 字体粗细
          # normal        # 默认值，标准字符
          # bold          # 定义粗体字符
          # bolder        # 定义更粗的字符
          # lighter       # 定义更细的字符
          # 100           # 定义由粗到细的字符，400等同于normal
          .               # 700等同于boLd
          .               # 没有单位
          .
          # 900
      

    • 字体颜色

      color: red;
      

      • 常用取值

      # color_name
          red
          yellow
          green
          cyan
          blue
          orange
          ...
      
      # rgb_number
          rgb(255,255,255)
          rgb(255,0,255)
      
      # hex_number
          #00ff00
      

---

• 最大最小
  • 设置最大、最小尺寸

    min-width: 200ox;           # 最小宽度
    min-height: 200ox;          # 最小高度
    max-width: 200ox;           # 最大宽度
    max-height: 200ox;          # 最大高度
    

---

• 复合控件内部子控件样式
  • 子控件设置

    # 设置文本左侧留空距离
    spacing: 60px;
    
    # 设置子控件参照物
    Subcontrol-Origin: margin
        # margin            # 紧贴外边距
        # border            # 紧贴边框
        # padding           # 紧贴内边距
        # content           # 紧贴内容矩形
        
    # 设置子控件位置
    Subcontrol-Position: left top;
        # left              # 水平居左
        # right             # 水平居右
        # top               # 垂直居上
        # bottom            # 垂直居下
        # center            # 居中
        # right top         # 水平居右并且垂直居上
    
    # 设置子控件偏移位置
    Top: 10px               # 顶部偏移，控件向下移动
    Bottom: 10px            # 底部偏移，控件向上移动
    Left: 10px              # 左侧偏移，控件向右移动
    Right: 10px             # 右侧偏移，控件向左移动
    
    position-relative;      # 相对位置偏移，以自身位置为基准进行偏移
    position-absolute;      # 绝对位置偏移，以参照物位置为基准进行偏移
    

---

• 渐变色
  • 线性渐变
    • 语法

      qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 white, stop:0.4 gray, stop:1 green;)
      
      # 参数
      (x1, y1)            # 开始点位置坐标
      (x2, y2)            # 结束点位置坐标
      stop:0 white        # 标记点:位置 颜色
      

    • 图示

      • 

  • 辐射渐变
    • 语法

      qradialgradient(cx:0.7, cy:0.7, radius:0.5, fx:0.5, fy:0.5, stop:0 red, stop:1 orange)
      
      # 参数
      (cx, cy)            # 辐射圆心坐标
      radius              # 辐射圆半径
      (fx, fy)            # 辐射焦点坐标
      stop:0 red          # 标记点:位置 颜色
      

    • 图示
      • 
  • 角度渐变
    • 语法

      qconicalgradient(cx:0.5, cy:0.5, angle:10, stop:0 red, stop:1 orange)
      
      # 参数
      (cx, cy)            # 辐射焦点坐标位置
      angle               # 辐射起始角度（相对于焦点右侧水平位置开始）
      stop:0, red         # 标记点:位置 颜色
      

    • 图示

      • 

---

• 更多属性描述：Qt Style Sheets Reference | Qt Widgets 5.15.13

---

087.PyQt5_QSS_注意事项

QSS 注意事项

• QSS级联
  • QSS可以在QApplication、父控件、子控件中设置
  • 一个控件的最终样式，会受到父控件和QApplication的影响
• QSS冲突
  • 如果一个控件，作为后代控件，被多个祖先控件影响
  • 不同属性产生叠加，相同属性产生覆盖
  • 看特异（选择器设置）
    • 特异性最强的生效
    • 父子继承关系，其特异性相同
    • 特异性相同的，谁在后谁生效

---

088.QSS_第三方库(qdarkgraystyle)

QSS 第三方库(qdarkgraystyle)

• 需要手动安装
  • File —— Settings —— Project PyQt5 —— Project Interpreter —— 右侧“+”
    • 搜索 qdarkgraystyle —— 点击 Install Package 安装