变量和属性Variables and Attributes
2024-07-18 17:21:03
变量和属性
CSS 变量
声明
Sciter 支持两种形式的变量声明:
--name : ...
- 默认的CSS变量声明表单;var(name) : ...
- Sciter的人体工程学形式;
例子:
body {
var(text-color): #000;
var(base-width): 100px;
/* 4.4.8.0+ */
--text-color: #000;
--base-width : 100px;
}
用法
变量从父项遗传给子项。
变量可用于其他属性值声明 - 使用以下任一方法需要字符串、颜色或长度单位的所有位置:
var(name,defaultValue)
- 如果未声明名称,则用 defaultValue 替换声明;length(name)
- Sciter的长度可变专业化形式;color(name)
- Sciter的颜色变量专业化形式;
变量使用示例:
div {
color: color(text-color); /* #000 */
width: length(base-width); /* 100px */
height: var(base-height,80px); /* 80px as base-height was not defined */
font-size: var(--base-width); /* 100px */
}
CSS 属性
attr(name) 声明
在 Sciter 中,您可以在 CSS 中定义属性的默认值,以便使用 attr(name) : "..."
声明匹配 DOM 元素:
select div {
attr(role) : "option";
}
像这样的声明允许消除 HTML 中的可重复声明,如下所示:
<select|list>
<div role="option">...</div>
<div role="option">...</div>
...
</select>
注意
基于 CSS 的 DOM 属性声明纯粹是 Sciter 的功能,标准 CSS 没有提供任何接近的东西。
attr(name) 用法
attr(name)
“function” 还可以用作 content 属性的值和其他 attr(name) 声明的值。
如果您有
<button value="Press me!" />
然后用风格
button {
content: attr(value);
}
您将看到带有“Press me!”文本的按钮。
注意
Sciter 还支持 parent-attr(name)
从父元素获取属性名称值的值函数。