QT 常用控件样式表

最新推荐文章于 2024-08-26 16:53:14 发布
最新推荐文章于 2024-08-26 16:53:14 发布
阅读量2.6k 收藏 6
点赞数
分类专栏： QT
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuzonghuan/article/details/78422952
版权
这篇博客详细介绍了如何使用CSS样式表自定义QT框架中的各种控件，包括QWidget、QLabel、QPushButton等，涵盖了背景颜色、字体、边框、高亮效果等多个方面，以实现UI界面的一致性和美观性。
摘要由CSDN通过智能技术生成


/*QWidget*/
QWidget{
 background-color: #151515;
 color: #a3a3a3;
 font-family: "Arial";
 font-size: 18px;
 font-weight: normal;}
QWidget#ConfigDlg{
 border-top: 1px solid #424242;
}
QWidget#InfoDisplay, QWidget#InfoStatic {
  background-color: #151515;
  font-family: "Arial";
  font-size: 22px;
  font-weight: 700;}

QWidget#OneStatic {
  font-family: "Arial";
  font-size: 22px;
  font-weight: 700;}

QToolTip{
 margin: 0px;
 padding:0px;
 font-family: "Arial";
 font-size: 20px;
 font-weight: normal;
}
 
QWidget#Titlebar {
 background-color: #151515;
 color: #a3a3a3;
 font-family: "Arial";
 font-size: 18px;
 font-weight: normal;}
QWidget#MessageBar {
 background-color: black;
 color: #a3a3a3;
 font-family: "Arial";
 font-size: 18px;
 font-weight: bold;} 
QWidget#pageArea {
 background-color: #222222;
 border-radius: 7px; }
QWidget#PrimaryMenu {
 background-color: #131313;}
QWidget#GaugeWnd
{
 background-image: url(":/Gauge_background.png");
}
QWidget#Statusbar {
 background-color: #151515;}
QWidget#Trackballbar {
 background-color: #151515;}
QWidget#leftPane, QWidget#rightPane, QWidget#patientViewPanel, QWidget#searchPanel, QWidget#medias {
 background-color: #222222; }
QWidget#clipboard {
 border-radius: 3px;
 border-width: 1px;
 border-style: solid;
 border-color: #424242;
 background-color: #0c0c0c; } 
 
QWidget#SoftGamma {
 border-width: 3px;
 border-style: ridge;
 border-color: grey;
 background-color: #0c0c0c; }  
 
QWidget#StatusIconBar {
 background-color: #151515;
 color: #a3a3a3;
 font-family: "Arial";
 font-size: 18px;
 font-weight: bold;
 border-radius: 3px;
 border-width: 1px;
 border-style: solid;
 border-color: #424242; }

QWidget#ParamsArea, QWidget#ModeArea, QWidget#PageNumberWnd, QWidget#ParamWnd
{
 border-radius: 3px;
 border-width: 1px;
 border-style: solid;
 border-color: #424242;
}

QWidget#ImageWidget {
 background-color: #151515;
 }

QWidget#PatientImages {
 background-color: #151515;
 }

QWidget#InfowinWidget {
 background-color: #151515;
 }
 
QWidget#TransferWidget {
 background-color: #151515;
 } 
 
QWidget#ImportViewPage {
 background-color: #151515;
 } 
 
QWidget#ExportViewPage {
 background-color: #151515;
 }
 
QWidget#PageTitle{
 border-width: 3px;
 border-style: groove;
 border-color: #2B2B2B;
} 

/*QFrame*/
QFrame#Sep{
 background-color: #000000;
 border: none;}

QFrame#TitleSep{
 background-color: #14;
 border: none;}
 
/*QLabel*/
QLabel {
 background: transparent;
 font-size: 18px;
 color: #a3a3a3;
 font-family: "Arial";}
 
QLabel#contrast, #lcd, #brightness{
 background: transparent;
 color: #a3a3a3;
 font-family: "Arial";}
 
QLabel#ColorTemp {
 background: transparent;
 color: #a5a5a5;
 font-family: "Arial";
 font-size: 17px;
 font-weight: bold;
 border-width: 2px;
 border-style: inset;
 border-color: #151515;
 max-height: 30px} 
QLabel#Logo {
 qproperty-alignment: AlignCenter;}
QLabel#PatientData1 {
 color: #a9a9a9;
 font-size: 18px;
 font-weight: bold;
 max-width:330px;
 min-width:330px;
}
QLabel#PatientData2, QLabel#PatientData3, QLabel#Operator {
 color: #a9a9a9;
 font-size: 18px;
 font-weight: bold;}
QLabel#Location, QLabel#sysTitle{
 color: #a9a9a9;
 font-size: 18px;
 font-weight: bold;
 max-width:330px;
 min-width:330px;}
QLabel#DateTime {
 color: #a9a9a9;
 font-size: 18px;
 font-weight: bold;}
QLabel#title {
 color: #a9a9a9;
 font-size: 18px;
 font-weight: bold;}
QLabel#TermicIndex, QLabel#Probe, QLabel#Application, QLabel#MechanicalIndex {
 color: #a9a9a9;
 font-size: 18px;
 font-weight: bold; }
QLabel#ModeName, QLabel#ModeValue{
 qproperty-alignment: AlignCenter;
 color: #838383;
 font-size: 18px;
 font-weight: bold; }
 
QLabel#ParamNum, QLabel#ParamName {
 qproperty-alignment: AlignCenter;
 color: #838383;
 font-size: 18px;
 font-weight: bold; }
QLabel#ParamValue {
 qproperty-alignment: AlignCenter;
 color: #f6f6f6;
 background-color: #2f2f2f;
 border-radius: 4px;
 font-size: 18px;
 font-weight: bold; }
QLabel#ParamNum:disabled, QLabel#ParamName:disabled, QLabel#ParamValue:disabled {
 qproperty-alignment: AlignCenter;
 color: #555555;
 border-color: #303030;
 font-size: 18px;
 font-weight: bold; }
 
QLabel#ParamNameSmall {
 qproperty-alignment: AlignCenter;
 color: #838383;
 font-size: 14px;
 font-weight: bold; }
QLabel#ParamValueSmall{
 qproperty-alignment: AlignCenter;
 color: #f6f6f6;
 background-color: #2f2f2f;
 border-radius: 4px;
 font-size: 13px;
 font-weight: bold; }
QLabel#ParamNameSmall:disabled {
 qproperty-alignment: AlignCenter;
 color: #555555;
 border-color: #303030;
 font-size: 14px;
 font-weight: bold; }
QLabel#ParamValueSmall:disabled{
 qproperty-alignment: AlignCenter;
 color: #555555;
 border-color: #303030;
 font-size: 13px;
 font-weight: bold; }
 
QLabel#ParamValueON {
 qproperty-alignment: AlignCenter;
 color: #f6f6f6;
 background-color: #336baf;
 border-radius: 7px;
 font-size: 18px;
 font-weight: bold; }
QLabel#LabNum {
 qproperty-alignment: AlignCenter;
 color: #838383;
 font-size: 18px;
 font-weight: bold; }
QLabel#MeasToolText {
 image: url(":/mm_caliper.png");
 }
QLabel#LabUp {
 background-image: url(":/arrowUp_up.png");
 background-position: center center;
 background-repeat: no-repeat; }
QLabel#LabDown {
 background-image: url(":/arrowDown_up.png");
 background-position: center center;
 background-repeat: no-repeat; } 
QLabel#ModeLeft {
 background-image: url(":/arrowLeft_up.png");
 background-position: center center;
 background-repeat: no-repeat; }
QLabel#ModeRight {
 background-image: url(":/arrowRight_up.png");
 background-position: center center;
 background-repeat: no-repeat; } 
QLabel#MessageBarInfo {
 color: white;
 font-family: "Arial";
 font-size: 20px;
 font-weight: normal;}
QLabel[urgent=true]#MessageBarInfo {
 color: red;}
QLabel#TrackballBarInfo {
 color: grey;
 font-family: "Arial";
 font-size: 18px;
 font-weight: normal;}
QLabel[urgent=true]#TrackballBarInfo {
 color: white;}

QLabel#WSImages{
 border-radius: 3px;
 border-width: 1px;
 border-style: solid;
 border-color: #424242;}
 
QLabel#WSImagesSelected{
 border-radius: 3px;
 border-width: 1px;
 border-style: solid;
 border-color: #00FF00;}

QLabel#EWLine{
 border-width: 1px;
 border-color: #424242;}


/*QSplitter*/
QSplitter {
    background-color: #131313;}
QSplitter::handle {
    border:none;
    margin: 0px;
    background-color: #FFFFFF;
    width: 2px;}
QSplitter#TrackballBar {
 background-color: #151515;
 color: #a3a3a3;}

/*QDialog*/
QDialog {
  background-color: #222222; }
  QDialog#probeDialog {
    border-radius: 20px;
    border-width: 5px;
    border-style: solid;
    border-color: #424242; }
 
/*PopDialog*/
  QDialog#PopDialog {
    border-radius: 5px;
    border-width: 2px;
    border-style: solid;
    border-color: #424242; } 
 QDialog#PopDialog QLabel#Error {
  border: none;
  color: red;
  font-size: 20px;
  font-weight: bold;
  max-height: 50px;
}

/*QPushButton*/
QPushButton {
 padding: 1px 5px 1px 5px;
 font-size: 18px;
 font-weight: normal;
 border-radius: 5px;
 border-width: 1px;
 border-style: solid;
 border-color: #606060;
 color: #a3a3a3;
 height: 28px;
 background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #4c4c4c, stop: 1 #333333); }
QPushButton:checked, QPushButton:pressed, QPushButton:selected {
 color: #ffffff;
 background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #3671b8, stop: 1 #285993);
 border-color: #336baf; }
QPushButton:disabled {
 color: #555555;
 background-color: #222222;
 border-color: #303030; }
QPushButton:hover {
 color: #929292;
 background-color: #1e1e1e;
 border-color: #2b2b2b; }

QPushButton#bottomButtons {
 border-bottom-left-radius: 0px;
 border-bottom-right-radius: 0px; }
QPushButton#reset {
 border-color: #606060;
 border-radius: 7px;
 border-radius: 7px;
 border-width: 1px;
 border-style: solid;
 border-color: #606060; }
QPushButton#reset:enabled {
 border-color: #222222;
 image: url(":/reset_up.png");
 image-position: left; }
QPushButton#reset:checked, QPushButton#reset:pressed, QPushButton#reset:selected {
 image: url(":/reset_dw.png");
 image-position: left; }
QPushButton#reset:disabled {
 image: url(":/reset_dis.png");
 image-position: left; }
QPushButton#Service {
 background-color: #151515;
}

QPushButton#ScanCoachEdit {
 border-width: 0px;
 font-size: 18px;
 font-weight: normal;
 color: #929292;
 height: 28px;
 background: transparent; }

 
QPushButton#ScanCoachEdit:hover {
 color: #a3a3a3;
 background-color: #1e1e1e;
 padding: 1px 5px 1px 5px;
 border-radius: 5px;
 border-width: 1px;
 border-style: solid;
 border-color: #606060; } 

 
QToolButton#UtilityButton {
    border-radius: 7px;
    border-width: 1px;
    border-style: solid;
    border-color: #606060;
    margin-right: -1px;
    padding: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
 color: #a3a3a3;
 background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #4c4c4c, stop: 1 #333333);  }
   QToolButton#UtilityButton:checked, QToolButton#UtilityButton:pressed, QToolButton#UtilityButton:selected {
 color: #ffffff;
 background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #3671b8, stop: 1 #285993);
 image: url(":/arrowRight_dw.png");
 image-position: right;
 /*background: #151515;*/
 border-color: #336baf; }
 QToolButton#UtilityButton:disabled {
 color: #555555;
 background-color: #222222;
 border-color: #303030; }
 QToolButton#UtilityButton:hover {
 color: #929292;
 background-color: #1e1e1e;
 border-color: #2b2b2b; }
 
/*QToolButton*/
QToolButton {
 font-size: 18px;
 color: #a3a3a3;
 background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #4c4c4c, stop: 1 #333333);
 border-radius: 0px;
 border-width: 1px;
 border-style: solid;
 bord

最低0.47元/天 解锁文章
yuzonghuan
关注
专栏目录
Qt 样式表详解（很全面，秒懂）
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
03-28 698
而我们在 c++ 代码中的窗口的 width 与 height 指的是整个盒子的宽度与高度, 这一点非常重要. 整个盒子的宽度应该等于: 左外边距 + 左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边框 + 右外边距, 同理, 整个盒子的高度也是上下外边距,内边距,边框和内容高度的和。与背景相对应, 背景设置的是控件的最底层的颜色, 作为背景, 但 color 设置的前景色, 也就 是控件文字的颜色, color 属性是被所有 widget 都支持的。
Qt Ui界面风格的蜕变——样式表qss使用
yc__coder的博客
07-26 7914
目录一、什么是样式表1、CSS2、QSS二、如何使用QSS——核心1、简介2、ui界面设置样式表3、程序调用三、选择器（1）、群体选择器（2）、特定选择器（3）、鼠标监听四、声明简介（1）、color（2）、font-family（3）、font-size（4）、background / background-color（5）、background / background-image（6）、border-image（7）、border（8）、text-align（9）、margin五、收尾 一、什么是样式
Qt:关于控件样式表的设计
qq_30207251的博客
07-30 811
学习博主与子偕臧的Qt博文，看到通过设置控件的动态属性和设置样式表来做到更方便的样式表设计 动态属性: QObject:setPropert()函数可以在运行时为类定义一个新的属性，称之为动态属性。动态属性是针对类的实例定义的。动态属性可以使用Qbjct:property()查询，就如在类定义里用 Q_PROPERTY 宏定义的属性一样。 例如，在数据表编辑界面上，一些字段是必填字段，就可以在初始化界面时为这些字段的关联显示组件定义一个新的required属性，并设置值为"true"，如: edi
QSS技术（三）—— Qt样式表（QSS）控件样式大全
最新发布
J^T的博客
08-26 1071
是一个常用的按钮控件，常见的样式设置包括背景颜色、边框、字体、悬停和按下状态等。是一个单行文本输入控件，样式设置包括边框、背景颜色、文字颜色和光标样式等。是一个多行文本编辑控件，样式设置包括边框、背景颜色、文字颜色和滚动条等。是一个复选框控件，样式设置包括复选框指示器的样式、背景颜色和字体等。是一个单选框控件，样式设置包括单选框指示器的样式、背景颜色和字体等。是一个滑块控件，样式设置包括滑块的轨道、刻度和滑块本身的样式。是一个工具按钮控件，样式设置包括按钮的图标、背景颜色和边框等。
Qt样式表
weifc-wei 的博客
04-10 470
一Qt样式表 1.1 Qt样式表介绍 Qt样式表是一个可以自定义部件外观的强大机制，样式表的概念、术语、语法均受到 HTML的层叠样式表(Cascading Style Sheets,CSS)的启发。 样式表可通过QApplication::setStyleSheet()函数将其设置到整个应用程序上， 也可以使用QWidget::setStyleSheet()将其设置到指定的部件或子部件上， 不同级别均可设置样式表，称为样式表的层叠。样式表也可通过设计模式编辑样式表 1.2 Qt样式表语法 （1）样式规
QT 常见控件样式表（QPushButton、QRadioButton、QCheckBox、QScrollBar、QTableView、QTableWidget、QComboBox、QSlider）
热门推荐
m0_67254672的博客
04-30 1万+
background-image:设置背景图片（根据图片大小） border-image:设置背景图片（根据控件大小） background-color:设置背景颜色 border-color:设置边框颜色 color:设置字体颜色 border:设置边框 例:border:1px solid red; border-radius:设置边框圆角 /*左上 右上 右下 左下*/ border-top-left-radius:设置单个圆角 font：设置字体 text-align: 设置
Qt常用样式表整理
weixin_45430735的博客
04-26 708
Qt常用样式表整理
Qt 自定义QPushButton样式表
12-02
在Qt编程中，QPushButton是一个非常常用的控件，用于创建用户界面中的按钮元素。自定义QPushButton的样式表可以让我们实现各种个性化的视觉效果，提升应用程序的美观度和用户体验。本篇文章将深入探讨如何自定义...
QT下拉框样式表设置
09-21
QT支持使用CSS样式的子集——样式表来定制GUI控件的外观。样式表语法类似于HTML中的CSS，但存在一些关键差异。例如，QT样式表支持更多属性，可以更精细地控制元素的外观。 #### 二、样式表设置 接下来，我们将逐步...
Qt样式表设置。。。持续更新
qq_37464701的博客
03-21 1103
/边框：宽2像素 像素 实线 红色。//上边框面：宽2像素 像素 实线 红色。}//QTabBar::tab是选项页，记得前面是QTabBar不是QTabWidget。//边框颜色：红色，跟上面的红色结果是一样的。//内边距：10px（上下左右都设置为10px）//设置radio图标与文本间距：10px。}//QTabBar::tab:selected是指被选中的选项页。//上内边距：10px。//最小高度：60像素。//字体大小：10像素。
Qt样式表使用大全(中文整理资料)
09-12
主要介绍Qt样式表QSS的使用，语法规则介绍。 这是网络上整理的比较“难得的中文使用手册”，非常适合新手学习样式表使用。
Qt 控件的CSS样式例子
07-17
此资源是买来的源码，包含了Qt常用的控件的CSS代码，直接加载CSS文件实现换肤。
QT控件样式表
u012830675的博客
12-24 306
QT控件样式表表格 QTableWidget 表格 QTableWidget //水平表头首圆弧 QHeaderView::section:horizontal:first{ border-top-left-radius: 8px; border-bottom-left-radius: 8px; } //水平表头尾圆弧 QHeaderView::section:horizontal:las...
【Qt之·控件·样式表】
m0_66203017的博客
04-30 1161
控件样式表是一种基于层叠样式表（CSS）语法的方式，用于定制和美化Qt控件的外观和风格。通过控件样式表，我们可以改变控件的背景颜色、字体、边框等属性，还可以设置控件在不同状态下的样式，如鼠标悬停、按下等。这为我们提供了很大的自由度，使我们能够根据自己的需求和设计风格来定制界面。本博客将介绍如何使用Qt样式表来定制常见的控件，包括按钮、标签、文本框等。我们将学习如何设置控件的背景颜色、字体、边框等属性，如何设置控件在不同状态下的样式，以及如何通过样式表设置控件的大小和位置等。
QT样式表
weixin_33810006的博客
11-10 1570
QT样式表   一、QT样式表简介 1、QT样式表简介     QSS的主要功能是使界面的表现与界面的元素分离，使得设计皮肤与界面控件分离的软件成为可能。 QT样式表是允许用户定制widgets组件外观的强大机制，此外，子类化QStyle也可以定制widgets组件外观。QT样式表的概念、术语、语法很大程度上受到了CSS层叠样式表的影响。 样式表是使用QApplication::setStyleS...
Qt——常用控件样式
weixin_30843605的博客
02-20 119
下面是我设计、调整、修改的Qt控件样式，仅供参考。 Github地址：https://github.com/ikongziming/QtDemo/tree/master/StyleSheetDemo 1.按钮QPushButton 2.单行文本输入框QLineEdit 3.单选按钮QRadioButton 4.复选框QCheckBox 5....
css样式
切躁切勇,伏枥藏锋
11-04 3988
字体属性：(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位：PX、PD、EM 粗细 {font-weight: b...
Qt 常用控件样式
qq_45147279的博客
12-08 940
做了几个项目之后，发现经常用的几个控件每次都需要设置样式，而且每次都是翻以前的项目样式粘贴复制，很麻烦，还不如直接统一做一下笔记，以后直接粘贴复制得了。省得东找西找。 效果如下 效果如下： 声音滑动条 进度滑动条 QtableWidget、QTextEdit、QtableView等控件都有滚动条 效果如下： 效果如下 效果如下：
qt TESTBROWS样式表
09-13
对于Qt中的样式表，你可以使用QStyleSheet来实现界面的美化。根据引用[1]所述，QT精美样式表包含了按钮、编辑框、进度条、下拉框、表格等常用控件的美化样式，可以一套搞定QT界面。 如果你想使用Qt的样式表来美化Testbrows（可能是你自定义的控件），你可以通过设置QWidget的样式表来实现。首先，你需要为Testbrows指定一个样式类名，例如"test-brows"。然后，你可以通过在样式表中使用这个类名来定义Testbrows的外观。 例如，你可以创建一个样式表字符串，如下所示： ```cpp QString styleSheet = ".test-brows { background-color: yellow; }"; ``` 这个样式表将会将Testbrows的背景颜色设置为黄色。 然后，你可以将这个样式表应用到Testbrows上，例如： ```cpp testBrows->setStyleSheet(styleSheet); ``` 这样，Testbrows就会显示出你定义的样式。 需要注意的是，如果你想美化Testbrows内部的子控件，可以使用":"选择器来指定子控件的外观。例如，为按钮指定样式，可以这样写： ```cpp QString styleSheet = ".test-brows QPushButton { color: red; }"; ``` 这个样式表将会将Testbrows内部的所有QPushButton的文字颜色设置为红色。 总结起来，你可以按照以下步骤来为Testbrows应用样式表： 1. 为Testbrows指定一个样式类名，例如"test-brows"。 2. 创建一个样式表字符串，定义Testbrows及其子控件的外观。 3. 将样式表应用到Testbrows上。 这样，你就可以通过样式表来美化Testbrows的外观了。希望这个回答对你有帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值