CSS

rpx

ASCF框架样式支持rpx (responsive pixel)单位，rpx单位根据屏幕宽度进行自适应，规定屏幕宽度为750rpx。

样式导入

使用@import语句可以导入外联样式表。@import后需要加上外联样式表路径，用“;”表示结束。

示例代码：

/** /page/common/index.css **/
.import-color {
    color: red;
}

/** /page/index/index.css **/
@import "/page/common/index.css";
.classColor {
    color: blue;
}

内联样式

支持使用style、class属性来控制组件的样式。

示例代码：

• style：用于接收动态样式，样式在运行时会进行解析。

  收起

  自动换行

  深色代码主题

  复制

  <view style="color:{{styleColor}};" />

• class：用于指定样式规则。属性值是样式规则中类选择器名（样式类名）的集合，样式类名不需要带上“.”，样式类名之间用空格分隔。

  收起

  自动换行

  深色代码主题

  复制

  <view class="classColor" />

选择器

目前支持的选择器有：

全局样式与局部样式

• 定义在app.css中的样式为全局样式，所有页面和自定义组件内均可使用。

• 页面文件夹内的.css文件中定义的样式为局部样式，只作用于对应的页面，会覆盖app.css中相同的选择器样式。