【二十九】【QT开发应用】初步认识QSS,字体样式,边框样式,边框圆角,文字位置,背景样式,动态悬浮样式

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;
}

结尾

最后，感谢您阅读我的文章，希望这些内容能够对您有所启发和帮助。如果您有任何问题或想要分享您的观点，请随时在评论区留言。
同时，不要忘记订阅我的博客以获取更多有趣的内容。在未来的文章中，我将继续探讨这个话题的不同方面，为您呈现更多深度和见解。
谢谢您的支持，期待与您在下一篇文章中再次相遇！