qss使用指南

最新推荐文章于 2024-07-04 11:37:01 发布

CodeChecker

最新推荐文章于 2024-07-04 11:37:01 发布

阅读量3.2k

点赞数

分类专栏： Qt

本文链接：https://blog.csdn.net/qq_41605114/article/details/98883051

版权

Qt 专栏收录该内容

31 篇文章 10 订阅

订阅专栏

参考内容：

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；}

Part1：选择器（selector）：

Part1：子控件（Sub-Controls）

Part1：伪选择器（pseudo-states）

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 框模型概述

CSS 框模型

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

提示：背景应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

CSS 框模型实例

提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

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 像素的空间，也就是将元素向右移动。

如下图所示：

CSS 相对定位实例

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

4.4CSS 绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

如下图所示：

CSS 绝对定位实例

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。

提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

关于其他语法，见：https://www.w3school.com.cn/css/index.asp

CodeChecker

关注

0
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
qss使用指南

参考内容：qss样式表笔记大全(一)：qss名词解析（包含相关示例）：https://blog.csdn.net/qq21497936/article/details/79401577qss样式表笔记大全(二)：可设置样式的窗口部件列表（上）（包含相关示例）：https://blog.csdn.net/qq21497936/article/details/79423622qss样式表笔...
复制链接

扫一扫