首页 > 其他分享 >32. 样式表

32. 样式表

时间:2025-01-20 20:12:14浏览次数:1  
标签:控件 bottom 32 top 边框 width 样式表 border

一、样式表

  为了美化窗口或控件的外观,可以通过窗口或控件的调色板给窗口或控件按照角色和分组设置颜色,还可以对窗口或控件的每个部分进行更细致的控制,这涉及窗口或控件的样式表(Qt style sheets, QSS),它是从 HTML 的层叠样式表(cascading style sheets, CSS)演化而来的。样式表由固定格式的文本构成,用窗口或控件的 setStyleSheet(styleSheet:str) 方法设置样式,其中参数 styleSheet 是样式格式符。

  我们可以在终端中使用 pip 安装 pyside6 模块。

pip install pyside6

  定义样式表的一般规则是用 "样式属性:值" 的形式定义样式属性的值,多个样式的 "样式属性:值" 对之间用分号 “;” 隔开。如果是对某一类控件进行设置,需要先说明控件的类,然后后面跟一对 “{}”,把 “样式属性:值” 放到 “{}” 中。

setStyleSheet("QPushButton{font:20pt, color:rgb(255, 0, 0), background-color:rgb(100, 100, 100)}")

二、选择器

  样式表除了类名、对象名和属性名外,一般不区分大小写。样式表由 选择器(selector)和 声明(declaration)两部分构成,选择器用于选择某种类型或多个类型的控件,声明是要设置的属性和属性的值

  选择器的使用方法如下所示:

选择器 说明 col3
* 全局选择器,选择所有控件
类名 类型选择器,匹配所有的该类以及子类的实例
类名[属性名="属性值"] 属性选择器,匹配该该属性名等于属性值的类的实例,属性可以是自定义的
#对象名称 ID 选择器,匹配指定对象名称的实例,这里的对象名称是通过 setObjectName() 方法设置的
.类名 匹配指定类的所有实例,不包含子类
父控件类名 子控件类名 后代选择器,匹配父控件中直接或间接包含的所有子控件
父控件类名>子控件类名 子选择器,匹配父控件中直接包含的所有子控件

三、子控件

  一些复合型控件,例如 QSpinBox,由 QLineEdit 、向上的箭头 和 向下的箭头构成,向上的箭头和向下的箭头可以称为子控件。对子控件的引用是在控件和子控件之间用两个连续的冒号 :: 隔开;QSpinBox 控件的向上调节按钮控件和向下调节按钮控件可以分别通过 ::up-button 和 ::down-button 获取到。

四、伪状态

  控件会根据用户的不同操作呈现出不同的状态,这些状态也被称为 “伪状态”。一个控件有多种状态,例如 活跃(active)、激活(enabled)、失效(disabled)、鼠标悬停(hover)、选中(checked)、未选中(unchecked) 和 可编辑(editable)等,根据控件所处的状态,可以给控件设置不同的外观。样式表的格式字符串中,控件与状态之间用冒号 : 隔开,例如 "QPushButton:active{...}" 设置激活时的外观;可以同时对多个状态进行设置,例如 "QPushButton:active:hover{...}" 设置激活或者光标悬停时的外观;可以在状态前加 ,表示相反的状态。

五、盒子模型

  大多数控件都是长方形的,一个长方形控件由 Content、Padding、Border 和 Margin 4 部分构成,每个部分都是矩形。Content 矩形是除掉边距、边框和填充之后的部分,默认情况下,边距、边框和填充的距离都为 0,因此这 4 个矩形是重合的。可以用样式表分别设置这四个矩形之间的距离、边框的颜色。

盒子模型

  Content 是输入内容的区域,可以设置 Content 区域宽度和高度的最大值和最小值,属性名称分别为 max-width、max-height、min-width 和 min-height。

  对于 Padding 区域,用 padding 属性可以分别设置 Padding 与 Content 在上、右、下和左方向的距离,也可用padding-top、padding-right、padding-bottom 和 padding-left 属性分别设置距离。

  Border 区域可以设置的属性比较多,如下所示。

属性名称 类型 说明
border Border 设置边框的简写方法,相当于指定 border-color、border-style 和 border-width
border-top Border 设置控件顶部边框的简写方法,相当于指定 border-top-color、border-top-style 和 border-top-width
border-right Border 设置控件右边框的简写方法,相当于指定 border-right-color、border-right-style 和 border-right-width
border-bottom Border 设置控件底部边框的简写方法,相当于指定 border-bottom-color、border-bottom-style 和 border-bottom-width
border-left Border 设置控件左边框的简写方法,相当于指定 border-left-color、border-left-style 和 border-left-width
border-color BoxColors 边框边界的颜色,相当于指定 border-top-color、border-right-color、border-bottom-color 和 border-left-color,默认值为控件的前景色
border-top-color Brush 边框顶部边界线的颜色
border-right-color Brush 边框右边界线的颜色
border-bottom-color Brush 边框底部边界线的颜色
border-left-color Brush 边框左边界线的颜色
border-radius Radius 边框角落的圆角半径,相当于指定 border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 bordedr-bottom-left-radius,默认值为 0
border-top-left-radius Radius 边框左上角圆角的半径
border-top-right-radius Radius 边框右上角圆角的半径
border-bottom-right-radius Radius 边框右下角圆角的半径
bordedr-bottom-left-radius Radius 边框左下角圆角的半径
border-style BorderStyle 边框边界线的样式(虚线、实线、点划线等),默认为 None
border-top-style BorderStyle 边框顶部边界线的样式
border-right-style BorderStyle 边框右侧边界线的样式
border-bottom-style BorderStyle 边框底部边界线的样式
border-left-style BorderStyle 边框左侧边界线的样式
border-width BorderLengths 边框的宽度,相当于指定 border-top-width、border-right-width、border-bottom-width 和 border-left-width
border-top-width Length 边框顶部边界线的宽度
border-right-width Length 边框右侧边界线的宽度
border-bottom-width Length 边框底部边界线的宽度
border-left-width Length 边框左侧边界线的宽度
border-image BorderImage 填充边框的图像,该图像被分割成 9 个部分,并在必要时适当的拉伸

  对于 Margin 区域可以设置页边距。margin 属性设置控件的边距,等效于指定 margin-top、margin-right、margin-bottom、margin-left,默认为 0,margin-top、margin-right、margin-bottom、margin-left 分别设置控件的上、右、下和左侧的边距。

六、定位

  对于子控件,可以设置其在父控件中的位置,与此有关的属性名称如下所示。

属性名称 类型 说明
subcontrol-origin Origin 子控件的矩形原点,默认为 padding
subcontrol-position Alignment 子控件在 subcontrol-origin 属性指定的矩形内的对齐方式,默认取决于子控件
position Relative Absolute 使用 left、right、top、bottom 属性的偏移是相对坐标还是绝对坐标,默认为 relative
spacing Length 控件的内部间距,默认值取决于当前风格
top、right、bottom、left Length 以 bottom 属性为例,若 position 属性是 relative(默认值),则将子控件向上移动;若 position 是 absolute(绝对的),则 bottom 属性是指子控件的下边缘的距离,该距离与 subcontrol-origin 属性有关,默认为 0
height、width Length 子空间的高度/宽度,默认值取决于当前样式。除非另有特别规定,否则在控件上设置此属性无效。若想要控件上有一个固定的高度,应将 min-height 和 max-heigth 的值设置为相同,宽度类似
max-height Length 控件或子控件的最大高度
max-width Length 控件或子控件的最大宽度
min-height Length 控件或子控件的最小高度,默认依赖与控件的内容和风格
min-width Length 控件或子控件的最小宽度,默认依赖与控件的内容和风格控件或子控件的最大高

标签:控件,bottom,32,top,边框,width,样式表,border
From: https://www.cnblogs.com/FlurryHeart/p/18682448

相关文章

  • STM32之FreeRTOS开发介绍(十九)
    STM32F407系列文章- freertos(十九)目录前言一、简述二、开源网址三、原理及功能特性1.原理2.功能3.特点4.优缺点四、参考书籍五、实现方式总结前言FreeRTOS是一个免费的、开源的实时操作系统,专为微控制器和嵌入式系统设计,它以其轻量级、高效、易于移植和强大......
  • 串口、COM口、UART口 ;TTL、 RS-232、 RS-485
    串口、COM口、UART口TTL、RS-232、RS-485区别首先串口、COM口、UART口一般指的是硬件接口。而TTL、RS-232、RS-485则是逻辑电平0和1的不同表示标准它们区别如下:1)和RS232相比,由于RS485采用了差分传输的方式,因此抗干扰能力强很多。TTL抗干扰能力最差。2)像STM32这类单片机的USART......
  • STM32 中 GPIO 的八种工作模式介绍
    STM32的GPIO有八种工作模式,分为输入模式和输出模式,以下是详细介绍:输入模式1. 浮空输入(GPIO_Mode_IN_FLOATING)• 工作原理:引脚不连接内部上拉或下拉电阻,完全依赖外部电路来确定电平。引脚电平状态不确定,容易受外界干扰。• 适用场景:适用于连接高阻抗输出的外部设备,如......
  • 记录STM32串口通信调试的若干问题(基于HAL库)(一)硬件选型和编程环境配置
    由于遇人不淑,项目经验坑爹(永远不要指望学校和导师),本电子类科班生硬是被整成了四不像工程师,不得不自学来找到对口的工作。本文记录STM32开发的历程,有一样的初学者可以参考借鉴。一.硬件设施1.STM32F103C8T6最小系统系统板采用stm32f103c8t6最小系统板,某宝某猫上一杯奶茶的钱......
  • STM32江科大————DMA数据转运(实现AD多通道)
    声明:本人跟随b站江科大学习,本文章是观看完视频后的一些个人总结和经验分享,也同时为了方便日后的复习,如果有错误请各位大佬指出,如果对你有帮助可以点个赞小小鼓励一下,本文章建议配合原视频使用❤️如果你也正在学习STM32可以订阅本专栏,后续将不定期更新(˘³˘)❤️......
  • 初见ESP32并搭建Platformio环境
    碎碎念(寒假参加了硬禾学堂的活动,拿到了基于esp32的CrowPanel开发板。TFTLCD触摸屏能玩出不少花样,lvgl,ai识别,如果可以的话想试试把屏接到f407学习一下FSMC和FATFS。第一步先从开发平台搭建开始。总体流程为在VSCode上下载platformio的插件在插件上打开新建项目并编译下载到......
  • ESP32 学习笔记(九)舵机实验
    概念舵机是一种位置(角度)伺服的驱动器,适用于那些需要角度不断变化并可以保持的控制系统。舵机只是一种通俗的叫法,其本质是一个伺服电机。舵机有很多规格,但所有的舵机都有外接三根线,分别用棕、红、橙三种颜色进行区分,由于舵机品牌不同,颜色也会有所差异,棕色为接地线,红色为电源正极......
  • STM32之CubeMX新建工程操作(十八)
    STM32F407系列文章- STM32CubeMX(十八)目录前言一、STM32CubeMX二、新建工程​编辑1.创建工程2.选择芯片型号3.Pinout引脚分配1.SYS配置2.RCC配置3.定时器配置4.GPIO引脚配置5.中断配置6.通讯接口配置7.插件Middleware配置4.Clock时钟树配置5.工程管理Proje......
  • STM32单片机学习记录(1.17)
    一、STM32        10.3- I2C通信外设        1. I2C外设简介        (1)STM32内部集成了硬件I2C收发电路,可以由硬件自动执行时钟生成、起始终止条件生成、应答位收发、数据收发等功能,减轻CPU的负担;        (2)支持......
  • STM32单片机的学习总结
    从计算机基础、寄存器知识、汇编指令、中断以及各外设驱动的开发,单片机底层经过这段时间的学习做一个总结。计算机组成计算机由输入设备、输出设备、控制器、运算器、存储器组成,存储器分为外部存储器、内部存储器、高速缓存、寄存器,在单片机底层开发中,主要使用寄存器对某一地......