参考内容:
qss样式表笔记大全(一):qss名词解析(包含相关示例):https://blog.csdn.net/qq21497936/article/details/79401577
qss样式表笔记大全(二):可设置样式的窗口部件列表(上)(包含相关示例):https://blog.csdn.net/qq21497936/article/details/79423622
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(包含相关示例):
https://blog.csdn.net/qq21497936/article/details/79424146
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(包含相关示例):
https://blog.csdn.net/qq21497936/article/details/79424536
Qt 之 QSS(样式表语法)
https://blog.csdn.net/liang19890820/article/details/51691212
CSS语法:
https://www.w3school.com.cn/css/css_syntax.asp
最主要参考内容:Qt帮助手册
目录
选择器(子控件/伪选择器){声明1;声明2;声明3;...声明n;}
qss语法大量参考css语法,用法极其相似,稍有不同的部分即为Qt在选择器部分进行了扩充:
代码结构主要由一下几个部分组成:
选择器(子控件/伪选择器){声明1;声明2;声明3;...声明n;}
代码结构如下:
从Qt左侧选择【帮助】,搜索【style sheet】,选择【The Style Sheet Syntax】,如下:
Part1:选择器(selector):
QSS语法如下,由选择器和声明组成,选择器:指定哪些部件将受到影响,声明则是指定在该部件上进行怎样的设置。帮助文档解释如下:
如帮助文档所示,选择器类型为:
选择器 | 例子 | 说明 |
通用选择器 | * | 匹配所有部件 |
类型选择器 | QPushButton | 匹配QPushButton及其子类的实例 |
属性选择器 | QPushButton[flat=”false”] | 匹配QPushButton中flat属性为false的实例。可以用此选择器来测试任何支持QVariant::toString()的属性,此外,支持特殊的类属性、类名称。此选择器也可以用来测试动态属性(参考助手:Qt Style Sheets Examples中Customizing Using Dynamic Properties部分)。还可以使用~=替换=,测试QStringList类型的属性是否包含给定的QString。 警告:如果Qt属性值在设置样式之后更改,那么可能需要强制重新计算样式。实现的一个方法是取消样式,然后重新设置一遍。 |
类选择器 | .QPushButton | 匹配QPushButton的实例,但不包含子类。相当于*[class~=”QPushButton”]。 |
ID选择器 | QPushButton#okButton | 匹配所有objectName为okButton的QPushButton实例。 |
子类选择器 | QDialog QPushButton | 匹配属于QDialog子类的QPushButton所有实例。 |
示例:
设置好相关控件及名称:
.h
QPushButton * pushbottone_test;
.cpp
pushbottone_test = new QPushButton("测试",this);
pushbottone_test->setGeometry(30,30,100,40);
调用qss部分:
QFile file("://style/style.qss");
file.open(QFile::ReadOnly);
qApp->setStyleSheet(file.readAll());
file.close();
qss部分,设置摁键背景颜色为白色:
.QPushButton{
background-color: white;
}
选择类选择器,【.QPushBotton】
效果如下:
Part1: 子控件(Sub-Controls)
从Qt左侧选择【帮助】,搜索【style sheet】,选择【Qt Style Sheets Reference】,选择【List of Sub-Controls】
可以查看子控件列表
Part1:伪选择器(pseudo-states)
从Qt左侧选择【帮助】,搜索【style sheet】,选择【Qt Style Sheets Reference】,选择【List of Pseudo-States】
可以查看伪选择器列表
qss代码内容如下:
伪选择器调用hover(鼠标滑过)和pressed (鼠标摁下)
鼠标滑过,显示颜色为lightgray,鼠标摁下:显示颜色为lightgreen。
.QPushButton{
background: white;
}
.QPushButton:hover {
background: lightgray;
}
.QPushButton:pressed {
background: LightGreen;
}
效果如下(hover和pressed):
关于背景颜色的选择,css背景部分会解释。
Part2:声明
1.CSS背景
1.1背景色
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
.QPushButton{
background-color: white;
}
1.2背景图片
要把图像放入背景,需要使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像。
.QLabel{
background-image: url("://image/未标题-1.png");
}
原图|QSS
可以看到,QLabel设置的像素大小为100x100,原图片大小为60x60,所以在QLabel中,图片进行了阵列。
1.3背景重复
如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。
y方向上进行阵列
.QLabel{
background-image: url("://image/未标题-1.png");
background-repeat: repeat-y;
}
x方向上进行阵列
.QLabel{
background-image: url("://image/未标题-1.png");
background-repeat: repeat-x;
}
无阵列
.QLabel{
background-image: url("://image/未标题-1.png");
background-repeat: no-repeat;
}
执行结果如下(y方向|x方向|无阵列):
1.4背景定位
可以利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置:
.QLabel{
background-image: url("://image/未标题-1.png");
background-position:center;
background-repeat: no-repeat;
}
效果如下(居中):
为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
1.5关键字
图像放置关键字最容易理解,其作用如其名称所表明的。例如,top right 使图像放置在元素内边距区的右上角。
根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对应垂直方向。
如果只出现一个关键字,则认为另一个关键字是 center。
所以,如果希望每个段落的中部上方出现一个图像,只需声明如下:
.QLabel{
background-image: url("://image/未标题-1.png");
background-position:top;
background-repeat: no-repeat;
}
效果如下(top):
下面是等价的位置关键字:
单一关键字 | 等价的关键字 |
---|---|
center | center center |
top | top center 或 center top |
bottom | bottom center 或 center bottom |
right | right center 或 center right |
left | left center 或 center left |
1.6背景关联
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:
.QLabel{
background-image: url("://image/未标题-1.png");
background-position:center;
background-repeat: no-repeat;
background-attachment:fixed
}
background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。
背景常用颜色
合法颜色值如下:
颜色值:https://www.w3school.com.cn/cssref/css_colors_legal.asp
颜色名:https://www.w3school.com.cn/cssref/css_colornames.asp
颜色十六进制值:https://www.w3school.com.cn/cssref/css_colorsfull.asp
2.CSS字体
2.1指定字体系列
除了使用通用的字体系列,您还可以通过 font-family 属性设置更具体的字体。
下面的例子为所有 h1 元素设置了 Georgia 字体:
2.2字体风格
font-style 属性最常用于规定斜体文本。
该属性有三个值:
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
输出效果如下:
normal italic oblique
代码:
.QPushButton{
background: white;
/* width: 75px;
height: 25px;*/
font-family: sans-serif;
font-style:italic;
}
italic 和 oblique 的区别
font-style 非常简单:用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。
斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。
2.3字体加粗
font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。
如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。
效果如下:
.QPushButton{
background: white;
/* width: 75px;
height: 25px;*/
font-family: sans-serif;
font-style:italic;
/* font-style:oblique;*/
/* font-style:normal;*/
font-weight:bold;
}
数值:
0 500 900
.QPushButton{
background: white;
/* width: 75px;
height: 25px;*/
font-family: sans-serif;
font-style:normal;
font-weight:500;
}
2.4字体大小
font-size 属性设置文本的大小。
有能力管理文本的大小在 web 设计领域很重要。但是,您不应当通过调整文本大小使段落看上去像标题,或者使标题看上去像段落。
请始终使用正确的 HTML 标题,比如使用 <h1> - <h6> 来标记标题,使用 <p> 来标记段落。
font-size 值可以是绝对或相对值。
绝对值:
- 将文本设置为指定的大小
- 不允许用户在所有浏览器中改变文本大小(不利于可用性)
- 绝对大小在确定了输出的物理尺寸时很有用
相对大小:
- 相对于周围的元素来设置大小
- 允许用户在浏览器改变文本大小
注意:如果您没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。
使用像素来设置字体大小
通过像素设置文本大小,可以对文本大小进行完全控制:
效果如下:
.QPushButton{
background: white;
/* width: 75px;
height: 25px;*/
font-family: sans-serif;
font-style:normal;
font-size:60px;
}
3.CSS定位
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
CSS 框模型概述
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
提示:背景应用于由内容和内边距、边框组成的区域。
内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:
在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图:
提示:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。
提示:外边距可以是负值,而且在很多情况下都要使用负值的外边距。
CSS 内边距(padding)
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
各边均可以使用不同的单位或百分比值:
内边距的百分比数值
前面提到过,可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的,这一点与外边距一样。所以,如果父元素的 width 改变,它们也会改变。
不设置内边距|设置内边距|padding-top: 20%
.QLabel{
background-image: url("://image/未标题-2.png");
background-position:center;
background-repeat: no-repeat;
/* background-attachment:fixed*/
/* padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;*/
}
CSS 内边距属性
属性 | 描述 |
---|---|
padding | 简写属性。作用是在一个声明中设置元素的所内边距属性。 |
padding-bottom | 设置元素的下内边距。 |
padding-left | 设置元素的左内边距。 |
padding-right | 设置元素的右内边距。 |
padding-top | 设置元素的上内边距。 |
CSS 边框(border)
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。
边框与背景
CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。
border-style属性值:
值 | 描述 |
---|---|
none | 定义无边框。 |
hidden | 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 |
dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
solid | 定义实线。 |
double | 定义双线。双线的宽度等于 border-width 的值。 |
groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
inherit | 规定应该从父元素继承边框样式。 |
定义多种样式
您可以为一个边框定义多个样式,例如:
p.aside {border-style: solid dotted dashed double;}
上面这条规则为类名为 aside 的段落定义了四种边框样式:实线上边框、点线右边框、虚线下边框和一个双线左边框。
我们又看到了这里的值采用了 top-right-bottom-left 的顺序,讨论用多个值设置不同内边距时也见过这个顺序。
定义单边样式
如果您希望为元素框的某一个边设置边框样式,而不是设置所有 4 个边的边框样式,可以使用下面的单边边框样式属性:
因此这两种方法是等价的:
p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}
注意:如果要使用第二种方法,必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前,简写属性的值就会覆盖单边值 none。
无边框:
.QPushButton{
background: white;
font-family: sans-serif;
font-style:normal;
font-weight:bold;
font-size:15px;
border-style: none;
}
4.CSS定位(Positioning)
4.1CSS 定位机制
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
在下面的章节,我们会为您详细讲解相对定位、绝对定位和浮动。
4.2CSS position 属性
通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。
position 属性值的含义:
static
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
4.3CSS 相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。
如下图所示:
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
4.4CSS 绝对定位
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样:
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
如下图所示:
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
对于定位的主要问题是要记住每种定位的意义。所以,现在让我们复习一下学过的知识吧:相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块。
注释:根据用户代理的不同,最初的包含块可能是画布或 HTML 元素。
提示:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。