Qt 界面美化

1、CSS 选择器:
通过CSS选择器定位哪些HTML元素需要应用样式,及应用哪些样式。

2、选择器分类:
基本选择器
复合选择器
特殊选择器

3、基本选择器:
author

*HTML标记选择器:span{font-size:20px;}

*类别选择器:.myClass{color:#4499ee;} (myClass: 如 QPushButton)

*ID选择器:#title{font-family:"幼圆"} (#:过滤器)

4、复合选择器:

*交集选择器:div.divClass{...}    /   div#divID{...}

*并集选择器:div,h1#htitle,p.pClass{...}

*后代选择器:div h1#htitle div, h1#htitle,p.pClass{...}

这里写图片描述

5、CSS注释只能用 /* */,不能用 //

6、CSS学习方法
1> 使用网页设计工具,通过CSS代码提示去逐步熟悉
2> 通过网络资源学习
(1)W3C学校:
http://www.w3school.com.cn/css/index.asp
(2)网页设计联盟:
http://htmlhelp.com/zh/reference/css
(3)网页设计师:
http://www.w3cn.org
3> 通过经典的设计案例去学习
CSS禅意花园:
http://www.csszengarden.com

7、Qt使用样式表:
1> UI界面跳转样式表
这里写图片描述

2> 代码调用函数编写
这里写图片描述

3> Qt调用样式表文件
新建一个.css文件;
在工程目录下添加一个新的资源文件;
将.css文件添加进去;
在主函数中,写代码,文件操作,读取.css文件的内容。

QFile skinFile(":/skin.css");
    if (skinFile.open(QIODevice::ReadOnly))
    {
        a.setStyleSheet(skinFile.readAll());
        skinFile.close();
    }

然后在.css文件中编写代码。

8、css基本语法
1、样式表由一系列样式规则组成。

每条规则可以分为两部分:选择器和声明。
这里写图片描述

选择器表示规则作用到哪些控件上;声明则详细说明了是什么规则。

2、
1> Qt样式表不区分大小写,所以color,Color,coLor,coloR都表示同样的颜色属性。

但是指代类的类名的时候,是区分大小写的。

2> 多个选择器可以并列使用,它们之间用逗号隔开,例如:
QpushButton, QLineEdit, QComboBox{color:red}

3> 声明部分也可以有多个并列,之间用分号隔开。例如:
QpushButton{color: red; background-color:wight}

4> Qt样式表支持所有在CSS2中定义的选择器类型,下面是集中最为常用的选择器定义
这里写图片描述
这里写图片描述

3、伪状态Pseudo-States
根据具体控件的不同,选择器也可以有不同的状态,依次对应控件在不同状态的效果,称为伪状态。

伪状态和选择器类名之间,用一个冒号分隔。例如:
QpushButton:hover{color:wight}
表示当鼠标悬停在按钮上时,其文字显示为白色。

伪状态也可反向选择,例如当我们要设置除了鼠标悬停状态外其他状态的字体颜色,则可以:

QRadioButton:!hover{color:red}

同时,伪状态也可以并列,之间用冒号连接,表示伪状态之间用AND计算:

QCheckBox:hover:checked{color:white} 
QPushButton:hover:!pressed{color:blue;}

4、样式层叠
Qt样式表在QApplication上设置,或者在父窗口上设置,或者直接在子控件上设置

最底层子控件的样式表是将所有其祖先或者QApplication的样式表单合并起来,作为其最终的样式表单。

当合并后冲突发生时,子控件自身的样式表单总是要优先于其父类、祖类的样式表单,父类的样式表单优先于祖类….以此类推。

例如:
qApp->setStyleSheet(“QPushButton{color:white}”);

myPushButton->setStyleSheet(“*{color:bule}”)
这个样式将覆盖QApplication对按钮的设定

5、样式继承
在CSS中,子类的样式可以从父类中继承下来,但是在qt样式规则中,子QWidget是不会从父QWidget中继承样式表的。

6、添加图片

1> 在资源文件中添加图片
2> 在Qt Designer中,右键 ->改变样式表
这里写图片描述

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页