简述
本文将概括不同属性类型的语法和含义。
属性类型集合
| 类型 | 语法 | 描述 |
|---|---|---|
| Alignment | { top | bottom | left | right | center }* | 水平和/或垂直对齐 |
| Attachment | { scroll | fixed }* | 滚动或固定附件 |
| Background | { Brush | Url | Repeat | Alignment }* | Brush、Url、Repeat和Alignment的序列 |
| Boolean | 0 | 1 | 真(1)或假(0) |
| Border | { Border Style | Length | Brush }* | 边框属性 |
| Border Image | none | Url Number{4}(stretch | repeat){0, 2} | 边框图像是由九部分组成的图像(左上、上中、右上、左中、中、右中、左下、下中、右下)。当需要一定大小的边界时，就按原样使用角部分，并拉伸或重复顶部、右侧、底部和左侧部分以生成所需大小的边界。详细信息请参考CSS3规范。 |
| Border Style | dashed | dot-dash | dot-dot-dash | dotted | double | groove | inset | outset | ridge | solid | none | 指定用于绘制边框的模式。详细信息请参考CSS3规范。 |
| Box Colors | Brush{1, 4} | Brush出现一到四次，分别指定顶部、右侧、底部和左侧边缘。如果未指定左侧颜色，则认为它与右侧颜色相同。如果未指定底部颜色，则认为它与顶部颜色相同。如果未指定右侧颜色，则认为它与顶部颜色相同。QLabel { border-color: red; } /* red red red red */ QLabel { border-color: red blue; } /* red blue red blue */ QLabel { border-color: red blue green; } /* red blue green blue */ QLabel { border-color: red blue green yellow; } /* red blue green yellow */ |
| Box Lengths | Length{1, 4} | Length出现一到四次，分别指定边框的顶部、右侧、底部和左侧边缘。如果未指定左侧长度，则认为它与右侧长度相同。如果未指定底部长度，则认为它与顶部长度相同。如果未指定右侧长度，则认为它与顶部长度相同。QLabel { border-width: 1px } /* 1px 1px 1px 1px */ QLabel { border-width: 1px 2px } /* 1px 2px 1px 2px */ QLabel { border-width: 1px 2px 3px } /* 1px 2px 3px 2px */ QLabel { border-width: 1px 2px 3px 4px } /* 1px 2px 3px 4px */ |
| Brush | Color | Gradient | PaletteRole | 指定调色板中的颜色、渐变或条目 |
| Color | rgb(r, g, b) | rgba(r, g, b, a) | hsv(h, s, v) | hsva(h, s, v, a) | #rrggbb | Color Name | 指定一个颜色为RGB(red， green，blue)或RGBA(red，green，blue，alpha)或HSV(hue，saturation，value)或HSVA(hue，saturation，value，alpha)或一个命名的颜色。rgb()或rgba()语法可用于0到255之间的整数值或百分比。hsv()或hsva()中的s，v和a的值必须在0到255范围内而h的值必须在0到359范围内。QLabel { border-color: red } /* opaque red */ QLabel { border-color: #FF0000 } /* opaque red */ QLabel { border-color: rgba(255, 0, 0, 75%) } /* 75% opaque red */ QLabel { border-color: rgb(255, 0, 0) } /* opaque red */ QLabel { border-color: rgb(100%, 0%, 0%) } /* opaque red */ QLabel { border-color: hsv(60, 255, 255) } /* opaque yellow */ QLabel { border-color: hsva(240, 255, 255, 75%) } /* 75% blue */ |
| Font | (Font Style | Font Weight){0, 2} Font Size String | 字体属性 |
| Font Size | Length | 字体大小 |
| Font Style | normal | italic | oblique | 字体样式 |
| Font Weight | normal | bold | 100 | 200 … | 900 | 字体粗细(重量) |
| Gradient | qlineargradient | qradialgradient | qconicalgradient | 指定渐变填充。有三种类型的渐变填充：线性渐变在开始点和结束点之间插入颜色；径向梯度渐变在一个圆圈内的焦点和结束点之间插入颜色；锥形渐变在中心点附近插入颜色。渐变是在对象边界模式下指定的。想象一下渲染渐变的方框，它的左上角在(0, 0)，它的右下角在(1, 1)。渐变参数将被指定为从0到1的百分比。这些值在运行时外推到实际的坐标。可以指定边框之外的值(例如-0.6或1.8)。警告：结束点必须按升序排列。QTextEdit { background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 white, stop: 0.4 gray, stop:1 green); } /* linear gradient from white to green */ QTextEdit { background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 white, stop: 0.4 rgba(10, 20, 30, 40), stop:1 rgb(0, 200, 230, 200)); } /* linear gradient from white to green */ QTextEdit { background: qconicalgradient(cx:0.5, cy:0.5, angle:30, stop:0 white, stop:1 #00FF00); } /* conical gradient from white to green */ QTextEdit { background: qradialgradient(cx:0, cy:0, radius: 1, fx:0.5, fy:0.5, stop:0 white, stop:1 green); } /* radial gradient from white to green */ |
| Icon | (Url (disabled | active | normal | selected)? (on | off)? )* | url 、QIcon::Mode和QIcon::State的列表。* { file-icon: url(file.png), url(file_selected.png) selected; } QMessageBox { dialogbuttonbox-buttons-have-icons: true; dialog-ok-icon: url(ok.svg); dialog-cancel-icon: url(cancel.png), url(grayed_cancel.png) disabled; } |
| Length | Number (px | pt | em | ex) ? | 一个数字后面跟着测量单位。CSS标准建议用户代理必须忽略带有非法值的声明。在Qt中，必须指定测量单位。为了与早期版本的Qt兼容，在大多数上下文中，不带测量单位的数字被视为像素。支持的测量单位：px，像素值；pt，一个点的大小(七十二分之一英寸)；em，字体的em宽度('M’的宽度)；ex，字体的ex宽度('x’的高度) 。然而，Qt被限制为字体大小使用pt和px，其他大小使用px、em或ex。 |
| Number | 十进制整数或实数 | 例如：0、18、+127、-255、12.23、-.5、0009 |
| Origin | margin | border | padding | content | 指示使用四个矩形中的哪一个。margin：边界矩形；border：边框矩形；padding：填充矩形；content：内容矩形。请参考盒子模型。 |
| PaletteRole | alternate-base | base | bright-text | button | button-text | dark | highlight | highlighted-text | light | link | link-visited | mid | midlight | shadow | text | window | window-text | 这些值对应小部件的QPalette中的颜色角色。QPushButton{ color: palette(dark); } |
| Radius | Length{1, 2} | 长度出现一到两次。如果只指定一个长度，它被用作定义角的四分之一圆的半径。如果指定了两个长度，则第一个长度是四分之一椭圆的水平半径，而第二个长度是垂直半径。 |
| Repeat | repeat-x | repeat-y | repeat | no-repeat | 指示重复性质的值。 repeat-x：水平方向重复；repeat-y：垂直方向重复；repeat：水平和垂直方向重复；no-repeat：不重复 |
| Url | url(filename) | 文件名是本地磁盘或使用Qt资源系统存储的文件的名称。设置图像会隐式设置其宽度和高度。 |
参考
参考Qt助手，如有错误，请指正，谢谢！