JXSS 用来决定 JXML 的组件显示的样式,JXSS 具有 CSS 大部分特性,可以理解为 CSS 的子集,同时为了更适合开发京东小程序,JXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比,JXSS 扩展的特性有:
- 样式导入
尺寸单位
- rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上,屏幕宽度为 375px,共有 750 个物理像素,则 750rpx = 375px = 750物理像素,1rpx = 0.5px = 1 物理像素。
注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。
样式导入
使用 语句可以导入外联样式表, 后跟需要导入的外联样式表的相对路径,用表示语句结束。
内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
- class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。
选择器
目前支持的选择器有:
选择器 | 样例 | 样例描述 |
---|---|---|
.class | .desc | 选择所有拥有 class="desc" 的组件 |
#id | #name | 选择拥有 id="name" 的组件 |
element | view | 选择所有 view 组件 |
element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
::after | view::after | 在 view 组件后边插入内容 |
::before | view::before | 在 view 组件前边插入内容 |