CSS+QSS

Posted on Views:

CSS

CSS介绍

CSS指的是层叠样式表（Cascading Style Sheets）由于HTML具有很多局限性，只关注内容的语义，导致页面很丑。而CSS是一种描述元素外观和样式的标记语言，用于控制网页布局、字体、颜色、背景等视觉效果，从而加以美化

CSS的最大价值：使HTML专注去做结构呈现，样式由CSS来完成，即结构（HTML）和样式（CSS）相分离

CSS语法

语法规范

CSS规则主要由两部分构成：选择器+一条或多条声明。即：用选择器选出网页元素，使用声明对其样式进行修改，一个声明的结构是属性:属性值，以键值对的形式

CSS的标签是style，写在head标签里，举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: red;
            font-size: 100px;
        }
    </style>
</head>

<body>
    <p>你好</p>
</body>

代码风格

以下代码风格不是强制规范，而是符合实际开发的书写方式

样式格式

  • 紧凑格式：所有声明写在同一行

  • 展开格式：每个声明单独一行

首选以展开格式书写，方便修改。虽然浪费，但后续有方法压缩代码

样式大小写

选择器，属性和属性值全部使用小写字母（特殊情况除外）虽然全部大写不影响运行，但看着不方便

样式空格

两个地方保留空格：键值对的冒号后面、选择器与大括号之间

CSS选择器

选择器用于定位和选择HTML元素，它可以是元素的标签名、类名、ID等。分为两大类（更多选择器见菜鸟

基础选择器

由单个选择器组成

  • 标签选择器，无需调用

优点：能快速为页面中同类型的标签设置统一样式；缺点：不能差异化样式，只能选择全部的标签

  • 类选择器（在开发中最常用）：可以单独选一个或者某几个标签

语法：.类名 {声明}，然后在想要应用此样式的标签中加上class属性，即class="" 不要使用标签名、纯数字、中文作为类名，命名规范：。

一个标签也可以指定多个类名，使用时用空格分开，如<div calss="red green"></div>

  • id选择器，选择标有特定id的元素

语法：#id名 {声明}，调用时设置id属性，即id=""。与类选择器的区别：每个html文档中只能调用一次，即每个元素的id值都是不相同的。但这只是一个规范，实际开发中需要遵循，并且通常和js配合使用

  • 通配符选择器，选择页面中所有标签

语法：* 声明{}，无需调用，直接生效。使用场景：盒子模型

复合选择器

CSS字体属性

  • font-family设置字体
    • 如font-family=微软雅黑，有时为了考虑兼容性，不使用中文来指定字体，而是使用英文Microsoft Yahei，由于中间有空格，则需要使用引号括起来，即 font-family: "微软雅黑";
    • 如果要设置多个字体，每个字体用逗号分割，多个字体并不是为了叠加，而是一种保险，当用户浏览器去读取字体时，先看第一个，如果系统存在这种字体，那就以这种字体显示，否则就看第二个，如果都没有，那就以浏览器默认字体微软雅黑进行显示
    • 如果需要页面全部显示一种字体，通常直接选择body标签进行字体设置
  • font-size设置文字大小
    • 常用单位是px(pixel)像素，如font-size=20px
    • 不同浏览器的默认文字大小可能不一致，通常需要明确文字大小
    • 同理，选择body标签直接修改文字大小，而标题标签h比较特殊，需要单独指定文字大小
  • font-weight设置字体粗细
    • 如font-size=bold，实际开发中通常用数字表示粗细，如font-size=700，注意这里的数字不需要单位。bold对应700，normal对应400。所以可以修改标题标签，使之不加粗
  • font-style设置文字样式

默认值normal，斜体是italic。但在实际开发中很少给文字加斜体，更多的是把倾斜的改为不倾斜

  • 文字复合属性

如果想把p标签添加文字样式，以前的做法通常是：

1
2
3
4
5
6
p {
	font-style: italic;
	font-weight: 700;
	font-size: 16px;
	font-family: 宋体;
}

代码太繁琐，可以使用复合属性，但是具有格式要求：font: font-style font-weight font-size/line-height font-family，用空格分隔且不能更换顺序，所以以上代码可以改成：

1
2
3
p {
font: italic 700 16px 宋体
}

注意，使用font属性时必须保留font-size和font-family，否则font属性不会生效

CSS文本属性

可以定义文本的颜色、对齐、装饰、缩进、行间距等

  • 文本颜色：color属性，值有多种表示方法：已经预定义的，如red,green；十六进制，如#FF0000；RGB值，如rgb(255,0,0)或rgb(100%,0%,0%)。通常使用吸管工具。开发中通常使用十六进制
  • 对齐文本：text-align属性设置水平对齐方式。默认值left；居中center；右对齐right。本质上是个盒子
  • 装饰文本：text-decoration。默认值none；下划线underline；上划线overline（几乎不用）；删除线line-throught

此属性可以用来修饰超链接

  • 缩进文本：text-indent，属性值为像素值（精确单位），注意只能缩进首行，如text-indent:20px;，甚至可以为负值；有个更方便的单位：em是一个相对单位，直接得到当前段落文字的大小，所以如果要缩进两个字符，直接2em即可
  • 行高：line-height:26px;由三部分组成：上间距+文字高度+下间距，当文字高度为16px时，上下间距各分得5px

CSS引入方式

行内样式表（行内式）

在元素标签内部的style属性中设置CSS，适用于修改简单样式，只能控制当前标签，且权重最高

1
<div style="color:red; font-size:12px">CSS</div>

内部样式表（嵌入式）

直接写在html文件的style标签中的。style标签理论上可以放在html的任何一个地方，但一般都会放在head标签中

此方式可以控制当前整个html页面中的元素（也就是一个页面）

外部样式表（链接式）

实际开发中用的最多，真正意义上实现结构和样式互相分离，可以控制多个页面

  1. 新建.css文件，编写css代码
1
2
3
div{
    color:pink;
}

直接写样式，不需要style标签

  1. 在html文件中通过link标签引入此css文件

<link rel="stylesheet" herf="css路径">此标签放在head标签中

rel属性还可以有其他属性值：

  • icon:<link rel="icon" href="favicon.ico">指定网站的图标，通常是一个ico文件
  • alternative stylesheet:<link rel="alternate stylesheet" type="text/css" href="alternate-styles.css" title="Alternate Styles">备用样式表，允许用户切换不同·样式，通常与js一起使用

图标库

要使用Font Awesome图标，需要引入css，有两种方式，CDN或者本地，推荐CDN：

  • 国内CDN：<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
  • 海外CDN：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

使用

前缀fa和图标的名称，举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>

<body>
    <i class="fa fa-car"></i>
    <i class="fa fa-car" style="font-size:48px;"></i>
    <i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>

</html>

关于为什么fa图标要放在i标签里：因为图标字体库通常是通过斜体的字体样式来呈现图标，但这种做法实际上是不语义的，i是用来表示斜体文本的，而不是图标。在HTML5中，更加语义化的做法是使用无语义的元素（如<span>或<i>）来包装图标

QSS

QSS（Qt Style Sheets）是Qt框架中用于定制和美化用户界面外观的一种机制，类似于CSS，但不如CSS强大，介绍一些相关概念：

.qrc文件

是Qt中的资源文件Qt Resource Collection，可以将资源（如图像、音频文件、样式表等）捆绑到应用程序中，便于访问和管理

是一个xml格式的文本文件，包含了资源的描述和路径信息，这对于确保.exe在不同操作系统和环境中具有一致的资源访问。举例：

1
2
3
4
5
6
7
8
<!DOCTYPE RCC>
<RCC version="1.0">
    <qresource>
        <file>images/logo.png</file>
        <file>data/data.txt</file>
        <file>styles/style.css</file>
    </qresource>
</RCC>

指定了三个资源文件。更进阶的：使用<qresource>的prefix属性可以对不同类型的资源进行分组，使用<file>标签的alias属性为其创建别名：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE RCC>
<RCC>
    <qresource prefix="icons">
        <file alias="Py2exe-GUI_icon">Icons/Py2exe-GUI_icon_72px.png</file>
        <file alias="Python_icon">Icons/Python_icon.ico</file>
    </qresource>
    <qresource prefix="texts">
        <file alias="About_Text">Texts/About_zh.md</file>
    </qresource>
</RCC>

在vscode中安装插件Qt for Python，可以提供对qrc、qss等文件的语法高亮

直接在vscode中编写复杂的qrc文件较为繁琐，易出错，可以用qt designer选择资源文件，直接生成qrc文件

qrc文件的使用

在pycharm中使用pyrcc工具将其编译为py文件，意味着在代码中以二进制形式存储图标、QSS、txt等文件，使用这种资源管理可以有效防止资源文件丢失，在打包的时候很实用

访问资源

  1. 导入模块import 文件名_rc.py

Pycharm等IDE可能将此行代码判断为“未使用的import语句”提示一个弱警告，可以在该行末尾添加# type: ignore注释来告知静态检查器忽略此行，消除这种不必要的警告

  1. 把文件路径（相对路径/绝对路径）替换为资源路径

资源路径由qrc文件决定：

  • 一般情况，直接在文件名前添加:/即可（:代表了资源路径的前缀），如icon = QPixmap(":/Python_icon.ico")
  • 对于有前缀进行分组的，则要添加:/$prefix$/作为资源路径，如icon = QPixmap(":/icons/Python_icon.ico")
  • 对于指定了别名的，就使用别名来替换（可以不带后缀）
1
2
3
<qresource prefix="icons">
    <file alias="Py_ico">Icons/Python_icon.ico</file>
</qresource>

访问：icon = QPixmap(":/icons/Py_ico")

对于图片，在实例化类的时候直接把资源路径作为参数传入即可，但如果要读取如txt文本文件，就不能用内置的open函数，而是使用QFile或QDir读取编译后的资源文件，如fi = QFile(":/texts/About_Text")

加载QSS文件

直接引用相对路径下的qss文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class QSSLoader:
    def __init__(self):
        pass

    @staticmethod
    def read_qss_file(qss_file_name):
        with open(qss_file_name, 'r',  encoding='UTF-8') as file:
            return file.read()
if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    main_window = MainForm()
    style_file = 'style.qss'
    style_sheet = QSSLoader.read_qss_file(style_file)
    main_window.setStyleSheet(style_sheet)
    main_window.show()
    sys.exit(app.exec_())

加载资源文件中的qss文件

此时路径为:/style/style.qss再传入open函数就会报错，用官方给的方式QFile进行读取：

1
2
3
4
5
6
7
8
9
10
11
12
13
import yyy_rc

qss_file = QFile(":/style/style.qss")
    if qss_file.open(QFile.ReadOnly):
        # 使用 QTextStream 读取文件内容
        stream = QTextStream(qss_file)
        qss_content = stream.readAll()
        # 关闭文件
        qss_file.close()
        # 应用 QSS 样式
        main_window.setStyleSheet(qss_content)
    else:
        print("无法打开 QSS 文件")

注意：一定要导入pyrcc之后的模块，尽管没有被显式使用，主要是为了让Qt框架知道这些资源存在的位置

开源样式

自己编写qss文件…还没有那种能力，但是网上有现成的开源样式，不用白不用

Qt-Material

安装：pip install qt-material，详细用法见README，非常详细

图标库

QtAwesome 是一个用于 Qt 应用程序的图标字体库，包含了来自各种流行图标集（如 FontAwesome、Material Design Icons 等）的图标，这些图标可以通过字体方式添加到按钮、标签、工具栏等 Qt 控件中

安装：conda install qtawesome

1
2
3
4
5
from qtawesome import icon

button = QPushButton("My Button")
# 使用 QtAwesome 的 icon 方法来获取一个图标对象，"fa" 表示 FontAwesome 图标集，"icon_name" 是图标的名称
button.setIcon(icon("fa.icon_name"))