【Qt】【一文搞懂】QSS

已于 2022-04-28 10:49:10 修改
阅读量1k 收藏 11
点赞数 1
分类专栏： # Qt 文章标签： qt css
于 2021-10-13 11:30:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fuel_Ming/article/details/120740512
版权

Qss

Qss的写法参考css即可。

网站推荐：

Qt Style Sheets Reference | Qt 4.8

书籍推荐：

《Qt样式葵花宝典》提取码：nod5

工具推荐：

  • Qss Editor 0.6.1 提取码：yzbi

    qsseditor

Qss加载的常规操作

  1. 在资源文件夹中添加style.qss的文件
  2. 以文件IO的方式读取并设置即可。
  3. 读取的代码：
    void Widget::InitStyle(int i)
{
    m_LCD_Hour->setStyleSheet(" font: 18px black;");
    if(i != 0)
    {
        QFile file(QString(":/Assert/qss/style%1.qss").arg(i));
        file.open(QFile::ReadOnly);
        this->setStyleSheet(file.readAll());
        file.close();
        return;
    }

    // m_LCD_Min->setStyleSheet("color: black; ");
    // m_LCD_Sec->setStyleSheet("color: black; ");

    QFile file(QString(":/Assert/qss/main.qss"));
    file.open(QFile::ReadOnly);
    this->setStyleSheet(file.readAll());
    file.close();
}
    感兴趣的朋友可以看看我整理的一些Qt小项目常用的一些代码：[【Qt】常用基础代码汇总（随时更新）_欧恩意的博客-CSDN博客_qt代码整理]https://blog.csdn.net/Fuel_Ming/article/details/122830341)

选择器

一般情况下，在ui文件中的控件有效，而在代码中声明的则无效，因为Qt是根据objectName来识别的，所以自己声明的控件需要设置对象名。

m_btn->setObjectName("BtnOK");

在QSS文件中：

QPushButton#BtnOK{
    color:white;
    background-color:rgb(0,112,210);
}
QPushButton#BtnOK::hover{
    background-color: rgb(0,134,252);
}

通用选择器

即 * 表示的css对象。作用于所有的界面控件

* {
    color: red;
}

类型选择器

  1. 作用于自己及子类

类名（Qt类）作为选择器，作用于其自身和他所有的子类

QFrame {
	background: gray;
}

使用了类型选择器 QFrame，所以 QFrame 和它的子类 QLable，QLCDNumber，QTableWidget 等的背景会是灰色的，QPushButton 不是 QFrame 的子类，所以不受影响。在Qt的类图或者帮助手册中可以看到一个Qt类的子类和父类。

  1. 只作用于自己

即 . + 类名 的形式。作用对象只有它自己。子类不受影响。

QWidget *window = new QWidget();
window->setStylesheet(".QWidget { "
                      "color:red;"
                      "}");

ID选择器

# + objectname作为选择器。只作用于此 objectname 的对象（多个对象可以设置同一个 objectname，但不推荐这么写）。

QPushButton *btn = new QPushButton;

// 设置属性名
btn->setObjectName("openButton");

// 设置样式
// 1
btn->setStylesheet("#openButton { "
                      "color:red;"
                      "}");
// 2
btn->setStylesheet("QPushButton#openButton { "
                      "color:red;"
                      "}");

属性选择器

[属性 = 值]的形式设置样式。需要通过object->property()接口设置Qt控件的属性值（Dynamic Properties）。

app.setStyleSheet(".QWidget { background: gray; }"
                  "QPushButton[level=\"dangerous\"] { background: magenta; }");
 
openButton->setProperty("level", "dangerous");
closeButton->setProperty("level", "dangerous");

包含选择器

也就是对控件内的控件的类进行设置，一看就懂，选择器之间用空格隔开，包含选择器和子元素选择器需要区分：

QFrame {
    background: gray;
}
    
QFrame QPushButton {
    border: 2px solid magenta;
    border-radius: 10px;
    background: white;
    padding: 2px 15px;
}

子元素选择器

选择器之间用 > 隔开，作用于Widget的 直接 子Widget

QFrame {
    background: gray;
}
    
QFrame > QPushButton {
    border: 2px solid magenta;
    border-radius: 10px;
    background: white;
    padding: 2px 15px;
}

伪类选择器

选择器:状态 作为选择器。支持!操作。

QPushButton:hover { color: white }
QCheckBox:checked { color: white }
QCheckBox:!checked { color: red }

常见的伪类选择器如下所示：

伪类说明
:disabledWidget 被禁用时
:enabledWidget 可使用时
:focusWidget 得到输入焦点
:hover鼠标放到 Widget 上
:pressed鼠标按下时
:checked被选中时
:unchecked未选中时
:has-childrenItem 有子 item，例如 QTreeView 的 item 有子 item 时
:has-siblingsItem 有 兄弟，例如 QTreeView 的 item 有兄弟 item 时
:open打开或展开状态，例如 QTreeView 的 item 展开，QPushButton 的菜单弹出时
:closed关闭或者非展开状态
:onWidget 状态是可切换的（toggle）, 在 on 状态
:offWidget 状态是可切换的（toggle）, 在 off 状态

SubControl选择器

选择器::subcontrol 作为选择 Subcontrol 的选择器。

有些 Widget 是由多个部分组合成的，例如 QCheckBox 由 icon(indicator) 和 text 组成，可以使用 选择器::subcontrol 来设置 subcontrol 的样式：

QCheckBox::indicator {
    width: 20px;
    height: 20px;
}

QCheckBox {
    spacing: 8px;
}

常用的 Subcontrol 有：

Subcontrol说明
::indicatorA QCheckBox, QRadioButton, checkable QMenu item, or a checkable QGroupBox’s indicator
::menu-indicatorA QPushButton’s menu indicator
::itemA QMenu, QMenuBar, or QStatusBar’s item
::up-buttonA QSpinBox or QScrollBar’s up button
::down-buttonA QSpinBox or QScrollBar’s down button
::up-arrowA QSpinBox, QScrollBar, or QHeaderView’s up arrow
::down-arrowA QSpinBox, QScrollBar, or QHeaderView’s down arrow
::drop-downA QComboBox’s drop-down arrow
::titleA QGroupBox or QDockWidget’s title
::grooveA QSlider’s groove
::chunkA QProgressBar’s progress chunk
::branchA QTreeView’s branch indicator

补充

一些其他写法的参考demo

/* ================================================ *
author:lei
lastedited:2020.2
* ================================================ */
$text = #222;
$background = #FDFDFD;
$border = #999999;
$selected = #8BF; /*hover*/
$pressed = #59F;
$focused = #EA2; /*actived*/
$grad1a = #EEEEEF; /*gradient start*/
$grad1b = #DADADF; /*gradient end*/

QWidget
{
    color: $text;
    background-color: $background;
}

QFrame{
    color: $text;
    background-color: $background;/*不能设置为transparent*/
}
QMainWindow::separator{
    border: 1px solid $border;
    border-style: outset;
    width: 4px;
    height: 4px;
}
QMainWindow::separator:hover{
    background: $selected;
}
QSplitter::handle{
    border: 1px solid $border;
    border-style: outset;
    width: 4px;
    height: 4px;
}
QSplitter::handle:hover{/*splitter->handle(1)->setAttribute(Qt::WA_Hover, true);才生效*/
    border-color: $focused;
}
QSplitter::handle:pressed{
    border-color: $pressed;
}
QSizeGrip{
    background-color: none;
}

/* =============================================== */
/* Label                                           */
/* =============================================== */
QLabel {
    background: transparent;
    border: 1px solid transparent;
    padding: 1px;
}


/* A QLabel is a QFrame ... */
/* A QToolTip is a QLabel ... */
QToolTip {
    border: 1px solid $border;
    padding: 5px;
    border-radius: 3px;
    opacity:210;
}

/* =============================================== */
/* TextBox                                         */
/* =============================================== */
QLineEdit {
    background: $background;/*不建议设为透明，否则table编辑时会字显示*/
    selection-background-color: $selected;
    border: 1px solid $border;
    border-radius: 2px;
    border-style: inset;
    padding: 0 1px;
}

QLineEdit:hover{
    border-color: $selected;
}
QLineEdit:focus{
    border-color: $focused;
}
/*QLineEdit[readOnly="true"] { color: gray }*/
QLineEdit[echoMode="2"]{
    lineedit-password-character: 9679;/*字符的ascii码35 88等 */
}

QLineEdit:read-only {
    color: lightgray;
}

QLineEdit:disabled{
    color: lightgray;
    background: lightgray;
}

QTextEdit{
    selection-background-color:$selected;
    border: 1px solid $border;
    border-style: inset;
}
QTextEdit:hover{
    border-color: $selected;
}
QTextEdit:focus{
    border-color: $focused;
}
/* =============================================== */
/* Button                                          */
/* =============================================== */
QPushButton {
    border: 1px solid $border;
    border-radius: 2px;
    /*background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, 
        stop: 0 $grad1a, stop: 0.05 $grad1b,stop: 0.5 $grad1b, 
        stop: 0.9 $grad1a, stop: 1 $grad1a);*/
    padding: 1px 4px;
    min-width: 50px;
    min-height: 16px;
}

QPushButton:hover{
    background-color: $selected;
    border-color: $pressed;
}

QPushButton:pressed
{
    border-width: 1px;      
    background-color: $pressed;
    border-color: $border;
}

QPushButton:focus, QPushButton:default {
    border-color: $focused; /* make the default button prominent */
}


QToolButton,QToolButton:unchecked { /* ToolBar里的按钮和带下拉菜单的按钮 */
    border: 1px solid transparent;
    border-radius: 3px;
    background-color: transparent;
    margin: 1px;
}
QToolButton:checked{
    background-color: $selected;
    border-color: $pressed;
}
QToolButton:hover{
    background-color: $selected;
    border-color: $pressed;
}

QToolButton:pressed,QToolButton:checked:hover{
    background-color: $pressed;
    border-color: $focused;
}
QToolButton:checked:pressed{
    background-color: $selected;
}

/* only for MenuButtonPopup */
QToolButton[popupMode="1"]{
    padding-left: 1px;
    padding-right: 15px; /* make way for the popup button */
    border: 1px solid $border;
    min-height: 15px;
    /*background: qlineargradient(x1:0, y1:0 ,x2:0, y2:1
        stop: 0 $grad1a, stop: 0.05 $grad1b, stop: 0.5 $grad1b
        stop: 0.95 $grad1a stop: 1$grad1a)*/
}
QToolButton[popupMode="1"]:hover{
    background-color: $selected;
    border-color: $pressed;
}
QToolButton[popupMode="1"]:pressed{
    border-width: 1px;
    background-color: $pressed;
    border-color: $border;
}
QToolButton::menu-button {
    border: 1px solid $border;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    width: 16px;
}


/* =============================================== */
/* Slider ProgressBar                              */
/* =============================================== */
QProgressBar {
    border: 1px solid $border;
    border-radius: 4px;
    text-align: center;
}

QProgressBar::chunk {
    background-color: $focused;
    width: 4px;
    margin: 1px;
}

QSlider{
    border: 1px solid transparent;
}
QSlider::groove{
    border: 1px solid $border;
    background: $background;
}
QSlider::handle {/*设置中间的那个滑动的键*/                           
    border: 1px solid $border;
    background: $selected;
}
QSlider::groove:horizontal {
    height: 3px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
    left:5px; right: 5px;
}
QSlider::groove:vertical{
    width: 3px;
    top: 5px; bottom: 5px;
}
QSlider::handle:horizontal{
    width: 6px;
    margin: -7px; /* height */
}
QSlider::handle:vertical{
    height: 6px;
    margin: -7px; /* height */
}
QSlider::add-page{/*还没有滑上去的地方*/
    border: 1px solid $border;
    background:$grad1a;
}
QSlider::sub-page{/*已经划过的从地方*/                            
    background: $focused;
}

/* =============================================== */
/* ScrollBar                                       */
/* =============================================== */
QScrollBar{
    background-color: $background;
    border: 1px solid $border;
    border-radius: 5px;
    padding: 1px;
    height: 10px;
    width: 10px;
}
QScrollBar:hover{
    border-color:$selected;
}
QScrollBar::handle{
    border-radius: 3px;
    background: $pressed;
    min-width: 16px;
    min-height: 16px;
}
QScrollBar::handle:hover {
    background: $focused;
}
QScrollBar::add-line, QScrollBar::sub-line,
QScrollBar::add-page, QScrollBar::sub-page {
    width: 0px;
    background: transparent;
}
QScrollArea{
    border: none;
}
/*QScrollArea  QAbstractSlider{
    border-radius: 0px;
}*/
/* =============================================== */
/* DockWidget                                       */
/* =============================================== */
QDockWidget, QDockWidget > QWidget/*not work*/
{
    border-color: $border;/*qt bug*/
    background: transparent;
}
QDockWidget::title {
    border-bottom: 1px solid $border;
    border-style: inset;
    text-align: left; /* align the text to the left */
    padding: 6px;
}

/* =============================================== */
/* GroupBox                                        */
/* =============================================== */
QGroupBox {
    background-color: $background;
    border: 1px solid $border;
    border-radius: 4px;
    margin-top: 0.5em;
}
QGroupBox::title {
    subcontrol-origin: margin;
    subcontrol-position: top left;
    left: 1em;
	top: 0.1em;
    background-color: $background;
}
/* =============================================== */
/* ToolBox                                         */
/* =============================================== */
QToolBox{
    border: 1px solid $border;
}
QToolBox::tab {
    background: $grad1a;
    border: 1px solid $border;
    border-radius: 1px;
}
QToolBox::tab:hover {
    background-color: $selected;
    border-color: transparent;
}
QToolBox::tab:pressed {
    background-color: $pressed;
    border-color: transparent;
}
QToolBox::tab:selected {
    font-weight: bold;
    border-color: $selected;
}

/* =============================================== */
/* TabWidget                                       */
/* =============================================== */
QTabWidget{
    margin-top:10px;
}
QTabWidget::pane{
    border: 1px solid $border;
}
QTabWidget::tab-bar {
    left: 0px;
}
QTabBar::tab {
    background: $background;
    border: 1px solid $border;
    padding: 3px 5px;    
}
QTabBar::tab:hover {
    background: $selected;
    border-color: transparent;
}
QTabBar::tab:selected {
    background: $selected;
    border-color: $pressed;
}
QTabBar::tab:pressed {
    background: $pressed;
    border-color: transparent;
}
QTabBar::tab:focus {
    border-color: $focused;
}
QTabBar::tab:top{
    margin-top: 3px;
    border-bottom: transparent;
    margin-right: 1px;
}
QTabBar::tab:bottom{
    margin-bottom: 3px;
    border-top: transparent;
    margin-right: 1px;
}
QTabBar::tab:left{
    border-right: transparent;
    margin-bottom: 1px;
}
QTabBar::tab:right{
    border-left: transparent;
    margin-bottom: 1px;
}

/* =============================================== */
/* QHeaderView for list table                      */
/* =============================================== */
QHeaderView {
	border: none;
	margin: 0px;
	padding: 0px;
}
QHeaderView::section, QTableCornerButton::section {/*设置表头属性*//*左上角*/
	background-color: $grad1a;
	padding: 0 3px;
	border-right: 1px solid $border;
	border-bottom: 1px solid $border;
	border-radius: 0px;
}
QHeaderView::section:hover, QTableCornerButton::section:hover{
    background-color: $selected;
}
QHeaderView::section:pressed{
    background-color: $pressed;
}
QHeaderView::section:checked {
    background-color: $focused;
}

/* =============================================== */
/* QTableWidget                                    */
/* =============================================== */
QTableWidget, QTableView
{
    gridline-color: $border;    /*表格中的网格线条颜色*/
    background: $background;
    /*设置交替颜色，需要在函数属性中设置:tableWidget->setAlternatingRowColors(true)*/
    alternate-background-color: $grad1a;
    /*selection-color:$background;    鼠标选中时前景色：文字颜色*/
    selection-background-color:$selected;   /*鼠标选中时背景色*/
    border:1px solid $border;  /*边框线的宽度、颜色*/
    /*border:none;    去除边界线*/
    /*border-radius:5px;*/
    /*padding:10px 10px;*/  /*表格与边框的间距*/
}
QTableView::item, QTabWidget::item{
    background: transparent;
	outline-style: none;
	border: none;
}

QTableView::item:hover {
	background: $selected;
    border: 1px solid $focused;
}

QTableView::item:selected {
	background: $selected;
	color: $grad1a;
}

QTableView::item:selected:active {
	background: $pressed;
	color: $grad1a;
}

QTableWidget QComboBox{
    margin: 2px;
    border: none;
}
欧恩意
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
QT:QSS自定义 QSplitter实例
希望我的博客，能帮上你解决学习中工作中所遇到的问题
07-02 841
QT:QSS自定义 QSpinBox实例
史上最强QT自定义界面纯QSS
11-21
找遍百度谷歌,潜心钻研官方QSS应用示例http://qt-project.org/doc/qt-4.8/stylesheet-examples.html,陆续完善三个月,终于得出一套自定义UI的QSS方案,只需要查找替换对应七个颜色值,就可制作出一套精美皮肤!
Qt样式表学习之路.zip
11-23
Qss 是用来设置界面样式的设置的方法就是类似于 CSS,通过以一定规则组 织的字符串来给界面设置样式, 而不用我们调用控件对象的接口或子类化 QStyle 去设置样式
Qt-样式表qss练习
03-22
Qt-样式表qss练习
【QT入门】 Qt自定义控件与样式设计之QLineEdit的qss使用
最新发布
LF__plus的博客
04-08 1230
【QT入门】 Qt自定义控件与样式设计之QLineEdit的qss使用
QT自定义界面纯QSS.rar
11-22
依据官方QSS应用示例http://qt-project.org/doc/qt-4.8/stylesheet-examples.html制作自定义UI的QSS方案。
Qt葵花宝典阅读感受2
weixin_41199566的博客
12-29 808
一个焦点区域（focus scope）定义了如果焦点区域接收到焦点，它的最后一个使用focus:true的子元素接收焦点，它将会把焦点传递给最后申请焦点的子元素。视图使用一个垂直方向的滚动条。精心为一个移动的对象挑选一个合适的缓冲类型将会使界面更加自然，例如一个页面的滑出，最初使用缓慢的速度滑出，然后在最后滑出时使用高速滑出，类似翻书一样的效果。额外的间隔区域被用于添加更多的信息，这种机制使用一个状态来控制，当一个链表项展开时，代理项都能输入expanded（展开）状态，在这种状态下一些属性被改变。
qss
fengxinya的专栏
12-05 1162
<br />借用css 的灵感， Qt也支持Qt自己的css, 简称qss。同css 相似，qss的主要功能与最终目的都是能使界面的表现与界面的元素分离，即质与形的分离，就如同一个人可以在不同的时候穿上不同的衣服一样，css机制的引入，使得设计一种皮肤与界面控件分离的软件成为可能，应用程序也能像web界面那样随意地改变外观。<br /><br />一、QSS语法<br /><br />同css一样，他也有由一个selector与一个declaration组成，selector指定了是对哪一个控件产生效果，而
Qt布局管理： 分割窗口QSplitter类讲解（纯代码实现分割窗口）
热门推荐
好儿郎~志在四方
05-24 4万+
一个QSplitter是一个可以包含其他控件的控件，这些控件被一个分隔条隔开，托拽这个分隔条，可以改变splitter的子控件的大小。QSplitter控件经常做为布局管理器使用，给用户提供更多的界面控制。
QT之qss教程-QSplitter
wzs的博客
11-10 4113
QSplitter::handle { image:url(:/images/444.bmp); } QSplitter::handle:horizontal { width:5px; } QSplitter::handle:vertical { width:15px; } QSplitter::handle:pressed { background-color:red;
QT --创建窗口分割线之QSplitter 的使用
qq_34797393的博客
02-15 4511
1、关于QSplitter        QSplitter类继承自QFrame类，也就是说该类是一个带有边框的可视部件。QSplitter类实现了分离器，分离器用于分离两个部件，用户可通过拖动部件之间的分界线来调整子部件的大小。 2、在已创建好的布局中添加窗口分界线，demo已调试成功，效果如下： 3、代码如下： #inc...
qss.rar_Qt qss_qt qss下载_qt qss 下载_qt setstysheet
07-15
Qt中qss和setStyleSheet的5个示例，都是我网上找资料，不足的地方自己写出来的，希望对大家有所帮助。
Qt样式表葵花宝典.zip
06-25
样式表的葵花宝典，得到以后啥都会设置，真的超级良心，还帮你们每个书签标好，真的超级好
Qt样式表使用大全(中文整理资料)
09-12
主要介绍Qt样式表QSS的使用，语法规则介绍。 这是网络上整理的比较“难得的中文使用手册”，非常适合新手学习样式表使用。
Qt从入门到精通（适合新老手使用）
08-13
本书通过简单到复杂的实例逐步的讲解的Qt技术
CSS常用属性之葵花宝典
09-15
是对CSS常用属性的一个总结！供大家交流！
好用的QT-qss漂亮界面
10-25
QT框架中的QSS（Qt StyleSheet）是用于给Qt应用程序添加样式和皮肤的一种强大工具，它类似于网页设计中的CSS，能够使你的应用界面看起来更加专业和美观。本资源提供了"好用的QT-qss漂亮界面"，包含代码示例和相关的...
Qt 布局(QSplitter 类&QDockWidget 类) 总结
wei_Embedded_z的博客
10-16 1441
Qt 布局(QSplitter 类&QDockWidget 类) 总结
qt金属光泽渐变qss
01-10
Qt是一个跨平台的应用开发框架，提供了丰富的功能和组件供开发者使用。其中，QSS（Qt Style Sheet）是Qt框架中用于定义界面样式的一种机制。QSS用类似于CSS的语法规则来实现对控件的外观和布局进行定制。 金属光泽渐变是指通过使用QSS来创建一种控件样式，使其看起来像是由金属材质制成，具有一种光泽和渐变效果。 在QSS中，使用渐变和模糊效果可以实现金属光泽渐变的效果。通过指定控件的背景、边框以及文字样式，可以创建出具有金属质感和光泽的效果。一般而言，通过设置渐变背景来模拟金属质感，并利用阴影、边框等效果来突出光泽。 要实现这种效果，首先需要创建一个QSS样式表文件，并在Qt应用程序中加载使用。然后，使用QSS中提供的渐变函数和样式属性来对控件进行样式定制。例如，可以通过设置背景色为渐变色，设置文字颜色、边框样式等来模拟金属表面的光泽效果。 需要注意的是，实现金属光泽渐变效果需要对QSS的语法和属性进行深入了解，并灵活运用。同时，根据实际应用需要，可以调整渐变的角度、弧度和颜色，来达到自己期望的效果。 综上所述，qt金属光泽渐变qss是指在Qt应用开发中，通过使用QSS样式表和相应的渐变和模糊效果，来实现一种类似金属材质的光泽渐变效果的样式设置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

欧恩意

如有帮助，感谢打赏！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值