2026/6/10 2:55:14
网站建设
项目流程
成都网站建设交易,好看的html,校园二手网站开发,电子商务网站建设作业代码目录样式表1#xff0c;样式表基本语法1.1 选择器2#xff0c;盒子模型2.1 概述2.2 制作相框样式表
setStyleSheet() 设置样式表函数。
1#xff0c;样式表基本语法
QPushButton{color:red;background-color:yellow
}整个QSS语句由两部分组成#xff0c;选择器#xff…目录样式表1样式表基本语法1.1 选择器2盒子模型2.1 概述2.2 制作相框样式表setStyleSheet()设置样式表函数。1样式表基本语法QPushButton{ color:red; background-color:yellow }整个QSS语句由两部分组成选择器属性。选择器表示对哪些控件进行样式的设置也就是要设置样式的对象。1.1 选择器通用选择器// * 代表所有控件 *{font-size: 20pt;}类选择器QPushButton{font-size: 20pt;} QPushButton,QLable{font-size: 20pt;}ID选择器,也可以称为对象选择器//表示所有QPushButton类对象字体大小设置成 20pt 但是名为 btn1 的对象大小设置为 40pt QPushButton{font-size: 20pt;} QPushButton#btn1{font-size: 40pt;}属性选择器QPushButton{font-size: 20pt;} //[] 内为属性的筛选 QPushButton[flattrue]{font-size: 40pt;}后代选择器//指定只有QFrame的直接后代QPushButton不包括后代的后代QPushButton QFrame QPushButton{ font-size: 20pt; color:red; } //表示QFrame的·所有后代 QPushButton 包含后代的后代 QFrame QPushButton{ font-size: 20pt; color:red; }子控件选择器//indicator表示QCheckBox的子控件 QCheckBox::indicator{border:2px solid rgb(255,255,0); width: 30px;height: 30px;}状态选择器//hover表示鼠标悬停在QCheckBox上面 QCheckBox:hover{color:blue;}2盒子模型2.1 概述外边框(MARGIN)边框(BORDER)内边框(PADDING)内容(CONTENT)在使用样式表时每个部件都被视为一个包含四个同心矩形的盒子外边距矩形、边框矩形、内边距矩形和内容矩形。盒模型对此有更详细的描述。盒模型这四个同心矩形在概念上的呈现如下外边距位于边框之外。边框绘制在外边距和内边距之间。内边距位于边框之内在边框与实际内容之间。内容是在我们去除外边距、边框和内边距后原始部件或子控件剩余的部分。外边距、边框宽度和内边距属性的默认值均为零。在这种情况下四个矩形外边距、边框、内边距和内容完全重合。1可以使用 background-image 属性为部件指定背景。默认情况下背景图像仅绘制在边框内部的区域。这可以通过 background-clip 属性进行更改。你可以使用 background-repeat 和 background-origin 来控制背景图像的重复方式和起始位置。2背景图像不会随部件大小缩放。要提供一个随部件大小缩放的 “皮肤” 或背景必须使用 border-image。由于 border-image 属性提供了一种替代背景因此在指定 border-image 时无需指定 background-image。如果同时指定了这两个属性则 border-image 会绘制在 background-image 之上。此外image 属性可用于在 border-image 上绘制图像。指定的图像不会平铺或拉伸当其大小与部件大小不匹配时使用image - position属性指定其对齐方式。与 background-image 和 border-image 不同在 image 属性中可以指定一个 SVG在这种情况下图像会根据部件大小自动缩放。渲染一条规则的步骤如下为整个渲染操作设置裁剪border - radius绘制背景background-image绘制边框border-imageborder绘制覆盖图像imagebackground-image:url(D:/path/pic.jpg); border-image:url(D:/path/pic.jpg); image:url(D:/path/pic.jpg); image-positon:top left子控件一个部件被视为一个由相互叠加绘制的子控件组成的层次结构树。例如QComboBox 会先绘制下拉子控件然后绘制下箭头子控件。因此QComboBox 的渲染方式如下渲染 QComboBox { } 规则渲染 QComboBox::drop - down { } 规则渲染 QComboBox::down - arrow { } 规则子控件具有父子关系。以 QComboBox 为例下箭头的父控件是下拉控件而下拉控件的父控件是部件本身。子控件使用 subcontrol - position 和 subcontrol - origin 属性在其父控件内进行定位。定位完成后可以使用盒模型对子控件进行样式设置。注意对于像 QComboBox 和 QScrollBar 这样的复杂部件如果自定义了一个属性或子控件那么所有其他属性或子控件也必须进行自定义。2.2 制作相框border:10px solid brown; border-radius:40px; //圆角 background-color:lightyellow;