QSS使用(一)--- QSS的语法

Qt中的除了进来比较流行的使用qml进行界面的美化外,在早期,也就是4.x版本中,使用得比较多的的就是qss,就如qml是javascipt的变形体一样,qss是css的变形体,当然语法是和css基本一致,然后阅读了Qt的Assitant的帮助文档后,花了两天时间,大致了解了qss的语法,然后交流一下学习心得。(PS:不会CSS,然后大致去翻阅了CSS,Assitant
的 qss内容太少,所以需要进步了解css语法)

首先,迎面而来你的就是Box Model啦,先学习一下Box Model:

  • Box Model

先学习Assitant给的图:

是不是不太明白:好吧,我也不太懂啥意思,再来第二张图:

  • 首先对于外边距,边框,内边缘,在默认条件下是等于0的;
  • 通常所说的background指的是padding那个矩形框以内的内容(这是我实验后得出的结论,不知对与否);

来一图看看是不是呢:

然后看看代码的具体情况:

QWidget#testWidget
{
    border: 10px  solid;
    border-color:black;
    padding:30px;
    background-color:red;
}

QWidget#widget
{
    border:10px  solid;
    border-color:black;
    padding:60px;
    background-color:red;
}

  • qss语法

1、什么是selector

选择器是可以唯一标识一类或者某一个对象的,在Qt中,可以是QWidget,也可以是它派生出来的之类,比如QPushButton。有了选择器,我们尽可以对这个类型的对象进行声明,也就是通俗意义上的美化。

那么对于选择器,有那几种定义方法呢:

说明:

1、对于*而言,是为了匹配所有的控件,所有的Widget的性质都统一通过这个一个选择器设置好了;

2、Type类选择器对所有的某一控件或者及其派生的子类空间都适用;

3、属性选择器是对已经制定某种属性值的类进行性质上的声明;

4、Class选择器,是仅仅只对某种父类控件适用,但对其子类空间不产生影响;

5、ID选择器是对某一类控件的具体实例来进行性质上的控制,通常这个标识是通过object name制定的;我觉得这个用的会比较多一点;

6、子类选择器,child selector,这个当然也是很管用的,是对某一类控件中的某一个元素进行控制,比如对于一个自定义的LineEdit,对于传统的QLineEdit,它是没有Label的,在qq的登陆界面中,可以看见在右边有一个小型的按钮,这个按钮是可以通过QLabel实现的,那么对于自定义的LineEdit,为了实现这个,使用LineEdit>QLabel设置附属于LineEdit的QLabel的属性了;

2、对复杂的widget的子控件的属性的控制

很多widget有很多子控件,比如QSpinBox有上下两个按钮控制加减的,还有QComBox有一个用于导出下拉菜单选出的,对于子控件的属性的控制,qss也进行了说明:

用::号来导出widget的子控件,比如QComBox::drop-down{image: url(dropdown.png)}

这样就可以对子控件进行属性控制了。

3、Pseudo-States 伪状态

什么是伪状态呢,当控件处于一般状态下,通俗的来说就是没有被选中,鼠标没有在控件上方游荡,没有被鼠标按压下,然后对于的就是鼠标在上方hover啦,被按压了,这些状态就叫伪状态。对于每一个状态,都一个对对其设置一些属性,使其呈现出不同的效果。怎么对应伪状态的属性呢,是通过:来实现的,当不处于某个状态时,可以用!:控制比如:

QPushButton:hover { color: white }

QPushButton:!hover { color:black}

一些常用的控件的伪状态有:

QPushButtoon:hover,pressed

QCheckBox:hover,checked,!hover:checked,hover:!checked

{PS:类似这种hover:!check是伪状态链,可以多个状态组合的}

截个图大家看看:

4、冲突的避免机制

当使用了Type选择器定义了某种属性,但是又用了ID选择器定义了同一类的同一个属性。这个时候,这个属性应该满足那种规则呢:

总的来说,就是所有条件先,满足更加具体的选择器定义的属性。

需要特别强调的是,这里的具体性,是针对选择器的具体性,比如class选择器>Type选择器,不是只得类的继承性,可能会觉得QPushButton比他的父类, QAbstractButton更加具体,因此当出现一下语句时候:

可能会觉得,应该是QPushButton应该是北京哪个应该是红色的,实质上,背景却是灰色的:因为在类型选择器中QPushButton和QAbstractButton是同一种类型,因此这个时候应该是语句执行的先后顺序的问题,因此后一句的声明生效。

大致会经常用到的语法就是这些了,具体的深层次需要更加深入的学习Qt 的 Assistanct中有关StyleSheet的内容以及CSS的内容

时间: 2024-11-05 12:30:01

QSS使用(一)--- QSS的语法的相关文章

QSS美化Qt程序以及最近做的Qt项目界面

什么是QSS QSS称为Qt Style Sheets也就是Qt样式表,它是Qt提供的一种用来自定义控件外观的机制.QSS大量参考了CSS的内容,只不过QSS的功能比CSS要弱很多,体现在选择器要少,可以使用的QSS属性也要少很多,并且并不是所有的属性都可以用在Qt的所有控件上. QSS在Qt程序中的使用办法 首先将QSS写在文件中,然后利用如下的代码设置QSS: MainWidget::MainWidget(QWidget *parent) : QWidget(parent), ui(new

qt之窗口换肤(一个qss的坑:当类属性发现变化时需要重置qss)

1.相关文章 Qt 资源系统qt的moc,uic,rcc命令的使用 2.概要    毕业两年了,一直使用的是qt界面库来开发程序,使用过vs08.10.13等开发工具,并安装了qt的插件,最近在做客户端换肤功能,所以就对qt的qrc做了点儿研究,我是一个实干派(可能有点儿虚),相对于看文档来说.本文开头我就给出了两篇博客,这两篇博客对我理解qrc这个东西有很大的帮助,接下来我就简单分析下我的理解. 首先说明下qrc是qt的东西,而不属于vs,这也很容易证明,那就是vs的工程师不识别qrc文件的,

Qt控件样式之QSS

QSS常用于Qt的控件样式美化,合理地使用Qss可以完成在不改动代码的情况下改变Qt界面的样式. 官方提供的例子: http://qt-project.org/doc/qt-4.8/stylesheet-examples.html 这个是官方提供的例子,只有qt-4.8的,目前Qt最新版本是Qt5.4,但似乎在qss这块没有较大的更新,同时有关帮助手册可以在Qt Assistant中寻找. 在这个Qt Style Sheets Reference中有QSS所支持的所有属性.状态,QSS是参照CS

qt应用qss

1.  先写qss文件 QPushButton:hover{color:red}QPushButton{color:blue}2.在工程中新建qt资源文件,我没有建资源文件的情况下,用QFile打开文件一直失败,最后被迫建资源文件. 2.1 设置前缀 2.2 添加前面的 qss文件3.在代码用应用qss样式QFilefile(":/qss.txt");file.open(QFile::ReadOnly);if(file.isOpen())qDebug()<<"fi

Qt界面美化 QSS

目前发现在Qt-Design中右击控件,可以选择Change StyleSheet ------------------------以下总结不太对 刚接触Qt,发现Qt Design无法对每个控件进行颜色风格设置.正在纳闷如此受欢迎的开发工具,怎么会没有这种,Delphi,VB,VC,C#都具备的基本功能呢? 后来在CSDN上才知道,Qt已经走在这些工具的最前方了,把界面已经独立出来和web编程一样.web有CSS专门美化工作.而Qt也有QSS进行美化设计.完全可以不影响程序开发.而且可以直接调

Qt Creator项目中使用qss

最近学习qt ,使用的编译器是qt creator ,学习过程中遇到的题就是 如何将程序中将要用到的.qss 文件静态编译到.exe程序中,而不是在程序运行时动态载入.动态载入的最大问题在于一旦.qss 的文件名或者路径改变 ,程序中所用到的.qss 文件也将失效,这样的话程序无法发布,即使发布了,页面效果也会大打折扣.... 在网上找了很多资料,但试过之后都没用,下面是网上找到的一些资料: 方法一:1.建立文本文件,写入样式表内容,更改文件后缀名为qss: 2.在工程中新建资源文件*.qrc,

QT加载qss

QString CommonHelper::setStyle(const QString &style) { QByteArray str; QFile qss(style); qss.open(QFile::ReadOnly|QFile::Text); if(qss.isOpen()) { str = qss.readAll(); qss.close(); } return QString::fromUtf8(str); } QString style = CommonHelper::setS

Qt(一)--- QSS的语法

Qt中的除了进来比较流行的使用qml进行界面的美化外,在早期,也就是4.x版本中,使用得比较多的的就是qss,就如qml是javascipt的变形体一样,qss是css的变形体,当然语法是和css基本一致,然后阅读了Qt的Assitant的帮助文档后,花了两天时间,大致了解了qss的语法,然后交流一下学习心得.(PS:不会CSS,然后大致去翻阅了CSS,Assitant 的 qss内容太少,所以需要进步了解css语法) 首先,迎面而来你的就是Box Model啦,先学习一下Box Model:

QSS类的用法及基本语法介绍

目录 1. 何为Qt样式表2. 样式表语法基础3. 方箱模型4. 前景与背景5. 创建可缩放样式6. 控制大小7. 处理伪状态8. 使用子部件定义微观样式8.1. 相对定位8.2. 绝对定位 摘要 由于Qt样式表的引入,定制Qt部件的外观样式变得非常简单. 无论你是想仅仅修改一个现有部件的外观,还是想从零开始设计一套全新的界面风格, 现在都有了一种新的方法而不必再去继承并实现一个QStyle的子类. 1. 何为Qt样式表 Qt样式表的思想很大程度上是来自于HTML的层叠式样式表(CSS), 通过