Qt 中的 QSS(Qt Style Sheets)类似于 CSS,用于自定义 Qt 应用程序中控件的外观和样式。通过 QSS,开发者可以灵活地改变窗口、按钮、标签等控件的颜色、字体、边框、间距等视觉元素,而不需要深入到绘制逻辑中。
普通示例
QLabel
{
background-color: rgb(54,54,54); /*背景色*/
color: rgb(230,230,230); /*字体颜色,前景色*/
font-family: "Microsoft YaHei"; /*字体类型*/
font-size: 14px; /*字体大小*/
}
字体样式
font-family
- 设置字体类型,可以指定一个或多个字体名称。多个字体之间用逗号分隔,当首选字体不可用时,系统会尝试使用下一个字体。
font-size
- 设置字体大小,通常使用像素(
px
)为单位。
font-weight
- 控制字体的粗细。常用值为
normal
、bold
,或者数值(100
到900
,如font-weight: 400;
表示正常粗细)。
font-style
- 设置字体的样式,可以是
normal
(正常)、italic
(斜体)或oblique
(倾斜)。
QLabel{
font-family: "Microsoft YaHei";
font-size:25px;
font-style:italic;
font-weight:bold;
color:#123456;
background-color:white;
}
边框样式
常见的 border
样式属性
-
border-width
:设置边框的宽度。可以单独指定每个边的宽度(上、右、下、左)或为所有边设置相同的宽度。支持单位包括像素(px
)、百分比(%
)等。 -
border-style
:设置边框的样式。可选值包括:none
:无边框solid
:实线dashed
:虚线dotted
:点线double
:双实线groove
:凹槽ridge
:脊状inset
:内凹outset
:外凸
-
border-color
:设置边框的颜色。可以使用颜色名称、rgb()
、rgba()
、十六进制等格式。可以单独指定每个边的颜色或为所有边设置相同的颜色。 -
border-radius
:设置边框的圆角。可以为所有四个角设置相同的圆角半径,也可以分别为每个角设置不同的圆角半径。支持单位包括像素(px
)、百分比(%
)。 -
border-top
、border-right
、border-bottom
、border-left
:分别设置每个边的边框属性,包括宽度、样式和颜色。用于为特定边设置独特的边框样式。 -
border-top-width
、border-right-width
、border-bottom-width
、border-left-width
:单独设置每个边的边框宽度。可用于创建不规则的边框样式。 -
border-top-color
、border-right-color
、border-bottom-color
、border-left-color
:分别设置每个边的边框颜色。用于在同一控件上实现多种颜色的边框效果。 -
border-top-style
、border-right-style
、border-bottom-style
、border-left-style
:分别设置每个边的边框样式。可用于组合不同边框样式(如顶部为实线,底部为虚线)。
QLabel{
border-style:solid;
border-width:4px;
border-color:red;
background-color:black;
color:white;
}
border-top-style: solid;
border-top-width: 2px;
border-top-color: red;
border-right-style: dashed ;
border-right-width: 3px;
border-right-color: green;
border-bottom-style: solid ;
border-bottom-width: 2px;
border-bottom-color: blue;
border-left-style: dotted;
border-left-width: 3px;
border-left-color: aqua;
边框圆角
border-top-left-radius: 5px;
border-top-right-radius: 15px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 35px;
border-width:4px;
border-style:solid;
文字位置
QLabel{
padding-left: 100px;
padding-top: 1px;
border-style:solid;
border-color:pink;
border-width:4px;
background-color:black;
color:white;
font-size:20px;
}
背景样式
background-color
:设置背景颜色。可以使用颜色名称(如 red
)、rgb()
、rgba()
、十六进制(如 #FFFFFF
)等格式。
background-image
:设置背景图像,使用 url()
引入图片。可以是文件路径或资源路径,如:background-image: url(:/resources/image.jpg);
。
background-repeat
:控制背景图像的重复方式。常见值包括:
repeat
:背景在水平和垂直方向都重复。repeat-x
:背景仅在水平方向重复。repeat-y
:背景仅在垂直方向重复。no-repeat
:背景不重复,只显示一次。
background-position
:设置背景图像的位置。可以使用关键字(left
、right
、center
、top
、bottom
)或具体的坐标(如 50px 100px
、center center
)来定位背景图片。
QLabel{
background-color: rgb(54,54,54);
background-image: url(":/resource/1.png"); /*显示背景图片, 也可以不用引号*/
background-repeat: no-repeat; /*不重复显示*/
background-position: left center;
}
动态悬浮样式
伪状态选择器(:hover
):
:hover
是 QSS 中的伪状态选择器,用于设置控件在鼠标悬浮时的样式。它可以与任何控件类型一起使用(如QLabel:hover
、QPushButton:hover
),改变控件的外观。
动态属性:
- 可以在
:hover
状态下改变控件的各种属性,如文本颜色(color
)、背景颜色(background-color
)、边框样式(border-color
、border-width
、border-style
)等,实现动态视觉效果。
常用动态属性:
border-color
、border-width
、border-style
:改变边框的颜色、宽度和样式,通常用于突出控件的边缘。
其他伪状态选择器:
:pressed
:设置控件被按下时的样式(常用于按钮)。:checked
:用于复选框或单选按钮等状态变化的控件。:disabled
:设置控件不可用时的样式。
QLabel:hover
{
color: red;
background-color: blue;
border-color:black;
border-width:4px;
border-style:solid;
}
结尾
最后,感谢您阅读我的文章,希望这些内容能够对您有所启发和帮助。如果您有任何问题或想要分享您的观点,请随时在评论区留言。
同时,不要忘记订阅我的博客以获取更多有趣的内容。在未来的文章中,我将继续探讨这个话题的不同方面,为您呈现更多深度和见解。
谢谢您的支持,期待与您在下一篇文章中再次相遇!