QSS查询手册
创始人
2025-05-28 01:52:36

文章目录

    • 1、Qss背景属性(Background)
    • 2、QSS边框属性(Border和Outline)
    • 3、Box属性
    • 4、QSS字体属性(Font)
    • 5、QSS外边距属性(Margin)
    • 6、QSS内边距属性(Padding)
    • 7、QSS 位属性(Positioning)
    • 8、QSS文本属性(Text)
    • 9、QSS过滤选择器和优先级
    • 10、Qss优先级
    • 11、常用的QSS大全
      • 标准色
      • 字体名称
    • 12、使用举例
    • 13、Qt样式表设置函数
    • 14、伪状态集合

1、Qss背景属性(Background)

属性说明
background在一个声明中设置所有的背景属性。
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
background-color设置元素的背景颜色。
background-image设置元素的背景图像。
background-position设置背景图像的开始位置。
background-repeat设置是否及如何重复背景图像。
background-clip规定背景的绘制区域。
background-origin规定背景图片的定位区域。
background-size规定背景图片的尺寸。

2、QSS边框属性(Border和Outline)

属性说明
border在一个声明中设置所有的边框属性。
border-bottom在一个声明中设置所有的下边框属性。
border-bottom-color设置下边框的颜色。
border-bottom-style设置下边框的样式。
border-bottom-width设置下边框的宽度。
border-color设置四条边框的颜色。
border-left在一个声明中设置所有的左边框属性。
border-left-color设置左边框的颜色。
border-left-style设置左边框的样式。
border-left-width设置左边框的宽度。
border-right在一个声明中设置所有的右边框属性。
border-right-color设置右边框的颜色。
border-right-style设置右边框的样式。
border-right-width设置右边框的宽度。
border-style设置四条边框的样式。
border-top在一个声明中设置所有的上边框属性。
border-top-color设置上边框的颜色。
border-top-style设置上边框的样式。
border-top-width设置上边框的宽度。
border-width设置四条边框的宽度。
outline在一个声明中设置所有的轮廓属性。
outline-color设置轮廓的颜色。
outline-style设置轮廓的样式。
outline-width设置轮廓的宽度。
border-bottom-left-radius定义边框左下角的形状。
border-bottom-right-radius定义边框右下角的形状。
border-image简写属性,设置所有 border-image-*属性。
border-image-outset规定边框图像区域超出边框的量。
border-image-repeat图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
border-image-slice规定图像边框的向内偏移。
border-image-source规定用作边框的图片。
border-image-width规定图片边框的宽度。
border-radius简写属性,设置所有四个border-*-radius属性。
border-top-left-radius定义边框左上角的形状
border-top-right-radius定义边框右下角的形状。
box-decoration-break元素在发生断行时其样式的表现形式
box-shadow向方框添加一个或多个阴影。

3、Box属性

属性说明
overflow-x如果内容溢出了元素内容区域,是否对内容的左/右边缘进行裁剪。
overflow-y如果内容溢出了元素内容区域,是否对内容的上/下边缘进行裁剪。
overflow-style规定溢出元素的首选滚动方法。
rotation围绕由 rotation-point 属性定义的点对元素进行旋转。
rotation-point定义距离上左边框边缘的偏移点。

4、QSS字体属性(Font)

属性说明
font在一个声明中设置所有字体属性
font-family规定文本的字体系列。
font-size规定文本的字体尺寸。
font-size-adjust为元素规定 aspect 值。
font-stretch收缩或拉伸当前的字体系列。
font-style规定文本的字体样式。
font-variant规定是否以小型大写字母的字体显示文本。
font-weight规定字体的粗细。

5、QSS外边距属性(Margin)

属性说明
margin在一个声明中设置所有外边距属性。
margin-bottom设置元素的下外边距。
margin-left设置元素的左外边距。
margin-right设置元素的右外边距。
margin-top设置元素的上外边距。

6、QSS内边距属性(Padding)

属性说明
padding在一个声明中设置所有内边距属性。
padding-bottom设置元素的下内边距。
padding-left设置元素的左内边距。
padding-right设置元素的右内边距。
padding-top设置元素的上内边距。

7、QSS 位属性(Positioning)

属性说明
bottom设置定位元素下外边距边界与其包含块下边界之间的偏移。
clear规定元素的哪一侧不允许其他浮动元素。
clip剪裁绝对定位元素。
cursor规定要显示的光标的类型(形状)。
display规定元素应该生成的框的类型。
float规定框是否应该浮动。
left设置定位元素左外边距边界与其包含块左边界之间的偏移。
overflow规定当内容溢出元素框时发生的事情。
position规定元素的定位类型。
right设置定位元素右外边距边界与其包含块右边界之间的偏移。
top设置定位元素的上外边距边界与其包含块上边界之间的偏移。
vertical-align设置元素的垂直对齐方式。
visibility规定元素是否可见。
z-index设置元素的堆叠顺序。

8、QSS文本属性(Text)

属性说明
color设置文本的颜色。
direction规定文本的方向/书写方向
letter-spacing设置字符间距。
line-height设置行高。
text-align规定文本的水平对齐方式。
text-decoration规定添加到文本的装饰效果。
text-indent规定文本块首行的缩进。
text-shadow规定添加到文本的阴影效果。
text-transform控制文本的大小写。
unicode-bid设置文本方向。
white-space规定如何处理元素中的空白。
word-spacing设置单词间距。
hanging-punctuation规定标点字符是否位于线框之外。
punctuation-trim规定是否对标点字符进行修剪。
text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis向元素的文本应用重点标记以及重点标记的前景色。
text-justify规定当text-align设置为"justify"时所使用的对齐方法。
text-outline规定文本的轮廓。
text-overflow规定当文本溢出包含元素时发生的事情。
text-shadow向文本添加阴影。
text-wrap规定文本的换行规则。
word-break规定非中日韩文本的换行规则。
word-wrap允许对长的不可分割的单词进行分割并换行到下一行。

9、QSS过滤选择器和优先级

1、 通配选择器:*; 所有的控件属性设置

*
{            }    

2、类型选择器:QPushButton; 匹配所有QPushButton和其子类的实例

QPushButton
{}

3、类选择器:.QPushButton; 匹配所有QPushButton的实例,不包括其子类。注意前面有一个

.QPushButton
{}

4、属性选择器:QPushButton[flat = “false”]; 匹配所有flat属性是false的QPushButton实例,注意该属性可以是自定义的属性,不一定非要是类本身具有的属性

QPushButton[flat = "false"]
{}

5、ID选择器:#myButton; 匹配所有id为myButton的控件实例,这里的id实际上就是objectName指定的值, 针对特定名称的控件设置属性

QPushButton#myButton1, #myButton2
{}

6、后代选择器:QDialog QPushButton; 所有QDialog容器中包含的QPushButton,不管是直接的还是间接的。

QDialog QPushButton
{}

7、子选择器:QDialog > QPushButton; 所有QDialog容器下面的QPushButton,其中要求QPushButton的直接父容器是QDialog

QDialog > QPushButton
{}

**注意:**以上选择器可以联合使用,并且支持一次设置多个选择器类型==,用逗号隔开==,如#object1,#object2,#object3表示所有这个ID使用同个规则;QDialog #object1表示选择所有QDialog下所有ID为object1的对象.

10、Qss优先级

原则:宽泛的设置优先级低于更加针对具体的设置,文件上面的设置优先级低于文件下面的设置。

11、常用的QSS大全

标准色

aqua, black, blue, fuchsia, gray, green, lime, maroon,navy, olive, orange, purple, red, silver, teal, white, yellow

字体名称

名称表示
微软雅黑Microsoft YaHei
宋体SimSun
黑体SimHei
仿宋FangSong
楷体KaiTi
隶书LiSu
幼圆YouYuan
华文细黑STXihei
华文楷体STKaiti
华文宋体STSong
华文中宋STZhongsong
华文仿宋STFangsong
方正舒体FZShuTi
方正姚体FZYaoti
华文彩云STCaiyun
华文琥珀STHupo
华文隶书STLiti
华文行楷STXingkai
华文新魏STXinwei

12、使用举例

1、 选择器

 {property:value}

Qt中有很多控件,例如 QPushButton、 QWidget等被称为选择器,== {property:value}==代表属性和值。

QPushButton {color: red} //代表QPushButton 颜色为红色

2、几个选择器可以指定相同的声明,使用==逗号“,”==来分隔选择器

//代表QPushButton ,QLineEdit,QComboBox 颜色为红色
QPushButton,QLineEdit,QComboBox  {color: red}

3、声明部分的规则有多个属性值时包含在花括号{}中,以分号;分隔,属性之间在QSS之间是不区分大小写的。

QPushButton {color: red;background-color:white;}

13、Qt样式表设置函数

setStyleSheet();

14、伪状态集合

伪状态描述
:active此状态在小部件驻留在活动窗口时设置
:adjoins-item此状态在QTreeView的::branch与一个item相邻时设置
:alternate当QAbstractItemView::alternatingRowColors()设置为真时,在绘制QAbstractItemView的行时,为每个交替行设置此状态
:bottom此item位于底部。例如,QTabBar有位于底部的选项卡
:checked此item被选中。例如,QAbstractButton的checked状态
:closable此item可以被关闭。例如,QDockWidget的QDockWidget::DockWidgetClosable特性开启时
:closed此item处于关闭状态。例如,QTreeView中未展开的item
:default此item的默认状态。例如,一个default的QPushButton或QMenu中的一个默认动作
:disabled此item被禁用
:editable如QComboBox是可编辑的
:edit-focus此item具有编辑焦点(参考QStyle::State_HasEditFocus)。此状态仅对Qt扩展应用程序可用
:enabled此item已启用
:exclusive此item是一个独占项组的一部分。例如,独占QActionGroup中的菜单项
:first此item是列表中的第一项。例如,QTabBar中的第一个选项卡
:flat此item是平的。例如,一个扁平的QPushButton
:floatable此item可以浮动。例如,QDockWidget的QDockWidget::DockWidgetFloatable的特性开启时
:focus此item具有输入焦点
:has-children此item具有子对象。例如,QTreeView中具有子项的项
:has-sibling此item具有兄弟对象。例如,QTreeView中与之相邻的项
:horizontal此item处于水平方向
:hover鼠标悬浮在此item上
:indeterminate此item处于不确定状态。例如,QCheckBox或QRadioButton被部分选中
:last此item是列表中的最后一项。例如,QTabBar中的最后一个选项卡
:left此item位于左侧。例如,QTabBar有位于左侧的选项卡
:maximized此item处于最大化状态。例如,一个最大化的QMdiSubWindow
:middle此item是列表中的中间一项。例如,一个不在QTabBar中的开头或结尾的选项卡
:minimized此item处于最小化状态。例如,一个最小化的QMdiSubWindow
:movable此item可以被移动。例如, QDockWidget的QDockWidget::DockWidgetMovable特性开启时
:no-frame此item没有边框。例如,没有边框的QSpinBox或Q LineEdit
:non-exclusive此item是一个非独占项组的一部分。例如,非独占QActionGroup中的菜单项
:off对可以切换的items,这适用于处于off状态的item
:on对可以切换的items,这适用于处于on状态的widget
:only-one此item是列表中的唯一的一项。例如,一个在QTabBar中单独的选项卡
:open此item处于打开状态。例如,QTreeView中的展开项,或带有菜单的QComboBox或QPushButton
:next-selected此item是列表中的下一个被选中的项。例如,在QTabBar中当前选项卡的下一个要选中的选项卡
:pressed鼠标正在按压在此item上
:previous-selected此item是列表中的上一个被选中的项。例如,在QTabBar中当前选项卡的上一个要选中的选项卡
:read-only此item处于只读或不可编辑状态。例如,一个只读QLineEdit或不可编辑的QComboBox
:right此item位于右侧。例如,QTabBar有位于右侧的选项卡
:selected此item处于选中状态。例如,一个在QTabBar中被选中的选项卡或一个在菜单中被选中的菜单项
:top此item位于顶部。例如,QTabBar有位于顶部的选项卡
:unchecked此item处于未被选中状态
:vertical此item处于垂直方向
:window小部件是一个窗口(例如,一个顶层小部件)

相关内容

热门资讯

南极考察队完成中山站卸货 两船... 中国第42次南极考察队今天(14日)顺利结束中山站卸货作业。连续多日执行吊挂作业任务的Ka-32直升...
2025年海南自贸港金融人才发...   12月12日,“2025年海南自贸港金融人才发展论坛”在海口市秀英区成功举办。本次论坛以“人才筑...
含编内、紧缺急需!福建多地招聘... 近日,福建多地招聘教师,一起来看↓↓↓ 招聘速览 泉州市部分公办学校公开招聘博士研究生27名 ...
所有孕妇都需要做产前分子遗传诊...   产前检查已经成为孕妇保健的重要环节,产前分子遗传诊断作为一种先进的医学手段,逐渐进入了孕期检查的...
给企业感谢信 给企业感谢信 给...   尊敬的***(先生/女士):您好!   值此新春佳节到来之际,****集团、****学院党政领导...